Introductie tot HTML

Wat is HTML?

HTML (Hypertext Markup Language) is de basistaal voor het creëren van webpagina's. Het legt de fundering waarop webcontent wordt gebouwd en weergegeven in webbrowsers.

  • HTML structureert content op het web en definieert elementen zoals tekst, afbeeldingen, links en formulieren.
  • HTML wordt vaak gecombineerd met CSS (Cascading Style Sheets) en JavaScript om visueel aantrekkelijke en functionele websites te ontwikkelen.
  • HTML gebruikt "markup" om de structuur en presentatie van webcontent te bepalen.

Voorbeeld van een eenvoudig HTML-document


<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn Eerste Webpagina</title>
</head>
<body>
    <h1>Hallo, wereld!</h1>
    <p>Welkom bij de wereld van HTML.</p>
</body>
</html>

Het voorbeeld uitgelegd

  • De <!DOCTYPE html> declaration definieert het document als een HTML5-document.
  • Het <html> element is het hoofdelement van een HTML-pagina. Het omvat alle andere elementen en is daarom het enige bovenliggende element van de rest van de pagina.
  • In het <head> element staat informatie over de HTML-pagina zelf, zoals de titel en de tekenset. Deze informatie wordt niet direct op de pagina weergegeven, maar is belangrijk voor hoe de pagina wordt geïnterpreteerd door de browser.
  • Het <title> element bepaalt de titel van de HTML-pagina. Deze verschijnt bovenaan in de titelbalk van de browser of in de tab van de webpagina.
  • Het <body> element is de container voor alle zichtbare inhoud op de pagina, zoals koppen (headings), alinea’s (paragraphs), afbeeldingen, hyperlinks, tabellen, lijsten, enzovoort.
  • Het <h1> element beschrijft een grote kop (heading).
  • Het <p> element beschrijft een alinea (paragraph).

Probeer het voorbeeld hierboven zelf te typen in Visual Studio Code. Sla het bestand op als index.html en open het in je browser om te zien hoe de webpagina eruitziet!

Een Nieuw HTML-Document starten in Visual Studio Code

Stap 1: Visual Studio Code installeren en openen

Download: Als je Visual Studio Code nog niet hebt, kun je het downloaden en installeren via de officiële website.

Open de editor: Na installatie, open Visual Studio Code.

Stap 2: Maak een nieuwe bestandsmap

Bestandsmap aanmaken: Voordat je begint, is het handig om een aparte map aan te maken waarin je je projectbestanden kunt bewaren.

  • Windows: Ga naar de Verkenner op je computer.
  • MacOS: Ga naar Finder.
  • Maak een nieuwe map aan, bijvoorbeeld met de naam "MijnWebproject".

Stap 3: Open de bestandsmap in Visual Studio Code

Open de map:

  • Klik in Visual Studio Code op File > Open Folder... (op MacOS kan dit Open... zijn).
  • Navigeer naar de map die je zojuist hebt aangemaakt ("MijnWebproject") en selecteer deze.

Stap 4: Een Nieuw HTML-bestand Maken

Nieuw bestand:

  • Klik op het pictogram voor een nieuw bestand in de zijbalk (de Verkenner op Windows of Finder op MacOS) of druk op Ctrl + N (Windows) of Cmd + N (Mac).
  • Geef het bestand de naam index.html. Zorg ervoor dat je ".html" als extensie toevoegt, zodat Visual Studio Code het herkent als een HTML-bestand.

Stap 5: HTML-sjabloon toevoegen

HTML-sjabloon:

  • Typ in je nieuwe index.html bestand ! (uitroepteken) en druk op Enter. Visual Studio Code zal automatisch een basis-HTML-sjabloon voor je genereren.
  • Dit sjabloon bevat de standaard HTML5-opmaak, inclusief doctype, <head>, en <body> elementen.

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn Eerste Webpagina</title>
</head>
<body>
    <h1>Hallo, wereld!</h1>
    <p>Welkom bij de wereld van HTML.</p>
</body>
</html>

Stap 6: Bestand Opslaan

Opslaan:

  • Sla je bestand op door te klikken op File > Save, of gebruik de sneltoets Ctrl + S (Windows) of Cmd + S (Mac).

Stap 7: Het HTML-bestand Openen in je Browser

Open in browser:

  • Navigeer naar de map "MijnWebproject" waar je het index.html bestand hebt opgeslagen.
  • Dubbelklik op het bestand index.html om het te openen in je standaardwebbrowser.

Je zou nu je eerste eenvoudige webpagina moeten zien, zoals gedefinieerd door de HTML-code in Visual Studio Code.

Terug naar boven