Denne artikkelen inngår i serien Introduksjon til utvikling av nettsider.

Siden jeg selv akkurat har opprettet denne nettsiden, finner jeg det mest naturlig å starte med en artikkelserie som handler om nettopp det. For en nykommer på fagfeltet kan verdenen av alle kodespråkene og verktøyene som brukes til dette virke overveldende og kronglete å manøvrere seg gjennom, men det er egentlig veldig lite som skal til for å komme i gang med det grunnleggende. En helt vanlig datamaskin er alt man trenger. I denne artikkelen vil jeg gå gjennom hvordan du som leser dette setter opp en helt enkel nettside ved hjelp av markeringsspråket HTML.

Som nevnt trenger du kun en helt vanlig datamaskin for å lage en enkel nettside. Datamaskinen ha en nettleser, som for eksempel Chrome, Opera, Edge, Safari eller Firefox. I tillegg trenger den et redigeringsverktøy for ren tekst, altså tekst uten formatering. Bruker du Windows, er Notisblokk tilstrekkelig. Det var det jeg selv brukte da jeg begynte å lære meg webutvikling. Imidlertid finnes det mange redigeringsverktøy som er spesielt laget for koding, som for eksempel Visual Studio Code og Notepad++, som både er gratis og brukes av flere profesjonelle utviklere. Selv foretrekker jeg Jetbrains sine verktøy, men disse koster penger.

I resten av denne artikkelen vil jeg ta utgangspunkt i at du bruker Notisblokk og Edge på Windows. Da trenger du ikke å installere noen ting. Stegene er imidlertid veldig like uavhengig av hvilke verktøy du bruker. All kode er den samme.

Det første du må gjøre er å opprette en HTML-fil. Høyreklikk på skrivebordet, velg "Ny" og deretter "Tekstdokument". (Den nøyaktige fremgangsmåten her kan variere fra versjon til versjon av Windows.) Gi den nye filen navnet "nettside.html". Det er viktig at filnavnet ender med ".html" og ikke ".txt". Dette forteller datamaskinen at filen skal tolkes som en HTML-fil. Når du har gjort dette, vil filen antakelig få ikonet til standardnettleseren. Dobbeltklikk på filen. Hvis nettleseren åpner seg og viser en helt tom side, er alt riktig.

Nå er det på tide å gi denne siden noe innhold. Først må du åpne filen i Notisblokk. Gå tilbake til skrivebordet, høyreklikk på filen, velg "Åpne i" og deretter "Notisblokk". Skriv inn følgende:

Oppdater nå den åpne siden i nettleseren. Du bør da få se noe slikt:

Tada! Du har nå en fullverdig nettside. La oss ta en nærmere titt på hva de enkelte delene av koden betyr.

Den første linjen i eksemplet over, , forteller nettleseren at koden som følger skal tolkes som HTML 5. I tidligere versjoner av HTML var det også nødvendig å oppgi adressen til et DTD-dokument som definerte strukturen til koden. Nå tar man utgangspunkt i at alle nettlesere følger samme standard, som for øvrig er definert av organisasjonen W3C.

HTML-kode er bygget opp av elementer som defineres ved hjelp av tagger. I eksemplet i forrige seksjon er html, head, title, body, h1 og p navnene på forskjellige tagger. Hvert element (med noen få unntak, som jeg kommer tilbake til) har en starttagg og en sluttagg, hvor sluttaggen markeres med en skråstrek foran taggnavnet. html-taggen markerer rotelementet, som alltid må være på plass øverst i hierarkiet. På neste nivå er det også to "faste" elementer, head og body. head inneholder hovedsakelig metainformasjon om dokumentet. I eksemplet over inneholder head-elementet et title-element. Det er dette som vises på sidens fane i nettleseren.

body-elementet definerer selve innholdet i dokumentet. I eksemplet over viser h1 til en overskrift på øverste nivå - se seksjonen om overskrifter. Den siste taggen, p, står for "paragraph" og definerer et avsnitt. Man kan ha et ubegrenset antall avsnitt, og som standard kommer det et lite mellomrom mellom hvert avsnitt.

Det er en lang liste over forskjellige tagger man kan bruke til forskjellig innhold. Jeg skal ikke gå gjennom alle her, men jeg skal gå gjennom noen eksempler på noen av de mest grunnleggende.

Vi har allerede sett at h1 markerer en overskrift på øverste nivå. Det finnes i alt seks nivåer, som alle markeres på samme måte med et helt tall fra 1 til 6. En nettside bør alltid ha én, og kun én, h1-overskrift. Deretter kan man ha et ubegrenset antall overskrifter på andre nivåer, men de bør være satt opp i en hensiktsmessig rekkefølge. For eksempel gir det ikke mening at h3 kommer rett etter h1 uten at det er noen h2 imellom. Selv om taggene ikke er visuelt synlige i nettleseren, er dette viktig fordi koden også skal kunne tolkes av andre programmer, for eksempel søkemotorer og tilgjengelighetsverktøy. Prinsippet er det samme som det som gjelder for overskriftsnivåer og automatiske innholdsfortegnelser i Word. Hvis det er ønskelig å endre størrelsen på en overskrift, er det CSS som er riktig hjelpemiddel. Det kommer jeg tilbake til i neste artikkel.

