Archief

Over het vak

Toetsen

PO's

Lesmateriaal

HTML Tips & Trucs 2003

HTML-Tips 2002

HTML-Tips 2004

Een tabel een naam meegeven

Met <caption> kun je een tabel meteen een naam meegeven. De opsommingen heb ik gemaakt als definition lists.

**De Brabantse Teamkampioenschappen**
1. HMC Wouter Langerak Joris Broekmeulen Bas Slikboer Rune Einarsen	2. TSV Rochade Koen Haast Jelle Jansen Rob Haast Jiri Obels	3. De Combinatie Jovan Stijovic Loran Schlangen Paul Hanique Chantal van Eijk

De code voor bovenstaande tabel is dan als volgt:

<div align="center">
<table border="1" cellpadding="5">
<caption><b>De Brabantse Teamkampioenschappen</b></caption>
<tr>
<td><dl><dt><b>1. HMC</b><dd>Wouter Langerak<dd>Joris Broekmeulen<dd>Bas Slikboer<dd>Rune Einarsen</dl></td>
<td><dl><dt><b>2. TSV Rochade</b><dd>Koen Haast<dd>Jelle Jansen<dd>Rob Haast<dd>Jiri Obels</dl></td>
<td><dl><dt><b>3. De Combinatie</b><dd>Jovan Stijovic<dd>Loran Schlangen<dd>Paul Hanique<dd>Chantal van Eijk</dl></td>
</tr>
</table>
</div>

Het is ook mogelijk de caption onder de tabel te plaatsen. Dat doe je met <caption align="bottom">.

Frequently Asked Questions Pagina

Met een script kun je door een klik tekst weergeven of verbergen. Dat is bijvoorbeeld te gebruiken voor een lijst met veel gestelde vragen. Als je gelijk alles weergeeft, krijg je een lange pagina waarbij je altijd moet scrollen. Als je dit gebruikt is alleen datgene dat aangeklikt wordt als antwoord in beeld. Met een kleurtje kun je de aangeklikte tekst ook extra benadrukken.

Klik hier om een voorbeeldje te bekijken. De tip en het voorbeeld komen van Willem Karssenberg, beleidsmedewerker dienst ICT op het Drenthe College.

Pagina overgangen

Een regel in de <head> kan er voor zorgen dat er op een leuke manier een overgang gemaakt wordt naar de nieuwe pagina. Plaats maar eens de volgende regel in de head van een pagina:

Het effect hiervan zie je als je hier klikt. Dit is transition nummer 2 en er er zijn 24 verschillende overgangen te maken. Een mooi overzicht en nog meer goodies is te vinden op deze Franstalige pagina.

Scrolltable

Met behulp van een extern javascriptje is het mogelijk om een tabel scrollable te maken, waarbij de rest van de pagina gewoon blijft staan. Ideaal voor grote tabellen. Een voorbeeld hiervan en de broncode vind je hier.

Laatste update

Het kan wel eens handig zijn te weten of een pagina vernieuwd is of niet. Daarvoor kun je een heel klein script plaatsen op je pagina, zoals hieronder.

Het script gaat als volgt:

Welkomstboodschap

Op basis van de systeemtijd kun je een verschillende welkomsttekst tevoorschijn laten komen. Je plaatst 24 verschillende meldingen, de systeemtijd wordt ingelezen en op basis hiervan komt de juiste boodschap. De schuingedrukte regel hieronder zal elk uur veranderen.

Het script gaat als volgt:

