Tekst | HTML cursus

Youtube: HTML tekst

https://www.youtube.com/watch?v=UNjx5tPHaPc

Blocklevel elementen

Tekst structureren

Vermijd naakte tekst zonder betekenis in de <body>:

...
<body>
  Hallo!
</body>
</html>

Beter:

...
<body>
  <p>Hallo!</p>
</body>
</html>

Titels

Wat is een titel?

Een titel beschrijft altijd een sectie van de inhoud. Als er geen inhoud bij hoort, is het geen titel. Niet alles wat groot en/of vet is, is dus een titel!
Zijn geen titels: slagzinnen, quotes, onderschriften...

Titels in HTML

Gebruik <h1> t.e.m. <h6> voor de hiërarchie van titels en ondertitles van een pagina (h1 = belangrijkste titel, h6 = minst belangrijke titel):

<h1>Titel niveau 1 (paginatitel)</h1> 
...
<h2>Titel niveau 2 (subtitels)</h2> 
...
<h3>Titel niveau 3 (sub-subtitels)</h3> 
...
<h4>Titel niveau 4 (...)</h4> 
...
<h5>Titel niveau 5 (...)</h5> 
...
<h6>Titel niveau 6 (...)</h6>
...

Correct gebruik van titels en de juiste nummering zijn o.a. belangrijk voor zoekmachines om je pagina te classificeren.

Nummering van titels

Het kiezen van de juiste titelnummer is niet altijd zo eenvoudig. Op deze screenshot ontbreekt b.v. de paginatitel, en is er dus geen <h1>. Ook over de keuze van <h4> voor de footertitels valt te discussiëren — als houvast, hanteren we in dit vak volgende regels:

hoe belangrijker de titel, hoe lager het nummer
in de main:
- titel pagina, indien aanwezig: <h1> (er kan er dus maximaal één per pagina zijn!)
- hoofdblokken van de pagina: <h2>
- verdere onderverdelingen <h3>, <h4> enz...
in de footer, sidebars enz...
- gebruik <h4>, <h5>, <h6>

Paragrafen

Gebruik <p> voor een blok doorlopende tekst:

...
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.
</p>
<p>
  Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
  cupidatat non proident, sunt in culpa qui officia deserunt mollit
</p>
...

Blockquote

Gebruik <blockquote> om een citaat aan te duiden:

...
<blockquote>
   <p>
      O tempora, o mores!
      Senatus haec intellegit. consul videt; hic tamen vivit.
   </p>
   <p>
      Vivit? immo vero etiam in senatum venit, fit publici consilii
      particeps, notat et designat oculis ad caedem unum quemque
      nostrum.
   </p>
</blockquote>
...

Typische voorbeelden zijn tweets, commentaren, pull quotes:

Gebruik <blockquote> niet louter om een tekst te doen inspringen, maar vanwege zijn betekenis.
Een tekst kan op het design inspringen, en toch geen blockquote zijn.

Address

Met <address> duid je de contact informatie op de pagina aan:

...
<address>
   John Doe<br>
   123 Main Street, NY<br> 
   <a href="mailto:johndoe@rock.com">johndoe@rock.com</a><br> 
   <a href="tel:+32489223344">0489 22 33 44</a>
</address>
...

De naam "address" is wat ongelukkig gekozen, want hoeft niet een fysiek adres te zijn; elke contact informatie volstaat:

...
<address>
  Hi! Ik ben John Doe. Je kan mailen naar 
  <a href="mailto:johndoe@rock.com">johndoe@rock.com</a>, 
  of bel me op <a href="tel:+32489223344">0489 22 33 44</a>
</address>
...

er kan maar één <address> per pagina zijn; als meerdere inhoudsblokken in aanmerking komen, kies je er één (b.v. die in de footer)

Ongenummerde lijsten

Gebruik <ul> (unordered list) voor gelijkaardige items zonder nummering :

<p>Niet vergeten kopen:</p>
<ul>
   <li>melk</li>
   <li>brood</li>
   <li>appels</li>
</ul>

Ook menu's worden gezien als ongenummerde lijsten (items = links):

Genummerde lijsten

Gebruik <ol> (ordered list) voor gelijkaardige items met nummering:

...
<p>Wie is de slimste van de familie?</p>
<ol>
   <li>homer</li>
   <li>bart</li>
   <li>lisa</li>
   <li>maggie</li>
</ol>
...

Definitielijsten

Voor term-definitie paren:

...
<dl>
   <dt>CSS</dt>
   <dd>Een simpele taal voor layout, kleuren enz...</dd>
   <dt>XHTML</dt>
   <dd>Een oude herformulering van HTML in XML</dd>
   <dt>XML</dt>
   <dd>Een flexibele en zelf uitbreidbare eenvoudige markup taal</dd>
</dl>
...

Details

Met <details> kan je een detailsectie in- en uitklappen:

...
<details open>
   <p>
      Als je browser dit element ondersteunt, zou je de details moeten 
      kunnen in- en uitklappen. Zonder extra scripts!
   </p>
   <p>
      Hiermee kan je content initieel verbergen, b.v. bijkomende uitleg 
      die anders de lezer zou kunnen storen.
   </p>
