Portret van de webmaster Image Logo Portret van de webmeesteres Reageer per E-mail
Ontwerpen: deel 1 Ontwerpen: deel 2 Ontwerpen: deel 3

Home
Screenreaders
Inleiding
Webhosting
Een eigen domeinnaam
Publiceren
Ontwerpen: deel 1
Ontwerpen: deel 2
Ontwerpen: deel 3
Promotie (metatags.nl)
Interactie en Dynamiek
Doctypes
Alle kleuren
Contact
Disclaimer


Experiment online
Web ontwerpen


Ontwerpen: deel 1

Weet je wat? We gaan het meteen goed doen!
We gaan dus een website maken, die voldoet aan de HTML standaard, een website die toegankelijk is, een website die gebruik maakt van zogenaamde '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 ontwerp tool voor webpagina's. Je kunt een website maken met 'Notepad', ook wel het 'Kladblok' genoemd. Je kunt ook kiezen voor één van de vele speciale web editors. 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.
Mensen beweren, dat je met MS Word websites kunt maken. De code die dit programma produceert is echter niet fraai. Als je MS Word toch wilt gebruiken, corrigeer de code dan achteraf in een tekstverwerker zoals 'Notepad'.
Wij laten hier de keus vallen op een editor, die het gemak van 'Notepad' combineert met een aantal handige hulpjes: 'Arachnophilia'. Je kunt het programma onderaan deze pagina downloaden.

Voor we beginnen, lopen we even de checklist na:
1. Er is een (nog lege) map aangemaakt met de naam van je website.
2. Je hebt je gebruikersnaam, wachtwoord en het FTP adres van je webhost bij de hand.
3. Je hebt een FTP cliënt geïnstalleerd en geconfigureerd.
4. Er staat een werkende browser op je computer.
Alles gecontroleerd? Dan kunnen we beginnen!

Arachnophilia
Installeer Arachnophilia met de standaard instellingen.
Start het programma en open het filemenu.
Kies voor: new file en pijl naar omlaag tot: HTMLfile. Geef enter.
Ga met de tabtoets naar: 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 HTMLtags zie de HTML Handleiding):
<html>: openings tag van iedere pagina.
</html>: afsluiter.
Hier tussen komt alle code. De <html> tags vormen dus de hoofdcontainer.
Tussen die <html> tags vind je twee subcontainers:
<head> </head>. Hier tussen komt informatie die niet zichtbaar is voor de bezoeker van je website, maar die nodig is om aan het internet duidelijk te maken, dat we hier met een website te maken hebben.
<body> </body>. Hier tussen komt het op internet zichtbare deel van de pagina.
De structuur ziet er dus als volgt 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 Arachnophilia de boven genoemde strctuur 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 hier in moet veranderen is de inhoud van de <title> container. Verander dit in: <title>Coco's Home Page</title>.
Zoals je ziet, al weer een container binnen een andere container. Het lastigste bij web ontwerp is het in de gaten houden van die openings- en sluitingstags. Als je er één opent, dan 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>

Al weer twee containers, <h1></h1>
en <p></p>. De <h1> </h1> container vertelt de browser dat dit een zogenaamde 'header'is. Die wordt extra groot en vet afgedrukt.
Met de <p></p> tags geef je aan, dat de tekst hier tussen tot een paragraaf behoort.
Paragrafen worden vooraf gegaan en afgesloten met een blanco regel.
De eerste pagina is nu klaar, en ziet er als volgt uit:

<html>

<head>
(door Arachnophilia ingevulde informatie)

<title>Coco's Home Page</title>
(nog meer Arachnophilia informatie)

</head>

<body (met Arachnophiliacode)>

<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 Internet Explorer.
Met Alt + F4 keer je terug naar de editor. Als allws naar het zin is, sla je het bestand op in de nieuw aangemaakte map, met als bestandsnaam: index, opslaan als HTMLfile.
Op windows systemen is het belangrijk dat je het woord: 'index' niet met een hoofdletter typt.

Uploaden.
Nu kunnen we deze pagina gaan uploaden naar de server.
Dat zou met je FTP cliënt kunnen, maar er is een makkelijker manier.
De eerste keer is het wat meer werk, maar daarna zul je zien dat dit bijzonder handig is. Met de pagina nog open druk je op Alt + T,gevolgd door U. Er opent zich nu een dialoogvenster, waar we een paar gegevens in gaan voeren. Achtereenvolgens kom je op: Update button: tab maar verder. Select combobox: Weer verder. Site name: vul hier de naam van je website in. Server name: vul hier het FTP adres van je server in. User name: vul hier je gebruikersnaam in. Remote directory: leeg laten. Local directory: leeg laten (doen we later automatisch). Pass word: vul hier je wachtwoord in. Update: zo laten. Tab voorbij aan de Cancel en Helpknoppen. Save password: checked. Include subdirectory's: checked. Update method all files: un-checked. Update method archive method: checked. Update method age method: un-checked. Tab voorbij aan de Save en Eraze knoppen. Geef Enter op de volgende Save knop.
Geef Enter op: Use current directory. Tab nu door tot de Update-site.
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, kun je controleren, of alles gelukt is.

In dit hoofdstuk hebben we gebruik gemaakt van de standaard sjabloon (Template.HTML) van Arachnophilia. 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.

Arachnophilia: download nu!

Kalender Datum:
Laatste wijziging:

Corrie Looijen
© 2010-2015