Archief

Over het vak

Toetsen

PO's

Lesmateriaal

Scrollbar Eigenschappen

De scrollbars van een pagina kun je een eigen opmaak meegeven. Uitleg hierover kun je nalezen op deze pagina.

Randjes rond tekst

Met Cascading Style Sheets is heel veel leuks te maken. De komende keren zal ik hier nog regelmatig op terug komen, maar hier is alvast een voorproefje.

Je zet de code die hier links staat in de <head> en daarna kun je met <p class> bijvoorbeeld tekst van een randje voorzien zonder dat je een tabel gebruikt. Dit is een embedded stylesheet, een volgende keer wellicht het verschil tussen embedded, linked en inline stylesheets. Als je css wilt leren, is er een geweldige site op het internet waar je interactief kunt oefenen met o.a. html en css. Kijk maar eens op www.w3schools.com.

<p class="dotted">A dotted border</p>	A dotted border
<p class="dashed">A dashed border</p>	A dashed border
<p class="solid">A solid border</p>	A solid border
<p class="double">A double border</p>	A double border
<p class="groove">A groove border</p>	A groove border
<p class="ridge">A ridge border</p>	A ridge border
<p class="inset">An inset border</p>	An inset border
<p class="outset">An outset border</p>	An outset border

onMouseOver Buttons maken

Met 5vwo en 4havo ben ik heerlijk aan het HTML-en. Ze moeten nu als tussenopdracht in drie lesuren met de kladblok een website over zichzelf maken. Ze mogen daarbij geen gebruik maken van website editors, maar ze hebben wel internet tot hun beschikking. Op internet kun je op verschillende plaatsen gratis mooie knoppen laten maken en daar wordt grif gebruik van gemaakt. De bekendste voorbeelden hiervan zijn www.flamingtext.com en www.cooltext.com maar er zullen er nog wel meer zijn. Ik hoor er graag van! Voor onMouseOver knoppen krijg je twee knoppen en de code die daar bij hoort. Even knippen en plakken en klaar is Frans. Na deze tussenopdracht wordt er aan het echte werk begonnen.

Boodschappen op de statusregel

De afgelopen week zag ik op verschillende websites zo'n binnenvliegende melding op de statusbalk. Dat gaat met een javascript in de <head> en een onLoad="startBanner()" bij de <body> tag. Je kunt het aantal boodschappen en de inhoud aanpassen naar eigen wens. Om het wat simpeler te houden kun je klikken op dit bestand waar de code van deze hele pagina in staat.

Geen witregel bij opsommingen

Normaal gesproken krijg jij bij een ordered of unnumbered list altijd een witregel tussen de kop en het eerste list item. De witregel is te voorkomen en bovendien kun je het inspringen weglaten of aanpassen. Vergelijk onderstaande voorbeelden maar eens.

De benodigdheden: 100 gram bloem 10 gram suiker 1 kopje water 2 eieren zout, peper	Benodigdheden: 100 gram bloem 10 gram suiker 1 kopje water 2 eieren zout, peper	De benodigdheden: 100 gram bloem 10 gram suiker 1 kopje water 2 eieren zout, peper	De benodigdheden: 100 gram bloem 10 gram suiker 1 kopje water 2 eieren zout, peper
Dit is de normale manier voor het maken van een opsomming. Je krijgt een open regel en alles springt standaard in.	Keurige code zoals het hoort. Met dank aan Chris te Raa!	Met een definitielijst bereik ik bijna hetzelfde. Ik krijg geen open regel, maar er wordt wel ingesprongen.	Opnieuw een opsomming in een definitielijst waarbij het inspringen bepaald wordt door text-indent. Zie je dat je ook negatieve waarden kunt gebruiken?
De benodigdheden:<ul> <li>100 gram bloem <li>10 gram suiker <li>1 kopje water <li>2 eieren <li>zout, peper </ul>	<ul style="text-indent: -3em;">Benodigdheden: <li style="text-indent: -2em;">100 gram bloem <li style="text-indent: -2em;">10 gram suiker <li style="text-indent: -2em;">1 kopje water <li style="text-indent: -2em;">2 eieren <li style="text-indent: -2em;">zout, peper </ul>	<dl><dt> De benodigdheden:</dt><dd> <ul> <li>100 gram bloem <li>10 gram suiker <li>1 kopje water <li>2 eieren <li>zout, peper </ul></dd></dl>	<dl><dt> De benodigdheden:</dt><dd> <ul> <li style="text-indent: 2em;"> 100 gram bloem <li style="text-indent: 1em;"> 10 gram suiker <li style="text-indent: 0em;"> 1 kopje water <li style="text-indent: -1em;"> 2 eieren <li style="text-indent: -2em;"> zout, peper </ul></dd></dl>

Letter-Spacing

