HTML - Vanaf Netscape versie 2.0

Gecontroleerd met Netscape Navigator 3.0 Gold (32-bits)

Gekleurde tekst

Een goede HTML-file begint altijd met het besturingsteken <HTML> en eindigt met </HTML>. De onzichtbare titel verschijnt in de vensterbalk van de netbrowser. Die titel staat dan tussen <HEAD><TITLE> en </TITLE></HEAD>
Het informatiedeel staat tussen <BODY> en </BODY>. Daarin kan de titel herhaald worden in bij voorkeur een groter lettertype.

Logische of fysieke besturingstekens

Een logisch besturingsteken zoals <H2> zorgt er bij de standaardinstelling van Netscape voor dat de letter in 24-punts Times wordt weergegeven, maar de websurfer kan zijn of haar Netscape zo instellen als hij/zij wil, wat betreft dit besturingsteken. Dus als je wilt dat een letter echt wordt weergegeven zoals gewenst, onafhankelijk van de instellingen van Netscape bij de ontvanger, dien je fysieke besturingstekens te gebruiken.
Het nadeel van fysieke besturingstekens is echter dat je geen garantie hebt dat (vooral toekomstige) browsers altijd doen wat je ervan verwacht.

Logische besturingstekens:
<DFN>voor definities</DFN>
<EM> voor nadruk op een tekst, meestal cursief </EM>
<CITE>voor boektitels etc., meestal cursief</CITE>
<CODE>voor computercode, bijv.: m_datum = DATE()</CODE>
<KBD>voor invoer via toetsenbord</KBD>
<SAMP>voor letterlijke teksten, bijv: http://www.disney.com/</SAMP>
<STRONG>vet</STRONG>
<VAR>voor een variabele</VAR>

Fysieke besturingstekens
<B>vet</B>
<I>cursief</I>
<TT>typewriter</TT> <U>onderstreept</U>
<S>doorgestreept</S>

Opmerking: het nesten van tags is vaak mogelijk, maar houdt er rekening mee dat zoiets als <B><I>vet en cursief</I></B> niet door alle browsers op dezelfde manier geïnterpreteerd wordt.

Vooropgemaakte tekst
<PRE>

preformatted text

</PRE>

Naast de methode <Hx>tekst</Hx> (x = 1, 2, 3, 4, 5 of 6) is er nog een nieuwere wijze van fontinstelling.
Deze komt overigens nog niet voor in de oficiële HTML-specificaties:

<FONT SIZE=1>grootte</FONT>
<FONT SIZE=2>grootte</FONT>
<FONT SIZE=3>grootte</FONT> = default
<FONT SIZE=4>grootte</FONT>
<FONT SIZE=5>grootte</FONT>
<FONT SIZE=6>grootte</FONT>
<FONT SIZE=7>grootte</FONT>

Ook relatieve fontgroottes (ten opzichte van de default 3) zijn in te stellen:
<FONT SIZE=-2>grootte</FONT>
<FONT SIZE=-1>grootte</FONT>
<FONT SIZE=+1>grootte</FONT>
<FONT SIZE=+2>grootte</FONT>
<FONT SIZE=+3>grootte</FONT>
<FONT SIZE=+4>grootte</FONT>

Als op de ontvangende computer fonts zijn geïnstalleerd, worden deze weergegeven. Een test.

horizontale lijn: <HR>

idem, zonder schaduwrand: <HR NOSHADE>
breder: <HR SIZE=5>:
en zonder schaduwrand: <HR NOSHADE SIZE=5>
<HR WIDTH=xxx> = lengte horizontale lijn in procenten of pixels
<HR SIZE=xxx> = dikte horizontale lijn in pixels
<BODY BACKGROUND="filename.gif">
<BODY BGCOLOR="#rrggbb"> = kleur achtergrond
<BODY TEXT="#rrggbb"> = kleur platte tekst
<BODY LINK="#rrggbb"> = kleur van gehyperlinkte tekst
<BODY VLINK="#rrggbb"> = kleur van reeds bezochte links
<BODY ALINK="#rrggbb"> = kleur van link die geladen wordt

Spaties worden door HTML gewoonlijk genegeerd, behalve (gelukkig) tussen de woorden in een zin. Toch kan een spatie geforceerd worden met &nbsp;. Bijvoorbeeld:
 Begint niet aan het begin van de regel.
Begint wel aan het begin van de regel.

Afbeeldingen
<IMG WIDTH=xxx HEIGHT=xxx BORDER=xxx ALIGN=xxx SRC=filename.gif>
WIDTH = breedte in pixels
HEIGHT = hoogte in pixels
BORDER = rand bij hyperlinks, in pixels
ALIGN = hoe komt de tekst naast de afbeelding: LEFT, RIGHT, TOP, BOTTOM, MIDDLE

Het principe van clickable maps is samengevat in http://www.euronet.nl/users/cor/imagemap.html (Engels).

Opsommingen
    In arabische cijfers (default):
  1. eerste item
  2. tweede item
  3. derde item
    In Griekse cijfers (groot):
  1. eerste item
  2. tweede item
  3. derde item
    In Griekse cijfers (klein):
  1. eerste item
  2. tweede item
  3. derde item
    In kapitaal:
  1. eerste item
  2. tweede item
  3. derde item
    In onderkast:
  1. eerste item
  2. tweede item
  3. derde item
    Ongenummerd, standaard:
  • eerste item
  • tweede item
  • derde item
    Ongenummerd, disc:
  • eerste item
  • tweede item
  • derde item
    Ongenummerd, square:
  • eerste item
  • tweede item
  • derde item
    Ongenummerd, circle:
  • eerste item
  • tweede item
  • derde item

