Struktur

En webbsidas struktur anvÀnds till att samla element och definiera dess omrÄden. De flesta webbsidor ser nÄgorlunda olika ut, men de innehÄller nÀstan alla liknande komponenter. Det Àr viktigt och praktiskt att lÀra sig detta och att följa den strukturen.

Strukturen skapas med ett antal semantiska element. Det hjÀlper oss att ytterligare definiera dessa komponenter.

Komponenter

Försök identifiera komponenterna pÄ SVT Nyheter.

Sidhuvud

Ett sidhuvud Àr en del av sidan som ofta följer med mellan webbplatsens olika sidor. Det kan vara en logotyp eller liknande. Logotypen bör vara en lÀnk som tar anvÀndaren tillbaka tills startsidan. Ofta kombineras det med sidans navigation och dÄ kan det vara sÄ att enbart elementet för navigationen anvÀnds. För ett sidhuvud sÄ anvÀnds elementet <header>.

Navigation

I navigationen finns det oftast lÀnkar till webbplatsens huvudsektioner. LÀnkarna i en navigation skrivs ofta som text, tabbar eller knappar. Det Àr viktigt att vara konsekvent i sidans navigation för att göra det sÄ anvÀndbart som möjligt. Försök Àven om möjligt ge anvÀndaren en indikation pÄ vilken sida som Àr den aktiva i navigationen. Elementet för navigationen Àr <nav>.

HuvudinnehÄll

Sidans huvudinnehÄll samlas ofta under elementet <main>. InnehÄllet kommer att varierar frÄn sida till sida. Elementet kan i sin tur vara uppdelat i ett antal sektioner. I innehÄllets sektioner kan vi i sin tur anvÀnda komponenter vid behov, som ett sidhuvud.

SidofÀlt

Ofta finns det ytterligare information pÄ en webbplats som behöver samlas. Ett sÀtt att göra det Àr att placera dem i ett sidofÀlt. Det semantiska elementet för ett sidofÀlt Àr <aside>. Ett sidofÀlt kan vara placerat i sidans innehÄllstagg.

Sidfot

Sist kommer en sidfot, oftast en rad lÀngst ned pÄ sidan dÀr det samlas information om sidan. Kontaktuppgifter, copyright och sÄ vidare. Elementet för en sidfot Àr <footer>.

Koda en sidstruktur

Precis som att det finns en grundmall för ett HTML dokument sÄ kan vi skapa en liknande grund för komponenterna. HÀr nedan följer en grund för SVT Nyheter utifrÄn bilden.

Koden pĂ„ svt.se Ă€r lĂ„ngt mer komplex Ă€n exemplet, bland annat pĂ„ grund av olika tekniker pĂ„ bĂ„de klient och server. Är du nyfiken pĂ„ webbsidas kod sĂ„ högerklicka pĂ„ sidan och vĂ€lj Visa sidkĂ€lla(engelska View page source).

index.html
<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVT Nyheter</title>
</head>
<body>
  <nav>
    <a href="#">SVT NYHETER</a>
    <ul>
      <li><a href="#">Nyheter</a></li>
      <li><a href="#">Lokalt</a></li>
      <li><a href="#">Sport</a></li>
    </ul>
  </nav>
  <main>
    <header>
      <h1>JUST NU <span>SENASTE NYTT OM CORONAVIRUSET</span>
        <a href="#">LÄS MER</a>
      </h1>
    </header>
    <article>
      <img src="https://picsum.photos/600/300" alt="Rubrikbild">
      <h2>Ryskt militĂ€rfartyg i krock i Öresund</h2>
      <p>Dimma i omrÄdet. Danmark begÀr svensk hjÀlp</p>
    </article>
    <article>
      <img src="https://picsum.photos/600/300" alt="Rubrikbild">
      <h2>Emma Frans om stigande smittkurvan: "Ganska vÀntat"</h2>
      <p>Forskare: Stora frÄgan Àr om uppgÄngen fortsÀtter</p>
    </article>
    <aside>
      <h3>SNABBKOLLEN</h3>
      <ul>
        <li><a href="#">Lukasjenko svÀrs in som president</a></li>
        <li><a href="#">Sjukhuset: Navalnyj utskriven</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <h4>SVT NYHETER</h4>
    <ul>
      <li>TjÀnstgörande webbredaktör: <a href="#">Person Personsson</a></li>
      <li><a href="mailto:svt">Kontakta SVT Nyheter</a></li>
      <li>&copy; Sveriges Television AB</li>
    </ul>
  </footer>
</body>
</html>

Koden hÀr ovan Àr inte komplett och vissa attribut har utelÀmnats för att förenkla, men strukturen finns dÀr. Notera att sidan inte har en <header>, istÀllet tjÀnar sidans navigation som ett sidhuvud. Sidans huvudinnehÄll börjar med en <header> för att ge fokus till viktiga nyheter. Varje nyhet anvÀnder sedan elementet <article>. I sidans navigation anvÀnds en oordnad-lista för att rada upp elementen i menyn.

Kopiera koden och kör den i webblÀsaren, det du kommer se Àr att sidan saknar design. Det du ser Àr enbart standardformateringen av HTML.

Olika element för innehÄll

Försök att strukturera din kod med hjÀlp av semantiska element dÀr det Àr möjligt eftersom det underlÀttar för tillgÀngligheten. Men det finns Àven mÄnga tillfÀllen dÀr det inte Àr möjligt. Du kommer Àven att behöva dela upp dig kod i nÀstlade element.

För att dela upp innehÄll kan artikel-elementet anvÀndas som i exemplet. Ett annat element med semantisk betydelse Àr <section>, vilket representerar en sektion av en helhet(vilket kan vara en artikel), lÀs mer hÀr. Det kan vara svÄrt att vÀlja element för sitt innehÄll och dÀrför finns det Àven ett generiskt element för innehÄll, det heter <div>. En <div> har ingen semantisk mening och bör enbart anvÀndas nÀr en semantisk mening saknas. LÀs mer om div-elementet hÀr.

Inspektera

Studera och inspektera koden pÄ webben som du anvÀnder. LÀr dig anvÀnda webblÀsarens verktyg (tryck F12).

  1. Högerklicka pÄ sidan.

  2. VÀlj, Visa sidkÀlla (View Page Source).

  3. Undersök.

Du kan ocksÄ vÀlja att Inspektera (Inspect) dÄ kan du vÀlja specifika element och undersöka dem.

Mer Àn HTML

NÀsta steg Àr att koppla samman HTML koden med webbens sprÄk för stilar, Cascading Style Sheets(CSS). Det Àr först dÄ du kommer att fÄ kontroll över sidans utseende.

Övning

  1. Öppna filen dracula.html som du skapade i kapitlet om text.

  2. Strukturera upp din tidigare kod. AnvÀnd dig av.

    1. Sidhuvud, bokens titel.

    2. Navigation, kapitel.

    3. InnehÄll för bokens text.

      1. Du kan dela upp varje kapitel med taggen <section>

    4. Sidfot med lÀnk till e-boken.

  3. LĂ€gg till en bild.

PreviousLÀnkarNextDin första CSS fil

Last updated