HTML staat voor Hypertext Markup Language en is de standaardtaal die wordt gebruikt om websites te maken op het internet. Intussen een essentieel onderdeel van internet.
Deze code stelt ontwikkelaars in staat om tekst, afbeeldingen, links, video’s en meer op een gestructureerde manier in een webbrowser te vertonen. Het beschrijft de hiërarchie van opmaak-tags en elementen op een pagina en hoe deze met elkaar in verband staan.
Webbrowsers, zoals Google Chrome, Mozilla Firefox en Microsoft Edge interpreteren HTML-codes om webpagina’s correct weer te geven. Het is daarom een onmisbare taak, voordat je een website aflevert, deze door de diverse webbrowsers met elkaar te vergelijken.
Tevens wordt HTML gecombineerd met andere website onderdelen, zoals CSS (Cascading Style Sheets). Dit is een extra document in de website, bedoeld om de opmaak te veréénvoudigen.
Bezoek ook: CSS | Webbrowsers
Hoe maak je een HTML-Document?
Een HTML-document maken is vrij eenvoudig. Hier zijn de basisstappen om een HTML-bestand te maken:
Stap 1: Maak een nieuw tekstbestand
Je kunt elke teksteditor gebruiken, zoals Notepad (Windows), TextEdit (Mac), of een code-editor zoals VS Code of Sublime Text.
Stap 2: Schrijf de basisstructuur van HTML
Een HTML-document volgt een bepaalde structuur. Hier een basisvoorbeeld:
Uitleg van de code:
<!DOCTYPE html>: Dit geeft aan dat het document HTML5 is.<html lang="nl">: Dit opent het HTML-document en stelt de taal in op Nederlands.<head>: Bevat meta-informatie over de pagina (zoals de tekenset, viewport-informatie voor responsieve weergave, en de titel).<meta charset="UTF-8">: Zorgt ervoor dat speciale karakters correct worden weergegeven.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Maakt de pagina responsief, zodat het goed werkt op mobiele apparaten.<title>: De titel die in de browser wordt weergegeven.<body>: Bevat de inhoud van de pagina, zoals tekst, afbeeldingen, links, etc.<h1>en<p>: Dit zijn HTML-elementen voor een koptekst (h1) en een alinea (p).
Stap 3: Opslaan als HTML-bestand
Schrijf je HTML-code in een teksteditor, zoals Notepad, TextEdit, of een speciale code-editor zoals VS Code of Sublime Text.
- Windows (Notepad):
- Klik op Bestand > Opslaan als.
- In het venster dat verschijnt, kies je de locatie waar je het bestand wilt opslaan.
- Zorg ervoor dat je bij Bestandstype kiest voor Alle bestanden.
- Geef het bestand een naam met de extensie .html (bijvoorbeeld
mijnpagina.html). - Klik op Opslaan.
- Mac (TextEdit):
- Klik op Bestand > Opslaan.
- Zorg ervoor dat je de tekst opslaat als platte tekst (niet als RTF).
- Kies een naam met de extensie .html (bijvoorbeeld
mijnpagina.html). - Selecteer bij Opslaan als de juiste locatie en klik op Opslaan.
Stap 4: Openen in een browser
Dubbelklik op het bestand om het in je standaard webbrowser te openen. Je zou dan de inhoud moeten zien die je in de <body> hebt geschreven.
Waar wordt HTML voor gebruikt?
Paginastructuur: HTML wordt gebruikt om de structuur van een webpagina te definiëren. Dit omvat het maken van koppen, paragrafen, lijsten, tabellen, enzovoort, waardoor de inhoud van de pagina logisch kan worden georganiseerd.
Tekstinhoud: HTML wordt gebruikt om tekst op webpagina’s weer te geven en te formatteren. Je kunt tekst opmaken met behulp van tags zoals <p> voor alinea’s, <h1> tot <h6> voor koppen van verschillende niveaus, <em> en <strong> voor tekstbenadrukking, enzovoort!
Afbeeldingen en multimedia: HTML stelt je in staat afbeeldingen, audio- en videobestanden in webpagina’s in te sluiten en weer te geven door middel van tags zoals <img>, <audio> en <video>.
Hyperlinks: Met HTML kun je hyperlinks maken naar andere webpagina’s of bronnen, zowel intern als extern, met behulp van de <a> tag.
Formulieren: HTML-formulieren worden gebruikt om interactieve elementen zoals tekstvakken, selectievakjes, radio-knoppen, knoppen en meer op webpagina’s weer te geven. Dit is cruciaal voor het verzamelen van gegevens van gebruikers.
Inhoudsopgave en lijsten: HTML maakt het mogelijk om gestructureerde lijsten te maken, zoals geordende lijsten (<ol>), ongeordende lijsten (<ul>) en definitielijsten (<dl>).
Semantische markup: HTML biedt semantische tags zoals <header>, <nav>, <article>, <footer>, enz., die de betekenis en structuur van de inhoud definiëren. Dit is belangrijk voor zoekmachine-optimalisatie en toegankelijkheid.
Metadata: Met HTML is ook het middel om metadata aan een webpagina toe voegen, zoals de paginatitel, beschrijving en trefwoorden, met behulp van tags zoals <title> en <meta>.
Versie HTML5
HTML5, oftewel HyperText Markup Language 5, is de nieuwste versie van de standaardtaal, voor het structureren en presenteren van websites. Verder heeft HTML5 bijgedragen aan een verbeterde internetervaring, door het leveren van nieuwe mogelijkheden.
Bezoek ook: Webbrowsers
Speciale code voor het creëren van ruimte
In HTML staat de code: voor “non-breaking space” (niet-afbreekbare spatie). Het is een speciaal soort spatiekarakter dat ervoor zorgt dat de webbrowser geen witruimte afbreekt op die specifieke locatie.
In tegenstelling tot gewone spaties, zal een niet-afbreekbare spatie voorkomen dat de tekst aan weerszijden ervan wordt gescheiden door een nieuwe regel of wordt afgebroken aan het einde van een regel.
Dit kan handig zijn in situaties waarin je wilt voorkomen dat tekstfragmenten worden gescheiden of afgebroken op een ongewenste manier, zoals bijvoorbeeld in initialen of tussen woorden die bij elkaar moeten blijven.
Veel keuze in diverse tags
Elke markering in de HTML-opmaaktaal wordt in het Engels een tag genoemd. De afgelopen jaren, is dan ook het aantal verschillende HTML-tags die te gebruiken zijn enorm uitgebreid. Om te voorkomen dat hierdoor interpretatie problemen ontstaan, heeft het World Wide Web Consortium (W3C) haar aanbevelingen opgesteld.
Dat betekent dat op deze officiële website exact staat vermeld, welke tags er geldig zijn en hoe ze geïnterpreteerd moeten worden.
World Wide Web Consortium (W3C) > https://w3.org
Elementen en Attributen
De broncode van een website in HTML bestaat uit elementen en attributen, die zijn bedoeld om de elementen te omschrijven (specificeren). Daarom moet er in veel gevallen bij een attribuut, ook een waarde worden aagegeven.
Elementen bestaan meestal uit tweetallen: een deel dat het element activeert en een deel dat de activering weer beëindigt. Zowel de activering (ook wel start-tag genoemd), als de beëindiging (eind-tag) beginnen met < en eindigen met >…
Opmaak in HTML
Opmaak in HTML wordt bereikt met behulp van HTML-tags, die instructies geven aan de webbrowser over hoe de inhoud van een webpagina moet worden weergegeven. Hier zijn enkele basisprincipes van Opmaak in HTML:
- Tekst opmaak: HTML biedt verschillende tags om tekst op te maken, zoals <strong> voor vetgedrukte tekst, <em> voor cursieve tekst, <u> voor onderstreepte tekst, <h1> tot <h6> voor koppen van verschillende niveaus, en <p> voor alinea’s…
HTML-Tabellen
Een HTML-tabel is een opmaakstructuur die wordt gebruikt om gegevens in een overzichtelijke indeling te presenteren op een webpagina. Een tabel bestaat uit een reeks rijen en kolommen met cellen, waarin de gegevens worden weergegeven.
Een tabel wordt gedefinieerd met behulp van HTML-code en kan worden opgemaakt met behulp van CSS-stijlen om de weergave van de tabel te veranderen. Een HTML-tabel bestaat uit verschillende elementen, waaronder de tabel, tr, th en td elementen…
HTML-Kleurcodes
Met HTML-Kleurcodes is het mogelijk, zelf allerlei kleuren toe te passen. Want het internet zou toch te saai zijn, als er voor tekst en allerlei andere elementen in een ontwerp, geen enkele kleur uitgekozen kon worden!
De gekozen kleuren op een website kunnen bezoekers aantrekken of afstoten. Door gebruik te maken van een goede kleuren combinatie, vergroot je de juiste indruk die een website maakt op haar bezoekers…
Hyperlinks
Hyperlinks (of kortweg links) worden in het Nederlands: verbindingen of (snel)koppelingen genoemd. Het is een computer- en internetterm dat duidt op een verwijzing (referentie) in de hypertekst (broncode).
Deze kan de gebruiker dan volgen, om naar een ander webadres te surfen. Een hyperlink is vaak een stukje tekst, maar kan ook een afbeelding of enig ander HTML-element zijn. Veel hypertekst, is te verdelen in onafhankelijk onderhouden “hyper-documenten”…
HTML-Editors
Het werken met HTML-Editors maakte mij zo enthousiast, dat ik snel van start ging met een webdesign cursus. Daarbij maakte ik o.a. handig gebruik van de HTML-Kit, om de basisbegrippen van HTML-codes te leren.
Omdat HTML voor het bouwen van websites, één van de meest gebruikte opmaaktalen is, kan ik je adviseren hier wat meer kennis over op te doen. Bovendien is het niet moeilijk en kan iedereen het in korte tijd leren…
| Meer webadressen over HTML | ||
| HTML School | Handleiding HTML | Webwijsheid |
| Wikibooks HTML | W3schools | Internet Academy |
| Programmeerplaats | Wikipedia HTML | Doubleweb |