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.
8 min.
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, som du laddade ner under Arbetsmaterial på sidan för lab L1a, 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.
- MacOS
Relativa adresser
Du ska nu öva på att skriva relativa adresser till bildfiler.
- Ö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 labben i laboration L1. Men det finns en föreläsning kvar, så gå nu vidare med att titta igenom föreläsning F1d. Därefter tittar du igenom uppgift U1 och utför den första delen av uppgiften.