Definitielijst:

eerste kop
eerste tekst inspringend
tweede kop
tweede tekst inspringend
derde kop
derde tekst inspringend

Hyperlinks:
In de vorm <A HREF="URL">hier klikken</A>

Anchors: vanuit een plaats wordt gesprongen naar een andere plaats in hetzelfde document, bijvoorbeeld:
van: <a href="#kenmerk">ga naar hoofdstuk 2</a>
naar: <a name="kenmerk">hoofdstuk 2</a>

Tabellen

<TABLE>tabel</TABLE>
Er kan tevoren bepaald worden of de cellen in de tabel door lijnen gescheiden worden door de opdracht BORDER=x waarbij x nul of meer is. 

<table border=0>
linksboven rechtsboven
linksonder rechtsonder 
<table border=1>
linksboven rechtsboven
linksonder rechtsonder 
<table border=5>
linksboven rechtsboven
linksonder rechtsonder

Met de opdracht CELLSPACING=x wordt de ruimte tussen de cellen (in pixels) aangegeven; CELLPADDING=y wordt gebruikt om de ruimte in de cellen om de tekst heen (in pixels) in te stellen. Enkele voorbeelden:

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=5>

<tr>;<td>linksboven</td><td>rechtsboven</td></tr>
linksboven rechtsboven
linksonder rechtsonder 
<TABLE BORDER=2 CELLSPACING=5 CELLPADDING=1>

<tr>;<td>linksboven</td><td>rechtsboven</td></tr>
linksboven rechtsboven
linksonder rechtsonder

Een rij begint met <TR> en kan bestaan uit een table head <TH> en/of table data <TD>.
Aan deze besturingstekens kunnen de opties ALIGN=xxx, VALIGN=xxx en WIDTH=xxx, COLSPAN= en ROWSPAN= toegevoegd worden.
ALIGN = horizontale uitlijning (LEFT, CENTER, RIGHT)
VALIGN = vertikale uitlijning (TOP, MIDDLE, BOTTOM)
WIDTH = hoe breed (in pixels) wordt een <TR>, <TH> of <TD>.
COLSPAN en ROWSPAN geven aan hoe groot een <TD> of <TH> moet zijn.

Voorbeeld:

Boys Girls
George Bill Richard Barbara Hillary Daphne

Deze tabel heeft twee table headers die elk drie kolommen groot zijn, de kolommen "George", "Bill" en "Richard" vallen onder de table head "Boys" en de andere drie kolommen ("Barbara", "Hillary" en "Daphne") vallen onder de table head "Girls".

In onderstaande tabel zijn de kolommen even breed gemaakt met de opdracht

<TD WIDTH=75>naam</TD>

Na de eerste regel is het niet nodig om de breedte-instelling te herhalen.

Boys Girls
George Bill Richard Barbara Hillary Tracy
Washington Cosby Gere Streisand Clinton Lords

Tekst over twee kolommen verdelen kan ook met de table-functie. Hier wordt tevens gedemonstreeerd dat een tabel ook een achtergrondkleur kan krijgen met de opdracht <TABLE BGCOLOR="#FFFF00"> :

Alaska wordt vaak gezien als een volledig ontoegankelijk oord met slechts kale, barre sneeuwvlakten en hier en daar een pijpleiding. Niets is minder waar. Voor veel Amerikanen is deze grootste staat van de VS tegenwoordig een waar Hof van Eden. Ondanks, of juist dankzij de kou, kun je in Alaska nog volop genieten van de vrijheid en de ongerepte natuur. In dit paradijs, tussen woeste rotspartijen, verdwijnen de vermoeienissen van alledag spoedig als sneeuw voor de zon.

Vanaf Netscape 2.0 is het mogelijk gekleurde tekst te maken zonder gebruik te maken van afbeeldingen:
ROOD | GEEL | GROEN | CYAAN | BLAUW | MAGENTA

Een recente feature is het overslaan van meerdere regels.
Dit gaat als volgt:
bovenste tekst
<SPACER TYPE="VERTICAL" SIZE="50"> onderste tekst

De stelling van Pythagoras luidt: a2 + b2 = c2

Het gebruik van <SUP> en <SUB> tags kan tot lelijke resultaten leiden: 92 235U n +3
Daarom is het beter om het toch maar zó te doen:
235U+3
92n
Als u nieuwsgierig bent hoe ik dit moois gemaakt heb, kijk dan in de HTML-source van deze pagina...

Er zijn acht nieuwsgroepen waarin HTML bediscussieerd wordt:
news:comp.infosystems.www.authoring.html
news:alt.html
news:alt.html.critique
news:alt.html.editors.enhanced-html
news:alt.html.editors.webedit
news:alt.html.webedit news:microsoft.public.inetsdk.programming.html_objmodel
news:microsoft.public.inetsdk.html_authoring

Some more info, in English

Metatags:
tussen </TITLE> en </HEAD>
<meta name="author" content="mijn naam">
<meta name="description" content="korte omschrijving inhoud">
<meta name="keywords" content="honden, hondenvoer, kennels">

Terug naar mijn homepage

  een laatste gimmick...  

Disclaimer : at any time, any part of this homepage and its associated documents may be under yet another unannounced reconstruction.
Last update was March 15, 1999, December 24, 2003
© 1997, 2003 by C. van Dusschoten