I denna laboration ska du skapa länkar mellan de sidor du skapat i föregående delar av lab 2. Du ska också lägga in några bilder på sidorna. I både länkar och bilder använder du referenser till andra dokument, så detta blir också en övning i att skriva adresser.
5 min.
Navigeringslänkar
- I page3.html har du tidigare lagt in en
ul-lista med texterna Sida1 till Sida3 inav-elementet. Gör nu om dessa till länkar till de tre sidorna, dvs dokumenten index.html, page2.html och page3.html.- Du ska alltså även ha en länk till page3.html, trots att den ligger i filen page3.html.
- Kopiera både
header- ochnav-elementen (inklusive deras innehåll) till filerna index.html och page2.html. I dessa filer uppdaterar du rubriken iheader, så det blir rätt sidnummer. - Öppna en av sidorna i Live Server och testa att navigera mellan sidorna, genom att klicka på länkarna.
Experiment med relativa adresser
- I
footer-elementet i page3.html lägger du in en länk till sidan lab2.html, som finns i mappen about. Använd en relativ adress.- Testa att länken fungerar och kopiera sedan hela
footer-elementet till filerna index.html och page2.html.
- Testa att länken fungerar och kopiera sedan hela
- I filen lab2.html finns två
a-element med texterna "Felsidan" och "Startsidan", men det står inga adresser ihref-attributen. Lägg nu in relativa adresser till filen e1.html (som finns i mappen errors) respektive index.html.- Testa i webbläsaren att länkarna fungerar.
Bilder
- På sidan index.html lägger du in en bild på en fjäril av de som finns i mappen butterflies i mappen img. Använd en relativ adress som utgår från HTML-dokumentets placering.
- Justera storleken på bilden, genom att lägga in värden i
width- ochheight-attribut iimg-elementet. För att behålla bildens propotioner använder du endast ett av attributen. - På sidan lab2.html lägger du också in en valfri bild som finns i mappen img. Använd en relativ adress som utgår från HTML-dokumentets placering. Justera storleken av bilden vid behov.
Länkar inom sidan
- Lägg till tre
section-element med två textstycken vardera med Lorem ipsum-text, inommain-elementet på sidan page3.html.- Använd t.ex.
section*3>p*2>Lorem500+ tab
- Använd t.ex.
- I början av varje
sectionlägger du in etth2-element med texterna Avsnitt 1, Avsnitt 2 och Avsnitt 3. - I varje
h2-elementen lägger du också in ettid-attribut, t.ex.id="a1",id="a2", … - Ovanför den första
section, lägger du in enul-lista med tre länkar till#a1,#a2och#a3. Ia-elementen ska alltsåhref-attributet varahref="#a1", etc. - Kontrollera i webbläsaren att länkarna fungerar och scrollar sidan till de olika avsnitten.
Länk till en extern sida
- I page3.html lägger du någonstans till en länk till en extern sida, t.ex. adressen "https://webbriktlinjer.se/lankar-adressering/" eller annan valfri sida på webben.
- Lägg in attributet
target="_blank", så att länken öppnas i ett nytt fönster (eller flik, beroende på användarens inställningar i sin webbläsare). - Testa i webbläsaren att länken fungerar.
Länkar med bild som ankare
- Lägg in en länk med en
img-tagg mellan start- och sluttagg i länken. Välj valfri bild i mappen img och lägg inwidthellerheightiimg-taggen, för att ge bilden lämplig storlek. Länken kan gå till valfri sida på webben.img-taggen ska alltså ligga mellan start- och sluttagg ia-elementet.
- Testa i webbläsaren att länken fungerar, då du klickar på bilden.
Kolla att allt är OK
- Testa i webbläsaren att alla länkar fungerar och bilderna visas.
- Validera koden på https://validator.nu/ och rätta eventuella fel.
Klar
Om du tycker att du behöver öva mer på länkar och adressering, fortsätter du med egna experiment i de tre sidorna. Titta sedan på exemplet på sidan "Exempel" i navigeringen högst upp på sidan. Därefter fortsätter du med att skapa HTML-dokument i uppgift U1.