Met <h1> tot en met <h6> kun je zes koppen maken van verschillende groottes. Met align kun je ze links of rechts uitlijnen of centreren. Een wat minder bekende mogelijkheid is de afstand van de letters ten opzichte van elkaar op te geven in puntgroottes. Kijk eens naar de volgende kop.

Marloes Peeters beste op NK snelschaken

De code van deze kop is als volgt:

<h1 style="letter-spacing:3pt" align="center">Marloes Peeters beste op NK snelschaken</h1>

<marquee>

Persoonlijk heb ik een behoorlijke hekel aan een gewone marquee. Met wat attributen kun je echter best nog wat aardige dingen bereiken. Ik heb een voorbeeldje gemaakt van een marquee die maar 250 breed is, één keer stuit en dan stil staat. Voor de vele attributen bij de marquee moet je even op het logo klikken van de website Handleiding HTML waar alle HTML commando's met attributen worden besproken. Het is een soort HTML bijbel die bij je favorieten hoort te staan.

Frans Peeters Informatica

De code van deze marquee is als volgt:

<marquee width=250 behavior="alternate" loop="3" scrolldelay="100" truespeed>Frans Peeters Informatica</marquee>

Filters

In een tabel kun je met filter bepaalde stijlen aanbrengen in je tekst. Het kan een aardig effect geven, maar opnieuw geldt dat je dit soort verfraaiingen met mate moet gebruiken.

Dit is met een filtereffect shadow.

Dit is met een filtereffect dropshadow.

Dit is met een filtereffect glow.

De code is als volgt:

<table style="filter:shadow(color=blue)">
<tr><td><font size="6" color="red">Dit is met een filtereffect shadow.</td></tr>
</table>
<table style="filter:dropshadow(color=orange)">
<tr><td><font size="6" color="green">Dit is met een filtereffect dropshadow.</td></tr>
</table>
<table style="filter:glow(color=red)">
<tr><td><font size="6" color="black">Dit is met een filtereffect glow.</td></tr>
</table>

Pop-up bij verlaten van de pagina

Bij het verlaten van een pagina kun je de bezoekers nog even fijntjes ergens op wijzen door een pop-up te tonen. De pop-up stel je in bij de <body> van je pagina. In dit geval heb ik een pagina afscheid.html gemaakt en de hoogte en breedte aangepast. Pop-ups moet je echt met mate gebruiken, want de meeste bezoekers vinden ze vreselijk irritant.

<iframe>

Met frames kun je verschillende html documenten in één venster plaatsen. De inhoud van het ene frame is onafhankelijk van het andere. Het is echter ook mogelijk om de inhoud van een html document rechtstreeks in een ander html document te tonen. Dat doe je met de container tag <iframe>. Zo'n frame noemen we een inline frame of een floating frame. De attributen van het <iframe> komen overeen met die van een gewoon frame, zoals src, height, width, marginheight, marginwidth, frameborder, name, scrolling, etcetera.

Ik stel u even voor:

Klik op een naam.

Eerst heb ik als volgt een <iframe> gedefinieerd:

Vervolgens heb ik een unnumbered list gemaakt:

<li><a href="frans.jpg" target="iframe">Frans</a>
<li><a href="kees.jpg" target="iframe">Kees</a>
<li><a href="dian.jpg" target="iframe">Dian</a>
<li><a href="ineke.jpg" target="iframe>Ineke</a>
<li><a href="jose.jpg" target="iframe">José</a>

Als je op de namen klikt, komt er steeds een foto van de betreffende persoon in het <iframe>.

Ik heb het met foto's gedaan, het kan uiteraard ook met bestanden of externe url's. Er zijn voldoende toepassingen te bedenken. Programmeersites tonen bijvoorbeeld vaak programmacode in een <iframe>. Je kunt dan door de code scrollen zonder dat de rest van de pagina verschuift. Vaak worden inline frames ook voor demonstratiedoeleinden gebruikt. Binnen een pagina kun je dan verschillende sites of andere pagina's laten zien, zonder dat de huidige pagina wordt verlaten.

Java applets invoegen

Op het web zijn heel veel kant en klare Java applets te vinden. De applets zijn te herkennen aan de .class extensie. Een applet neem je op in een html pagina met de regel:
<applet code="NaamApplet.class">
</applet>

Met width en height kun je de breedte en hoogte aangeven en met de tag <param> wordt de informatie verstrekt die de specifieke applet voor zijn taak nodig heeft. Het attribuut name geeft aan welke informatie aan de applet wordt doorgegeven en de value is de informatie zelf. Meestal spreekt de informatie voor zich. In dit geval staat bijvoorbeeld shcolor voor de seconds hand color (kleur secondenwijzer), mhcolor voor minutes hand color (kleur minutenwijzer) en hhcolor voor hour hand color (kleur urenwijzer). Verander maar wat waarden en je ziet vanzelf wat er gebeurt.

Een aantal voorbeelden van java applets is te vinden bij Sun.

Zoek op deze pagina

