Maak je eigen homepage! - Aanvullende tags

Maak je eigen Homepage!
Aanvullende tags

door Michael Doel

Lees ook: Maak je eigen homepage, Het gebruik van frames en Toveren met Tabellen.

Als je de drie cursussen hebt gevolgd heb je eigenlijk alle kennis die nodig is om de perfecte homepage te maken. Als je denkt dat dat alles is zit je er echter goed naast. Er zijn nog veel meer tags waarmee je allemaal leuke gimmicks op je pagina kunt zetten. Wat dacht je bijvoorbeeld van een achtergrondmuziekje of een plaatje met meerdere links, zoals je op de introductiepagina van deze site ziet. Verder kun je nog een heleboel leuke dingen doen door in je homepage JAVA script code of applets op te nemen.
In deze, noem het maar bijlage, houden we het voorlopig even bij HTML, al zul je zien dat sommige HTML-codes zelf een standaard JAVA applet laden, bijvoorbeeld het afspelen van geluid.
Je zult mij niet horen zeggen dat ik na deze bijlage alle tags heb besproken. Er zullen er nog wel meer zijn waar ik zelf ook nog nooit van gehoord heb. Als ik tijdens mijn zoektochten op het Internet iets tegenkom dat nog niet besproken is zal ik zeker een aanvulling maken.

Laten we, voor we beginnen iets afspreken. In de voorbeelden die ik geef ga ik er vanuit dat je, om te oefenen, een basis HTML document hebt, zoiets als dit:
<HTML> <HEAD> <TITLE>Zomaar een homepage!</TITLE> <HEAD> <BODY> </BODY> </HTML>
Verder ga ik er van uit dat je Notepad of een andere teksteditor gebruikt om je code in te typen.
Om mezelf een heleboel typewerk te besparen type ik alleen wat tussen de <BODY> tags komt te staan.

We beginnen, zoals het hoort, bij het begin, namelijk met het zetten van een koptekst boven je pagina. Daarvoor gebruiken we de <H> tag met daarin een optie voor het formaat.
Je kunt een formaat van 1 tot 6 opgeven. 1 is het grootst en 6 is, hoe kan het ook anders, het kleinst.
<H3>Dit is nou een koptekst.</H3>

Dit is nou een koptekst.

Je ziet dat de koptekst dus automatisch vet wordt weergegeven. Ook komt na de eind tag automatisch een  . Het bespaart je dus afzonderlijke tags voor de grootte, het vet weergeven en een nieuwe regel. Da's maar goed ook anders zou deze tag volkomen overbodig zijn.

(H1) Dit is een schreeuwende kop.

(H2) Dit is een heel grote kop.

(H3) Dit is een gemiddelde kop.

(H4) Dit is een bescheiden kopje.

(H5) Dit is een heel klein kopje.

(H6) Dit is nauwelijks meer een kop te noemen.

Als je een koptekst in een tabel wilt zetten gebruik je de <CAPTION> tag.
<TABLE BORDER=3 WIDTH=200> <CAPTION ALIGN=top>Omzet van deze week</CAPTION> <TR> <TD> $1.000.000.000 </TD> </TR> </TABLE>

Omzet van deze week
$1.000.000.000

Je ziet dat de <CAPTION> tag niets bijzonders met de tekst doet. Als je je koptekst mooier wilt maken zul je dus de normale tags moeten gebruiken om de tekst op te maken. Als je de kop onder de tabel wilt zetten verander je gewoon de optie ALIGN=top in ALIGN=bottom. Natuurlijk kun je het dan geen koptekst meer noemen.

Er zijn ook nog een paar tekstopties die ik in de haast vergeten ben te vermelden in de beginnerscursus.
We hebben het wel gehad over de  en de  tags om tekst vet en/of cursief weer te geven. Voor beide is een equivalent.
In plaats van  kun je de  tag gebruiken. Het effect is hetzelfde.
Dat geldt ook voor de  tag, die je kunt vervangen door  (Emphasized).
Voor beide tags geldt natuurlijk dat er een eindtag moet staan. Waarom er twee verschillende tags voor hetzelfde effect zijn? Ik weet het niet. Misschien dat er in vroeger tijd wel een verschillend effect was. Misschien dat de ene browser de ene en de andere browser de andere variant ondersteunde. Bij andere tags komt dat ook voor, zoals we later zullen zien.

Als je een typefout maakt kun je natuurlijk de backspace-toets gebruiken en dan overnieuw typen maar je kunt ook aan de wereld laten zien dat je slecht typt en je fouten gewoon doorstrepen. Daarvoor gebruiken we de <S>-tag (STRIKE).
Mijn spelling laat te <S>wesnen</S> wensen over.

