Html

HTML er et opmærkningssprog, der bruges til at kommunikere strukturen af indholdet i et dokument til en browser.

Her er et eksempel på en html struktur.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titlen på dokumentet</title>
  </head>
  <body>
    Indhold på siden
  </body>
</html>

HTML elementer

Når du skriver dit indhold benyttes en række forskellige tags, til at angive hvordan de forskellige dele (HTML elementer) af dokumentet skal fortolkes.

Grundlæggende er html elementer opbygget således.

<TAG_NAVN ATTRIBUT_NAVN="ATTRIBUT_VÆRDI">INDHOLD_AF_HTML_ELEMENT</TAG_NAVN>

Et html element består alså af disse elementer

  • et start tag <TAG_NAVN>
  • et slut tag der matcher start tag men med en skråstreg: </TAG_NAVN>
  • en eller flere attributter, bestående af et navn og en værdi.

Her er et par eksempler på HTML tags.

<h1>Overskrift</h1>
<p>Dette er et afsnit med noget tekst.</p>

Indlejrede elementer

Nogle html elementer er beregnet til at indeholde andre html elementer, et eksempel er når man laver en opremsning med en liste.

<ul>
  <li>punkt 1</li>
  <li>punkt 2</li>
  <li>punkt 3</li>
</ul>

Typisk ender et dokument med at bestå af en række HTML elemementer, hver med et eller flere indlejrede dokumenter indeni.

Ikke afsluttede tags

Det er ikke alle HTML elementer, hvor det semantisk giver mening at de har indhold. Derfor kan de også bestå af et tag der slutter sig selv. Et eksempel er hr (Horizontal rule)

<hr />

Et andet eksempel er når der indsættes et billede. Her angives en URL til hvor billedets kilde kan findes som en attribut.

<img src="path/to/image/file.jpg" title="En beskrivende title" alt="Beskrivelse af billedet i fald det ikke kan vises" />

Alle de mange tags og hvordan de bruges kan du læse mere om i denne HTML Tutorial.

Demo dokument

Her er et lidt mere fyldigt eksempel.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titlen på dokumentet</title>
  </head>
  <body>

    <h1>Eksempel på HTML dokument</h1>
    <p>Dette er et afsnit med noget tekst. Bemærk at jeg har sat et billede ind herunder</p>

    <img src="IMG_9747.jpg" alt="kameleon i skovbunden" title="Hovedet skiftede fra rødt til grønt mens jeg fandt kameraet frem" />

    <hr />

    <p>Her følger en liste med et par HTML elementer.</p>
    <ul>
      <li>punkt 1</li>
      <li>punkt 2</li>
      <li>punkt 3</li>
    </ul>

    <p>Man kan nemt ændre det til en ordnet liste.</p>
    <ol>
      <li>punkt 1</li>
      <li>punkt 2</li>
      <li>punkt 3</li>
    </ol>

  </body>
</html>

På denne side kan du se resultatet i din browser.

Materiale

HTML introduktion

Video kursus (På dansk)

Quiz