Når man utvikler for web finnes det noen idealer og beste metoder (på engelsk kalt “Best Practice“) for hvordan man prinsipielt går frem. Det er skrevet og sagt mye om emnet, men det kan være vanskelig å få en oversikt som viser helheten av alle metoder satt sammen i system. Vi vil i denne artikkelen sette metodene sammen i en sekvensiell rekkefølge, og beskrive hvordan man går frem i en svært forenklet prosess.

Utgangspunkt og målsetting

Vi tar utgangspunkt i at du har en tekst du ønsker å presentere som en webside i henhold til standarden XHTML 1.0 Strict. I tillegg til dette ønsker vi å tillegge design med CSS 2.1 og om ønskelig ekstra funksjonalitet med JavaScript.

Enkelt fortalt arbeider man i denne rekkefølgen:

1. Ren tekst
2. Semantiske elementer
3. Strukturelle elementer
4. CSS
5. JavaScript

Ren tekst

Du starter alltid med teksten (eventuelt også bilder eller andre innholdstyper) du ønsker å presentere. Gitt følgende tekst med noen overskrifter, underoverskrifter og avsnitt:

Overskrift 1

Overskrift 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur malesuada nibh eget eros. Pellentesque tempor. Ut ac nisl. Nulla libero est, porttitor at, malesuada ac, auctor a, dui. Proin nulla. Maecenas id urna et lorem ornare fermentum. Aenean ligula tortor, scelerisque sit amet, pharetra vestibulum, adipiscing ac, mi. Nam porta nisl vel urna. Aenean condimentum, arcu in nonummy porta, arcu leo semper nisl, ut vestibulum nulla mauris tempor tortor. Nullam justo orci, auctor ut, rhoncus ut, faucibus vel, augue. Maecenas viverra arcu eu nisl convallis cursus. Quisque tincidunt tempor velit. Aenean feugiat enim id quam auctor scelerisque.

Dette i seg selv gir ikke leseren informasjon om hva som er overskrifter, hva som er avsnitt, etc. Derfor legger man til det vi kaller semantiske elementer.

Semantikk

Semantiske elementer er XHTML-elementer hvor man markerer teksten med hva som er overskrifter, underoverskrifter, avsnitt, etc. Det forrige eksemplet vil nå se ut som følger, dersom man ser på XHTML-koden:

<h1>Overskrift 1</h1>

<h2>Overskrift 2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur malesuada nibh eget eros. Pellentesque tempor. Ut ac nisl. Nulla libero est, porttitor at, malesuada ac, auctor a, dui. Proin nulla. Maecenas id urna et lorem ornare fermentum. Aenean ligula tortor, scelerisque sit amet, pharetra vestibulum, adipiscing ac, mi. Nam porta nisl vel urna. Aenean condimentum, arcu in nonummy porta, arcu leo semper nisl, ut vestibulum nulla mauris tempor tortor. Nullam justo orci, auctor ut, rhoncus ut, faucibus vel, augue. Maecenas viverra arcu eu nisl convallis cursus. Quisque tincidunt tempor velit. Aenean feugiat enim id quam auctor scelerisque.</p>

I aller enkleste form kan du presentere teksten din på denne måten. Det er derimot verken spesielt spennende å se på eller lett å lese på en skjerm. I denne anledning benytter man CSS for å tillegge designet, men før det bør man ha noen strukturelle elementer å koble CSS-selectorene på.

Struktur

Et strukturelt element er et XHTML-element uten semantisk betydning, det vil si at teksten vil være utseendemessig uforandret. Det forrige eksemplet vil nå se ut som følger, dersom man ser på XHTML-koden:

<div id=”overskrift1″><h1>Overskrift 1</h1></div>

<div id=”overskrift2″><h2>Overskrift 2</h2></div>

<div id=”tekst”><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur malesuada nibh eget eros. Pellentesque tempor. Ut ac nisl. Nulla libero est, porttitor at, malesuada ac, auctor a, dui. Proin nulla. Maecenas id urna et lorem ornare fermentum. Aenean ligula tortor, scelerisque sit amet, pharetra vestibulum, adipiscing ac, mi. Nam porta nisl vel urna. Aenean condimentum, arcu in nonummy porta, arcu leo semper nisl, ut vestibulum nulla mauris tempor tortor. Nullam justo orci, auctor ut, rhoncus ut, faucibus vel, augue. Maecenas viverra arcu eu nisl convallis cursus. Quisque tincidunt tempor velit. Aenean feugiat enim id quam auctor scelerisque.</p></div>

Legg merke til at det er opprettet egne identifikatorer for hvert strukturelle element som er i bruk.

CSS

Når du har lagt til strukturelle elementer og gitt de nødvendige identifikatorer og / eller klasser kan du benytte et stilsett for å tillegge design og oppførsel til teksten.

I vårt eksempel kan et enkelt CSS-stilsett se ut som følger:

1. div#overskrift1 {
2. color: red;
3. border-bottom: 1px solid red;
4. }
5.  
6. div#overskrift2 {
7. color: blue;
8. border-bottom: 1px solid blue;
9. }
10.  
11. div#tekst {
12. border: 1px dotted red;
13. background-color: silver;
14. }

I eksemplet har vi opprettet selectorer for hver identifikator som er i bruk i teksten.

Ønsker du å vite mer om CSS kan du lese Martin Bekkelunds enkle introduksjon til CSS.

JavaScript

Hvis du skulle ønske ekstrafunksjonalitet på toppen av det eksisterende dokumentet kan du for eksempel benytte JavaScript til å tillegge denne type funksjonalitet. I skrivende stund er AJAX en populær teknikk. Hvis du velger å benytte JavaScript eller andre klientsideskriptspråk er det viktig at innholdet i det du skal presentere også er tilgjengelig for klienter uten støtte for skriptspråket. Husk at for eksempel søkemotorer tradisjonelt sett ikke har støtte for klientsideskript.

Forutsetninger

Eksemplet gitt i denne artikkelen forutsetter at det inngår i et komplett XHTML-dokument, for eksempel en mal hvor det allerede eksisterer menyer, bunntekster, logoer, eventuelt andre stilsett etc.

Denne artikkelen ble postet tirsdag 1. august 2006 klokken 10:00 pm til følgende kategorier: Kode. Du kan følge eventuelle kommentarer til denne posten med RSS 2.0. Du kan legge igjen en kommentar, eller tilbaketråkk fra din egen side.