Mijn spelling laat te ~~wesnen~~ wensen over

Je kunt je lezers op hun zenuwen werken door de <BLINK> tag te gebruiken. Daarmee kun je tekst laten knipperen. Persoonlijk zie ik er het nut niet zo van in maar het bestaat en daarom vertel ik het. Deze funktie werkt overigens alleen in Netscape.
<BLINK>Deze tekst knippert in Netscape^(*) en staat stil in Internet Explorer</BLINK>

Deze tekst knippert in Netscape^(*) en staat stil in Internet Explorer

Als je het helemaal onleesbaar wilt maken gebruik je een gele tekst op een witte achtergrond.

Wie dit leest wordt gek!

^(*) Netscape is slim geweest en heeft de BLINK-funktie in de nieuwste versies maar weggelaten.

Een paar tags die wel nuttig zijn kun je gebruiken om tekst in superscript of in subscript te zetten. Als je niet weet wat dat is, kijk dan maar even naar de voorbeelden.
2C8H18 + 25O2 --> 16CO2 + 18H2O

2C₈H₁₈ + 25O₂ --> 16CO₂ + 18H₂O
Dit is zo'n beetje de duurste chemische reaktie uit het dagelijks leven, nl. de verbranding van benzine.

Het voorbeeld voor superscript hou ik iets korter.
E=mc2

E=mc²
De beroemde formule van Albert Einstein.

We hebben het gehad over de fontgrootte, die je in kunt stellen door de  optie te gebruiken.
Een andere mogelijkheid is het gebruiken van . Hiermee maak je het font x stappen groter dan de basisfontgrootte.
De basisfontgrootte kun je instellen door aan het begin van je document, direct na de <BODY> de <BASEFONT=xx> tag te gebruiken.
De standaardinstelling is <BASEFONT=3>. Je kunt de waarden 1 t/m 7 gebruiken.

We gaan eens kijken of we een achtergrondmuziekje op onze homepage kunnen plaatsen. Je kunt in principe twee formaten gebruiken, te weten MIDI (*.mid)en WAVE (*.wav). Aangezien je voor Netscape en voor Internet Explorer verschillende tags moet gebruiken bespreek ik ze hier allebei. Als je wilt dat gebruikers van beide browsers je geluiden kunnen horen moet je ook beide tags achter elkaar gebruiken.
De codering voor Netscape:
<EMBED SRC="deuntje.mid"> of
<EMBED SRC="geluidje.wav">
De <EMBED> tag kent twee opties waarvan je er één moet gebruiken.
<EMBED SRC="deuntje.mid" HIDDEN="TRUE"> zorgt ervoor dat je muziekjes op de achtergrond wordt afgespeeld.
<EMBED SRC="deuntje.mid" WIDTH=200 HIGHT=70> opent een vensterje waarin de lezer van je pagina zelf het geluid kan starten of stoppen en het volume kan regelen. Je lezers hebben nu ook de mogelijkheid om het geluid op te slaan.
Als je geen van deze twee opties specificeert wordt een geluidsvenstertje geopend dat maar voor een deel wordt weergegeven. Daar heb je natuurlijk weinig aan. Mischien moet je een beetje experimenteren met de afmetingen om het schermpje goed te laten passen.

De codering voor Internet Explorer.
<BGSOUND SRC="deuntje.mid"> of
<BGSOUND SRC="geluidje.wav">
Zorg dat je het midi-bestand in dezelfde directory staat als waar je HTML-document staat. Het geluid zal nu op de achtergrond worden afgespeeld.
Klik hier voor een voorbeeld.

Een funktie waar je heel leuke dingen mee kunt doen is de Imagemap. Een imagemap is een plaatje waarop verschillende vlakken zijn gedefinieerd die allemaal een link naar een ander document zijn. Je vindt er een op de introductiepagina van deze site en in de inleiding van de beginnerscursus.
We gaan de imagemap uit de inleiding eens stap voor stap doornemen.
Om te beginnen definieren we een map:
<MAP>
</MAP>
Vervolgens geven we de map een naam:
<MAP NAME="keuze">
</MAP>
Nu gaan we de vlakken definieren die we kunnen aanklikken. Je kunt een rechthoek, een circel of een polygoon (=veelhoek) definieren. Voor de locatie van de vlakken gebruiken we coördinaten met als eenheid de welbekende pixel. Voor de plaatsen van diverse coördinaten kijken we even naar de afbeelding hieronder.

Een korte uitleg is misschien wel op z'n plaats. Het plaatje heeft een afmeting van 500x200 pixels. Anders dan gebruikelijk staat de oorsprong (0,0) linksboven. De rechteronderhoek heeft dus als coördinaten 500,200.Als we het plaatje in vier gelijke vlakken verdelen worden dit de coördinaten:

