Het schrijven van een web-pagina

Op deze pagina's wordt uitgelegd hoe HTML in elkaar zit. Ze zijn vooral bedoeld voor gebruikers van HTML 3 ondersteunende browsers (zoals IBM WebExplorer of Netscape). Het is niet compleet, omdat ik zelf ook nog niet alle mogelijkheden heb benut. Wanneer je iets duidelijk mist of commentaar hebt, stuur E-mail naar claudiac@euronet.nl.

17 januari 1997

Deze pagina is keer geraadpleegd.

Inhoud:

Inleiding

Een HTML-document is een tekstdocument met opmaakcodes. Je kunt in elke editor of tekstverwerker zo'n document maken, mits je het opslaat als tekst (ASCII of dos-text). Er zijn verschillende programma's (zoals HotDog en WebWriter) die het makkelijker maken de codes in het document te zetten. Ook kun je bij iedereen op het Web afkijken door de source te bekijken (dit is een standaard optie bij de meeste browsers).

Veel Internet aanbieders bieden de mogelijkheid een home-page op het Web te zetten. Wanneer je een HTML-document hebt kun je deze ftp-en naar je eigen directory (bij mij is het ftp adres bijvoorbeeld www.euronet.nl, mijn username claudiac en zo komen mijn files in www.euronet.nl/users/claudiac).

Wanneer de ruimte die je aanbieder biedt te weinig is of je maakt een commerciëe pagina kun je een eigen domein aanvragen (en daarvoor betalen).

De basis

HTML

Ten eerste wordt van het document aangegeven dat het een HTML-document is. Dit wordt aangegeven door aan het begin <HTML> te zetten en aan het eind van het document </HTML>.

Header en Body

Een HTML-document bestaat uit een header en een body. De header kan de title (naam) van het document bevatten en dit komt bij de meeste webbrowsers boven in het scherm te staan. <TITLE> betekent dat de title begint en </TITLE> betekent dat hij is afgelopen. Ook kan het http-adres van het document in de header worden aangegeven: <BASE = "url">. De body bevat de tekst van het document zelf. Het document zelf begint dan ook met <BODY> en eindigt met </BODY>.

Heading

HTML kent zes niveaus om een heading (kopje) aan te geven. Headings zijn groter en/of dikker afgebeeld dan gewone tekst. Heading 1 is het grootst en het dikst: hiermee geef je meestal aan hoe het document heet (dus vaak hetzelfde als de title). Een heading geef je als volgt aan: <H1> dit is een heading </H1>. Het is belangrijk om een heading af te sluiten, want anders wordt de tekst die erop volgt ook vet en/of groot.

Paragrafen

HTML ziet geen 'enter'. Om de tekst op de volgende regel te laten beginnen moet er daarom na de eerste paragraaf een <P> worden gezet. Dit betekent dat een nieuwe paragraaf begint. Het is netjes om ook de paragrafen af te sluiten met </P> , maar dat hoeft niet.

Wanneer bijvoorbeeld het postadres van een bedrijf vermeld staat, is het niet netjes om na elke regel een <P> te geven (sommige HTML-browsers geven bij <P> een lege regel.) Dan kan er <BR> (line-brake) gebruikt worden. <BR> zorgt er voor dat de tekst verder gaat op de volgende regel, zonder wit tussen de regels toe te voegen. Er bestaat geen </BR>.

Lijnen

Wat ook veel gebruikt wordt is <HR> (horizontal ruler). Bij <HR> ontstaat er een horizontale lijn op het scherm.

Uitlijnen

Standaard is een tekst links uitgelijnd. Dit kun je veranderen. Wanneer een tekst tussen <CENTER> en </CENTER> staat wordt het gecentreerd. Rechts uitlijnen doe je door de tekst tussen <RIGHT> en </RIGHT> te zetten.

Verborgen tekst

Soms wil je wat informatie in de tekst neerzetten als geheugensteuntje. Je wilt niet dat de lezer van de pagina dit ziet (bijvoorbeeld een uitleg bij de gebruikte HTML-codes, of de maker van de pagina). Dit doe je als volgt:

<!Dit ziet de lezer niet>

De tekst staat dus tussen < ! en >.

Extensies

Een HTML document heeft als extensie .html. Onder dos kan een extensie maar 3 letters bevatten, dus wordt het dan .htm.

Links

De grote kracht van HTML is dat teksten met elkaar verbonden kunnen zijn door middel van links. De HTML-browser van de gebruiker geeft door middel van een andere kleur of op een andere manier aan of er hypertext links zijn. Een link wordt aangegeven door <A> dat anchor betekent. Een link ziet er als volgt uit:
<A HREF= "filenaam"> dit is een link </A>.
Op de plek filenaam geef je aan waar de link naar verwijst.

Links naar andere documenten

