BlinfoTec |
Klik op skip tekst om meteen naar de links te gaan, of druk op 'x'.
Weet je wat? We gaan het meteen goed doen. Mijn pianoleraar zei altijd: 'Van je fouten leer je alleen maar hoe het niet moet, het is beter, als je het meteen goed doet'. We gaan dus een website maken, die voldoet aan de HTML standaard, een website die toegankelijk is, een website die gebruik maakt van 'stylesheets', een website, waarvan we de code later ook nog kunnen lezen, en dus aanpassen. Kortom, een website zoals het hoort.
Iedere simpele tekstverwerker voldoet als ontwerptool voor webpagina's. Je kan een website maken met 'notepad', ook wel het kladbloc genoemd. Je kan ook kiezen voor één van de vele speciale webeditors. Van die laatste hoor je vaak, dat ze WYSIWYG zijn. Dat staat voor 'What You See Is What You Get', ofwel 'wat je ziet is wat je krijgt'. Helaas produceren deze programma's meestal onduidelijke code, en zijn vaak ontoegankelijk. Voor de VIP ontwerper vallen die dus af. Sommige mensen beweren, dat je met MSWord websites kan maken. De code die dit programma produceert is echter niet fraai. Als je Word toch wilt gebruiken, corrigeer de code dan achteraf in een teksteditor zoals Notepad. Over het programma 'Voorpagina' van meneer Poortjens zwijg ik liever in alle talen. We laten de keus vallen op een editor, die het gemak van 'notepad' combineert met een aantal handige hulpjes: Arechnophilia, dat we voortaan APH gaan noemen. Je kan het programma onderaan deze pagina downloaden.
Voor we beginnen, lopen we even de checklist na:
Alles gecheckt? Dan kunnen we beginnen!
Installeer APH met de standaardinstellingen, en maak een sneltoets aan op je bureaublad. Als je niet weet hoe dat moet, kan je beter ook geen websites gaan maken.
Start het programma, en open het file menu. Kies voor New file, en pijl naar beneden tot HTML file. Geef Enter. Tab verder tot 'OK' en geef nogmaals Enter. Het bestand dat nu op het scherm staat, is al voorbereid als webpagina. In de code van een webpagina staat alles tussen zogenaamde 'tags'. Hieronder geef ik je de basis tags (voor een compleet overzicht van HTML tags zie de HTML handleiding):
Hiertussen komt alle code. De <html> tags vormen dus de hoofdcontainer. Tussen die <html>tags vind je Twee subcontainers:
De structuur ziet er dus als volgtt uit:
<html>
<head>
(onzichtbare informatie)
</head>
<body>
(zichtbare informatie)
</body>
</html>
Bekijk nu de pagina die op het scherm staat maar eens. Het zal je opvallen, dat APH de bovengenoemde structuur al voor je heeft aangebracht.
De <head></head> container is al voor je ingevuld. Later gaan we hier wel meer mee
doen. Het enige wat je nu hierin moet veranderen is de inhoud van de <title> container.
verander dit in:
<title>Coco's Home Page</title>
Zoals je ziet, alweer een container binnen een andere container. Het lastigste bij webontwerp is
het in de gaten houden van die openings- en sluitings tags. Als je er 1 opent, moet die ook weer
afgesloten worden, anders gaat het mis.
Zet nu de cursor tussen de <body></body> tags, en typ het volgende:
<h1>
Coco's Webstek.
</h1>
<p>
Welkom op Coco's Webstek. Deze website is nog onder constructie.
</p>
Alweer twee containers, <h1></h1> en <p></p>. De <h1></h1> container vertelt een browser dat dit een zogenaamde 'header' is. Die wordt extra groot en vet afgebeeld. Met de <p></P> tags geef je aan, dat de tekst hiertussen tot een paragraaf behoort. Paragrafen worden voorafgegaan en afgesloten met een blanco regel.
Je eerste pagina is nu klaar, en ziet er als volgt uit:
<html>
<head>
(door APh ingevulde informatie)
<title>Coco's Home Page</title>
(nog meer informatie)
</head>
<body (met APh code)>
<h1>
Coco's Webstek.
</h1>
<p>
Welkom op Coco's Webstek. Deze website is nog onder constructie.
</p>
</body>
</html>
Druk nu maar eens op Ctrl+p, en bekijk het resultaat in InternetExplorer. Met Alt+F4 keer je terug naar de editor.
Als alles naar het zin is, sla je het bestand op in de nieuw aangemaakte map, met als bestandsnaam 'index' zonder de aanhalingstekens, opslaan als HTML file (*.html, etc.).
Nu kunnen we deze pagina gaan 'uploaden' naar je server. Dat zou met je FTP client kunnen, maar er is een makkelijker manier. De eerste keer is het wat meer werk, maar daarna zal je zien, dat dit bijzonder handig is.
Met de pagina nog open druk je opAlt+t, gevolgd door 'u'. Er opent zich nu een dialoogvenster, waar we een paar gegevens in gaan voeren. Achtereenvolgens kom je op:
Tab nu door tot de 'update site' knop. Maak verbinding met het internet, en geef Enter. Met wat geluk wordt je eerste pagina nu naar je server verstuurd. Door in te loggen via je internet verbinding en Internet Explorer, kan je controleren, of alles gelukt is.
In dit hoofdstuk hebben we gebruik gemaakt van de standaard sjabloon (template.html) van APH. In deel 2 gaan we deze sjabloon aanpassen voor gebruik met stylesheets, en voegen we de zogenaamde 'metatags' toe aan de <head> container. Ook gaan we een plaatje en een link aan de <body> container toevoegen.