3 Elementer, tags og attributter
I dette kapitel ser vi nærmere på en række tags, der giver mulighed for at lave mere avancerede HTML-dokumenter. Indtil videre kunne man godt have en oplevelse af, at HTML-dokumenter bare er dårlige udgaver af Word-dokumenter. Det er de ikke, men det kræver selvfølgelig lidt arbejde at lære at bruge den fulde styrke i HTML. Vi skal i dette kapitel lære at lave links, lister, knapper og at indsætte billeder.
3.1 Tekst og overskrifter
Vi har allerede kigget på overskrifter og almindelig tekst. Her følger en liste af de HTML-elementer, der er vigtige i forhold til tekst.
<h1></h1>op til<h6></h6>angiver headings, hvor 1 er den største og 6 er den mindste.<p></p>angiver en paragraph, det vil sige et helt almindeligt tekstafsnit.<b></b>angiver at teksten er fed eller bold.<i></i>angiver at teksten er kursiv eller italic.<u></u>angiver at teksten er understreget eller underlined.<mark></mark>angiver at teksten er markeret eller marked.
Opdatér dit HTML-dokument, så en af overskrifterne er kursiv og et ord i din tekst er markeret. Prøv herefter, om du kan lave et tekstafsnit, hvor hele afsnittet er kursiv, den første del er fed, den midterste del er understreget og den sidste del er markeret. Hvor mange <i></i>-tags har du brug for?
3.2 Lister
HTML har også elementer til at lave lister.
<ul></ul>angiver en uordnet liste eller en unordered list<ol></ol>angiver en ordnet liste eller en ordered list<li></li>angiver et element på en liste eller en list item
Her er et eksempel på to typer af lister:
HTML
<ul>
<li>Æbler</li>
<li>Pære</li>
<li>Bananer</li>
</ul>
<ol>
<li>Æbler</li>
<li>Pære</li>
<li>Bananer</li>
</ol>Lav en liste, der ser således ud i browseren:
- Frugter jeg godt kan lide:
- Æbler
- Bananer
- Appelsiner
- Frugter jeg ikke kan lide:
- Pærer
- Ananas
- Vandmelon
3.3 Links og attributter
Du har nok allerede gættet, at der findes tags for links. Det er også rigtigt, men det går alligevel ikke helt så let, som med tekst og lister. Tagget<a></a> angiver et link, men hvis man blot bruger det naivt og skriver
HTML
<a>Mit link</a>Mit link
Med andre ord sker der ikke noget! Det skyldes selvfølgelig, at vi ikke har fortalt noget om, hvor linket skal pege hen! Det kan vi gøre ved at angive en attribute i linkets start-tag. En attribute er en egenskab for det specifikke HTML-element, som den hører til, og en attribute skal altid angives i HTML-elementets start-tag.
Alle HTML-elementer kan have attributes, men nogle er mere almindelige end andre, og vi skal senere kigge nærmere på mange flere attributes. Imidlertid er den relevante attribute, til at angive hvor et link peger hen, den følgende:
HTML
<a href="https://talentcamp.dk">Mit link</a>Mit link
Nu virker vores link! Læg imidlertid mærke til, hvordan attributen på start-tagget <a> ser ud. href er navnet på attributen, og det står for "hypertext reference". Denne attribute er altså en reference til en anden ressource på WWW, og indholdet mellem de to anførselstegn er dennes ressources URL. Når man trykker på linket nu bliver man altså ført til forsiden på TalentCampDK's hjemmeside.
Attributtes kommer i mange forskellige variationer og kan betyde vidt forskellige ting. Tagget <a> tager faktisk også en anden attribute kaldet target, som angiver hvor linket skal åbne. Når du klikker på linket ovenfor bliver du sendt videre til TalentCampDK's hjemmeside i samme vindue - og det er faktisk lidt irriterende. I stedet kan man angive attributen target med værdien _blank, som vil få linket til at åbne i en ny fane!
HTML
<a href="https://talentcamp.dk" target="_blank">Mit link</a>Mit link
HTML
name="value"3.4 Billeder
Billeder integreres i HTML-dokumenter med tagget <img>. Dette HTML-element er særligt, fordi det ikke har noget slut-tag. Det består derfor udelukkende af et start-tag. Teknisk set er billeder ikke en del af HTML-dokumentet, men <img>-tagget peger på placeringen af det relevante billede ved hjælp af attributten src. Det kan enten være lokalt på din egen computer eller på internettet.
For at tilpasse billeder til din side, er det muligt at indstille bredde og højde på dem. Det gøres med attributterne width og height, som begge tager et antal pixels som værdier.
HTML
<img src="https://picsum.photos/id/237/200" width="200" height="200">
Hvis du gerne vil vise et billede, der ligger lokalt på din egen computer, skal du angive stien til billedet i forhold til det HTML-dokument, du arbejder på. Hvis der ved siden af dit HTML-dokument for eksempel ligger en mappe, der hedder "billeder", hvori billedet hund.jpg ligger, hentes billedet ind i dit HTML-dokument således.
HTML
<img src="billeder/hund.jpg" width="200" height="200">
3.5 Knapper
HTML-element <button></button> angiver en knap. Det helt centrale ved en knap er, naturligvis, hvad der sker, når man trykker på den. Det angives med attributten onclick.
HTML (+ JavaScript)
<button onclick="alert('AV! Lad være med at trykke så hårdt...')">Tryk!</button>
Værdien af onclick ser noget underlig ud! Det er fordi værdien af onclick skal være en funktion skrevet i javascript. Javascript er et programmeringssprog, som browseren kan læse og køre. Funktionen minder rigtig meget om funktioner i matematik: den tager en et input og returnerer et output.
JavaScript
alert('AV! Lad være med at trykke så hårdt...')Tænk på den måde, som vi skriver funktionsforskrifter på i matematik: f(x) er funktionsværdien af inputet x for funktionen som hedder f. På samme måde hedder ovenstående javascriptfunktion alert og den tager teksten "AV! Lad være med at trykke så hårdt..." som input. Dens output er en dialogboks, der popper op i browseren med inputteksten.