HTMLboek

Teksten

Een website heeft toch eigenlijk altijd wel pagina's met tekst. In dit hoofdstuk gaan we in op hoe teksten worden opgenomen in HTML-documenten, waarbij je veel dingen zult herkennen van je tekstverwerker. In dit hoofdstuk komen alinea's, koppen, opsommingen aan bod en leer je en hoe je omgaat met vetgedrukte, schuingedrukte en onderstreepte tekst.

Alinea's

Voor alinea's bestaat het element <p> (voor Paragraph, wat het Engelse woord is voor alinea; niet te verwarren met een paragraaf, wat in het Engels weer een section is. Als je het netjes wil doen, moet je iedere alinea in zijn eigen <p>-element zetten, waarvoor een begin- en eindtag bestaat. Het voordeel daarvan is dat geen lege regels tussen iedere alinea hoeft te zetten, want dat doet de browser dan vanzelf tussen de verschillende <p>-elementen. Omdat het invoegen van een nieuwe regel in HTML niet hetzelfde is als simpelweg op de Enter-toets drukken, is gebruik van <p> zeker het overwegen waard. Maar hierover meer in de volgende paragraaf (nee, het is niet heel handig dat paragraaf en paragraph niet hetzelfde zijn...). In een voorbeeld ziet het gebruik van <p> er als volgt uit voor een willekeurige tekst met drie alinea's:

Nieuwe regel

Als je in je tekstverwerker op Enter drukt, ga je op de volgende regel verder met typen. Wanneer je dat tijdens het schrijven van je HTML-document doet, gaat de cursor ook naar de volgende regel, maar dan wel in de broncode van je webpagina! Wanneer je het resultaat vervolgens in je browser bekijkt, zie je die nieuwe regel nergens meer terug. Kijk maar eens naar het volgende voorbeeld:

In de browserweergave staan de vijf woorden allemaal achter elkaar. Maar hoe krijg je ze dan onder elkaar? Ieder woord in z'n eigen <p> zou kunnen, maar dan krijg je een verticale witruimte tussen ieder woord. Nee, om in een tekst op de volgende regel verder te gaan, gebruik je het element <br> (Break). Dit element kent geen eindtag en geen attributen. Dus om de vijf woorden ieder op een eigen regel te krijgen, gebruik je <br> als volgt:

En als je het compact wilt houden, mag je het in de HTML zelf op één regel zetten! Het volgende voorbeeld levert exact hetzelfde resultaat wanneer weergegeve in de browser:

Koppen

Als je langere teksten hebt, wil je waarschijnlijk met tussenkopjes werken. Hiervoor zijn de elementen <h1> t/m <h6> beschikbaar (de h is afgeleid van het Engelse woord Heading). De zes elementen hebben ieder een eindtag en zijn te vergelijken met Kop 1 t/m Kop 6 die je kent uit je tekstverwerker. <h1> is bedoeld voor de grootste kop en moet eigenlijk maar één keer per pagina voorkomen en dient daarmee als een titelkop. De overige niveau's <h2>, <h3>, <h4>, <h5> en <h6> mogen elk vaker op een pagina voorkomen. Iedere kop wordt automatisch door de browser opgemaakt:

In praktisch gebruik volgt na iedere kop altijd één of meerdere alinea's:

(Als je een kop te groot vindt, los dit dan niet op door een kop van een lager niveau te gebruiken, maar pas de stijling van de kop aan via CSS. Hierover meer wanneer we in gaan op CSS.)

Vetgedrukte tekst

HTML kent twee verschillende elementen die er voor zorgen dat een tekst vetgedrukt weergegeven wordt. Welke je gebruik, is afhankelijk van de reden waarom je de tekst vetgedrukt wilt weergeven. In de meeste gevallen kom je uit op <strong>, dat staat voor Strong Importance. Het element kent een eindtag en wordt gebruikt om tekstgedeeltes te markeren die belangrijk zijn, zoals bijvoorbeeld waarschuwingen. Wil je echter een woord of tekstgedeelte laten opvallen, zonder dat deze tekst belangrijker is dan de tekst er rond om heen, dan gebruik je hiervoor het element <b>. Ook dit element heeft een eindtag en staat voor Bring Attention To.

Schuingedrukte tekst