Je kunt hier dus makkelijk uithalen welke coördinaten je de vier vlakken moet geven. Je hoeft alleen de coördinaten van de linkerbovenhoek en van de rechteronderhoek te geven. Die twee punten zijn genoeg om een rechthoek te tekenen.
Voor het definieren van polygonen geef je de coördinaten van alle punten op en voor circels geef je de coördinaten van het middelpunt en de straal in pixels op. We houden het hier even bij rechthoeken, omdat je die het meest zult gebruiken.
We zullen bovenstaand verhaal eens omzetten in HTML code. We doen het stap voor stap....
Eerst definieren we een vlak.
<MAP NAME="keuze">
<AREA>
</MAP>
Geef als optie op welke vorm je het vlak wilt geven...
<MAP NAME="keuze">
<AREA SHAPE="RECT">
</MAP>
RECT staat natuurlijk voor RECTANGLE. Voor een cirkel gebruik je de optie CIRCLE en voor de polygoon gebruik je POLY.
De volgende optie bevat de coördinaten van de zojuist gedefinieerde rechthoek.
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100">
</MAP>
Je hebt nu dus twee punten opgegeven, te weten 0,0 en 250,100. Je kunt je coördinaten gewoon achter elkaar typen. De browser weet zelf dan wel dat het achereenvolgens om de x- en de y- coördinaten van de linkerbovenhoek en de x- en de y-coördinaten van de rechteronderhoek gaat.
De laatste optie die we moeten specificeren is het document waar het vlak naar toe moet verwijzen, de link dus.
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100" HREF="les00.htm">
</MAP>
Nu kun je op dezelfde manier de overige drie vlakken definieren...
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100" HREF="les00.htm">
<AREA SHAPE="RECT" COORDS="250,0,500,100" HREF="frames.htm">
<AREA SHAPE="RECT" COORDS="0,100,250,200" HREF="tables.htm">
<AREA SHAPE="RECT" COORDS="250,100,500,250" HREF="tags.htm">
</MAP>
Je hebt nu alle vlakken gedefinieerd maar we zien nog geen plaatje. Dat gaan we nu specificeren...
<MAP NAME="keuze">
<AREA SHAPE="RECT" COORDS="0,0,250,100" HREF="les00.htm">
<AREA SHAPE="RECT" COORDS="250,0,500,100" HREF="frames.htm">
<AREA SHAPE="RECT" COORDS="0,100,250,200" HREF="tables.htm">
<AREA SHAPE="RECT" COORDS="250,100,500,250" HREF="tags.htm">
</MAP>
<IMG SRC="keuze.gif" WIDTH=500 HIGHT=200>

We hebben nu een image en we hebben een map maar dat betekent nog niet dat je een imagemap hebt. We zijn dus duidelijk nog niet klaar met ons verhaal.We moeten nog even opgeven dat het plaatje de map moet gebruiken die we net gemaakt hebben.
<IMG SRC="keuze.gif" WIDTH=500 HIGHT=200 USEMAP="#keuze">

Als je wilt kun je voor de volledigheid nog even het blauwe kader weghalen en je imagemap centeren...
<CENTER><IMG SRC="keuze.gif" WIDTH=500 HIGHT=200 USEMAP="#keuze" BORDER=0></CENTER>

Dat was het, je hebt nu een imagemap gemaakt. Bedenk er wel bij dat gebruikers van oudere browsers geen imagemaps kunnen lezen. Ze zien het plaatje wel maar ze kunnen het niet aanklikken. Als je, zoals ik dat in de introductie doe, je lezers daarop attent maakt en ze vervolgens adviseert om maar eens een nieuwe browser te downloaden is er niks aan de hand (tenzij ze geen nieuwe browser downloaden natuurlijk). Zorg er anders voor dat je onder je imagemap ook nog een tekst-georiënteerde link op je pagina zet, anders komen ze met geen mogelijkheid verder op je site. Het is maar dat je het weet.

Als je je lezers vooraf duidelijk wilt maken dat het plaatje dat er aankomt een imagemap is kun je in de <IMG> tag de optie ALT="xxxxxxx" gebruiken.
<IMG SRC="keuze.gif" WIDTH=500 HIGHT=200 USEMAP="#keuze" BORDER=0 ALT="Imagemap">
Je kunt deze optie trouwens altijd gebruiken om commentaar bij je plaatjes te zetten. Als de lezer dan met zijn muis over het plaatje gaat, kan hij dat commentaar lezen. Hij ziet het maar een paar seconden, dus citeer niet het hele boek als je alleen de omslag afbeeldt.
Als je met de muis over een imagemap met commentaar gaat zie je het commentaar niet als je met de muis op een link staat. In het voorbeeld dat we net gemaakt hebben, hebben we het hele plaatje klikbaar gemaakt. Je zult dus alleen commmentaar kunnen lezen als het plaatje nog niet geladen is.

