HTML leren

HTML is de afkorting van Hyper Text Markup Language, het is de code of taal die wordt gebruikt voor het maken van websites. Het ziet er misschien ingewikkeld uit als je nog nooit hebt geprogrammeerd, maar om het uit te proberen heb je alleen maar een simpel tekstverwerkingsprogramma en een internetbrowser nodig. Het zou goed kunnen dat je wat HTML herkent van forums, online-profielen of How.com.vn-artikelen. HTML is een handig hulpmiddel voor iedereen die gebruikmaakt van het internet, en het leren van HTML kan wel eens minder tijd kosten dan je zou verwachten.

Deel 1

Deel 1 van 2:

De basis van HTML leren

Pdf downloaden

1
Open een HTML-document. De meeste tekstverwerkingsprogramma's, waaronder Kladblok of Word voor Windows en Teksteditor voor Mac, kunnen worden gebruikt om HTML-documenten te maken. Open een nieuw document en selecteer Bestand → Opslaan als in het bovenmenu om je document op te slaan als webpagina, of verander de bestandsextensie van ".doc", ".rtf" of iets anders naar ".html" of ".htm".
- Het kan zijn dat er nu een waarschuwing verschijnt waarin staat dat je document wordt gewijzigd van het RTF-formaat (Rich Text Format) naar het formaat "platte tekst", en dat bepaalde formatteeropties en afbeeldingen niet op de juiste manier worden opgeslagen. Je kunt deze waarschuwing negeren; HTML-documenten maken geen gebruik van deze opties.
- .html- en .htm-bestanden zijn hetzelfde. Het werkt allebei.^[1]XBron
2
Bekijk je document met een browser. Bewaar je lege document, sluit het af en dubbelklik vervolgens op het document op de locatie waar het is opgeslagen om het weer te openen. Als het goed is wordt je document nu geopend door je browser als lege webpagina. Als dat niet werkt sleep je het pictogram van het bestand naar de adresbalk van je browser. Als je straks je HTML-document bewerkt volgens de stappen in dit artikel zul je steeds teruggaan naar de browser om te controleren hoe de veranderingen in de code eruit zien.
- Let op: hiermee staat je webpagina nog niet online. De pagina is niet toegankelijk voor anderen en je hebt geen werkende internetverbinding nodig om het te testen. Je gebruikt je browser alleen maar om het HTML-document te "lezen" alsof het een website is.
3
Begrijp wat 'tags' zijn. Tags zijn op de uiteindelijke webpagina niet te zien, zoals normale tekst dat wel is. De tags vertellen je browser hoe de pagina en de content op de pagina moet worden weergegeven. De begintag bevat instructies. Het kan de browser bijvoorbeeld vertellen dat de tekst vetgedrukt moet worden weergegeven. De eindtag is nodig om de browser te vertellen waar de instructies van toepassing zijn: in dit voorbeeld is alle tekst tussen begin- en eindtag vetgedrukt. Ook eindtags worden geplaatst binnen haakjes, maar na het eerste haakje volgt een schuine streep.
- Schrijf begintags tussen haakjes: <dit is de begintag>
- Schrijf eindtags tussen haakjes, maar plaats een schuine streep na het eerste haakje: </dit is de eindtag>)
- Lees verderop in het artikel hoe je functionele tags schrijft. Bij deze stap hoef je alleen maar te onthouden op welke manier je tags schrijft: < > en </ >.
- In andere HTML-cursussen worden tags ook wel "elementen" genoemd en de tekst tussen begin- en eindtags wordt ook wel "elementinhoud" genoemd.
4
Schrijf je eerste <html>-tag. Elk HTML-document begint met een <html>-tag en eindigt met een </html>-tag. Dit vertelt de browser dat alles tussen deze tags is geschreven in HTML. Voeg deze tags toe aan je document:
- Schrijf <html> bovenaan je document.
- Druk meerdere keren op enter of return om jezelf wat ruimte geven en schrijf vervolgens </html>
- Onthoud dat je alles in dit artikel tussen deze twee tags plaatst.
5
Maak het <head>-gedeelte van je document. Tussen de tags <html> en </html> schrijf je een <head>-begintag en een </head>-eindtag. Maak weer wat ruimte tussen deze tags. Alles wat tussen deze tags wordt geschreven zal niet zichtbaar zijn op de webpagina zelf. Probeer de volgende stappen uit en kijk of je kan zien waar de informatie wel opduikt:
- Schrijf tussen de tags <head> en </head>: <title> en </title>
- Tussen de tags <title> en </title> schrijf je: HTML leren - How.com.vn.
- Bewaar het document en open het in een browser (of bewaar het document en ververs de pagina op de browser als de pagina nog open stond). Zie je wat je net hebt geschreven bovenaan de pagina, boven de adresbalk?
6
Maak een <body>-sectie aan. Al het andere in dit beginnersdocument wordt in de sectie <body> geplaatst, en dat wordt wél op de webpagina getoond. Na de tag </head>, maar voor de tag </html> schrijf je <body> en </body>. Alles wat we verder behandelen in dit artikel plaatsen we tussen de bodytags. Als het goed is heb je nu een document dat er als volgt uitziet (zonder de opsommingstekens):
- <html>
- <head>
- <title>HTML leren - How.com.vn</title>
- </head>
- <body>
- </body>
- </html>
7
Voeg tekst toe in verschillende stijlen. Nu wordt het tijd dat je iets gaat schrijven dat daadwerkelijk zichtbaar zal zijn in de browser! Alles wat je binnen de bodytags schrijft zal zichtbaar zijn in de browser nadat je de wijzigingen hebt opgeslagen en de pagina hebt ververst binnen de browser. Schrijf niet iets met de tekens < en >, want je browser zal dat interpreteren als HTML-instructie in plaats van normale tekst. Schrijf bijvoorbeeld Hello world! (Engels voor "Hallo wereld!", dit is de wereldwijde standaardtekst als eerste voorbeeld in elke cursus programmeren in een bepaalde programmeertaal^[2]XBron) of iets anders, en plaats de volgende tags voor en achter de tekst en kijk steeds wat er gebeurt:
- <em>Hello world!</em> ziet eruit als schuingedrukte tekst: Hello world!
- <strong>Hello world!</strong> ziet eruit als vetgedrukte tekst: Hello world!
- <s>Hello world!</s> ziet eruit als doorgestreepte tekst: ~~Hello world!~~
- <sup>Hello world!</sup> ziet eruit als bovenschrift: ^{Hello world!}
- <sub>Hello world!</sub> ziet eruit als onderschrift: _{Hello world!}
- Probeer combinaties uit: Hoe ziet <em><strong>Hello world!</strong></em> eruit?
8
Verdeel je tekst onder in paragrafen. Als je verschillende regels tekst in je document gaat plaatsen zul je zien dat alle regels achter elkaar worden geplaatst. Nieuwe regels en witregels moet je zelf programmeren:
- <p>Dit is een aparte paragraaf.</p>
- Deze zin staat op de eerste regel<br>en deze zin op de volgende.
  Dit is de eerste tag die we tegenkomen die geen eindtag nodig heeft! Zo'n tag noemen we een lege tag.
