HTML

Tekst

Koppen

In een HTML-document wordt tekst verdeeld in koppen en alinea’s. In een kop staat de titel of de subtitel van een tekst. Een alinea bestaat uit een aantal regels tekst die bij elkaar horen.

Koppen kun je in je code markeren door het <h1>-element te gebruiken: <h1> en </h1>. De webbrowser zet de kop automatisch op zijn eigen regel.

Als je ook nog subkoppen wilt gebruiken in je tekst, dan kun je het <h2>-element gebruiken. Een subkop van een subkop kun je weer aangeven met <h3>. Dit gaat zo door tot en met het <h6>-element.

Om aan te geven welke zinnen tot een alinea behoren, zet je al die zinnen binnen het <p>-element. Alinea’s worden door de webbrowser automatisch gescheiden door een witregel. Het kenmerk van een stuk tekst tussen <p></p> is dat het een block-level element is. Deze geven automatisch witruimte.

Wil je tekst bijvoorbeeld cursief hebben dan gaat dat als volgt <i>Dit is cursief</i>. Dit is een voorbeeld van inline element. Deze geeft geen witruimte.

Witruimte

Inmiddels zul je wel gemerkt hebben dat HTML een wat aparte manier heeft om met witregels om te gaan. Je zou misschien verwachten dat als jij een witregel in je broncode hebt staan, je die ook in de webbrowser te zien krijgt. Dit is echter niet zo.

De webbrowser beschouwt alle harde returns als spaties. Bovendien maakt hij van alle spaties die direct achter elkaar staan één spatie.

Let erop dat je het <br>-element niet gebruikt om alinea scheidingen aan te geven. Dit kun je beter doen door elke alinea in het <p>-element te zetten.

Lijsten

Om teksten overzichtelijk te houden zijn, naast koppen en alinea’s, opsommingen vaak van groot belang.

Drie soorten opsommingen

HTML kent drie verschillende soorten opsommingen en spreekt daarbij van ‘lijsten’.

1. Ongeordende lijst

Een ongeordende lijst gebruik je voor opsommingen zonder specifieke volgorde. Zo’n opsomming zet je binnen het <ul>-element, waarbij elk onderdeel van de lijst wordt voorafgegaan door het <li>-element.

soorten apen:

<ul>

<li>bavianen</li>

<li>gorilla's</li>

</ul>

geeft:

Geordende lijst

Een geordende lijst gebruik je voor informatie waarbij de volgorde van belang is, zoals een instructie. Een dergelijke lijst zet je binnen het <ol>-element, waarbij ook in dit geval elk onderdeel van de lijst wordt voorafgegaan door het <li>-element.

Winnaars MTV-music awards:

<ol>

<li>Justin Bieber</li>

<li>Rihanna</li>

</ol>

geeft:
  1. Justin Bieber
  2. Rihanna

Definitielijst

Een definitielijst gebruik je als je van een aantal termen de definitie wilt geven. We zullen dat hier niet verder behandelen.

Speciale tekens

Er zijn tekens die je niet zonder meer in je HTML-code op kunt nemen omdat ze binnen HTML een bepaalde betekenis hebben. Zo kun je het kleiner-dan-teken (<) niet in je tekst gebruiken, omdat de webbrowser dan denkt dat je het begin van een tag aan wilt geven.

Ook zijn er tekens die niet op je toetsenbord zitten, maar die je soms wel in een tekst op wilt nemen, zoals het copyright-teken (©).

Toch kun je deze tekens op je webpagina gebruiken. Voor dit doel hebben alle speciale tekens een code gekregen. Als je deze code vooraf laat gaan door een ampersand (&) en afsluit met een puntkomma (;), dan laat de webbrowser het juiste teken zien.

In onderstaand voorbeeld staan de codes voor tekens die een probleem kunnen opleveren als je ze zomaar invoert.

Commentaar

Soms is het handig als je opmerkingen in je code kunt zetten die niet in de webbrowser verschijnen. Je kunt dan van ingewikkelde code vertellen wat die doet, of je kunt in de code aangeven wat er nog moet gebeuren. Zulke opmerkingen noemen we commentaar.

Tekst wordt door de browser beschouwd als commentaar zodra voor de tekst <!-- staat. Je sluit commentaar weer af met -->. Let erop dat je in je commentaar niet twee streepjes achter elkaar (--) gebruikt, want dan denkt de webbrowser dat je het commentaar wilt afsluiten.

<!-- deze tekst is volledig overbodig en wordt daarom door de browser niet weergegeven -->

 

Opdrachten:

1. Maak deze website na. De tekst staat hier.

2. Geef aan welke fouten er zitten in deze broncode. Herschrijf de broncode zodat hij wel in orde is. Sla het bestand op onder de naam zover.html.

3. Maak deze webpagina zo nauwkeurig mogelijk na. Sla het bestand op onder de naam elementair.html

4. Maak deze webpagina zo nauwkeurig mogelijk na. Sla het bestand op onder je naam5.html en stuur het op naar leerbeer@gmail.com met als onderwerp "html5"

de tekst staat hier

de achtergrond staat hier

de plaatjes en de hyperlinks kun je van de website halen

 

 

 

 

©jw webdesign