Een voorbeeld van een link:
Dit is het begin van de opera Orfeo et Euridice door <A HREF= "gluck.html"> Christoph Willibald von Gluck </A> (1714-1787)
'Christoph Willibald von Gluck' wordt nu een link en wanneer hier met de muis op geklikt wordt, krijg je het document gluck.html te zien.

Dit zijn relatieve links. Ze verwijzen naar een document in dezelfde directory als het origineel. Je kunt ook verwijzen naar documenten in andere directories. Stel bijvoorbeeld dat je een link wilt naar een document over een moderne interpretatie van het verhaal van Orpheus en Eurydice door de schilder David Sandlin. Dan komt de link er bijvoorbeeld zo uit te zien.

<A HREF= "http://www.instantclassics.com/ic_html/running.html"> Orpheus en Eurydice </A>.
Dit is een absolute link.

Links naar gedeelten in documenten

Het is ook mogelijk om te verwijzen naar een gedeelte in een document. Stel dat je in document A wilt verwijzen naar een sectie in document B. Hiervoor moet er in B bij de betreffende sectie wel een anchor staan. Deze anchor noem ik bijvoorbeeld horatius. Dus:
(in B)
Naar <A NAME = "horatius"> dit stukje </A> wil ik verwijzen.
(in A)
Dit is mijn <A HREF = "documentB.html#horatius"> link </A> naar een sectie in document B.
Wanneer je nu in A op 'link' klikt, kom je bij 'dit stukje' in B terecht.

Ook kun je verwijzen naar gedeelte in het huidige document. Dus als je al in B bent:

Dit is een <A HREF = "#horatius"> link </A> naar de plek waar 'horatius' staat in B.
Op deze manier is de inhoudsopgave van dit document geregeld.

Links naar andere servers

Je kunt ook een link maken naar een andere server dan een WWW-server. Wanneer een adres begint met 'http://' weet je dat het verwijst naar een pagina op het WWW. Met <A HREF = "news:nl.fiets"> verwijs je naar de nieuwsgroep nl.fiets en zo kun je ook een link maken naar een ftp-, gopher- of wais server.

Extra HTML-codes

Met de vorige twee hoofdstukken kun je een goede HTML-pagina maken. In dit hoofdstuk volgen nog wat codes voor meer complexere documenten.

Lijsten

HTML ondersteunt ongenummerde, genummerde en definitie lijsten. Ik zal hier voorbeelden geven hoe die lijsten eruit zien.

Een ongenummerde lijst:
(UL staat voor unnumbered list, LI voor list item)

<UL>
<LI> Ovidius
<LI> Horatius
</UL>
Dit ziet er zo uit: Een genummerde lijst:
<OL>
<LI> Philemon en Baucis
<LI> Orpheus en Eurydice
</OL>
Dit komt er zo uit te zien:
  1. Philemon en Baucis
  2. Orpheus en Eurydice
Een definitie lijst:

<DL>
<DT> Ovidius
<DD> Publius Ovidius Naso (43 v. Chr. - 17 n. Chr.) is al op heel jeugdige leeftijd begonnen met dichten en heeft zijn debuut gemaakt als dichter van liefdespoezie. Andere bekende werken van zijn hand zijn de Metamorphosen, de Tristia en de Epistulae ex Ponto.
<DT> Horatius
<DD> Horatius (65-8 v. Chr.) is vooral bekend voor zijn gedichten over verschillende fonteinen.
</DL>
Dit komt er als volgt uit te zien:
Ovidius
Publius Ovidius Naso (43 v. Chr. - 17 n. Chr.) is al op heel jeugdige leeftijd begonnen met dichten en heeft zijn debuut gemaakt als dichter van liefdespoezie. Andere bekende werken van zijn hand zijn de Metamorphosen, de Tristia en de Epistulae ex Ponto.
Horatius
Horatius (65-8 v. Chr.) is vooral bekend van zijn gedichten over verschillende fonteinen.
Lijsten kunnen ook genest zijn in een andere lijst:

<UL>
<LI> een aantal werken van Ovidius
<UL>
<LI> Metamorphosen
<LI> Ars Amatoria
</UL>
<LI> werken van Horatius
<UL>
<LI> Fontanalia
</UL>
</UL>

Dit ziet er als volgt uit:

Het gebruik van <PRE>

HTML ziet geen 'enter'. Wanneer je bijvoorbeeld het volgende stukje wilt laten zien op het web (je hebt het bijvoorbeeld als word-document):
Chiamo il mio ben cosi,
quando si mostra il di,
quando s'asconde.
Ma, oh vano mio dolor!
L'idole del mio cor
non mi risponde.
Dan ziet het er als volgt uit:

Chiamo il mio ben cosi, quando si mostra il di, quando s'asconde. Ma, oh vano mio dolor! L'idole del mio cor non mi risponde.