For å legge til et bilde, må du først ha bildet tilgjengelig på datamaskinen. Lagre det i samme mappe som HTML-filen. Deretter kan du legge til følgende kode der du vil ha bildet:

Bytt ut "bilde.jpg" med filnavnet på bildet du vil bruke. "Alternativ tekst" er en beskrivelse av bildet. Teksten vises hvis bildet av ulike årsaker ikke kan vises. Den er også nyttig for søkemotorer og verktøy som ikke kan vise bilder.

Bildet du har valgt nå bli synlig på nettsiden:

Denne taggen introduserer to konsepter jeg ikke har dekket ennå. Det ene er attributter. I eksemplet er src og alt attributter. De gir elementet tilleggsinformasjon. Det andre konseptet er at img-taggen er selvlukkende. Det vil si at den ikke har noen avslutningstagg. Dette er i eksemplet markert med en skråstrek på slutten av taggnavnet, men denne er ikke nødvendig i standard HTML. (I HTMLs nære slektninger XHTML og JSX er den imidlertid nødvendig.)

For å lage en lenke, bruk følgende kode:

Dette gir følgende resultat:

Bytt ut URL-en med adressen til siden du vil lenke til og teksten mellom taggene med teksten som skal vises. Teksten kan være hva om helst, men den bør være tilstrekkelig til at brukeren forstår hvor lenken går selv om den skulle være tatt ut av sammenhengen. En vanlig feil, som jeg har sett spesielt mye av i nettaviser, er at forfatteren bare markerer ett tilfeldig ord i en setning i stedet for hele subjektet eller objektet. Da er det mest naturlig å tro at lenken går til en begrepsforklaring av ordet. Ikke vær redd for å omfatte mange ord i en lenke.

Med andre ord, ikke gjør dette:

Gjør heller dette:

Det er to typer lister i HTML: Ordnede og uordnede. En ordnet liste er en liste med nummererte punkter, mens en uordnet liste er en liste med punkter som er merket med for eksempel prikker eller streker. For å lage en ordnet liste, bruk følgende kode:

Det vil se slik ut:

For å lage en uordnet liste, bruk følgende kode:

Det skal gi følgende resultat:

Legg merke til at den eneste forskjellen er taggen på øverste nivå, som er <ol> eller <ul>. "Ol" står for "ordered list" mens "ul" står for "unordered list".

En tabell er en mer kompleks struktur som består av flere forskjellige tagger. Hovedtaggen er <table>. Tabellen deles så opp i rader (<tr>) og til slutt i enkelte celler (<th> for overskrifter og <td> for innhold).

Her er et eksempel på en tabell:

Resultet blir dette:

For å gi tabellen ytterligere mening, kan man seksjonere den med elementer som <thead>, <tbody> og <tfoot>. Celler kan også slås sammen både i bredden og i høyden ved hjelp av attributtene colspan og rowspan. Alt dette står det mer om på sidene jeg henviser til under nyttige lenker.

Så langt er alt vi har jobbet med lagret lokalt på datamaskinen. Nettsiden er ikke tilgjengelig over internett. For å gjøre den tilgjengelig, kan du gjøre datamaskinen til en tjener, men det forutsetter at den er på hele tiden, i tillegg til at det involverer en betydelig sikkerhetsrisiko hvis du ikke vet hva du gjør. En mye mer vanlig fremgangsmåte er å bruke en ekstern tjeneste. Her er det mange aktører å velge mellom, og de fleste tar seg dessverre godt betalt, spesielt hvis man krever høy ytelse og oppetid. Det finnes imidlertid noen gratisløsninger som ikke er så verst, som for eksempel Koyeb og Render. Også Github Pages er gratis hvis man har åpen kildekode. Hver tjeneste har sine løsninger for utrulling av nettsider, så her må du sette deg inn i instruksjonene til den enkelte aktør.

En artikkel som dette ville ikke vært komplett uten å nevne de avanserte utviklerverktøyene som de mest kjente nettleserne er utstyrt med. Disse er uvurderlige i den moderne utviklers hverdag. I Edge kan du åpne utviklerverktøyet ved å høyreklikke på et element på en hvilken som helst nettside og velge "undersøk". Da vil du kunne se hele sidens HTML-kode og hvor i koden elementet du klikket på er plassert. Du kan også endre på koden og se direkte hvordan endringene virker inn på nettsiden. Endringene blir imidlertid ikke lagret, så hvis du oppdaterer siden, går den tilbake til tilstanden den var i før du endret på den. Dette verktøyet kan både brukes til å feilsøke og til å studere og lære av hvordan ting er løst på andre nettsider.

I denne artikkelen har jeg bare gjennomgått noen av de mest grunnleggende tingene du kan gjøre med HTML. Mer fullstendige oversikter er å finne på eksempelvis W3schools' HTML-veiledning og MDNs HTML-oversikt. Jeg bruker disse ressursene i stor grad fremdeles. De oppdateres jevnlig og har gode verktøy for å teste ut kode direkte i nettleseren.

På W3Cs sider kan du se den offisielle HTML-spesifikasjonen.

Vi har nå sett på hvordan man lager en nettside med helt enkelt innhold. Men selv om tekst og bilder er på plass, er det mye som kan gjøres med utseendet. Dette gjør man ved hjelp av CSS, som vil være temaet for neste artikkel i denne serien.