<SCRIPT LANGUAGE="JavaScript">
day = new Date()
hr = day.getHours()
if (hr == 1) document.write("Het is na enen. Ben je nog wakker?")
if (hr == 2) document.write("Het is na tweeen. Ben je nog wakker?")
if (hr == 3) document.write("Het is na drieen. Ben je nog wakker?")
if (hr == 4) document.write("Het is na vieren. Ben je nog wakker?")
if (hr == 5) document.write("Het is na vijfen. Ben je nog wakker?")
if (hr == 6) document.write("Goedemorgen vroege vogel!")
if (hr == 7) document.write("Goedemorgen, het is 7 uur geweest.")
if (hr == 8) document.write("Het is na achten.")
if (hr == 9) document.write("Een lekkere dag gewenst.")
if (hr == 10) document.write("Na tienen, dus koffietijd!")
if (hr == 11) document.write("Het is na elf uur, de ochtend loopt ten einde.")
if (hr == 12) document.write("Al na twaalf uur. Weer een dag voor de helft voorbij.")
if (hr == 13) document.write("Goede middag, het is weer een uur geweest.")
if (hr == 14) document.write("Het is na tweeën.")
if (hr == 15) document.write("Het is drie uur geweest.")
if (hr == 16) document.write("Het is na vieren.")
if (hr == 17) document.write("Het is alweer na vijf uur. De avond komt eraan. Smakelijk eten.")
if (hr == 18) document.write("Na zessen. Nog eten? Dan eet smakelijk.")
if (hr == 19) document.write("Na zevenen is de afwas veelal gedaan?")
if (hr == 20) document.write("Na achten is er het nieuws.")
if (hr == 21) document.write("De avond vordert al, het is inmiddels negen uur geweest.")
if (hr == 22) document.write("Alweer 10 uur geweest! De laatste loodjes.")
if (hr == 23) document.write("Na elven is het toch echt bedtijd!")
if (hr == 0) document.write("Middennacht geweest!")
</SCRIPT>

Webmastertools

Met de Webmaster tools kun je heel snel allerlei html trucs snel uitvoeren. Als voorbeeldje heb ik met de Webmastertools een countdownscript gemaakt. Download de webmastertools hier en kijk hoe snel je allerlei snippets kunt maken.

De focus op een veld zetten

Heel vaak zie je een veldje waar je iets in kunt typen waarnaar je kunt zoeken. Je moet dan eerst in het veld klikken en kunt dan pas gaan typen. Met een eenvoudig javascriptregeltje kun je er voor zorgen dat de cursor al in dat veld staat. Dat krijg je voor elkaar met de volgende regel na de code voor het formulier.
<script type="text/javascript">document.naamformulier.naamveld.focus();
</script>

Cursors

Misschien vind je het wel leuk ergens in je document een andere cursor te tonen. Dat kun je bijvoorbeeld realiseren door het blok tekst waarvoor dat het geval moet zijn tussen <span> en </span> te zetten en dan aan te geven wat voor cursor je wil. Stel bijvoorbeeld dat je een vraagteken wil als je met de muis over het woordje Help gaat. Dan is de code als volgt:

</span style="cursor: help">Help</span>

Hieronder zie je enkele mogelijkheden die je hebt. Vervang het woordje help in de code door het woordje uit de eerste kolom en je hebt een andere cursor. Je kunt de cursor testen door met je muis over de woordjes in de tweede kolom te gaan. Het onderste voorbeeld is een speciaal geval. Je kunt elke afbeelding gebruiken als cursor. De code die ik daar gebruikt heb, is:

<span style="cursor: url(http://www.informaticavo.nl/favicon.ico)">Plaatje</span>

auto	Wordt weergegeven zoals ingesteld op het systeem van de gebruiker.
crosshair	Ziet eruit als een kruis.
default	De standaardinstelling (normale pijl).
hand	Het handje dat je normaal ziet bij een link.
move	Het lijkt alsof je iets moet verplaatsen.
text	Wat je ziet als een je met de muis op tekst gaat staan.
wait	Het bekende zandlopertje.
help	Een vraagteken verschijnt naast de pijl.
n-resize	Een pijl naar het noorden.
s-resize	Een pijl naar het zuiden.
e-resize	Een pijl naar het oosten.
w-resize	Een pijl naar het westen.
ne-resize	Een pijl naar het noord-oosten.
nw-resize	Een pijl naar het noord-westen.
se-resize	Een pijl naar het zuid-oosten.
sw-resize	Een pijl naar het zuid-westen.
url	Verwijzing naar een plaatje op het internet.

Drie handige knoppen

