TEKST

tussen []: optioneel, sterk aanbevolen voor wie wil verdergaan in web

gebruik pijltjestoetsen om te navigeren
dotted codepanels zijn editeerbaar

TEKST

Blocklevel elementen

Tekst structureren

  • Vermijd naakte tekst zonder betekenis in de <body>: 
    ...
<body>
  Hallo!
</body>
</html>
  • Beter: 
    ...
<body>
  <p>Hallo!</p>
</body>
</html>

Titels (1)

  • 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>
...
  • De titels zijn belangrijk voor zoekmachines om je pagina te classificeren.

Titels (2)

  • Een titel beschrijft altijd een deel 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 – nummering

  • 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:

  • (klik afbeelding voor vergroting)

    Vuistregels:

    • 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 (1)

  • 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>
...

Blockquote (2)

  • Typische voorbeelden zijn tweets, commentaren, pull quotes:

Cite

  • Gebruik <cite> voor de verwijzing naar een werk (boek, schilderij, publicatie, toneelstuk...): 
    ...
<blockquote>
 <p>
  The path of the righteous man is beset on all sides by the inequities 
  of the selfish and the tyranny of evil men. Blessed is he who in the 
  name of charity and good will shepherds the weak through the valley 
  of darkness, for he is truly his brother's keeper and the finder 
  of lost children. 
 </p>
 <p>
   from <cite>Ezekiel 25:17</cite>
 </p>
</blockquote>
...

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>
...
  • Het hoeft niet per se een echt 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>
...

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>
...
  • weinig gebruikt

[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>
    dialog demo (met css en javascript)
  • momenteel slechte ondersteuning door browsers

TEKST

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 het nooit om paragrafen 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 (1)

  • 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>
...

Strong en em (2)

  • 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 
    ...
<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>S0<sub>4</sub> is de formule van zwavelzuur. 
 Een kernbom is gebaseerd op de formule E = m.c<sup>2</sup>
</p>
...

Markeren

  • 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, b en i

  • De tag <small> wordt gebruikt voor juridische text, copyright info enz..., typisch onderaan de pagina: 
    ...
<p>
  <small>copyright 1999-2050 door Rogier van der linde</small>
</p>
...
  • gebruik <small> niet omdat een tekst klein is!
  • De tags <b> en <i> betekenden vroeger 'bold' (vet) en 'italic' (schuin). Dit is opmaak, geen structuur, en dus gebruiken we vandaag deze elementen niet meer.
  • <b> en <i> zijn 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>
  Als we regel 98 een <code>List</code> gebruiken, vullen en meegeven als argument voor <var>someList</var>
  in de methode <var>CalcAverage</var>
  <code><pre>
    // create an array with test results
    List<int> testList = new List<int>();

    // define method
    private int CalcAverage(List<int> someList) {
       // ... method logic here
    }
    ...
    </pre></code>
 en het programma opnieuw uitvoeren (druk <kbd>Ctrl-R</kbd>), 
 krijgen we volgend resultaat: 
</p>
<p>
   <samp>the list average is: ...</samp>
</p>
  • verder zijn ze weinig nuttig

TEKST

Karakters

&lt; &gt; en &amp;

  • 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 &lt; en &gt;: 
    ...
<p>
  if p1&lt;&lt;p2 or p1&gt;&gt;p2 then...
</p>
...
  • en om verwarring met karaktercodes te vermijden, moet je & coderen als &amp;: 
    ...
<p>
  jack &amp; jones
</p>
...

UTF-8 karakters (1)

  • 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

UTF-8 karakters (2)

  • 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:
    utf-8 karakters 
    <h3>▣ hoofdstuk 1</h3>
<p>...</p>               
<h3>▣ hoofdstuk 2</h3>               
<p>...</p>
  • dit kan voor alle "speciale" tekens als €, ©, →...

Karaktercodering

  • Je kan UTF-8 karakters ook met de hand coderen als je de code kent: 
    <p>
  &rarr; koop de Samsung&reg; Galaxy vandaag &mdash; voor &euro;499!
</p>
  • voor de exacte codes je vindt genoeg referenties online, zoals RapidTables

Emoji's

  • UTF-8 bevat ook emoji's: druk op Windowstoets-puntkomma (PC) of Ctrl-Cmd-Space (Mac) om het emojivenster op te roepen, en off you go.
    emoji panel 
    <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 Icons

  • 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="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 deze slide
Odisee logo