ELEMENTEN
Naast de tags die gebruikt worden om de basisstructuur van een HTML-pagina te definiëren, zijn er nog heel wat andere HTML-tags die je gebruikt om je webpagina vorm te geven. Deze tags worden binnen <body>...</body> gebruikt.
Dit zijn ongetwijfeld twee van de meest gebruikte HTML-elementen:
- koppen <h1> tot <h6>
- alinea's <p>
Koppen worden binnen tekstverwerkingsprogramma's gebruikt om een onderscheid te maken tussen de verschillende hoofdstukken en niveaus in een document. HTML geeft je ook de mogelijkheid om koppen aan te maken en dit tot op zes niveaus.
| Tags | Omschrijving |
| <h1>…</h1> | Kop niveau 1 |
| <h2>…</h2> | Kop niveau 2 |
| <h3>…</h3> | Kop niveau 3 |
| <h4>…</h4> | Kop niveau 4 |
| <h5>…</h5> | Kop niveau 5 |
| <h6>…</h6> | Kop niveau 6 |
Om een tekst in alinea's op te delen, gebruik je de <p> tag.
| Tag | Omschrijving |
| <p>…</p> | Een alinea aangeven (paragraaf). |
Maak je geen gebruik van koppen en alinea's, dan zal alle tekst die je binnen de <body> tags plaatst na elkaar worden weergegeven.
Voorbeeld van een pagina ZONDER HTML-elementen binnen <body>...</body>
<!doctype html>
<html>
<head>
<title>Koppen en alinea's</title>
</head>
<body>
Jouw naam
Hallo wereld! Met behulp van deze pagina stel ik mezelf voor via het world wide web.
Woonplaats
Ik woon in ... .
Hobby
Mijn favoriete hobby is ... .
Eten
Mijn favoriete eten is ... .
HTML
Vandaag leer ik werken met HTML. Het is even wennen. Dit is mijn eerste webpagina.
Basiscursus
De cursus HTML 5 vond ik op basiscursus.be.
</body>
</html>Voorbeeld van een pagina MET HTML-elementen binnen <body>...</body>
<!doctype html>
<html>
<head>
<title>Koppen en alinea’s</title>
</head>
<body>
<h1>Jouw naam</h1>
<p>Hallo wereld! Met behulp van deze pagina stel ik mezelf voor via het world wide web.</p>
<h2>Woonplaats</h2>
<p>Ik woon in ... .</p>
<h3>Hobby</h3>
<p>Mijn favoriete hobby is ... .</p>
<h4>Eten</h4>
<p>Mijn favoriete eten is ... .</p>
<h5>HTML</h5>
<p>Vandaag leer ik werken met HTML. Het is even wennen. Dit is mijn eerste webpagina.</p>
<h6>Basiscursus</h6>
<p>De cursus HTML 5 vond ik op basiscursus.be.</p>
</body>
</html>ATTRIBUTEN
Men gebruikt attributen om tags extra functionaliteiten te geven. Dit zijn enkele algemene kenmerken van attributen:
- altijd in de openingstag opgegeven;
- met een spatie gescheiden van de tagnaam;
- één tag kan meerdere attributen bevatten (met elk een bepaald kenmerk);
- notatie/vorm: naam="waarde"
HTML5 liet heel wat oude attributen vallen. Aan de andere kant kwamen er een aantal nieuwe globale attributen bij.
Het wegvallen van sommige attributen heeft vaak met CSS (= Cascading Style Sheets) te maken. CSS stijlen definiëren de weergave van bepaalde HTML-elementen. HTML en CSS horen samen, dus af en toe zal er in deze cursus naar CSS verwezen worden. CSS kan op verschillende manieren toegepast worden, maar daar gaan we nu niet dieper op in. Momenteel is het vooral interessant om te beseffen dat CSS ook als een attribuut kan voorkomen, al is dit de minst efficiënte manier waarop je CSS kunt gebruiken. Meer informatie daarover bij de cursus CSS.
CSS als attribuut: style="waarde"
Voorbeeld van een pagina waarbij de kop <h1> in het rood wordt weergegeven.
<!doctype html>
<html>
<head>
<title>Paginatitel</title>
</head>
<body>
<h1 style="color: red;">Titel in het rood</h1>
<p>Inhoud van deze pagina.</p>
</body>
</html>Download: bovenstaande oefeningen (.zip)