Hello World! HTML: Maak binnen een kwartier een webpagina!

Met dit Hello World! voorbeeld in HTML maak je binnen een kwartier je eigen webpagina, hoe gaaf is dat? Er zijn maar 4 korte stappen voor nodig. Ook geven we nog tips hoe je meer over HTML kan leren. Lees lekker verder!

Ja, ik wil de beste HTML boeken zien!

Stap 1: Code editor of kladblok gebruiken

We raden aan om een code editor te gebruiken als je meer met HTML gaat doen, maar voor dit kleine Hello World! voorbeeld in HTML zou je ook een kladblok (Notepad) kunnen gebruiken. TextEdit is de standaard teksteditor voor macOS.

In dit voorbeeld maken we gebruik van de code editor Notepad++. Atom is het beste alternatief voor macOS. Download Notepad++ als je Windows hebt en Atom als je macOS hebt.

Open eerst de code editor. Daarna maak je een nieuw bestand als dit nog niet automatisch is gedaan, Ctrl + N of Bestand > Nieuw in Notepad++, en dan ben je klaar om te beginnen!

Nieuw bestand Notepad++

Stap 2: HTML code kopiëren en plakken met Hello World! voorbeeld

Kopieer (Ctrl + C) de onderstaande HTML code en plak (Ctrl + V) het in je nieuwe aangemaakte bestand:

<!DOCTYPE html>
<html>
   <head>
      <title>Hello World! in HTML voorbeeld</title>
   </head>
   <body>
      <p>Hello World!</p>
   </body>
</html>

Code uitleg

<!DOCTYPE html> = Informatie voor de browser wat voor soort document het is, in dit geval is het een HTML5 document. HTML5 is op het moment van schrijven de nieuwste HTML versie.

<html> = Geeft het start- en eindpunt aan van een HTML document. Tussen de <html> en </html> tag staan alle HTML elementen.

<head> = Bevat metadata (Data over het HTML document) en wordt niet weergeven in de browser.

<title> = Deze titel staat in het tabblad van de browser:

Title HTML tabblad browser

<body> = Alle HTML elementen tussen de <body> en </body> tag zijn zichtbaar op de webpagina.

<p> = Staat voor “paragraph” en zorgt voor een paragraaf in een tekst.

HTML code bevat de bouwstenen voor je website en geeft instructies aan de browser over hoe de website eruit moet zien. Elke website is opgebouwd uit verschillende onderdelen, zoals een header, tussenkopjes, paragrafen, afbeeldingen en een footer. Deze onderdelen worden opgesteld in een HTML document door middel van HTML elementen.

Een HTML element bevat meestal een openings- en een sluitingstag, zoals <p> (Openingstag) en </p> (Sluitingstag). De meeste HTML elementen hebben een openings- en een sluitingstag, maar niet allemaal, zoals de <img> tag.

Dit is een spoedcursusje HTML, maar er is nog veel meer. In “Leer meer over HTML” lees je hoe je dieper in HTML kan duiken.

Stap 3: Opslaan als HTML bestand

Sla het bestand op als HTML bestand, Ctrl + S of Bestand > Opslaan in Notepad++, en ga naar de volgende stap om de webpagina te testen in de browser.

Bestand opslaan Notepad++
Klik op de afbeelding om het te vergroten

Als je het niet opslaat als HTML bestand, dan herkent de browser het bestand niet en kan de webpagina niet worden getoond. Een bestand is een HTML bestand door de .html extensie.

Stap 4: De webpagina testen in de browser

Typ het pad waar je het HTML bestand hebt opgeslagen in de browser en kijk of je Hello World! ziet verschijnen op je webpagina:

Webpagina test browser (Google Chrome)

Leer meer over HTML

Heb je de smaak te pakken door dit Hello World! voorbeeld in HTML en wil je meer over HTML leren? Dan is het artikel “HTML leren” heel interessant om te lezen. De artikelen “CSS leren” en “JavaScript leren” sluiten hier ook op aan en je leert een eenvoudige website maken met HTML, CSS en JavaScript.

Op Bol.com staan de beste HTML boeken en het is erg leerzaam om daarmee dieper in HTML te duiken. Met de kennis die je in de boeken opdoet, kan je gave websites gaan maken.

Hopelijk ga je lekker aan de slag!

Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.

Plaats een reactie