HTML cursus

Les 1: Tekstopmaak

In de inleiding heb je de betekenis van enkele basisbegrippen geleerd en je hebt de titel en achtergrond leren wijzigen. In deze les zal je leren hoe je tekst invoegt en opmaakt.

We gaan eerst eens een stukje tekst invoegen, dit gebeurt tussen de <body> en de </body> tag:

<html>
<head>
<title>Tekst invoegen</title>
</head>
<body>
Hier komt de tekst die je wilt weergeven op de webpagina.
</body>
</html>
Bekijk het resultaat van bovenstaande code. Resultaat

Je weet nu hoe je tekst invoegt, de rest van dit lesje zal je leren hoe je tekst opmaakt.

Headings

Er bestaan 6 verschillende headings of headlines in HTML. Hiervoor worden de tags h1 tot en met h6 gebruikt.

<h1>Dit is de grootste heading.</h1>
<h2>Dit is de tweede grootste headline.</h2>
<h3>Dit is de derde heading.</h3>
<h4>Dit is de vierde headline.</h4>
<h5>Dit is de tweede kleinste heading.</h5>
<h6>Dit is de kleinste headline.</h6>
Bekijk het resultaat van bovenstaande code. Resultaat

Paragrafen

Een paragraaf beginnen we met de <p> tag. Om aan te duiden wanneer een paragraaf stopt, gebruiken we zijn eindtag, namelijk </p>. Er is slechts één attribuut voor deze tag, namelijk het align attribuut waarvoor er 4 mogelijke waardes zijn.

  • left
    <p align="left">Deze paragraaf is langs links uitgelijnd.</p>
    Bekijk het resultaat van bovenstaande code. Resultaat
    Opmerking

    Als je wilt dat de tekst in de paragraaf langs links is uitgelijnd, dan kan je eigenlijk beter het align attribuut weglaten aangezien left de standaardwaarde voor dit attribuut is.

  • center
    <p align="center">Deze paragraaf is gecentreerd.</p>
    Bekijk het resultaat van bovenstaande code. Resultaat
  • right
    <p align="right">Deze paragraaf is langs rechts uitgelijnd.</p>
    Bekijk het resultaat van bovenstaande code. Resultaat
  • justify

    Deze waarde zorgt er voor dat de tekst in de alinea zowel langs links als langs rechts wordt uitgelijnd. Kijk maar eens naar het verschil tussen de eerste paragraaf — waarbij het align attribuut niet is op toegepast, en de tweede paragraaf — waarbij de waarde voor het align attribuut justify is.

    1. Een tiental jaren geleden, toen internet nog sterk aan het groeien was (nu nog steeds trouwens), begon de grote browseroorlog. Veel mensen gebruikte op dat moment Netscape Navigator (kostte toen nog geld). Microsoft was bang dat ze hun plaats op de markt zouden verliezen en besloot Internet Explorer gratis weg te geven, het werd namelijk meegeleverd met het besturingssysteem Windows. Kort daarna werd Netscape ook gratis. Ze bestreden elkaar door het steeds sneller opvolgen van nieuwe elementen als geluid, film, animatie, e.d. in hun browsers. De meeste mensen bleven Netscape trouw, dit duurde echter niet lang; Netscape werd overgenomen door America OnLine (AOL) en na een tijdje ging de strijd gelijk op tussen Netscape en Internet Explorer. Maar toen ging het mis bij Netscape, er werden nauwelijks nieuwe versies uitgebracht. Terwijl Internet Explorer volop bezig was met nieuwere versies te ontwikkelen. Zo komt het dus dat bijna 80% van de mensen Internet Explorer gebruikt.

    2. Een tiental jaren geleden, toen internet nog sterk aan het groeien was (nu nog steeds trouwens), begon de grote browseroorlog. Veel mensen gebruikte op dat moment Netscape Navigator (kostte toen nog geld). Microsoft was bang dat ze hun plaats op de markt zouden verliezen en besloot Internet Explorer gratis weg te geven, het werd namelijk meegeleverd met het besturingssysteem Windows. Kort daarna werd Netscape ook gratis. Ze bestreden elkaar door het steeds sneller opvolgen van nieuwe elementen als geluid, film, animatie, e.d. in hun browsers. De meeste mensen bleven Netscape trouw, dit duurde echter niet lang; Netscape werd overgenomen door America OnLine (AOL) en na een tijdje ging de strijd gelijk op tussen Netscape en Internet Explorer. Maar toen ging het mis bij Netscape, er werden nauwelijks nieuwe versies uitgebracht. Terwijl Internet Explorer volop bezig was met nieuwere versies te ontwikkelen. Zo komt het dus dat bijna 80% van de mensen Internet Explorer gebruikt.

    Zoals je ziet, is de tekst in de tweede paragraaf zowel links als rechts netjes uitgelijnd.

    <p align="justify">Een tiental jaren geleden (...) Internet Explorer gebruikt.</p>

