Inhoud

HTML

HTML

Dit is een beknopte inleiding in HTML.

Compleet voorbeeld

Hier volgt een voorbeeld van een simpel maar compleet HTML-document.

<!DOCTYPE html>
<html>
    <head>
        <title>Hallo wereld</title>
    </head>
    <body>
        <h1>Hallo wereld</h1>
        <p>En een goede morgen...</p>
    </body>
</html>

Tip: download het bestand en open het dan in een browser.

Voorbeeldbespreking

We zullen het voorbeeld nu stap voor stap bespreken:

<!DOCTYPE html>

Deze document type declaration vertelt de browser dat de inhoud van het bestand moet worden verwerkt volgens de HTML5-standaard. Als we ons aan deze standaard willen houden (goed idee!) dan is deze regel verplicht.

<html>

De <html> tag markeert het begin van het document, met </html> wordt het einde aangegeven. Tekst die buiten deze tags staat wordt niet weergegeven in de browser (of kan tot onvoorspelbare problemen leiden).

    <head>

Een HTML-document bestaat uit twee delen: een zgn. header en een body. De header bevat informatie die voor de browser of voor zoekmachines van belang is, maar niet per se voor de gebruiker/lezer van het document. Begin en einde van de header worden gemarkeerd met <head> en </head>.

        <title>Hallo wereld</title>

Eén van de mogelijke elementen in de header is de titel van het document, gemarkeerd met <title>..</title. Dit is niet de titel zoals die wordt weergegeven op de pagina zelf. De browser zal deze titel zichtbaar maken in een titelbalk, tabblad of bijvoorbeeld in een bladwijzer. In sommige gevallen zal de titel verborgen blijven.

    <body>

De body is het zichtbare deel van het document. Alle tekst, afbeeldingen e.d. die binnen de <body>..</body> tags worden geplaatst zullen in principe door de browser op het scherm worden weergegeven.

        <h1>Hallo wereld</h1>

Een zichtbare titel (koptekst) boven het document kan je maken door de tekst tussen <h1>..</h1> te zetten. Dit is de koptekst van het hoogste niveau. Later zullen we zien dat het mogelijk is om kopjes te maken op verschillende niveaus in het document.

        <p>En een goede morgen...</p>

Alinea's (paragraphs) in het document worden omsloten door <p>..</p> tags. Hiermee markeer je regels tekst die bij elkaar gehouden worden. Als meerdere alinea's na elkaar worden weergegeven dan worden ze meestal gescheiden door verticale witruimte.

Opmerkingen

Inspringen

In het voorbeeld wordt inspringing (indentation) toegepast om de structuur van het document zichtbaar te maken. Op deze manier hou je overzicht als je HTML schrijft. Bijvoorbeeld als een tag niet is afgesloten dan valt dat op deze manier eerder op. Een vuistregel is dat je inspringt met tabs of een vast aantal spaties als de gemarkeerde code/tekst meerdere regels beslaat; zolang de code op één regel bij elkaar staat is inspringen niet nodig.

Boomstructuur

In aanvulling op bovenstaande: de structuur van een HTML-document is een zgn. boomstructuur. De wortel van de boom is altijd de <html> tag. Vanaf de wortel begint de “boom” te vertakken. Het voorbeelddocument kan als volgt in een schema worden weergegeven:

Links

Zoals gezegd is de essentie van HTML dat elk document kan verwijzen naar andere documenten, zowel op dezelfde website als elders in het wereldwijde web. Voor het maken van een link gebruiken we de <a> tag. De a staat in dit geval voor anchor. Een schip en anker zijn met elkaar verbonden door een ketting of kabel. In deze metafoor zijn twee HTML-documenten ook verbonden via een denkbeeldige kabel of lijn, en het anker is het punt waarop de lijn met het document wordt verbonden.

Een link heeft deze algemene vorm:

<a href="contact.html">bellen of mailen</a>

Bij de eerste tag wordt een attribute opgegeven: href=“” bevat tussen aanhalingstekens de hypertext reference, ofwel de locatie van het document waarnaar je wil verwijzen. Zoals bij de tags die we eerder zagen moet de link worden afgesloten met </a>. Tussen de tags staat de tekst die als link zal verschijnen in het document. In dit geval kan de gebruiker klikken op de tekst “bellen of mailen” en de browser zal dan de pagina contact.html openen.

