Webdesign: HTML Tips & News


	De eerste serie HTML tips en trucs die aanvullende informatie bij het boek Webdesign & HTML in de Praktijk geven, vindt u op deze webpagina. De meest recente tips staan hier.

TIP 1 Ready to shock?
Dank zij het volgende stukje JavaScript voorkomt men dat de lezer van de webpagina een foutmelding krijgt dat deze geen Shockwave plug-in geïnstalleerd heeft. Een GIF-afbeelding met dezelfde afmetingen wordt ervoor in de plaats getoond.

<SCRIPT LANGUAGE="JavaScript">  </SCRIPT> <NOEMBED> <IMG SRC="shock.gif" WIDTH=384 HEIGHT=200> </NOEMBED>

TIP 2 Tekstuitleg met behulp van JavaScript
Met behulp van een eenvoudig stukje JavaScript is het mogelijk om de statusbalk van Netscape 2.0 (en hoger) te gebruiken om een willekeurige tekst af te beelden. Deze tekst kan bijvoorbeeld als uitleg dienen.

Als men deze tekst aanklikt, verschijnt onderin de Netscape 2.0+ browserpagina de uitleg.

De source-code die voor de hier gebruikte tekst benodigd is, dient als volgt te worden gecodeerd in de HTML-pagina:

<A HREF="#tip" onMouseOver="window.status='Deze tekst verschijnt als men de muis bij tip 2 plaatst.'; return true"> Als men deze tekst aanklikt, verschijnt onderin de Netscape 2.0+ browserpagina de uitleg.</A>

De <A HREF> kan zowel naar een URL verwijzen of naar een 'anker' in dezelfde webpagina zoals in dit voorbeeld.

TIP 3 Java of geen Java
Ondanks alle euforie omtrent de Java-taal, kan nog slechts een klein deel van de browsers die het net afsurfen, de Applets zien. Browsers zoals Mosaic, Netscape 1.2, Microsoft Internet Explorer kunnen een Java-Applet in het gheel niet herkennen en laten dus een 'gat' vallen in de pagina.
In tegenstelling tot voornoemde Shockwave-voorbeeld is de <NO EMBED> tag in dit geval geen goede oplossing. Veel beter is de methode die Jos Elsendoorn van Novad via e-mail aanreikte. Hij heeft op basis van de <BLOCKQUOTE> tag een scriptje gemaakt voor browsers die geen java applets ondersteunen. Een browser die applets ondersteunt negeert alles tussen <BLOCKQUOTE> en </BLOCKQUOTE>, een browser die geen java ondersteunt snapt dit uiteraard wel en toont gewoon de applet in de webpagina.

<applet code="spacemen.class" WIDTH=300 HEIGHT=180> <BLOCKQUOTE> Aangezien uw browser geen Java Applet toont, wordt alleen een plaatje afgebeeld. <P> <IMG SRC="spaceman.gif" WIDTH=300 HEIGHT=180> </BLOCKQUOTE> </applet>

Probeer deze techniek maar eens uit op de Spacemen-pagina met een Netscape 2.0 en een 3.0 versie. En diegene die niet genoeg kunnen krijgen van de kunsten van Novad moet hun 'krassen, krassen, krassen' webpagina maar eens uitproberen. Echt leuk!

TIP 4 Tableworks voor tabellen
Het produceren van een tabel in HTML is geen sinecure. In het boek 'Webdesign & en HTML in de Praktijk' worden er in meerdere hoofdstukken aandacht besteed aan deze belangrijke opmaaktechniek. In het webdesign-proces speelt de tabel een grote rol want het biedt de mogelijkheid om de posities op het scherm te fixeren. De kennis van die <TR> en <TD> codes is echter nodig om een goede opmaak te kunnen coderen. Er zijn echter ook hulpmiddelen die dit proces veraangenamen. Het Macintosh-programma TableWorks is echt ideaal om complexe tabellen te ontwikkelen. Op de website van TableWorks staat een demo die u absoluut moet uitproberen. Seeing is believing, nietwaar?

