BlinfoTec |
Klik op skip tekst om meteen naar de links te gaan, of druk op 'x'.
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.
De index pagina is qua inhoud af, maar het staat er allemaal niet zo mooi op. Alles staat tegen de linker kantlijn, en onder elkaar. Met CSS is de layout van een webpagina tot op de pixel te bepalen, maar voor een kleine website veroorloven we ons een kleine overtreding van de regels: de opmaaktabel. 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 'whitespace' 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 'opmaaktabel' in. In dit geval is dat een tabel met één rij met twee kolommen. In de linker kolom komt het plaatje, in de rechter de tekst.
Tussen de kop en de opmaaktabel zetten we een horizontale strreep, 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 twee keer de <br> tag. Deze tag heeft hetzelfde effect als op Enter drukken in een tekstdocument. APH 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. De code komt er dan als volgt uit te zien:
<h1 align="center">Coco's Home Page</h1>
<hr>
<p>
<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 langskomt. Deze site is nog klein, maar uitbreiding valt spoedig te verwachten. Door hieronder te klikken, kan 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>
Zoals je ziet, maakt zelfs een simpele opmaaktabel de code moeilijker te lezen. De <table> container bevat één rij container, <tr>, die elk twee 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 kan je voorstellen, hoe zo'n code er uiteindelijk uitziet. 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 kan je gebruik maken van een bekende paginamakerstruc. Door hieronder op de 'Coco' link te klikken, komt de hier beschreven 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 'broncode tonen'. De code verschijnt nu als een tekstbestand in 'notepad'. Knippen en plakken maar! Je weet al, hoe je de boel on-line moet zetten.
APH 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.
Op de 'weblinks' pagina vind je links naar een aantal Nederlandse en Engelse websites, die zich op één of andere manier met websiteontwerp bezig houden.
Door in Coco's website de naam Coco te vervangen door je eigen naam, heb je het eerste deel van je site al ontworpen. De meesten van ons kunnen het plaatje gewoon laten staan.
Veel succes!