Met dit JavaScript en formulier kun je op eenvoudige wijze zoeken naar woorden op één pagina. Op pagina's met heel veel tekst kan dat handig zijn, hoewel je uiteraard ook met <Ctrl f> kunt zoeken op pagina's. Het maakt niet uit waar het script of het formulier geplaatst worden. Er wordt altijd op de hele pagina gezocht. Op de onderste regel van je scherm vind je de string waarnaar je hebt laten zoeken. Het script en het formulier kun je hier downloaden.

Kalender

Ik ben een beetje aan het spelen gegaan met FrontPage 2002 omdat het plusklasje ook met FrontPage aan de slag gaat. Met deze nieuwe versie kun je vrij eenvoudig een maandkalender toevoegen aan je website. Dat gaat via Invoegen - Webcomponent - Geavanceerde besturingselementen - ActiveX-besturingselementen - Microsoft MonthView Control. Je kunt ook de code van hiernaast even kopiëren. Het eerste kolommetje geeft trouwens de weeknummers aan. Om een Nederlandse kalender te krijgen heb ik nog wel even een regel toegevoegd aan de <head>:
<meta http-equiv="Content-Language" content="nl">
Als je gaat bladeren door de maanden, kun je de melding krijgen dat een ActiveX-besturingselement onveilig kan zijn. Daar hoef je je in dit geval volgens mij geen zorgen om te maken. Het is verder mogelijk de kalender te vullen met events. Een voorbeeld hiervan kwam ik tegen op www.cafedekamer.nl. Je zult dan wel asp pagina's moeten maken, neem ik aan.

<meta tags>

Met <meta> in de <head> specificeer je informatie over je website. Zoekmachines struinen internet af en maken gebruik van deze <meta> tags om de pagina te rubriceren. Om goed te scoren bij de zoekmachines moeten je <meta> tags dus in orde zijn. Het is een open tag (</meta> bestaat dus niet) en met twee attributen geef je aan welk type (name) informatie je wilt doorgeven en wat de inhoud (content) is van die informatie. Aan de hand van een voorbeeld van Informaticavo krijg je dan bijvoorbeeld het volgende:

Als je een beetje lui bent, laat je de meta tags maken door een meta tag generator. Je hoeft dan enkel wat gegevens op te geven en de generator maakt de code voor je. Die knip en plak je dan in de <head>. Zoek met Google naar meta tag generator en je krijgt o.a. de volgende voorbeelden:

<pre>

Met <pre> kun je tekst in een vaste opmaak opnemen zonder dat de browser daar iets aan mag veranderen. Op deze manier kun je dus tabellen maken door middel van spaties. Het is niet zo netjes, maar het werkt wel. Een spatie blijft een spatie en een Enter blijft een Enter. Het is vooral gemakkelijk als je knipt en plakt uit een andere applicatie. Ik gebruik het bijvoorbeeld om standen uit een indelingsprogramma rechtstreeks in html te plakken zonder dat ik er werk aan heb. Hetzelfde bereik je in feite met <tt>. Het TT element wordt gebruikt om tekst met een vaste lettergrootte (Typemachine Tekst) weer te geven.

<pre>
1 Berend Ruben    1 1 1 1 1 1 1 1 1  9.0
2 Sander Ruben    0 1 1 1 1 1 0 1 1  7.0
3 Sander le Sage  ½ ½ 1 1 0 1 1 1 1  7.0
4 Frank Lambregts 1 1 0 0 0 1 1 ½ 1  5.0
5 Wesley Koekkoek 0 1 1 1 0 0 1 1 0  5.0
</pre>

Blockquote

Met <blockquote> kun je tekst dubbel in laten springen, zodat je aan beide kanten van de pagina een rand krijgt. Oorspronkelijk waarschijnlijk bedoeld om aan te geven dat je iets citeert. Met een tabel van drie kolommen waarbij je de eerste en laatste kolom leeg laat, bereik je hetzelfde resultaat, maar <blockquote> is zeker zo handig. Hieronder zomaar een stukje tekst om te laten zien hoe dat er dan uitziet. Met opzet heb ik beide stukken tekst volledig uitgelijnd, zodat je goed het verschil ziet.

<blockquote>
Kennisnet is een soort beschermd internet, waarop schoolkinderen informatie kunnen vergaren zonder in contact te komen met porno, illegale software of reclame. Om de 2,7 miljoen leerlingen van basisscholen en voortgezet onderwijs te laten internetten, is op jaarbasis 100 miljoen euro nodig, maar in het regeerakkoord is daarmee geen rekening gehouden. Ook ontbreekt een post van 95 miljoen voor de verdere ontwikkeling van de ICT in het onderwijs. Oud-onderwijsminister Hermans luidde hierover al de noodklok in zijn overdrachtsdossier.
</blockquote>

Kleurtjes

Naast white kun je de volgende namen gebruiken voor kleuren van fonts, achtergronden, randen, etcetera.

