Site Map Opdrachten Theorie Modulen Trajecten

HTML: 05- Webpagina Inhoud- Tekst


Headings

Bij het schrijven van een artikel ga je deze onderverdelen om het beter leesbaar te maken. Zo kan je het onderverdelen in bijvoorbeeld een hoofdstuk, paragraaf, alinea en sectie. Voor een webpagina is zo’n onderverdeling ook mogelijk en dit wordt bereikt door het gebruik van headings (kopjes). Headings worden toegevoegd via de tags h1, h2, h3, h4, h5 en h6.

De belangrijkste heading is h1 en gebruik je voor de onderverdeling van bijvoorbeeld meerdere artikelen op dezelfde pagina. De minst belangrijke is h6, die wordt gebruikt als laatste onderverdeling. Zou je de h3 tag gebruiken in een boek, dan ziet het er als volgt uit: 1.2.3 Paragraaf 1.2.
De "h2 tag" zou je kunnen gebruiken voor het verwerken van de hoofdstukken. Met de "h3 tag" de paragrafen, enz. Bij het gebruiken van headings is het belangrijk dat je blijft letten op de juiste volgorde. We maken een onderverdeling zoals het in een boek zou staan en hoe deze vertaald wordt naar een webpagina.
 
headings op een webpagina headings in HTML code
Figuur 1: headings op een webpagina Figuur 2: headings in HTML code

Bij het onderverdelen komen headings met hogere nummers altijd na headings met lagere nummers. Na het gebruik van de "h3 tag" komt minimaal de "h4 tag", tenzij je weer opnieuw een nieuwe "h3 tag" toevoegt of een "h2 tag" gebruikt indien er geen verdere splitsing nodig is.
Headings worden dus gebruikt om de structuur in een webpagina aan te geven. Bij het tonen van een webpagina is dit handig, maar zoekmachines maken ook gebruik van de headings. Headings worden door zoekmachines gebruikt om de inhoud van je pagina te indexeren/categoriseren, zoals bij een inhoudsopgave.
Houdt er rekening mee dat headings niet zijn bedoeld om tekst alleen dik te maken. Hiervoor zijn andere tags beschikbaar.

Terug naar boven

Beginnen op een nieuwe regel

Bij het schrijven van grote stukken tekst is het regelmatig van belang dat je op een nieuwe regel begint, om bijvoorbeeld aan te geven dat een nieuw alinea of paragraaf begint. Dit kan bereikt worden met de tags br (break rule) en p (paragraph). Met de "br tag" wordt tekst op een nieuwe regel geplaatst en begint deze tekst aan het begin van de regel. De "br tag" kan ook een andere tag op een nieuwe regel worden geplaatst. Houdt er rekening mee dat het een lege tag is.
Met de "p tag" wordt een paragraaf gemaakt. Hierbij wordt tekst en worden tags op een nieuwe regel geplaatst met boven de begintag en onder de eindtag witte ruimte. Deze tag vult een hele regel in de breedte, ook al wordt het niet helemaal gevuld. Het plaatsen van tekst of andere informatie naast een paragraaf is dus niet mogelijk.

Terug naar boven

Tekstopmaak

tekstopmaak
Figuur 3: teksten op een webpagina
tekstopmaak
Figuur 4: teksten in HTML code

Bij het schrijven van een stukje is het soms belangrijk om bepaalde (groepen) woorden te benadrukken of op te laten vallen. Een manier om dat te doen is de tekst dikgedrukt, schuingedrukt, onderstreept of doorgestreept weer te geven.
De tags om tekst dikgedrukt weer te geven zijn strong en b (bold), waarbij strong de tekst een stukje belangrijker maakt. Om tekst schuingedrukt te tonen gebruik je de tags i (italic) of em (emphasize), waarbij em de tekst een stukje belangrijker maakt. Wil je tekst onderstrepen dan gebruik je de tags u (underscore) of ins (inserted). Ondanks dat beide tags visueel hetzelfde effect hebben, is de insteek heel anders. De "u tag" wordt puur alleen gebruikt om tekst te onderstrepen. De "ins tag" is bedoeld om aan te geven dat een stuk later is toegevoegd. De tag die wordt gebruikt om tekst door te strepen is del (deleted). Deze tag geeft aan dat de tekst uit de webpagina is verwijderd.
NB: wanneer je tekst schrijft met pen en papier, kan je bepaalde stukken eruit laten springen door deze te onderstrepen. Wil je hetzelfde effect bereiken op een webpagina dan is tekst onderstrepen niet de slimste manier. Een onderstreept stuk tekst komt dan over als een hyperlink.

Terug naar boven

Quotes

quotes
Figuur 5: quotes op een webpagina
quotes
Figuur 6: quotes in HTML code

Op een webpagina zijn er 2 manieren om quotes te gebruiken. Voor een korte quote, van ongeveer een regel, gebruik je de "q (quote) tag". Bij grotere quotes gebruik je de "blockquote tag". De twee quotes hebben duidelijk een ander opmaak waarmee rekening gehouden moet worden. Met de "q tag" wordt om de tekst dubbele quotes geplaatst. Gebruik je de "blockquote tag" dan wordt de tekst omringd door witte ruimte en wordt de tekst gecentreerd.

Terug naar boven



Ga verder naar HTML: 06- Webpagina Inhoud- Overzichten
Over Visual Code

Visual Code is een methode, opgezet voor iedereen die een website wil leren maken. Er zijn verschillende soorten websites. Deze soorten websites zijn opgedeeld in trajecten. Deze trajecten zijn opgedeeld in modulen. Zo begin je met het opzetten van een statische website om deze steeds verder uit te breiden.
Contact

Twitter | Vimeo