Opmaak elementen

  • Bold
    <b>Deze tekst is in het vet.</b>
    Deze tekst is in het vet.
  • Underlined
    <u>Deze tekst is onderlijnd.</u>
    Deze tekst is onderlijnd.
  • Italic
    <i>Deze tekst is cursief.</i>
    Deze tekst is cursief.
    of
    <em>Deze tekst is cursief.</em>
    Deze tekst is cursief.
    Deze twee mogelijkheden hebben steeds hetzelfde effect.
  • Big
    <big>Deze tekst is in het groot.</big>
    Deze tekst is in het groot.
  • Small
    <small>Deze tekst is in het klein.</small>
    Deze tekst is in het klein.
  • Strong
    <strong>Deze tekst is benadrukt.</strong>
    Deze tekst is benadrukt.
  • Strike
    <strike>Deze tekst is doorstreept.</strike>
    Deze tekst is doorstreept.
  • Superscript
    3<sup>2</sup> = 9
    32 = 9
  • Subscript
    H<sub>2</sub>O
    H2O
  • Niet-proportionele tekst

    Als je een code wilt weergeven op je website, is het handig dat elk karakter evenveel ruimte inneemt. Dit noemt men dan niet-proportionele tekst. Hiervoor beschikt HTML over 4 verschillende tags.

    • Typewriter text
      <tt>Deze karakters zijn niet-proportioneel.</tt>
      Deze karakters zijn niet-proportioneel.
    • Code
      <code>Deze karakters zijn niet-proportioneel.</code>
      Deze karakters zijn niet-proportioneel.
    • Keyboard
      <kbd>Deze karakters zijn niet-proportioneel.</kbd>
      Deze karakters zijn niet-proportioneel.
    • Sample
      <samp>Deze karakters zijn niet-proportioneel.</samp>
      Deze karakters zijn niet-proportioneel.

    Zoals je ziet, hebben bovenstaande tags exact hetzelfde resultaat. Namelijk dat de tekens door een typemachine geproduceerd lijken te zijn. Een voorbeeld van dergelijk monospace lettertype is Courier.

De font tag

De font tag wordt gebruikt om de kleur, het lettertype en de lettergrootte van tekst te veranderen. Hieronder wordt het gebruik van deze attributen achtereenvolgens besproken.

  • color

    Met dit attribuut kan je de kleur van een welbepaald stukje tekst aanpassen. Als waarde kan je een rgb-waarde gebruiken, maar je kan ook gewoon de Engelse naam van de kleur gebruiken (zoals gezien in de inleiding bij het bgcolor attribuut van de body tag).

    <font color="#1122aa">Deze zin heeft <font color="cyan">verschillende</font> kleuren.</font>
    Deze zin heeft verschillende kleuren.
  • face

    Hiermee wijzig je het lettertype van een stukje tekst. Aangeraden is om geen al te speciale lettertypes te gebruiken, aangezien je graag wilt dat je website er in elke webbrowser hetzelfde uitziet en niet elke webbrowser zulke lettertypes ondersteunt. Gebruik dus enkel zogenaamde veilige web fonts.

    <font face="trebuchet ms">Dit lettertype is Trebuchet MS.</font>
    Dit lettertype is Trebuchet MS.
  • size

    Hiermee verander je de lettergrootte van een stukje tekst. Geldige waarden zijn alle gehele getallen tussen 1 en 7, met 1 de kleinste en 7 de grootste waarde.

    <font size="5">Deze tekst heeft een grote lettergrootte.</font>
    Deze tekst heeft een grote lettergrootte.