Je kunt nu natuurlijk achter elke regel <BR> zetten, maar bij lange teksten is dit vaak onnodig veel werk. Hiervoor gebruik je dan <PRE>. In gedeelte tussen <PRE> en </PRE> is het mogelijk om meerdere spaties tussen twee woorden in te zetten en ook returns zijn geldig. Je kunt beter geen andere HTML-codes gebruiken in een preformatted tekst.

Stijlen

In HTML kun je bepaalde stukken tekst afscheiden van de rest door ze cursief te maken of vet. Er zijn twee manieren om dit te doen. Je kunt een stuk gewoon vet of cursief maken met <B> (voor 'bold) of <I> (voor 'italic'). Het is mooier om het af te laten hangen van de browser van de gebruiker. Wanneer ik <EM> (voor emphasis) gebruik, zorgt de browser er voor dat dit gedeelte bijvoorbeeld schuin afgedrukt wordt . Dit soort stijlen heet logische stijlen. In het eerste geval is sprake van fysieke stijlen. Even op een rijtje:

Logische stijlen:

<DFN>
voor de definitie van een woord, over het algemeen schuin afgedrukt.
<EM>
voor nadruk. Over het algemeen schuin afgedrukt.
<CITE>
voor titels van boeken e.d. Alweer schuin afgedrukt.
<CODE>
voor stukjes programma-code. Afgedrukt in een 'typemachine' lettertype. (dit dus).
<KBD>
om aan te geven waar de gebruiker gegevens in kan voeren, vaak hetzelfde afgebeeld als <CODE>.
<SAMP>
voor computer status berichtjes (zoals foutmeldingen). Eveneens vaak hetzelfde afgebeeld als <CODE>.
<STRONG>
voor heel veel nadruk, vaak vet afgedrukt
<VAR>
waar de gebruiker een variabele vervangt door een specifieke waarde.
Fysieke stijlen:
<B>
vet
<I>
schuin
<TT>
typemachine tekst
Een stuk dat op een bepaalde manier weergegeven moet worden begint met <stijl> en eindigt met </stijl>.

Om een stuk van iemand te citeren wordt meestal <BLOCKQUOTE> gebruikt. Op deze manier wordt het betreffende stuk in een apart 'blok' weergegeven.

Ook wordt vaak gebruik gemaakt van <ADDRESS> om (meestal aan het eind van de pagina) het E-mail adres van de contactpersoon te benadrukken.

Het is niet verstandig verschillende stijlen tegelijk te gebruiken (bv <B> <I> tekstje </I> </B>. Sommige browsers slaan er dan een over, sommige laten ze allebei zien.

Je kunt ook het lettertype vergroten of verkleinen. Technisch gezien is hier geen sprake van een stijl. Bijvoorbeeld: <FONT SIZE = +3> Dit wordt heel groot </FONT> en <FONT SIZE = -2> dit heel klein </FONT>.

Speciale tekens

De tekens <, >, & en " hebben elk hun eigen betekenis in HTML. Daarom kunnen ze niet gewoon gebruikt worden. Om er voor te zorgen dat de tekst na het 'vreemde teken' zonder spatie verder gaat, zet je een ';' achter het teken (Dus bijvoorbeeld: &lt;;). Hieronder volgt een lijstje voorbeelden van tekens en hoe ze worden afgebeeld op het scherm.
&lt <
&gt >
&amp &
&quot "
&ouml ö
&ntilde ñ
&Egrave È

Mailto

Wanneer op een 'mailto' link geklikt wordt, komt er een windowtje op het scherm te staan waardoor de lezer direct E-mail naar de maker van de pagina kan sturen: <A HREF = "mailto:claudiac@euronet.nl"> Dit is een mailto link </A>.

Plaatjes

De meeste browsers kunnen plaatjes aan in GIF, JPG of X-Bitmap (XBM) formaat. Het duurt voor veel gebruikers lang voordat een plaatje is ingeladen, dus het is niet verstandig veel grote plaatjes te gebruiken. Om een plaatje in een document te laten zien, gebruik: <IMG SRC = "filenaam"> Op de plaats van 'filenaam' staat, net als bij het gebruik van links, waar het plaatje is. Meestal is dit in dezelfde directory, dus vaak staat er zoiets als: <IMG SRC = "mijnplaatje.jpg ">. De naam van het file eindigt altijd op .jpg, .gif of .xbm. Normaal gesproken wordt na een plaatje de tekst rechtsonder van het plaatje uitgelijnd. Dus:

Hier komt de tekst terecht ten opzichte van het plaatje

Met IMG ALIGN = TOP SRC = " mijnplaatje.gif " wordt de tekst aan de bovenkant uitgelijnd.

ALIGN = MIDDLE geeft dit resultaat.

Het is netjes om bij een plaatje de hoogte en de breedte aan te geven. Wanneer de lezer dan het document inlaadt, komt eerst de tekst op het beeldscherm en worden daarna pas de plaatjes ingeladen. De hoogte en de breedte kom je te weten door het plaatje bijvoorbeeld in te laden in een viewer en dan de resolutie op te vragen. Bij dit plaatje is de hoogte 169 en de breedte 138. <IMG HEIGHT = 169 WIDTH = 138 SRC = "plaatje.jpg"> is dan de juiste code.

Sommige browsers kunnen geen plaatjes weergeven. Wanneer ik dan bijvoorbeeld dit aangeef: <IMG SRC = "bolletje.gif" ALT = "o"> dan krijgt degene die zo'n browser gebruikt in plaats van mijn bolletje een o te zien.

Wanneer je een geluid wilt laten horen of een plaatje met een andere extensie wilt laten zien kun je er een link naartoe maken. Dit kun je ook doen wanneer je een groot plaatje wilt laten zien: zo kan de gebruiker zelf bepalen of hij het bekijkt of niet.

Wanneer een gebruiker bijvoorbeeld op een link naar een geluidsfragment klikt wordt (afhankelijk van de hard- en software die hij gebruikt) automatisch een audiospeler opgestart en het geluidsfragment afgespeeld.

Achtergrondjes

Je kunt de BODY van een document een achtergrond geven. Je kunt hiervoor een plaatje gebruiken of een steunkleur. De plaatjes die gebruikt worden zijn klein en iteratief: wanneer je steeds hetzelfde plaatje achter en onder elkaar zet, krijg je een geheel. Het is beter geen grote plaatjes te gebruiken omdat het dan heel veel tijd kost een pagina in te laden. De achtergrond wordt als volgt aangeroepen:
<BODY BACKGROUND = "bloemetjes.gif">Document </BODY>
Wanneer je de achtergrond in een bepaalde kleur wilt hebben (geen plaatje dus) moet je de rgb-code weten die voor een bepaalde kleur staat. Deze codes zijn bijvoorbeeld hier te vinden. Een voorbeeld:
<BODY BGCOLOR = "E6E8FA"> Document </BODY>
Nu wordt de achtergrond zilverkleurig.

Wanneer je de achtergrond hebt bepaald, is het vaak ook nodig de voorgrond te veranderen. Dit kan je door de kleuren te veranderen van de tekst, de links, de links die al gebruikt zijn en de link die nu gebruikt wordt. De kleurcodes zijn hetzelfde als bij de achtergrondkleuren. Een voorbeeld:

<BODY BGCOLOR = "#000000" TEXT = "#F0F0F0" LINK = "#FFF000" VLINK = "#22AA22" ALINK = "#0077FF">
De tekst is lichtgrijs (TEXT) op zwart (BGCOLOR) en de links zijn eerst geel (LINK), worden blauw-groen wanneer ze geactiveerd worden (VLINK) en licht groen wanneer ze bezocht zijn (ALINK).
</BODY>

Tabellen

Naar mijn idee kun je het makkelijkst tabellen maken door een HTML editor te gebruiken of de 'Table Sampler' van Netscape erbij te houden en dan de gewenste tabel over te nemen. Het is noodzakelijk om overzichtelijk te werken, anders wordt het snel een chaos. Ik geef hier de basisprincipes van een tabel weer. Eerst een voorbeeldje:
<TABLE BORDER>
<TR>
<TD> A </TD>
<TD> B </TD>
<TD> C </TD>
</TR>
<TR>
<TD> D </TD>
<TD> E </TD>
<TD> F </TD>
</TR>
</TABLE>
Het resultaat is als volgt:
A B C
D E F

Table Tags

<TABLE>
Een tabel begint met <TABLE> en eindigt met </TABLE>. Hij heeft geen randen, tenzij het attribuut <BORDER> is toegevoegd.
<TR> </TR>
Dit staat voor een rij in een tabel. Dus de hoeveelheid keer <TR>geeft aan hoeveel rijen er zijn.
<TD> </TD>
Dit zijn de data in een tabel. Data cellen kunnen alleen in tabel rijen voorkomen. Standaard wordt er links uitgelijnd, in het midden van de cel. Dit kan worden aangepast door bv ALIGN = RIGHT en VALIGN = TOP. De regels binnen een cel worden afgebroken zodat ze aangepast zijn aan de grootte van de andere cellen. NOWRAP voorkomt dit: een regel wordt niet afgebroken.
<TH> </TH>
Dit staat voor de tabel Header. Header cellen zijn gelijk aan data cellen, met als uitzondering dat het lettertype vet is en er in het midden wordt uitgelijnd.
<CAPTION> </CAPTION>
Dit is het bijschrift bij een tabel. Een bijschrift staat in de tabel, maar niet in de rijen en de cellen. Standaard staat ALIGN = TOP en ze zijn horizontaal gecentreerd. Dit kan uiteraard ook worden aangepast.

De tabel attributen

BORDER
Dit attribuut komt op de volgende plaats <TABLE BORDER>. Wanneer aanwezig komen er randen in de tabel. De breedte van deze randen kan worden aangepast door een getal in te voegen <TABLE BORDER = 5>. Zo kun je bijvoorbeeld een tabel in een tabel kleinere randen geven.
ALIGN
In een CAPTION bepaalt ALIGN of het bijschrift boven of onder de tabel komt. De waarden kunnen dus top of bottom zijn, standaard is het top. In TR, TH of TD bepaalt ALIGN of de tekst in de cellen uitgelijnd is naar links, rechts, of gecentreerd is. De waarden zijn dus left, right en center.
VALIGN
In TR, TH of TD bepaalt VALIGN of de tekst in de cellen uitgelijnd is aan de bovenkant of de onderkant van de cel, of verticaal gecentreerd is. Er kan ook verticaal gecentreerd worden naar een basislijn. Waarden zijn top, middle, bottom en baseline.
NOWRAP
Wanneer dit attribuut in een cel staat (TH of TD) betekent dit dat de tekst in een cel niet afgebroken wordt om in de cel te passen. Het gebruik van dit attribuut kan dus leiden tot heel erg brede cellen.
COLSPAN
Dit attribuut bepaalt hoeveel kolommen van de tabel een bepaalde cel (TH of TD) inneemt. Standaard is dit 1.
ROWSPAN
Dit attribuut geeft aan hoeveel rijen een cel in een tabel gebruikt. Ook dit is standaard 1.
CELLSPACING
Standaard is dit 2. Door er een andere waarde aan te geven (vb. CELLSPACING = 1) kan de ruimte veranderd worden tussen de cellen in een tabel. De CELLSPACING wordt aangegeven voor een hele tabel.
CELLPADDING
Standaard is dit 1. Door deze waarde te veranderen kan de ruimte worden aangepast tussen de rand en de inhoud van de cel. <TABLE BORDER = 0 CELLSPACING = 0 CELLPADDING = 0> geeft de meest compacte tabel die mogelijk is.
WIDTH
Dit geeft de gewenste breedte aan van een tabel (vb. TABLE WIDTH = 50%). Dit kan in waarden gedaan worden of in percentages. Het attribuut kan ook in een cel staan (TH of TD). Dan wordt de breedte van de cel bepaald: ook dit kan in absolute waarden of in percentages worden aangegeven. Om het geheel wat duidelijker te maken geef ik een voorbeeld waarbij veel van de attributen gebruikt worden:
<TABLE BORDER>
<CAPTION ALIGN = TOP> Tabel </CAPTION>
<TR>
<TD> <TH ROWSPAN = 2> </TH>
<TH COLSPAN = 2> Gemiddelde </TH> </TD>
</TR>
<TR>
<TD><TH>Lengte </TH>
<TH>Gewicht </TH></TD>
</TR>
<TR>
<TH ROWSPAN = 2> Geslacht </TH>
<TH>Man </TH>
<TD>1,90 </TD>
<TD>84 </TD>
</TR>
<TR>
<TH>Vrouw </TH>
<TD>1,70 </TD>
<TD>65 </TD>
</TR>
</TABLE>
Dit ziet er zo uit:
Tabel
Gemiddelde
Lengte Gewicht
Geslacht Man 1,90 84
Vrouw 1,70 65

Frames

Frames hebben als doel de web-pagina flexibeler te maken. Je kunt een pagina opdelen, waardoor bijvoorbeeld het volgende mogelijk is: Voordat de documenten in de frames worden geplaatst, moet eerst het raamwerk gemaakt worden (Frame Document). Dit raamwerk is opgebouwd als een 'normaal' html document:
<HTML>

<HEAD>
</HEAD>

<FRAMESET>
</FRAMESET>

</HTML>
Binnen de frameset worden frames gedefinieerd. De manier waarop dit gedaan wordt komt overeen met het gebruik van tabellen.

Frameset tags

<FRAMESET>
Dit is de algemene 'houder' voor een frame. Het heeft twee attributen: ROWS en COLS. Een Frame Document heeft geen BODY en tags die normaal gesproken in de BODY staan, mogen niet voor het FRAMESET tag staan, anders wordt de FRAMESET genegeerd. Binnen een FRAMESET kunnen alleen FRAME-tags staan, er kunnen andere FRAMESETS in staan of het NOFRAME tag.
ROWS
Het ROWS attribuut bestaat uit een lijst met waarden, door komma's gescheiden. Deze waarden kunnen percentages zijn of absolute pixel waarden. Het aantal rijen is gelijk aan het aantal horizontaal gescheiden frames. Een aantal voorbeelden:
COLS
Het COLS attribuut ziet er hetzelfde uit als het ROWS attribuut, alleen zorgt het voor een verticale scheiding van de frames:

Een FRAMESET tag kan 'genest' zijn in andere FRAMESET tags. Dit betekent dat binnen een FRAMESET een nieuwe FRAMESET gedefinieerd kan worden:






<FRAMESET COLS = "50%,50%">
<FRAMESET ROWS = "50%,50%">
<FRAME SRC = " cell.html">
<FRAME SRC = " cell.html">
</FRAMESET>
<FRAMESET ROWS = "33%,33%,33%">
<FRAME SRC = " cell.html">
<FRAME SRC = " cell.html">
<FRAME SRC = " cell.html">
</FRAMESET>
</FRAMESET>

FRAME

Deze tag definieert een frame in een FRAMESET. Er zijn 6 attributen:
SRC
Het SRC attribuut bevat het URL van het document wat in het frame moet komen te staan. Frames zonder SRC worden geïnterpreteerd als lege frames. De syntax is als volgt: SRC = "url"
NAME
Met deze tag wordt een naam aan het frame gegeven, zodat, wanneer een link wordt gebruikt, het document dat door de link wordt aangeroepen in het juiste frame geplaatst kan worden. De syntax is weer als volgt: NAME = "naam". In een document wordt een link voor dit frame als volgt weergegeven: <A HREF = "url" target = "naam". Meer hierover in het gedeelte over targets.
MARGINWIDTH
De linker- en rechter marges worden beïnvloed met behulp van dit tag. Wanneer dit tag niet gebruikt wordt, hangt de marge af van de browser van de lezer.
MARGINHEIGHT
Dit doet hetzelfde als MARGINWIDTH, alleen dan voor de onder- en bovenmarge van het frame.
SCROLLING
SCROLLING geeft aan of een frame een scrollbar moet hebben. SCROLLING = "YES" zorgt ervoor dat er een scrollbar is, NO zorgt ervoor dat er geen scrollbar is, en AUTO laat de browser zelf bepalen of er een scrollbar komt. Standaard staat hij op AUTO.
NORESIZE
Aan dit attribuut kan geen waarde worden gegeven. Het zorgt ervoor dat het frame niet kan worden aangepast door de lezer; normaal gesproken kan een lezer zelf de grootte van de frames aanpassen (bijvoorbeeld door de randen te slepen met de muis).

NOFRAMES

Deze tag is bedoeld om een alternatieve inhoud van de pagina te presenteren, voor als een lezer een browser heeft die geen frames ondersteunt. Een browser die frames ondersteunt negeert alles wat tussen het begin en het eind van het NOFRAMES tag staat.

Meer voorbeelden van frames zijn te vinden bij Netscape.

Targets

Targets zorgen ervoor dat de schrijver kan bepalen in welk frame zijn document terecht komt. Wanneer een lezer een link gebruikt, komt deze normaal gesproken terecht in het frame waarin deze link stond of wordt een nieuw window gestart. Door een targetnaam toe te voegen aan de link, komt het document terecht in het frame met de juiste naam.

Targeting in HTML gebeurt met het TARGET attribuut. Een aantal voorbeelden:

Alle target names moeten beginnen met een alfa-numeriek karakter. Alle andere namen worden genegeerd. Er is een aantal uitzonderingen, de zogenaamde 'magische target namen':
TARGET = "_blank"
De link zal altijd geladen worden in een leeg, nieuw window.
TARGET = "_self"
De link wordt geladen in hetzelfde window als het oorspronkelijke document.
TARGET = "_parent"
De link geeft aan dat het gelinkte document in de eerste 'parent' van de frameset terecht komt. Bij een geneste frameset komt de link dus een stapje hoger in de hiërarchie terecht.
TARGET = "_top"
Dit target zorgt ervoor dat het document dat de link aangeeft niet in een frame terecht komt, maar het hele window 'overschrijft'.

Gebruik van CGI-bin

Om forms, imagemaps en een teller te gebruiken heb je programmaatjes nodig die in de CGI-bin van de server staan. Bij Euronet staan die in /cgi-bin. Wanneer je ze niet kunt vinden kun je het beste je provider raadplegen.

Forms

Met een 'mailto' link kun je feedback krijgen van de lezers van je pagina. Je hebt zo niet veel controle over welke informatie je precies binnen zult krijgen. Om deze informatie een beetje te kunnen 'leiden', kun je gebruik maken van forms (formulieren). Een form kan er als volgt uitzien:


Naam
E-mail adres

Opmerkingen:



De HTML-code: bovenstaand voorbeeld heb ik in een tabel gezet (dan ziet het er mooier uit). Maar voor de duidelijkheid haal ik die bij deze code weg.

<FORM METHOD = "POST" ACTION = "/cgi-bin/mailto/~claudiac/htmlgids/form.html?claudiac">
Naam:
<INPUT NAME= "name" SIZE = 40>
E-mail adres:
<INPUT NAME = "email" SIZE = 40>
Opmerkingen:
<textarea name= "comments" cols=40 rows=5></textarea>
<INPUT TYPE= "reset" VALUE="Wis">
<INPUT TYPE= "submit" VALUE="Verstuur">
</FORM>
Ik zal hier per punt in bovenstaande form aangeven wat het betekent. Omdat ik geen complete form bij elk voorbeeld heb gemaakt kunnen er, als een bepaalde optie wordt gekozen, foutmeldingen op het beeldscherm verschijnen.

Method

De method die je aan moet geven is afhankelijk van het script dat op de server staat. Bij euronet is dat de 'post' method.

Action

Om de informatie die in het formulier staat in je mailbox te krijgen, moet de server wel forms ondersteunen. Meestal staan die in de cgi-bin, dus bijvoorbeeld: http://www.euronet.nl/cgi-bin/mailto.

Vervolgens geef je aan welke pagina de lezer te zien krijgt als hij het formulier heeft verstuurd. In dit geval is dat ~claudiac/htmlgids/form.html.

Na ? komt de mailbox te staan waar de informatie naar toe verstuurd moet worden. Dit is in dit geval dus claudiac(@euronet.nl).

Input

Eerst geef je de variabele (het gegeven dat de lezer intypt) een naam met name = "mijnnaam" . Door dit te doen komt de informatie netjes geordend in de mailbox terecht. Vervolgens geef je het type aan. Er zijn verschillende types:
Text
Als je geen type aangeeft, wordt het vanzelf een text type (entry field). Er verschijnt een balk (net als in het voorbeeld) waar tekst in getypt kan worden. Met SIZE geef je de lengte aan van die balk.
Checkbox
was gedaan
opgeruimd

De code is als volgt:
<INPUT NAME = "was" TYPE = "CHECKBOX" VALUE = "gedaan" CHECKED>
<INPUT NAME = "opruimen" TYPE = "CHECKBOX" VALUE = "gedaan">

Door de tag 'CHECKED' staat hij standaard aangekruisd. Dit kan uiteraard ook weg worden gelaten. 'Value' geeft de waarde aan wanneer de de checkbox is aangekruisd. In dit geval is dat dus 'gedaan'.

Radio button
Ik trek een kaart:
schoppen
klaver
<INPUT NAME = "kaart" TYPE = "RADIO" VALUE = "schoppen;" CHECKED>
<INPUT NAME = "kaart" TYPE = "RADIO" VALUE = "klaver">

Omdat de NAME bij beiden hetzelfde is, kan je maar een van de twee aanklikken. Een radio button wordt dus vaak gebruikt bij het aangeven van 'geslacht' in een enquete.

Submit
Met <INPUT TYPE = "SUBMIT" VALUE = "verstuur"> wordt de form verstuurd. Er komt nu een 'knop' op het beeldscherm te staan waar 'verstuur' op staat. Wanneer hier op gedrukt wordt, wordt de informatie gepost naar het mailadres bij ACTION gespecificeerd, en krijgt de lezer de response pagina te zien.
Reset
Met Reset: <INPUT TYPE = "RESET" VALUE = "wis"> wordt de informatie gewist en kan de lezer alles opnieuw intypen.
Password
Met <INPUT TYPE= "password" NAME = "wachtwoord" SIZE = 20> ontstaat er een veld voor een wachtwoord: waar er getypt wordt komen asteriksjes op het scherm, maar wat ingetypt wordt, wordt wel onthouden. De informatie die op deze manier binnenkomt kan gebruikt worden om bijvoorbeeld te controleren of de gebruiker wel toegang heeft tot de pagina. Hoe passwords bij Euronet te gebruiken zijn is hier te vinden.
List box
Met een list box kan gekozen worden uit verschillende opties: Kleur haar:

<SELECT NAME = "haar" SIZE = 3>
<OPTION> bruin
<OPTION> blond
<OPTION> zwart
<OPTION> geen
</SELECT>

Met SIZE wordt aangegeven hoeveel mogelijkheden er tegelijk in de listbox staan. Als dit kleiner is dan het totaal aantal mogelijkheden ontstaat er een scrollbar. Het is ook mogelijk om meerdere selecties te kiezen, hiervoor moet er MULTIPLE in deze regel staan: <SELECT NAME = "haar" SIZE = 3 MULTIPLE>.

Hidden
Het is ook mogelijk om velden aan te maken die de lezer niet ziet: deze kan dus alleen door ingewijden gebruikt worden. <INPUT TYPE = "HIDDEN" NAME = "verborgen veld"> geeft dit resultaat.
Textarea
Je wilt lezers ook soms de mogelijkheid geven om wat meer te vertellen dan in een regel mogelijk is. Dan maak je een tekstgebied van de gewenste grote aan: <TEXTAREA NAME = "opmerkingen" ROWS = 4 COLS = 40></TEXTAREA> geeft dit resultaat (ROWS voor rijen en COLS voor het aantal kolommen/tekens):

Door voor </TEXTAREA> tekst te typen, komt er een standaard tekst in het veld.

Imagemaps

Imagemaps worden ook wel clickable maps genoemd: je hebt een plaatje, en als je op een deel van het plaatje klikt kom je in het gelinkte document terecht.

Wat je eerst nodig hebt is het plaatje in GIF formaat. Vervolgens heb je een 'map' nodig: dit is een document waar de coördinaten worden aangegeven en de links voor die coördinaten. Dit file kun je het makkelijkst in een programmaatje als imagemap maken: je geeft met de muis een gebied aan (een rechthoek, polygoon of ovaal) en het programma berekent de coördinaten. Een voorbeeldje van een mapfile:

# default http://www.euronet.nl/~claudiac/htmlgids/images/naast.html
# rect http://www.euronet.nl/~claudiac/htmlgids/images/tekst.html 24,99 155,135
# poly http://www.euronet.nl/~claudiac/htmlgids/images/schildpad.html 138,58 138,58 115,27 61,26 17,83 27,95 162,97
(Dit is met Qdeck WebImager gedaan)

Uitleg:
Wanneer er op de rechthoek binnen de coördinaten 24, 99 155,135 wordt geklikt, ga je naar tekst.html, wanneer je binnen de coördinaten die de polygoon definiëren klikt, ga je naar schildpad.html en wanneer je in het plaatje, maar niet binnen een gedefinieerd figuur klikt, ga je naar naast.html. Ik heb gemerkt dat in het mapfile geen lokale adressen gebruikt kunnen worden; het werkt alleen wanneer het hele pad wordt aangegeven.

Om van de imagemap gebruik te kunnen maken, moet de server wel imagemaps ondersteunen. Het gaat op dezelfde manier aan als bij forms: over het algemeen staat er een programmaatje imagemap in de cgi-bin van de server. Meestal wordt de standaard van NCSA gebruikt, ook bij euronet is dit het geval (wanneer er een andere standaard wordt gebruikt ziet het imagemap file er iets anders uit. Bij programmaatjes die de mapfiles maken kun je dan ook vaak kiezen tussen verschillende standaarden).

Het aanroepen van het file gaat als volgt:
<A HREF = "/cgi-bin/imagemap/~claudiac/htmlgids/images/plaatje.map">
<IMG SRC = "plaatje.gif" ISMAP>
</A>

Client-side imagemaps

In het bovenstaande wordt het map-bestand (waar de coördinaten in staan) aangeroepen door een cgi-script. Een client-side imagemap zorgt ervoor dat er geen cgi-script nodig is om de imagemap te gebruiken; de coöordinaten worden aangegeven in de html. Een client-side imagemap is te herkennen aan het attribuut USEMAP. Een imagemap wordt op deze manier als volgt gecreëerd:
<MAP NAME = "naam">
<AREA SHAPE = "RECT" COORDS = "10,10,49,49" HREF = "url1">
<AREA SHAPE = "RECT" COORDS = "60,10,99,49" HREF = "url2">
<AREA SHAPE = "RECT" COORDS = "110,10,149,49" HREF = "url3">
<AREA SHAPE = "RECT" COORDS = "0,0,159,59" HREF = "NOHREF">
</MAP>
< IMG SRC = "url" USEMAP = "#naam">
De coördinaten zijn voor rechthoeken als volgt beschreven: "links,boven,rechts,onder". De volgende vormen kunnen gebruikt worden: RECT (rechthoek), POLY (polygoon) en CIRCLE (cirkel). Wanneer het SHAPE-tag wordt weggelaten wordt uitgegaan van een rechthoek.

Het NOHREF tag zorgt er voor dat er in dit gebied niks gebeurt wanneer het geselecteerd wordt.

Teller

Aan het begin van dit document staat ook een tellertje. Hierin wordt bijgehouden hoevaak deze pagina wordt geraadpleegd. Hoe dit werkt wordt perfect uitgelegd door Sake Blok. Vandaar dat ik dat hier maar heel kort uitleg.

Net als bij imagemaps en forms kan de teller alleen gebruikt worden als dat door de server ondersteund wordt. In de CGI-bin bij Euronet staat een programmaatje 'counter' dat op de volgende manier wordt aangeroepen:

Deze pagina is <img src="/cgi-bin/counter/~claudiac/counter"> keer geraadpleegd.

Wil de teller werken dan moet in je directory een lege file staan die 'counter' heet. Wanneer het plaatje dan wordt ingeladen wordt automatisch dit file aangepast en het juiste cijfer meegegeven.

Je kunt het tellertje ook nog een mooie kleur meegeven en er eventueel romeinse cijfers van maken. Door toevoeging van 'ALIGN = MIDDLE' komt het tellertje netjes ten opzichte van de tekst te staan en door 'HSPACE = 2' ontstaat er wat ruimte tussen de teller en de rest van de tekst:

Deze pagina is <img src="/cgi-bin/counter/~claudiac/counter?color=FF0000" ALIGN = MIDDLE HSPACE = 2> keer geraadpleegd.

Terug naar het begin.
E-mail naar claudiac@euronet.nl.