Goed nieuws voor degenen die een beetje genoeg beginnen te krijgen van deze HTML cursus: Dit is de één na laatste les!

Goed nieuws voor degenen die deze HTML cursus helemaal geweldig vinden: Dit is de één na laatste les! Je weet nu bijna alle basics van HTML!

In deze les gaat het over tabellen. Dit is waarschijnlijk het moeilijkste gebied van HTML dat je tegen zult komen. Je zult wel gauw in staat zijn eenvoudige tabellen te maken, maar de echte complexe tabellen vergen gewoon veel oefening en ervaring. Ook is het gebruik van tabellen een van de handigste functies in HTML. Practisch iedere webmaster krijgt er vroeg of laat mee te maken. Ook de pagina die je nu bekijkt is opgebouwd uit verschillende tabellen.

Dit vooraf. Nu kun je lezen over de TABLE tags en de verschillende attributen.

De<TABLE><TR>en<TD>tags

Een tabel is een systeem van rijen (horizontaal) en kolommen (verticaal).
In de rijen staan verschillende cellen. In de cellen komt de informatie die je wilt opnemen. Het aantal kolommen wordt bepaald door het aantal cellen in de rijen.

Je begint de tabel met de <TABLE> tag.
Vervolgens begin je een rij met de tag: <TR> (Table Row).
Hierna plaats je een cel met de tag: <TD> (Table Data).
Na deze tag plaats je de informatie die je in de cel op wilt nemen.
De eindtags: </TD> en </TR> zijn niet verplicht.
Een nieuwe cel begin je dan weer met: <TD>.
Heb je alle cellen binnen een rij ingevuld, dan begin je de volgende rij met: <TR>.
Zo vul je de hele tabel in. Uiteindelijk sluit je de tabel met de eindtag: </TABLE>

Attributen van de <TABLE> tag:
width: hiermee stel je de breedte in van de tabel. Dit kun je doen in pixels of in een percentage. Ik zou zoveel mogelijk percentages gebruiken, want dan ben je minder afhankelijk van de browserinstellingen van je bezoekers.

border: met dit attribuut stel je de dikte van de rand van de tabel in. De waarde 0 betekent: geen rand.

cellpadding: hiermee kun je een witruimte creëren tussen de rand van de cel en de inhoud van de cel instellen. De waarde die je opgeeft, is in pixels. De standaardwaarde is 1.

cellspacing: dit stelt een ruimte in tussen de verschillende cellen in een tabel. Ook nu is de waarde weer in aantallen pixels. De standaardwaarde is hier 2.

bgcolor: hiermee stel je de achtergrondkleur in van de hele tabel. Over kleuren hebben we het al eerder gehad in deze cursus. Klik hier om de verschillende kleuren en kleurwaarden te bekijken.

align: regelt de uitlijning voor de hele tabel. Mogelijke waarden zijn: left,center en right.

Attributen van de <TR> tag:

align: hiermee kun je de inhoud van de hele rij uitlijnen, de waarden zijn: left, center en right.

valign: hiermee kun je de verticale uitlijning van de inhoud van de rij bepalen. Mogelijke waarden: top, center en bottom.

bgcolor: bepaalt de achtergrondkleur van de hele tabelrij.

Attributen van de <TD> tag

width: stelt de breedte in van de cel. Je kunt de waarden opgeven in pixels en percentages.

colspan: bepaalt het aantal kolommen dat de cel inneemt. Soms moet je dit attribuut gebruiken. Bijvoorbeeld: je eerste rij van je tabel heeft vier cellen, maar je wilt maar drie cellen in je tweede rij. Je moet dan het attribuut colspan gebruiken om dit effect te bereiken. Als je dit niet doet dan maakt de browser zelf een vierde - lege - cel.

rowspan: bepaalt het aantal rijen dat de cel inneemt. Stel, de eerste cel gebruikt een rij, maar je wilt dat de tweede cel twee rijen inneemt. Dan moet je het attribuut rowspan gebruiken.

align: hiermee lijn je de inhoud van de cel uit. Mogelijke waarden: left, center of right.

valign: regelt de verticale uitlijning van de inhoud van de cel. De waarden die je hier kunt invullen zijn: top, center of bottom.

bgcolor: hier kun je een achtergrondkleur voor de cel invullen.

Tijd voor een voorbeeld van een tabel met gebruik van een aantal attributen:

<TABLE bgcolor="lightblue" border="2" width="100%">
<TR>
<TD align="center" colspan="4" bgcolor="red"><B><FONT size="+2">Dieren</FONT></B></TD></TR>
<TR>
<TD align="center" colspan="2"><B>Honden</B></TD>
<TD align="center" colspan="2"><B>Vogels</B></TD></TR>
<TR align="center">
<TD width="25%"><U>Jack Russell Terriër</U></TD>
<TD width="25%"><U>Spaniël</U></TD>
<TD width="25%"><U>Mus</U></TD>
<TD width="25%"><U>Spreeuw</U></TD></TR>
<TR align="center">
<TD width="25%"><U>Golden Retriever</U></TD>
<TD width="25%"><U>Teckel</U></TD>
<TD width="25%"><U>Merel</U></TD>
<TD width="25%"><U>Ekster</U></TD></TR>
</TABLE>

