HTML5 tutorial 3 – De mest anvendte tags og attributter

I dette afsnit af min HTML5 tutorial vil du lære de mest almindelige tags og attributter du skal kende i HTML. 
Selvom HTML nok aldrig blev opfundet til at style en hjemmeside, er der en del tags der kan angive hvordan din hjemmeside skal se ud. Vil du have et mere avanceret design, skal du efter du har lært HTML lære det sprog der hedder CSS. Det er det sprog der generelt angiver hvordan udseendet af din hjemmeside skal være. Men lad os lige se på hvad HTML selv kan.

De mest anvendte tags

Lad os lige se nærmere på de mest anvendte tags i HTML.

Skriv med fed skrift

Du kan f.eks. skrive noget tekst med fed skrift, ved at angive tagget <b>. <b> står for “bold” og dette tag skal både have et start- og et sluttag og teksten der skal være fed skal være mellem de to tags. Et eksempel er:

<b>Denne tekst står med fed</b> - mens denne tekst står ikke med fed.

Hvis du tilføjer det til din HTML side, får du følgende resultat i din browser:

Du vil også se nogle steder, at folk anvender tagget <strong> og </strong> i stedet for <b> og </b>. Dette er en mere moderne version af tagget, der giver fed skrift.

Skriv med kursiv skrift

For at skrive med kursiv skal du anvende tagget <i> og </i>. <i> står for “italic”.

<i>Dette skrives med kursiv</i>

Hvis du både vil have noget tekst med fed og kursiv, kan du sagtens bruge begge tags:

<b><i>Dette skrives med kursiv</i></b>

Bemærk dog at tags skal lukkes i samme rækkefølge som du har åbnet dem. Det ville derfor IKKE være korrekt at skrive følgende. I følgende eksempel åbner jeg nemlig et <b> tag først, men slutter et <i> tag til sidst.

<b><i>Dette skrives med kursiv</b></i>

Understreg tekst

For at understrege tekst skal du bruge tagget <u> og </u>. Det står for “underline”.

<u>Dette er understreget</u>

Indsæt afsnit

For at indsætte et nyt afsnit kan du bruge <p> og </p> der står for “paragraph”.

<p>Dette er et afsnit</p>
<p>Dette er et nyt afsnit</p>

Linjeskift

Bemærk at hvis du indsætter et linjeskift, vil det ikke få effekt i browseren. Browseren læser nemlig ikke et linjeskift som et linjeskift, så det kan du bruge til at få koden til at fremstå nemmere at læse. I stedet skal du bruge et <br> tag til et linjeskift. <br /> står for “break”.

Her er noget tekst<br />Og dette tekst er på en ny linje.

For at få dette til at stå mere klart i koden kan du også skrive følgende der giver nøjagtig det samme resultat:

Her er noget tekst<br />
Og dette tekst er på en ny linje.

I øvrigt ville <br> i dette tilfælde give samme resultat som <br />. Som tidligere nævnt anvendes /> til at lukke tags, hvis de ikke både har et start- og et sluttag.

Overskrifter

Ligesom du i Word kan lave overskrifter, kan du det også i et HTML dokument. Her anvender du <h1> for overskrift 1, <h2> for overskrift 2, <h3> for overskrift 3 osv.

<h1>Overskrift1</h1>
<h2>Overskrift2</h2>
<h3>Overskrift3</h3>
Almindelig tekst

Vandret linje

For at indsætte en vandret linje i HTML skal du bruge det tag der hedder <hr />. Bemærk at det skal hellere ikke lukkes.

Her er noget tekst
<hr />
Her er noget tekst efter en vandret linje

Citater

For at skrive citater, kan du anvende det tag der hedder <blockquote>.

Her er noget tekst
<blockquote>Her er et citat</blockquote>

Punktliste

For at lave en punktliste skal du bruge tagget <ul> til at starte listen og så <li> for hvert punkt:

<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>

Som så vil se således ud:

• Punkt 1
• Punkt 2

Dette er en uordnet liste med punkter og det er her du bruger <ul> tagget. Hvis du heller vil have en ordnet liste med tal bruger du <ol> i stedet:

<ol>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ol>

Hvilket vil se således ud:

1. Punkt 1
2. Punkt 2

Du har altså i dette afsnit nu lært de HTML tags der hedder <b>, <i>, <u>, <p>, <br>, <hr>, <h1>, <h2>, <h3>, <blockquote>, <ul>, <ol>, <li>. Med disse tags kan du allerede nu lave en del i dit HTML-dokument. Prøv dig frem og lær disse tags godt, fordi du kommer til at bruge dem tit.

Eksempler på attributter

Du kommer til at lære en del attributter, når vi kommer til links, billeder og tabeller. Men der er allerede nu nogle der er værd at lære.
En attribut var den egenskab der kunne tilføjes til et tag og som på den måde udvider et tag. Du kan f.eks. angive følgende attribut til det tag der hedder <body>.

<body bgcolor="black">

Dette fortæller browseren at baggrundsfarven skal være sort. Du kan her både angive “populærnavnene” på farverne på engelsk, som f.eks. black, white, red, green osv. Men du kan også angive en HTML farvekode der altid begynder med #. Koden for sort er #000000 og koden for hvid er #FFFFFF. Det er en 6-cifret kode baseret på et 16-talssystem, dvs. den kan indeholde tallene fra 0-9 og bogstaverne fra A-F. Du kan på denne hjemmeside se eksempler på disse koder. Men de vigtigste er:

• Sort #000000
• Rød #FF0000
• Blå #0000FF
• Grøn #00FF00
• Gul #FFFF00
• Hvid #FFFFFF

Hvis du senere lærer CSS, så du kan designe din hjemmeside endnu flottere, kan du angive CSS kode i en attribut der hedder style. Du kan f.eks. skrive:

<body style="background-color:#000000;">

Hvilket giver nøjagtig samme resultat som den HTML-kode du lige har skrevet, for at få en sort baggrund.
Det var de vigtigste tags og attributter. I næste afsnit vil jeg vise dig hvordan du indsætter links og billeder i HTML.