Laten we beginnen
met vast te stellen hoe een browser met tekst omgaat.
Eerst een voorbeeld...
<BODY BGCOLOR="#FFFFFF">
Nu iets zo koel
als een ijsklontje!
</BODY>
Nu iets zo koel als een ijsklontje! |
<BODY BGCOLOR="#FFFFFF">
He!
Wat
is hier
aan
de hand??
</BODY>
|
He! Wat is hier aan de hand?? |
Zo te zien herkent de browser geen tekstopmaak. Tenzij je hem anders vertelt, wordt tekst als een constante stroom tekens weergegeven. Als je op een nieuwe regel wilt beginnen moet je een harde return (BREAK) gebruiken.
<BODY BGCOLOR="#FFFFFF">
He!<BR>
Wat<BR>
is hier<BR>
aan<BR>
de hand??
</BODY>
|
He! |
<BR> wil
simpelweg zeggen: begin op een nieuwe regel.
Ongeveer
hetzelfde
als <BR> is
<P>. Het
doet hetzelfde alleen wordt na de break een lege regel over geslagen.
<BODY BGCOLOR="#FFFFFF">
He!<P>
Wat<P>
is hier<P>
aan<P>
de hand??
</BODY>
|
He! Wat is hier aan de hand?? |
Dit zijn voorbeelden
van "standalone" tags. Er is geen eindtag bij nodig. Er is nog iets
eigenaardigs aan deze tags... je kunt ze niet meer dan één keer
gebruiken. Met andere woorden,
<P><P><P> geeft
je geen drie lege regels, je krijgt er maar één. Hoe kun je
dan wel meerdere lege regels krijgen? Even geduld, ik zal het zo uitleggen.
Bekijk eerst dit even...
<BODY BGCOLOR="#FFFFFF">
Dit is heel grappig
</BODY>
|
Dit is heel grappig |
De browser vertikt het om meer dan één spatie in te voegen. Je zult het in eerste instantie wel raar vinden dat het zo is maar geloof me, het is beter zo. Je kunt zo je code netjes indelen zonder dat die extra spaties, tabs en returns het uiterlijk van je document beïnvloeden.
Er
is een handige kleine code waaraan de browser een spatie herkent -
(non breaking space)
Probeer dit maar
eens...
<BODY BGCOLOR="#FFFFFF">
Dit is
heel
grappig
</BODY>
|
Dit is heel grappig |
De & betekent dat hier een speciaal teken begint, de ; betekent het einde van een speciaal teken en de letters daar tussen in zijn een soort afkorting van waar het teken voor staat. Er zijn zes van die speciale tekens (eigenlijk veel meer maar dat zijn dan niet tevens HTML code tekens). Deze codes moeten altijd in kleine letters geschreven worden.
- ( spatie)
- < (< kleiner-dan symbool)
- > (> groter-dan symbool)
- & (& ampersand)
- " (" aanhalingsteken)
- ­ (- afbreekstreepje)
Over fouten en miskleunen gesproken. Er zijn altijd lieden die denken dat het maken van fouten een zonde is. Die lieden zijn bang om iets nieuws te beginnen uit angst voor fouten. Telkens dezelfde fout maken is misschien een beetje dom maar, zeker als je aan het leren bent, moet je niet bang zijn om van je werk een puinhoop te maken.
Als je er niet regelmatig puinhoop van maakt, ben je niets aan het leren; waarschijnlijk ben je zelfs helemaal niets aan het doen. Vergeet niet, miskleunen is een volkomen acceptabel bijprodukt van het leren!
OK, genoeg gefilosofeerd.
Er zijn ook nog andere speciale
tekens. Je zult ze waarschijnlijk bijna nooit gebruiken; ik wil alleen
dat je weet dat ze er zijn. Laten we de voorgaande punten nog eens kort samenvatten
want anders zie je straks door de bomen het bos niet meer. De browser geeft
tekst weer als een constante stroom tekens tenzij je hem met breaks e.d.vertelt
dat hij het anders moet doen. Lege ruimten worden gereduceerd tot één
spatie. Als je meerdere spaties wilt zul je de spatie code ( )
moeten gebruiken. Er is nog een kleinigheidje dat we niet onvermeld mogen
laten: Als je tijdens het typen op de Return of Enter toest drukt interpreteert
de browser dat als een spatie, tenzij er al een spatie is. In dat geval wordt
de return genegeerd.
Nog één voorbeeldje.
<BODY BGCOLOR="#FFFFFF">
Nu iets<BR>zo<BR>koel<BR>als<BR>een<BR>ijsklontje!
</BODY>
|
Nu iets |
Een beetje duidelijk?? Ik hoop het maar. Ik heb m'n best gedaan!
Nu hebben we nog een heel nuttige tag. Verdere uitleg lijkt me overbodig.
<BODY BGCOLOR="#FFFFFF">
<CENTER>Dit is heel grappig</CENTER>
</BODY>
|
Dit is heel grappig |
Je kunt één woord tot een hele pagina centreren. Alles tussen de <CENTER> tags wordt gecentreerd.
Ik zou het bijna vergeten, ik had beloofd te vertellen hoe je meerdere lege regels kunt maken. Dat is heel simpel. Type een spatiecode gevolgd door een break voor elke lege regel die je wilt hebben.
<BODY BGCOLOR="#FFFFFF">
Dit is<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
heel grappig
</BODY>
|
Dit is |
Misschien heb je al eens ontdekt dat het gebruik van meedere <BR> tags wel degelijk meerdere lege regels oplevert. Nou, dat klopt. Latere versies van de diverse browsers hebben die mogelijkheid ingebouwd. Waarom dan toch de ervoor zetten, kun je je afvragen. Welnu, waarschijnlijk heeft niet iedereen zo'n flitsende browser als jij hebt, dus voor die internetters heeft het wel degelijk nut om het te doen zoals ik beschreven heb. Bovendien is je code echt af als je het volledig doet.
We gaan eens proberen het geheel een beetje op te fleuren door plaatjes in het document te zetten. We gebruiken het plaatje dat hieronder staat. Ten overvloede: Klik met rechts op de afbeelding om deze op te slaan.
Je kunt een afbeelding specificeren met de <IMG>
(image) tag.
<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>
We moeten ook de bron (source) en formaat specificeren.
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=82 HEIGHT=68>
</BODY>
|
|
De bron vertelt de browser niet alleen welke afbeelding hij moet gebruiken maar ook waar deze staat. De bovenstaande bron, "copper.gif", betekent dat de browser de afbeelding zoekt in dezelfde map als waar het HTML-document staat. Hieronder staan een paar diagrammetjes om één en ander duidelijk te maken.
|
|
SRC="copper.gif" betekent dat de afbeelding in dezelfde map staat als het HTML-document dat het oproept. |
|
|
SRC="images/copper.gif" betekent dat de afbeelding één map onder het HTML-document staat dat de afbeelding oproept. Je hunt zoveel niveau's diep gaan als nodig is. |
|
|
SRC="../copper.gif" betekent dat de afbeelding één map boven het HTML-document staat dat de afbeelding oproept. |
|
|
SRC="../../copper.gif" betekent dat de afbeelding twee mappen boven het HTML-document staat dat de afbeelding oproept. |
|
|
SRC="../images/copper.gif" betekent dat de afbeelding één map boven en vervolgens één map onder het HTML-document staat dat de afbeelding oproept. |
|
|
SRC="../../../other/images/copper.gif" Ik hoop dat dit nu ook duidelijk is! |
Er is nog een andere manier waarop dit gedaan kan worden. Alle referenties naar afbeeldingen kunnen als bron ook een complete URL meekrijgen. Bijvoorbeeld: http://www.cistron.nl/~michael1/diversen/images/copper.gif Waarom, vraag je je misschien af, zou je relatieve (gedeeltelijke) URL's gebruiken om je afbeeldingen te specificeren en geen absolute (complete) URL's?? Op deze manier kun je je site lokaal opbouwen en alle links werken gewoon. Wanneer je al je pagina's klaar hebt, kun je de hele zaak uploaden naar de server en alles zal goed werken. Bovendien is het makkelijker voor de browser om de plaatjes op te halen en je pagina's zullen sneller laden. Is er dan geen enkele reden om absolute URL's te gebruiken? Natuurlijk wel. Als de afbeelding op een andere website staat dan die van jou.
Wat nou als je plaatjes worden getoond zolang de site op jouw PC staat maar als je site éénmaal op internet staat, zijn de plaatjes in geen velden of wegen te bekennen???
Dan heb je als bron waarschijnlijk copper.gif opgegeven, terwijl het plaatje Copper.gif heet. in de FAQ lees je nadere uitleg.
Er zijn nog wat leuke dingen te vertellen over afbeeldingen en hun formaat.. Probeer dit maar eens...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif">
</BODY>
|
|
Zoals je ziet kan de browser helemaal zelf uitmaken hoe groot de afbeelding is. Waarom zouden we ons dan druk maken over afmetingen? Zonder in details te treden - het opgeven van afmetingen zorgt ervoor dat je pagina sneller geladen wordt omdat het eenvoudiger is voor de browser. Wat is hier nou zo leuk aan?? Probeer dit maar eens uit...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=200 HEIGHT=68>
</BODY>
|
|
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="copper.gif" WIDTH=20 HEIGHT=100>
</BODY>
|
|
Je kunt elke afmeting specificeren die je wilt. Het originele formaat zal dan genegeerd worden. Je kunt hier grappige dingen mee doen Kijk bijvoorbeel naar dit kleine rode puntje->
<-.
Het is echt een plaatje; een vierkantje van 2 x 2 pixels en het bestandje
heet red_dot.gif. Kijk hieronder hoe je dat plaatje kunt manipuleren...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
</BODY>
|
|
Is dit niet grappig?
| Introductie | Les 1 | Les 2 | Les 3 | Les 4 | Les 5 | Les 6 | Index |