Handleiding HTML - Weergave tekst

Weergave tekst
Handleiding HTML	Inhoud Index

In dit onderdeel komen aan de orde Introductie, Elementen, Fysieke tekstopmaak-elementen, Logische tekstopmaak-elementen, Gebruik lettertypen en Het gebruik van stijlen.

Introductie

Voor het bepalen van de weergave van inline tekst (de tekst ergens op een regel, welke onderdeel is van een element op blokniveau, zoals P of TABLE) zijn verschillende soorten elementen beschikbaar.

De fysieke tekstopmaak-elementen gebruik je als je wilt vastleggen hoe de tekst moet worden weergegeven. Bijvoorbeeld vet (B), cursief (I), onderstreept (U) en met een vaste letterafstand (TT). De elementen BIG en SMALL kunnen gebruikt worden om de tekst groter of kleiner dan de standaard lettergrootte weer te geven. Met de elementen SUB en SUP wordt de tekst in subscript (iets onder de regel) of in superscript (iets boven de regel) geplaatst.

Bij de logische tekstopmaak-elementen wordt niet de exacte weergave vastgelegd, maar meer het type tekst. De browser (of als die mogelijkheid er is, de gebruiker via de instellingen van de browser) bepaalt hoe de ingesloten tekst wordt weergegeven. Voorbeelden zijn met nadruk (EM), met extra nadruk (STRONG), geciteerde tekst (CITE) en als computercode (CODE). Omdat veel auteurs zelf de controle over de weergave van hun documenten wensen te hebben, wordt van de logische tekstopmaak-elementen tegenwoordig slechts beperkt gebruik gemaakt.

Met de elementen FONT en BASEFONT bepaal je met behulp van achtereenvolgens de attributen SIZE, COLOR en FACE de grootte en kleur van de letters en het lettertype. Bij het FONT element gaat het om de ingesloten tekst. Het BASEFONT element wordt direct na de activering van het BODY element geplaatst en heeft betrekking op alle tekst in het document.

De genoemde elementen worden gebruikt voor korte stukjes tekst, soms zelfs een enkel woord of een enkele letter. Wanneer je de kleur van alle tekst in een document in één keer wilt vastleggen, dan kun je gebruik maken van het TEXT attribuut van het BODY element. Zie voor een toelichting het onderdeel Structuur document.

Uitgebreide mogelijkheden bij het opmaken van tekst heb je met Cascading Style Sheets.

Het in HTML 4.0 nieuw opgenomen Q element kan gebruikt worden voor geciteerde tekst. De browser zou deze tussen aanhalingstekens moeten plaatsen.

De eveneens nieuw in HTML 4.0 opgenomen elementen ABBR en ACRONYM kun je toepassen bij afkortingen. Bij ABBR gaat het om gewone afkortingen zoals HTML en CSS, bij ACRONYM om (uitspreekbare) letterwoorden als cara of radar. Met het TITLE attribuut kan de lange vorm van de afkorting worden vastgelegd. Browsers kunnen deze bijvoorbeeld weergeven als een tooltip.

De elementen DEL en INS kunnen gebruikt worden om revisiegegevens van een document vast te leggen. Het INS element bevat de inhoud welke is toegevoegd, het DEL element inhoud welke is verwijderd. De browser moet deze inhoud op een passende manier weergegeven, bij het INS element bijvoorbeeld onderstreept, bij het DEL element bijvoorbeeld doorgestreept. DEL en INS kunnen niet alleen als inline element gebruikt worden, maar ook als element op blokniveau.

Elementen

Voor het bepalen van de weergave van inline tekst zijn de volgende elementen beschikbaar:

ABBR
ACRONYM
B
BASEFONT
BIG
BLINK
CITE

CODE
DEL
DFN
EM
FONT
I
INS

KBD
Q
S
SAMP
SMALL
STRIKE
STRONG

SUB
SUP
TT
U
VAR

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Netscape Navigator, Microsoft Internet Explorer en Opera.

Fysieke tekstopmaak-elementen

De volgende elementen worden gerekend tot de fysieke tekstopmaak-elementen: B, I, S, STRIKE, TT, U, BIG, SMALL, SUB en SUP. Je gebruikt ze, als je de weergave van de tekst wilt vastleggen.

`Dit is <B>vet</B>`	Dit is vet
`Dit is <I>cursief</I>`	Dit is cursief
`Dit is <S>doorgestreept</S>`	Dit is ~~doorgestreept~~
`Ook dit is <STRIKE>doorgestreept</STRIKE>`	Ook dit is ~~doorgestreept~~
`Deze tekst heeft een <TT>vaste letterafstand</TT>`	Deze tekst heeft een `vaste letterafstand`
`Dit is <U>onderstreept</U>`	Dit is onderstreept
`Dit is <BIG>groot</BIG>`	Dit is groot
`Dit is <SMALL>klein</SMALL>`	Dit is klein
`Dit is <SUB>subscript</SUB>`	Dit is _subscript
`Dit is <SUP>superscript</SUP>`	Dit is ^superscript