</details>

Dialog

Met <dialog> kan je — met enige moeite — een dialoogvenster maken:

<dialog id="dialog1" open>
   <h1>Hallo Wereld!</h1>
   <p>Lorem ipsum dolor sit amet. Earum, inventore!</p>
   <button id="exit">Sluiten</button>
</dialog>

Om het effectief te kunnen gebruiken, heb je wat CSS en Javascript nodig:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    dialog {
      width: 500px;
    }
    dialog h1 {
      font-size: 1.17em;
    }

    dialog button {
      background-color: #c0392b;
      border-width: 0;
      color: #fff;
      cursor: pointer;
	  padding: 10px 20px;
    }
  </style>
</head>

<body>
  <dialog id="dialog1">
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</p>
    <button type="button" id="exit">Exit</button>
  </dialog>
  <h2>Dialog demo</h2>
  <a href="#" id="lnk_open">open dialog</a>
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion 
    daikon amaranth tatsoi tomatillo melon azuki bean garlic.
  </p>
  <p>
    Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette 
    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. 
    Dandelion cucumber earthnut pea peanut soko zucchini.
  </p>
  <p>
    Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce 
    kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter 
    purslane kale. Celery potato scallion desert raisin horseradish spinach carrot 
    soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean 
    swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout 
    coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot 
    watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed pepper.
  </p>
  <script>
    const lnk1 = document.querySelector('#lnk_open');
    const dialog1 = document.querySelector('#dialog1');
    const btn1 = document.querySelector('#exit');
    lnk1.addEventListener('click', () => { dialog1.show(); });
    exit.addEventListener('click', () => { dialog1.close(); });
  </script>
</body>

</html>

Inline elementen

Line breaks

Gebruik <br> om een regel vroegtijdig af te breken:

...
<p>
   hij kuste haar lippen<br>weinig op zijn gemak<br>
   zij kneep haar benen tesaam<br>zodat zijn brilletje brak<br>
</p>
...

Gebruik <br> nooit om paragrafen of witregels te maken:

...
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
eiusmod tempor incididunt ut labore et dolore magna aliqua.
enim ad minim veniam, quis nostrud exercitation ullamco.
<br><br>
Duis aute irure dolor in reprehenderit in voluptate velit
cillum dolore eu fugiat nulla pariatur. Excepteur sint
...

Strong en em

Vergelijk strong met een luidere stem (belangrijke term), en emphasize met een tragere uitspraak (nieuwe term):

...
<p>
  Het Congolese woord <em>Ilunga</em> betekent dat iemand
  een <strong>eerste</strong> incident kan vergeven,
  een <strong>tweede</strong> accepteren, maar
  een <strong>derde</strong> niet kan tolereren
</p>
...

Gebruik <strong> of <em> niet als verkapte opmaak:

gebruik <strong> niet omdat iets er vet moet uitzien (dat doen we later met CSS)
gebruik <em> niet omdat iets er schuin moet uitzien (dat doen we later met CSS)
gebruik <strong> of <em> enkel voor één of hooguit een paar woorden in een zin, niet voor een hele regel

Dit is dus niet juist:

...
<p><strong>Lorem Ipsum</strong></p> <!-- fout! <strong> als opmaak gebruikt (moet h3 zijn) -->
<p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
   eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
   enim ad minim veniam, quis nostrud exercitation ullamco laboris
   nisi ut aliquip ex ea commodo consequat.
</p>
<p><em>published March 2001</em></p> <!-- fout! <em> als opmaak gebruikt -->
...

Subscript en superscript

Voorbeeld:

...
<p>
   H<sub>2</sub>SO<sub>4</sub> is de formule van zwavelzuur. 
   Een kernbom is gebaseerd op de formule E = m.c<sup>2</sup>
</p>
...

Mark

Markeer stukken tekst met <mark>, standaard in fluo geel:


Uitgegeven interesten vergissing nam der goa dal. Batoe telok kreeg in de. 
Daaronder hanteeren vereenigd voorkomen. Arabische aangelegd 
mei <mark>prachtige aankoopen</mark> aan. Schuld zwavel francs nu 
groeit kosten nu. Gebrachte er mengeling vervangen en arbeiders is. Bestuur 
<mark>grooter gemaakt planter</mark> de ik. Wiel wat zit veel met rang nam deel.

Small

De tag <small> wordt gebruikt voor juridische text, copyright info enz... (de "kleine lettertjes"), typisch onderaan de pagina:

...
<p>
   <small>copyright 1999-2050 door Rogier van der linde</small>
</p>
...

Gebruik <small> niet enkel om een tekst kleiner te maken! Dat doen we later met CSS.

<b> en <i>

De tags <b> en <i> betekenden vroeger 'bold' (vet) en 'italic' (schuin). Dit is opmaak, geen structuur, en doen we tegenwoordig met CSS. Deze tags zijn dus niet toegelaten in deze cursus.

Afkortingen

Gebruik <abbr> in combinatie met het title attribuut voor afkortingen:

