lab

← Tilbake

HTML på 1-2-3

Veldig kort om du kan lese og skrive HTML-kodesnutter.

HTML er et eget språk

HTML (hypertext markup language) er et markeringsspråk, som markerer hva som er hva i innholdet på en nettside. Det setter også opp en hierarkisk struktur for innholdet. Ulike <tagger> markerer starten og slutten på et innholdselement – for eksempel en overskrift eller et brødtekstavsnitt.

Men det er heldigvis lett

HTML er ganske intuitivt. Tekst som er omsluttet av en p-tagg er et tekst-avsnitt (paragraph). Tekst som står inni en h1-tagg er overskrift (heading) på nivå 1, mens h2 er overskriftsnivå 2. En img-tagg er et bilde.

<h1>Dette er en tittel</h1>
<p>Dette er et brødtekstavsnitt.</p>
<h2>Dette er en overskrift på nivå 2, altså den er mindre viktig enn nivå 1 – for eksempel en mellomtittel.</h2>
<img src="bilde.jpg" alt="Beskrivelse av innholdet i bildet.">

Det finnes noen enkle prinsipper å forholde seg til:

  • De fleste tagger må <div>startes og avsluttes, med innholdet i midten</div>. Noen få er bare én tagg (for eksempel <img>).
  • Taggene kan ha egenskaper: <div class="din-stil">.
  • Mellomrom og linjeskift mellom taggene har ikke noe å si. Men et manglende krokodillegap eller anførselstegn er avgjørende. Taggene må også avsluttes!
<!-- Dette er ikke noe problem: -->
<h1>Tittel</h1><p>Avsnitt</p>

<!-- Manglende > -->
<h1 Tittel</h1>

<!-- Manglende </h1> -->
<h1>Tittel
<p>Avsnitt</p>

<!-- Manglende " -->
<h1 class="overskrifts-stil>Tittel</h1>
  • Språket er hierarkisk, og kan ha så mange nivåer man ønsker.
<!-- <a> er en lenke. Alt som er inni <a>-taggen er klikkbart -->
<a href="http://www.nationen.no">
    <img src="bilde.jpg">
    <h2>Klikk her for å komme til nationen.no</h2>
</a>
  • HTML er nært knyttet til et annet språk: CSS (Cascading Style Sheets). Gjennom css-egenskaper bestemmer vi hvordan de ulike innholdselementene skal se ut. Egenskapene kan ligge i klasser (<div class="din-stil">) eller direkte i elementene (<div style="color: red; font-size: big;">).
<div style="width: 100%; height: 100px; background-color:black;">Dette er en svart boks som her 100% av kolonnebredden og 100 piksler høy.</div>
<div class="svart-boks">Dette er en helt lik boks, men bruker en gjenbrukbar klasse, definert nedenfor.</div>

<style>
.svart-boks {
    width: 100%; 
    height: 100px; 
    background-color: black;
}
</style>

Hva har dette å si for oss?

Kodene som finnes på denne siden skal ofte endres før de limes inn i Writer.

  • Stiler i kodesnutten vil være definert gjennom en <style>-tagg, mens script finnes i en <script>-tagg.
  • Innholdet som ...