{Balslev}

Hvad er HTML?

<br/>

We should break up.

Hvad betyder HTML?

HTML står for HyperText Markup Language.

Det betyder:

  • HyperText: Tekst der kan indeholde links til andre sider.
  • Markup: Tekst som indeholder markeringer (koder), der beskriver hvordan indholdet er opbygget.
  • Language: Et sprog med faste regler og syntaks.

HTML skrives som ren tekst – uden nogen form for formatering i selve filen.

Et dokument skrevet i HTML kaldes et HTML-dokument.

Du kan oprette og redigere HTML-filer i næsten alle teksteditorer (f.eks. Notesblok i Windows), men det er ofte nemmere at bruge et program, der er beregnet til kodning, som f.eks.:

  • Visual Studio Code
  • Visual Studio
  • NetBeans
  • Notepad++

HTML-filer gemmes med filendelsen:

.html

For at se et HTML-dokument som en hjemmeside åbner du filen i en webbrowser – f.eks.:

  • Google Chrome
  • Microsoft Edge
  • Firefox

Browseren fortolker HTML-koden og viser resultatet som en webside.

HTML-elementer

HTML består af elementer.
Et element beskriver, hvad et stykke indhold betyder – for eksempel en overskrift, et tekstafsnit eller et billede.

Eksempler på HTML-elementer:

<h1>Overskrift</h1>
<p>Tekstafsnit</p>
<img src="/media/1096/web-design-2038872_960_720.jpg" alt="Fint lille billede">

Den generelle form for et HTML-element ser sådan ud:

<kode>Indhold</kode>

<kode> kaldes en start-tag, og </kode> kaldes en slut-tag.
Tilsammen kaldes de for HTML-tags.

De fleste HTML-elementer har både en start- og slut-tag, men nogle elementer – for eksempel <img> – har ikke en slut-tag.

Eksempel:

<img src="" alt="">

HTML-elementer kan placeres inde i hinanden, men de må ikke overlappe.

Rigtigt:

<h1><a href="">Overskrift</a></h1>

Forkert:

<h1><a href="">Overskrift</h1></a>
Start- og slut-tags skal altid lukke i korrekt rækkefølge.

HTML-tags skrives som udgangspunkt med små bogstaver.

HTML-attributter

Nogle HTML-elementer har brug for ekstra information.
Disse ekstra oplysninger kaldes attributter.

Billed-elementet <img> kræver f.eks. altid attributterne:

  • src – fortæller hvor billedet ligger
  • alt – beskriver billedet med tekst

Eksempel:

<img src="/billede.jpg" alt="Et flot billede">

Link-elementet <a> bruger typisk attributten href, som angiver den adresse, man sendes hen til, når man klikker på linket:

<a href="https://www.balslev.io">Balslev's hjemmeside</a>

Attributter skrives altid inde i start-taggen.

Den generelle form er:

<kode navn="værdi">Indhold</kode>

Et element kan have flere attributter adskilt af mellemrum.

Grundlæggende HTML-struktur

Et simpelt HTML-dokument har typisk denne struktur:

<!DOCTYPE html>
<html>
  <head>
    <title>Min første hjemmeside</title>
  </head>
  <body>
    <h1>Velkommen</h1>
    <p>Dette er min første hjemmeside.</p>
  </body>
</html>

Forklaring:

  • <html> indeholder hele dokumentet
  • <head> indeholder metadata, titel og tekniske oplysninger
  • <body> indeholder alt det indhold, som vises på siden
Browseren viser kun det indhold, som ligger inde i <body>.

Overskrifter og tekst

HTML har seks forskellige overskriftsniveauer:

<h1>Største overskrift</h1>
<h2>Underoverskrift</h2>
<h3>Mindre overskrift</h3>

Man bør kun bruge én <h1> pr. side, da den repræsenterer sidens hovedtitel.

Almindelig tekst skrives typisk i <p> (paragraph):

<p>Dette er et tekstafsnit.</p>

Korrekt brug af overskrifter gør siden mere overskuelig og hjælper også søgemaskiner med at forstå indholdet.

Links, billeder og webteknologier

Links bruges til at navigere mellem sider:

<a href="https://www.google.com">Gå til Google</a>

Billeder indsættes med <img>:

<img src="/images/logo.png" alt="Firmaets logo">

Det er vigtigt altid at bruge alt-teksten, da den:

  • Hjælper skærmlæsere for synshandicappede
  • Vises hvis billedet ikke kan indlæses
  • Forbedrer SEO

HTML, CSS og JavaScript

HTML bruges til at beskrive indhold og struktur.

CSS bruges til at styre design og layout, for eksempel farver, skrifttyper og placering.

JavaScript bruges til at skabe interaktivitet og funktionalitet, for eksempel knapper, formularer og dynamisk indhold.

De tre teknologier arbejder sammen for at skabe moderne hjemmesider.

Kommentar / Feedback