Cursus HTML 4.01 : handleiding opmaak, lettertypes en horizontale lijnen

Achtergrondkleur

De achtergrondkleur van een pagina kan je in stellen met behulp van Style Sheets. Hiervoor stel je een achtergrondkleur in voor het BODY-element. Dit doe je met de eigenschap background. Deze eigenschap geef je als waarde een geldige kleuraanduiding.

Het afgekeurde attribuut bgcolor kan je nog gebruiken, maar het is aan te raden zoveel mogelijk met Style Sheets te werken.

Achtergrondkleur van een pagina met behulp van het bgcolor attribuut: 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="yellow">
  <h1>Achtergrondkleur met het attribuut bgcolor : AFGEKEURD !</h1>
</BODY>
</HTML>

Het afgekeurde attribuut bgcolor wordt ook wel eens gebruikt om tabellen, rijen van tabellen en cellen van tabellen van een achtergrondkleur te voorzien.

Achtergrondkleur van een pagina 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: yellow;}
 </STYLE>
</HEAD>
<BODY>
  <h1>Achtergrondkleur met Style Sheets.</h1>
</BODY>
</HTML>

Uitlijning

De uitlijning van elementen op een pagina gebeurt het best met Style Sheets. Hiervoor maak je gebruik van de eigenschap text-align. Deze eigenschap kan de waarden left, right, center en justify aannamen : links, rechts uitgelijnd, gecentreerd of uitgevuld (links en rechts tegen de marge).

Het align-attribuut kan ook in tal van elementen worden gebruikt maar is afgekeurd ten voordele van Style Sheets.

Uitlijning met het attribuut align : 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="yellow">
  <h1 align="center">Uitlijning met het attribuut align : AFGEKEURD !</h1>
  <h2 align="right">Rechts uitgelijnd</h2>
  <h2>standaard uitlijning</h2>
  <p align="center">Een gecentreerde alinea</p>
  <div align="right">
  	rechts uitgelijnde divisie
	<p align="center">Gecentreerde alinea</p>
	terug in de divisie
  </div>
</BODY>
</HTML>

Ook het centreren met de tags <CENTER>...</CENTER> is afgekeurd.

Uitlijning met 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">
  H1 {text-align:center}
  .rechts {text-align:right}
  .midden {text-align:center}
 </STYLE>
</HEAD>
<BODY>
 <h1>Uitlijning met het Style Sheets</h1>
  <h2 class="rechts">Rechts uitgelijnd</h2>
  <h2>standaard uitlijning</h2>
  <p class="midden">Een gecentreerde alinea</p>
  <div class="rechts">
  	rechts uitgelijnde divisie
	<p class="midden">Gecentreerde alinea</p>
	terug in de divisie
  </div>
</BODY>
</HTML>

Lettertypes

Om lettertypes, lettergroottes en stijlen aan te geven maak je best gebruik van Style Sheets. We bespreken hier echter ook aan aantal tags die afgekeurd zijn doordat ze nog steeds veel in webdocumenten gebruikt worden.

Stijlelementen :

TT: Maakt tekst monospaced op (teletype)
I: Plaatst tekst schuingedrukt (Italics)
B: Plaatst tekst vetgedrukt (Bold)
BIG: Plaatst tekst in een groot lettertype
SMALL: Plaatst tekst in een klein lettertype
STRIKE en S: AFGEKEURD. trekt een streep door de tekst.
U: AFGEKEURD. Plaatst tekst onderstreept (Underlined)

Voorbeeld:

<!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>
  <P><b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype</tt>, en
<big>big</big> en <small>small</small>
</BODY>
</HTML>

Voorbeeld met 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">
  H1 {font-style:italic}
  P.groot {font-size:x-large;font-weight:bold}
 </STYLE>
</HEAD>
<BODY>
 <h1>Uitlijning met het Style Sheets</h1>
 <p>Een gewone alinea</p>
 <p class="groot">Een grote alinea</p>
</BODY>
</HTML>

FONT voor uitgebreidere lettertype-instellingen

Om kleur, grootte en lettertype aan te passen maak je best gebruik van Style Sheets. De FONT-tag is sinds HTML 4 afgekeurd. Deze tag had drie attributen met betrekking tot de weergave van data :

size: de grootte van de tekens aangeduid met een cijfer 1-7, waarbij 3 de normale lettergroote is. Je kan ten opzicht van de standaardfontgrootte ook werken met een grootteaanduiding: vb. +2,-1
color: de kleur van de tekens aangeduid op een correcte manier
face: het lettertype (eventueel een aantal types gescheiden door komma's voor het geval bepaalde types niet ondersteund worden).

Gebruik van FONT : 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>
  <p><FONT size="5">Een grote zin</FONT></p>
  <p><FONT size="2">Een kleine zin</FONT></p>
  <p><FONT color="red">Gekleurde tekst ingeven is ook mogelijk</FONT></p>
  <p><FONT color="green" size="6">Een grote groene zin</FONT></p>
  <p><FONT color="blue" size="5" face="Verdana,Arial,serif">Een ander lettertype</FONT></p>
	<p>
	<FONT color="red">FONT-tags kan je 
	<FONT color="blue" size="4">gemakkelijk</FONT>
	nesten</FONT>
	</p>
</BODY>
</HTML>

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">
  H1 {
       font-style:italic;
       color:blue;
	 }
  P.stijl1 {
       font-size:x-large;
       font-weight:bold;
       font-family:Verdana,Arial,serif;
	   }
 </STYLE>
</HEAD>
<BODY>
 <h1>Een hoofding met een andere opmaak</h1>
 <p class="stijl1">Een mooie stijl voor een alinea</p>
</BODY>
</HTML>

Horizontale lijnen : HR

Met een HR-element kan je een 'Horizontal Rule' : een horizontale lijn laten weergeven.

Een HR-element kent ook een aantal attributen die allen afgekeurd zijn ten voordele van Style Sheets :

align: uitlijning van de lijn - left / center / right
noshade: een lijn in één kleur i.p.v. standaard twee kleuren
size: de hoogte van de lijn op te geven in pixels
width: de lengte van de lijn op te geven in pixels of een percentage van de beschikbare breedte (standaard : 100%)
color: enkel ondersteund in bepaalde browsers (IE) om de lijn te kleuren - af te raden

Symbolen en speciale tekens

Om in HTML speciale karakters te gebruiken is het aan te raden deze tekens niet gewoon via het klavier in te tikken. Daar het WWW een wereldwijd medium is, weet je niet altijd vooraf welke tekenset de internaut gebruikt.

Voor deze doeleinden zijn er lijsten van deze tekens met de juist code, dergelijke lijsten vind je bij het W3C.

Sommige tekens zoals < en > moet je ook op deze manier ingeven omdat ze anders door de browser 'geïnterpreteerd' worden inn plaats van op het scherm getoond.

Enkele voorbeelden :

Teken	Gebruiksvriendelijke code	Numerieke code
<	<	<
>	>	>
&	&	&
é	é	é
ë	ë	ë
α	α	α
©	©	©
non-breaking space / vaste spatie

Opmerking: bepaalde karakters hebben geen gebruiksvriendelijke code, je bent dan verlicht de numerieke code te gebruiken.

HTML 4.01 : Opmaak, lettertypes en horizontale lijnen