silver gray maroon green navy purple olive teal white
black red lime blue magenta (fuchsia) yellow cyan (aqua)

Als je een andere kleur wilt gebruiken, ben je aangewezen op de hexadecimale codes voor de kleur. Op internet zijn talloze websites te vinden met overzichten van die hex codes. Ik geef er een paar:

Print deze pagina

Als je bij framespagina's een bepaalde pagina wilt printen, gaat het wel eens mis. Je kunt dan de pagina van het verkeerde frame printen. Om dat te voorkomen zie je weleens dat er een knop gemaakt wordt om de bewuste pagina te printen. Dat kan op verschillende manieren, hieronder vind je er enkele.

Met een button gaat het als volgt:
<form> <input type="button" value="Print deze pagina" onClick="window.print()"> </form>

Met een onClick op een plaatje gaat het zo:
<a href="dezepagina.htm" onClick="window.print();return false"><img src="printer.jpg"></a>

Tekst op een afbeelding plakken

Alexanderdonk 21

Het is vrij eenvoudig tekst op een afbeelding te plakken met bijvoorbeeld Paint. Je kunt echter ook tekst op plaatjes zetten als je een plaatje gebruikt als background in een tabel. De code van de afbeelding links is als volgt:

<table border="0" cellpadding="5" CELLSPACING="5">
<TR><TD BACKGROUND="huis.jpg" VALIGN="bottom" ALIGN=center>
<FONT COLOR="red">Alexanderdonk 21</FONT>
</TD></TR></table>

Button als hyperlink

Het is goed mogelijk een hyperlink te leggen op een submit button. Als je de buttons in een tabel zet, kun je vrij eenvoudig een menuutje maken dat bijzonder snel geladen wordt.

Favicon

Het is mogelijk je eigen icoon naast de url te tonen in de adresbalk. Om te beginnen moet je uiteraard een icoon maken van 16x16. Daar zijn freeware pakketten voor (Irfanview bijvoorbeeld). Het icoon moet favicon.ico heten en je moet het ftp-en naar de root van je website. Dan zet je de volgende regel in de head:

Als nu de url toegevoegd wordt aan de favorieten of bij de koppelingen geplaatst wordt, verschijnt het icoon. Yahoo en Google gebruiken zo'n favicon en daar kun je het best zien wat ik bedoel. Voor mezelf heb ik zo'n icoon gemaakt met wat letters. Als je meer wilt weten over favicon moet je eens even kijken op www.favicon.com.

Geef een title mee aan een hyperlink

Op een A HREF tag kun je een title attribuut toepassen net zoals je dat gewend bent met ALT voor afbeeldingen. Je krijgt een displaytje onder het handje. Probeer maar eens door de muis op onderstaande link te houden. Op de statusbalk verschijnt de link waar naar verwezen wordt en onder het handje komt de title.

Klik hier.

De code hiervan is als volgt:

Klik <a href="http://www.google.com" title="Durf jij hier te klikken?">hier</a>.

Nu gaan we de code nog een beetje uitbreiden met een melding op de statusbalk. Houd nog een keer de muis op de link en let op de melding op de statusbalk. Als de muis weg gaat van de link, verdwijnt de melding op de statusbalk.

Klik hier.

De code hiervan is als volgt:

<a href="http://www.google.com" title="Durf jij hier te klikken?" onMouseOver="window.status='Google'; return true;" onMouseOut="window.status=''; return true;">hier</a>.

Diefstal beperken

Al eerder had ik een java script om rechts klikken uit te schakelen. Bij Bravenet vond ik deze aardige body tags.

Rechtsklikken uitschakelen:
<body oncontextmenu="return false">

Mouse Dragging (Highlighting) uitschakelen:
<body ondragstart="return false">

Toetsenbord (Select/Copy) uitschakelen:
<body onselectstart="return false">

Ik heb op deze pagina het rechtsklikken mogelijk gelaten, want anders heb je daar teveel last van. Maak maar eens een pagina met de code en zie het resultaat. Oh ja, IE only en het is een beetje onzin natuurlijk, want je kunt op vrij eenvoudige wijze toch aan de broncode komen, maar voor een niet-kenner lijkt het heel wat.

E-mail hyperlink opties

Ik veronderstel dat je weet hoe je een hyperlink op een e-mailadres maakt:
<a href="mailto:webmaster@informaticavo.nl">Mail mij !</a>

Maar wist je dat je ook automatisch de overige velden van het e-mailtje in kunt laten vullen? Na het e-mail adres typ je een vraagteken en vervolgens vul je bijvoorbeeld in wat het onderwerp of het tekstveld moet zijn, of aan wie het mailtje cc of bcc moet. Ik heb voor het gemak verschillende regels gemaakt, maar de tekst staat gewoon helemaal achter elkaar.

<A HREF=mailto:webmaster@informaticavo?subject=HTML Tips
&cc=fpeeters@stwillibrord.nl
&bcc=fpeeters@home.nl
&body=Ik vind jouw HTML tips geweldig Frans! Ga hier nog maar lang mee door!>Mail mij !</a>.