- Maak kopteksten aan om de namen van de secties duidelijk te maken:
  <h1>koptekst</h1>: de grootst mogelijke koptekst
  <h2>koptekst</h2> (het 2^e niveau koptekst)
  <h3>koptekst</h3> (het 3^e niveau koptekst)
  <h4>koptekst</h4> (het 4^e niveau koptekst)
  <h5>koptekst</h5> (de kleinst mogelijk koptekst)
9
Leer hoe je lijsten maakt. Er zijn verschillende manieren om lijsten te maken op een webpagina. Probeer de volgende methodes om erachter te komen wat jou het meest bevalt. Let er wel op dat één paar tags om de hele lijst wordt geplaatst (zoals de tags <ul> en </ul> voor ongeordende lijsten) en dat om elk item binnen de lijst een ander paar tags wordt geplaatst, zoals <li> en </li>.
- Gebruik de volgende code om lijsten te maken met bullets:
  <ul><li>Eén item</li><li>Nog een item</li><li>Nog een item</li></ul>
- Of deze code om genummerde lijsten te maken:
  <ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>
- Of deze code om een zogenaamde definitielijst te maken:
  <dl><dt>Koffie</dt><dd>- Hete drank</dd><dt>Melk</dt><dd>- Koude drank</dd></dl>
10
Maak je pagina aantrekkelijker met nieuwe regels, horizontale lijnen en afbeeldingen. Nu is het tijd om andere dingen te gaan toevoegen aan je pagina. Probeer de volgende tags (de afbeelding moet je online geplaatst hebben zodat je een link naar de afbeelding kunt gebruiken):
- Voeg een lijn in: <br> of <hr>
- Voeg afbeeldingen in: <img src="de_url_van_je_afbeelding">
11
Voeg koppelingen in naar andere plekken op de pagina. Je kunt deze ook code gebruiken om te linken naar andere pagina's en websites, maar omdat je nog geen website hebt zullen we ons voorlopig richten op "anchors" (ankers), oftewel specifieke plekken op de pagina waarnaar je kunt linken:
- Maak eerst een anchor met de tag <a> op het punt in de pagina waarnaar je wilt linken. Geef je anchor een duidelijke naam die makkelijk te onthouden is:
  
  <a name="Tips">Dit is de tekst waaromheen je je anchor plaatst.</a>
