En HTML nettside er bare en alminnelig tekstfil (med filendelse .html) som leses av en nettleser, i stedet av en tekst-editor. HTML er et oppmerkingsspråk som vil si at innholdet må oppmerkes, noe som noteres (dvs. markeres) med innledende og avsluttende HTML tagger.
Alle nettsider du er på bruker HTML
En nettleser er kun verktøyet som leser HTML kode. Dersom du høyreklikker og inspiserer eller velger “Vis sidekilde” så kan man lese HTML i råformat. Alt du noengang har sett på nettsider kan derfor faktisk gjenskapes i HTML.
OBS: Webutviklere skriver ikke bare HTML kode dagen lang for å designe nettsider. Det finnes programvare eller tjenester som blir mer drag’n’drop som f.eks. Wordpress, eller rammeverk i programmering som kan avlaste mye av jobben for deg. Det er likevel viktig å forstå hvordan HTML fungerer for å kunne oppnå resultatene en ønsker.
HTML Tag-syntaks
HTML tagger følger en syntaks for både innledende og avsluttende tags, som noteres med mindre enn, eller større enn tegn (også kjent som krokodillemunner). < og >. Det som skiller en avsluttende tag er at den inneholder et skråstrek (</ og >).
Avsluttende tags
Noen få tags trenger ikke en avsluttende tag, men det skader ikke å avslutte disse. Et eksempel er taggen for bilde eller linjeskift.
Eksempel:
<tag>Jeg er inne i en "tag"-tag</tag>
<annentag><tag>Jeg er inne i en "tag"-tag, inne i en "annentag"-tag.</tag></annentag>
Jeg er ikke i noe spesiell tag (ikke gjør dette)
Mange tagger å velge mellom
Det finnes mange tagger å velge mellom - heldigvis trenger vi ikke kunne så mange for å lage en fin nettside. Her er en liste over taggene vi trenger i denne oppgaven:
| Tag | Beskrivelse |
|---|---|
<!DOCTYPE html> | OBS, denne taggen står kun på første linje har ingen avslutning. Markerer at dokumentet er et HTML dokument (en shebang) som forteller nettleseren hvilket språk den leser. |
<html> | Definerer starten på et HTML dokument |
<head> | Definerer et head område hvor “hjernen” av nettsiden lagres |
<body> | Definerer et body område, hvor vi plasserer elementer som vil være synlig på nettsiden |
<h1>, <h2> -> <h6> | Overskrifter (Overskrift 1, Overskrift 2…) |
<p> | Paragrafer (tekstblokker) |
<b> | Fet tekst |
<i> | Kursiv tekst |
<br> | Ny linje med tekst (har ingen avsluttende tag) |
Lurer du på hvordan du kan …?
Søk på nettet da vel!
Søker du html how to image|add video|cool button så dukker det mye opp! Det kan av og til være vanskelig å finne gode eksempler, men W3Schools vil ofte ha gode eksempler en kan teste ut med.
HTML sin grunnmur
Alle HTML dokumenter må ha samme struktur - noen nettlesere prøver automatisk å rette opp i mangler, men det er ikke en selvfølge at nettsiden vil virke uten.
<!DOCTYPE html>
<html>
<head>
Innhold som ikke er synlig går her
</head>
<body>
Innhold som er synlig går her
</body>
</html>
Linjeskift
Dersom du lager en paragraf med linjeskift i HTML, så er det ikke slik at resultatet vil ha går over flere linjer:
<p>
Linje 1
Linje 2
</p>
blir til
Linje 1 Linje 2
Linjeskift må manuelt merkes med <br> taggen. Eventuelt kan man definere en ny paragraf (paragrafer har avstand mellom seg, ofte større avstand enn et vanlig linjeskift) som her:
<p>
Linje 1
<br>Linje2
</p>
<!-- Samme som -->
<p>Linje 1<br>Linje 2</p>
<!-- Alternativ (blir større avstand og er teknisk sett feil) -->
<p>Linje 1</p>
<p>Linje 2</p>
Oppgave 1.1: Test det ut
Nå er det din tur til å prøve. Opprett en fil med navn oppgave1-1.html og åpne den i ditt foretrukne utviklingsmiljø, som for eksempel Visual Studio Code.
OBS: Husk mappe
Oppgaven må ligge i en mappe som følger god navnekonvensjon. Du skal helst levere en mappe, ikke en individuell fil. Husk å oppgi navnet din i mappenavnet.
Lag en nettside med følgende komponenter, og sett dem inn på riktig sted som i eksempelet over:
<h2>En overskrift til paragraf 1</h2>
<p>Dette er <i>paragraf 2</i><p>
<h2>En overskrift til paragraf 2</h2>
<h1>Hello World</h1>
<p><b>Paragraf</b> 1</p>
Emmets - snarveier i VSCode (Avansert)
OBS. Dette blir avansert.
VSCode, og mange andre editorer, har noen emmets (snarveier) som lar deg generere kode raskere. Skriver du ! og trykker enter i et tomt HTML dokument, så vil grunnmuren genereres for deg.
Oppgave 1.2: Test ut linjeskift
Ta følgende HTML kode og lim den inn i en ny fil oppgave1-2.html, og sett inn riktig linjeskift slik at den samsvarer med HTML koden:
Obs: Ikke glem
<!DOCTYPE html>,<html>,<head>og<body>!
<h2>Ja vi elsker dette lander</h2>
<p>
Ja vi elsker dette landet
Som det stiger frem
Furet værbitt over vannet
Med de tusen hjem
Elsker Elsker det og tenker
På vår far og mor
Og den saganatt som senker
Drømmer på vår jord
Dette landet harald berget
Med sin kjemperad
Dette landet håkon verget
Medens øyvind kvad
Olav på det land har malet
Korset med sitt blod
Fra dets høye sverre talte
Roma midt imot
</p>