Je begint dus met een vraagteken na het e-mailadres en je plakt de velden aan elkaar met een ampersand. Klik maar eens op de volgende link om het te proberen: Mail mij !

Voorkom dat spam robots e-mailadressen roven

Spam robots struinen internet af op zoek naar e-mailadressen die ze kunnen belagen met mail. Als je dat niet wilt en toch een e-mailadres wilt tonen, kun je dat voorkomen door de robot een beetje voor de gek te houden. In plaats van webmaster@informaticavo.nl gebruik je de volgende code:

Je krijgt dit te zien: Mail mij. Als er op geklikt wordt, komt toch het juiste e-mailadres tevoorschijn, maar de robot vindt geen apestaart!

Het gebruik van  

     Op de spatiebalk drukken helpt niet echt om spaties te creëren. De browser laat de spaties gewoon weg namelijk. Het is echter wel degelijk mogelijk harde spaties te plaatsen met  .
     Door het plaatsen van vijf keer   (non-breaking space) kan ik elke alinea van deze tekst bijvoorbeeld laten inspringen. Het is ook mogelijk dit inspringen te bewerkstelligen door een onzichtbare afbeelding te maken van één pixel hoog en die voor een alinea te zetten, maar dat komt een beetje gekunsteld over.
     Het wordt ook wel eens gebruikt in tabellen om in ieder geval iets te plaatsen in een cel zodat de lijntjes verschijnen zoals in de cellen die wel gevuld zijn. Hieronder zie je twee tabellen. Van de eerste tabel is de laatste cel helemaal leeg en zie je geen randen. In de tweede tabel staat   in de laatste cel en zie je wel de randen.

Gevuld	Gevuld	Gevuld
Gevuld	Gevuld

Gevuld	Gevuld	Gevuld
Gevuld	Gevuld

Verticale lijnen

Iedereen weet wel hoe je horizontale lijnen kunt maken met <hr>, maar weet je ook hoe je verticale lijnen kunt maken? Je maakt gewoon een afbeelding van een verticale lijn en die plaats je voor je tekst. Met "height" kun je precies opgeven hoe hoog de lijn moet zijn.
<img src="vertbar.jpg" width="3" height="n" align="left">

Nog even de attributen van een horizontale lijn nog maar eens op een rijtje dan:

width: breedte in pixels (of in procenten)
size: hoogte in pixels
align: left, right of center
color: kleur in hexadecimaal formaat
noshade: niet in 3-D maar vlak

Voorbeeld:
<HR width=100 size=2 color="#000000" align="center">

W3C HTML Validation Service

Het is belangrijk dat je nette HTML code maakt volgens de standaard van de W3C. Je kunt je HTML code gratis laten controleren door de W3C op http://validator.w3.org/. Als de code goed is, mag nevenstaand logo plaatsen. Je kunt er op klikken om te kijken of de code goed bevonden wordt. Het is tevens mogelijk het css bestand te laten controleren als je gebruik maakt van stylesheets en ook op xml kun je een check uitvoeren.
Om een check te kunnen uitvoeren moet de eerste regel van het document het documenttype aangeven, bijvoorbeeld:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.
De validator weet dan van welke HTML-versie de controle moet plaatsvinden.

<br clear=all>

Gertrudiscollege Onderbouw Kampioen van Brabant Als de tekst die bij een afbeelding hoort kleiner is dan de hoogte van de afbeelding, dan kun je het best de tekst beëindigen met een <br clear="all">. Als je dan met de tekst verder gaat die niet meer bij de afbeelding hoort, komt die tekst in ieder geval niet naast de afbeelding. Deze tekst eindigt met <br clear="all"> zodat de lijn niet tegen de foto komt maar er onder.

Uitlijnen met <div>

Net zoals bij een tekstverwerker kun je tekst op vier manieren uitlijnen, namelijks links, rechts, gecentreerd en volledig. De alinea's met <p align=left> en <p align=right> kennen de meeste mensen wel, maar wist je ook dat je volledig uit kunt lijnen met <p align=justify> en <p align=center>? Als voorbeeldje heb ik deze alinea volledig uitgevuld. Wat ook werkt is dat je <center> vóór en </center> na de tekst zet die je wilt centreren, maar mijn Homesite gilt dan meteen "<CENTER> is deprecated", oftewel verouderd. Niet meer gebruiken dus.

Een hele nette manier om uit te lijnen is gebruik te maken van <div> (division). Met <div align=center> kun je alles binnen de <div> tags centreren (ook plaatjes en tabellen). Zo kun je dus ook <div align=justify> enzovoorts gebruiken. Een verschil met de <p align> is dat er geen extra lege regel toegevoegd wordt.

Background images

