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.
Voorbeeld:
<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.
 |
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 |
