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 3

In dit derde en laatste deel gaan we index.html nog wat verfraaien, en zetten we de inhoud in intro.html. Daarna uploaden we deze mini-website naar de server, zodat iedereen mee kan genieten.

Lay Out
De index pagina is qua inhoud bijna af, maar het staat er allemaal niet zo mooi op.
Alles staat tegen de linker kantlijn, en onder elkaar. Met CSS is de lay out van een web pagina tot op de pixel te bepalen, maar voor een kleine website veroorloven we ons een kleine overtreding van de regels:
de opmaak tabel. Wel, volgens de regels gaan we eerst de kop in het midden zetten.
Verander de eerste regel in:

<h1 align="center">Coco's Home Page</h1>

Nu staat de kop netjes in het midden. Omdat het plaatje niet zo groot is, staat er een hoop white space naast. Daar zouden we best eens de tekst kunnen plaatsen, die nu onder het plaatje staat. Om dat voor elkaar te krijgen roepen we de hulp van een opmaak tabel in.
In dit geval is dat een tabel met 1 rij met 2 kolommen. In de linker kolom komt het plaatje, en in de rechter de tekst.
Tussen de kop en de opmaak tabel zetten we een horizontale streep, evenals onder de tabel. Dat doen we met de <hr> tag.
We zetten nog wat tekst naast het plaatje, die we scheiden van de eerste regel door 2 keer de <br> tag. Deze tag heeft het zelfde effect als op Enter drukken in een tekstverwerker. Arachnophilia heeft hiervoor een sneltoets: Shift + Enter. Onder de tweede horizontale lijn plaatsen we een iets kleinere kop, en we maken van de 'link' een groter dan normaal lettertype. met een 'header level 3' tag. Daar onder, in het midden van de pagina plaatsen we nog een afbeelding. Tussen de afbeelding en kop 3 komt weer een extra witregel.
(De afbeelding is onderaan deze pagina te downloaden.)
De code komt er dus als volgt uit te zien:

<h1 align="center">Coco's Home Page</h1>

<hr>

<table border="0">

<tr>

<td>

<IMG src="coco.jpg" height=142 width=111 alt="Portret van de webmaster">

</td>

<td>

Welkom op Coco's webstek. Leuk dat je langs komt. Deze site is nog klein,
maar uitbreiding valt spoedig te verwachten. Door hieronder te klikken, kun je de tweede pagina al bekijken.

<br>

<br>

Meer links naar interessante informatie worden zo spoedig mogelijk toegevoegd!

</td>

</tr>

</table>

<hr>

<h2 align="center">Links</h2>

<h3 align="center">
<A HREF="intro.html">Naar de volgende pagina</a>

</h3>

<br>
<br>
<p align="center">
<IMG src="ingang artis.jpg" height=120 width=150 alt="Foto van de woonomgeving van Coco">
</p>

Zoals je ziet, maakt zelfs een simpele opmaak tabel de code moeilijker te lezen. De <table> container bevat 1 rij container, <tr>, die elk 2 kolom containers <td> bevatten. Tussen die kolom containers staat de inhoud min of meer verstopt. WYSIWYG editors gebruiken vaak tabellen, om elementen op de pagina te plaatsen. Je kunt je voorstellen, hoe zo'n code er uiteindelijk uit ziet.
Leer dus maar liever, hoe je elementen met CSS op hun plaats moet krijgen. Als je het bovenstaande hebt begrepen, moet het mogelijk zijn, om de intro.html pagina zelf af te maken. Mocht je daar echter geen zin in hebben, dan kun je gebruik maken van de voorbeeld pagina. Door hieronder op de 'Coco link' te klikken, komt de mini website in beeld. Klik daar op de 'volgende pagina' link, en als die in beeld staat, ga je in Internet Explorer naar het 'beeldmenu' en kies je voor 'bron'. De code verschijnt nu als een tekstbestand in het Kladblok. Knippen en plakken maar! Je weet al hoe je de boel online moet zetten.

Ten slotte
Arachnophilia heeft verschillende tools aan boord, die het je makkelijk maken om lastige codes te genereren. Kijk gerust eens rond in de menubalk, en probeer vooral de tabel en lijst wizzards.
Door in Cocos website de naam Coco te vervangen door je eigen naam, heb je het eerste deel van je site al ontworpen. De meeste van ons kunnen het plaatje gewoon laten staan.
Veel succes!

Coco's website

Afbeelding woonomgeving. Klik met rechts en kies: doel opslaan als



Kalender Datum:
Laatste wijziging:

Corrie Looijen
2010-2015