HTML

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 lijn

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>

<p style=”font-size:10px” >Dit is een paragraaf met een letterhoogte van 10 pixels</p>
<p style=”font-family:Times” >Dit is een paragraaf met het lettertype Times </p>
<p style=”text-align:center” >Deze paragraaf is gecentreerd </p>

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="alternatieve tekst" />
(Toont de afbeelding voorbeeldplaatje.jpg)

<img src="http://www.voorbeeld.nl/voorbeeldplaatje.jpg" style=”float:left;” alt="alternatieve tekst" />
(Afbeelding voorbeeldplaatje.jpg links uitgelijnd)

<a href="http://www.voorbeeld.nl/"><img src="http://www.voorbeeld.nl/voorbeeldplaatje.jpg" alt="alternatieve tekst" /></a>
(Maakt van de afbeelding voorbeeldplaatje.jpg een link naar www.voorbeeld.nl)

Lijstje

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

Genummerd lijstje

<ol>
<li>eerste item</li>
<li>tweede item</li>
</ol>

Tabellen

<table border=”1″>
<tr>
<th>kolomkop</th>
<th>kolomkop</th>
</tr>
<tr>
<td>tekst</td>
<td>tekst</td>
</tr>
</table>

Structuur

<div> Dit is een blok informatie </div>
<div style=”text-align: center; color: red;” > Dit is een blok informatie met een gecentreerde, rode tekst </div>

Diversen

<!– Dit is onzichtbaar commentaar –>

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