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 prosjektenene dine. Naviger deg til hjemmemappa i terminal (cd ~
) eller Finder, og lag en slik samlemappe for dine fremtidige prosjekter. 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 hello.html
.
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:
<html lang="no">
<head></head>
<body></body>
</html>
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>
Hvordan ser dette nå ut? Åpne hello.html
i Chrome og gå til neste seksjon i dette kapittelet.