HTML/Basiscursus/Opmaak

Via bepaalde elementen en attributen kun je de inhoud van jouw pagina mooi opmaken. Tegenwoordig zijn veel van deze elementen of attributen verouderd in HTML en worden ze zelfs niet meer ondersteund in XHTML. In plaats van die te gebruiken wordt er aangeraden om CSS te gebruiken. In dit hoofdstuk zullen we enkele van deze elementen en attributen bekijken en tonen hoe je CSS kunt toepassen. We geven telkens ook de waarschuwing welke je wel mag gebruiken en welke niet.

Lettertype, grootte en kleur

Er zijn 2 manieren om het lettertype, grootte en kleur aan te passen. Dit kan via de attributen van een bepaald element of via CSS. Ook kun je via elementen bepalen welke teksten welke opmaak krijgen. Zo kun je dankzij body al de inhoud van een webpagina dezelfde opmaak geven of kun je bij hele kleine stukjes specifieke opmaak geven dankzij span.

font en span

 zie ook font en span voor meer informatie.

Vroeger wanneer er aan hele kleine stukjes tekst (maar ook aan hele grote) opmaak moest veranderd worden werd er font gebruikt. Dit kon makkelijk worden gedaan dankzij zijn attributen

HTML-code: Tekst opmaken met font.

<span style="font-size: large; color: red; font-family: times new roman;">
Dit is grote rode tekst in times new roman.
</span>

Dit is grote rode tekst in times new roman.

Dankzij de attributen size, color en face kon je respectievelijk de grootte, kleur en lettertype van je tekst aanpassen. Bij het attribuut size moet je een getal van 1 tot 7 geven, bij color de naam of code van een kleur en bij face een lettertype. Dit element is ondertussen verouderd en wordt het nietmeer ondersteund door XHTML. Vrijwel alle browsers ondersteunen nog dit element maar het is echter aangeraden om het niet meer te gebruiken en alle opmaak in de stylesheet te definiëren. Nu kun je als je kleine stukjes tekst andere opmaak wilt geven het element span gebruiken. Deze heeft echter die attributen niet en moet je de tekst opmaken op een andere manier. Dit gebeurt via CSS of het style attribuut.

CSS & HTML-code: Tekst opmaken met span.

Dit is de CSS-code.

span {
     font-size: 19px;
     color: red;
     font-family: times new roman;
}

Dit is de HTML-code.

<span>
Dit is grote rode tekst in times new roman.
</span>

Dit is grote rode tekst in times new roman.

Met span kun je dus evenveel bereiken als font let wel op dat bij font-size andere regels gelden dan bij de size van font. Bij font-size wordt de grootte van de tekst opgegeven in pixels of punten. Als je nog niet vertrouwd bent met CSS kun je ook de CSS code plaatsen bij een attribuut van span namelijk het attribuut style.

HTML-code: Tekst opmaken met span.

<span style="font-size: 18px; color: red; font-family: times new roman;">
Dit is grote rode tekst in times new roman.
</span>

Dit geeft exact hetzelfde resultaat.

Nadruk leggen

Als we op tekst nadruk willen leggen moet deze tekst in het oog springen. Tegenwoordig worden daarvoor de elementen em en strong gebruikt. Naast deze elementen zijn er nog i, b en u. Deze zijn echter verouderd en het is af te raden om deze nog te gebruiken.

em

De em staat voor het engelse emphasis wat staat voor het woord nadruk. Met dit element kun je dus nadruk leggen op stukjes tekst.

HTML-code: Nadruk leggen op tekst via em

<em>Ik wil nadruk leggen op deze tekst</em>

Ik wil nadruk leggen op deze tekst

Meestal wordt de tekst dan schuin afgedrukt, maar dat is zeker niet altijd zo. Er kunnen browsers zijn die iets anders met de tekst doen of het element em kan via CSS zijn aangepast.

HTML-code: em aagepast via CSS

em { font-weight: bold; }

Via CSS kan er bijvoorbeeld gekozen zijn om alle stukjes tekst die ingesloten zijn door het element em vet te laten tonen. em wordt gezien als de beste vervanging voor het element i. Dus als je i gebruikt hebt, kun je die beter vervangen door em.

strong

De strong staat eigenlijk voor strong emphasis oftewel in het Nederlands sterke nadruk. Dit betekent dus dat de tekst die wordt omringd door het element strong dat die nog meer in het oog moeten springen dan de tekst met het element em.

HTML-code: Nadruk leggen op tekst via strong

<strong>Ik wil sterker nadruk leggen op deze tekst</strong>

Ik wil sterker nadruk leggen op deze tekst

Meestal wordt deze tekst dan vet gezet. Dit geldt niet altijd zoals bij het element em. Doordat de tekst vet wordt afgedrukt wordt het gezien als de beste vervanging voor het element b. Je kunt ook strong aanpassen dankzij CSS, zoals bijvoorbeeld de lettergrootte te veranderen.

HTML-code: strong aagepast via CSS

strong { font-size: 20px; }

italic(i), bold(b), underline(u)

De elementen i(italic), b(bold) en u(underline) staan respectivelijk voor cursief, vet en onderstreept. De elementen i en b zijn nog niet verouderd en zullen nog worden ondersteund door de verschillende webbrowsers. Er wordt echter sterk afgeraden om ze nog te gebruiken. Voor het element i wordt aangeraden om em te gebruiken en voor b wordt strong aangeraden.

Het element u is echter wel verouderd en mag dus niet echt meer gebruikt worden bij HTML pagina's. Het wordt wel nog ondersteund. Er wordt sowieso afgeraden om tekst te onderstrepen, dit is om te voorkomen dat gebruikers onderstreepte tekst zullen aanzien als links. Wil je toch tekst onderstrepen gebruik hiervoor dan liever CSS zoals in het volgende voorbeeld.

HTML-code: Tekst onderstrepen via CSS.

em { text-decoration: underline; }