Tot de de fysieke tekstopmaak-elementen kan ook het Netscape-specifieke BLINK element gerekend worden, waarmee tekst knipperend kan worden weergegeven. Omdat knipperende tekst door veel gebruikers als hinderlijk wordt ervaren, wordt geadviseerd geen gebruik van dit element te maken.

De verschillende fysieke tekstopmaak-elementen kunnen ook gecombineerd gebruikt worden.

Dit is <TT>vet en typemachine tekst</TT> en onderstreept en cursief.

In de browser zie je:

Dit is vet en typemachine tekst en onderstreept en cursief.

Logische tekstopmaak-elementen

De volgende elementen worden gerekend tot de logische tekstopmaak-elementen: EM, STRONG, CITE, DFN, CODE, SAMP, KBD en VAR. Je gebruikt ze, als je niet de exacte weergave wilt bepalen, maar vooral wilt aangeven om wat voor soort tekst het gaat. De browser (of als die mogelijkheid er is, de gebruiker via de instellingen van de browser) bepaalt vervolgens hoe de ingesloten tekst wordt weergegeven.

`Deze tekst heeft <EM>nadruk</EM>`	Deze tekst heeft nadruk
`Deze tekst heeft <STRONG>extra nadruk</STRONG>`	Deze tekst heeft extra nadruk
`Dit is een <CITE>citaat</CITE>`	Dit is een citaat
`Deze <DFN>term</DFN>`	Deze term wordt gedefinieerd
`Dit is <CODE>computercode</CODE>`	Dit is `computercode`
`Dit is een <SAMP>voorbeeld van de output</SAMP> van een programma`	Dit is een `voorbeeld van de output` van een programma
`Deze <KBD>tekst</KBD> moet de gebruiker vanaf het toetsenbord invoeren`	Deze `tekst` moet de gebruiker vanaf het toetsenbord invoeren
`Dit is een <VAR>variabele</VAR>`	Dit is een `variabele`

Gebruik lettertypen

De grootte van de tekst kan bepaald worden met behulp van het SIZE attribuut van het FONT element. Als waarde van het SIZE attribuut kan een getal van 1 t/m 7 gebruikt worden om de absolute lettergrootte vast te leggen, of een getal gecombineerd met een "+" of een "-" om de grootte van de letters in ten opzichte van de standaard lettergrootte te bepalen.

De absolute lettergrootte is SIZE="1" SIZE="2" ..

In de browser zie je:

De absolute lettergrootte is SIZE="1" SIZE="2" SIZE="3" SIZE="4" SIZE="5" SIZE="6" SIZE="7"

De grootte .. lettergrootte: SIZE="-2" SIZE="-1" ..

In de browser zie je:

De grootte kan ook opgegeven worden in verhouding tot de standaard lettergrootte: SIZE="-2" SIZE="-1" SIZE="+1" SIZE="+2" SIZE="+3" SIZE="+4"

Houdt er rekening mee, dat bij sommige browsers de gebruiker de weergave van de, via het SIZE attribuut gedefinieerde, lettergrootte kan uitzetten. Om de structuur van je document helder te houden, kun je voor koppen daarom het beste altijd een Hx element gebruiken.

Het FACE attribuut van het FONT element bepaalt het lettertype dat gebruikt wordt voor de tekst. De waarde van het FACE attribuut is de naam van één lettertype, of meerdere lettertypen gescheiden door een komma. Een tweede lettertype wordt gebruikt, als het eerste niet aanwezig is op het systeem van de gebruiker. Als geen van de opgegeven lettertypen is geïnstalleerd, wordt het standaard lettertype van de browser gebruikt.

Afhankelijk .. van de browser..

In de browser zie je:

Afhankelijk van de beschikbaarheid van de opgegeven lettertypen, wordt deze tekst weergegeven in Garamond, Times New Roman, of het standaard lettertype van de browser.

Het COLOR attribuut van het FONT element bepaalt de kleur van de tekst.

Deze tekst wordt weergegeven in rood..

In de browser zie je:

Deze tekst wordt weergegeven in rood.