Deze drie handige knoppen kun je altijd wel gebruiken op een website. De code is als volgt:
<FORM>
<INPUT TYPE="button" VALUE="Terug" onClick="history.go(-1)" style="font-family:verdana;color:#FFFFFF;background-color:blue;font-size:11px;">
<INPUT TYPE="button" VALUE="Vooruit" onCLick="history.go(1)" style="font-family:verdana;color:#FFFFFF;background-color:green;font-size:11px;">
<INPUT TYPE="button" VALUE="Print" onCLick="window.print()" style="font-family:verdana;color:#FFFFFF;background-color:orange;font-size:11px;">
</FORM>

Internet Explorer als FTP-client

Je kunt Internet Explorer gebruiken om bestanden van en naar websites te ftp-en. Om verbinding te maken met een website heb je uiteraard wel de inlognaam en het wachtwoord nodig. Je kunt dus bijvoorbeeld op de volgende manier contact maken met Zeelandnet:

ftp://inlognaam:wachtwoord@ftp.zeelandnet.nl

Je kunt ook meteen intypen:

ftp.zeelandnet.nl

De browser vraagt dan in een menuutje om de inlognaam en het wachtwoord. Makkelijk als je een keer ergens op afstand iets wilt veranderen aan je website. Deze tip kwam uiteraard van Luc.

gif, jpg of png

De opvolger van het gif formaat is png: portable network graphics. Naast enkele technische voordelen (bijvoorbeeld variabele transparantie en gammacorrectie) is een afbeelding in png formaat kleiner van omvang dan in het gif formaat. En toch biedt png betere beeldkwaliteit. Een nadeeltje is dat je met png geen animated gifjes kunt maken. Een afbeelding in png wordt eerst getoond op een lagere resolutie en vervolgens komt de afbeelding op een steeds hogere resolutie op. Voor logo's, buttons en icoontjes kun je dus voortaan beter png gebruiken in plaats van gif. Foto's bewaar je normaal gesproken als jpg, maar ook voor foto's is het png formaat geschikt. Met IrfanView kun je elke afbeelding laden en die vervolgens opslaan als png. Klik op de PNG button om meer te weten te komen over het png formaat.

Splash Screen

Met behulp van http-equiv zouden we een splash screen kunnen maken. Je laat je website openen met een openingspagina, laat die enkele seconden staan en zorgt ervoor dat er daarna automatisch een nieuwe pagina wordt geladen. Dat kan met behulp van een meta regel in de head. Ik heb een voorbeeldje gemaakt van een website met een openingspagina met een logo en na 5 seconden wordt er automatisch doorgeschakeld naar de echte pagina.

De pagina met het logo heet depion.html. Op die pagina staat onderstaande code. Na 5 seconden wordt er doorgeschakeld naar de pagina index.htm. Klik hier voor het voorbeeld. Let goed op waar bij content de quotes staan!

<address>

Het element <address> wordt gebruikt om aan het begin of eind van een document aan te geven wie de schrijver is van het document en wat zijn verdere gegevens zijn. Meestal komen daar dan naam en contactinformatie te staan. De gegevens tussen de tags worden automatisch in italics weergegeven. Het heeft verder geen nut of belang, maar het is gewoon keurige code. Vergeet niet de tag te sluiten!

Voorbeeld:

<address>
Frans Peeters
Alexanderdonk 21
4707 WB Roosendaal
(0165) 57 00 56
fpeeters@home.nl
</address>

Frans Peeters
Alexanderdonk 21
4707 WB Roosendaal
(0165) 57 00 56
fpeeters@home.nl

noindex nofollow

Meestal zijn we op zoek naar meta's om bij zoveel mogelijk zoekmachines opgenomen te worden. Maar misschien wil je nu juist dat zoekmachines jouw pagina niet opnemen. Dat kan als je onderstaande code in de <head> opneemt.

De pagina wordt niet geïndexeerd en eventuele links op de pagina worden niet gevolgd.

Het is ook mogelijk dat de huidige pagina niet geïndexeerd mag worden, maar dat eventuele links op de pagina wel gevolgd mogen worden. Dat gaat met de volgende regel in de <head>.

