Webbteknik 1

Laboration 2D

Länkar, bilder och adresser

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.

  • I page3.html har du tidigare lagt in en ul-lista med texterna Sida1 till Sida3 i nav-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- och nav-elementen (inklusive deras innehåll) till filerna index.html och page2.html. I dessa filer uppdaterar du rubriken i header, 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.
  • I filen lab2.html finns två a-element med texterna “Felsidan” och “Startsidan”, men det står inga adresser i href-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- och height-attribut i img-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, inom main-elementet på sidan page3.html.
    • Använd t.ex. section*3>p*2>Lorem500 + tab
  • I början av varje section lägger du in ett h2-element med texterna Avsnitt 1, Avsnitt 2 och Avsnitt 3.
  • I varje h2-elementen lägger du också in ett id-attribut, t.ex. id="a1", id="a2", …
  • Ovanför den första section, lägger du in en ul-lista med tre länkar till #a1, #a2 och #a3. I a-elementen ska alltså href-attributet vara href="#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://www.digg.se/webbriktlinjer/alla-webbriktlinjer/skriv-tydliga-lankar” 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 in width eller height i img-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 i a-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.w3.org/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 också på veckans exempel, där du kan se allt vi gått igenom den här veckan användas i praktiken.