Webbteknik 1

Laboration 2C

Formatering av text och gruppering med strukturelement

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 3).

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 och title-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, start och reversed i ol-listan.

  • Skriv in en inre ul-lista under ett av landskapen i ol-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 en ul-lista, men det kan lika gärna vara tvärtom, eller båda kan vara ol- eller ul-listor.

  • Validera på https://validator.w3.org/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, b och i.
  • Lägg in några entiteter i texten, t.ex. för tecknen i dessa texter: ½ deciliter, b<a, x&y.
  • 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 och title-elementet på samma sätt som tidigare.

  • Öppna sidan i Live Server.

  • Lägg in elemententen nav, header, main och footer inom body-elementet.

    • I header lägger du en huvudrubrik med h1 och en underrubrik med h2. T.ex. med texterna “Laboration L2” respektive “Sida 3”.
    • I nav lägger du in en ul-lista med texten Sida 1, Sida 2 och Sida 3.
      • Dessa ska sedan bli länkar i lab L2d.
    • I main lägger du ett par textstycken med lite Lorem ipsum-text.
    • I footer lägger du in någon liten text för sidfoten, t.ex. “Laboration L2 i Webbteknik 1”

  • Validera och rätta eventuella fel.

Klar