- Gebruik de tag <href> om te linken naar je anchor of naar een andere webpagina:
  
  <a href="url van de webpagina of naam van anchor op deze pagina">Schrijf de tekst of de afbeelding die wordt getoond als link hier.</a>
- Om te linken naar een anchor op een andere pagina voeg je het teken # toe na de url, gevolgd door de naam van je anchor. Bijvoorbeeld http://www.wikihow.com/HTML-leren#Tips brengt je meteen naar het gedeelte "Tips" op deze pagina.
Advertentie

Deel 2

Deel 2 van 2:

Geavanceerde HTML leren

Pdf downloaden

1
Leer over attributen. Attributen worden geplaatst binnen de tag en worden gebruikt om extra aanpassingen te maken aan de "elementinhoud" tussen begin- en eindtag. Ze staan nooit op zichzelf. Ze worden geschreven op de volgende manier: name="value". name staat voor de naam van het attribuut (bijvoorbeeld "color") en value beschrijft dit specifieke geval (bijvoorbeeld "red").
- Als je goed gekeken hebt in het vorige deel van dit artikel ben je al attributen tegengekomen. De tag <img> gebruikt het attribuut src, een anchor gebruikt het attribuut name en links gebruiken het attribuut href. Je kunt zien dat ze allemaal het formaat ___="___" volgen.
2
Experimenteer met HTML-tabellen. Om een tabel of grafiek te maken heb je verschillende tags nodig:
- Begin met de tags voor tabel ("table" in het Engels) om de gehele tabel heen:<table></table>
- Plaats tags rond de inhoud van elke rij: <tr>
- Plaats kolomkopteksten in de eerste rij: <th>
- Plaats cellen in opeenvolgende rijen: <td>
- Dit is een voorbeeld van hoe dit alles samenkomt:
  
  <table><tr><th>Kolom 1: Maand</th><th>Kolom 2: Gespaard geld</th></tr><tr><td>Januari</td><td>€100</td></tr></table>
