De algemene structuur van een webpagina is als volgt :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Mijn eerste webpagina</TITLE>
</HEAD>
<BODY>
<P>Hallo iedereen !
</BODY>
</HTML>
Een HTML 4 Document bestaat uit drie delen :
Een lijn met informatie over de gebruikte versie van HTML
Een hoofding : beschrijvend gedeelte
De hoofding staat tussen de tags <HEAD> en </HEAD>.
De hoofding bevat hier enkel het title-blok : de titel van de webpagina zoals die in de titelbalk van de browser wordt weergegeven.
De titel staat tussen de tags <TITLE> en </TITLE>.
Een body : de eigenlijke inhoud van de webpagina
De body tussen de tags <BODY> en </BODY>
deel 2 en 3 worden omgeven door het HTML-element : de tags <HTML> en </HTML>.
Tags zijn dus instructies voor een browser die tussen < en > worden aangegeven. Een tag </ ... > duidt op een einde van een instructie.Namen van tags worden in deze cursus steeds op deze manier weergegeven.
Informatie over de HTML versie
Een correct (Eng.: Valid) HTML-document geeft aan welke versie van HTML in het document werd gebruikt, er zijn immers reeds een aantal versies van deze taal sedert het ontstaan ervan. De declaratie van het documenttype geeft aan welke Document type Definition (DTD) er gebruikt werd voor dit document. Een DTD is een document dat dus aangeeft aan welke regels het huidige document is onderworpen. Het is een kwestie van standaardisatie van documenten, zodat HTML documenten op vele platformen door vele ontwikkelaars op eenzelfde manier zouden worden gemaakt. Deze DTD's zijn aangemaakt door het W3C : het World Wide Web Consortium.
De HTML 4.01 DTD's :
The HTML 4.01 Strict DTD bevat alle elementen en attributen die niet afgekeurd zijn en niet voorkomen in documenten met frames. Declaratie :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
De HTML 4.01 Transitional DTD bevat alles uit de strict DTD plus afgekeurde elementen en attributen (de meeste gaan over visuele presentatie). Declaratie :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
De HTML 4.01 Frameset DTD bevat alles uit de Transitional DTD en ook frames. Declaratie :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
De hoofding (HEAD)
Het HEAD-element (<HEAD> en </HEAD>-tags)
Dit element bevat informatie over de pagina, zoals de titel, sleutelwoorden die nuttig kunnen zijn voor zoekmotoren, en andere gegevens die niet als inhoud van de webpagina worden beschouwd. User Agents (programma's die webdocumenten lezen en weergeven, zoals browsers) geven de inhoud van de hoofding meestal niet op het scherm weer.
Het TITLE-element (<TITLE> en </TITLE>-tags)
Elk HTML-document moet een TITLE-element hebben in de HEAD-sectie. Wees er als auteur van bewust dat de titel belangrijk is voor het opzoeken en beschrijven van je HTML-document, kies dus een duidelijke, beschrijvende titel voor je documenten.
De titel mag tekstwaarden bevatten, maar geen andere HTML-tags.
Title als attribuut (<tagnaam title="...">)
In een aantal tags kan title als attribuut worden gebruikt, meer hierover verderop in de cursus.
META - data (<META ...>)
HTML staat toe dat je informatie over het document opgeeft die geen inhoud voor de pagina is. Een van de manieren om dit te doen is via META-data.
Je kan bijvoorbeeld de auteur van een document op de volgende manier aangeven :
<META name="Author" content="William Schokkelé">
Je kan ook de taal van de auteur opgeven met het attribuut lang :
De BODY van een document bevat de eigenlijke inhoud van een HTML pagina. Deze inhoud wordt door een grafische User Agent (zoals browsers) meestal op het scherm geplaatst : tekst, tabellen, figuren, animaties, en vele andere objecten.
Daar er aanbevolen wordt Style Sheets te gebruiken voor de opmaak van je documenten, zijn de attributen van de BODY-tag die zorgen voor de visualisering, afgewezen. Je kan ze echter wel gebruiken met de Transitional DTD, we zullen er kennis mee maken maar toch zo veel mogelijk van Style Sheets gebruik maken in de toekomst. Dit betekent dat je voor het begin van deze HTML-cursus misschien wat zal moeten spieken bij de cursus Style Sheets, zodanig dat we de HTML-code die we leren correct leren gebruiken in combinatie met Style Sheets.
Standaard kleurinstellingen als attributen in de BODY-tag : AFGEKEURD!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
</HEAD>
<BODY bgcolor="white" text="black"
link="red" alink="fuchsia" vlink="maroon">
... body van het document ...
</BODY>
</HTML>
Je kan een aantal standaard instellingen doen in de BODY-tag met behulp van attributen:
bgcolor: geeft de achtergrondkleur op
text: geeft de standaard tekstkleur op
link: geeft de kleur aan van niet bezochte hyperlinks
alink: geeft de kleur op van een actieve hyperlink (erop geklikt)
vlink: geeft de kleur op van een bezochte hyperlink
Opmerking: het opgeven van kleuren als attribuutwaarden gebeurt met de Engestalige naam van een kleur of een # en een RGB-waarde (rood-groen-blauw) :
red, blue, black, green, ...
#FF0000 = rood : eerste twee hex. cijfers = aandeel rood, tweede koppel = aandeel groen, laatste koppel : aandeel blauw.
Standaard kleurinstellingen met behulp van Style Sheets :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
A:link { color: red }
A:visited { color: maroon }
A:active { color: fuchsia }
</STYLE>
</HEAD>
<BODY>
... body van het document ...
</BODY>
</HTML>
Het gebruik van externe stijlbladen stelt je in staat de opmaakeigenschappen van de inhoud van de pagina te scheiden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<LINK rel="stylesheet" type="text/css" href="stijl.css">
</HEAD>
<BODY>
... body van het document ...
</BODY>
</HTML>
In documenten die framesets bevatten wordt de BODY-tag vervangen door de FRAMESET-tag.
Elementen identificeren met id en class
Met behulp van het attribuut id kan je elementen in een pagina een naam geven, deze naam moet uniek zijn in het document.
Deze naam kan dan gebruikt worden voor sprongen met behulp van hyperlinks, als aanduiding voor een gebruikte Style Sheet, als referentie voor het object bij gebruik van scripttalen zoals Javascript, als naam van een gedeclareerd OBJECT-element.
<P id="alinea1">Een alinea.</P>
<P id="alinea2">Nog een alinea.</P>
Met behulp van het attribuut class kan je aangeven dat een element behoort tot een bepaalde klasse. Meerdere elementen kunnen tot dezelfde klasse behoren. Dit attribuut wordt voornamelijk gebruikt bij het toepassen van Style Sheets.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
SPAN.opmerking { color: green }
SPAN.belangrijk { color: yellow }
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="belangrijk">Niet vergeten !</SPAN>
<P><SPAN class="opmerking">Wees goedgehumeurd</SPAN>
<P><SPAN class="belangrijk">Opgepast !</SPAN>
</BODY>
</HTML>
Blok-niveau en inline elementen
Bepaalde elementen die voorkomen in de BODY van de pagina zijn blok-niveau elementen en anderen zijn inline elementen. Het verschil zit in een aantal aspecten :
Inhoud : blok-elementen mogen andere blok-elementen en inline elementen bevatten, inline elementen mogen enkel data en andere inline elementen bevatten.
Opmaak : algemeen beginnen blok elementen op een nieuwe lijn, inline elementen niet.
Elementen groeperen : DIV en SPAN
De DIV en SPAN elementen vormen, in samenwerking met de id en class attributen, een manier om documenten te structureren. Deze elementen geven weer of de inhoud inline (SPAN) of op blok-niveau (DIV) moet worden weergegeven.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
SPAN.opmerking { color: green }
SPAN.belangrijk { color: yellow }
DIV.blok {border:solid 1px;background:red }
</STYLE>
</HEAD>
<BODY>
<DIV class="blok">
<SPAN class="belangrijk">Niet vergeten !</SPAN>
<SPAN class="opmerking">Wees goedgehumeurd</SPAN>
</DIV>
<SPAN class="belangrijk">Opgepast !</SPAN>
</BODY>
</HTML>
Hoofdingen : H1, H2, H3, H4, H5, H6 elementen
Een hoofding geeft een korte beschrijving van een besproken onderwerp. Hoofdingen worden door User Agents gebruikt om deze secties op te maken. Je kan deze secties ook zelf opmaken met behulp van Style Sheets.
Er zijn zes niveaus van hoofding : H1 is belangrijkst, H6 het minst belangrijk.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Cursus HTML - IVO Brugge</TITLE>
<STYLE type="text/css">
BODY { background: white; color: black}
H2 {
color: darkblue;
text-align:center;
}
H3 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Werken met toepassingssoftware</H1>
<H2>Word</H2>
Werken met een tekstverwerker<br>
...
<H3>Figuren</H3>
...
<H3>Tabellen</H3>
...
<H3>Kolommen</H3>
...
<H2>Excel</H2>
Werken met een rekenblad<br>
...
</BODY>
</HTML>
