Startpagina voor Dronten
Dronten
  Home
  Foto's
  Milieukalender 08
  Gemeente
  Religie
  Onderwijs
  Politiek
  Geschiedenis Flevo
Informatie
  Agenda
  Nieuws
  Zoek nieuws-archief
  Persberichten
Plattegrond
  Kaart van Dronten
  Gebouwen
  Onderwijs
  Straten
Bedrijven
  Voertuigen
  Dienstverlening
  Industrie
  Kunst & Cultuur
  Landbouw
  Multimedia
  Winkels
  Wonen
Toerisme
  Toerisme
  Uitgaan
  Vakantie
  Recreatie
Verenigingen
  Verenigingen
  Stichtingen
Gezondheid
  Body & Mind
  Dierverzorging
  Gezondheidszorg
  Ziekenhuizen
Overige
  Cursus HTML
  Euro-koersen
  Eeuwige-kalender
  Sluitingstijden
  Weer Biddinghuizen

  E-Mailadres

BEGINNERS CURSUS HTML

Deze cursus is bedoeld als opstapje tot het maken van documenten in HTML,
de HyperTextMarkupLanguage, die gebruikt wordt op het World Wide Web.
Voor uitgebreidere documentatie verwijs ik u naar het WWW
en de plaatselijke boekhandel.

  • Het begin
  • HTML-documenten
  • Opmaaklabels
  • Lettervormen
  • Verbindingen
  • Plaatjes in de tekst
  • Tabellen
  • Formulieren
  • Fouten zoeken













  • Het begin

    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

    1. begin met een lijstopeningslabel <UL> (voor een ongenummerde lijst)
    2. voeg de <LI> (lijst item) label gevolgd door het item in; een eindlabel </LI> is niet nodig
    3. 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:

    1. oranje
    2. paars
    3. 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:
      • Almere
      • Lelystad
      • Urk
    • Twee plaatsen in Gelderland:
      • Harderwijk
      • Arnhem

    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 (&lt;, &gt;, en &amp;) . 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.

    &lt;
    de escape serie voor <
    &gt;
    de escape serie voor >
    &amp;
    de escape serie voor &

    Er bestaan nog een aantal escape series voor speciale tekens:

    &ouml;
    de escape serie voor de kleine letter o met umlaut:
    &ntilde;
    de escape serie voor een kleine letter n met een tilde:
    &Egrave;
    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 &LT; in plaats van &lt;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:

    1. start het anker met <A (voeg een spatie toe na de A)
    2. specificeer het document waarmee u de verbinding wilt leggen met de parameter HREF="bestandsnaam" gevolgd door een sluithaakje (>)
    3. voer de tekst in, die dient als link in het huidige document
    4. 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:

    1. het makkelijker is om een groep documenten te verplaatsen(de relatieve padnamen blijven immers geldig)
    2. de communicatie met de server efficienter is
    3. 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