Als allereerste regel van een html-document wordt vaak de volgende regel opgenomen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(als er geen frames in het document gebruikt worden) of de volgende regel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
(als er wel frames in het document gebruikt worden)
Deze regel geeft aan voor welke versie van HTML het document gemaakt is.
DTD is de afkorting van Document Type Definition.
Deze regel is vooral belangrijk als je het document wilt laten controleren of er ook fouten in de HTML-code zitten. Het programma, waarmee je het controleert, weet dan op basis van welke HTML-versie de controle moet plaatsvinden. Bij HTML 4.01 Transitional mogen alle HTML-codes van versie 4.01 en ouder gebruikt worden, behalve de codes die betrekking hebben
op frames. Bij HTML 4.01 Frameset mogen ook de codes die betrekking hebben
op frames erin voorkomen.
Je kunt je document online laten controleren door naar http://validator.w3.org/ te gaan.
Je kunt het ook het programma TidyGUI.exe downloaden, en daarmee controleren. (start het programma, kies een html-document uit, en
klik op Tidy!)
Meta-tags
Een meta-tag geeft extra informatie over een document. Hij moet worden opgenomen tussen <HEAD> en </HEAD>.
Het is niet verplicht, maar vooral als je wilt dat je site in bepaalde zoekmachines wordt opgenomen is het belangrijk.
Zo'n tag ziet er als volgt uit:
Achter content vul je zoveel mogelijk sleutelwoorden op, die in je site voorkomen.
Vervolgens kun je je homepage aanmelden bij verschillende zoekmachines.
Die gaan dan de sleutelwoorden, die je in de meta-tag hebt opgenomen, overnemen. En als iemand dan in zo'n zoekmachine één of meer van die sleutelwoorden invoert, dan wordt jouw site misschien getoond.
Via www.submit-it.com kun je er voor zorgen dat je homepage
in verschillende zoekmachines wordt opgenomen.
Je kunt je site ook zelf bij verschillende zoekmachines aanmelden, bijvoorbeeld bij
Google,
Altavista,
Yahoo en
Ilse
Er zijn meer meta-tags mogelijk.
Bijvoorbeeld:
<META name="Author" content="R.J. van der Beek">
<META name="Description" content="lesmateriaal voor informatica">
<META http-equiv="content-type" content="text/html; charset=iso-8859-1">
(Met het laatste wordt aangegeven dat dit html-document is opgemaakt volgens de iso-8859-1-karakterset. Hiermee kun je voorkomen dat
je symbolen als codes moet invoeren)
Je kunt er ook voor zorgen dat een bezoeker na een aantal seconden wordt doorgestuurd naar
een andere pagina.
De code daarvoor ziet er als volgt uit:
Duration geeft aan hoe lang het effect duurt, dus Duration=3 heeft tot gevolg dat het effect drie seconden duurt.
Transition geeft het soort effect aan, er zijn 23 effecten dus je kunt Transition=1 t/m Transition=23 gebruiken.
Transition=0: het effect is Box in
Transition=1: het effect is Box out
Transition=2: het effect is Circle in
Transition=3: het effect is Circle out
Transition=4: het effect is Wipe up
Transition=5: het effect is Wipe down
Transition=6: het effect is Wipe right
Transition=7: het effect is Wipe left
Transition=8: het effect is Vertical blinds
Transition=9: het effect is Horizontal blinds
Transition=10: het effect is Checkerboard across
Transition=11: het effect is Checkerboard down
Transition=12: het effect is Random dissolve
Transition=13: het effect is Split vertical in
Transition=14: het effect is Split vertical out
Transition=15: het effect is Split horizontal in
Transition=16: het effect is Split horizontal out
Transition=17: het effect is Strips left down
Transition=18: het effect is Strips left up
Transition=19: het effect is Strips right down
Transition=20: het effect is Strips right up
Transition=21: het effect is Random bars horizontal
Transition=22: het effect is Random bars vertical
Transition=23: het effect is Random
Je pagina wordt in de cache opgenomen door de server van je provider. Bij het oproepen van de
pagina verstuurt de server de cache-pagina. Dat heeft tot gevolg dat als je een wijziging hebt aangebracht in een pagina die wijziging voor de bezoekers van
je site soms toch niet te zien is.
Als je de volgende meta-tag opneemt zal de pagina niet in de cache worden gezet.
<meta http-equiv="Pragma" content="no-cache">
9.2 Uploaden
Om je homepage op het Internet te krijgen, moet je de site eerst op de server van je provider zetten.
Er zijn ook servers, waar je gratis een website kunt plaatsen (free website hosting),
bijvoorbeeld 000webhost.com.
Als je je site wilt uploaden dan heb je een ftp-programma (file transfer protocol) nodig.
Dit programma helpt je bij het overzetten van bestanden van de ene naar de andere computer.
Er zijn verschillende FTP-programma's. De bekendste is WS-FTP voor Windows.
Vaak staat op de site van je provider wel een ftp-programma dat je kunt gebruiken.
Maak met een ftp-programma verbinding met je homepageruimte.
Om dit te kunnen doen vraagt het programma om de naam van de homepageserver.
Daarna wordt er gevraagd om je gebruikersnaam en je wachtwoord. Als je dat hebt ingevoerd log je in op de server.
Hier kom je direct terecht in de hoofdmap van je homepageruimte.
Een FTP-programma werkt eigenlijk net als de Verkenner van Windows.
Aan de linkerkant zie je de inhoud van jouw computer.
Aan de rechterkant staat de inhoud van je ruimte op de homepageserver.
Als je een bestand van jouw computer naar de server wilt kopiëren dan selecteer je het bestand
aan de linkerkant en je sleept het vervolgens naar de rechterkant, of je klikt op het pijltje (dat in het midden staat) naar rechts.
Dat is alles. Zo kun je je pagina's op de server zetten en dan is je homepage door iedereen te bekijken.
Denk er wel om dat de meeste servers hoofdlettergevoelig zijn. Als je dus een bestand hebt
met de naam Plaatje.gif, en in je homepage
staat de tag <img src="plaatje.gif"> dan zal het plaatje niet getoond worden omdat de server
denkt dat plaatje.gif en Plaatje.gif verschillende dingen zijn ! (dat komt omdat de meeste servers onder
UNIX draaien, en UNIX is hoofdlettergevoelig)
Je kunt de pagina bekijken door in de browser de URL van je homepage in te typen.
Denk er wel om dat de eerste pagina van de homepage
de naam index.html of index.htm moet hebben.
Dit is nodig omdat de server automatisch zoekt naar de pagina met die naam.
Is er geen pagina met die naam, dan krijgt de bezoeker een lijst te zien met alle
bestanden die in je homepagemap staan.
9.3 Formulieren
Met een formulier kun je bezoekers van je pagina dingen in laten vullen, en die dingen kunnen dan in een bestand worden opgenomen, of je kunt het naar je email-adres op laten sturen.
Heb je bijvoorbeeld een bedrijf en wil je bezoekers van je site de mogelijkheid geven om
informatie aan te vragen, dan is een formulier de ideale manier.
De form-tag
Als je een formulier op je pagina wilt hebben, dan moet je beginnen met de form-tag die er bijvoorbeeld als volgt
uit kan zien:
<form NAME="formulier1" METHOD="post" ACTION="http://home.tiscali.nl/mailform.cgi">
of
<form NAME="formulier1" METHOD="post" ACTION="mailto:rjvdbeek@lc.nl">
of
<form NAME="formulier1" METHOD="post" ACTION="verwerkformulier.php">
Achter ACTION staat de actie die ondernomen wordt als er op de verzendknop wordt geklikt.
Het kan zijn dat de provider een standaard CGI-script heeft waarmee geregeld kan worden.
Met mailto: wordt het naar een emailadres verstuurd.
En je kunt zelf ook een php-formulier maken dat voor de verwerking zorgt.
Ga daarvoor naar Formulierverwerking met PHP.
Als het niet de bedoeling is dat het formulier verstuurd wordt dan is het voldoende de tag
<form> op te nemen.
Na deze form-tag kun je met het echte formulier beginnen.
Meestal gebruik je dan in ieder geval een paar tekstvelden, dat zijn venstertjes waarin je iets in kunt vullen.
9.4 Een tekstvak
Zo'n tekstveld krijg je bijvoorbeeld met de volgende tag:
Als je die code opneemt dan krijg je het volgende te zien:
Achternaam :
Aan het woord text achter TYPE zie je dat het een tekstvak is.
De naam van het vak is Achternaam.
Wat je daar neerzet maakt niet zo veel uit, maar daaraan kun je later zien welk veld er is
ingevuld.
De breedte van het invulvak is twintig karakters.
Je kunt natuurlijk meer tekstvelden opnemen in je formulier. Bijvoorbeeld een tekstveld voor de voornaam,
en voor de woonplaats en voor het email-adres enz.
Je kunt ook nog als attribuut bijv. maxlength=20 toevoegen. Dat heeft tot gevolg dat er
maximaal 20 tekens ingevoerd kunnen worden in het tekstvak.
Verder kun je nog als attribuut bijv. value="dit staat er al" toevoegen.
Dat heeft tot gevolg dat die tekst al in het tekstvenster staat.
En je kunt ook het attribuut disabled toevoegen. Dan kan er niets aan het tekstvak worden veranderd.
Je kunt dat gebruiken als het tekstveld er alleen maar voor dient om een tekst te tonen.
9.5 Het versturen
Als je alle velden voor het formulier klaar hebt dan zet je daaronder de eindtag
</form>
Maar daarvoor zet je meestal nog een knop waarop VERSTUREN staat, of iets dergelijks.
Die knop maak je op de volgende manier:
<input type="submit" value="Verstuur dit formulier" name="verzendknop">
Als je als type SUBMIT opgeeft, dan wordt het automatisch een knop om het formulier te verzenden.
Wat achter VALUE staat komt op die knop te staan, je kunt dus zelf bepalen wat er op staat.
En wat gebeurt er dan wel als je op die knop klikt ?
Dan wordt het "script" dat genoemd is bij het ACTION-attribuut van de form-tag (waarmee je het
formulier bent begonnen) uitgevoerd.
9.6 Methode
En de gegevens moeten naar dat script worden gestuurd. Dat kan op twee manieren, en welke manier wordt gekozen
heb je zelf in de hand.
Als je in de form-tag hebt opgenomen METHOD="post" dan merk je er niets van hoe het verstuurd wordt.
Als je in de form-tag hebt opgenomen METHOD="get" dan wordt het verstuurd via de URL die je in de titelbalk en/of statusbalk ziet. Als het geheim is of als er veel gegevens verstuurd moeten worden dan kun je het beste METHOD="post" gebruiken.
Je kunt ook zelf een script in PHP schrijven waarmee een formulier verstuurd wordt.
Ga daarvoor naar Formulierverwerking met PHP.
9.7 Reset
Vaak zet je vlak voor de eindtag </form> ook nog een knop waarop WISSEN staat, of iets dergelijks.
Dat wordt de Reset-knop: als je daarop klikt dan worden alle tekstvelden leeg gemaakt, en dan kun je opnieuw iets invullen.
Die reset-knop maak je op de volgende manier:
Wil je dat de invuller van het formulier, nadat hij het heeft ingevuld en verstuurd,
naar een andere pagina wordt gestuurd (bijvoorbeeld een bedankpagina) dan moet je de volgende regel opnemen:
Deze drie tags moeten direkt onder de eerste form-tag geplaatst worden.
De woorden ACTION, USER, SUBJECT en LINK moeten in hoofdletters worden geschreven.
Je kunt met formulieren veel meer informatie aanbieden en verzamelen dan met een paar
tekstvakken. Hieronder lees je wat zoal de mogelijkheden zijn.
9.9 Het aanvinkvak
Een aanvinkvak gebruik je als bezoekers iets aan moeten kunnen vinken, ze kunnen eventueel meer dan één optie
aanvinken.
Aanvinkvakken maak je als volgt:
<input type="checkbox" name="voetbal" value="Ja"> Mijn hobby is voetbal
<input type="checkbox" name="tennis" value="Ja"> Mijn hobby is tennis
Het type is een checkbox, en de naam van deze formulier-onderdelen zijn voetbal en tennis.
Als het eerste aanvinkvak wordt aangevinkt, maar het tweede niet, en
de gegevens worden naar je emailadres opgestuurd, dan krijg je dit als volgt in je e-mail te zien:
voetbal = Ja
Je mag de naam van de aanvinkvakjes ook allemaal gelijk nemen, en als je wilt dat een aanvinkvakje al bij de start is
aangevinkt dan moet het woord checked worden toegevoegd als attribuut (zie het voorbeeld in 9.12)
9.10 De radio-knop
Met een radio-knop kun je je bezoekers een keuze uit twee of meer mogelijkheden geven.
De bezoeker kan maar één optie kiezen. Een radio-knop maak je zo:
<input type="radio" name= "geslacht" value ="man"> Ik ben een man
<input type="radio" name= "geslacht" value ="vrouw"> Ik ben een vrouw
Als je wilt dat één van de knoppen al actief gemaakt is, dan moet je achter value checked toevoegen.
De code ziet er dan zo uit:
<input type="radio" name= "geslacht" checked value = "vrouw"> Ik ben een vrouw
Denk er om dat bij NAME bij alle bijelkaar horende knoppen de zelfde waarde staat !
9.11 Het keuzemenu
Dan hebben we nog het keuzemenu, ook wel 'dropdown' menu genoemd.
Ook hiermee kun je je bezoekers een keuze laten maken uit een aantal van tevoren vastliggende opties.
<select name="Je leeftijdscategorie." size="1">
<option value="0-10">
0-15</option>
<option value="16-30">
16-30</option>
<option value="31-45">
31-45</option>
<option value="46-60">
46-60</option>
<option value="61-75">
61-75</option>
<option value="75+">
75+</option>
</select>
Als je een keuzemenu wilt maken dan begin je met de select-regel.
Met size geef je aan hoeveel regels er in één keer moeten worden getoond van het keuzemenu. Dit staat normaal
gesproken op één.
Als er MULTIPLE als attribuut van SELECT wordt toegevoegd dan kan er meer dan één optie geselecteerd worden
Hierna geef je de mogelijke keuzes (options) aan, met value geef je aan welke keuzes er getoond moeten worden.
Tussen de aanhalingstekens zet je de waarde en daarna de waarde zoals deze op je pagina moet worden getoond.
Je sluit het keuzemenu af met </select>.
9.12 Een voorbeeld-formulier.
Als voorbeeld maken we een formulier met een paar tekstvelden, radiobuttons, een checkbutton, een selectievak, een commentaarveld
en een resetknop.
<input type="checkbox" name="lcleerling" value="Ja" checked> Ik ben een leerling van het Lauwers College <br>
<input type="checkbox" name="hobby" value="computer"> Mijn hobby is computeren <br>
<input type="radio" name= "geslacht" checked value ="man."> man <br>
<input type="radio" name= "geslacht" value= "vrouw."> vrouw <br>
