Les 1
Een Basis HTML Bestand Maken
Hier leer je je eerste stappen bij het maken van je website. Als je een beginner bent op het gebied van HTML dan kun je het beste hier beginnen.
Een standaard HTML bestand is vrij simpel te maken. Het enige wat je nodig hebt is een tekst editor zoals bijvoorbeeld "kladblok" dat standaard bij Windows zit. Het is echter aan te raden om een HTML editor te gebruiken. Dit werkt makkelijker en sneller. Een lijstje met goede HTML editors vind je hier.
Nog een opmerking: HTML behandelt hoofdletters en kleine letters hetzelfde. Het maakt dus niet uit of je <TITLE> of <title> typt.
Zoals al gezegd heten de commando's tussen < en > tags.
Het volgende voorbeeld bevat
het basismodel van ieder HTML bestand.
<HTML>
<HEAD>
<TITLE>Hier vul je de titel van je pagina in.</TITLE>
</HEAD>
<BODY>
Hier komt de inhoud van je pagina.
</BODY>
</HTML>
Klik Hier om dit Voorbeelddocument te bekijken!
Ok, dit is dus een standaard HTML document. Iedere webpagina bevat dus minimaal het bovenstaande.
Maar wat gebeurt er nu eigenlijk? Even een uitleg van de verschillende tags die hier gebruikt
worden.
<HTML>
Deze tag wordt gebruikt om het begin van een HTML document aan te geven. Als je een HTML bestand maakt, begin je dus altijd met <HTML>.
<HEAD>
De <HEAD> tag wordt gebruikt om belangrijke informatie over de pagina in op te nemen. Deze informatie is (vrijwel altijd) onzichtbaar voor de bezoeker van je pagina. Je vindt hier vaak de titel van de pagina (zie hieronder) en ook meta-tags (waarover later meer).
<TITLE> en </TITLE>
De <TITLE> tag is de begintag van de titel van je pagina.
Na deze begintag type
je dus de gewenste titel voor je pagina. Deze titel ziet de bezoeker linksboven in zijn browserscherm.
Vervolgens sluit je de tag met </TITLE>.
Kijk maar eens naar het voorbeelddocument hierboven. Je ziet dat tussen de <TITLE> en
</TITLE> tags het volgende staat: "Hier vul je de titel van je pagina in."
Dit zou dus
moeten verschijnen als je het voorbeelddocument hierboven opent.
Controleer dit maar eens.
Als het goed is, zie je de titel ("Hier vul je de titel van je pagina in.") linksboven in het nieuwe browserscherm verschijnen.
Verder staat er nog: "Hier komt de inhoud van je pagina." Maar dat komt hieronder bij de bespreking
van de BODY.
</HEAD>
Dit is de eindtag van de HEAD. Onthoud dat practisch alle elementen bestaan uit een begintag en een
eindtag. De eindtag ziet er hetzelfde uit als de begintag, maar het heeft alleen een / erbij.
Vergeet niet begin- en eindtag op te nemen, anders heeft dit (meestal) grote gevolgen voor het
resultaat op het scherm.
<BODY> en </BODY>
De <BODY> en </BODY> tags zijn veruit de belangrijkste tags in ieder HTML document. De werkelijke inhoud van je pagina komt tussen deze tags te staan. Daarom heet het ook "body", ofwel "lichaam". De <BODY> tag komt tussen de <HTML> en </HTML> tags en na de </HEAD> tag.
Ook vind je in het element BODY belangrijke informatie in haar attributen over bijvoorbeeld de achtergrondkleur en de tekst.
Nu alvast een zestal belangrijke attributen die in de BODY tag horen:
- background
- Hiermee kun je een plaatje gebruiken als achtergrond van je pagina.
- bgcolor
- Belangrijk attribuut, om de achtergrondkleur van je pagina te wijzigen.
- text.
- Met dit attribuut kun je de standaard tekstkleur op je pagina instellen.
- link
- Hiermee kun je de kleur van de links op je pagina instellen.
- alink
- Bepaalt de kleur van de actieve links. De links zijn actief als je er op klikt.
- vlink
- Attribuut waarmee je de kleur van de geklikte links aangeeft. Als een bezoeker terugkeert op je pagina, dan zijn de links waarop hij al geklikt heeft in deze kleur weergegeven.
Meer over kleuren en kleurwaarden kun je hier lezen.
Even een voorbeeld van een "BODY" tag met mogelijke attributen en waarden:
<BODY bgcolor="yellow" text="red" link="pink" alink="purple" vlink="brown">
Hiermee krijg je een pagina met een gele achtergrond, rode tekst, roze links, paarse actieve links en bruine bezochte links.
Nog even voor het begrip van de termen: het element in bovenstaande tag is: BODY, de attributen hiervan zijn: bgcolor, text, link, alink en vlink. De waarden van de verschillende attributen zijn: yellow, red, pink, purple en brown.
Natuurlijk hoef je deze attributen niet te gebruiken. Doe je dit niet, dan gebruikt de browser de standaard
ingestelde waarden. Meestal betekent dit een witte achtergrond, blauwe links, enz.
Zoals je ziet, zet je de waarden (yellow,red,etc.) van de attributen tussen aanhalingstekens.
</HTML>
Deze eindtag markeert het einde van een HTML document. Dit is dus de laatste tag die je gebruikt bij het maken van je pagina.
Einde Les Een
Ok, dit is genoeg voor de eerste les. Nu ben je in staat om een standaard HTML bestand te maken en
kun je werken met de attributen van de BODY tag, waarmee je o.a. de achtergrondkleur
en de linkkleur van je pagina's kunt veranderen.
Nu kun je les twee bekijken, waar de verschillende tekst-tags aan de orde komen.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
