HTML (HyperText Markup Language) is de standaard markup-taal voor het maken van webpagina’s en webapplicaties. Met HTML definieer je de structuur van webpagina’s door gebruik te maken van verschillende tags. Leer de basis van HTML met deze stap-voor-stap handleiding. Ideaal voor beginners.
De Basis Structuur van een HTML Pagina
Een typische HTML-pagina heeft een “head” en “body”. In de “head” plaats je de meta-informatie zoals de titel van de pagina, de link naar het CSS-bestand, etc. In de “body” plaats je de zichtbare inhoud van de pagina, zoals tekst, afbeeldingen, links, tabellen, etc.
HTML Tags
HTML tags definiëren het type inhoud in een webpagina. Tags bestaan meestal uit een openings- en sluitingstag. Bijvoorbeeld, <h1> is een openingstag en </h1> is een sluitingstag. Alles wat tussen deze tags staat, wordt behandeld als een heading van niveau 1.
Bronnen:
Let op: In WordPress editor kun je direct de HTML-code gebruiken in de ‘Tekst’ modus van de editor, terwijl je de visuele styling kunt zien in de ‘Visueel’ modus van de editor. Dit kan handig zijn als je wilt schakelen tussen het zien van de HTML en het zien van hoe de inhoud eruit zal zien voor een bezoeker.
Lijsten in HTML
In HTML kun je twee soorten lijsten maken: geordend (genummerd) en ongeordend (opsommingstekens). Voor een ongeordende lijst gebruik je de <ul> tag en voor een geordende lijst de <ol> tag. Binnen deze tags gebruik je de <li> tag om de lijstelementen te definiëren.
Hyperlinks in HTML
Hyperlinks, of simpelweg links, worden gemaakt met de <a> tag. Je gebruikt het href attribuut om de URL van de pagina aan te geven waarnaar je wilt linken.
Afbeeldingen in HTML
Afbeeldingen worden toegevoegd aan HTML-documenten met behulp van de <img> tag. Deze tag heeft twee verplichte attributen: src (definieert het pad naar de afbeelding) en alt (zorgt voor alternatieve tekst als de afbeelding niet kan worden weergegeven).
Bronnen:
Let op: WordPress heeft ook ingebouwde functies die het gemakkelijk maken om afbeeldingen toe te voegen, links te maken en lijsten te maken in de visuele editor. Je kunt echter altijd deze HTML-basisprincipes gebruiken om meer controle te hebben over je inhoud.
Tabellen in HTML
Tabellen in HTML kunnen worden gemaakt met de <table> tag. Binnen deze tag gebruik je de <tr> tag om een rij te maken en de <td> tag om een cel in de rij te maken. Het <th> tag wordt gebruikt om een kopcel te maken die helpt bij het labelen van de kolom of rij.
HTML Formulieren
Formulieren in HTML worden gemaakt met de <form> tag. Binnen dit tag kun je verschillende input-elementen toevoegen zoals tekstvelden (<input type="text">), wachtwoordvelden (<input type="password">), selectievakjes (<input type="checkbox">), radioknoppen (<input type="radio">), enz.
Integratie van CSS en JavaScript in HTML
CSS (Cascading Style Sheets) en JavaScript kunnen worden geïntegreerd in een HTML-document om respectievelijk de presentatielaag en functionaliteit te verbeteren. CSS kan worden geïntegreerd met behulp van de <style> tag in de <head> of via een extern bestand dat wordt gelinkt met de <link> tag. JavaScript kan worden geïntegreerd met de <script> tag of via een extern bestand dat wordt gelinkt met de <script> tag.
Bronnen:
Opmerking: WordPress biedt verschillende plug-ins en thema-opties die CSS- en JavaScript-integratie gemakkelijker maken, maar het begrijpen van deze basisprincipes kan nuttig zijn voor aangepaste aanpassingen en probleemoplossing.
HTML5 en Semantische Elementen
HTML5 introduceerde een aantal nieuwe semantische elementen die zorgen voor een betere documentstructuur en -interpretatie. Enkele van deze semantische tags zijn <header>, <footer>, <nav>, <article>, <section>, <aside>, enz.
Responsief ontwerp met HTML en CSS
Responsief ontwerp is de praktijk van het bouwen van webpagina’s zodat ze er goed uitzien en functioneren op alle apparaten, van desktops tot mobiele telefoons. Dit wordt vaak bereikt door het gebruik van mediaquery’s in CSS, die verschillende stijlen toepassen op basis van de eigenschappen van het apparaat, zoals de schermgrootte.
HTML Commentaar
HTML-commentaar kan worden toegevoegd met de <!-- --> tags. Alles tussen deze tags wordt genegeerd door de browser, wat nuttig kan zijn voor het toevoegen van opmerkingen of tijdelijk uitschakelen van stukken code.
Bronnen:
Noot: WordPress-thema’s zijn meestal al ontworpen om responsief te zijn, maar het kennen van de basisprincipes van responsief webontwerp kan nuttig zijn als je extra aanpassingen wilt doen. Vergeet ook niet dat goede SEO-praktijken vereisen dat je pagina’s goed functioneren en goed worden weergegeven op alle soorten apparaten.
HTML Iframes
Een iframe of inline frame is een HTML-element dat het mogelijk maakt om een ander HTML-document in een bestaand HTML-document te embedden. Dit wordt vaak gebruikt voor het inbedden van content zoals YouTube-video’s, Google Maps, etc.
HTML Meta Tags
Meta tags zijn een soort HTML-tag die informatie over het HTML-document zelf bevat. Ze worden gebruikt voor diverse doeleinden, zoals het definiëren van de karaktercodering (charset), het verstrekken van meta-informatie voor zoekmachines (meta description, keywords), het definiëren van viewport-instellingen voor responsief design, enz.
HTML en Toegankelijkheid
Toegankelijkheid in HTML is het ontwerpen en ontwikkelen van webpagina’s zodat mensen met beperkingen ze ook kunnen gebruiken. Dit omvat technieken zoals het gebruik van voldoende contrast voor tekst, het verstrekken van alt-tekst voor afbeeldingen, het correct gebruiken van koppen voor de structuur, het gebruik van semantische HTML, etc.
Bronnen:
Noot: In WordPress zijn er verschillende plugins beschikbaar die helpen bij het beheren van iframe-content en het verbeteren van de toegankelijkheid van je website. Maar het is altijd goed om deze basisconcepten te kennen, zodat je begrijpt wat er op de achtergrond gebeurt.