Het spreekt voor zich dat je bij het gebruik van het COLOR attribuut rekening houdt met de achtergrondkleur, welke je via het BGCOLOR attribuut van het BODY element hebt gedefinieerd. Daarmee heb je echter nog niet gewaarborgd dat de weergave in alle gevallen goed is. Veel browsers hebben de mogelijkheid in te stellen dat uitsluitend de door de gebruiker zelf opgegeven kleuren gebruikt mogen worden (dat is bijvoorbeeld van belang als de gebruiker een verminderd gezichtsvermogen heeft). Niet elke browser doet dat echter op een correcte manier. Bij Microsoft Internet Explorer vanaf versie 4.0 en Opera vanaf versie 2.1 geldt de keuze van de gebruiker voor alle kleuren. Bij Netscape Navigator echter hebben de kleuren van de gebruiker alleen prioriteit over de via het BODY element gedefinieerde kleuren. Een door de auteur via het COLOR attribuut vastgelegde kleur wordt niet gewijzigd in de kleur van de gebruiker. Dat kan als resultaat hebben dat de tekst waarvoor het COLOR attribuut is gebruikt, moeilijk of niet leesbaar wordt. In de volgende afbeeldingen is dit te zien en als je op de bovenste afbeelding klikt kun je het zelf uitproberen.

	door de auteur bedoelde weergave
	weergave met zwart voor de tekst en wit voor de achtergrond als gebruikerskleuren door Microsoft Internet Explorer 4
	weergave met zwart voor de tekst en wit voor de achtergrond als gebruikerskleuren door Netscape Navigator

Wanneer je ondanks de genoemde problemen toch gebruik wilt maken van het COLOR attribuut, dan is het verstandig in ieder geval een kleur te kiezen die de minste kans op problemen heeft. Omdat de meeste gebruikers als standaard waarschijnlijk een lichte achtergrond toepassen (wit, licht grijs, geel), zal dat het beste een wat donkere kleur kunnen zijn.

Het FONT element kan ook gecombineerd gebruikt worden met de fysieke tekstopmaak-elementen, bijvoorbeeld om de tekst vet (B) of cursief (I) weer te geven.

De tekst .. kan ook vet of cursief weergegeven worden.

In de browser zie je:

De tekst ingesloten door het FONT element kan ook vet of cursief weergegeven worden.

Het BASEFONT element wordt gebruikt om de standaard lettergrootte, -kleur en -type voor een document vast te leggen. In het volgende voorbeeld zijn de attributen SIZE, COLOR en FACE aan het BASEFONT element toegevoegd.

<BASEFONT SIZE="5" COLOR="fuchsia" FACE="Lucida Sans,Arial">

In een nieuw venster kun je zien hoe de browser dit weergeeft.
De attributen COLOR en FACE van het BASEFONT element worden slechts beperkt ondersteund. Voor het SIZE attribuut is de ondersteuning niet altijd correct. Zo negeert Netscape Navigator de via het BASEFONT element gedefinieerde grootte en houdt in plaats daarvan de standaard lettergrootte van de browser aan.

Wanneer het BASEFONT element is gebruikt, geldt de waarde van het SIZE attribuut als beginwaarde voor de relatieve waarden van het SIZE attribuut van het FONT element.

<BASEFONT SIZE="5"> De via het .. element: SIZE="-4" SIZE="-3" ..

In een nieuw venster kun je zien hoe de browser dit weergeeft.

Om te komen tot een betere scheiding tussen de structuur van een document en de presentatie ervan, is het de bedoeling dat in plaats van de elementen FONT en BASEFONT in de toekomst gebruik gemaakt wordt van style sheets.

Het gebruik van stijlen

Voor alle elementen voor tekstopmaak kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. In het volgende voorbeeld is met behulp van het STYLE attribuut een inline stijl gedefinieerd, welke vastlegt dat de tekst ingesloten door het B element niet alleen vet, maar (via de background-color eigenschap) tevens met een gele achtergrond moet worden weergegeven.

Met Cascading Style Sheets krijg .. documenten.

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

De opmaak van een document kan, in plaats van met de elementen voor tekstopmaak, ook geheel met behulp van stijlen bepaald worden. In het volgende voorbeeld worden de stijleigenschappen font-size, color en font-family gebruikt in plaats van het FONT element met de attributen SIZE, COLOR en FACE.

Deze opmaak is bepaald met Cascading Style Sheets

In plaats van de fysieke tekstopmaak-elementen B, I, U, TT en BIG kunnen de stijleigenschappen font-weight, font-style, text-decoration, font-family en font-size gebruikt worden.

Dit is vet, cursief, onderstreept, vaste letterafstand en groot

Omdat nog maar een beperkt aantal browsers Cascading Style Sheets ondersteunt, is het aan te raden stijlen voorlopig alleen te gebruiken als aanvulling op de mogelijkheden die de elementen voor tekstopmaak bieden.

Inhoud Handleiding HTML Index Inhoud Weergave tekst