Als eerste moeten we aangeven dat het om een webpagina gaat. Dit doe je onder andere ook door het tekstbestand op te slaan met de extensie .html
Maar om echt een website te bouwen, hebben we meer nodig!
Een website begint met de <html> openingstag en eindigt met de </html> sluitingstag, samen heten deze tags het html-element. Alles wat binnen deze twee tags geplaatst wordt is onderdeel van de website.
Naast het <html> element zijn er nog 2 andere elementen die over het algemeen in iedere website verwerkt worden:
- head-element
- body-element
Deze twee elementen worden ook wel containers genoemd, want binnen deze elementen kun je weer nieuwe elementen plaatsen zoals het paragraaf-element met de tags <p></p>.
De uiteindelijke basis opzet van een website ziet er dus als volgt uit:
<html>
<head>
</head>
<body>
</body>
</html>
Head-element
Het head-element bevat alle hoofdelementen van een website, de zogeheten metadata. Deze metadata zeggen iets over de data in het HTML document. Snap je hem nog? Het belangrijkste wat je moet onthouden is dat metadata zelf niet visueel zichtbaar is op de website. Het geeft alleen instructies aan de browser hoe de rest van de data in het HTML document weergegeven moet worden.
Het head-element bestaat uit een openingstag <head> en sluitingstag </head>.
Binnen het head-element kun je weer verschillende andere elementen plaatsen, zoals bijvoorbeeld:
<title> | geeft de titel van de webpagina weer in de browser tab, wanneer je de website opslaat in je favorieten en in de zoekresultaten van een zoekmachine. Het is dus erg belangrijk zo niet verplicht dat deze tag aanwezig is op je website!
<style> | wordt gebruikt om aan te geven hoe de elementen op een webpagina weergegeven moeten worden. Bijvoorbeeld welk lettertype gebruikt moet worden of welke kleur de achtergrond heeft. In plaats van de style-tag kun je hiervoor ook de link-tag naar een aparte CSS pagina gebruiken.
<link> | wanneer je geen style-tag gebruikt, maar wilt linken naar een aparte CSS pagina.
Bovenstaande elementen hebben allemaal een openings- en sluitingstag nodig.
Het head-element bestaat uit een openingstag <head> en sluitingstag </head>.
Binnen het head-element kun je weer verschillende andere elementen plaatsen, zoals bijvoorbeeld:
<title> | geeft de titel van de webpagina weer in de browser tab, wanneer je de website opslaat in je favorieten en in de zoekresultaten van een zoekmachine. Het is dus erg belangrijk zo niet verplicht dat deze tag aanwezig is op je website!
<style> | wordt gebruikt om aan te geven hoe de elementen op een webpagina weergegeven moeten worden. Bijvoorbeeld welk lettertype gebruikt moet worden of welke kleur de achtergrond heeft. In plaats van de style-tag kun je hiervoor ook de link-tag naar een aparte CSS pagina gebruiken.
<link> | wanneer je geen style-tag gebruikt, maar wilt linken naar een aparte CSS pagina.
Bovenstaande elementen hebben allemaal een openings- en sluitingstag nodig.
Body-element
De elementen die je in het head-element verwerkt zijn niet visueel zichtbaar op je website, alles wat je in het body-element vermeld hebt wel!
Het body-element bestaat uit alle content van de website, zoals tekst, foto's, video's, hyperlinks, tabellen, formulieren etc.
Het body-element bestaat uit een openingstag <body> en een sluitingstag </body>.
Welkom op mijn eerste blog.
Sla het document weer op als mijneersteblog.html en open de website in je browser.
Visueel gezien is er aan de voorkant dus niets verandert, maar wel aan de achterkant.
Test het uit!
Kopieer de basis opzet van een webpagina in je texteditor. Plaats de volgende tekst tussen de tags in het body element:Welkom op mijn eerste blog.
Sla het document weer op als mijneersteblog.html en open de website in je browser.
Visueel gezien is er aan de voorkant dus niets verandert, maar wel aan de achterkant.
Geen opmerkingen:
Een reactie posten