Informaticasite van het Lauwers College te Buitenpost                 © R.J. van der Beek
 

Hoofdstuk9: Meta-tags, Uploaden, Formulieren

  9.1 Documenttypen

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:

<META name="keywords" content="HTML, meta, Lauwers College">

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:

<META http-equiv="Refresh" content="5; URL=http://www.microsoft.com">

Als je dit als meta-tag opneemt dan zal na 5 sec. worden overgeschakeld naar de site van microsoft.

Als je een mooie pagina-overgang wilt hebben dan kun je de volgende meta-tag eens proberen (zie onder de tag voor uitleg) :

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=2)">

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.
Wat METHOD betekent lees je hieronder.

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:

Achternaam : <input type="text" name="Achternaam" size="20" >

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:

<input type="reset" value="Wissen" name="wisknop">

VALUE bepaalt wat er op de knop staat.

  9.8 Hidden

Met deze regel wordt bepaald aan welk e-mailadres het formulier verstuurd moet worden:

<input type="hidden" name="USER" value="je email-adres@provider.nl">

Om de e-mail een titel mee te geven moet je het volgende opnemen:

<input type="hidden" name="SUBJECT" value="testformulier">

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:

<input type="hidden" name="LINK" value="url_van_de_bedankpagina">

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.

Hier komt de html-code daarvoor:

<form><br>
Voornaam:    <input type="text" name="voornaam" size="20" > <br>
Achternaam: <input type="text" name="achternaam" size="20" ><br>
Wachtwoord: <input type="password" name="wachtwoord" size="20" ><br>

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

Wat is je leeftijd <br>
<select name="leeftijd" size="5" > <option value="10-">10-</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="20+">20+</option>
</select> <br>

Opmerkingen:<br>
<textarea name="commentaar" rows=5 cols=30 > Dit staat er al </textarea> <br>

<input type="reset" value="Maak de vensters leeg"> <br> <br>

<input type="submit" value="Verstuur dit formulier" > <br>

</form>

Hier komt het formulier dan echt:


Voornaam:    
Achternaam:  
Wachtwoord:

Vink aan als het waar is:
Ik ben een leerling van het Lauwers College
Mijn hobby is computeren

Geef aan of je man of vrouw bent:
man
vrouw

Wat is je leeftijd


Opmerkingen: