Artikel med aside och interna länkar

Vi skall lägga till ytterligare en sida report.html där vi skall förbereda oss för att skriva redovisningstexter för kursmomenten.

Det kan se ut så här när vi är klara.

Image description — Bild: En artikel med innehåll.

Skapa en ny sida.

För att skapa en ny sida report.html så tar vi enklast en kopia av me.html och redigerar sidans <title>.

Därefter tömmer vi den på allt innehåll så att vi har kvar grundstrukturen för main och aside.

  <div class="wrap">
    <main class="main">Main har inget innehåll.</main>
    <aside class="aside">Aside har inget innehåll.</aside>
  </div>

Eftersom vi jobbar med enkla html-sidor så har vi inget stöd från ett ramverk eller liknande som gör att vi kan återanvända sidans layout. Vi behöver alltså jobba genom att kopiera me.html till report.html. När vi kommer längre fram så kommer vi anänvda verktyg som gör att vi kan återanvända en layout till en sida och enbart justera sidans huvudsakliga innehåll, men där är vi inte än.

Innehåll grupperat med sections och id

Vi har sett hur man kan länka mellan webbsidor med <a> men man kan också länka internt i en websida med konstruktionen #id. Låt oss ta ett exempel.

Vi vill förbereda oss för att skriva redovisningstexter till de kommande kursmomenten. Vi skapar då följande struktur i main.

<article class="article">
  <h1>Redovisning</h1>

  <p>Här kommer mina redovisningstexter från de olika kursmomenten i denna kursen.</p>

  <section id="kmom01">
    <h2>kmom01</h2>

    <p>Här kommer redovisningstexten för detta kursmoment.</p>
  </section>

  <section id="kmom02">
    <h2>kmom02</h2>

    <p>Här kommer redovisningstexten för detta kursmoment.</p>
  </section>

  <section id="kmom03">
    <h2>kmom03</h2>

    <p>Här kommer redovisningstexten för detta kursmoment.</p>
  </section>

</article>

Du kan själv fylla på med kmom04, kmom05, kmom06 och kmom10.

HTML-elementet <section> används för att gruppera relaterat innehåll på en webbsida. Det är ett semantiskt element, vilket innebär att det ger meningsfull information om innehållet både för utvecklare och för teknologier som webbläsare och skärmläsare.

Resultatet kan se ut så här.

Interna länkar med id och

När man anger ett id på ett element så kan man använda det som en intern länk i webbsidan. Man kan lägga till #kmom01 till sidans nuvarande länk och webbsidan kommer att försöka visa den delen där id:et finns. Ett id skall vara unikt på en sida.

Vill du skapa en länk som leder direkt till redovisningstexten för kmom01 lägger du till #kmom01 i slutet av länken. En länk till rapportsidan och kmom01 kan alltså se ut så här.

report.html#kmom01

Detta ger oss möjligheten att skapa en innehållsförteckning i en aside som vi väljer att placera till vänster om texten. Att lösa placeringen gör vi enklast i html-koden genom att placera aside-elementet innan main-elementet.

  <div class="wrap">
    <aside class="aside">Aside har inget innehåll.</aside>
    <main class="main">Main har inget innehåll.</main>
  </div>

Inuti asiden lägger vi nu något som ser ut som en innehållsförteckning.

<aside class="aside">
  <h4>Innehållsförteckning</h4>

  <ul>
    <li><a href="#kmom01">kmom01</a></li>
    <li><a href="#kmom02">kmom02</a></li>
    <li><a href="#kmom03">kmom03</a></li>
  </ul>
</aside>

Nu har vi sidan uppdelad i en main och en aside.

Nu är det svårt att testa att det fungerar, för att göra det behöver man mycket mer innehåll i varje sektion, annars ser man inte effekten av att webbläsaren fokuserar på den sektionen vars id man länkar till.