Uiteraard kunnen deze attributen zoals altijd gecombineerd worden.

Preformatted text

Hetgeen dat tussen de <pre> en </pre> tag staat in de broncode van de webpagina, wordt door de webbrowser juist hetzelfde weergeven, dus ook met spaties, tabs en nieuwe regels (normaal — zonder de pre tag — is de webbrowser ongevoelig voor meer dan 1 spatie, meerdere spaties worden immers geïnterpreteerd als één enkele spatie). Een toepassing van deze tag is bijvoorbeeld het gemakkelijk creëren van tabelletjes, zoals in onderstaand voorbeeld is geïllustreerd.

<pre>
1	2	3
4	5	6
7	8	9
</pre>
1	2	3
4	5	6
7	8	9

Centreren

<center>Deze tekst is gecentreerd.</center>
Deze tekst is gecentreerd.

Nieuwe regel

De <br> tag zorgt voor een nieuwe regel. Hieronder volgt een voorbeeld:

Hier komt de eerste zin.<br>Hier komt de tweede.<br><br>Hier de derde.
Hier komt de eerste zin.
Hier komt de tweede.

Hier de derde.
Opmerking

Deze tag heeft geen eindtag.

Horizontale lijn

Met de <hr> tag kan je een horizontale lijn invoegen.

<hr>

Deze tag heeft ook enkele attributen waarmee je de horizontale lijn kan aanpassen:

  • width

    Met dit attribuut kan je de breedte van de lijn aanpassen.

    • Relatieve methode
      <hr width="60%">

      Bovenstaande code zal een lijn weergeven die een breedte heeft van 60 procent van de beschikbare breedte op de pagina.

    • Absolute methode

      Het is echter ook mogelijk om de breedte van een lijn uit te drukken in pixels:

      <hr width="100">

      Bovenstaande code weergeeft een lijn die 100 pixels breed is.

  • align

    Ondertussen zal je misschien al gemerkt hebben dat vorige lijnen telkens gecentreerd waren. Dit komt omdat de waarde center de verzuimwaarde is voor het align attribuut van de hr tag. De andere waarden zijn left en right.

    <hr width="50" align="right">
  • size

    Hiermee pas je de dikte van de lijn aan.

    <hr size="15">

    Bovenstaande code weergeeft een lijn die 15 pixels dik is.

  • color

    Met dit attribuut kan je de kleur van de lijn wijzigen.

    <hr color="#bb0000">
  • noshade

    Hiermee kan je de schaduw van de lijn laten verdwijnen.

    <hr noshade>
    Opmerking

    Dit attribuut verwacht geen waarde aangezien er maar één mogelijkheid is.

Hieronder volgt een algemeen voorbeeldje die alle attributen van de hr tag bevat.

<hr width="40%" align="left" size="5" color="blue" noshade>
Opmerking

Uiteraard vinden we bij de hr tag geen eindtag terug.

Als je later je webdesign kennis zal uitbreiden, zal je zien dat de font tag en de manier die hier besproken werd om tekst te centreren, sterk worden afgeraden. Simpelweg omdat hier betere (meer gestructureerde en bijgevolg overzichtelijkere) manieren voor bestaan. Dit zal wel duidelijk worden wanneer je je hebt verdiept in de CSS cursus, maar het is aan te raden eerst HTML volledig te beheersen vooraleer je dat doet.

Tot zover de eerste les. Het was een lange les, maar als je deze onder de knie hebt, dan heb je zeker en vast veel bijgeleerd.