Nettsider blir bygde med HTML-kode
HTML står for HyperText Markup Language, som altså direkte omsett blir «språk for oppmerking av hypertekst». Når vi kodar i HTML, omringar vi innhaldselement med noko vi kallar taggar. Taggane gir struktur og skil innhaldselement frå kvarandre. Nettlesaren tek imot og tolkar HTML-kodane for oss. Dei fleste nettlesarar har støtte for å syne sjølve koden (høgreklikk og vel «vis sidekjelde»). HTML har utvikla seg sidan 1991, og i 2014 vart HTML5 den gjeldande versjonen.
Eit døme på kodetagg er <h1> som tyder heading1, overskrift på øvste nivå. Vi skriv ein tagg der overskrifta startar, og ein ny der ho sluttar. I avslutningstaggen legg vi ein skråstrek:
<h1>Nettstaden til Lakseberget vidaregåande skule</h1>
No veit nettlesaren at dette er ei overskrift. Mellomtitlar vidare i dokumentet blir merkte frå h2 til h6. Sidan HTML handlar om innhald og struktur, ikkje presentasjon, seier ikkje denne koden noko om korleis overskrifta skal visast. <h1> tyder altså berre overordna overskrift, ikkje stor overskrift.
Fleire døme på html5-taggar:
Vi har mange taggar for å<mark>markere</mark>ord.
<mark> er ein tagg som vi bruker for å markere stikkord eller frasar. Det går også an å bruke taggane <strong> eller <b> til liknande føremål, men i HTML5 har taggane fått kvar si meining. Om ein bruker <strong>, skal det vere viktig, mens <b> berre er eit siste alternativ for å markere dersom ingen andre markeringstaggar er meiningsfulle.
Det viktigaste for oss å skjøne er at ingen taggar i HTML5 har med utsjånad å gjere. Så sjølv om taggen <b> kjem av at han stod for feit (bold) skrift i tidlegare HTML-standardar, er det ikkje det <b> tyder i HTML5. Markert tekst kan seinare bli designa på kva måte som helst: feit, kursiv – eller like gjerne med gul bakgrunnsfarge.
Taggar kan også vere nøsta inn i kvarandre:
<p>Her startar avsnittet<strong>(p tyder paragraph)</strong><br>og her kom det eit hardt linjeskift.</p>
Det er ikkje alle taggar som har både start og slutt. Hardt linjeskift, <br>, er eksempel på ein slik tagg.
Alle taggar kan ha attributtar, men nokre taggar er heilt avhengige av dette. Ein lenketagg gir ikkje meining utan eit mål:
<ahref="http://www.vilbli.no"target="_blank">Les meir om vidaregåande opplæring</a>
Taggen <a> står for anker, men vi kallar det oftast ein lenketagg. Inni denne taggen finn vi attributtar som fortel oss om målside href og visingsstad target. Når visingsstad er _blank, vil sida bli opna i ei ny fane.
Ein bilettagg er også ganske verdilaus utan referanse til ei bildefil:
<imgsrc="bilete/logo.png"alt="Logo for vilbli.no"style="width:376px;height:130px">
Her finn nettlesaren ei biletfil i ei mappe med namn «bilete» som ligg på same webservar som nettsida. Alt-tekst blir brukt om biletet av tekniske grunnar ikkje kan visast, og ikkje minst som erstatning for bilete ved tekstopplesing. Dermed kan ein blind person forstå nettsida. Style er eigentleg ein designtagg som vi helst vil unngå i HTML-koden vår. Grunnen til at vi likevel tek med style i denne samanhengen, er at nettlesaren så snart som mogleg treng å vite kor mykje plass som skal setjast av til biletet. Utan den kan vi risikere at det visast ein blinkande boks mens biletet blir henta inn.
Vi har nokre overordna taggar for å byggje opp eit html-dokument. Det er taggane <head> og <body>. Det er berre det som står mellom body-taggane, som blir vist direkte i nettlesarvindauget.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Fane og bokmerketittel</title>
</head>
<body>
<p>Denne teksten blir vist i nettlesaren.</p>
</body>
</html>
I dette eksempelet har vi først dokumenttype og deretter <html>-taggar som omsluttar heile dokumentet. I <head> ser vi at det er gitt innstilling om teiknsettet i dokumentet (slik at det f.eks. stør dei norske teikna æ, ø og å) og ein tittel som blir vist i for eksempel fane- eller vindaugetittel og når ein bokmerker sida. Først i body-feltet finn vi ei setning som er sjølve innhaldet nettlesaren vil vise fram.
Header er noko vi finn i dei fleste dokumenttypar, for eksempel biletfiler og e-postar. I headeren finst det informasjon om innhaldet i dokumentet, dette blir kalla metadata. Metadata for nettsider kan vere beskriving, stikkord, forfattar o.l. om nettsida. Slike metadata er nyttige for søkjemotorar.