Info...

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!

Index

normale commando's:

externe gadgets

fill-out-form-commando's

HTML 3.00

clickable maps

Diversen

woord vooraf

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.

Introductie

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.)

Tips

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...

nog wat tips voor DDS-huisjesbouwers

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:

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!

Simpele maar verplichte instructies

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.

Het echte document

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...

Commentaar

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. -->

Een nieuwe kopregel maken

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)

Links naar andere plaatsen

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...

INLINE IMAGES

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.

Speciale selectie's

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>

Speciale tekens

Omdat sommige tekens gebruikt worden voor commando's zijn niet alle tekens beschikbaar. Hier onder een lijst van de meeste tekens:

&lt; = <
&gt; = >
&amp; = &
&quot; = "

&ouml; = ÷
&ntilde; = ˝
&Egrave; = ╚
&copy; = ę
&reg; = «

Een completere lijst is te vinden op: http://www.uni-passau.de/~ramsch/iso8859-1.html

Lijsten

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...

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!

Letteropmaak

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> Knipperende letters </BLINK>

tekst of plaatjes centreren

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!

lettergrootte

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...

Horizontale balk

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:


Externe GADGETS

Counters

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...

Fill-out-Forms

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 input-opdracht

De belangrijkste opdracht van de Fill-Out-Form Taal is <INPUT>. Dit commando heeft een aantal parameters, de parameters zijn

TYPE de volgende dingen kunnen worden ingevoerd:
"text" Laat de gebruiker tekst intypen, voorbeeld:
"password" hetzelfde als "text" alleen komt de tekst niet op het
scherm te staan, voorbeeld:
"checkbox" maakt een vierkant aankruisvakje, voorbeeld:
"radio" maakt een rond selectie vakje eerste keuze tweede keuze...
"IMAGE" beeld een plaatje af (gebruik SRC="plaatje.gif) Als je op het plaatje. klikt dan word de informatie verzonden plus de coordinaten van waar je op het plaatje klikte...
"submit" maakt een drukknop om de informatie te verzenden
"reset" maakt een drukknop om de form te resetten, voorbeeld:

NAME= Een beschrijving om de teruggestuurde informatie makkelijker te kunnen lezen.

VALUE= Een standaardwaarde voor als er niks is ingetypt of de tekst die op het drukknopje moet staan bij SUBMIT of RESET. CHECKED Deze parameter vertelt de computer dat een aankruisvakje standaard al aan gekruist moet zijn

SIZE Bepaalt de maximale grootte van de tekstvelden. Syntax: SIZE=breedte of SIZE=breedte, hoogte (default=20)

De Select opdracht

Met de <Select> opdracht kan je een soort push-down balk maken. Als de gebruiker dan op het rechts van de balk gelegen pijltje dat omlaag wijst drukt kan de gebruiker kiezen uit een paar dingen. Deze dingen worden defineerd met de opdracht <OPTION>, voorbeeld

<SELECT> <OPTION> Dit komt in de balk en is aanklikbaar <OPTION> Dit is ook aanklikbaar! </SELECT>

Ziet er uit als:

Net als bij de opdracht <INPUT> kunt u bij de <SELECT> opdracht ook met NAME een naam toekennen...

De TextArea opdracht

De <TEXTAREA> opdracht bevat net als bij de <INPUT> opdracht een invoerveld. Alleen heeft dit invoerveld geen scroll-balken en <TEXTAREA> wel. <TEXTAREA> heeft drie parameters die zijn

NAME dient voor hetzelfde als bij <INPUT> en <SELECT> ROWS het aantal regels van het zichtbare invoerveld, het veld zelf heeft oneindig regels! COLS hetzelfde als ROWS, alleen dan de breedte (in karakters).

<TEXTAREA> moet beginnen met <TEXTAREA> en eindigen met </TEXTAREA>. Daar tussenin moet de 'default' tekst komen... Voorbeeld:

Een truukje

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:

fill-out-forms op DDS

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!

Fill-Out Forms via Netscape

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!


HTML 3.00

Dit hoofdstuk heeft alleen nut als u een browser heeft die HTML 3.00 ondersteunt, zoals Netscape 1.01 en Mosaic 2.0

Dia-pressentatie's

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.

Client Pull

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.

Trucje's

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.

Kleuren

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!

Achtergrondpatronen

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">

OLE objecten invoegen

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.


clickable maps

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 maken

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.

Het clickable map-bestand in je HTML-document zetten

<A HREF="http://server/htbin/imagemap/Symbolische naam"> <IMG SRC="Naam van plaatje" ismap>

Clickable mappen toevoegen aan conf/imagemap.conf

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

Mensen die mij tips hebben gestuurd...

A.H.M Jensma

Special Thanks To...

Geert de Vos, voor het nakijken van mijn vorige versie...

Stuur gerust al je commentaar naar

florisb@dds.nl

[DDS][Wijk][Kaart]
Laatste wijziging deze pagina/last change: 29-Dec-95