...
<p>
   The <abbr title="North Atlantic Treaty Organization">NATO</abbr>
   and the <abbr title="European Union">EU</abbr> both
   have their headquarters in Brussels.
</p>
...

Computertermen

De tags <code>, <samp>, <kbd>, <var> en <pre> worden vooral bij programmeerblogs gebruikt:

...
<p>
   Een typisch voorbeeld van een methode met parameters en een returnwaarde is 
   <var>GrootsteGemeneDeler</var> met parameters <var>get1</var> 
   en <var>get2</var>:
</p>
<pre><code>
// methode voorbeeld
private int GrootsteGemeneDeler(int get1, int get2) { 
   int ggd = Math.Min(get1, get2);
   while (get1 % ggd != 0 || get2 % ggd != 0) {
      ggd−−;
   }
   return ggd;
}</code></pre>
<p>
   Als we ons programma uitvoeren (druk <kbd>F5</kbd>) met waarden 12 en 18, dan krijgen we: 
</p>
<p>
   <samp>de GGD is: 6</samp>
</p>
...

Voor deze cursus hebben deze elementen weinig belang.

Karakters

< > en &

Let op als je < en > in je tekst hebt staan:

...
<p>
  if p1<<p2 or p1>>p2 then...
</p>
...

Om verwarring met HTML code te vermijden, moet je ze coderen als < en >:

...
<p>
   if p1&lt;&lt;p2 or p1&gt;&gt;p2 then...
</p>
...

Om tenslotte verwarring met karaktercodes te vermijden, moet je & coderen als &:

...
<p>
   jack &amp; jones
</p>
...

UTF-8 karakters

Herinner je de <meta charset="utf-8"> declaratie in het HTML basisdocument (zie vorig hoofdstuk):

<head>
   ...
   <meta charset="utf-8">
   ...
</head>

concreet betekent dit dat je alle karakters kan gebruiken uit de UTF-8 karakterset
UTF-8 is ontworpen voor max. 2.164.864 karakters; vandaag bevat het zowat alle talen ter wereld + emoji's, symbolen en andere tekens

Deze karakters staan vaak niet rechtstreeks op je toetsenbord; hoe kan je ze dan gebruiken? Het eenvoudigste is je karakter zoeken via Google, bv. UTF bullet, en het kopiëren van één van de resultatenpagina's:

<h3>▣ hoofdstuk 1</h3>
<p>...</p>               
<h3>▣ hoofdstuk 2</h3>               
<p>...</p>

Karaktercodering

Als je de code kent, kan je UTF-8 karakters ook met de hand coderen:

<p>
  &rarr; koop de Samsung&reg; Galaxy vandaag &mdash; voor &euro;499!
</p>

voor de code lijsten je vindt genoeg referenties online, zoals RapidTables

Emoji's

Een speciale subset van UTF-8 zijn de emoji pictogrammen: druk op Windowstoets-puntkomma (PC) of Ctrl-Cmd-Space (Mac) om het emojivenster op te roepen, en off you go.

<p>
   Water gets warmer 🏊🏻‍♀️<br> 
   Drinks get colder 🍹❄<br> 
   Music gets louder 🔊🎶<br> 
   Nights get longer 🍻<br> 
   Life gets better 👍🏻<br>               
</p>

in theorie kan je zelfs emoji's gebruiken in links en URL's, zoals deze https://😻🍕.ws

Google icon

Een icon font is een speciaal lettertype met iconen in plaats van tekstkarakters. Er zijn er veel gratis te vinden: Google Icons, MFG Labs... Het gebruik is eenvoudig, bv. Google Icons:

kopieer het <link> element uit onderstaand voorbeeld in de <head> van jouw HTML pagina
zoek het gewenste icoon op https://fonts.google.com/icons
kopieer voor elk icoon de <span> code naar jouw HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basispagina</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">                 
</head>
<body>
  <ul>
    <li><span class="material-icons-outlined">face</span> Rogier van der Linde</li>
    <li><span class="material-icons-outlined">email</span> rogier.vanderlinde@odisee.be</li>
    <li><span class="material-icons-outlined">phone_in_talk</span> 0499/12.34.56</li>   
  </ul>
</body>
</html>

FontAwesome

Google Icons voorziet geen iconen voor Facebook, Instagram enz... (dat zijn tenslotte concurrenten). Alternatief kan je commerciële fontsets gebruiken als FontAwesome, waarvoor een gratis versie bestaat. Gebruik:

download de gratis webfont pack, en pak het uit in de root van je site
kopieer het <link> element uit onderstaand voorbeeld in de <head> van jouw HTML pagina
zoek het gewenste icoon op https://fontawesome.com/icons
kopieer voor elk icoon de <i> code naar jouw HTML, en verander <i> door <span>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Basispagina</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="common/fonts/fontawesome-free/css/all.css">                 
</head>
<body>
  <ul>
    <li><span class="fa-brands fa-youtube"></span></li>
    <li><span class="fa-brands fa-linkedin"></span></li>
    <li><span class="fa-brands fa-chrome"></span></li>
  </ul>
</body>
</html>

let op als je de iconen linkt, zie dit deel

02. HTML tekst