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!
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!
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). Metadata wordt niet weergegeven.
<title> = Deze titel staat in het tabblad van de 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.
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:
Nog sneller is om het HTML bestand in de browser te openen en dan te testen.
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.
In het artikel “De beste HTML en CSS boeken voor beginners” staan de beste boeken om mee aan de slag te gaan. 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.
Hey Bas, gelukt hoor! Mijn eerste webpagina is een feit.
Ik heb ‘m geopend door te dubbelklikken op het html-bestand waar ik ‘m opgeslagen had, dus niet door het gehele pad te typen in de browser. Gemak dient ons allen ;).
Hoi Albert,
Top dat het gelukt is! Als het zo staat ingesteld op je computer dat een HTML bestand automatisch opent in een browser, dan kan je het ook zo doen inderdaad.
Gr. Bas