TIP 5 Internet Explorer 2.0 en GIF animatie
De rode draad die (figuurlijk) door het boek 'Webdesign & HTML in de Praktijk' loopt is het omgaan met de verschillende browsers en bijbehorende computers die het World Wide Web bekijken. Dit levert allerhande problemen op door de kleurbeperkingen, zie hieronder, maar ook de verschillende features en tags die de concurrerende browsers ondersteunen spelen de webdesigner parten. Een typerend voorbeeld is GIF animatie. De huidige versie van Microsoft Internet Explorer 2.0 ondersteunt deze functie niet, maar interpreteert deze op een Macintosh anders dan op een Windows-computer. Het verschil zit in het feit dat de Mac alleen het eerste plaatje van de animatie toont, en de WIN-versie de laatste uit de reeks! Bij een 'knipperende' animatie (aan/uit) is het dus zaak om ervoor te zorgen dat het eerste beeldje gelijk is aan de laatste. Met onderstaand schema kan dit opgelost worden. Zorg er wel voor dat de wachttijd gehalveerd wordt door de verdubbeling van het aantal frames in de animatie.
Met behulp van de programma's GifBuilder voor de Macintosh of GIF Construction Set voor Windows kan men deze animatie maken.

TIP 6 Paginabreedte instellen
De breedte van de webpagina is ook een onderwerp waar iedere webdesigner mee geconfronteerd wordt. De breedte van de pagina is namelijk afhankelijk van de monitorinstelling van de gebruiker. Deze varieert van 640 pixels breedte tot 1024! Aangezien er op het net de wet van de grootste gemene deler geldt is een 14" of 15" monitor courant. Als men de opzet van de website baseert op deze breedte, en de lezer bekijkt de pagina op een 17 inch monitor of hoger, kan bovenstaande 'grafische' hulplijn uitkomst bieden. Met behulp van een begeleidende zin als: "het ontwerp kan het beste bekeken worden met deze instelling..." kan men de instelling van de lezer enigszins beïnvloeden

TIP 7 Achtergrondpatronen zonder kleurafwijking
Als de achtergrondkleur van een pagina afwijkt van de achtergrondkleur van een GIFje, is een kleur gebruikt die niet tot het standaard Netscape-kleurenpalet hoort (zie tip 2). Om het kleurverschil te minimaliseren moet men een klein vierkant 1-bits GIFje maken in dezelfde kleur als de voorgrond GIFjes. Door nu in <BODY> de HTML-code:

<BODY background="blokje.gif" BGCOLOR="#xxxxxx">

Op de webpagina's van Cuisine is het effect goed zichtbaar.

TIP 8 Netscape kleuren
De kleuren uit deze illustratie vormen de basis voor de 216 Netscape 'veilige' kleuren. U kunt dit GIFje downloaden door er met ingedrukte muisknop op te klikken. Op de homepage van Victor Engels vindt u meer theoretische informatie over dit onderwerp. Het is wel in het Engels geschreven.

Op advies van lezer Rutger-Jan Hoogerdijk kreeg ik een interessante URL opgestuurd. Deze verwijst naar een speciale pagina bij Adobe met nog meer links naar GIF-kleurtheorie webpagina's.

TIP 9 Uitbreiding <Applet> tag
In het hoofdstuk over JAVA staan slechts een deel van het aantal mogelijke attributen vermeld. Martin Mes stuurde de volgende aanvulling:

CODEBASE="codebaseURL"
Dit optionele attribuut specificeert de basis URL van de applet (m.a.w. de directory die de code van de applet bevat).

ALT="alternatieve tekst"

ALIGN="waarde"
Je kunt aan een applet dus een ALIGN-waarde geven. De opties zijn hetzelfde als bij het IMG tag, dus: left, right, top, texttop, middle, absmiddle, baseline, bottom en absbottom.

VSPACE="aantal pixels" HSPACE="aantal pixels"