Belangrijke termen
- WWW
- World Wide Web
- Web
- World Wide Web
- SGML
- Standard Generalized Markup Language--een standaard om opmaaktalen
te beschrijven
- DTD
- Document Type Definition--dit is de formele specificatie van een opmaaktaal,
die geschreven is met behulp van SGML
- HTML
- HyperText Markup Language--HTML is een SGML DTD
In gewoon Nederlands betekent dit dat HTML een verzameling stijlen
is, die onafhankelijk is van het gebruikte computersysteem. Het definieert
hiermee de verschillende componenten van het WWW-document. HTML werd ontwikkeld
door Tim Berners-Lee ,die werkte bij CERN, het Europese laboratorium voor
deeltjesfysica in Geneve.
Wat staat er niet in
Deze inleiding gaat er vanuit dat :
- u weet hoe NCSA Mosaic, Netscape of een andere webbrowser(bladerprogramma)
werkt
- u een algemene kennis heeft van hoe een server en aangesloten computers
werken
- u toegang heeft tot een webserver of dat u thuis de HTML-pagina's kunt
bekijken vanaf uw eigen computer
HTML-versie
Deze cursus behandelt de meest recente specificatie van HTML-versie
2.0 plus een aantal algemeen aanvaardde uitbreidingen. De ontwikkelingen
van HTML gaan echter nog steeds verder.
HTML-documenten
Wat is een HTML-document
HTML-documenten worden gemaakt als tekstbestanden(ASCII files) met behulp
van een tekstverwerker (b.v. Emacs of vi op UNIX machines, BBEdit op een
Macintosh of Notepad op een Windows machine).
HTML-editors
Op het internet zijjn verschillende HTML-editors beschikbaar als shareware.
De mogelijkheden zijn legio, maar het is aan te raden om eerst de basiskennis
van HTML op te pakken voor u een editor gaat gebruiken.
Als u nog geen keuze hebt gemaakt kunt u hier
een online listing van HTML- editors vinden (georganiseerd door een
platform).
Hoe krijgt u uw bestanden op een server
Als u toegang heeft tot een webserver op school of op uw werk moet u
contact opnemen met dewebmaster (de persoon die de server beheert)
om te weten te komen hoe u uw bestanden op het Web kunt krijgen. Via Flevonetkunt
u, als medewerker, uw pagina's met behulp van FTP opsturen naar de juiste
directory. (voor http://www.urk.flnet.nl/test/kerken moet het bestand naar
ftp://ftp.urk.flnet.nl/test/kerken/index.html)
Wat zijn labels(tags)
Een element is een fundamenteel onderdeel van de struktuur
van een tekstdocument. Voorbeelden zijn: heads, tables, paragraphs, and
lists. U moet het zo zien: U gebruikt labels om de elementen van een tekst
te markeren voor een browser. Elementen kunnen tekst, andere elementen
of een combinatie daarvan bevatten.
Om de elementen binnen een HTML-document aan te duiden gebruikt u labels
(tags). HTML-labels bestaan uit een 'kleiner-dan' teken (<),
een labelnaam, en een 'groter-dan' teken (>). Labels komen
meestal voor als paar(b.v.<H1> en </H1>)
om het begin en het eind van de instruktie aan te geven. De eindlabel lijkt
op de beginlabel alleen staat er een slash(/) voor de tekst. HTML-labels
staan in onderstaande lijst.
Sommige elementen kunnen een attribuut bevatten, waarmee
extra informatie kan worden gespecificeerd. U kunt bijvoorbeeld de uitlijning
van plaatjes aangeven Labels met mogelijke attributen staan op onderstaande
lijst.
LET OP: HTML is niet gebonden aan hoofd- of kleine letters.
<title> is hetzelfde als <TITLE> of <TiTlE>.
Er zijn een paar uitzonderingen, die staan in Escape series.
Niet alle labels worden door alle browsers herkend. Meestal worden nietherkende
labels genegeerd.
Het minimale HTML-document
Ieder HTML-document moet bepaalde standaardlabels bevatten. Elk document
bestaat uit kop en inhoud(body). De kop bevat de titel en de inhoud bevat
de eigenlijke tekst met alle opmaakgegevens. Browsers verwachten specifieke
informatie, omdat ze zijn geprogrammeerd volgens expect HTML en SGML specificaties.
Vereiste elementen staan in dit voorbeelddocument:
<html>
<head>
<TITLE>Een eenvoudig voorbeeld</TITLE>
</head>
<body>
<H1>HTML is makkelijk te leren</H1>
<P>Welkom in de wereld van HTML.
Dit is de eerste paragraaf. Hoewel kort,
het blijft een paragraaf.
</P>
<P>En dit is de tweede paragraaf.</P>
</body>
</html>
De vereiste elementen zijn de <html>, <head>, <title>
en <body> labels(tags) (en de bijbehorende eindlabels). Omdat ieder
bestand deze labels moet bevatten kunt u hier het beste een standaardbestand
van maken.
Een leermiddel
Om een kopie van het bestand te zien zoals uw browser het leest klikt
u op View Source in het browser-menu. De inhoud van het bestand, met alle
HTML-labels, verschijnt nu in een nieuw venster.
Dit is een ideale manier om te zien hoe andere mensen HTML gebruiken.
Het hoeft echter niet altijd even goed in elkaar te zitten, maar met wat
hulp van handboeken of kennissen kunt u vast wel onderscheid maken.
Denk erom dat u een bronbestand kunt wegschrijven op uw harddisk of
floppy, zodat u het bestand als blauwdruk kunt gebruiken voor uw eigen
pagina's.
Opmaaklabels
HTML
Dit element verteld uw browser dat het bestand HTML-code bevat. De bestandsextensie
.html geeft ook aan dat het om een HTML-document gaat en moet
ook gebruikt worden. (Als u beperkt wordt tot 8.3 bestandsnamen (b.v.,
flevonet.htm, gebruik dan .htm als extensie.)
HEAD
De kop geeft het stuk bestand aan waar de titel in staat. Die titel
verschijnt ook in de bovenrand van het venster.
TITEL
Het titelelement bevat de documenttitel en is bedoeld om de globale
inhoud aan te geven. De titel verschijnt niet allen in de rand van het
venster van de browser, maar ook bookmarks (merktekens) vermelden de titel
van het bestand. De titel is ook het element waar een WAIS zoekprogramma
naar zoekt.
U zou bijvoorbeeld de verkorte titel van een boek met het betreffende
hoofdstuk kunnen weergeven: NCSA Mosaic Guide (Windows): Installation.
Dit verteld de softwarenaam, de organisatie en de hoofdstuktitel, wat duidelijker
is dan allen de titel Installation. In het algemeen geldt: Hou titels
korter dan 64 tekens.
BODY
Het tweede en grootste deel van uw HTML-document is de body(inhoud).
Hierin bevind zich de zichtbare tekst van uw document. Hieronder volgen
de labels die binnen de body worden gebruikt.
Headings(kopregels)
HTML heeft zes formaten van kopregels, genummerd van 1 tot 6, waarvan
1 de grootste is. Kopregels worden groter en vetter weergegeven dan de
rest van de tekst. De eerste kopregel van elk document moet met <H1>
worden gelabeld.
De syntax van het kopregel-element is:
<Hy>Tekst van de kopregel
</Hy>
waarbij y een nummer van 1 tot 6 is, wat het formaat weergeeft.
Spring niet over van het ene formaat naar het andere binnen uw document.
Paragrafen
In tegenstelling tot andere tekstverwerkers, maakt het gebruik van harde
returns in HTML niet uit. Het maakt dus niet uit hoelang uw regels zijn,
maar het is beter ze korter dan 72 tekens te houden. Het afbreken van zinnen
kan op iedere plaats en meerdere spaties worden teruggebracht tot een enkele.
In het voorbeeld ziet de eerste paragraaf er zo uit:
<P>Welkom in de wereld van HTML.
Dit is de eerste paragraaf. Hoewel kort,
het blijft een paragraaf.
</P>
In het bronbestand is er een regel afgebroken. Een webbrowser negeert
deze breuk en begint alleen een nieuwe paragraaf bij de volgende <P>
label.
Belangrijk U moet paragrafen aangeven met <P> elementen.
Een browser negeert inspringingen of lege regels in de brontekst. Zonder
<P> elementen wordt het document een lange paragraaf. (Een uitzondering
is tekst die gelabeld is als voorgevormd ("preformatted") wat
later wordt besproken.) Om de leesbaarheid van HTML-bestanden te vergroten
kunt u het beste kopregels op aparte regels zetten. Gebruik lege regels
om een nieuw gedeelte aan te geven of een nieuwe paragraaf. Dit komt vooral
van pas als u wijzigingen wilt aanbrengen.
Let op: De </P> eindlabel kan worden weggelaten.
Browsers begrijpen dat er een paragraaf eindigt als zij het begin van een
paragraaf tegenkomen.
Bij het gebruik van <P> en </P> als paragraafomsluiting
kunt u de paragraaf uitlijnen met behulp van het ALIGN=uitlijning
attribuut in uw bronbestand.
<P ALIGN=CENTER>
Dit is een gecentreerde paragraaf. [zie de gevormde tekst hieronder]
</P>
Dit is een gecentreerde paragraaf. Lijsten
HTML ondersteund ongenummerde, genummerde en definitielijsten. Lijsten
kunnen ook "genest" worden, maar gebruik dit met mate, omdat
teveel geneste onderdelen moeilijk zijn te volgen.
Ongenummerde lijsten
Om een ongenummerde lijst te maken
- begin met een lijstopeningslabel <UL> (voor een ongenummerde
lijst)
- voeg de <LI> (lijst item) label gevolgd door het item
in; een eindlabel </LI> is niet nodig
- Beeindig de lijst met een eindlabel </UL>
Hier volgt een voorbeeldlijst van drie onderdelen.
<UL>
<LI> appels
<LI> bananen
<LI> grapefruit
</UL>
Het resultaat is:
- appels
- bananen
- grapefruit
De <LI> items kunnen meerdere paragrafen bevatten. Geef
de paragrafen aan met de <P> paragraaflabel.
Genummerde lijsten
Een genummerde lijst (ook wel ordered list, waar de label
vandaan komt) is hetzelfde als een ongenummerde lijst, maar nu wordt <OL>
gebruikt in plaats van <UL>. De onderdelen worden met <LI>
gelabeld. De volgende HTML-code:
<OL>
<LI> oranje
<LI> paars
<LI> groen
</OL>
levert de onderstaande vorm op:
- oranje
- paars
- groen
Definitielijsten
Een definitielijst (gecodeerd als <DL>) bestaat gewoonlijk
uit een term (gecodeerd als <DT>)en een omschrijving
(gecodeerd as <DD>). Web browsers zullen in het algemeen
de omschrijving op een nieuwe regel zetten.
Nu volgt een voorbeeld van een definitielijst:
<DL>
<DT> Flevonet
<DD> Flevonet, met laagdrempelig access voor particulieren, is gevestigd in Dronten.
<DT> XS4all <DD> XS4all, voortgekomen uit Hacktic, is gevestigd in Amsterdam.
</DL>
Het reultaat ziet er als volgt uit:
- Flevonet
- Flevonet, met laagdrempelig access voor particulieren, is gevestigd
in Dronten.
- XS4all
- XS4all, voortgekomen uit Hacktic, is gevestigd in Amsterdam.
De <DT> en <DD> openingen kunnen meerdere
paragrafen (aangegeven door <P> paragraaflabels) omvatten,
maar ook lijsten of andere definities.
Het COMPACT attribuut kan worden gebruikt wanneer de omschrijving
kort is. Bijvoorbeeld wanneer u bepaalde opties wilt tonen kunnen deze
op dezelfde regel komen.
<DL COMPACT>
<DT> -i
<DD>invokes NCSA Mosaic for Microsoft Windows using the
initialization file defined in the path
<DT> -k
<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode
</DL>
Het resultaat ziet er zo uit:
- -i
- invokes NCSA Mosaic for Microsoft Windows using the initialization
file defined in the path.
- -k
- invokes NCSA Mosaic for Microsoft Windows in kiosk mode.
Geneste lijsten
Lijsten kunnen worden "genest". Ook kunnen er paragafen met
een lijst binnen een lijst worden gebruikt.
Hier is een voorbeeld van een geneste lijst:
<UL>
<LI> Een paar plaatsen in Flevoland:
<UL>
<LI> Almere
<LI> Lelystad
<LI> Urk
</UL>
<LI> Twee plaatsen in Gelderland:
<UL>
<LI> Harderwijk
<LI> Arnhem
</UL>
</UL>
De geneste lijst ziet er zo uit:
- Een paar plaatsen in Flevoland:
- Twee plaatsen in Gelderland:
Voorgevormde tekst
Gebruik de <PRE> label (dit staat voor "preformatted")
om tekst te laten zien, zoals die in het bestand is gezet. Met dit label
kunt extra spaties, lege regels en tabulatorstops gebruiken. Dit is bijvoorbeeld
handig bij programma-listings.
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
ziet eruit als:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
De <PRE> label kan worden uitgebreid met het WIDTH
attribuut (breedte), dat het aantal tekens op een regel aangeeft. WIDTH
vertelt uw browser ook dat er een bepaald lettertype en een inspringing
moet worden gebruikt.
Hyperlinks(verbindingen) kunnen worden gebruikt binnen <PRE>
afdelingen. Andere labels kunt u echter niet gebruiken.
Denk erom dat <, >, and & een speciale betekenis hebben in
HTML, zodat u die alleen in escape series kunt gebruiken (<,
>, en &) . Zie de paragraaf Escape
series voor meer informatie.
Uitgebreide citaten
Gebruik de <BLOCKQUOTE> label om lange citaten als apart
blok op het scherm te krijgen. De meeste browsers zullen aangepaste kantlijnen
hanteren, zodat er duidelijk onderscheid ontstaat.
In het voorbeeld:
<BLOCKQUOTE>
<P>Laat onnodige woorden weg.</P>
<P>Kernachtige taal is kort en bondig. Een zin mag geen onnodige woorden bevatten,
een paragraaf geen onnodige zinnen om dezelfde reden dat een tekening geen onnoge lijnen bevat
en een machine geen overbodige onderdelen.</P>
--William Strunk, Jr., 1918
</BLOCKQUOTE>
het resultaat is:
Laat onnodige woorden weg.
Kernachtige taal is kort en bondig. Een zin mag geen onnodige woorden
bevatten, een paragraaf geen onnodige zinnen om dezelfde reden dat een
tekening geen onnoge lijnen bevat en een machine geen overbodige onderdelen.
--William Strunk, Jr., 1918
Adressen
De <ADDRESS> label wordt meestal gebruikt om de schrijver
van een document aan te geven, een manier om met de schrijver te communiceren
en een datum. Meestal is dit het laatste onderdeel van een bestand.
De laatste regel van deze cursus is:
<ADDRESS>
Beginnerscursus HTML / Flevonet / michiel@flevoland.to / mei 1996
</ADDRESS>
Het resultaat is:
Beginnerscursus HTML / Flevonet / michiel@flevoland.to /
mei 1996
Let op: <ADDRESS> wordt niet gebruikt voor
postadressen. Zie "Regel afbreken" hieronder.
Regel afbreken/Postadressen
De <BR> label breekt regels af zonder extra ruimte toe
te voegen. Bij het gebruik van <P> elementen voor korte
regels, zoals adressen, krijgt u onnodige blanco ruimte. Voorbeeld met
<BR>:
Flevonet<BR>
postbus 405<BR>
8250 AE Dronten<BR>
Het resultaat is:
Flevonet
postbus 405
8250 AE Dronten
Horizontale lijnen
De <HR> label produceert een horizontale lijn met de
breedte van het browser-venster. Een horizontale lijn kan worden gebruikt
om delen van uw document te scheiden. Veel mensen zetten bijvoorbeeld een
lijn tussen het document en de <address> informatie.
U kunt de dikte(size) en de breedte(width) van een lijn aanpassen naar
uw eigen smaak. Experimenteer met de instellingen tot u tevreden bent.
Bijvoorbeeld:
<HR SIZE=4 WIDTH=50%>
ziet er uit als:
Lettervormen
HTML heeft twee stijlen voor woorden of zinnen: logische en fysieke.
Logische stijl labelt tekst aan de hand van de betekenis, terwijl
fysieke stijl de verschijningsvorm van een tekstdeel bepaalt.
In de voorafgaande zin waren de woorden "logische stijl" gelabeld
als "definitie". Hetzelfde effect (cursieve tekst) had ook met
een ander label bereikt kunnen worden. De label namelijk die de browser
verteld dat een tekst cursief moet worden weergegeven.
Let op: Sommige browsers kennen geen stijl toe aan de <DFN>
label, dus kunt u de bedoelde tekst in de vorige paragraaf niet cursief
gedrukt zien.
Logische versus fysieke stijl
Waarom twee stijlen als met beide hetzelfde bereikt kan worden ?
In het ideale SGML universum is de inhoud gescheiden van de vorm. Een
SGML label kopregel1 geeft dus kopregel1 aan, maar niet, dat het met 24-punts
vette Times geschreven wordt. Het voordeel hiervan is, dat als u een ander
lettertype wilt definieren, dat u dit kunt doen door de kopregel definitie
in uw browser te veranderen. (Een aantal tekstverwerkers werkt ook met
deze methode.) Er zijn op dit moment ook een aantal browsers die deze mogelijkheid
bieden.
Een ander voordeel van logische labels is, dat ze helpen om een consequente
vorm weer te geven. Het is makkelijker om iets te labelen met <H1>
dan om te onthouden dat kopregels met 24-punts vetgedrukte Times moet worden
weergegeven. Neem bijvoorbeeld de <STRONG> label. De meeste
browsers geven dit weer als vetgedrukte tekst. Het kan echter best zijn
dat een lezer deze delen in rood afgedrukt wil zien. Een logishe stijl
biedt deze mogelijkheid.
Als u een fysieke stijl gebruikt zal een browser altijd die opmaak kiezen,
die u gemaakt heeft, onafhankelijk van de instellingen van de lezer.
Probeer consequent te zijn. Gebruik binnen een document een stijlsoort.
Houd ook voor ogen, dat in de toekomst HTML misschien geen fysieke stijl
meer ondersteunt, met als gevolg dat browsers geen fysieke stijl meer herkennen.
Logische stijl
- <DFN>
- voor een gedefinieerd woord. Dit wordt cursief afgedrukt op uw scherm.
(NCSA Mosaic is een World Wide Web browser.)
- <EM>
- voor nadruk. Dit wordt cursief afgedrukt op uw scherm. (Uw wachtwoord
dient u geheim te houden.)
- <CITE>
- voor titels van boeken, films ed. Dit wordt cursief afgedrukt op uw
scherm. (A Beginnerscursus HTML)
- <CODE>
- voor computer code. Dit wordt afgedrukt met vaste letterafstand. (De
<stdio.h> beginbestand)
- <KBD>
- voor toetsenbord-invoer. Dit wordt afgedrukt met vaste letterafstand.
(Voer passwd in om uw wachtwoord te veranderen.)
- <SAMP>
- voor en serie karakters. Dit wordt afgedrukt met vaste letterafstand.
(Segmentation fault: Core dumped.)
- <STRONG>
- voor sterke nadruk. Dit wordt afgedrukt met vette letters. (Let
op: controleer altijd uw verbindingen (links).)
- <VAR>
- voor een variabele, waar u de variabele zult vervangen door specifieke
informatie. Dit wordt cursief afgedrukt op uw scherm. (rm filename
verwijderd het bestand.)
Fysieke stijl
- <B>
- vetgedrukte (bold) tekst
- <I>
- cursieve (italic) tekst
- <TT>
- typemachinestijl, vaste letterafstand
Escape series (ook wel tekenvormen)
Tekenvormen hebben twee vormen:
- het omzeilen van speciale tekens
- het weergeven van speciale karakters (niet aanwezig in de ASCII-tekenset)
Drie ASCII-tekens, het kleiner dan(<), het groter dan teken(>)
en het en-teken(&), hebben een speciale betekenis binnen HTML en kunnen
dus niet zomaar gebruikt worden in een tekst. De haakjes worden gebruikt
om het begin en eind van een label aan te geven en het en-teken staat aan
het begin van een escape-serie.
Om een van deze drie tekens te kunnen gebruiken in een HTML-tekst moet
u de escape serie daarvoor gebruiken.
- <
- de escape serie voor <
- >
- de escape serie voor >
- &
- de escape serie voor &
Er bestaan nog een aantal escape series voor speciale tekens:
- ö
- de escape serie voor de kleine letter o met umlaut: ö
- ñ
- de escape serie voor een kleine letter n met een tilde: ñ
- È
- de escape serie voor een hoofdletter E met een accent grave: È
U kunt boven staande letters o, n, en E door andere
vervangen. Raadpleeg de volgende online-lijst voor meer bijzondere
tekens.
Let op: In tegenstelling tot de rest van HTML, zijn de escape
series wel afhankelijk van hoofdletters of kleine letters. U kunt bijvoorbeeld
niet < in plaats van <gebruiken.
Verbindingen(Linking)
De grote kracht van HTML ligt in de mogelijkheid om tekst en/of plaatjes
te verbinden met een ander (deel van een) document. Een browser licht de
betreffende tekst of het plaatje eruit, met behulp van kleur en/of onderstreping,
om aan te geven dat het hier gaat om een hypertext verbinding(link)
meestal afgekort tot link).
HTML's enige hypertext-gerelateerde label is <A>, wat
staat vooranker(anchor). Om een anker in uw tekst aan te brengen:
- start het anker met <A (voeg een spatie toe na de A)
- specificeer het document waarmee u de verbinding wilt leggen met de
parameter HREF="bestandsnaam" gevolgd
door een sluithaakje (>)
- voer de tekst in, die dient als link in het huidige document
- voer de eindlabel in: </A> (een spatie is niet nodig
voor de eindlabel)
Hier is een voorbeeld van een verbinding in een bestand, genaamd US.html:
<A HREF="MaineStats.html">Maine</A>
Deze invoer maakt het woord Maine de hyperlink naar het document
MaineStats.html, dat in dezelfde directorie staat als het eerste
document.
Relatieve padnamen versus absolute padnamen
U kunt verbindingen maken met andere documenten door het relatieve
pad aan te geven van het huidige document naar het te verbinden document.
Bijvoorbeeld, de verbinding naar het bestand NYStats.html dat
zich bevindt in de subdirectorie AtlanticStates zou zijn:
<A HREF="AtlanticStates/NYStats.html">New York</A>
Dit heet een relatieve link, omdat u hierbij een pad opgeeft
ten opzichte van het huidige bestand. U kunt ook het absolute pad aangeven
(het complete URL), maar relatieve verbindingen zijn efficienter binnen
de server.
Padnamen gebruiken de standaard UNIX syntax. De UNIX syntax voor de
bovenliggende directorie (de directorie waar de huidige deel van uitmaakt)
is "..". Voor meer informatie kunt u een UNIX-handboek raadplegen.
Als u in het NYStats.html bestand bent en wilt refereren aan
het originele document US.html, ziet uw link er als volgt uit:
<A HREF="../US.html">United States</A>
In het algemeen is het raadzaam om relatieve links te gebruiken omdat:
- het makkelijker is om een groep documenten te verplaatsen(de relatieve
padnamen blijven immers geldig)
- de communicatie met de server efficienter is
- het minder typewerk geeft
Gebruikt u echter absolute padnamen, wanneer de documenten geen directe
relatie hebben. Een groep documenten, die samen een gebruiksaanwijzing
vormen, moet onderling relatieve links gebruiken, maar voor verbindingen
met andere documenten heeft de volledige padnaam de voorkeur. Op deze manier
hoeven bestanden niet veranderd te worden als ze verplaatst worden naar
een andere directorie.
URLs
Het World Wide Web gebruikt Uniform Resource Locators (URLs) om de plaats
van bestanden op andere servers aan te geven. Een URL bevat het brontype
(b.v. Web, gopher, WAIS), het adres van de server en de plaats van de file.
De syntax is:
scheme://host.domain [:poort]/path/
filename
waarbij scheme een van de volgende is:
- file
- een bestand op het lokale station
- ftp
- een bestand op een anonymous FTP server
- http
- een bestand op een World Wide Web server
- gopher
- een bestand op een Gopher server
- WAIS
- een bestand op een WAIS server
- news
- een Usenet newsgroup
- telnet
- een verbinding met een Telnet-based service
Het poort nummer kan meestal worden weggelaten. (Laat het weg,
tenzij u anders wordt verteld.)
Voor meer informatie over URLs kijkt u hier:
Verbindingen met bepaalde delen
Ankers kunnen ook worden gebruikt om naar een bepaald deel van
een document te gaan (hetzelfde of een ander document). Dit type anker
wordt meestal naam-anker genoemd, omdat voor het toepassen HTMLnamen
worden gebruikt binnen het document.
Deze cursus is een goed voorbeeld van het gebruik van naam-ankers. De
cursus is in een bestand gemaakt om uitprinten te vergemakkelijken, maar
het document begint met een index, die bestaat uit interne links. (Ga naar
het begin van dit bestand om dit te constateren, klik
daar op Verbinding met bepaalde delen om hier weer terecht te komen)
U kunt ook verbindingen maken met bepaalde delen van een ander document.
Deze informatie krijgt u eerst, omdat dit helpt om de interne verbindingen
te begrijpen.
Verbindingen tussen delen van verschillende bestanden
We gaan er van uit dat u en verbinding wilt maken tussen document A
(documentA.html) en een bepaald deel van een ander document (MaineStats.html).
Voer de HTMLcodes in voor een naam-anker:
documentA.html:
In addition to the many state parks, Maine is also home to
<a href="MaineStats.html#ANP">Acadia National Park</a>.
Zie de tekens na het hekje (hash, #) als een merk binnen het MaineStats.html
bestand. Dit merk verteld uw browser wat er getoond moet worden in de rand
van het venster, als de link wordt geactiveerd. Met andere woorden, de
eerste regel van het browser-venster moet de kopregel Acadia National Park
zijn.
Vervolgens maakt u een naam-anker (in dit voorbeeld "ANP")
in MaineStats.html:
<H2><A NAME="ANP">Acadia National Park</a></H2>
Met deze twee elementen op de goede plaats kunt u een lezer direct naar
de Acadia referentie in MaineStats.html brengen.
Let op: U kunt geen verbinding met bepaalde delen van een bestand
maken, tenzij u toestemming heeft te schrijven in het bestand of het bestand
al naamankers in zich heeft. Met dit document zou u bijvoorbeeld zulke
verbindingen kunnen maken, maar als dit geen naamankers zou bevatten,
zou u ook niets kunnen veranderen in het bronbestand, omdat u daar geen
schrijftoegang voor heeft.
Verbindingen met bepaalde delen binnen het huidige document
De techniek is hetzelfde, alleen de filenaam wordt weggelaten.
Bijvoorbeeld, de verbinding met het ANP anker binnen het bestand
MaineStats, voer in:
...Meer informatie over <A HREF="#ANP">Acadia National Park</a>
is beschikbaar in een andere paragraaf.
Verzeker u ervan, dat de <A NAME=> label op de plaats
in het document staat, waar u naar toe wilt springen. (<H2><A
NAME="ANP">Acadia National Park</a></H2>).
Naam-ankers zijn raadzaam wanneer u verwacht dat lezers het bestand
in zijn geheel eens uit zullen printen of als u een serie korte berichten
in een bestand wilt samenvoegen.
Mailto
U kunt het voor lezers makkelijker maken om e-mail te versturen met
behulp van het mailto attribuut in een hyperlink. De vorm is:
<A HREF="mailto:emailinfo@host">Name</a>
Bijvoorbeeld:
<A HREF="mailto:michiel@flevoland.to">Flevoland.to</a>
Om een postvenster te openen dat al ingesteld is voor Michiel.
Voor uzelf voert u natuurlijk uw eigen e-mailadres in.
Plaatjes in de
tekst
De meeste webbrowsers kunnen plaatjes binnen een tekst weergeven, mits
van het X Bitmap, GIF of JPEG formaat. Ieder plaatje gebruikt processortijd
en vertraagt het weergeven van het bestand. Wees zorgvuldig in het kiezen
van de plaatjes bij uw document.
Om een plaatje in te sluiten, voert u het volgende in:
<IMG SRC=ImageName>
waarbij ImageName de URL is van het plaatje(image).
De syntax voor <IMG SRC> URLs is identiek aan die van
de ankers HREF. Als het bestand van het plaatje in GIF-formaat
bestaat, voeg dan .gif toe aan de bestandsnaam. Bestanden van
X Bitmap plaatjes moeten eindigen met .xbm; JPEG plaatjes sluiten
met .jpg of .jpeg; en Portable Network Graphic bestanden
eindigen met .png.
De grootte van een plaatje
U kunt twee andere attributen aan het <IMG> label toevoegen,
om de browser het formaat door te geven van het plaatje, dat geladen wordt
met de tekst. De attributen HEIGHT en WIDTH geven de
browser opdracht de juiste hoeveelheid pixels (beeldpunten) vrij te laten.
Om bijvoorbeeld een zelfportret in een bestand te sluiten, voegt u de
volgende gegevens toe:
<IMG SRC=zelfportret.gif HEIGHT=100 WIDTH=65>
Let op: Sommige browsers gebruiken de HEIGHT en WIDTH
attributen om plaatjes op te rekken of te verkleinen tot het opgegeven
formaat, als het formaat van het plaatje niet precies overeenkomt met de
oppegeven waarden. Omdat niet aale browsers dit doen, raad ik u aan om
de exacte maten van het plaatje te gebruiken. De maten kunt u met behulp
van diverse grafische programma's bepalen.
Uitlijning van plaatjes
U heeft verschillend mogelijkheden om plaatjes weer te geven. De plaatjes
kunnen apart van de tekst staan, links, rechts of in het midden, of ze
kunnen tussen de tekst staan. Probeer de verschillende manieren uit, om
te zien hoe uw informatie het best uitkomt.
Het uitlijnen van tekst met een plaatje
 Standaard
(by default) wordt de onderkant van een plaatje uitgelijnd met de volgende
tekst, zoals u hier kunt zien. U kunt de plaatjes verplaatsen naar de bovenkant
of het midden van een paragraaf, door de ALIGN= attributen TOP
en CENTER te gebruiken.
Deze
tekst is uitgelijnd met de bovenkant van het plaatje. (<IMG SRC
= "dronweb2.gif" ALIGN=TOP>). Merk op hoe de browser
een regel uitlijnt en dan aan de onderkant van het plaatje verder gaat
met de tekst.
Deze
tekst is gecentreerd op het plaatje (<IMG SRC = "dronweb2.gif"
ALIGN=CENTER>). En ook nu is slechts een regel gecentreerd, de
rest staat onder het plaatje.
Plaatjes zonder tekst
Om een plaatje zonder een tekst erbij te laten zien (bijvoorbeeld een
logo), kunt u er het best een aparte paragraaf van maken. Door het attribuut
ALIGN= bij de paragraaf te gebruiken, kunt het plaatje op de door
u gewenste plaats krijgen.
<p ALIGN=CENTER>
<IMG SRC = "dronweb2.gif">
</p>
geeft als resultaat:
Het plaatje is gecentreerd en deze paragraaf begint eronder, links uitgelijnd.
Tekst in plaats van plaatjes
Sommige World Wide Web browsers kunnen geen plaatjes lezen (oudere terminal
types), maar er zijn ook mensen die, omwille van de snelheid, het plaatjesladen
op hun webbrowser uitschakelen. HTML voorziet in een mechanisme om die
mensen te vertellen wat ze missen op uw pagina's.
Het ALT attribuut maakt het mogelijk om tekst weer te geven
in plaats van een plaatje. Bijvoorbeeld:
<IMG SRC="UpArrow.gif" ALT="Up">
waarbij UpArrow.gif het plaatje is van een pijl, die omhoog
wijst. Met een programma dat in staat is om plaatjes te laten zien ziet
u de pijl omhoog, anders is het woord Up zichtbaar op uw scherm.
Probeer steeds alternatieve tekst bij ieder plaatje te maken, als gebaar
naar uw lezers.
Achtergrondfiguren
Nieuwere versies van browsers kunnen plaatjes laden die dienen als achtergrond.
Sommige mensen vinden dit mooi, andere niet. In het algemeen geldt: Zorg
ervoor dat de tekst leesbaar blijft over de achtergrond.
Achtergondplaatjes kunnen een struktuur weergeven of een object (logo).
U maakt achtergronden zoals ieder plaatje.
U hoeft echter maar een klein plaatje te maken. Een browser kan door
stapelen (tiling) het plaatje herhalen over de hele pagina. Als u de volgende
achtergrondlabel gebruikt, vult de browser automatisch de hele pagina.
Het label om een achtergrondplaatje in te voegen is: <BODY>
met als attribuut:
<BODY BACKGROUND="bestandsnaam.gif">
Achtergrondkleur
Standaard laten browsers tekst zwart zien op een grijze achtergrond.
U kunt echter beide elementen veranderen. Bekijk wel altijd de pagina's
goed om te controleren of het nog leesbaar is !
U kunt met de attributen van de <BODY> label de kleur
van tekst(text), verbindingen(links), bezochte verbindingen(visited links)
en actieve verbindingen(active links) veranderen. Bijvoorbeeld:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">
Dit maakt een venster met een zwarte achtergrond (BGCOLOR),
witte tekst (TEXT) en zilverkleurige hyperlinks (LINK).
Het zescijferig getal geeft de RGB-waarde (rood,groen,blauw) weer. Eigenlijk
is dit een combinatie van drie tweecijferige getallen, die de hoeveelheid
rood, groen en blauw weergeven in hexadecimale waarden van 00 tot en met
FF. 000000 is bijvoorbeeld zwart (geen kleur), FF0000 is knalrood en FFFFFF
is wit (volledige kleurverzadiging). Deze cijfer- en lettercombinaties
zijn nogal cryptisch, maar gelukkig zijn er op het Web bronnen die uitkomst
kunnen geven:
Externe plaatjes, geluiden en animaties
Het is mogelijk om plaatjes te openen als apart document, als de gebruiker
een link activeert (tekst of plaatje). Dit wordt een extern plaatje genoemd
en het geeft u de mogelijkheid vlot laadbare pagina's te maken, zonder
vertragende, grote plaatjes.
Om een extern plaatje in te voeren in de tekst beruikt u:
<A HREF="mijnfoto.gif">verbindingsanker</A>
Ook kunt u een kleiner plaatje gebruiken als link naar een groter:
<A HREF="grplaat.gif"><IMG SRC="klplaat.gif"></A>
De lezer ziet het klplaat.gif plaatje en klikt erop om het
grplaat.gif bestand te openen.
Gebruik dezelfde syntax voor verbindingen met externe animaties, filmpjes
en geluiden. Het enige verschil is de extensie van de bestandsnaam.
<A HREF="AdamsRib.mov">link-anker</A>
verwijst naar een QuickTime movie. Een aantal bestandstypen en hun extensies
zijn:
| File Type
| Extensie
|
| tekst |
.txt |
| HTML document |
.html |
| GIF plaatje |
.gif |
| TIFF plaatje |
.tiff |
| X Bitmap plaatje |
.xbm |
| JPEG plaatje |
.jpg or .jpeg |
| PostScript bestand |
.ps |
| AIFF geluidsbestand |
.aiff |
| AU geluidsbestand |
.au |
| WAV geluidsbestand |
.wav |
| QuickTime movie |
.mov |
| MPEG movie |
.mpeg of .mpg |
Houdt uw publiek en hun mogelijkheden voor ogen. De meeste UNIX-werkstations
kunnen bijvoorbeeld geen QuickTime movies afspelen.
Tabellen
Voordat de <PRE> labels voor tabellen waren ontwikkeld,
moesten schrijvers heel secuur omspringen met hun tabularische gegevens.
Binnen de labels moesten de spaties worden geteld en telkens weer de pagina's
bekeken worden. Tabellen kunnen een heel goede presentatie opleveren, maar
ook voor creatieve geesten zijn er bijzondere dingen mee te doen.
Bekijk tabularische informatie tegen het licht van de onderstaande codetabel.
Een tabel heeft koppen, waarin uitgelegd wordt wat de rijen en kolommen
voorstellen, rijen met informatie, cellen voor ieder onderdeel. In de volgende
tabel bevat de eerste kolom de kop, iedere rij legt een HTML-label uit
en iedere cel bevat een paar labels of legt een funktie uit.
Tabellen
|
| Element
| Omschrijving
|
| <TABLE> ... </TABLE> |
definieert een tabel in HTML. Als het BORDER attribuut aanwezig
is, geeft uw browser de tabel met een rand weer. |
| <CAPTION> ... </CAPTION> |
definieert het opschrift van de tabel. De standaardpositie is gecentreerd
boven de tabel. Het attribuut ALIGN=BOTTOM kan worden gebruikt
om de titel onder de tabel te plaatsen.
Let op: Iedere opmaaklabel kan worden gebruikt bij het opschrift. |
| <TR> ... </TR> |
specifieert een rij binnen de tabel. U kunt standaardattributen definieren
voor de hele rij: ALIGN (LEFT, CENTER, RIGHT)
en/of VALIGN (TOP, MIDDLE, BOTTOM).
Zie de tabel Attributen aan het eind van de tabel voor meer informatie.
|
| <TH> ... </TH> |
definieert een kopregel-cel. Standaard wordt deze tekstvetgedrukt en
gecentreerd. Deze cellen kunnen andere attributen bevatten om de karakteristieken
van de cel en/of de inhoud te bepalen. Zie de tabel Attributen aan het
eind van de tabel voor meer informatie. |
| <TD> ... </TD> |
definieert en datacel. Standaard is de tekst in de cel links uitgelijnd
en verticaal gecentreerd.Deze cellen kunnen andere attributen bevatten
om de karakteristieken van de cel en/of de inhoud te bepalen. Zie de tabel
Attributen aan het eind van de tabel voor meer informatie. |
Tabel attributen
|
| NOTE: Attributen gedefinieerd binnen <TH>
... </TH> of <TD> ... </TD>
cellen gaan voor de standaard uitlijning geregeld binnen <TR>
... </TR>. |
| Attribuut
| Omschrijving
|
- ALIGN (LEFT, CENTER, RIGHT)
- VALIGN (TOP, MIDDLE, BOTTOM)
- COLSPAN=n
- ROWSPAN=n
- NOWRAP
|
- Horizontale uitlijning van een cel.
- Verticale uitlijning van een cel.
- Het aantal (n) kolommen van een cel.
- Het aantal (n) rijen van een cel..
- Uitschakelen van woordoverloop van een cel.
|
Algemeen tabelformaat
Het algemene tabelformaat ziet er als volgt uit:
<TABLE> <== begin van de tabeldefinitie
<CAPTION> opschrift inhoud </CAPTION> <== opschrift definitie
<TR> <== begin van de eerste rij-definitie
<TH> cel-inhoud </TH> <== eerste cel in een rij (een kop)
<TH> cel-inhoud </TH> <== laatste cel in een rij (een
kop) </TR> <== einde van de eerste rij-definitie <TR> <==
begin van de tweede rij-definitie <TD> cel-inhoud </TD> <==
eerste cel in rij twee
<TD> cel-inhoud </TD> <== laatste cel in rij twee </TR>
<== einde van de tweede rij-definitie
<TR> <== begin van de laatste rij-definitie <TD> cel-inhoud
</TD> <== eerste cel in de laatste rij ... <TD> cel-inhoud
</TD> <== laatste cel in de laatste rij </TR> <== einde
van de laatste rij-definitie </TABLE> <== eind van de tabeldefinitie
De <TABLE> en </TABLE> labels moeten
de hele tabelbeschrijving omgeven. Het eerste element is CAPTION,
wat ook mag worden weggelaten. Dan volgt er een aantal rijen gedefinieerd
door de <TR> en </TR> labels. Binnen een
rij kunt een aantal cellen hebben gedefinieerd door de <TD>...</TD>
of <TH>...</TH> labels. Iedere rij van een
tabel wordt apart beschreven. Dit maakt het makkelijk om tabellen te maken
zoals de voorgaande, waarbij een cel meerdere kolommen kan beslaan.
Tabellen voor niet-tabularische informatie
U kunt tabellen ook gebruiken voor niet-tabularische informatie. Bijvoorbeeld
door in een tabel zonder randen plaatjes aan elkaar te plakken, die samen
een geheel vormen, maar die onafhankelijk van elkaar een verbinding vormen
met een ander (deel van) een document. (image map) Ook tabellen
met randen kunnen in combinatie met plaatjes mooie resultaten geven.
Formulieren
Web-formulieren geven lezers de mogelijkheid om informatie te geven,
waarop de server actie kan ondernemen. U verzamelt bijvoorbeeld emailadressen
en namen om bepaalde informatie te versturen aan mensen die daar om vragen.
Voor iedereen die zijn of haar adres invoert moet u informatie verzenden
en het betreffende adres opslaan in een database.
Dit proces van inkomende gegevens wordt meestal geregeld door een "script".
Op dit moment is het bij Flevonet niet mogelijk om met scripts op een homepage
te werken.
De formulieren zelf zijn niet moeilijk te maken, ze volgen dezelfde
logica als de andere HTML-labels. Het moeilijkste is het schrijven van
een script om de binnenkomende data te verwerken.
Fouten zoeken
Voorkom overlappende labels
Bekijkt u dit HTML-voorbeeld eens:
<B>Dit is een voorbeeld van <DFN>overlappende</B> HTML-labels.</DFN>
Het woord overlappende wordt omvat door zowel de <B>,
als de <DFN> labels. Een browser kan hierdoor in verwarring
raken en de zaken niet weergeven zoals u bedoeld had.
In het algemeen geldt, dat u overlappende labels moet vermijden. Houdt
de labels in paren. Door in de opmaak van de HTML-pagina in te springen
kunt u de paren makkelijk terug vinden.
Nest alleen verbindingen en karakterlabels
Het HTML-protocol geeft u de mogelijkheid verbindingen te maken binnen
andere labels:
<H1><A HREF="bestemming.html">Mijn tekst</A></H1>
U mag GEEN HTML-labels gebruiken binnen een anker:
<A HREF="bestemming.html">
<H1>mijn tekst</H1>
</A>
Alhoewel de meeste browsers dit tweede voorbeeld ondersteunen, is het
geen officiele HTML-uitdrukking. Het is dus mogelijk dat nu of in de toekomst
uw bestand onleesbaar is. Als u twijfelt kunt u het beste de HTML-specificaties
volgen. (Zie voor meer informatie hieronder.)
Karakterlabels veranderen de tekst binnen andere elementen:
<UL>
<LI><B>Een vetgedrukt item</B>
<LI><I>Een cursief item</I>
</UL>
Vermijd het gebruik van andere elementen. U zou bijvoorbeeld verleid
kunnen worden tot het gebruik van kopregels binnen een lijst, om het lettertype
groter te maken:
<UL>
<LI><H1>Grote kopregel</H1>
<LI><H2>Kleinere kopregel</H2>
</UL>
Alhoewel sommige browsers dit wel ondersteunen, is dit geen HTML-standaard.
De Netscape <FONT> label, die het mogelijkmaakt om de lettergrootte
te veranderen, is ook geen HTML-standaard, maar wel algemeen aanvaard.
Wat is het verschil tussen het gebruik van <B> binnen
een <LI> label ten opzichte van het gebruik van <H1>
binnen <LI>? Binnen HTML betekent het semantisch of taalinhoudelijk,
dat het de kopregel van een document is en dat het wordt gevolgd door de
inhoud. Daarom is het niet logisch om <H1> binnen een lijst
te vinden.
Karaktervormende labels kunnen in het algemeen ook niet dubbel gebruikt
worden. U zou bijvoorbeeld verwachten dat
<B><I>stuk tekst</I></B>
vet en cursief wordt weergegeven. Sommige browsers doen dat, andere
geven slechts de binnenste labels weer.
De laatste stappen
Wees zeker van uw codes
Als u uw document op een Webserver zet moet u wel zeker weten dat alle
onderdelen werken. Met name de verbindingen (ook de naamankers) moeten
goed werken. In het ideale geval laat u eerst iemand anders het document
lezen, voordat u het als "af" betitelt.
U kunt uw bestanden laten draaien door een
HTML-cotrole service die zal vertellen of uw bestand aan de gangbare
HTML-specificaties voldoet. Als u niet zo zeker bent van uw zaak kan dit
een leerzaam hulpmiddel zijn. Deze service biedt u de mogelijkheid om te
kiezen tot op welke hoogte uw tekst aan de HTML-standaard moet voldoen
(strikt, nivo 2, nivo 3).
Plaatjes voor dummies
Als een <IMG SRC> label verwijst naar een plaatje, dat
niet bestaat, verschijnt een dummie-plaatje. Als dit gebeurt tijdens de
laatste controle, zoek dan uit of het plaatje wel bestaat, dat de verbinding
de juiste URL bevat en dat de bestandstoegang goed staat (world-readable).
Dan nog eens proberen!
Houdt uw bestanden bij
Als de inhoud van een bestand statisch is, zoals een biografie van Willem
van Oranje, hoeft u weinig te doen. Bestanden die veranderlijke informatie
bevatten of die over onderwerpen gaan die vaak veranderen moeten goed
bijgehouden worden !
Dit "updaten" is vooral belangrijk bij bestanden die een weekprogramma
bevatten of een uiterste inleverdatum. Bestanden die "uit de tijd"
zijn moet u verwijderen.
Browsers verschillen
Webbrowsers geven HTML-elementen verschillend weer. Denkt u er aan,
dat niet alle gebruikte codes door alle browsers worden ondersteund. Niet-herkende
codes worden in het algemeen genegeerd.
U zou een boel tijd kunnen spenderen aan het perfectioneren van uw pagina's
voor uw huidige browser, maar met een andere browser zou het er weleens
(heel) anders uit kunnen zien. Daarom: Gebruik HTML zo correct mogelijk.
Laat de interpretatie over aan de browsers en hoop het beste.
Commentaar in de bestanden
HTML biedt u de mogelijkheid commentaarregels toe te voegen. Deze regels
zijn dan, evenals in programma's, alleen zichtbaar in de broncode. De naam
van de schrijver, de datum van de laatste aanpassing of de gebruikte software
worden vaak in commentaarregels geplaatst.
Om commentaar toe te voegen gebruikt u:
<!-- uw commentaar -->
U moet de uitroeptekens en de streepjes gebruiken.
Voor meer informatie
Deze cursus is slechts een introductie tot HTML, niet een volledig
naslagwerk. Hieronder volgen "online" bronnen. Vergeet ook de
lokale boekhandel en bibliotheek niet voor tijdschriften en boeken over
het Web.
Stijl gidsen
De volgende bieden advies over goed HTML-gebruik:
Andere inleidingen
Deze bieden hetzelfde als deze cursus:
Andere "online" naslagwerken:
Dank
Mijn dank gaat naar alle mensen, die het mogelijk maken om mijn hobby
uit te oefenen op een freenet. Deze cursus had ik anders niet vertaald.
Beginnerscursus HTML 0.01 /michiel@flevoland.to
/ mei 1996
| 