En jawel, er zijn ook weer twee elementen die resulteren in schuingedrukte tekst. Ook hier is het gebruik weer afhankelijk van waarom je iets schuingedrukt wil hebben. Als je nadruk (Emphasis) op een woord of tekstgedeelte wilt leggen, gebruik je hiervoor het element <em>. Wanneer het echter gaat om een technische term of woord in een vreemde taal, gebruik je het element <i>.

Onderstreepte tekst

Eigenlijk moet je geen onderstreepte tekst willen gebruiken op een website. Hyperlinks (waarover meer in het volgende hoofdstuk) zijn namelijk standaard onderstreept en daar is zo'n beetje de hele wereld inmiddels aan gewend. Als je dan andere teksten (die geen hyperlinks zijn) ook gaat onderstrepen, dan denkt iedereen dat het iets is om op te klikken. Maar dat werkt dan vervolgens niet. Mocht je in een tekst ergens nadruk op willen leggen, gebruik dan liever de verschillende mogelijkheden voor vetgedrukte of schuingedrukte tekst.

Afijn, dat gezegd hebbende is er wel een element dat er voor zorgt dat tekst onderstreept wordt weergegeven. Dit is het element <u>, wat in HTML 5 staat voor Unarticulated Annotation. Dit vertaalt zich als "onuitgesproken aantekening",Wat dat dan ook moge betekenen. Het element is bedoeld om bijvoorbeeld spelfouten aan te geven. In de simpelste vorm wordt dit door de browser weergegeven als ondersteepte tekst, maar het element is bedoeld om met CSS opgemaakt te worden om in geval van een spelfout de streep te vervangen door een rood kringeltje wat je kent uit je tekstverwerker.

Opsommingen

Net als in je tekstverwerker kun je in HTML ook een lijst met opsommingstekens of een genummerde lijst maken. Voor een lijst met opsommingstekens bestaat het element <ul> (Unordered List) en voor een genummerde lijst hebben we het element <ol> (Ordered List). Binnen deze elementen wordt vervolgens het element <li> (List Item) gebruikt voor ieder afzonderlijk onderdeel in de lijst. Een lijst met opsommingstekens ziet er dan als volgt uit:

En een genummerde lijst zoals in onderstaand voorbeeld. Let op het subtiele verschil, alleen <ul> is vervangen door <ol>. Zo kun je als je je vergist hebt heel snel een genummerde lijst in een lijst met opsommingstekens wijzigen.

Een <ol> of <ul> wordt nooit opgenomen in een alinea <p>, maar komt er als ware in de plaats van.

Opsommingen met meerdere niveau's

En net als in je tekstverwerker kun je lijsten met hierin meerdere niveau's maken. Dit doe je door een nieuwe lijst (<ol> of <ul>) toe te voegen aan een <li> van een bestaande lijst. Je kunt nummers en opsommingstekens zo je wil door elkaar gebruiken:

Samengevat

• Alinea's worden opgenomen in het element <p>. Een nieuwe alinea in een nieuw element <p> begint automatisch op een nieuwe regel.
• Een nieuwe regel binnen een alinea maak je met <br>. Dit element heeft geen eindtag.
• Koppen zijn er in zes niveau's: <h1>, <h2>, <h3>, <h4>, <h5> en <h6>.
• Vetgedrukte tekst maak je met <strong> (voor belangrijke tekst) of <b> (voor tekst die je wil laten opvallen).
• Schuingedrukte tekst maak je met <em> (om de nadruk op een stuk tekst te leggen) of <i> (voor een technische of buitenlandse term).
• Onderstreepte tekst wordt vermeden om verwarring met hyperlinks te voorkomen, maar als het echt moet met <u>.
• Een ongenummerde opsomming met <ul> of een genummerde opsomming met <ol>, met daarbinnen <li> voor ieder onderdeel in de lijst.

« De opbouw van een HTML-document | Inhoudsopgave | Hyperlinks »

• Inhoudsopgave
• Inleiding
• Voorbereiding
• De structuur van HTML
• De opbouw van een HTML-document
• Teksten
• Hyperlinks
• Afbeeldingen
• Tabellen
• Toekomstige hoofdstukken

Blij met HTMLboek?
Overweeg een donatie!
»Klik hier voor info«

Blij met HTMLboek?
Overweeg een donatie!
»Klik hier voor info«