Absolute en relatieve verwijzingen

De locatie van het gelinkte document kan op twee manieren worden gespecificeerd, nl. als absolute of als relatieve verwijzing.

Bij een absolute verwijzing wordt het complete adres van het document opgegeven. Dat is bijvoorbeeld nodig als het document zich op een andere server/website bevindt. Een absolute verwijzing zal daarom meestal beginnen met http:// of https:// om aan te geven dat het document zich elders op het web bevindt, dan de naam van de server of website, dan een slash en vervolgens de locatie van het document op die server.

Bijvoorbeeld:

<a href="https://fablabmiddenlimburg.nl/contact/">bellen of mailen</a>

Dit verwijst naar een specifieke locatie op de server van FabLab Midden-Limburg.

Bij een link met een relatieve verwijzing laten we http:// en https:// weg. De browser gaat er dan vanuit dat het bedoelde document zich bevindt op dezelfde server als het document waarin de link staat. Bijvoorbeeld:

<a href="contact.html">bellen of mailen</a>

contact.html bevindt zich op dezelfde server en in dezelfde map als het verwijzende document.

<a href="extra/contact.html">bellen of mailen</a>

contact.html bevindt zich op dezelfde server maar in de map extra, een subfolder van de map waarin het verwijzende document staat.

<a href="/extra/contact.html">bellen of mailen</a>

contact.html bevindt zich op dezelfde server maar in de map extra, welke een map is in de hoofdmap (root) van de server.

Als je een website maakt op je eigen computer moet je opletten dat je alleen relatieve verwijzingen gebruikt vanuit de map waarin je werkt. Verwijzingen naar documenten (of plaatjes e.d.) op het bestandssysteem van je computer zullen niet meer werken als je je website eenmaal gaat uploaden naar een server. Dus verwijzingen die beginnen met file:// (of waarin bestandspaden staan zoals C:/Users/naam/Documents) mogen niet voorkomen in je pagina's.

Afbeeldingen

Een plaatje kan je tekst verduidelijken of verlevendigen. Op veel websites vormen afbeeldingen zelfs de belangrijkste inhoud. Het invoegen van een afbeelding gaat op de eenvoudigste manier als volgt:

<img src="foto.png">

De img tag staat natuurlijk voor image. Het attribuut src staat voor source (bron). Als bron wordt de naam/locatie van het afbeeldingsbestand opgegeven. Dat kan met zowel een relatieve als een absolute verwijzing, net als bij een link.

De browser zal geen moeite doen om het plaatje te schalen of netjes op de pagina te positioneren. Als je op deze manier een afbeelding van 3000×2000 pixels invoegt op je pagina dan zal de afbeelding maar gedeeltelijk te zien zijn en je tekst verdrukken. We kunnen daarom attributen toevoegen:

<img src="foto.png" width="600" height="400">

De foto zal nu automatisch worden geschaald zodat het in een vak van 600×400 pixels past. Let op: de browser zal nog steeds de volledige afbeelding moeten downloaden. Het schalen door middel van width en height in de img tag is dus géén oplossing voor het langzaam laden van pagina's met veel grote afbeeldingen.

Standaard worden afbeeldingen geladen op de plaats in de tekst waar de tag wordt geplaatst (“inline”), dit kan er vreemd uitzien (probeer dit uit!). Zet een foto in <p>, <div> of <figure> tags om onvoorspelbare plaatsing en tekstomloop te vermijden:

<figure><img src="foto.png" width="600" height="400"></figure>

Voor het verder opmaken van plaatjes gebruiken we CSS.

Lijsten

In veel documenten zullen lijsten voorkomen, om artikelen of begrippen op te sommen, en soms om te dienen als keuzemenu. Er zijn twee soorten lijsten: ongeordende lijsten en geordende lijsten.

Ongeordende lijst

Een ongeordende lijst (unordered list) is een lijst waarin de items in willekeurige volgorde worden opgesomd. Anders gezegd: de volgorde heeft geen specifieke betekenis. Bijvoorbeeld een boodschappenlijst kan een ongeordende lijst zijn. Een unordered list maken we als volgt:

<ul>
    <li>broccoli</li>
    <li>augurken</li>
    <li>gehakt</li>
</ul>

