Dutch (Nederlands) translation by Sibrand Hoekstra (you can also view the original English article)
Welkom bij alweer de derde les van onze Web Design voor Kinderen serie.
Vandaag leren we hoe we de structuur van onze website bepalen met HTML Met de structuur kunnen we de website klaar maken voor alle content (de inhoud zoals tekst en plaatjes) die we gaan toevoegen in de volgende les.
Als we het proces van een website bouwen vergelijken met het bouwen van en gebouw (zoals een Tuts+ Town gebouw!) dan zou de HTML een beetje zoals het fundament zijn, of bijvoorbeeld de muren en verdiepingen; het is de basis waar alles bovenop of omheen gebouwd wordt.
Belangrijk! De bestanden die we gaan maken in deze les kun je hier downloaden.
Wat is HTML precies?
We hebben het veel over HTML gehad al, maar we hebben nog niet uit gelegd wat het nou precies is. Behalve misschien dat het een "supercoole geheime taal" is. Het web (internet) gaat allemaal over taal en communicatie, en HTML is een belangrijk onderdeel van deze communicatie.
HTML staat voor HyperText Markup Language. Het is, zogezegd, de taal waarmee je de inhoud van een website kunt markeren zodat de browser begrijpt wat 'ie aan de bezoeker moet laten zien. Het geeft structuur aan een gewoon tekstbestand dat de browser anders niet zou begrijpen.
We kunnen niet zomaar een zin of paragraaf (alinea) tekst typen en dan hopen dat de browser snapt dat het een paragraaf is. Voor de browser zijn paragrafen eigenlijk alleen maar een rij letters! De paragraaf tekst moet in de HTML opmaak staan, en wel het <p> element (telkens als we een stukje code laten zien, zie je het in deze kleur, zoals de <p> hiervoor).
Elementen
HTML is opgebouwd uit elementen die elk hun eigen betekenis hebben, zoals bijvoorbeeld het paragraaf-element die we hierboven beschreven. Ieder element heeft een opening (het begin) en een sluiting (het einde), die we tags noemen. De inhoud van elk element staat tussen de opening- en sluitingstag.
De openings- en sluitings tags voor elk element worden geschreven tussen 'rechte' haken (zoals deze: < >). Let op dat een sluitingstag ook een schuine streep heeft (zoals dit: < / > ).
De structuur plannen
In de vorige les hebben we ons website ontwerp getekend, nu is de tijd om de structuur van de website voor te bereiden.
We beginnen met een aantal notities op ons ontwerp zodat we een beter idee krijgen hoe we het bouwen het beste aan kunnen pakken.
Binnen de <body> tag van ons HTML bestand hebben we een aantal primaire elementen: een <header>, een <main> gedeelte en een <footer>.
De documenten voorbereiden
We hebben in de vorige les ook nog even besproken hoe we de bestanden moeten organiseren, en dan gaan we nu eindelijk beginnen om deze kennis toe te passen!
- Als eerste maak je op je computer een map met de naam "tutsfolder" ("folder" is Engels voor "map").
- Nu is het moment om die tekst editor te openen, die inmiddels toch al een tijdje zit te wachten tot er fantastische dingen gaan gebeuren.
- Maak een nieuw document met deze editor (normaal doe je dat via het menu Bestand > Nieuw Bestand..) en sla het op als index.html
Onthoud: "index" is de naam van het bestand, en ".html" is de extensie, waarmee we het bestandstype kunnen herkennen.
Een website kan gemakkelijk uit veel, heel heel veel pagina's bestaan. De hoofdpagina noemen we dan altijd "index.html", om aan te geven "Hee, hier begint het allemaal!"
Nou, laten we nu 's wat HTML gaan schrijven.
Een structuur bouwen
Nu gaan we onze structuur opzetten. Nogmaals, laten we het bouwen van deze website bekijken alsof we een gebouw gaan maken. We moeten het 'fundament' goed op zijn plek krijgen.
Het allereerste stuk HTML wat we schrijven is <!DOCTYPE html>, zodat de browser weet 'Hee dit is een HTML document!"
1 |
<!DOCTYPE html>
|
Direct daaronder hebben we het <html> element nodig
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
</html>
|
De hele website wordt binnen deze html tag genest.
Wacht. Nesten?
"Zoals een vogelnestje bedoel je?" Nou, misschien meer als geneste poppetjes, misschien heb je wel eens van die Russische poppetjes gehoord, die je dan van groot naar klein in elkaar kan zetten. Nesten is wat er gebeurd als we een element in een ander element zetten.
Het stukje code hieronder toont een paragraaf element, genest in het body element. Het zit immers tussen de opening- en sluitingstags van de body.
1 |
<body>
|
2 |
<p>This paragraph element is nested inside the body element.</p> |
3 |
</body>
|
En om aan te geven dat een element in een ander element genest is, zetten we het een stukje naar rechts. Zoals hier:
Okee, genoeg gekletst, aan de slag.
De Head
Nu binnen in dit html element willen we een head element nesten.
In de head stoppen we de title (titel) van de pagina, die dan in de titelbalk van je browser (tab) te zien zal zijn. Heel veel nesten!
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
</html>
|
Alles wat we in de head van een HTML document stoppen zie je niet verschijnen op de pagina zelf. Maar het is allemaal nuttige info voor zoekmachines zoals Google, en ook om je browser info over de pagina te geven.
En zometeen maken we ook een bestand waarmee we de stijlen (kleuren en letters enzo) van de pagina kunnen bepalen, en die linken we dan in de head van deze pagina. Hoe dat werkt zien we straks. Het lijkt dus wel wat op een 'kijkje achter de schermen' van onze website, waar allemaal dingen gebeuren die de bezoekers van onze website (normaal gesproken) niet te zien krijgen.
De Body
Alle onderdelen van onze website die wél te zien moeten zijn, nesten we in de body, en dit is waar de pret pas écht begint!
De Kop (Header)
Het header element is niet hetzelfde als het head element waar we het zonet over hadden. De header zit in de body en bevat meestal alles wat we in de kop (header) van onze pagina zien.
Het eerste wat er bovenin onze website te zien is, is de kop met een stukje tekst en een plaatje van Tuts+ Town.
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
<body>
|
6 |
<header></header>
|
7 |
</body>
|
8 |
</html>
|
Voor nu zetten we alleen een header tag in de pagina, zodat we later de precieze inhoud er in kunnen zetten.
Het hoofd (main) gedeelte
Het grootste deel van de Tuts+ Town website bevat de meest belangrijke informatie. De lijst van bedrijven van de stad is waar onze website hoofdzakelijk over gaat, dus al deze inhoud gaat in een element genaamd main zitten.
We behandelen de kleinere containers (zoals de drie verschillende groepen: slapen, eten en winkelen) binnen deze grotere main container in de volgende les, wanneer we de echte inhoud van de website toevoegen.
De voettekst (footer)
De footer is het stuk helemaal onderaan de website. Vaak zien we een paar links hieronder, zoals een link naar onze Facebook en Twitter pagina's, of een klein stukje tekst over wie deze mooie website gemaakt heeft. (Ja, jij!)
We maken een zin waarin we zeggen dat we de trotse eigenaar zijn van deze website in het footer element.
1 |
<footer> </footer> |
Onthouden hè: we maken nu allemaal elementen (header, main, footer) die genest zijn in de body.
Laatste terugblik
Laten we even terugkijken naar de HTML structuur die we net gebouwd hebben.
Het is makkelijk om sluittags te vergeten, waardoor onze website fouten kan opleveren. Misschien begrijpt de browser nu niet wat je bedoelt en zie je iets heel anders op je scherm dan je had verwacht! We moeten goed kijken dat elke tag die we gemaakt hebben, ook een sluittag heeft.
Alle tags weer gesloten, ziet er goed uit zo! Nou, tijd om echte content toe te voegen aan de structuur die we net gemaakt hebben.
Notities maken
In HTML kunnen we superhandige notities zetten. Deze notities zie je niet terug op de website, maar zijn enorm handig voor als we de website nu niet af krijgen en later verder moeten. Of wanneer we met meer jongens en meisjes aan één website werken.
1 |
<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->
|
Het HTML bestand voor deze les (die je hier kunt downloaden) bevat een aantal van deze notities die ons helpen de hele boel beter te snappen.
Goed gedaan!
In deze les hebben we geleerd wat HTML is, wat elementen zijn, hoe je die elementen kun nesten, én hoe je een simpele basisstructuur HTML opzet met een aantal veelgebruikte 'container' elementen.
In de volgende les stoppen we de afbeeldingen en tekst van onze website in onze fonkelnieuwe stuctuur.
Tot de volgende keer!
