HTML staat voor Hypertext Markup Language . Het is een speciale taal die gebruikt wordt om webpagina's te bouwen. Wanneer u een website bezoekt, leest de computer HTML om u de tekst, afbeeldingen en links te tonen. Beschouw HTML als de bouwstenen van een website. Net zoals u Legoblokjes gebruikt om een huis of een auto te bouwen, gebruiken wij HTML-tags om een webpagina te bouwen.
HTML is de code die een computer vertelt hoe tekst, afbeeldingen, video's en links op een webpagina moeten worden weergegeven. Het is alsof je een vriend instructies geeft die een tekening voor je maakt. HTML gebruikt woorden tussen punthaken, ook wel tags genoemd, om het begin en het einde van een deel van de webpagina te markeren.
Elke website die je bezoekt, gebruikt op de een of andere manier HTML. Zonder HTML zouden er geen webpagina's zijn. HTML helpt bij het organiseren van content en vertelt de computer hoe de pagina moet worden weergegeven. Het is het allereerste wat je leert in webontwikkeling, want het zorgt ervoor dat het internet werkt!
Een HTML-document heeft een speciale structuur. Het begint met een declaratie genaamd <code><!DOCTYPE html></code> die de computer vertelt dat de pagina HTML gebruikt. Vervolgens wordt het document verdeeld in twee hoofdonderdelen: de head en de body.
Een heel eenvoudig HTML-document ziet er zo uit:
<code><!DOCTYPE html>
<html>
<hoofd>
<title>Mijn eerste webpagina</title>
</hoofd>
<lichaam>
<p>Hallo wereld!</p>
</body>
</html> </code>
In dit voorbeeld bevat de <head> -sectie de titel van de pagina en plaatst u in de <body> -sectie de inhoud die op het scherm verschijnt.
HTML gebruikt tags om verschillende delen van de webpagina te markeren. Een tag is een woord tussen punthaken. Zo vertelt <code><p></code> de computer dat wat volgt een alinea is. Wanneer u de alinea hebt voltooid, gebruikt u de afsluitende tag, <code></p></code>, om het einde aan te geven.
Een element in HTML bestaat uit een openingstag, wat inhoud en een sluitingstag. Bijvoorbeeld:
<code><p>Dit is een alinea.</p></code>
Elke tag instrueert de webbrowser over hoe de inhoud moet worden weergegeven.
Er zijn veel tags in HTML. Enkele van de meest voorkomende zijn:
Attributen geven extra informatie over een HTML-element. Ze worden toegevoegd aan de openingstag, binnen de punthaken van de tag. De meest voorkomende attributen zijn src en alt, die samen met de image-tag worden gebruikt.
Om bijvoorbeeld een afbeelding toe te voegen, kunt u het volgende schrijven:
<code><img src="picture.jpg" alt="Een mooie foto"></code>
Hierbij vertelt src de browser waar het afbeeldingsbestand zich bevindt en alt geeft een beschrijving van de afbeelding als deze niet kan worden weergegeven.
Het HTML-document is in twee delen verdeeld:
Met links kun je van de ene pagina naar de andere springen. In HTML maken we links met de <a> -tag. Het kenmerk href in de tag vertelt de browser de bestemming van de link.
Bijvoorbeeld:
<code><a href="https://www.example.com">Bezoek Example.com</a></code>
Wanneer u op deze link klikt, opent uw browser de website example.com .
Afbeeldingen fleuren een webpagina op en maken deze interessanter. Om een afbeelding toe te voegen, gebruikt u de <img> -tag. Onthoud dat de <img> -tag geen afsluitende tag heeft.
Zo voegt u een afbeelding toe:
<code><img src="sunflower.jpg" alt="Een heldere zonnebloem"></code>
Deze code vertelt de browser om een afbeelding van een zonnebloem weer te geven. Het src -attribuut verwijst naar de locatie van de afbeelding en het alt- attribuut geeft een beschrijving van de afbeelding.
Lijsten organiseren informatie in een overzichtelijk formaat. Er zijn twee hoofdtypen lijsten in HTML:
Hier is een voorbeeld van een ongeordende lijst:
<code><ul>
<li>Appel</li>
<li>Banaan</li>
<li>Kers</li>
</ul> </code>
En hier is een voorbeeld van een geordende lijst:
<code><ol>
<li>Eerste</li>
<li>Tweede</li>
<li>Derde</li>
</ol> </code>
Tabellen helpen bij het weergeven van informatie in rijen en kolommen. Ze zijn handig wanneer u gegevens wilt vergelijken of items in een raster wilt weergeven.
Hier is een eenvoudig voorbeeld van een HTML-tabel:
<code><tabelrand="1">
<tr>
<th>Naam</th>
<th>Leeftijd</th>
</tr>
<tr>
<td>Alice</td>
<td>10</td>
</tr>
</tabel> </code>
In deze tabel definieert <tr> een tabelrij, <th> wordt gebruikt voor de tabelkop (vetgedrukte tekst) en <td> wordt gebruikt voor tabelgegevens (de cellen).
Met HTML kun je ook multimedia toevoegen, zoals geluid en video. Met de <audio> -tag kun je geluidsbestanden toevoegen. Met de <video> -tag kun je videospelers in je webpagina insluiten.
Hier is een voorbeeld van een video-embedcode:
<code><video width="320" height="240" controls>
<bron src="film.mp4" type="video/mp4">
</video> </code>
Deze code creëert een videospeler met knoppen om af te spelen, te pauzeren of het volume te wijzigen. Het controls- attribuut vertelt de browser om deze knoppen weer te geven.
Elke website op internet is gebouwd met HTML. Stel je voor dat je de website van je school bezoekt, een leuke spelletjessite bezoekt of een online verhaal leest. HTML werkt achter de schermen om de tekst, afbeeldingen en andere content zo te ordenen dat je ze duidelijk kunt zien.
Als u bijvoorbeeld online een plaatje van uw favoriete tekenfilmfiguur ziet of op een link klikt om meer te lezen over een leuk onderwerp, kunt u dat met HTML regelen.
Laten we eens kijken naar een eenvoudig project. Stel je voor dat je een kleine webpagina wilt maken over je favoriete dier, zoals een kat. Je kunt een titel, een alinea over katten, een foto en zelfs een link naar een website met leuke weetjes over katten toevoegen.
Uw HTML-code zou er als volgt uit kunnen zien:
<code><!DOCTYPE html>
<html>
<hoofd>
<title>Mijn favoriete dier</title>
</hoofd>
<lichaam>
<h1>Alles over katten</h1>
<p>Katten zijn speels en zacht. Ze houden van slapen en spinnen. Veel mensen vinden het heerlijk om katten als huisdier te hebben.</p>
<img src="cat.jpg" alt="Een schattige kat">
<a href="https://www.catfacts.com">Leer meer over katten</a>
</body>
</html> </code>
Dit project maakt gebruik van koppen, alinea's, afbeeldingen en links. Het laat zien hoe HTML wordt gebruikt om een complete webpagina met veel onderdelen te bouwen.
Hoewel HTML de structuur van een webpagina opbouwt, bestaan er ook andere hulpmiddelen waarmee u websites er leuk uit kunt laten zien en zich op een leuke manier kunt laten gedragen.
Hoewel we vandaag HTML leren, kunnen we met kennis van CSS en JavaScript beter begrijpen hoe websites worden gemaakt.
Als je HTML verkent, zul je nog veel meer tags tegenkomen. Hier zijn er nog een paar om te weten:
Met deze tags hebt u meer controle over hoe uw content op een webpagina wordt weergegeven.
HTML is enorm veranderd sinds het voor het eerst werd bedacht. Er zijn in de loop der tijd veel nieuwe tags en functies toegevoegd. Elke nieuwe versie van HTML maakt het makkelijker om complexe en mooie websites te maken. Tegenwoordig werkt HTML samen met CSS en JavaScript om moderne websites te bouwen die leuk zijn om te gebruiken en er fantastisch uitzien.
Deze evolutie betekent dat HTML zowel eenvoudig te leren als krachtig genoeg is om alles te creëren, van eenvoudige webpagina's tot complexe webapplicaties.
Hoewel HTML leren leuk is, is het altijd belangrijk om veilig te blijven op internet. Vraag altijd een volwassene om hulp als je ergens niet zeker van bent, wanneer je websites bezoekt of online content bekijkt. Jouw veiligheid staat voorop en HTML leren moet altijd een leuke en veilige ervaring zijn.
Laten we eens kijken naar enkele belangrijke termen die u vandaag hebt geleerd:
HTML wordt in veel situaties in de praktijk gebruikt. Hier zijn enkele voorbeelden:
Deze voorbeelden laten zien hoe HTML een heel nuttig hulpmiddel is in veel aspecten van het dagelijks leven.
Vandaag hebben we geleerd dat HTML de afkorting is van Hypertext Markup Language . Het is de basistaal die gebruikt wordt om webpagina's te maken. Hier zijn de belangrijkste punten om te onthouden:
HTML vormt de basis van elke website die je op internet ziet. Met eenvoudige bouwstenen zoals tags en attributen kun je leuke en interactieve pagina's maken. Naarmate je verder leert, zul je zien hoe HTML webpagina's tot leven brengt, waardoor het internet een nuttige en boeiende plek wordt om te verkennen.
