We zijn nu al een heel eind op weg om een goed uitziende homepage te maken. We hebben tekst en fonts gemanipuleerd, afbeeldingen ingevoegd en hyperlinks gemaakt. Wat de basisvaardigheden betreft is er eigenlijk niet veel meer te vertellen.
Ik zal deze pagina eens nuttig gebruiken door wat extra gimmicks uit te leggen. Laten we beginnen met even stil te staan bij schermresoluties. Ik gebruik, zoals de meeste mensen, een schermresolutie van 1024 x 728 pixels. Veel mensen gebruiken 800x600 en een enkeling gebruikt nog 640 x 480. Er zullen ook nog wel andere resoluties gebruikt worden. Wat heeft dit met ons onderwerp te maken? Het heeft alles te maken met hoe je homepage eruit zal zien op de verschillende beeldschermen. Hieronder staan en paar screen shots van een willekeurige homepage bij verschillende resoluties.

640x480

800x600

1024x768

Het is geen slecht idee om je documenten bij verschillende resoluties te bekijken. Je zorgvuldig ontworpen design kan volledig teniet gedaan worden bij andere resoluties. Pas de resolutie aan door op het bureaublad met de rechtermuisknop te klikken en in het menu voor Eigenschappen te kiezen (Windows 95 en hoger). Klik op de tab Instellingen en pas daar met de schuifbalk de resolutie aan. Zorg dat je wel al je werk het opgeslagen want in sommige gevallen moet je computer opnieuw gestart worden.

Ik ga nu een paar opmaak funkties met je doornemen.
De eerste is <BLOCKQUOTE> . Alle tekst op deze pagina's is met deze funktie opgemaakt. Het doet niet veel meer dan de linker- en rechtermarge iets vergroten. (Ik weet niet of ik de juiste terminologie gebruik maar als je begrijpt wat ik bedoel zal het wel aardig in de buurt komen).

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Behalve den man, die de Sarphatistraat de mooiste plek van Europa vond heb ik nooit een wonderlijker kerel gekend dan den uitvreter.

Nescio
</BLOCKQUOTE>
</BODY>

Behalve den man, die de Sarphatistraat de mooiste plek van Europa vond heb ik nooit een wonderlijker kerel gekend dan den uitvreter.

Nescio

Bovenstaand voorbeeld zal ongetwijfeld de eerste gedachte zijn geweest om een funktie als <BLOCKQUOTE> te introduceren, dus het citeren van auteurs die door niemand gelezen worden. Maar het kan natuurlijk in tal van andere toepassingen z'n nut bewijzen. Bedenk voor de verandering zelf ook maar eens wat voorbeelden J.

Een andere bruikbare tool is de opsomming (LIST). We onderscheiden een geordende (ORDERED) lijst en een ongeordende (UNORDERED) lijst.

Dit is een geordende lijst
  1. Iets groots
  2. Iets kleins
  3. Iets korts
  4. Iets langs

 

Dit is een ongeordende lijst
  • Iets roods
    •
  • Iets blauws
    •
  • Iets ouds
    •
  • Iets nieuws
    •

 

We zullen eerst een ongeordende lijst maken. Het is echt kinderlijk eenvoudig.

Begin hiermee...

<BODY BGCOLOR="#FFFFFF">
Wat wil ik van Sinterklaas
</BODY>

Wat wil ik van Sinterklaas

 

Opmerking - je bent nog niet met de lijst begonnen. Dit is alleen een soort koptekst.

Voeg nu een paar ongeordende-lijst-tags toe.

<BODY BGCOLOR="#FFFFFF">
Wat wil ik van Sinterklaas
<UL>
</UL>
</BODY>

Wat wil ik van Sinterklaas

 

Voeg een lijst onderdeel (list item) toe.

<BODY BGCOLOR="#FFFFFF">
Wat wil ik van Sinterklaas
<UL>
<LI>een rode Ferrari
</UL>
</BODY>

Wat wil ik van sinterklaas

  • een rode Ferrari

Zet er nog maar een paar bij...

<BODY BGCOLOR="#FFFFFF">
Wat wil ik van Sinterklaas
<UL>
<LI>een rode Ferrari
<LI>een snelle speedboot
<LI>een huis in Palm Beach
<LI>een reis om de wereld
<LI>een Spice Girl
</UL>
</BODY>

Wat wil ik van Sinterklaas

  • een rode Ferrari
  • een snelle speedboot
  • een huis in Palm Beach
  • een reis om de wereld
  • een Spice Girl

 

Voila! Je hebt een lijst gemaakt.

Hoe maak je nu een geordende lijst? Simpel! Vervang de <UL> tag door <OL> tags.

<BODY BGCOLOR="#FFFFFF">
Wat wil ik van Sinterklaas
<OL>
<LI>een rode Ferrari
<LI>een snelle speedboot
<LI>een huis in Palm Beach
<LI>een reis om de wereld
<LI>een Spice Girl
</OL>
</BODY>