Dit is het resultaat op het scherm:

Nu kun je zien wat de code voor gevolgen heeft op het scherm. Bekijk de code rij voor rij. Een rij wordt aangegeven met de tag: <TR>.
Zoals je ziet zijn er vier rijen: Dieren, Honden/Vogels en twee rijen met honden en vogels, ze staan allen een plaats ingesprongen in de code.
Iedere cel (<TD>) staat twee plaatsen ingesprongen.
Dit is natuurlijk maar een hele simpele tabel, er is veel meer mogelijk, maar dat gaat nog wat te ver voor deze beginnerscursus.

Zo, nu weet je hoe je een tabel kunt maken in HTML. Je kunt dit artikel altijd opzoeken op onze website. Ken je iemand die ook geholpen zou zijn met deze cursus? Mail gewoon dit exemplaar van Web Succes Magazine naar die persoon en vertel hem dat hij ook lid kan worden! Ze zullen het zeer waarderen!

In het volgende artikel volgt deel 9, het laatste deel: Werken met frames.

Deze cursus HTML valt onder copyright van mijnhomepage.nl. Dit artikel mag niet worden overgenomen zonder uitdrukkelijke toestemming van de webmaster van mijnhomepage.nl.

Om je te helpen bij het grijpen van de aandacht van de bezoeker en deze vast te houden heb ik de volgende vijf super simpele tips voor je uitgewerkt. Doe er één of twee en zult al verschil gaan zien. Doe ze allemaal en je site wordt een groot succes!

We hebben voorheen behandeld deel 1, What's in it for me? Kruip in de huid van je bezoeker en vraag je telkens af: "Wat heb ik hier aan?" En deel 2: Leid je bezoeker door je site. Eigenlijk moet je de bezoekers een rondleiding geven door je site. Net als in een museum of een supermarkt. Daar wordt de bezoeker langs alle belangrijke items geleid op een heel natuurlijke manier.

Vandaag gaan we verder met deel 3:

Het K.I.S.S. systeem...

Jawel. Het KISS systeem. Het KISS systeem is heel belangrijk. Het gaat op voor heel veel dingen maar bovenal voor het Internet. Keep It Stupid Simple! Of ook wel: Keep It Simple, Stupid! Kies maar welke het beste bij je past. ;-)

In je communicatie moet je het simpel houden. Probeer niet de inteligente jongen (of meisje) uit te hangen of bijdehand over te komen. Dat werkt averechts. Ook moeilijke woorden moet je vermijden. Die hebben totaal geen zin. Ga er niet van uit dat de lezer aan een half woord genoeg heeft. Leg uit wat je bedoeld en laat niets aan het toeval over. Door moeilijke woorden te gebruiken of bijdehand te doen stoot je zoveel mensen af dat je nog maar een klein groepje overhoud dat door leest. Erg jammer. Dus: Keep It Stupid Simple.

Sommigen zeggen ook wel dat KISS betekent: Keep It Short and Sweet. Maar dat is niet waar. Je hoeft een tekst niet koste wat het kost kort te houden. Je moet een tekst gewoon zo lang maken als die moet zijn. Maar ook geen regel langer! Geen loze tekst. Geen vulling. Maar neem wel de ruimte om de lezer uit te leggen wat je bedoelt of hoe een product of dienst hun leven kan verbeteren. En doe dat dan op een eenvoudige manier. Verdeel de tekst in hapklare brokken. Elke "brok" (alinea) kun je een korte omschrijving meegeven door er een sub-kopregel boven te zetten. Probeer in die sub-kopregels zoveel mogelijk de voordelen van de lezer te verwerken. Vaak worden eerst de kopregels gescand. Als deze de lezer aanspreken dan zal deze waarschijnlijk de tekst gaan lezen.

Misschien komt dit als een shock, maar de lezer is niet geïnteresseerd in jou. Niet in wat je allemaal bereikt hebt, niet in je opleiding of wat dan ook. De lezer is alleen geïnteresseerd in: "Wat kun jij voor mij betekenen?". Of: "Wat kan dit product, of deze dienstverlening voor mij betekenen?". "What's in it for me?". Dat - en dat alleen - moet je zo direct en simpel mogelijk overbrengen op je site. In sommige gevallen kan dat in een hele korte tekst. Maar dat hoeft niet.

Soms moet je de lezer wat onderwijzen over je product of dienst. Dan zullen ze de waarde ervan veel meer waarderen. In de uitleg die je geeft moet telkens het voordeel van de lezer centraal staan, niet een eigenschap.

Hoe pas je dit nou toe op je eigen site? Ga eens voor jezelf na of je veel moeilijke woorden op je site gebruikt. Kijk ook eens of je wel goed uitlegt wat de voordelen van je site, je product, je dienst zijn. Schrijf een nieuwe tekst in een vertel-vorm zoals je over je site, product, dienst zou praten op een feestje. Verdeel de tekst in alineas, verwijder tekst die niets toevoegd en laat het dan proeflezen door iemand die wel geïnteresseerd is in wat je doet maar er geen expert in is.

Veel succes!

Volgende keer behandelen we tip 4: Win het vertrouwen van je bezoeker.