Op de website van onze school heeft Bas het logo zodanig in het middelste frame geplaatst dat het altijd in beeld blijft. Luc en Ronald gebruiken deze code ook op de website van hun profielwerkstuk. Op deze pagina heb ik dat maar eens nagemaakt met het blauwe plaatje HTML Tip of the week rechts bovenaan op deze pagina. Als je naar beneden scrollt, blijft het plaatje toch in beeld. De code waarmee je dit kunt doen, gaat als volgt:

Definitielijst

Een definitielijst is een lijst die bestaat uit termen en bijbehorende beschrijvingen. Met DL bepaal je het begin en het einde van een definitielijst. DT gebruik je voor de term en DD voor de beschrijving.

Fiets: Een fiets heeft twee wielen en een stuur. Je moet zelf trappen om vooruit te komen. Als je je fiets op het station wegzet is het de vraag of je hem 's avonds nog terug vindt.
Auto: Een auto heeft vier wielen en een stuur. Zonder rijbewijs mag je niet rijden. Als je in de grote steden moet zijn is het verstandig iets te lezen mee te nemen voor de verplichte pauzes onderweg.
Trein: Een onderdeel van het openbaar vervoer. Kan vele personen tegelijk vervoeren maar het is niet zeker dat je overal op tijd komt.

Met de code ziet dat er als volgt uit:

<d1>
<dt>Fiets
<dd>Een fiets heeft twee wielen en een stuur. Je moet zelf trappen om vooruit te komen. Als je je fiets op het station wegzet is het de vraag of je hem 's avonds nog terug vindt.
<dt>Auto
<dd>Een auto heeft vier wielen en een stuur. Zonder rijbewijs mag je niet rijden. Als je in de grote steden moet zijn is het verstandig iets te lezen mee te nemen voor de verplichte pauzes onderweg.
<dt>Trein
<dd>Een onderdeel van het openbaar vervoer. Kan vele personen tegelijk vervoeren maar het is niet zeker dat je overal op tijd komt.
</dl>

Opsomtekens voor ordered en unnumbered lists

Normaal gesproken maak je een ordered list zoals hiernaast.	Scholen in Roosendaal:<ol> <li>Gertrudis College <li>Da Vinci College <li>Norbertus College <li>Jan Tinbergen College </ol>	Maar soms is het wel leuk de list van een ander opsomteken te voorzien. Vergelijk de volgende voorbeelden.
Ordered list zonder type: <ol>	Ordered list van het type a: <ol type=a>.	Ordered list van het type A: <ol type=A>
Scholen in Roosendaal: Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College	Scholen in Roosendaal: Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College	Scholen in Roosendaal: Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College
Ordered list van het type i: <ol type=i>	Ordered list van het type I: <ol type=I>	Ordered list van het type i en beginnend met 3: <ol type=i start=3>
Scholen in Roosendaal: Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College	Scholen in Roosendaal: Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College	Scholen in Roosendaal: Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College
unnumbered list van het type square: <ul type=square>	unnumbered list van het type square: <ul type=circle>	Standaard is een unnumbered list van het type disc. Je kunt van een ander type weer naar dit type door: <ul type =disc>
Scholen in Roosendaal Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College	Scholen in Roosendaal Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College	Scholen in Roosendaal Gertrudis College Da Vinci College Norbertus College Jan Tinbergen College
Uiteraard kun je ook lists inbedden.	Scholen in Roosendaal basisonderwijs voortgezet onderwijs Gertrudis College Locatie Bovendonk Locatie Junior College Da Vinci College Norbertus College Jan Tinbergen College

Thumbnails

Thumbnails zijn kleine foto's die vergroot worden weergegeven als je er op klikt. Zodoende kun je verschillende foto's op één pagina weergeven en het laden van de pagina duurt niet zo lang. Je gebruikt in werkelijkheid twee foto's. De ene foto is de grote foto die je al had. Van die foto maak je een foto die veel kleiner is in omvang en daar zet je een hyperlink op. Als je op de kleine foto klikt, wordt de grote foto geopend, eventueel in een volledig scherm of in een frame (afhankelijk van het target).

Het maken van die kleine foto kun je zelf met een fotobewerkingsprogramma. Irfanview is gratis en is daar bijvoorbeeld uitstekend geschikt voor. De grote foto die ik hier als voorbeeld gebruik is 38 kB groot en heeft een resolutie van 640x480. Je laadt de foto in Irfanview en dan resize je de foto via Image, Resize tot bijvoorbeeld 100x75, zodat de grootte teruggebracht wordt tot ongeveer 2 kB. Vanwege de gulden snede is de breedte/hoogte verhouding altijd 4/3. Als je de breedte of de hoogte verandert, past Irfanview zelf de andere maat aan. Je slaat de foto op met een andere naam, bijvoorbeeld fotoKlein.jpg en legt daar een hyperlink op:

<a href="fotoGroot.jpg"><img src="fotoKlein.jpg"></a>