Deze lijst kan als volgt worden afgebeeld in de browser:

broccoli
augurken
gehakt

De <ul>..</ul> tags markeren het begin en het einde van de lijst. De <li>..</li> tags markeren de items van de lijst (list items).

Geordende lijst

Een geordende lijst (ordered list) is een lijst waarin de volgorde van de items wel een specifieke betekenis heeft. De items worden genummerd weergegeven, of naar keuze met bijv. een letter. Instructies voor het uitvoeren van een taak zijn een goed voorbeeld van een geordende lijst. Een ordered list maken we als volgt:

<ol>
    <li>Oven voorverwarmen op 175 graden</li>
    <li>Beslag mengen</li>
    <li>Beslag in bakvorm doen</li>
    <li>Bakvorm met beslag in de oven plaatsen, 60 minuten laten bakken</li>
</ol>

Deze lijst kan als volgt worden afgebeeld in de browser:

Oven voorverwarmen op 175 graden
Beslag mengen
Beslag in bakvorm doen
Bakvorm met beslag in de oven plaatsen, 60 minuten laten bakken

De geordende lijst wordt dus op dezelfde manier gespecificeerd als de ongeordende lijst. Het verschil is het gebruik van de <ol>..</ol> tags.

Tabellen

Tabellen worden gebruikt om gestructureerde of samenhangende gegevens helder weer te geven. Het kan bijvoorbeeld gaan om lijsten van contactpersonen met telefoonnummers en e-mailadressen, of artikelen met artikelnummer, omschrijving en prijs.

Voor het maken van een eenvoudige tabel zijn tenminste drie verschillende soorten tags nodig:

<table>
    <tr>
        <td>AB01</td>
        <td>Schroevedraaierset 6-delig</td>
        <td>€ 20,00</td>
    </tr>
    <tr>
        <td>EE20</td>
        <td>Soldeerbout</td>
        <td>€ 15,00</td>
    </tr>
    <tr>
        <td>P7777</td>
        <td>Acrylverf mat zwart 500ml</td>
        <td>€ 5,00</td>
    </tr>
</table>

In het bovenstaande voorbeeld markeren de <table>..</table> tags het begin en het einde van de tabel. De rijen van de tabel worden gespecificeerd met de <tr>..</tr> tags; tr staat hier voor table row. Elke cel in de tabel wordt gemarkeerd met <td>..</td> waarbij td staat voor table data.

Het resultaat zal er ongeveer als volgt uitzien:

AB01	Schroevedraaierset 6-delig	€ 20,00
EE20	Soldeerbout	€ 15,00
P7777	Acrylverf mat zwart 500ml	€ 5,00

Om de tabel leesbaarder te maken kunnen we kopjes boven de kolommen toevoegen:

<table>
    <tr>
        <th>Artikelnummer</th>
        <th>Omschrijving</th>
        <th>Prijs</th>
    </tr>
    <tr>
        <td>AB01</td>
        <td>Schroevedraaierset 6-delig</td>
        <td>€ 20,00</td>
    </tr>
    <tr>
        <td>EE20</td>
        <td>Soldeerbout</td>
        <td>€ 15,00</td>
    </tr>
    <tr>
        <td>P7777</td>
        <td>Acrylverf mat zwart 500ml</td>
        <td>€ 5,00</td>
    </tr>
</table>

Hier bestaat de eerste rij dus uit <th>..</th> elementen (voor table header).

Het resultaat:

Artikelnummer	Omschrijving	Prijs
AB01	Schroevedraaierset 6-delig	€ 20,00
EE20	Soldeerbout	€ 15,00
P7777	Acrylverf mat zwart 500ml	€ 5,00

Het is zaak om zelf goed uit te tellen of elke regel wel evenveel cellen bevat, anders zal de opmaak van de tabel er vreemd uitzien. Het is mogelijk om cellen samen te voegen in horizontale en verticale richting (colspan en rowspan) maar dat valt buiten het bestek van deze inleiding. Opmaak van tabellen gebeurt met CSS. Het is standaard niet mogelijk te rekenen in een tabel (zoals in een spreadsheet bijv. Excel). Daarvoor zou je JavaScript kunnen gebruiken, maar ook dat valt buiten deze inleiding.

FabLab Midden-Limburg

Gebruikershulpmiddelen

Site-hulpmiddelen