Op het Internet is het van belang dat je het goede afbeeldingstype kiest voor elk plaatje dat je laat zien op een pagina. Hieronder zijn de twee meest voorkomende typen besproken met hun voor en nadelen en waar je ze het best voor kan gebruiken:

Type Kenmerken

.GIF het Graphics Interchange Format is een compressie-standaard voor afbeeldingen die onder andere gebaseerd is op grote vlakken met dezelfde kleur en maximaal 256 kleuren. Dit type is dus zeer geschikt voor afbeeldingen met grote vlakken en weinig kleuren, zoals logo's.

.JPEG de Joint Photographic Experts Group heeft een compressie-standaard ontwikkeld voor foto's. Dit type is dus uitstekend te gebruiken voor afbeeldingen zonder regelmatige vlakken en met veel kleuren (standaard 16,7 miljoen). In tegenstelling tot het GIF-type is dit een compressiemethode waarbij informatie verloren gaat. Bij foto's is dit nauwelijks te zien, bij afbeeldingen met vlakken is dit echter vooral bij de randen juist zeer goed te zien, zeker bij een hoge compressie (die compressie-verhouding is in te stellen).

Tip:
Gebruik bij het ontwerpen van grafische afbeeldingen alleen kleuren die als r-, g- en b-waarde ��n van de volgende waarden hebben: hexadecimaal: 00, 33, 66, 99, CC of FF; dat is decimaal: 0, 51, 102, 153, 204 of 255. Deze kleuren worden namelijk 'solide' weergegeven op een 256-kleuren scherm. De technische uitleg hiervoor staat hieronder:
Een kleur is opgebouwd uit een hoeveelheid rood, geel (of groen) en blauw. Een kleur kan daarom beschreven worden met een rgb-waarde. Deze r-, g- en b-waarde kunnen waarden hebben van 0 tot en met 255 (dus 256 mogelijkheden). Hiermee kan je dus 16,7 miljoen (256 x 256 x 256 = 16.777.216) kleuren maken. Als je een 256-kleuren scherm hebt, dan neemt de computer de dichtsbijzijnde kleur en zet er een paar puntjes van een andere kleur doorheen zodat de kleur op het scherm lijkt op de oorspronkelijke kleur. Dit proces, dat we dithering noemen, ziet er echter niet zo mooi uit.

Hier zie je wat er gebeurt als er een oranje kleur weergegeven moet worden: Zoals je wellicht uit je vingerverf-periode weet, kun je oranje maken door rood en geel met elkaar te mengen. Dat gebeurt hier ook. Door rode en gele pixels door elkaar te laten mengen, zie je oranje.

Als Windows ingesteld staat op 256 kleuren, dan neemt Windows daar een paar kleuren van in beslag om de windows-schermpjes in te kleuren waardoor er nog maar 216 kleuren vrij zijn. Dit zijn dus de kleuren die solide (dat wil zeggen, zonder dithering) weergegeven worden. Dit zijn de kleuren die met behulp van bovengenoemde r-, g- en b-waarden zijn opgebouwd.
Voor elke r-, g- en b-waarde heb je dus zes verschillende mogelijkheden. Op deze manier kan je dus 6 x 6 x 6 = 216 verschillende kleuren maken!

Wordt ongetwijfeld wel een keer vervolgd.........

P.S. Wil je ook zo'n grappig klokje, kijk dan in de FAQ voor instructies

Type	Kenmerken
.GIF	het Graphics Interchange Format is een compressie-standaard voor afbeeldingen die onder andere gebaseerd is op grote vlakken met dezelfde kleur en maximaal 256 kleuren. Dit type is dus zeer geschikt voor afbeeldingen met grote vlakken en weinig kleuren, zoals logo's.
.JPEG	de Joint Photographic Experts Group heeft een compressie-standaard ontwikkeld voor foto's. Dit type is dus uitstekend te gebruiken voor afbeeldingen zonder regelmatige vlakken en met veel kleuren (standaard 16,7 miljoen). In tegenstelling tot het GIF-type is dit een compressiemethode waarbij informatie verloren gaat. Bij foto's is dit nauwelijks te zien, bij afbeeldingen met vlakken is dit echter vooral bij de randen juist zeer goed te zien, zeker bij een hoge compressie (die compressie-verhouding is in te stellen).