Tabellen zijn niet Taboe!


Dit is een van de meest gemaakte fouten van een beginnend webdesigner die zich aan CSS waagt.
Ze hebben een paar keer gelezen dat ze op het ‘nieuwe web’ geen tabellen meer mogen gebruiken,
maar dat is niet helemaal waar.
tabellen zijn goed te gebruiken in je website
Het gaat over de manier waarop je ze gebruikt.
Om duidelijk te maken hoe het zo ver heeft kunnen komen met tabellen, gaan we een reis terug
in de tijd maken naar toen websites net begonnen op te duiken.

“In den beginneÉ”, neeÉ dat is iets te lang geleden. Toen hadden ze nog niet eens stroom,
laat staan computers.
Het internet is heel simpel begonnen als een medium waar informatie over verspreid kon worden.
Toen was dat alleen nog maar tekst en de browsers ondersteunden zelfs nog geen plaatjes.
In die tijd was het ontwikkelen van internet sites ook nog voorbehouden aan programmeurs
die verstand van zaken hadden. Zelf een website maken werd pas gedaan door het grotere
publiek toen de zogenaamde WYSIWYG-editors (What-You-See-Is-What-You-Get) verschenen.
Het werd makkelijker en ook aantrekkelijker omdat browsers ook het gebruik van plaatjes
ondersteunden. Dus en visueel aantrekkelijke site was zo gemaakt.
Het web werd overspoelt met simpele, amateuristische sites die maakten van tabellen om de
plaatjes van de interface te positioneren. En dat is precies waar het fout gegaan is.

Zo komen we weer in deze tijd terecht en waar er andere (betere) manieren zijn om een lay-out
vorm te geven. Daar kom ik zo op terug.

Tabellen zijn niet bedoeld om een interface maken. Dat is waar de divs ten tonele komen.
Ten eerste zijn divs nauwkeuriger te positioneren dan tabellen en je website zal ook een
stuk sneller laden dan wanneer je overal tabellen gebruikt. Dat heeft niet zozeer te maken
met de hoeveelheid code die je gebruikt, maar met de manier waarop tabellen worden
ge•nterpreteerd door browsers.

Ook voor het indelen van simpele stukken tekst zijn er veel betere, duidelijkere manieren
dan op het gebruik van tabellen terug te vallen. Hier zijn speciale tags voor gemaakt
die dat een stuk makkelijker maken, hier volgen er een paar:

<p>, <q>, <em>, <blockquote>, <code>
<h1>, <h2>, ..., <h6>
<hr />, <br />
<ul>, <ol>, <li>

Om er zo maar een paar te noemen. Als je de volledige lijst wil zien,
raad ik je aan om even op www.w3.org te kijken.
Daar staat de volledige lijst en of ze nog ondersteunt worden door de huidige browsers.
Want het web verandert constant, maar dat heb je vast al door.

Nu komen we dan eindelijk uit op het onderwerp waar we over begonnen zijn: tabellen!
Waar mag je ze dan wel gebruiken? Om te beginnen zijn tabellen bij verre weg de meest
geschikte manier om grote hoeveelheden data op een overzichtelijke manier te ordenen.
De rijen of kolommen geven dan aan welke data bij elkaar hoort en de aparte cellen
zijn goed te onderscheiden waardoor je in ŽŽn oogopslag kan vinden waar je naar zoekt.

Nu denk je misschien bij jezelf ÒLeuk die tabellen, maar zijn zo afschuwelijk lelijk!Ó.
Dan zou ik zeggen, wat houdt je tegen om die tabel op dezelfde manier te stijlen als je
gedaan zou hebben met een div? Met een klein beetje CSS kan je tabel er als nooit tevoren uitzien.
Dat is ook een ding wat je goed moet onthouden: CSS bepaald hoe je site eruitziet in de browser,
niet hoe je je HTML moet schrijven. Het correcte gebruik van HTML en CSS is iets wat je moet leren,
maar dat gaat beter naarmate je er meer mee werkt. Denk maar terug aan je kleutertijdÉ
als je toen een kleurplaat kreeg, kon je het niet voor elkaar krijgen om binnen de lijntjes te kleuren.
Nu je wat ouder bent en wat meer controle hebt over je handen, kan je wel binnen de lijntjes blijven.
Zo kan je de HTML zien als de lijntjes, het bepaald wat er op de kleurplaat staat.
Je viltstiften zijn de CSS, daarmee bepaal je hoe het eruit ziet.

Om nog even terug te komen op de zaken die zijn besproken:

– Tabellen gebruik je om grote hoeveelheden data te ordenen
– Gebruik de juiste html-tags om je tekst te verdelen in logische blokken
– Divs gebruik je voor je lay-out (o.a.)
– CSS gebruik je puur voor het uiterlijk van je site, niet de structuur
– En blijf binnen de lijntjes!

Gebruik maken van een I-frame

Met een iframe, wat ongemakkelijk vertaald in het nederlands een zwevend frame, kun je hele leuke
dingen doen binnen je website. Zelfs zo dat het niet eens opvalt dat je een iframe gebruikt.
Meestal maakt men gebruik van een iframe als de informatie van een site aan de randen, om het frame
heen, niet vaak hoeft te veranderen en datgene in het iframe wel gemakkelijk aangepast moet worden.

In tegenstelling tot wat de naam zegt is het beslist geen onderdeel van frames. Je hoeft dus
body niet weg te laten. Je kunt het gewoon als element gebruiken in je body. Je kunt zelfs een
hele website maken en maar een klein onderdeel als iframe gebruiken. Dit iframe is vervolgens
wel een aparte pagina en daar moet je dus terdege rekening mee houden. Je hebt dus content nodig waarvoor je
een aparte pagina maakt. De tag is <iframe> tot en met </iframe>. Hier hoef je overigens niet perse
iets tussen te zetten. Al is het wel handig om er bijvoorbeeld nbsp; in te zetten.

