BlinfoTec |
Klik op skip tekst om meteen naar de links te gaan, of druk op 'x'.
Even controleren, wat we er tot nu toe van hebben gebakken. Op je harde schijf staat een map met de naam van je website. Laten we die map maar even 'Coco' noemen. In die map staat een bestand met de naam 'index.html'. Als je daar op klikt, start Internet Explorer, en toont 'Coco's website', die nog steeds onder constructie is. Als je met je FTP client de aan jou toegewezen ruimte op de schijf van je host bekijkt, dan staat daar hetzelfde 'index.html' bestand. Als je in de adresbalk van Internet Explorer het adres van je website invoert, dan verschijnt Coco's home page op het scherm. Klopt dit Allemaal? Dan gaan we door.
Je moet weten, dat het zinnetje 'onder constructie' een absolute doodzonde is. Dat moet dus snel weg. Ook willen we de pagina een beetje opfleuren met wat kleur. Een fotootje is leuk, en wat is een website zonder links? Net zoiets als bier zonder schuim.
In de door APH gegenereerde pagina zie je in de <body> tag nog een aantal codes staan. Dit is de oude manier, om het uiterlijk van de pagina aan te geven. Je ziet hier codes voor achtergrondkleur, tekst kleur en grootte, en kleurinformatie voor de links. Tegenwoordig zetten we die informatie in een zogenaamd 'stylesheet'. Omdat we meerdere stylesheets op een webpagina los kunnen laten, wordt er gesproken van 'Cascading StyleSheets' ofwel CSS. Zo'n stylesheet is niet veel meer dan een tekstdocument, waarin we voor de verschillende containers aangeven, hoe ze moeten worden gepresenteerd. Je herkent een stylesheet aan de extensie '.css.
Open notepad, en copieer het volgende daar na toe:
body { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-style:normal; font-size:100%; color: #000000; }
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #ff0000; }
h2 { font-family: Arial, Helvetica, sans-serif; font-size: 140%; color: #008000; }
h3 { font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #0000ff; }
a:link { color: #0000FF; text-decoration: underline; }
a:visited { color: #009966; text-decoration: underline; }
a:hover { color: #ff0000; text-decoration: underline; }
Sla dit bestand op als 'coco.css' in de 'Coco' map.
In deze stylesheet hebben we de achtergrond van de pagina op wit (ffffff) gezet, een zwart Sans Serif font gekozen (000000), de grootte op 100% gezet en er een 'normaal' lettertype van gemaakt. We hebben de eerste drie headings een kleur en afmeting gegeven. Verder hebben we de links van een kleurtje voorzien, en gezegd, dat ze 'underlined' moeten worden getoond.
Informatie over wat er allemaal nog meer kan met CSS vind je bij de links onderaan deze pagina, evenals meer informatie over kleurcodering.
Nu moeten we in 'index.html' nog aangeven dat het document gebruik moet maken van een stylesheet. Start APH op, en vervang in 'index.html' de twee door het programma gegenereerde metatags (generator en formattor) door de onderstaande code:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<link href="coco.css" rel="stylesheet" type="text/css">
De eerste 'metatag' defenieert dit document als webdocument dat gebruik maakt van een vastgestelde karakterset, de tweede tag koppelt het stylesheet 'coco.css' aan het document. Op de lokale computer heeft Coco's website nu al wat kleur gekregen. Nog een paar kleine veranderingen. Vervang <html> door <HTML lang="nl">. Nu is de taal van de pagina vastgelegd. Haal de codes uit de body tag weg, zodat alleen <body> overblijft. Die codes staan nu immers in het stylesheet. Helemaal bovenaan de pagina vinden we de 'document header'. APH genereert een verouderde code, die we gaan vervangen door:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
Verwijder nu alle tekst tussen <body> en </body>. Wat we nu overhouden is een nieuwe sjabloon, aangepast aan de eigen website. Bewaar dit document nu eerst als 'index.html'. Vervang vervolgens de tekst tussen <title> en </title>door het | teken. Bewaar deze versie als 'template.html'. Minimaliseer APH, en ga met 'Mijn Computer' of de 'Windows Explorer' naar de Coco map. Copieer 'template.html'. Ga nu naar C:\Program Files\Arechnophilia, en open deze map. Zoek de 'template' map op, en hernoem hierin het bestand 'template.html' in 'oldplate.html'. Plak nu het gecopieerde 'template.html' bestand in deze map. Sluit af, en zet APH weer op het scherm. Als je nu een nieuw HTML document opent, kan je direct met de inhoud beginnen. De cursor springt automatisch naar het | teken tussen de titletags, en wist dit teken uit.
Nu kunnen we de index pagina een wat zinvollere inhoud geven. We beginnen met een 'heading level 1', groot en vet. Daaronder zetten we Coco's foto, en vermelden in de 'alt' tag wat er op het plaatje te zien is. Dan volgt een stukje tekst, waarin Coco de bezoeker welkom heet. We beeindigen de pagina met een link naar de volgende pagina, waarop Coco zich nog wat verder voorstelt.
Om het plaatje te kunnen tonen, en de link te laten werken, moeten er nog twee bestanden naar de Coco map. Het plaatje heet 'coco.jpg', en is hieronder te downloaden. Coco's verdere introductie staat op een pagina, die we eerst moeten aanmaken. Open een nieuw HTML document, en bewaar het alvast als 'intro.html'.
Alweer knip en plaktijd. Het onderstaande moet tussen de body tags van 'index.html' komen:
<h1>Coco's Home Page</h1>
<p>
<IMG src="coco.jpg" height=142 width=111 alt="Portret van de webmaster.">
</p>
<p>
Welkom op Coco's webstek. Leuk dat je langskomt. Deze site is nog klein, maar uitbreiding valt spoedig te verwachten. Door hieronder te klikken, kan je de tweede pagina al bekijken.
</p>
<p>
<A HREF="intro.html">Naar de volgende pagina</a>
</p>
We wachten nog even met het uploaden naar de server, tot we in deel 3 de intro pagina van tekst hebben voorzien, en de index pagina nog wat hebben verfraaid.