Met de meeste website programma's zit het maken van een thumbnail wel ergens in een menu. Bij FrontPage heet een thumbnail een AutoMiniatuur. Je voegt een foto in op een pagina, je selecteert de foto door hem aan te klikken en dan klik je op AutoMiniatuur. Dat is het derde icoon van links onderaan je scherm. Je moet dan wel de Figuren werkbalk geladen hebben. Als je de pagina opslaat, kun je nog de juiste naam en plaats bepalen voor de thumbnail. Het werkt erg prettig.

Met Dreamweaver kun je in no time een compleet fotoalbum voor het internet maken. Je kunt in één klap van alle foto's die in dezelfde map staan thumbnails maken en je krijgt automatisch de navigatieknoppen er bij. Dat gaat bij Dreamweaver via Commands en dan Create Web Photo Album. Zeer handig als je van veel foto's thumbnails moet maken.

Met PhotoShop kun je ook met een paar klikken een webfotogalerij maken. Ik gebruik altijd PhotoShop voor mijn foto's en na een paar zoek en vervang opdrachten met HomeSite ziet het er meestal wel netjes uit.

Targets

Met de optie target bij een hyperlink kun je bepalen hoe de URL geopend moet worden. Met <base> in de <head> leg je vast hoe de link moeten worden geopend als er geen target is bepaald. Vergelijk maar eens de volgende links door er op te klikken.

<a href="http://www.stwillibrord.nl/">www.stwillibrord.nl</a>

Er is geen target bepaald en dus wordt de base target uit de head genomen. In dit geval komt de URL terecht in het middelste frame.
<a href="http://www.stwillibrord.nl/" target=_top>www.stwillibrord.nl</a>

De URL wordt geopend in het hele venster van de browser en het venster van de vorige URL verdwijnt. De URL komt dus over de andere heen. Als je dit venster sluit, ben je de vorige URL ook kwijt.
<a href="http://www.stwillibrord.nl/" target="_self">www.stwillibrord.nl</a>

De URL wordt altijd geladen in het eigen frame, ook als via base target een andere vensternaam opgegeven is. Het is dus puur bedoeld het base target te overrulen.
<a href="http://www.stwillibrord.nl/" target=_parent>www.stwillibrord.nl</a>

De URL wordt in het vorige venster (de parent) geopend. Als er geen vorig venster is, werkt _parent hetzelfde als _self.
<a href="http://www.stwillibrord.nl/" target="_blank">www.stwillibrord.nl</a>

De URL wordt altijd geopend in een nieuw venster van de browser. De vorige URL blijft geopend. Deze gebruik ik het meest zodat je eigen website nooit uit beeld verdwijnt. Als zo'n venster wordt gesloten komt de bezoeker weer terug op de website van waaruit de URL werd geopend.
<a href="http://www.stwillibrord.nl/" target=new>www.stwillibrord.nl</a>

Indien een naam opgegeven wordt die nergens is gedefinieerd, dan wordt de URL geopend in een nieuw venster en werkt het zoals _blank.
<a href="http://www.stwillibrord.nl/" target=inhoud>www.stwillibrord.nl</a>

De URL wordt geopend in een frame van een pagina die met frames is gemaakt. In dit geval heet dat frame "inhoud".

Afstand van tekst tot plaatje

Met vspace en hspace kun je afstand van een plaatje tot de tekst bepalen. Soms zie je wel eens dat de tekst zowat tegen een plaatje aanstaat. Ik vind dat niet mooi en je kunt het eenvoudig verhelpen door vspace (verticaal) en hspace (horizontaal) in te stellen. Kijk maar even naar de vergelijking.

Bij dit plaatje is geen vspace of hspace toegepast. De gratis sms-diensten zijn behoorlijk uitgedund. Er zijn nog drie gratis SMS diensten via het internet. Bij Hotsms mag je per dag gratis twee sms-berichten sturen. Bij Genie zijn dat er 20 per dag, maar Dutchtone laat geen berichten door van deze dienst. Je moet je bij beide diensten wel registreren. Via het Engelse Orange kun je perfect 30 sms berichten per maand versturen naar alle operators ter wereld. Ook daar moet je uiteraard registreren. De sms-jes komen bijzonder snel (binnen een minuut) aan. Bedenk wel dat een telefoonnummer in Nederland dan begint met 0044 (internationale toegangscode vanuit Engeland) en de 0 van 06 moet je ook weglaten.

Bij dit plaatje is wel vspace en hspace toegepast. De gratis sms-diensten zijn behoorlijk uitgedund. Er zijn nog drie gratis SMS diensten via het internet. Bij Hotsms mag je per dag gratis twee sms-berichten sturen. Bij Genie zijn dat er 20 per dag, maar Dutchtone laat geen berichten door van deze dienst. Je moet je bij beide diensten wel registreren. Via het Engelse Orange kun je perfect 30 sms berichten per maand versturen naar alle operators ter wereld. Ook daar moet je uiteraard registreren. De sms-jes komen bijzonder snel (binnen een minuut) aan. Bedenk wel dat een telefoonnummer in Nederland dan begint met 0044 (internationale toegangscode vanuit Engeland) en de 0 van 06 moet je ook weglaten. De code die gebruikt is: <img src="orange.gif" align="left" hspace="10" vspace="5">