3
Leer de andere tags die worden gebruikt in de headsectie. Je hebt de tag <head> al geleerd, die plaats je aan het begin van elk document. Naast de tag <title> kunnen er nog andere tags voorkomen in de headsectie:
- Metatags worden gebruikt om metadata over een webpagina te genereren. Deze data wordt gebruikt door zoekmachines om webpagina's te categoriseren. Om je pagina zichtbaar te maken voor zoekmachines kun je één of meerdere metatags plaatsen (eindtags zijn niet nodig), elke tag moet exact één name-attribuut en content-attribuut bevatten, bijvoorbeeld: <meta name="omschrijving" content="zet hier je omschrijving">; of <meta name="keywords" content="schrijf hier een lijst met keywords, steeds gescheiden door een komma">
- <link>-tags worden gebruikt om andere bestanden te koppelen aan de pagina. Het wordt meestal gebruikt om CSS-stylesheets te koppelen aan HTML-pagina's, deze pagina's worden opgesteld met een ander soort code en worden gebruikt om de algemene stijl van een pagina te bepalen.
- <script>-tags worden gebruikt om javascript-bestanden te koppelen aan de HTML-pagina. Door javascript kan de pagina veranderen als de gebruiker iets doet op de pagina.
4
Speel met HTML van bestaande pagina's. Het bekijken van de broncode van webpagina's is een geweldige manier om je HTML-kennis uit te breiden. Kik met je rechtermuisknop op de pagina en selecteer "Bekijk broncode", "Toon paginabron" of iets soortgelijks. Probeer erachter te komen wat een bepaalde tag die je nog niet kent doet of zoek online naar het antwoord.
- Je kunt de websites van anderen niet aanpassen, maar je kunt wel de HTML-code kopiëren naar je eigen document en ermee spelen om te zien wat verschillende aanpassingen bewerkstelligen. Let op: omdat veel websites gebruik maken van CSS-stylesheets zou het kunnen dat je veel kleuren of andere stijlen niet kunt zien.
Er zijn vele bronnen te vinden op internet om meer HTML-tags onder de knie te krijgen zoals W3Schools of Codecademy. Er zijn ook vele boeken over HTML verkrijgbaar, maar let wel op dat je een recente uitgave gebruikt, want de standaard op het gebied van HTML verandert zo nu en dan. Als je HTML eenmaal op een goed niveau onder de knie hebt kun je je gaan richten op CSS voor meer controle over de vormgeving en stijl van je webpagina. Daarna is de volgende stap meestal javascript.
Advertentie

Tips

Het kan handig zijn om een simpele webpagina te zoeken op internet en vervolgens te gaan stoeien met de code. Probeer om wat tekst te verplaatsen, verander het lettertype, verander de afbeeldingen, wat je maar wilt!
Je kunt een schriftje gebruiken om de code op te schrijven, zodat je iets hebt om op terug te vallen als je het even niet meer weet. Je kunt ook deze pagina uitprinten en erbij houden als referentie.
XML en RSS worden tegenwoordig steeds meer gebruikt op websites. De code kan er ontoegankelijk uitzien voor het menselijk oog, zeker als je het in de broncode bekijkt, maar de functionaliteit kan nuttig zijn.
De tags die worden gebruikt binnen HTML zijn niet hoofdlettergevoelig, maar de standaard is om kleine letters te gebruiken (zoals we doen in dit artikel). Kleine letters voor de tags worden ten zeerste aangeraden, ook voor compatibiliteit met XHTML.^[3]XBron

Advertentie

Waarschuwingen

Sommige tags worden inmiddels niet meer gebruikt en zijn vervangen door andere tags die hetzelfde doen, maar vaak meer mogelijkheden bieden.
Als je zeker wilt weten dat jouw pagina voldoet aan de HTML-standaard, ga dan naar de website van W3 om jouw code te toetsen aan de huidige standaard. Veel tags zijn inmiddels verouderd en vervangen door tags die beter werken op moderne browsers.

Advertentie

Benodigdheden

Een tekstverwerkingsprogramma, bijvoorbeeld Kladblok (Windows) of Teksteditor (Mac).
een vel papier of schriftje (optioneel)
Een programma dat speciaal bedoeld is om HTML mee te schrijven, zoals Notepad++ voor Windows of TextWrangler voor Mac (optioneel)