Leerdoel:
Na deze uitleg ken je de basisstructuur van HTML, kun je deze herkennen in een HTML-bestand en kun je de titel aanpassen van een webpagina.
HTML werkt volgens een bepaalde basisstructuur. Bij het schrijven van HTML-code maak je gebruik van elementen. Elementen worden altijd weergegeven tussen schuine haken: < >. Bijna alle elementen bestaan uit een openingselement en een sluitelement. Een openingselement is bijvoorbeeld <h1> en het bijbehorende sluitelement is dan </h1>. Het sluitelement bevat altijd als eerste teken een slash (/). Informatie over het element, bijvoorbeeld kleur of grootte, worden altijd opgenomen in het openingselement, bijvoorbeeld <h1 style=”color:red;”>. In deze module ga je kennismaken met een groot aantal elementen. Voor een goede werking van je website is het erg belangrijk om elementen altijd zorgvuldig te openen én te sluiten. Wanneer je een element vergeet af te sluiten, kan het zomaar zijn dat je website er anders gaat uitzien dan jij bedoeld had.
In figuur 2 zie je de hoofd-basisstructuur van een HTML-file. In de eerste regel van een HTML-file geef je aan welke versie van HTML je gebruikt. De laatste versie is versie 5; deze versie gebruiken wij ook. Je geeft aan dat je versie 5 gebruikt door <!DOCTYPE html>. Hier zie je direct een element wat alleen maar een openingselement kent; dit element hoef je dus niet af te sluiten.
De volgende stap is om het HTML-document te openen. Dit doe je met het element <html>. Dit element moet wel afgesloten worden. Je kunt jezelf het beste aanwennen om direct na het openen van een element, het element ook weer af te sluiten. In dit geval doe je dat met </html> helemaal aan het einde van het document.
Direct na het openen van het HTML-document, maak je het head-gedeelte aan. Dit doe je met de elementen <head> en </head>. In het head-gedeelte komt informatie te staan die van toepassing is op het HTML document, maar die niet wordt weergegeven op de webpagina zelf. Denk bijvoorbeeld aan de titel van een webpagina (zie figuur 3) of bepaalde stijlvoorschriften die voor de hele webpagina van toepassing zijn (bijvoorbeeld kleur van de tekst).
Na het head-gedeelte maak je het body-gedeelte aan. Dit doe je met de elementen <body> en </body>. Ook hier is het verstandig om direct na het openen van het element, het element weer af te sluiten. In het body-gedeelte komt de inhoud van de webpagina te staan, oftewel alles wat je op je webpagina ziet.
Het is in HTML een goed gebruik om structuren weer te geven door gebruik te maken van witregels en het inspringen van tekst. Door deze structuren blijft je code overzichtelijk en kun je makkelijker fouten opsporen en eventueel later de code aanpassen. Om bijvoorbeeld twee tekstblokken van elkaar te scheiden, kun je gebruik maken van witregels. Als iets ergens een onderdeel van is, maak je gebruik van het inspringen van tekst. In figuur 2 zie je dat de head en body onderdeel zijn van html. Voor de uiteindelijke weergave in de webbrowser maakt het gebruik van witregels en het inspringen van tekst geen verschil.
Figuur 2: Hoofd-basisstructuur van een HTML-file
Figuur 3: Weergave van de titel van een webpagina
Opdracht 3:
Bekijk in jouw project de file index.html en kijk of je alle elementen van de hoofdstructuur van HTML terug kunt vinden.
Titel toevoegen aan webpagina
Met HTML kun je een titel toevoegen aan je webpagina, zie figuur 3. Een titel voeg je toe in de head van het HTML-document; de titel geldt voor de hele webpagina maar wordt niet weergegeven op de webpagina zelf. Je gebruikt voor de titel het element <title>. Het is belangrijk om het element af te sluiten; hiervoor gebruik je </title>.
Opdracht 4:
Pas de titel van jouw webpagina aan door de tekst in het head-gedeelte tussen <title> en </title> aan te passen. Laad jouw website in een nieuw tabblad en kijk of de titel is aangepast.
Je ziet dat je voor het opvragen van jouw homepage alleen maar het adres van jouw website hoeft in te typen. Je hoeft niet de filename index.html toe te voegen. Als je het adres van een website intypt, zal de browser altijd op zoek gaan naar een file met als naam index. Daarom is jouw homepage / webpagina opgeslagen met de naam index.html.