HTML

Web Workshop # 1

Her lærer vi noget HTML

Vi foreslår at du åbner https://codepen.io/ og laver et projekt ved at trykke på "Create a Pen".
Det er en god ide at gemme stien til din "Pen" eller oprette en konto, så du beholder dit kode!

HTML syntax forklaring


HTML: Elementer

I HTML skriver man elementer ved at skrive f.eks. <p> </p> (paragraph elementet). Indholdet i elementet er så det der er imellem det startende tag <p> og det lukkende tag </p>.
Der findes blandt andet:
<p> Paragraf </p>

Paragraf


<h1> Header 1. Prøv at skrive 4 i stedet!</h1>

Header 1. Prøv at skrive 4 i stedet!


<b> Fed skrift </b>
Fed skrift
<i> Kursiv skrift </i>
Kursiv skrift
<u> Understreget skrift </u>
Understreget skrift


HTML: Attributter

HTML elementer kan have attributter.
Disse attributter giver ekstra information om hvordan vores element skal opføre sig.
For eksempel er title en attribut der giver vores element en tekst når vi har musen over den.

<p title="Du kan se mig når du holder musen her"> Prøv at holde musen her </p>

Prøv at holde musen her


HTML: a - Anchor

Et tag der tit bruges til links i HTML er <a> </a> også kaldet Anchor.
Med attributten href kan det dirigere til at ny side eller andet sted på samme side.

<a href="www.carlsbergpirates.dk"> Dette er et link til Carlsberg Pirates </a>

Prøv at lave dit eget link til f.eks. www.dr.dk


HTML: div tag

Den mest almindelig anvendte html tag er <div> </div>
Egentlig er det bare en tom kasse og bruges som en beholder til at gruppere elementer, der er ikke noget magi ved den udover de attributter og styles du giver den!

<div>
     Jeg er bare en kasse
    <div>
        Det er jeg også men jeg hører under ham der står ovenover
    </div>
</div>

HTML: Style

Style er en attribut som et HTML element kan have. Den siger hvordan elementet skal se ud.

F.eks.

<p style="color: red;">
    Denne farve er rød
</p>

Giver en rød farve på alt tekst i elementet!


Denne farve er rød


Men det lærer du mere om når du kommer til CSS senere!


HTML: Hierarki

Et HTML dokument er ligesom et familietræ. Et html element kan have en eller flere børn eller en forælder. Fra sin forælder arver man egenskaber som f.eks. CSS farver osv! Derfor er det altså ikke nok bare at læse et dokument fra toppen til bunden, men man skal også lægge mærke til om et element ligger inden i et andet element.

//CSS
#Jens {
    color: red;
}
<!-- HTML -->
<div id="Jens">
    <p> Min forælder er Jens</p>
    <p> Min forælder er også Jens</p>
</div>

Min forælder er Jens

Min forælder er også Jens

I et eksemplet ovenfor kan du se et <div> element som har 2 <p> elementer som børn. Som du kan se har begge arvet farven rød fra "Jens".
Det er meget almindeligt at bruge indrykning så HTML nemmere kan læses. Altså indrykker man børn en enkelt gang mere en deres forælder.


HTML: ul og li - Lister

Hvis du skal have en række elementerne der fremgår som en liste så kan du bruge <ul> </ul> som kaldes for en unummereret liste (Unordered List) sammen med <li> </li> som er en liste genstand (List Item)
F.eks. hvis du vil skrive en opskrift med en række trin, eller hvis du har en række knapper i navigation.

<ul>
    <li> Først skriver man ul </li>
    <li> Så skriver man en række list genstande </li>
    <li> Og så slutter man sin ul </li>
</ul>
  • Først skriver man ul
  • Så skriver man en række list genstande
  • Og så slutter man sin ul