Du ska i denna laboration öva på några element för att formatera texten samt några element för att strukturera innehållet på sidan. De sistnämnda elementen ger inget synligt resultat i webbläsaren, utan är en förberedelse, för att sedan kunna skapa en layout ned CSS (som kommer i lab L3).
4 min.
Nytt HTML-dokument
- Skapa en ny fil i mappen L2 och kalla den page2.html
- Lägg in grundstrukturen för HTML, ändra
lang-attributet ochtitle-elementet på samma sätt som du gjorde i lab L1a. - Lägg in en
h1-rubrik med lämplig text. - Öppna sidan i Live Server, så att du ser resultatet i webbläsaren.
Listor
- Skriv in en
ul-lista med några färger. - Skriv in en
ol-lista med några landskap. - Experimentera med attributen
type,startochreversediol-listan. - Skriv in en inre
ul-lista under ett av landskapen iol-listan och lägg in tre städer.- Du skapar därmed en nästlad lista (eng. nested list), där du har en yttre lista med landskapen och en inre lista med städer.
- I detta fall är den yttre listan en
ol-lista och den inre enul-lista, men det kan lika gärna vara tvärtom, eller båda kan varaol- ellerul-listor.
- Validera på https://validator.nu/ och rätta eventuella fel.
Ytterligare formatering av texten
- Lägg in två textstycken (
p-element) med Lorem ipsum-text. - Mellan textstyckena lägger du in ett
blockqoute-element med någon text. - Markera några ord eller avsnitt av texten i ett textstycke och markera dem med element som
em,strong,bochi. - Lägg in några entiteter i texten, t.ex. för tecknen i dessa texter: ½ deciliter, b<a, x&y.
- På W3C:s webbplats finns en lista på entiteter.
- Validera och rätta eventuella fel.
Element för att organisera sidans innehåll
- Skapa ett tredje HTML-dokument och kalla det page3.html
- Lägg in grundstruktur för HTML, ändra
lang-attribut ochtitle-elementet på samma sätt som tidigare. - Öppna sidan i Live Server.
- Lägg in elemententen
nav,header,mainochfooterinombody-elementet.- I
headerlägger du en huvudrubrik medh1och en underrubrik medh2. T.ex. med texterna "Laboration L2" respektive "Sida 3". - I
navlägger du in enul-lista med texten Sida 1, Sida 2 och Sida 3.- Dessa ska sedan bli länkar i lab L2d.
- I
mainlägger du ett par textstycken med lite Lorem ipsum-text. - I
footerlägger du in någon liten text för sidfoten, t.ex. "Laboration L2 i Webbteknik 1"
- I
- Validera och rätta eventuella fel.
Klar
Gå nu vidare med föreläsning F2d och därefter laboration L2d.