overline underline

In je css bestand heb je misschien vastgelegd hoe een link er normaal gesproken uit moet zien, hoe die er uit moet zien als de link bezocht is (visited) en hoe die er uit moet zien als je er met je muis op komt (hover). Maar stel nu dat je ergens in een pagina wel eens een wat andere vormgeving wilt, bijvoorbeeld voor een submenuutje. Voor de website van De Pion heb ik dat gedaan met een class submenu zodat de normale regels overruled worden. In het css bestand plaats je de volgende regels er bij:

A.submenu:link {color:#000000;font-weight:normal;text-decoration:none;}
A.submenu:visited {color:#000000;font-weight:normal;text-decoration:none;}
A.submenu:hover {color:#000000;font-weight:normal;background-color:white;text-decoration:overline underline;}

Vervolgens heb ik als volgt een menuutje gemaakt met behulp van de class submenu:

[<a href="info.php" class="submenu">info</a>] [<a href="inschrijving.php" class="submenu">inschrijving</a>] [<a href="overzicht.php" class="submenu">overzicht<a>]

Headers

Voor mijn websites gebruik ik graag headers met <h1>, <h2>, <h3>, etcetera. Een nadeel kan zijn dat je vaak ruimte verliest boven en onder een header. Vanwege de header wordt er namelijk een behoorlijke witruimte ingelast. Als je dat wil veranderen kun je met CSS de margin-top en de margin-bottom op 0 stellen. Dat doe je bijvoorbeeld als volgt:
<style>H1 {font-size:24px;color:blue;margin-top:0px;margin-bottom:0px;}</style>

ColorMatch

Met ColorMatch zoek je een kleur uit die je mooi vindt door de schuifbalken te verplaatsen. Vervolgens zoekt het programma vijf andere kleuren die bij die kleur horen en krijg je een palet dat je zo kunt gebruiken voor bijvoorbeeld een website of een PowerPoint presentatie. De pagina is te vinden op colormatch.dk en de tip kwam van Bram.

The eight-dot-three naming convention

In het dos tijdperk mocht je niet meer dan 8 letters voor de punt en drie letters na de punt gebruiken. In Windows wordt hier helemaal geen rekening meer mee gehouden, soms zie je hele zinnen als documentnaam of bestandsnaam. Dat is bij Microsoft ook geen enkel probleem.

Bij bestandsnamen van internetpagina's kan het echter nog goed mis gaan, want Apache servers accepteren bijvoorbeeld geen hoofdletters in bestandsnamen. Bij Microsoft-IIS servers maakt het niet uit of je hoofdletters of kleine letters gebruikt. Mijn ervaring is dat het bij gebruikers vooral mis gaat met de namen van afbeeldingen. Er verschijnen kruisjes, terwijl je zeker weet dat de verwijzing goed is! Meestal is er dan gezondigd tegen een Apache regel. Er staat bijvoorbeeld een spatie of een hoofdletter in de naam. Om problemen te voorkomen, kun je jezelf het best aan de volgende regels houden:

Hoofdletters en kleine letters zijn niet hetzelfde. Gebruik alleen maar kleine letters.
Gebruik niet al te lange namen, dat is vaak onhandig.
Gebruik geen spaties in bestandsnamen. Als een naam uit twee stukken bestaat, scheid ze dan met een underscore _ of een dash -
Gebruik consequent *.htm of *.html als extensie.
Plaats afbeeldingen altijd in een speciale map op je website. Dat vergemakkelijkt het maken van een verwijzing naar een afbeelding. Als een afbeelding niet verschijnt, is het probleem vaak sneller opgelost.

Bij Netcraft kun je allerlei gegevens opvragen over de server waar een domein is geplaatst. Klik maar op het logo van Netcraft en probeer een domein.

Formulier foefjes

Met tabindex kun je bij formulieren bepalen hoe de cursor moet springen als je op TAB drukt. Aan de linkerkant is de volgorde Naam - Klas - Leeftijd - Geslacht. Aan de rechterkant is de volgorde Naam - Leeftijd - Klas - Geslacht. Dat bereik je door bij de input tabindex=1, etcetera te plaatsen. Het lijntje om het formulier bereik je met <fieldset>. Plaats wat bij elkaar hoort tussen <fieldset> en </fieldset> en je hebt een mooi randje. Je kunt zo'n kader ook nog een titel meegeven door die tussen <legend> en </legend> te plaatsen meteen na <fieldset>. Nu we toch bezig zijn kunnen we het gebruik van sneltoetsen ook nog wel even meenemen. Je herkent wel de streepjes onder een letter. Dat betekent dat met <alt> ingedrukt en de onderstreepte letter meteen naar die optie gesprongen kan worden. Die sneltoets maak je door accesskey="k" (de k van Klas) mee te geven bij de input.

De Knop

Meestal maken we bij het maken van websites online knoppen via allerlei url's. Via de HCC kwam ik bij De Knop uit. Het is een klein programma van Sam Francke dat je gratis mag downloaden en gebruiken. Vervolgens kun je dus offline op prachtige wijze je hele reeks knoppen in één keer genereren. Het kost even tijd om te ontdekken hoe alles werkt, maar zodra je het programma gewend bent, is het echt genieten. Klik op het logo van DeKnop om naar zijn website te gaan. Onder het logo staat een knop die ik gemaakt heb als voorbeeld. Sam heeft nog meer programma's gemaakt die de moeite waard zijn. Met zijn CheckURL kan ik onderzoeken welke links van mijn pagina's niet kloppen. Met name op de Lesmateriaal pagina bleek daar nogal wat mis te zijn. Als je wil onderzoeken welke dead links je hebt, is zijn CheckURL dan ook zeker een aanrader.

<table height="100%">

Zet de knoppen in een tabel en bepaal dat de tabel 100% hoog is met <table height="100%">.
De cellen waarin de knoppen staan geef je een vaste hoogte, bijvoorbeeld met <td height="40">.
De laatste cel die onderaan moet verschijnen bepaal je met <td valign="bottom">.

Het resultaat is te bezien op hun website. Resize het scherm en merk op dat de gegevens links onderaan keurig op zijn plaats blijven. Het zou nog mooier geweest zijn als ze het bovenste frame ook een vaste hoogte hadden gegeven. Het staat nu op 15% van het gehele scherm.

Bepaal dat de tabel 100% hoog is met <table height="100%">.
Vul één cel met een afbeelding waar met areas hyperlinks op liggen en bepaal dat die cel 100% hoog moet zijn met bijvoorbeeld <td height="100%" valign="top"><img src="menu.gif"></td>.
Zet onder deze rij nog een rij waarin je het logo zet, bijvoorbeeld <td><img src="eurocom.gif"></td>.

Figuurtje als scheiding voor frames

Al weken ben ik nu bezig met een nieuwe website voor de schaakvereniging. Het begint een beetje te lopen, maar er is nog veel werk. Het Photoshop gedeelte komt van Bram Braat, een leerling uit 6 vwo. De scheiding tussen het bovenste frame en de body kwam nogal hard over en daar moest een betere overgang komen. Bram bedacht de truc om het bovenste frame te voorzien van een background die bestaat uit een piepklein afbeeldinkje met precies de hoogte van het frame. Ongeacht de resolutie van de gebruiker zal de afbeelding herhaald worden en lijkt het alsof er een lijntje getrokken wordt.
De code van het bovenste frame is als volgt:
<body background="images/kopbg.gif">
<div align="center"><img src="images/top.jpg" width="462" height="89" alt="" border="0"></div>
</body>
Het effect is te zien als je op het logo klikt. Let op het lijntje onder de kop. Ongeacht de resolutie van het scherm zal altijd de breedte van het middelste frame genomen worden.

Countdown en Neonkrant

ColorPicker

Met de ColorPicker van Joe Barta kun je de kleurtjes uitkiezen voor de webpagina die je maakt. Je krijgt rechts meteen een voorbeeld van hoe het er uit zou zien.

startpagina inloggen registreren colofon contact

jaar 2003