Du ska i denna laboration skapa mappar för allt material som du kommer ladda ner i kursen. Du ska också se på hur du hanterar filer och öva på att skriva relativa adresser, för att referera till filer.
Mappar för kursens material
I kursen kommer du både skapa många egna filer och ladda ner en hel del exempel och andra dokument för föreläsningar och laborationer. Du bör därför redan nu skapa mappar för att organisera allt material. Ett förslag är att du gör följande:
- Skapa en mapp på skrivbordet på din dator och kalla den Webbteknik 1 eller annat lämpligt namn.
- I mappen skapar du mappar för Egna exempel, Föreläsningar, Laborationer och Uppgifter.
- Mappen L1, med arbetsmaterialet för den här labben, lägger du i mappen Laborationer.
Visa filändelser
Ställ in så att filändelser alltid visas. Du gör detta genom nedanstående punkter.
-
I operativsystemet öppnar du mappen files som finns i mappen L1. Där finns några filer med olika ändelser, så att du kan se resultatet, då du gör följande:
-
MacOS
- Ta fram Inställningar i menyn Finder.
- Klicka på fliken Avancerat och se till att alternativet Visa alla filnamnstillägg är förbockat.
-
Windows
- Välj Ändra mapp- och sökalternativ i menyn Arkiv.
- Klicka på fliken Visning och se till att alternativet Dölj filnamnstillägg för kända filtyper inte är förbockat. Är det en bock i rutan, tar du bort den och klickar på knappen Verkställ.
-
Relativa adresser
Du ska nu öva på att skriva relativa adresser till bildfiler.
I den här delen av labben kommer du att, kanske för första gången, jobba i en html-fil. Det kan se ganska komplicerat ut om du aldrig arbetat med kod innan. Redan i nästa vecka skall vi bektanta oss med hur html-filer är uppbyggda, men för nu räcker det att veta att bilder representeras av <img src="adress_till_bild" ...>, där adress_till_bild är sökvägen till bilden, relativt html-filens plats.
-
Öppna mappen fruits i Visual Studio Code (VSC).
-
Klicka på filen index.html och öppna den i Live Server. Kontrollera att du ser bilder på fem frukter.
-
Flytta en bildfil till en ny mapp
- Skapa en mapp kallad exotic i mappen fruits och flytta filen pineapple.png dit.
- Uppdatera adressen till bilden i filen index.html, så att bilden visas på sidan igen.
-
Flytta flera bildfiler
- Skapa en mapp kallad swedish i mappen img och flytta apple.png och pear.png dit.
- Uppdatera adresserna till bilderna i filen index.html, så att de visas på sidan igen.
-
Bilder på en annan sida
- Öppna filen exotic.html i VSC och Live Server. Uppdatera adressen till bilden med en ananas, så att den visas.
- Flytta filen exotic.html till mappen exotic.
- Filen kan då inte längre visas i webbläsaren, så stäng webbläsarens fönster (flik) och öppna exotic.html i Live Server igen.
- Uppdatera adresserna till bilderna i filen exotic.html, så att de visas på sidan.
-
Fortsätt nu att på egen hand flytta filer och uppdatera adresser, tills du känner dig säker på hur adresserna ska skrivas.
Klar
Detta var sista delen i laboration 1. Nu är det dags att titta igenom Uppgift 1 och utför den första delen av uppgiften.