HTML

2009-02-15 | Handleidingen

De tijd dat je als journalist met de hand webpagina’s in elkaar zette, is wel voorbij. Of het nu gaat om een grote nieuwssite of om een klein weblog, sites worden tegenwoordig beheerd met behulp van een content management system (cms). Toch is het goed om de basisbeginselen te kennen van HTML, HyperText Markup Language, de ‘taal’ waarmee webpagina’s worden opgebouwd. Hieronder staan de meest voorkomende codes. Op www.w3schools.com vind je een goede basiscursus.

HTML Basis Document

<html>
  <head>
    <title>De naam van de pagina komt hier</title>
  </head>
  <body>
      Alle zichtbare tekst op de pagina komt hier
  </body>
</html>

Koppen

<h1>Grootste kop</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>Kleinste kop</h6>

Tekst

<p>Dit is een paragraaf</p>
<br />Dit is een return
<hr />Dit is een horizontale linkje

Opmaak

<em>Deze tekst krijgt nadruk</em>
<strong>Deze tekst is vet</strong>
<code>Dit is computer code</code>
<b>Deze tekst is vet</b>
<i>Deze tekst is cursief</i>

Links

<a href="http://www.voorbeeld.nl/">Dit is een link naar www.voorbeeld.nl</a>
<a href="http://www.voorbeeld.nl/" target="_blank">Deze link naar www.voorbeeld.nl opent een nieuw venster</a>
<a href="mailto:webmaster@voorbeeld.nl">Stuur een mail naar webmaster@voorbeeld.nl</a>

Afbeeldingen

<img src="”http://www.voorbeeld.nl/voorbeeldplaatje.jpg”" alt="beschrijving van de afbeelding" />
<a href="”http://www.voorbeeld.nl/”">
  <img src="”http://www.voorbeeld.nl/voorbeeldplaatje.jpg”"
    alt="beschrijving van de afbeelding" />
</a>

Lijstje

<ul>
  <li>eerste item</li>
  <li>tweede item</li>
</ul>

<ol>
  <li>eerste item in genummerd lijstje</li>
  <li>tweede item in genummerd lijstje</li>
</ol>

Tabellen

<table>
  <tr>
    <th>kolomkop</th>
    <th>kolomkop</th>
  </tr>
  <tr>
    <td>tekst</td>
    <td>tekst</td>
  </tr>
</table>

Structuur

In de loop van de jaren zijn er html-tags bijgekomen waarmee je een pagina meer structuur kunt geven. Dit is ook van belang schermlezers (software waarmee gebruikers die niet of minder goed kunnen zien webpagina's gebruiken.)

<header>Dit is het blok bovenaan de pagina</header>
<main>Het blok met de belangrijkste informatie van de pagina</main>
<aside>Dit is een blok met secundaire informatie, bijvoorbeeld een kolom met linkjes</aside>
<nav>Dit is een blok met navigatie</nav>
<section>Dit is een sectie van en pagina</section>
<article>Dit is een artikel</article>
<figure>
  <img scr="" alt="" />
  <figcaption>Dit is een blok met visuele informatie, inclusief een bijschrift</figcaption>
</figure>
<div>Dit is een blok informatie</div>
<details>
  <summary>De kop van een uitklapbaar blok</summary>
  De inhoud van een uitklapbaar blok
</details>
<footer>Dit is het blok onderaan de pagina, vaak met linkjes of een colofon</footer>

Divers

<!-- Dit is onzichtbaar commentaar -->

<blockquote>Dit is een citaat.</blockquote>