Een HTML-bestand is gewoon een tekstbestand dat is opgeslagen met een .html of .htm extensie.
Aan de slag
In deze tutorial leer je hoe gemakkelijk het is om een HTML-document of een webpagina te maken. Om te beginnen met het coderen van HTML hebt u slechts twee dingen nodig: een eenvoudige teksteditor en een webbrowser.
Wel, laten we beginnen met het maken van uw eerste HTML-pagina.
Het maken van uw eerste HTML-document
Laten we de volgende stappen doorlopen. Aan het eind van deze tutorial hebt u een HTML-bestand gemaakt dat het bericht “Hallo wereld” in uw webbrowser weergeeft.
Stap 1: Het HTML-bestand maken
Open de platte-teksteditor van uw computer en maak een nieuw bestand.
Tip: Wij raden u aan Notepad (op Windows), TextEdit (op Mac) of een andere eenvoudige teksteditor te gebruiken om dit te doen; gebruik geen Word of WordPad! Zodra u de basisprincipes begrijpt, kunt u overschakelen op meer geavanceerde tools zoals Adobe Dreamweaver.
Stap 2: Typ wat HTML code
Start met een leeg venster en typ de volgende code:
Voorbeeld
Probeer deze code ”
<!DOCTYPE html><html lang="en"><head> <title>A simple HTML document</title></head><body> <p>Hello World!<p></body></html>Stap 3: Het bestand opslaan
Nu het bestand op uw bureaublad opslaan als “myfirstpage.html “.
Opmerking: Het is belangrijk dat de extensie .html wordt opgegeven – sommige teksteditors, zoals Notepad, slaan het anders automatisch op als .txt.
Om het bestand in een browser te openen. Navigeer naar uw bestand en dubbelklik erop. Het wordt geopend in uw standaard webbrowser. Als dat niet het geval is, opent u uw browser en sleept u het bestand erheen.
Uitleg van de code
U denkt misschien wat die code allemaal inhield.
- De eerste regel
<!DOCTYPE html>is de documenttypeverklaring. Het instrueert de webbrowser dat dit document een HTML5-document is. Het is hoofdletterongevoelig. - Het
<head>element is een container voor de tags die informatie geeft over het document, bijvoorbeeld<title>tag definieert de titel van het document. - Het
<body>element bevat de eigenlijke inhoud van het document (paragrafen, links, afbeeldingen, tabellen, enzovoort) die in de webbrowser wordt weergegeven en aan de gebruiker wordt getoond.
Je zult in de komende hoofdstukken meer in detail over de verschillende HTML elementen leren. Richt je voorlopig alleen op de basisstructuur van het HTML-document.
Note: Een DOCTYPE-declaratie verschijnt bovenaan een webpagina vóór alle andere elementen; de doctype-declaratie zelf is echter geen HTML-tag. Elk HTML-document heeft een documenttypeverklaring nodig om ervoor te zorgen dat uw pagina’s correct worden weergegeven.
Tip: De <html><head>, en <body> tags vormen het basisskelet van elke webpagina. Inhoud binnen de <head> en </head> zijn onzichtbaar voor gebruikers met één uitzondering: de tekst tussen <title> en </title> tags die verschijnt als de titel op een browsertabblad.
HTML Tags en Elementen
HTML wordt geschreven in de vorm van HTML-elementen die bestaan uit markup tags. Deze markup tags zijn het fundamentele kenmerk van HTML. Elke markup-tag bestaat uit een trefwoord, omgeven door hoekhaken, zoals <html><head><body><title><p>, enzovoort.
HTML-tags komen normaal gesproken in paren, zoals <html> en </html>. De eerste tag in een paar wordt vaak de openingstag (of starttag) genoemd, en de tweede tag de closingstag (of eindtag).
Een openingstag en een closingstag zijn identiek, met uitzondering van een schuine streep (/) na de openingshoekhaak van de closingstag, om de browser aan te geven dat de opdracht is voltooid.
Tussen de start- en eindtags kun je geschikte inhoud plaatsen. Een paragraaf, bijvoorbeeld, die wordt weergegeven door het p element, zou worden geschreven als:
Voorbeeld
Probeer deze code ”
<p>This is a paragraph.</p><!-- Paragraph with nested element --><p> This is <b>another</b> paragraph.</p>Je zult in het komende hoofdstuk meer leren over de verschillende HTML-elementen.