Nettsider bygges med HTML-kode
HTML står for HyperText Markup Language, som altså direkte oversatt blir «språk for oppmerking av hypertekst». Når vi koder i HTML, omringer vi innholdselementer med noe vi kaller tagger. Taggene gir struktur og skiller innholdselementer fra hverandre. Nettleseren mottar og tolker HTML-kodene for oss. De fleste nettlesere har støtte for å vise selve koden (høyreklikk og velg «vis sidekilde»). HTML har utviklet seg siden 1991, og i 2014 ble HTML5 den gjeldende versjonen.
Et eksempel på kodetagg er <h1> som betyr heading1, overskrift på øverste nivå. Vi skriver en tagg der overskriften starter, og en ny der den slutter. I avslutningstaggen legger vi en skråstrek:
<h1>Nettstedet til Lakseberget videregående skole</h1>
Nå vet nettleseren at dette er en overskrift. Mellomtitler videre i dokumentet merkes fra h2 til h6. Siden HTML handler om innhold og struktur, ikke presentasjon, sier ikke denne koden noe om hvordan overskriften skal vises. <h1> betyr altså bare overordnet overskrift, ikke stor overskrift.
Flere eksempler på html5-tagger:
Vi har mange tagger for å<mark>markere</mark>ord.
<mark> er en tagg som vi bruker for å markere stikkord eller fraser. Det går også an å bruke taggene <strong> eller <b> til lignende formål, men i HTML5 har taggene fått hver sin mening. Hvis man bruker <strong>, skal det være viktig, mens <b> bare er et siste alternativ for å markere hvis ingen andre markeringstagger er meningsfulle.
Det viktigste for oss å skjønne er at ingen tagger i HTML5 har med utseende å gjøre. Så selv om taggen <b> kommer av at den stod for fet (bold) skrift i tidligere HTML-standarder, er det ikke det <b> betyr i HTML5. Markert tekst kan senere bli designet på en hvilken som helst måte: fet, kursiv – eller like gjerne med gul bakgrunnsfarge.
Tagger kan også være nøstet inn i hverandre:
<p>Her starter avsnittet<strong>(p betyr paragraph)</strong><br>og her kom det et hardt linjeskift.</p>
Det er ikke alle tagger som har både start og slutt. Hardt linjeskift, <br>, er eksempel på en slik tagg.
Alle tagger kan ha attributter, men noen tagger er helt avhengige av dette. En lenketagg gir ikke mening uten et mål:
<ahref="http://www.vilbli.no"target="_blank">Les mer om videregående opplæring</a>
Taggen <a> står for anker, men vi kaller det oftest en lenketagg. Inni denne taggen finner vi attributter som forteller oss om målside href og visningssted target. Når visningssted er _blank, vil siden åpnes i en ny fane.
En bildetagg er også ganske verdiløs uten referanse til en bildefil:
<imgsrc="bilder/logo.png"alt="Logo for vilbli.no"style="width:376px;height:130px">
Her finner nettleseren en bildefil i ei mappe med navn «bilder» som ligger på samme webserver som nettsida. Alt-tekst brukes hvis bildet av tekniske grunner ikke kan vises, og ikke minst som erstatning for bilde ved tekstopplesing. Dermed kan en blind person forstå nettsida. Style er egentlig en designtagg som vi helst vil unngå i HTML-koden vår. Grunnen til at vi likevel tar med style i denne sammenhengen, er at nettleseren så snart som mulig trenger å vite hvor mye plass som skal settes av til bildet. Uten den kan vi risikere at det vises en blinkende boks mens bildet hentes inn.
Vi har noen overordnede tagger for å bygge opp et html-dokument. Det er taggene <head> og <body>. Det er kun det som står mellom body-taggene, som vises direkte i nettleservinduet.
<!doctype html>
<html>
<head><meta charset="UTF-8">
<title>Fane og bokmerketittel</title>
</head>
<body><p>Denne teksten vises i nettleseren</p>
</body></html>
I dette eksempelet har vi først dokumenttype og deretter <html>-tagger som omslutter hele dokumentet. I <head> ser vi at det er gitt innstilling om dokumentets tegnsett (slik at det f.eks. støtter de norske tegnene æ, ø og å) og en tittel som vises i for eksempel fane- eller vindustittel og når man bokmerker siden. Først i body-feltet finner vi en setning som er selve innholdet nettleseren vil vise fram.
Header er noe vi finner i de fleste dokumenttyper, for eksempel bildefiler og e-poster. I headeren finnes det informasjon om innholdet i dokumentet, dette kalles metadata. Metadata for nettsider kan være beskrivelse, stikkord, forfatter o.l. om nettsiden. Slike metadata er nyttig for søkemotorer.