Er zijn een aantal elementen die kunnen worden toegevoegd aan het iframe. We zetten er een
aantal op een rijtje, met daarachter een uitleg.

  • Frameborder
    Met frameborder bepaal je de dikte van de lijn om het frame heen.
  • Height
    Bepaalt de hoogte van het iframe. Kun je ook op auto zetten.
  • Name
    Met dit element kun je je iframe een unieke naam geven, waarmee een link
    naar het iframe kan verwijzen. In je link zet je dan <a href=”pagina.htm” target=”frame1″>
    Hierbij is frame.htm de webpagina en frame 1 de naam van het iframe. Op deze manier zorg je ervoor
    dat de link in het iframe verschijnt.
  • Scrolling
    Dit attribuut kun je ook de waarde yes, no of auto geven. Daarmee bepaal je of (als de pagina te groot wordt) je
    scrollbalken (automatisch) krijgt of niet.
  • Src
    Hiermee bepaal je de bron voor het iframe. De pagina die in je iframe verschijnt.
  • Width
    Bepaalt de breedte van het frame. Kan in pixels of in procenten.

Een voorbeeld:

<iframe frameborder=”1″ height=”200″ name=”frame1″
scrolling=”yes” src=”http://localhost:8888/” width=”550″></iframe>

Dit geeft het volgende resultaat:



Met onderstaande link zie je hoe je linkt naar het iframe:

<a href=”http://www.webchamp.nl” target=”frame1″>Hier link je mee naar het iframe</a>

Hier link je mee naar het iframe

Succes met het maken van je eigen iframe.

ID's en classes, de een of de ander?

html artikelen
Om een html element de identificeren, zeg maar een naam te geven, maak je gebruik van
het attribuut ‘class’, of het attribuut ‘id’. Wanneer gebruik je nu de een en wanneer
gebruik je nu de ander? En de vraag die er op volgt is natuurlijk, hoe gebruik je ze zo
dat je semantische opbouw van je html gewaarborgd blijft?

Het ID attribuut gebruik je om een unieke naam te geven aan een bepaald element in je html.
Je mag deze naam maar een keer laten voorkomen in je document. Dat heeft tot gevolg dat je
ook vrij specifiek kunt zijn in de naam die je het geeft. Bijvoorbeeld <div id=”logo”>
kan een goede naam zijn aangezien de ‘div’ alleen maar betrekking heeft op het logo en
niet nodig is voor andere delen van je webpagina.

Het attribuut ‘class’ mag meerdere malen voorkomen in een en hetzelfde document. Daardoor
moet de naamkeuze ook wat algemener zijn. En voorbeeld kan zijn <p class=”artikel”>. De
paragraaf voor een artikel mag in dit geval dus vaker voorkomen op de pagina.

Waar we natuurlijk steeds meer de nadruk aan het leggen zijn op semantisch opgebouwde websites,
dat wil zeggen een logische opbouw, moet daar in de naamgeving goed over nagedacht worden.
Een naam moet niet iets zeggen over de styling, maar over de inhoud. De naam ‘linkerkolom’ of
‘rechterzijde’ is dus niet goed. Wanneer je namelijk een andere layout zou willen maken
kan de linkerkolom wel eens rechts staan en de rechterzijde staat misschien onderaan.
De naam ‘hoofdinhoud’ of ‘navigatie’ kan dus wel. Op welke plaats dit staat maakt niet uit,
het gaat om de inhoud.

Classes en id’s worden gebruikt om CSS mee te geven aan het element. Maar ook ‘behaviours’
binnen JavaScript maken er gebruik van. En zelfs andere html elementen (denk aan interne links)
kunnen classes en id’s nodig hebben.

Apache, PHP en MySql installeren

— N.B. Er wordt een oudere versie van de verschillende onderdelen genoemd in het artikel. Hou hier rekening mee, in de nieuwere versie kan het anders gaan —
In dit artikel willen we ingaan op een veelgestelde vraag. Namelijk het installeren van Apache, PHP en MySql op je eigen computer zodat je php-pagina’s kunt controleren en uitproberen. We gaan dit trio installeren onder Windows.

De eerste stap die je moet nemen is het downloaden van de drie paketten.

Het gaat hierbij om de meest actuele Windows versies. op het moment van schrijven zijn dat:
apache_2.0.54-win32-x86-no_ssl.msi
php-5.0.4-Win32.zip
mysql-4.1.12a-win32.zip
Apache Installeren
Verder lezen →

Boilerplate body_default_fonts.css

/* ---------- Resizable; sans-serif (Verdana, Arial) ---------- */

body {
color: #000000;
background: #ffffff url(assets/shared/page_background.gif);
font: x-small Verdana, Arial, sans-serif;
voice-family: ""}"";
voice-family: inherit;
font: small Verdana, Arial, sans-serif
}
/* ---------- Resizable; serif (Georgia, Times New Roman) ---------- */

body {
color: #000000;
background: #ffffff url(assets/shared/page_background.gif);
font: x-small Georgia, "Times New Roman", serif;
voice-family: ""}"";
voice-family: inherit;
font: small Georgia, "Times New Roman", serif;
}
/* ---------- Fixed: 12px/16px; sans-serif (Verdana, Arial) ---------- */

body {
color: #000000;
background: #ffffff url(assets/shared/page_background.gif);
font: 12px/16px Verdana, Arial, sans-serif;
}
/* ---------- Fixed: 13px/16px; serif (Georgia, Times New Roman) ---------- */

body {
color: #000000;
background: #ffffff url(assets/shared/page_background.gif);
font: 13px/16px Georgia, "Times New Roman", serif;
}