Copyright © Floris Bos
E-mail adres: florisb@dds.nl
Vrij te verspreiden.....
Update nr. 7 Deze handleiding word regelmatig bijgewerkt...
Heeft u commentaar op deze handleiding, klik dan hier! Heeft u commentaar op dit huisje, klik dan hier!
normale commando's:
externe gadgets
fill-out-form-commando's
HTML 3.00
clickable maps
Diversen
Tips voor deze HTML-handleiding zijn altijd welkom. U kunt deze sturen naar florisb@dds.nl. Bij uw tip komt dan uw naam te staan. Als u daar bezwaar tegen heeft dan kunt u dit bij uw tip vermelden. Houdt er wel rekening mee dat niet alle tips verwerkt worden en dat uw tips ingekort of aangevuld kunnen worden.
HTML is de programmeertaal voor het WWW. Om te programmeren heb je, in tegenstelling tot normale programmeertalen alleen maar een editor of tekstverwerkings-pakket nodig. De editor hoeft slechts aan een voorwaarde te voldoen, en dat is dat hij in ASCII-formaat kan opslaan (dat wil zeggen dat de editor kan opslaan zonder er rare tekens (headers, controletekens etc.) aan toe te voegen.)
Vergeet niet onderscheid te maken tussen hoofd en kleine letters want op het net maakt dat uit........... Als je HTML-Pagina's heb gemaakt die alleen voor Netscape bedoeld zijn dan hoef je alleen je index de extensie .HTML geven en de rest mag .HTM zijn maar is het de bedoeling dat oude browsers ook je pagina kunnen lezen dan is het verstandig om ook je andere pagina's te hernoemen naar .HTML vaak heeft je provider een commando daarvoor zoals HTM2HTML bij sommige providers (o.a bij XS4ALL.) Bij sommige providers (Niet bij DDS) moet je na elke wijziging van je pagina('s) een commando geven om de pagina('s) voor andere mensen vrij te geven. Bij XS4ALL doe je dat bijv. door eerst een Telnet sessie te beginnen met xs4all.nl en daar- na de commando's: cd WWW en wwwsetup in te typen...
In deze alinea volgen een paar tips voor mensen die een huisje (willen) bouwen op DDS. Er zijn twee manieren om je huisje te verzenden:
4 Klik op een van de LEEG-vakken. 5 Typ in hoe je je huis wilt noemen. 6 Klaar!
Nog een laatste tip: het heeft geen zin om als partikulier een huisje met taloze 24-bit foto's te maken want op de DDS-computer kun je maar ± 750kb zetten!
Alle HTML pagina's moeten beginnen met <HTML> en eindigen met </HTML> dan weet de browser waar het document begint en waar het eindigt...Vervolgens moet er <HEAD> komen te staan omdat sommige oude browsers anders niet weten wat voor soort commando's erna komen. Bijna het enige HEAD commando dat nog vaak gebruikt word is <TITLE> waarmee je een titel kuntopgeven voor je document door eerst <TITLE> intetypen vervolgens erachter de titel en achter de titel weer </TITLE> omdat er verder niet zoveel HEAD commando's meer zijn sluit je het HEAD-blok af met </HEAD> Vervolgens moet je de browser duidelijk maken dat je wil beginnen met het echte document door <BODY> aan het begin van het echte document te typen en </BODY> aan het eind van het echte document te typen. Klinkt misschien wat ingewikkeld maar als je naar het voorbeeld kijkt valt dat wel mee:
<HTML> <HEAD> <Title>Titel van je pagina...</Title> </HEAD> <BODY> ........... Commando's ........... </BODY> </HTML>
Is u al iets opgevallen? Alle commando's, opdrachten of functies beginnen met een < en eindigen met een >!
Het verplichte deel heeft u nu gehad. Nu kunt u beginnen met de niet-verplichte commando's en functies.
De simpelste opdracht is tekst laten verschijnen. Dat is eigenlijk geen opdracht, want daar hoef je haast niets voor te doen want je kunt het zo intypen. Alleen om een regel naar beneden te gaan moet je wat doen. Dat is: <BR> om een regel naar beneden te gaan of <P> om twee regels omlaag te gaan. Bij het typen moet je er ook op letten dat je niet zomaar: <, >, & of " typt, want dan denkt de computer dat het een commando is! Verder op in de alinea speciale tekens staat hoe je dat welk kunt...
Vaak is het handig om wat aantekeningen in je document te bewaren zoals een korte samenvatting zodatje weet wat je later nog kan aanvullen. Daar bestaat ook een commando voor, er zit echter wel een nadeel aan, ook al krijgen de lezers het commentaar (tenzij ze de source bekijken) niet te zien maar hun browser haalt de aantekeningen wel binnen dus daar moet de lezer wel op wachten... Voor wie ondanks dit nadeel tochaantekeningen in zijn/haar document wil typen... hier is de syntax:
<!-- Aantekeningen, etc. -->
Het is mogelijk om kopregels in uw document te zetten. Dat doet u met de opdracht <H>. Deze opdracht werkt hetzelfde als de <TITLE>-opdracht Het enige dat anders is dan die opdracht is dat er een nummer bij moet dat de hoogte bepaalt van de kopregel, De syntax is dus:
<Hx>...... uw kopregel.....</Hx>
x = de hoogte van de kopregel... (hoe lager, hoe hoger uw regel wordt)
Het volgende commando wordt op tekst, etc. na het meest gebruikt, want het kan gebruikt worden om naar een ander bestand of document te worden gestuurd. Maar het kan ook een verwijzing naar bijvoorbeeld een telnet-sesie zijn. De syntax is:
<A HREF="document of bestand"> aanklikbare tekst of plaatje </A>
Met deze link kun je alleen links naar externe bestanden leggen. Deze link moet je dus niet gebruiken voor plaatjes die in het document geplaatst moeten worden. Hoe je dat doet kun je verderop in deze alinea lezen. 'Inline Images'
Behalve voor een link naar een bestand of document kan deze opdracht ook worden gebruikt om een E-mail naar iemand toe te sturen. Om dat te doen moet je op de plaats van het document of het bestand: mailto:email adres typen. Dit werkt helaas niet bij alle browsers... De laatste mogelijkheid van dit commando is dat het, in plaats van een link naar een ander document, een link naar een sectie in hetzelfde document legt. Meer hierover verderop... Het commando <A HREF> kleurt en onderstreept de aanklikbare tekst of het plaatje. Vind u dat niet mooi dan kunt u als schakeloptie de optie BORDER= meegeven. Achter BORDER= kun je dan een nummer typen dat bepaalt hoe dik de streep wordt...
Een veel gebruikte opdracht is het invoegen van GIF plaatjes in het huidige HTML-document. De syntax, zonder speciale parameters, is:
<IMG SRC="....naam van plaatje... .gif">
Hier zijn echter nog vier parameters bij te gebruiken, ALT, ALIGN, WIDTH en HEIGHT Met ALT kun je tekst aan je HTML toevoegen voor programma's die geen grafische plaatjes ondersteunen. Met ALIGN kun je bepalen waar het plaatje moet komen te staan. Bij WIDTH en HEIGHT kun je de breedte en hoogte in beeldpunten opgeven. Dit versnelt het laadproces aanzienlijk, vooral bij servers die vaak bezocht worden of waarbij de gegevens over grote afstanden moeten worden verzonden. Wordt bij WIDTH en HEIGHT een waarde opgegeven die niet gelijk is aan de echte lengte en breedte, dan wordt het plaatje uitgerekt. De uitgebreide syntax is:
<IMG ALIGN=plaats SRC="plaatje" WIDTH=breedte HEIGHT=hoogte ALT="indv. tekst">
plaats = bijvoorbeeld TOP of MIDDLE plaatje = een .GIF of .XBM plaatje. breedte = breedte van het plaatje in beeldpunten hoogte = hoogte van het plaatje in beeldpunten
Gebruik altijd een .GIF of .XBM plaatje bij inline images, want niet alle browsers kunnen .JPG of .TIFF aan als inline images.
Het is mogelijk om een link naar een ander stuk in het zelfde document te leggen. Hiervoor gebruik je de opdracht <A NAME>. De syntax is:
<A NAME="Naam"></A>
Omdat sommige tekens gebruikt worden voor commando's zijn niet alle tekens beschikbaar. Hier onder een lijst van de meeste tekens:
< = <
> = >
& = &
" = "
ö = ö
ñ = ñ
È = È
© = ©
® = ®
Een completere lijst is te vinden op: http://www.uni-passau.de/~ramsch/iso8859-1.html
Er zijn twee soorten lijsten: de genummerde en de niet-genummerde. De ene begint met <UL> en eindigt met </UL>. (UL staat voor Unnumberd List en heeft dus geen nummers. Om wel nummers te gebruiken typ je in plaats van UL, OL ! Tussen het <xL> commando en het </xL> commando kun je nu lijst 'items' typen die je dan markeert met het <LI>-commando. Hieronder zie je de uitvoering van een unnumberd list...
Dit is een test van een unnumberd list...
Als uw browser HTML 2.00 aankan heeft u tevens de mogelijkheid om aan <UL> en aan <OL> de optie TYPE toetevoegen Met <UL> kunt u dan de vorm van het symbooltje veranderen. Geldige symbooltjes zijn DISC, CIRCLE en SQUARE. Met <OL> kunt u bepalen of er lettertjes of cijfertjes moeten komen. Ook kunt u de letter- of cijfer-grootte bepalen. Als u TYPE=A in typt krijgt u grote letters en als u TYPE=a intypt, krijgt u kleine letters. Als u TYPE=I intypt krijgt u grote cijfers en als u TYPE=i intypt kleine. En als u TYPE=1 intypt krijgt u de normale!
Hieronder heb ik de vier meest gebruikte lettertype's geselecteerd:
<I> Typ hier u tekst... </I> <B> Vette letters...</B> <PRE>
Tekst altijd even breed
</PRE> <BLINK></BLINK>
Vanaf HTML 2.00 is het mogelijk tekst en/of plaatjes mooi in het midden te krijgen terwijl de breedte-instellingen van het scherm van de browser toch kan verschillen van de standaardmaat! Het enige wat je hoeft te doen is <CENTER> voor het stuk te plaatsen en </CENTER> erachter!
Met <FONT SIZE> kan je de lettergrootte bepaald worden! Syntax:
<FONT SIZE=x> </FONT>
x = Een waarde van 1 tot 7 of een + of -
Ook is het mogelijk de standaard lettergrootte te veranderen! Dit doe je met <BASEFONT SIZE> de syntax is verder precies gelijk aan <FONT SIZE>. Voor <FONT SIZE> en <BASEFONT SIZE> moet de gebruiker een browser hebben die HTML 2.00 ondersteunt. De standaardgrootte van de letters heeft waarde 3...
Als laatste standaardopdracht wil ik de scheidingsbalk behandelen. Dit is een Vrij simpele opdracht want je hoeft alleen maar <HR> in te typen! Hieronder zie je het resultaat:
Helaas ben ik erachter gekomen dat veel universiteiten het niet willen hebben dat je 'reclame' maakt voor hun tellertjes. Helaas kan ik dus geen syntax geven. Maar degenen die slim zijn bekijken gewoon de source...
Hieronder een voorbeeld: (alleen te zien als je 'online' bent) De teller telt vanaf deze update...
De volgende alinea's gaan over fill-out-forms. Deze worden gebruikt om informatie terug te zenden naar de server. Om de computer te vertellen dat we een Fill-Out-Form willen maken moeten we als eerste <form> voor het fill-out-form plaatsen. Dit commando bevat in tegenstelling tot commando's als <TITLE> parameters. Die zijn ACTION en METHOD. Bij ACTION moet je als parameter invullen het document waar de ingevulde informatie naar toe moet worden gezonden. Dat moet tevens het document zijn waar na het verzenden naar toe moet worden gegaan. Met METHOD kun je de computer vertellen welke methode je wilt gebruiken om de fill-out informatie te verzenden. De methodes zijn GET of POST. Als er niks word ingevuld word de methode GET gebruikt. De syntax van <form> is dus:
<FORM ACTION="document" METHOD=GET ofPOST
De belangrijkste opdracht van de Fill-Out-Form Taal is <INPUT>. Dit commando heeft een aantal parameters, de parameters zijn
Sommige mensen denken dat fill-out-form alleen geschikt zijn om gebruikers informatie in te laten typen, maar met fill-out-forms zijn ook truukjes uit te halen met het oog op andere toepassingen. Het lijkt moeilijk te realiseren maar zelfs met slechts drie regeltjes kan je al een andere toepassing hebben. Zo kun je bijvoorbeeld een knop maken waarmee de gebruiker naar een ander HTML-document wordt gestuurd. Syntax voor zo'n knop:
<FORM METHOD=GET ACTION="HTML-document"< <INPUT TYPE=SUBMIT VALUE="descriptie>" </FORM>
Voorbeeld van hoe een knop eruit kan zien:
Ook op het DDS zijn fill-out-forms mogelijk! Hoe? Nou het is eigenlijk erg simpel, want je kunt gewoon een DDS-subroutine gebruiken. Bij ACTION bij het commando <FORM> vul je in: ACTION="http://dds.nl/cgi-bin/form-mailer/ Verder zijn er nog bepaalde parameters die of achter de bovenstaande regel of achter de parameter NAME kunnen worden geplaatst. Als je voor de eerste manier kiest moet je de parameters scheiden met een /. De meest gebruikte parameters zijn: From E-Mail adres van invuller. Realname Echte naam van invuller. To Aan wie de gegevens moet worden gestuurd. Subject Onderwerp. Body Het bericht.
Als u andere parameters invult krijgt u ze op de volgende manier ge-Emaild:
naam parameter = wat ingevuld is.
P.S. De bovenstaande tip is van: remcovz@xs4all.nl
WAARSCHUWING! Binnenkort wordt de form-mailer veranderd, dus je hebt een grote kans dat je je document over een tijdje moet gaan veranderen!
Met Netscape is het mogelijk de antwoorden direct naar je E-Mail adres door te laten sturen! Het enige wat je moet doen is de volgende zin in te typen:
<FORM ACTION="mailto:Je-Email-Adres">
Helaas werkt dit alleen met Netscape dus niet met andere browsers!
Dit hoofdstuk heeft alleen nut als u een browser heeft die HTML 3.00 ondersteunt, zoals Netscape 1.01 en Mosaic 2.0
Met HTML 3.00 is het mogelijk documenten die automatisch na een opgegeven tijd een ander document oproepen te maken dat is ideaal voor mensen die een dia-pressentatie maken! Dit kan op twee verschillende manieren:
- Via "Server Push" de Server houdt de verbinding open en stuurt om de zoveel tijd nieuwe data. Deze methode heeft als voordeel dat de verbinding open blijft wat op veel bezochte servers erg handig is. - Via "Client Pull" de browser van de gebruiker vraagt na een afgesproken tijd de afgesproken pagina op.
Omdat Client Pull heel wat minder programeerwerk kost dan Server Push leg ik alleen Client Pull uit.
Met Client Pull is een dia-presentatietje zelfs makkelijker te maken dan met sommige teken programma's! Je hoeft maar èèn commandotje in te typen, en dat is:
<META HTTP-EQUIV="Refresh" CONTENT="xx;URL=naam volgend HTML document">
xx = na hoeveel seconden het volgende document moet worden opgeroepen... (dat kan ook nul zijn)
Als er geen URL wordt ingevuld wordt er na xx seconden hetzelfde document geladen. Het commando moet ALTIJD op de eerste regel staan.
Met Client Pull zijn nog trucje's uit te halen. Wanneer je bijvoorbeeld muziek bij je pagina wilt hebben kun je bij "naam van volgend HTML document" de naam van het muziek/geluids bestand zetten. Ook kun je als je een speciale HTML 3.00-pagina hebt de gebruiker automatisch vanuit de normale pagina naar de HTML 3.00-pagina laten gaan.
Met Netscape 1.1 of Mosaic 2,0 is het ook mogelijk om de kleuren van de pagina te veranderen door een paar parameters aan het <BODY> commando toe te voegen. De volgende parameters worden ondersteund:
BGCOLOR De achtergrond kleur. TEXT De kleur van de tekst. LINK De kleur van een link. VLINK De kleur van een reeds bezochte link. ALINK De kleur die verschijnt als je op een link drukt (normaal=rood)
Achter elke parameter moet tussen haakjes een hexadecimale kleurcode getypt worden. Binnenkort op deze pagina een lijst met kleurcodes!
Behalve de achtergrondkleur kunt u ook de hele achtergrond een nieuw design geven door er een .GIF patroontje voor te maken en de volgende parameter aan het <BODY> commando toe te voegen:
BACKGROUND="naam/lokatie van .GIF bestand">
Met Netscape 1.1 of Mosaic 2.0 is het ook mogelijk om een OLE-object in het HTML-document te voegen. De syntax:
<EMBED SRC="naam van bestand"> Als het hierbij gaat om een plaatje of tekening, wordt het in het document ingevoegd door er dubbel op te klikken kan men het plaatje daarna bewerken. Ook kun je de parameters HEIGHT en WIDTH meegeven. Deze parameters werken op dezelfde manier als bij <IMG>. Als het bestand geen plaatje is wordt er in het HTML-document een pictogram ingevoegd. Door op het pictogram dubbel te klikken kan het bestand bekeken (of beluisterd) en bewerkt worden.
Helaas is een clickable map niet te maken zonder server-configuratie-schrijfbevoegdheid. Klinkt misschien wat ingewikkeld maar het komt er op neer dat als je bijvoorbeeld een clickable map op het DDS wilt plaatsen je eerst aan iemand die toegang tot het clickable map lijst bestand van DDS (conf/imagemap.conf) moet vragen of hij even je clickable map bestand wilt toevoegen aan de lijst...
Het Clickable map bestand moet ook bestaan uit een stel commando's. Voor zowel NSCA als CERN gelden dezelfde commando's. Het enige verschil is de volgorde, dat is bij NSCA zo:
<commando> <coördinaten> <waar heen moet worden gesprongen>
En bij CERN zo:
<waar heen moet worden gesprongen> <coördinaten tussen haakjes> <commando>
Dit zijn de commando's:
DEFAULT Waar heen moet worden gesprongen indien op verkeerde plaats geklikt. RECT Vierkant klikgebied (coördinaten zijn: Linkerbovenhoek Rechteronderhoek. CIRCLE Circel klikgebied. POLY Lijnen klikgebied.
<A HREF="http://server/htbin/imagemap/Symbolische naam"> <IMG SRC="Naam van plaatje" ismap>
LET OP! Hier moet u wel schrijfpermissie voor hebben!
Om een clickable map toe te voegen moet u de volgende regel aan conf/imagemap.conf toevoegen:
symbolische naam : lokatie van clickable map
Geert de Vos, voor het nakijken van mijn vorige versie...
Stuur gerust al je commentaar naar
![[Wijk]](http://www.dds.nl/images/bbs-residential.gif)
![[Kaart]](http://www.dds.nl/images/bbs-map.gif)