Deel 2: Een basis HTML bestand maken.
|
2002-09-27 |
Programmeren en techniek
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 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.
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 deel 2
Ok, dit is genoeg voor de deze 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.
In het volgende nummer van Web Succes Magazine volgt deel 3:
Tekst schrijven en tekstopmaak
Deze cursus HTML valt onder copyright van mijnhomepage.nl. Dit artikel mag niet worden overgenomen zonder uitdrukkelijke toestemming van de webmaster van mijnhomepage.nl.
