Categorie├źn
Webdesign

Basis Html voor een webpagina

Basis Html voor een webpagina

Als je zelf de Html-code voor een webpagina wilt schrijven, zijn er een aantal dingen waar je rekening mee moet houden. De juiste volgorde van de Html-code is o.a. belangrijk, maar ook de opbouw van de Html-code heeft aandacht nodig. Hieronder de basis Html-code voor een webpagina die we later verder uitbreiden en toelichten.

<!DOCTYPE html>
<html lang="nl">
<head>
<title>De titel van de pagina</title>
<meta charset="UTF-8">
<meta name="description" content="Tekst">
<meta name="keywords" content="Tekst">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>Dit is een H3 koptekst</h3>
<p>Dit is een paragraaf met tekst.</p>
</body>
</html>

Hierboven zie je de basis html-code die ik altijd gebruik voor een nieuwe webpagina, als je deze webpagina bekijkt in een webbrowser zal alleen zichtbaar zijn wat tussen de <body></body> staat. Maar wat betekenen dan de overige Html-codes? Ik zal dat hieronder proberen uit te leggen.

<!DOCTYPE HTML>

Deze code geeft aan dat het een Html5 document is, Html5 is de laatste versie op dit moment. Het is informatie voor de browser betreffende het document type.

<html>

De <html> tag is het begin van een Html-document, het is de “container” voor alle andere Html-elementen. Binnen deze tag is het gebruikelijk om het taal attribuut er in te zetten (lang=”nl”), hierdoor weten de webbrowser en de zoekmachine in welke taal de webpagina is geschreven.

<head>

De <head> sectie is wat uitgebreider en is een soort “container” voor metadata. Metadata zijn gegevens over het Html document en worden niet getoond in de webbrowser. Metadata beschrijft o.a de titel, karakterset, stylen en scripts.

<body>

In het <body> element staat alles wat ook in de webbrowser te zien is. Het is een “container” voor de tekst in de vorm van een paragraaf, koptekst of opsomming, maar ook de plaatjes, tabellen en andere media.

Aan het einde wordt het Html-document afgesloten met de </body> en </html> tag.

Wil je meer leren over Html, bezoek dan eens de website van w3Schools.com.

index.html

Om het resultaat te zien van bovenstaande Html-code, plak je de code in het programma kladblok en sla dit dan op als index.html, open vervolgens dit bestand in de webbrowser.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *