Hello World

La oss lage en enkel nettside for å se hva som kreves for å bli rendret av nettleseren. Det er vanlig å legge nye prosjekter i en Projects-mappe (noen foretrekker å kalle denne dev) du har opprettet selv i hjemmemappa på brukeren din, men det er opp til deg hvor du har lyst til å samle prosjektene dine.

Opprett ditt første HTML-dokument

Lag en samlemappe for dine fremtidige prosjekter, hvis du ikke har en allerde. I denne mappen kan du så lage enda en mappe som skal inneholde det vi trenger for å sette opp din første nettside, kall den web-intro eller noe tilsvarende gjenkjennelig. I klassisk intro-ånd går vi for "Hello World" på weben, så lag en ny fil i web-intro-mappen din og kall den index.html.

Definer struktur og innhold på siden

Det første vi må gjøre i filen vår er å deklarere dokumenttypen slik at nettleseren vet hva den skal tolke innholdet som. Dette gjøres ved å starte filen med denne linjen:

<!DOCTYPE html>

!DOCTYPE html betyr at innholdet på nettsiden skal tolkes som HTML5, og dokumentet blir lest i det som kalles for standard mode. Standard mode gir oss forutsigbar oppførsel fordi nettleserne ikke kan bryte med kjente webformat-spesifikasjoner når de forsøker å vise innholdet på siden din. Etter dette kan vi legge til rotelementet og strukturen for innholdet vårt:

<!DOCTYPE html>
<html lang="no">
  <head></head>
  <body></body>
</html>

Rotelementet er det ytterste elementet, i kodeblokken er det html-elementet

Vi har satt på attributten lang for å beskrive at innholdet i HTMLen skal skrives på norsk, dette gjør det enklere for skjermlesere å vite hva slags språk den skal lese opp. Dessuten vil vi at nettleseren skal vise tegn som æøå riktig. Da må vi fortelle den at den skal bruke UTF-8 som charset. Legg til denne linjen inni head-elementet:

<meta charset="utf-8" />

Inni body legger vi selve innholdet på siden. La oss legge til en overskrift og litt tekst:

<h1>Hello World</h1>
<p>Min første nettside</p>

Slik at vi ender opp med en fil som dette:

<!DOCTYPE html>
<html lang="no">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Min første nettside</p>
  </body>
</html>

Hvordan ser dette nå ut? Åpne index.html i Chrome og gå til neste seksjon.

PreviousDin første nettsideNextDevTools

Last updated