Maak je eigen Homepage!
Les 5

Schermresoluties

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 800x600 pixels. Sommige mensen gebruiken 640x480 en anderen 1024x768. 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

Als je erover denkt om een webpagina te gaan publiceren, is het geen slecht idee om je documenten bij verschillende resoluties te bekijken. Je zorgvuldig ontworpen design kan volledig teniet gedaan worden bij andere resoluties.

Aanhaling en definitie

 

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

Nescio

Ik ga nu een paar opmaakfunkties aan je voorstellen. De eerste is 'aanhaling' (BLOCKQUOTE). Alle tekst in deze lessen is met deze funktie opgemaakt. De BLOCKQUOTE-tags vergroten de linker en de rechter marge op de pagina.

<BODY>
<BLOCKQUOTE>
Behalve den man, die de Sarphatistraat de mooiste plek van Europa vond heb ik nooit een wonderlijke kerel gekend dan den uitvreter.<P>
Nescio
</BLOCKQUOTE>
</BODY>

 

Zielknijper, Zebedeus
Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder.
Een andere opmaakfunctie is de definitie (DEFINITION LIST of DL). Begin met een setje <DL> tags ...

<BODY>
<DL>
</DL>
</BODY>

Zet het trefwoord (DEFINITION TITLE of DT) tussen twee <DT> tags en zet de verklaring (DEFINITION DATA) tussen <DD> tags ...

<BODY>
<DL>
<DT><B>Zielknijper, Zebedeus</B>
<DD>Bekende psychiater en psychoanalyticus uit de Tom Poes strips van Marten Toonder.</DD>
</DL>
</BODY>

Handige lijsten

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

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

 

Wat wil ik van Sinterklaas
We zullen eerst een ongeordende lijst maken.
Begin hiermee...

<BODY>
Wat wil ik van Sinterklaas
</BODY>

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

Voeg nu een paar ongeordende-lijst-tags toe.

<BODY>
Wat wil ik van Sinterklaas
<UL>
</UL>
</BODY>

 

Wat wil ik van Sinterklaas
  • Een rode Ferrari

Voeg een lijstonderdeel (LIST ITEM of LI) toe.

<BODY>
Wat wil ik van Sinterklaas
<UL>
<LI>een rode Ferrari
</UL>
</BODY>

 

Wat wil ik van Sinterklaas
  • Een rode Ferrari
  • Een snelle speedboat
  • Een huis in Palm Beach
  • Een reis om de wereld
  • Pamela Anderson
Zet er nog maar een paar bij...

<BODY>
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>Pamela Anderson
</UL>
</BODY>

Voila! Je hebt een lijst gemaakt.

 

Wat wil ik van Sinterklaas
  1. Een rode Ferrari
  2. Een snelle speedboat
  3. Een huis in Palm Beach
  4. Een reis om de wereld
  5. Pamela Anderson
Hoe maak je nu een geordende lijst? Simpel!
Vervang de <UL> tag door <OL> tags.

<BODY>
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>Pamela Anderson
</OL>
</BODY>


Horizontale lijnen

 

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

<BODY>
<HR>
</BODY>

 

We hebben een paar opties tot onze beschikking...

<BODY>
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=80%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=80>
</BODY>

Hierbij betekent WIDTH=20% dat de lijn 20% van de breedte van het beeldscherm in beslag neemt en WIDTH=20 dat de lijn 20 pixels (beeldpuntjes) breed is.

 

Deze lijkt me wel duidelijk.

<BODY>
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=CENTER>
<HR WIDTH=60% ALIGN=RIGHT>
</BODY>

 

We kunnen ook de dikte aanpassen...

<BODY>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=12>
</BODY>

 

En we kunnen de lijn massief maken.

<BODY>
<HR WIDTH=60% SIZE=3 NOSHADE>
<HR WIDTH=60% SIZE=8 NOSHADE>
<HR WIDTH=60% SIZE=15 NOSHADE>
</BODY>



Opgemaakte tekst

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

<BODY>

 

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

Wordt op de manier hiernaast weergegeven.

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

  

	             \|/ 
	            (@ @)
	 +----oOO----(_)-----------+
	 |          Mr. P.         |
	 |           for           |
	 |        President        |
	 +-----------------oOO-----+
	           |__|__|  
	            || ||
	           ooO Ooo
<BODY>
<PRE><TT> 

	             \|/ 
	            (@ @)
	 +----oOO----(_)-----------+
	 |          Mr P.          |
	 |           for           |
	 |        President        |
	 +-----------------oOO-----+
	           |__|__|  
	            || ||
	           ooO Ooo
</TT></PRE>
<BODY>

* Zie je dat ik een monospaced lettertype heb gebruikt? (Dat zie je aan de <TT> tags)

Commentaar

De laatste tag die we gaan bespreken geeft de mogelijkheid om commentaar in je pagina op te nemen. Hiermee kun je opmerkingen in je tekst plaatsen die niet op het scherm van de browser verschijnen.
 

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.
<BODY>
<!--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, <!--Op tijd naar bed--> of boodschappen aan degene die de broncode van je homepage bekijkt. <!--Kopieer iets van mij en je kunt een kunstgebit bestellen!-->
</BODY>

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.


Einde les 5

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