HTML eerste stappen - HTML-handleiding
HTML is een vrij eenvoudige taal. Het wordt onderwezen aan studenten van zowel technische als niet-technische opleidingen aan universiteiten, en tegenwoordig wordt het waarschijnlijk ook al op de meeste scholen behandeld. Alles is vrij eenvoudig, omdat HTML zelfs geen programmeertaal is.
HTML is een opmaakt taal: wat we schrijven, wordt letterlijk op het scherm weergegeven. Geen algoritmes, geen schema’s, geen lussen, geen variabelen of klassen — alleen tekst, tekst en nog eens tekst. In HTML gebruiken we slechts tags, en zelfs daarvan zijn er niet zoveel. De tags die vaak worden gebruikt, zijn waarschijnlijk nog geen dertig. Dus als je wilt beginnen met iets dat verwant is aan programmeertalen, dan is HTML een uitstekende keuze.
Om te beginnen met het maken van HTML-documenten hebben we alleen een teksteditor nodig (zoals Kladblok, dat al aanwezig is in Windows of Linux) en een browser om het document te bekijken (Firefox, Opera, Chrome of Internet Explorer). Als teksteditor op Windows gebruik ik persoonlijk Notepad++.
Ik denk dat de paar zinnen hierboven voldoende voorbereiding zijn — meer hebben we niet nodig. Laten we dus beginnen!
Mijn eerste HTML-document
HTML-documenten zijn gewone tekstbestanden, net zoals bijvoorbeeld readme.txt-bestanden of andere bestanden met de extensie .txt.
Opmerking:
Wat is een extensie?
Bestandsextensies zijn typisch voor besturingssystemen met een grafische interface. Hun belangrijkste doel is om het systeem te vertellen welk programma moet worden gebruikt om een bepaald bestand te openen. We zullen het hier niet hebben over alle mogelijke extensies voor uitvoerbare bestanden (zoals .COM, .EXE, .BAT, .CMD, .VBS), want zelfs het besturingssysteem zelf gebruikt een soort “interpreter” die dergelijke bestanden uitvoert.
Voor HTML-documenten gebruiken we de extensies .html en .htm.
Het is tijd om een document aan te maken. Ga naar de gewenste map en klik met de rechtermuisknop op een lege plek:
Kies om een nieuw tekstbestand aan te maken. Noem het bestand index.html; je kunt ook de extensie .htm gebruiken.
Het kan zijn dat de instellingen van je systeem het niet toestaan om de extensie direct aan te passen, en dat het bestand wordt opgeslagen als index.txt. In dat geval moet je:
- Het bestand index.txt openen met Kladblok.
- In het menu Bestand → Opslaan als kiezen.
- In het geopende venster kun je nu de extensie van het bestand zelf typen.
Nu het bestand index.html is aangemaakt, openen we het in Kladblok en beginnen we onze HTML-markup te schrijven.
HTML-markup wordt gemaakt met behulp van tags. Tags hebben de volgende vorm:
<tag>Enige tekst</tag>
De eerste tag is de openende tag — een woord tussen kleiner-dan en groter-dan tekens. Deze tekens worden niet uitgesproken; we zeggen gewoon “de tag tag”.
Laten we beginnen met de eenvoudigste tag: <html></html>. Dit is de belangrijkste tag: een HTML-document begint ermee en eindigt er ook mee.
<html> </html>
Je kunt tags op Ă©Ă©n regel schrijven, maar het is overzichtelijker om ze onder elkaar te plaatsen, netjes uitgelijnd. In dat geval markeert Notepad++ de tags automatisch met kleuren.
Daarna plaatsen we binnen de <html>-tag de tag <body></body>. “Body” betekent letterlijk “lichaam” — dit is het deel van het document dat zichtbaar is in de browser. O ja, de browser! Laten we de inhoud van index.html wijzigen en het bestand opslaan.
<html> <body> </body> </html>
Let op hoe ik de <body>-tag twee spaties heb laten inspringen van de <html>-tag. Dit maakt de code veel beter leesbaar. Laten we het bestand opslaan en openen in de browser.
Er verschijnt nu een leeg scherm — en dat is precies goed, want we hebben nog geen tekst toegevoegd.
Laten we wat tekst toevoegen, direct tussen de <body>-tags:
<html>
<body>
HTML mijn eerste stappen
</body>
</html>
Sla het bestand op en vernieuw de pagina in de browser. Nu verschijnt de tekst “HTML mijn eerste stappen”. Dat komt omdat we de tekst binnen de <body>-tag hebben geplaatst — niet erboven of eronder, maar precies erin.
Je hebt waarschijnlijk gemerkt dat in de titelbalk van de browser alleen “Mozilla Firefox” staat — onze pagina heeft dus nog geen titel. Laten we dat verbeteren door een kop toe te voegen.
We voegen de titel toe binnen een extra tag: <head></head>. De <head>-tag staat boven de <body>-tag:
<html>
<head>
</head>
<body>
HTML mijn eerste stappen
</body>
</html>
Als je het bestand nu opslaat en de pagina vernieuwt, zie je nog steeds geen verschil. Binnen de <head>-tag moeten we namelijk een <title>-tag toevoegen, die verantwoordelijk is voor de titel van het document:
<html>
<head>
<title>HTML eerste stappen drupalbook.org</title>
</head>
<body>
HTML mijn eerste stappen
</body>
</html>
Sla het bestand opnieuw op, vernieuw de browserpagina, en voilà — onze HTML-pagina heeft nu een titel!
Ik denk dat dit genoeg is voor een inleidende les. In de volgende lessen zullen we nog veel meer ontdekken.