2. Tekst

2.1 Hiërarchie

2.2 Titels

2.3 Tekststructuren

2.4 Oefening

2.5 Quiz

Tekst in een HTML-document kan op verschillende manieren gestructureerd worden. De meest algemene vorm is het indelen van tekst in paragrafen. Hiervoor kan gebruik gemaakt worden van het P element. Daarnaast zijn er elementen, welke gebruikt kunnen worden, als een specifieke betekenis van een blok tekst benadrukt moet worden zoals vet, cursief, inspringen, ... Denk aan de hiërarchie in een krantenartikel. Het artikel volgt ook vaste elementen: titel, inleiding, basistekst opgedeeld in alinea's.

Tekststructuren:

HTML elementen worden gebruikt om een webpagina te structuren zoals titels, tussentitels en paragrafen.
De elementen roepen extra informatie op om citaten, defenitie's, quotes, ... weer te geven..

Aan het begin van een document, of bijvoorbeeld tussen de verschillende paragrafen, kunnen koppen geplaatst worden met het H1 element. Dit element is beschikbaar in zes verschillende groottes (H1 t.e.m. H6).

Maak onderstaande oefening na, we geven titels mee van groot naar klein. Sla de oefening op als 'oef02Hoofdingen.html'.

<body>
<h1> Dit is de grootste hoofding </h1>
<h2> Deze hoofding is 1 niveau kleiner </h2>
<h3> Deze hoofding is 2 niveau's kleiner </h3>
<h4> Deze hoofding is 3 niveau's kleiner </h4>
<h5> Deze hoofding is 4 niveau's kleiner </h5>
<h6> Deze hoofding is 5 niveau's kleiner </h6>
</body>

Overzicht in lettergroottes:

H1 = 24 pixels;
H2 = 22 pixels;
H3 = 18 pixels;
H4 = 16 pixels;
H5 = 12 pixels;
H6 = 10 pixels;

De teksten worden ingedeeld in alinea's, hiervoor gebruiken we de paragraaf en De teksten worden ingedeeld in alinea's, hiervoor gebruiken we de paragraaf en  tags. Er wordt telkens een witregel boven en onder het alinea element vrijgehouden.

<p> Dit is alinea 1 </p>
<p> Dit is alinea 2 </p>

Overzicht tekststructuur elementen:

  of   Vetgedrukte tekst
  of Schuingedrukte tekst = tekst met nadruk
  Onderstreept
  Subschrift
  Superschrift
<hr /> Horizontale lijn
  Enkele zinsafbreking = harde enter
<s> </s> of <del> </del> Doorgehaald of verwijderde tekst, doorgestreept.
<ins> Ingevoegde tekst
  Gemarkeerde tekst
<code> </code> Computer code tekst
<blockquote> </blockquote> Gedeelte waarin een andere bron wordt geciteerd
<q> </q> Korte quote '.....'
<abbr> Samenvoegen van een woord
<cite> Citaat, verwijzing van een boek, film,... weergave is schuingedrukte
<address> Adres gegevens, weergave is ook schuingedrukte.

Hierboven staan de meest gebruikte tags, de volledige lijst vind je terug op http://www.w3schools.com/tags en http://www.html-site.nl/downloads/html5.pdf.

Kies een eigen recept uit die je gaat maken en leg aan de hand van opsommingen uit wat je nodig hebt. Maak ook een stappenplan van hoe je het moet maken. Later gaan we dit verder stijlen.


<h1> Titel recept </h1>
<p> Aantal personen, tijd 30 min., niveau eenvoudig of moeilijk </p>

<h2> Ingrediënten </h2>
<p> Hier komen de benodigdheden te staan </p>

<h2> Bereidingswijze </h2>
<p>Hier komt het stappenplan staan </p>

Sla de oefening op als 'index.html'. Tip: Speciale karakters worden raar weergegeven en moeten worden vervangen door een ascii-code. Je vind een overzicht terug onder http://www.ascii.cl/htmlcodes.htm. Voorbeeld: ë - html nummer of HTML naam of decimaal (Alt-toets)235