Login
De structuur van een pagina
- Gegevens
- Categorie: HTML Basiscursus
Het HTML-bestand wordt opgebouwd uit 'tags'. Tags worden tussen ‘<’ en ‘>’ gezet. <tag>. Een tag wordt gebruikt om een element een opmaak te geven. Een element heeft altijd een begintag en een eindtag. Een eindtag heeft een extra ‘/‘. </eindtag>
<html>
</html>
Tags kunnen attributen hebben. Extra informatie om de opmaak te verduidelijken.
<tag attribute=”waarde”>
bv.:
<table border="1"> (geeft een tabel weer meet een rand van 1 pixel)
Een HTML-bestand houdt zich altijd aan een simpele structuur. De pagina is opgebouwd in een kop <head> en de inhoud die de bezoeker van de pagina ziet <body>. Met de <html>-tag begint en eindigt de pagina.
<html>
<head>
</head>
<body>
</body>
</html>
In de kop ‹head› plaatsen we informatie die de gebruiker niet hoeft te zien, maar wel nodig is voor een goede werking van de pagina. Bijvoorbeeld steekwoorden om gevonden te worden in zoekmachines, een beschrijving van de site, of de taal van de inhoud. Ook de titel van de pagina wordt in de head opgenomen. De titel is wat je in de blauwe balk bovenaan van je browser zien. In dit geval is dat 'De structuur van een pagina'.
In de body komt de eigenlijke inhoud. Datgene wat we aan de lezer willen tonen. Alle tekst, hyperlinks, plaatjes, enz.
Helemaal aan het begin ons document staat de DOCTYPE declaratie. Hierin wordt aangegeven aan welke HTML-versie het document voldoet. Het is geen tag maar een instructie hoe de browser het document moet interpreteren. Het refereert naar een 'Document Type Declaration' waarin staat in welke verse de html is geschreven.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ik wil hier niet te diep op ingaan. De meeste editors genereren automatisch deze of een gelijkwaardige regel bij het aanmaken van een nieuw document. In ons geval kopiëren we deze regel gewoon naar onze 'index.html'.
Daaronder komt de html-tag. Ons bestand ziet er dan zo uit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mijn eerste pagina</title>
</head>
<body>
</body>
</html>
Sla het bestand 'index.html' nu op op een plek op de harde schijf en open het in de standaard browser door er dubbel op te klikken. De pagina zal helemaal leeg zijn, op de titel na bovenaan.
Samenvatting:
| <Tag> | Omschrijving |
|---|---|
| <html>..</html> | definieert het html-bestand |
| <head>...</head> | deel van de website waar de 'onder water' informatie is |
| <body>...</body> | Het deel van de website wat de gebruiker zien |
| <title>...</title> | titel van de pagina |