Wat wil ik van sinterklaas

  1. een rode Ferrari
  2. een snelle speedboot
  3. een huis in Palm Beach
  4. een reis om de wereld
  5. een Spice Girl

Een ander soort 'lijst' is de definitie.

aardbeving

Trilling van de oppervlakte van de aarde en tevens het eerste woord in de encyclopedie die ik er maar bijgepakt heb om een voorbeeld te bedenken

Begin met een setje <DL> tags (Defenition List)...

<BODY BGCOLOR="#FFFFFF">
<DL>
</DL>
</BODY>

Zet dan het trefwoord achter een <DT> tag (Defenition Title)...

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Zielknijper, Zebedeus
</DL>
</BODY>

Zielknijper, Zebedeus

Nu nog de omschrijving van het trefwoord. Hiervoor gebruiken ver de tag <DD> (Defenition Data).

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Zielknijper, Zebedeus
<DD>Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder. En tevens het laatste woord in de Encyclopedie J </DD>
</DL>
</BODY>

Zielknijper, Zebedeus
Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder. En tevens het laatste woord in de encyclopedie J .

Als de 'finishing touch' kun je het trefwoord vet maken. Dat is natuurlijk niet persé nodig maar het staat wel beter. In elke encyclopedie wordt het gedaan en dat doen ze niet voor niets.

<BODY BGCOLOR="#FFFFFF">
<DL>
<DT> <B> Zielknijper, Zebedeus </B>
<DD> Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder. En tevens het laatste woord in de Encyclopedie J </DD>
</DL>
</BODY>

Zielknijper, Zebedeus
Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder. En tevens het laatste woord in de encyclopedie J .

Een ander aardigheidje dat je veel zal gebruiken is een horizontale lijn (Horizontal Rule).

<BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>

We hebben een paar opties tot onze beschikking...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>

Je ziet dat ik afmetingen in percentages en in absolute getallen opgeef. De absolute waarde geeft de afmeting in pixels aan. Het percentage daarentegen, geeft de afmeting in een percentage van de schermhoogte of -breedte aan. Wanneer gebruik je nu wat? De grootte van een pixel is afhankelijk van de beeldschermresolutie van de lezer. Een hogere resolutie betekent kleinere pixels en omgekeerd. De afmetingen zullen dus niet voor iedereen gelijk zijn. Een breedte van 60% is altijd 60% van de totale breedte, wat de schermresolutie ook is. Met deze informatie moet het een koud kunstje zijn om te bedenken welke optie je in een bepaalde situatie moet gebruiken.

Deze lijkt me wel duidelijk.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>

We kunnen ook de dikte aanpassen...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>

Tenslotte kunnen we de lijn massief maken.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1 NOSHADE>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>

Weet je nog dat ik ooit verteld heb dat de browser geen tekstopmaak herkent maar de tekst in een constante stroom tekens weergeeft? Zoiets als dit...

<BODY BGCOLOR="#FFFFFF"> 

               \|/ 
              (@ @)
   +----oOO----(_)-----------+
   |         Michael         |
   |           for           |
   |        President        |
   +-----------------oOO-----+
             |__|__|  
              || ||
             ooO Ooo
</BODY>

\|/ (@ @) +----oOO----(_)-----------+ | Michael | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

Met de <PRE> (preformat) tag, kunnen we deze eigenschap van de browser uitschakelen en alles wordt weergegeven zoals we het typen.

<BODY BGCOLOR="#FFFFFF">
<PRE> 

               \|/ 
              (@ @)
   +----oOO----(_)-----------+
   |         Michael         |
   |           for           |
   |        President        |
   +-----------------oOO-----+
             |__|__|  
              || ||
             ooO Ooo
</PRE>
<BODY>

* Zie je dat ik een monospaced lettertype heb gebruikt?.

De laatste tag die we gaan bespreken is het HTML-equivalent van het batchcommando REM . Hiermee kun je opmerkingen in je tekst plaatsen die niet op het scherm van de browser verschijnen.

<BODY BGCOLOR="#FFFFFF">
<!--Dit is een opmerking-->
Een opmerking kan overal in het document geplaatst worden en de browser negeert alles wat tussen de haken staat. Je kunt verborgen boodschappen in je document zetten, <!--De groeten aan moeder!--> geheugensteuntjes aan jezelf, <!--Deze alinea legt de commentaar-tags uit--> of boodschappen aan degene die de broncode van je homepage bekijkt. <!--Kopieer iets van mij en je kunt een kunstgebit bestellen!-->
</BODY>

Een opmerking kan overal in het document geplaatst worden en de browser zal alles negeren wat tussen de haken staat. Je kunt verborgen boodschappen in je document zetten, geheugensteuntjes aan jezelf, of boodschappen aan degene die de broncode van je homepage bekijkt.


Om het nog even helemaal duidelijk te maken, de opmerking begint met <!-- en eindigt met -->
Je kunt zelfs andere HTML tags tussen de haken zetten en ze worden genegeerd. De browser blijft alles negeren tot hij een --> tegenkomt.

Introductie Les 1 Les 2 Les 3 Les 4 Les 5 Les 6 Index