Opmaak


HTML Opmaak

Wanneer je webpagina's maakt, is het jouw taak om de bezoeker te helpen de belangrijkste zaken op de pagina snel te herkennen. Niets draagt hier meer toe bij dan de opmaak van een pagina. De opmaak van een pagina is de manier waarop die pagina ingedeeld is. HTML biedt een handvol tags die gebruikt kunnen worden om dat te doen.

VoorbeeldVoorbeeld:
<p>Voorbeeld: <b>Vette tekst</b></p>
<p>Voorbeeld: <em>Geeft nadruk aan (cursief)</em></p>  
<p>Voorbeeld: <strong>Geeft sterke nadruk aan (vet)</strong></p>  
<p>Voorbeeld: <i>Cursieve tekst</i></p>  
<p>Voorbeeld: <sup>Superscript</sup></p>  
<p>Voorbeeld: <sub>Subscript</sub></p>  
<p>Voorbeeld: <del>Doorgestreepte tekst</del></p>  
<p>Voorbeeld: <code>Computer tekst</code></p>

Een sterke nadruk leggen op een woord doe je met het element <strong>. Het stuk tekst dat tussen de <strong> en </strong> tag staat wordt meestal vet weergegeven maar heeft een andere betekenis dan <b>. Alle tekst tussen de <strong> en </strong> tag betekent: dit is belangrijk. De tekst tussen de <b> en </b> tag betekent: dat de tekst vet moet worden weergegeven in de browser.

Tip Voor de tags <i> en </i> geldt hetzelfde. Een nadruk leggen op een woord doe je met de tag <em>.
Het stuk tekst dat tussen de tag <em> en </em> staat wordt schuin weergegeven in de browser.


Tekstopmaak

Hieronder volgen een aantal voorbeelden van HTML tekstopmaak.

Vet: <b> - </b>
Deze tag zorgt ervoor dat de omsloten tekst vet wordt weergegeven.
Voorbeeld

Cursief: <i> - </i>
Deze tag zorgt ervoor dat de omsloten tekst cursief wordt weergegeven.
Voorbeeld

Onderstreept: <u> - </u>
Deze tag zorgt ervoor dat de omsloten tekst onderstreept wordt weergegeven.
Voorbeeld

Verouderd: <strike> - </strike>
Zet een lijn dwars door het midden van de tekst, een doorhaling. Vaak gebruikt om aan te tonen dat
de tekst verouderd is. Werkt ook door gebruik te maken van de tags <s> </s> en <del> </del>.
Voorbeeld

Vooraf opgemaakte tekst: <pre> - </pre>
Deze tag dwingt de browser de opmaak van de oorspronkelijke tekst precies weer te geven. Dit is
belangrijk voor de weergave van opgemaakte tabellen en bijvoorbeeld programmacode.
Voorbeeld

Computer tekst: <code> - </code>
Deze tag dient voor het benadrukken van programmacode of voorbeeldcode. Wordt weergegeven in
een lettertype met vaste breedte, en wordt vaak gebruikt om de broncode te tonen.
Voorbeeld

Typemachine tekst: <tt> - </tt>
De tekst lijkt te zijn getypt door een typemachine, in een lettertype met vaste breedte.
Voorbeeld

Blok tekst: <blockquote> - </blockquote>
Deze tag wordt gebruikt om citaten uit externe bronnen, publicaties of andere materialen aan te geven.
Het citaat wordt weergegeven met een extra brede marge aan de linkerkant van het blok citaat.
Voorbeeld

kleine tekst: <small> - </small>
Deze tag kun je gebruiken om de tekst iets kleiner dan de omringende tekst te maken. Zo wordt de tekst
een stap kleiner dan de basislettergrootte. Handig voor het weergeven van de 'kleine lettertjes'.
Voorbeeld

Grote tekst: <big> - </big>
Deze tag kun je gebruiken om de tekst iets groter dan de omringende tekst te maken.
Voorbeeld

Lettertype: <font> - </font>
Deze tag bepaalt het lettertype, de kleur en de grootte van omsloten tekst.
Voorbeeld

Gecentreerd: <center> - </center>
Deze tag centreert de tekst horizontaal in het browser.
Voorbeeld

Nadruk: <em> - </em>
Deze tag wordt gebruikt om tekst te benadrukken, die meestal cursief wordt weergegeven, maar kan
variƫren afhankelijk van je browser.
Voorbeeld

Sterke nadruk: <strong> - </strong>
Deze tag wordt gebruikt om tekst meer te benadrukken, die meestal in het vet wordt weergegeven,
maar kan variƫren afhankelijk van je browser.
Voorbeeld