Spelen met tabellen

Met tabellen in tabellen kun je leuke effecten bereiken. Bekijk de volgende voorbeeldjes maar eens.

Hier komt de tekst met een randje.

Dat doe je dus als volgt:

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
<tr>
<td>
<table border="0" cellpadding="10" cellspacing="0" bgcolor="#ffffff">
<tr>
<td>
Hier komt de tekst met een randje.
</td>
</tr>
</table>
</td>
</tr>
</table>

Nog een voorbeeldje.

En hier is de tekst in een tabel met een dikker gekleurd randje. De dikte van de rand wordt bepaald door "cellpadding".

Dit zijn drie tabellen:

<table border="0" cellpadding="2" cellspacing="0" bgcolor="#000000">
<tr>
<td>
<table border="0" cellpadding="2" bgcolor="#ff8000">
<tr>
<td>
<table border="0" bgcolor="#ffffcc">
<tr>
<td>
En hier is de tekst in een tabel met een dikker gekleurd randje. De dikte van de rand wordt bepaald door "cellpadding".
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Bladeren

Natuurlijk kun je de browser knoppen gebruiken om vooruit en terug te bladeren. Soms kan het echter wel eens handig zijn op je eigen pagina deze bladerknoppen te hebben. De code voor terug is <a href="javascript:history.back(1)"> en voor vooruit <a href="javascript:history.forward(1)">. Ik vind het wel leuk die code op een knop te zetten. Je krijgt dan bijvoorbeeld de volgende knoppen:

Site toevoegen aan favorieten

Hoe kun je bezoekers jouw site met één klik laten toevoegen aan hun favorieten? Neem in je pagina het volgende html-scriptje op:

<a href="javascript:window.external.AddFavorite('http://www.informaticavo.nl/', 'Informaticavo');"> Voeg deze site toe aan mijn favorieten!</a>

Je krijgt dan dus: Voeg deze site toe aan mijn favorieten!

Een cd autorun maken en het venster meteen laten maximaliseren

Voor alle leerlingen die meegeweest zijn op excursie naar Londen heb ik een cd gemaakt met daarop het verslag van de reis en meer dan 400 foto's. Het autorun maken van een cd met HTML bestanden doe je door een tekstbestandje AUTORUN.INF op de cd te zetten met bijvoorbeeld de volgende inhoud:
[autorun]
open=explorer.exe "index.htm"
icon=favicon.ico
Waarbij ik er vanuit ga dat Explorer op de PC staat. Let er op dat AUTORUN.INF met hoofdletters staat. Mijn ervaring is dat het niet werkt als het met kleine letters staat. Het icoontje dat ik gebruik is een zelfgemaakt icoontje van 16x16 en opgeslagen als ICO.

Het maximaliseren gaat met een script in de <HEAD>.

Drop down menu voor links

Met een pulldown of dropdown menu kun je bijvoorbeeld leuke lijstjes maken voor links. Het bespaart je heel wat ruimte op de pagina en het ziet er leuk uit.

<form name="drop_down" method="POST">
<select name="selections" size=1>
<option value="http://www.informaticavo.nl">www.informaticavo.nl</option>
<option value="http://www.stwillibrord.nl">www.stwillibrord.nl</option>
<option value="http://ictbeleid.kennisnet.nl">http://ictbeleid.kennisnet.nl</option>
</select>
<input type=button onClick= "location = '' +
document.drop_down.selections.options[
document.drop_down.selections.selectedIndex ].value;" value="Go!">
</form>

HTML Diashow

Met de HTTP-EQUIV refresh function van de <META> tag kun je automatisch pagina's achter elkaar laten tonen, zodat je een soort diashow krijgt.
Stel dat je bijvoorbeeld de dagroosterwijzigingen toch op internet hebt staan en dat je ze op een aantal pagina's achter elkaar wilt laten zien in het gebouw. Je hebt bijvoorbeeld vier pagina's die moeten rouleren: rooster1.html, rooster2.html, rooster3.html en rooster4.html.

Bovenaan pagina rooster1.html zet je dan:
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=rooster2.html">

Bovenaan pagina rooster2.html zet je dan:
<META HTTP-EQUIV="Refresh" CONTENT="5;URL=rooster3.html">

Dit herhaal je voor alle pagina's die je wilt gebruiken. De "5" staat voor vijf seconden uiteraard. Er zijn allerlei toepassingen denkbaar, ik heb zomaar het voorbeeld van het rooster bedacht.

Voor een voorbeeldje klik je hier.

startpagina inloggen registreren colofon contact

jaar 2002

HTML Tips & Trucs 2002