Menu by:
Stu Nicholls
Menu by:
| februari 2012 | |||||||
| wk | zo | ma | di | wo | do | vr | za |
| 05 | 1 | 2 | 3 | 4 | |||
| 06 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 07 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 08 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 09 | 26 | 27 | 28 | 29 | |||
Kijk ook op de agenda-pagina.
Dit is een basiscursus in het bouwen van een home-page in HTML. Hij is ooit gemaakt om Vanessa op weg te helpen. Geloof me, HTML is wel zo vreselijk simpel; jij kunt het ook.
Elke home-page (sterker nog, elke Internet-pagina) is een HTML-document. Het bevat HTML-tags, die er zo uitzien. HTML staat overigens voor Hyper Text Markup Language.
<html>
</html>
Dat is de basis van elk HTML-document, de HTML-tag.
In deze HTML declaratie zie je een titel. Die verschijnt bovenin het browser venster, als iemand jouw pagina opent. De titel staat in de HEAD-sectie van de pagina. Zo, tot nu toe hebben we dus:
<html>
<head><title>Vanessa's first home-page</title></head>
</html>
Zo, wat nu? Natuurlijk: de eigenlijke inhoud van het document, binnen deze tags:
<html>
<head><title>Vanessa's first home-page</title></head>
<body>
</body>
</html>
Tot zover de formaliteiten. De body, daar gaat het om. Dat is waar alle informatie terecht komt, die je met de rest van het Internet wilt delen. Binnen de body vinden we paragrafen:
<html>
<head><title>Vanessa's first home-page</title></head>
<body>
<p>
</p>
</body>
</html>
De paragrafen kunnen van alles bevatten: tekst, plaatjes, links, tabellen, forms. We houden het simpel en maken voorlopig gewoon een tekstpagina.
<html>
<head><title>Vanessa's first home-page</title></head>
<body>
<p>
This is Vanessa's first home-page. It's very simple so far, but that will
change soon enough.<br />
I hope you like what you're going to see.
</p>
</body>
</html>
Mooi he? Maar het kan beter, met een kop bijvoorbeeld. Laten we eentje maken:
<html>
<head><title>Vanessa's first home-page</title></head>
<body>
<h1>Vanessa's page!</h1>
<p>
Hi, I'm Vanessa and this is my first home-page. It's very simple so far, but that will change soon enough.<br />
I hope you like what you're going to see.
</p>
</body>
</html>
Hoe zou het eruit zien? Klik hier om het resultaat tot nu toe te bekijken.
Mooi of niet? Maar voor 'good looks' is meer nodig. We centreren eerst de titel.
<html>
<head><title>Vanessa's first home-page</title></head>
<body>
<center><h1>Vanessa's page!</h1></center>
<p>
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're going to see.
</p>
</body>
</html>
Aardig, behalve die lelijke grijze achtergrond dan. Daar gaan we ook even wat aan doen.
<html>
<head><title>Vanessa's first home-page</title></head>
<body bgcolor="#ffffc0">
<center><h1>Vanessa's page!</h1></center>
<p>
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're going to see.
</p>
</body>
</html>
Dat oogt al beter, zoals je hier kunt zien.
Misschien kunnen we de layout nog iets beter maken, door ook de paragraaf te centreren.
<html>
<head><title>Vanessa's first home-page</title></head>
<body bgcolor="#ffffc0">
<center><h1>Vanessa's page!</h1></center>
<p align="center">
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're going to see.
</p>
</body>
</html>
Als we dan toch aan het editen zijn, kunnen we er gelijk een plaatje in zetten.
Say 'cheese', Vanessa, I'm taking a picture of you.
<html>
<head><title>Vanessa's first home-page</title></head>
<body bgcolor="#ffffc0">
<center><h1>Vanessa's page!</h1></center>
<p align="center">
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're seeing right now.<br />
<center><img src="images/vanessa.gif" width="45" height="60"
border="0" /></center>
</p>
</body>
</html>
Mooie simpele pagina, tot zo ver. En je wilt natuurlijk weten wat iedereen ervan vindt. Natuurlijk, ze kunnen je een mailtje sturen, maar dan moeten ze eerst je e-mail adres zien te vinden, een mail programma starten...... Zullen we het wat makkelijker voor ze maken? We besparen ze moeite en laten ze direct vanuit de pagina mailen. Dat laten we ze weten door wat tekst toe te voegen:
<html>
<head><title>Vanessa's first home-page</title></head>
<body bgcolor="#ffffc0">
<center><h1>Vanessa's page!</h1></center>
<p align="center">
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're seeing right now.<br />
<center><img src="images/vanessa.gif" width="45" height="60" border="0" /></center><br />
Let me know what you think of my page, please.<br />
Send me some mail.<br />
</p>
</body>
</html>
Vervolgens geven we het woord mail extra functionaliteit, door er een link van te maken:
<html>
<head><title>Vanessa's first home-page</title></head>
<body bgcolor="#ffffc0">
<center><h1>Vanessa's page!</h1></center>
<p align="center">
Hi, I'm Vanessa and this is my first home-page. It's very simple so far,
but that will change soon enough.<br />
I hope you like what you're seeing right now.<br />
<center><img src="images/vanessa.gif" width="45" height="60" border="0" /></center><br />
Let me know what you think of my page, please.<br />
Send me some <a href="mailto:vzikking@dds.nl">mail</a>.<br />
</p>
</body>
</html>
Het woord 'mail' ziet er nu iets anders uit, en als je erop klikt, wordt een mail-venster geopend,
waarin het adres al is ingevuld.
Eens kijken of het werkt ...
Het gebruik van mailto-links is overigens tegenwoordig niet zo'n goed idee meer. Het vermelden van mail-adressen op sites leidt tot spam en daarom wordt er meestal van formulieren gebruik gemaakt, zodat het adres niet direct zichtbaar is op de pagina. Misschien iets voor een vervolg van deze tutorial.
Deze cursus stamt uit de tijd dat er eigenlijk nog alleen maar HTML was. Maar de techiek is intussen veel verder. Zo kwam er CSS om inhoud en opmaak te scheiden, HTML evolueerde naar XHTML en om nog wat meer afkortingen in de strijd te gooien hebben we ook XML, XSLT, DHTML en Ajax (nee, niet de brandblussers of die club uit Amsterdam). Genoeg stof voor een vervolg. In het tweede deel gaan we aan de slag met CSS.
