Cursus HTML

HTML-reference
Lab 1: Wat is HTML ?
Lab 2: hyperlinks en figuren
Lab 3: tabellen, lijsten, aanklikbare kaart
Lab 4: een grafische html-editor gebruiken
Lab 5: Forms
Lab 6: Frames
Aanvulling: het aanmelden van je site op de zoekrobots


 

Hou reeds nu rekening met de aanbevelingen van XHTML! De opvolger van html. 
Elders in deze website vind u hierover toelichting!

Lab 1 Inleiding: wat is HTML?

Elke webpagina is geschreven in een gecodeerde taal: HTML.
Dit staat voor Hyper Text Markup Language.

Je hebt een browser programma nodig om de pagina te kunnen weergeven. Want de webpagina bestaat in feite uit een gewoon tekstbestand, met speciale aanwijzingen (tags) voor de browser, hoe de tekst en figuren in de pagina moet worden weergegeven.

Een webpagina bestaat dus uit twee elementen:

Meestal dient de eerste tag (<...>)om een bepaalde tekstoptie (zoals "vetjes" bv.) aan te zetten, en een tweede tag (</...>) om een optie uit te zetten.

Structuur van een webpagina

Elke webpagina heeft een basisstructuur waaraan je je strikt moet houden.
Deze ziet er als volgt uit: (hoofdletters of kleine letters maakt geen verschil)
 

<html>
    <head>
    <title> Dit is de titel van de webpagina</title>
    </head>

    <body>
    Dit is de tekst van de webpagina
    </body>

</html>

Het inspringen is alleen mar voor de duidelijkheid, maar heeft geen invloed op het uitzicht van de pagina.
 

Wanneer je deze tekst als html-bestand ( = een tekstbestand met extensie .htm of .html) opslaat, kun je deze pagina met de webbrowser gaan inlezen. Het resultaat ziet eruit als hierboven. Gebruik het programma Kladblok om de tekst in te voeren. Denk aan de extensie .html !
 

 

Oefening 1  : de basis van een html-document
Open het programma Kladblok, en type bovenstaande html-tekst in. Bewaar het bestand op schijf als oef1.htm.
Bekijk het document nu met de webbrowser.
Start de webbrowser.
Kies File/Open File in Browser... en selecteer het zojuist aangemaakte document.
Met behulp van het kladblok, wijzig je de tekst van de pagina. Zorg ervoor dat je meerdere regels hebt, en bekijk het resultaat opnieuw met de webbrowser.

Tags bijvoegen
Je zult gemerkt hebben dat de tekst wel leesbaar verschijnt in de webbrowser, maar over lettergrootte en andere opmaak heb je geen invloed. Dat bepaalt de browser namelijk zelf.

Om toch inlichtingen over de tekstopmaak aan de browser te kunnen overmaken, moet je tags gaan invoegen. Zo zijn er tags oa. om:

Oefening 2  : tags <b> en <i> bijvoegen

Type onderstaande tekst in, en bewaar ze op schijf als oef2.htm
 

<html>
<head>
<title> Oef.2: Tags vet en cursief gebruiken</title>
</head>

<body>
<b>Dit is vetjes</b>
<i>Dit is cursief</i>
<b><i>Dit is vet én cursief!</i></b>
<blink>En dit knippert !</blink>
</body>

</html>

Bekijk het resultaat met de webbrowser.

Merk op:


Oefening 3 : <p>, <hr>, <br>
Je zal gemerkt hebben dat je geen controle hebt over de plaatsing van de tekst. Met de pargraaftag <p>...</p> kun je hieraan al verhelpen. Elke paragraaf zet je tussen deze tags. Je kan de tag uitbreiden met een aanvulling omtrent het uitlijnen (Eng. align).

Typ onderstaande oefening in en bewaar ze als oef3.htm:

<html>
<head>
<title> Oef.3: Paragraaftag</title>
</head>

<body>
<p>Mijn <b>eerste</b> paragraaf handelt over....</p>
<p>Mijn <b>tweede</b> paragraaf bevat enige commentaar

<br>bij de eerste</p>

<hr>
<p align=left>Links opgelijnd</p>
<p align=center>Gecentreerd</p>
<p align=right>Rechts opgelijnd</p>
<hr align=center size=10 width=100 noshade>
</body>

</html>

Bekijk de oefening met de browser.

De tags <p>..</p> omlijnen een paragraaf. Voor en achter een paragraaf wordt automatisch een lege lijn gelaten.
Hier zie je ook de tag <hr> opduiken. Let op: deze wordt niet afgesloten! Wat doet deze tag?
Speel ook eens met de parameters align, size, with, en shade of noshade van deze tag.

De <br>-tag forceert een nieuwe lijn.

Wat gebeurt er als je tussen bevat en enige 10 spaties invoegt?
 

Lettergrootte

Lettergrootte kan je in beperkte mate instellen. Er zijn hier twee tags voor beschikbaar:

<h>...</h> tag voor hoofdingen

<font>...</font> voor gewone tekst. Deze heeft echter nog heel wat opties dan de lettergrootte.

Zo kan je de tekstkleur instellen met color=#hexwaarde (bv color="#aaff00")
of kleurnaam (bv color="blue" )

Kleuren kun je hexadecimaal aangeven of met hun gestandaardiseerde (engelse) naam:

Colour  R G B

White    ffffff
Black    000000
Red:     ff0000
Green:   00ff00
Blue:    0000ff
Magenta: ff00ff
Purple:  9900dd
Light Gray: bbbbbb

Voorbeelden van kleuren

De kleur wordt voorgetseld door 3 hexadecimale getallen van 0 tot ff, waarin het linker de hoeveelheid rode kleur voorstelt, het middenste de groene kleur, en het rechter de blauwe kleur.

Probeer een en ander eens met onderstaande oefening.

Oefening 4:lettergrootte en kleur
Probeer onderstaande oefening eens uit:

<html>
<head>
<title> Oef.4: Lettergrootte</title>
</head>

<body bgcolor="#ffffaa" text="#0000ff">
<!-- Dit is commentaar -->

<h1>Hoofding 1</h1>
<h2>Hoofding 2</h2>
<h3>Hoofding 3</h3>
<h4>Hoofding 4</h4>
Tekst onder hoofding 4.
<h5>Hoofding 5</h5>
<h6>Hoofding 6</h6>
<hr>
<p>
<font size=-1>een beetje kleiner</font>,
<font size=+2>een beetje groter</font>,
<font size=7>ENORM !</font> of
<font size=0>erg klein</font>.</p>
<p>
<font color="#00FF00">groen</font>
<font color="purple">purper</font>
<p>
<font face="Arial,Lucida Sans,Gill Sans">
Zal waarschijnlijk in Arial font worden getoond.</font><br>
<font face="Courier,System,MS Sans Serif">
En dit in Courier.</font>
<hr>
<p><font size=5 color="#0000ff"><center>
Zwavelzuur: H<sub>2</sub>SO<sub>4</sub><br>
Stelling van Pythagoras: a<sup>2</sup>=b<sup>2</sup>+c<sup>2</sup>
</center></font></p>
</body>

</html>
 

Opmerkingen bij bovenstaande oefening:


Oefening 5: je kennis uittesten!
 

 
 


Laten we eens even de opgedane kennis uittesten! Tracht bovenstaande pagina zo goed mogelijk na te maken. Werk met een gele achtergrond en donkerblauwe letters. Geef bepaalde hoofdingen een afwijkende kleur. Zorg ook voor de juiste lettergrootte en voor de woorden in vetjes en cursief!

Oefening 6: een webpagina voor je club
Laat nu je inspiratie eens werken!


Ontwerp, met de opgedane kennis, een mooie webpagina voor je sportclub, vriendenclub, of hobbyclub en bekijk het resultaat met de browser.
 

 

Lab 1: inleiding
Lab 3: tabellen, lijsten, aanklikbare kaart
Lab 4: een grafische html-editor gebruiken
Lab 5: Forms
Lab 6: Frames

Lab 2
Een van de krachtigste hulpmiddelen bij webpagina's zijn de zogenaamde hyperlinks. Deze kun je gebruiken om van de ene plaats naar de andere te springen binnen éénzelfde document, of zelfs andere documenten, op dezelfde computer of een verwijderde computer, in te laden ("surfen").

Hoe herken je een hyperlink in een pagina?


(dit laatste is het belangrijkste kenmerk)
 

 

Hyperlinks in dezelfde webpagina
Om een hyperlink in dezelfde pagina uit te voeren heb je twee elementen nodig:


                                <a name="naam">
Deze tag moet niet afgesloten worden. De a staat voor anchor (anker).
 


                                <a href="#naam">Ga naar naam </a>

Voor naam kies je zelf een goede aanduiding.
Merk op dat er hier een #-teken voor de naam is geplaatst!

Een voorbeeld hiervan vind je in onderstaande oefening

Oefening 2_1  : hyperlinks in dezelfde pagina
Type de onderstaande tekst in met het kladblok en bewaar de tekst als oef2_1.htm.

<html>
<head>
<title> Oef.2_1: Hyperlinks 1</title>
</head>

<body bgcolor="white">

<a name="begin">
<center><H2>Homepagina van International Education Institute</H2>
<a href="#hoofd1">1 - Onze instellingen</a><br>
<a href="#hoofd2">2 - Onze studenten</a><br>
<a href="#hoofd3">3 - Ons lerarenkorps</a></center>

<!-- Maak hier wat lege lijnen -->
<br><br><br><br><br><br><br><br><br><br><br><br>

<a name="hoofd1">
<H2>1 - Onze instellingen</H2>
Dit is de tekst onder hoofding 1....
<br><a href="#begin">Terug naar het begin van de pagina</a>

<!-- Maak hier wat lege lijnen -->
<br><br><br><br><br><br><br><br><br><br><br><br>

<a name="hoofd2">
<H2>2 - Onze studenten</H2>
Dit is de tekst onder hoofding 2....
<br><a href="#begin">Terug naar het begin van de pagina</a>
<!-- Maak hier wat lege lijnen -->
<br><br><br><br><br><br><br><br><br><br><br><br>

<a name="hoofd3">
<H2>3 - Het lerarenkorps</H2>
Dit is de tekst onder hoofding 3....
<br><a href="#begin">Terug naar het begin van de pagina</a>
<!-- Maak hier wat lege lijnen -->
<br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>
 

De lege lijnen dienen om het document voldoende lang te maken, zodat de verplaatsing duidelijk wordt. Dergelijke hyperlinks binnen éénzelfde pagina zijn natuurlijk alleen maar nuttig als het om lange documenten gaat, die meerdere schermen groot zijn.

Het begin van dit document ziet er in de browser als volgt uit:


 
 
 

Probeer de verschillende links in de pagina uit, door er op te klikken.

Extra opgave: Maak zelf nog een vierde link bij: "4 - Ons studieaanbod".
 

Hyperlinks naar een andere pagina

Het is eveneens mogelijk een hyperlink in te bouwen, die naar een andere webpagina verwijst. Indien men hierop klikt wordt de nieuwe pagina ingeladen. Deze pagina kan zich op een andere (ver verwijderde) computer bevinden. Hierdoor wordt het surfen mogelijk gemaakt op internet: van het ene naar het andere document overschakelen, met de klik van de muis.

De syntax van een dergelijke hyperlink ziet mogelijk er als volgt uit:

<a href="../setup/sterolab/sterolab.htm#facts">Facts</a>

In de webpagina wordt de link Facts zichtbaar, en laadt de pagina stereolab.htm in. In de pagina wordt gesprongen naar het anker #facts. Merk op dat je eveneens het pad mag (maar moet niet) kunt aanduiden. Het pad en de ankeraanduiding mag je weglaten.

Een eenvoudige hyperlink ziet er bv. als volgt uit:

<a href="menu.htmL">MENU</a>

De zichtbare hyperlink in de webpagina is hier MENU, en klikken op deze link laadt de pagina menu.htm in.

Het mooie aan deze links is dat je ook kan verwijzen naar een pagina op een verwijderde computer. Je dient dan het volledig URL (Uniform Source Locator) van die pagina in te geven. Een URL is een soort wereldwijd uniek adres voor deze pagina.

Een hyperlink naar de homepagina van Microsoft zou er dus als volgt uitzien:
            <a href="http://www.microsoft.com/" >Microsoft</a>
 

Laten we dit even uitproberen in enkele pagina's die we lokaal op onze computer zullen saven.

We maken een hoofddocument Menu.htm, van waaruit we twee sub-documenten kunnen aanroepen: doc1.htm en doc2.htm. Je moet dus 3 documenten aanmaken met het Kladblok-programma!

Oefening 2_2 :een hyperlink naar een andere pagina
Hieronder vind je de tekst voor menu.htm, doc1.htm en doc2.htm. Type ze in met het kladblok, en test uit via de webbrowser.
 

Broncode voor document "Menu.htm":


<!-- menu.htm -->
<html>
<head>
<title> Oef.2_2: Hyperlinks 2</title>
</head>

<body bgcolor="white">
<a name="begin">
<center><H2>Homepagina van International Education Institute</H2>
<a href="doc1.htm">1 - Onze instellingen</a><br>
<a href="doc2.htm">2 - Onze studenten</a><br>
</body>

</html>
 

Broncode voor document "doc1.htm":


<!-- doc1.htm -->
<html>
<head>
<title>Doc1</title>
</head>

<body bgcolor="white">
<center><H2>Onze instellingen</H2></center>
<br>
<P>Dit is de tekst met uitleg over de instellingen....
<br>
<a href="menu.htm">Terug naar menu</a>
</body>
</html>

Broncode voor document "doc2.htm":


<!-- doc2.htm -->
<html>
<head>
<title>Doc2</title>
</head>

<body bgcolor="white">
<center><H2>Onze studenten</H2></center>
<br>
<P>Dit is de tekst met uitleg over de studenten....
<br>
<!-- lijst met homepagina's van studenten -->
<br><a href="pbrouwer.htm">Homepagina van Piet Brouwers</a>
<p><a href="menu.htm">Terug naar menu</a>
</body>
</html>

Probeer de links uit !

Extra oefening: vervolledig de uw eigen homepagina en plaats er een link in naar de URL van Microsoft.
 

 

Grafische elementen
Om afbeeldingen in te voegen bestaan er speciale tags. De afbeelding moet een GIF- of JPG-bestand zijn. Andere grafische formaten worden momenteel door de webbrowsers niet ondersteund.

De tag om een afbeelding in de webpagina in te voeren ziet er als volgt uit:

<img src="naam" height=xx width=xx align=center|left|right border=...>

Deze parameters mogen weggelaten worden. Als je alleen de hoogte of de breedte opgeeft,wordt de andere afmeting aangepast, zodat het beeld dezelfde verhouding behoudt.
Oefening 2_3  : een afbeelding in een webpagina opnemen

Type onderstaande oefening in met het kladblok. Kopieer het bestand Haggar.gif naar je eigen directory.


haggar.gif
<!-- oef9.htm -->
<html>
<head>
<title>Haggar</title>
</head>
<body bgcolor="LightGrey" text="#FFFFFF">
<font size=6>Hallo vrienden!
<img src="haggar.gif" height=100 width=100 align=center>
</font>
</body>
</html>

Het resultaat in de webbrowser ziet er uit als hierboven.
 

Een grafische afbeelding als hyperlink gebruiken.
Elke grafische afbeelding kun je zodanig gebruiken, dat ze tevens als link dient naar een andere pagina. Je moet hiervoor de anchor-tag en de image-tag in elkaar nesten zoals in de volgende oefening.

Oefening 2_4 : een afbeelding als link
Type onderstaande tekst in met het kladblok en bewaar als oef10.htm
 

<!-- oef10.htm -->
<HTML>
<HEAD>
<title>Haggar 2</title>
</HEAD>
<BODY BGCOLOR="LightGrey" TEXT="#FF0000">
<FONT SIZE=6>Klik op Hagar voor het menu<br>
<A HREF="menu.htm">
<IMG SRC="haggar.gif" HEIGTH=100 WIDTH=100 ALIGN=RIGHT BORDER=3>
</A>
</FONT>
</BODY>
</HTML>

Opdat de link zou werken moet het bestand menu.htm zich nog in dezelfde directory bevinden.

Een achtergrond meegeven
Je kan de achtergrond van je webpagina ook verluchten met een figuur. De gebruikte figuur wordt zo dikwijls naast mekaar weergegeven als nodig is om de ganse achtergrond te vullen. Je doet dit door de parameter BACKGROUND in de body-tag te plaatsen, zoals in onderstaande oefening.

Oefening 2_5  : een mooie achtergrond
 

bg-039.gif

<!-- oef11.htm -->
<HTML>
<HEAD>
<title>Achtergrond</title>
</HEAD>
<BODY BACKGROUND="bg-039.gif" TEXT="#FFFFFF">
FONT SIZE=6><center>
Een mooie achtergrond<br>is het halve werk...
</center></FONT>
</BODY>
</HTML>

Resultaat: 


 

Lab 1: inleiding
Lab 2: hyperlinks en figuren
Lab 4: een grafische html-editor gebruiken
Lab 5: Forms
Lab 6: Frames

Lab 3: Eenvoudige tabellen

Tabellen maken is iets ingewikkelder. Een tabel staat tussen de tags <table>... </table>

Oefening 3_1 : tabellen

<!-- oef12.htm -->
<HTML>
<HEAD> <TITLE>Tabellen</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#C0C0C0">
<CENTER>
<FONT SIZE=+3>Eenvoudige tabellen</FONT><BR>
</CENTER>
<CENTER>

<TABLE BORDER=2 WIDTH="70%" BGCOLOR="#FFFFFF" >

<TR>
    <TD><CENTER><B>NAAM</B></CENTER></TD>
    <TD><CENTER><B>ADRES</B></CENTER></TD>
    <TD><CENTER><B>PLAATS</B></CENTER></TD>
</TR>

<TR>
    <TD>Jan Stalles</TD>
    <TD>Pieter Vandycklaan 203</TD>
    <TD>2020 Antwerpen</TD>
</TR>

<TR>
    <TD>Clara Vandebroek</TD>
    <TD>Koningin Astridlaan 45</TD>
    <TD>3530 Houthalen-Helchteren</TD>
</TR>

</TABLE>

</CENTER>
</BODY>
</HTML>


Tip: Door de waarde van border op nul te zetten wordt de tabel zonder rand weergegeven. Dit is handig om gegevens mooi op te lijnen.
Speel ook eens met de verschillende parameters, en beoordeel het resultaat!
 

Lijsten
In html kun je genummerde en ongenummerde lijsten maken.

Een genummerde lijst

Een genummerde lijst staat tussen de tags <ol>... </ol> (van: ordered list)


 
Type=
Nummering
1
1. 2. 3. ... 
I
I. II. III. IV.   ...
i
i. ii. iii. iv. ...
A
A. B. C. ...
a
a. b. c. ...

Voorbeeld: De html-lijnen:

<ol type=I start=2>
<li>At junction 10 take the M3 towards Sunbury.
<li>Turn off at junction 1 of the M3 and head towards Kingston
<li>3 miles after Kempton Park, take a left by The Bell pub.
</ol>

geven volgend resultaat in de browser:

  1. At junction 10 take the M3 towards Sunbury.
  2. Turn off at junction 1 of the M3 and head towards Kingston
  3. 3 miles after Kempton Park, take a left by The Bell pub.
Een niet-genummerde lijst

Een niet-genummerde lijst staat tussen de tags <ul>...</ul>

Elk element krijgt een bullet.
type= (optioneel) Deze laat je kiezen uit een aantal bullettypen: disc, circle, square

Voorbeeld: onderstaande html-lijnen:
 

Some band members:
<ul type=square>
    <li>Pulp
    <ul type=circle>
        <li>Jarvis Cocker
        <li>Russell Senior
    </ul>
    <li>The Wedding Present
    <ul type=circle>
        <li>David Gedge
        <li>Simon Smith
    </ul>
</ul>

(Het inspringen in de html-tekst is niet noodzakelijk, en alleen gedaan voor de overzichtelijkheid.)

geven onderstaand resultaat in de browser:

Some band members:

TIP: ongenummerde lijsten kun je dus ook gebruiken om tekst te laten inspringen! Je gebruikt gewoon de tags voor de ongenummerde lijst zonder extra parameters.

 

Oefening 3_2 : lijsten
Gebruik bovenstaande lijsten uit in een web-pagina. Bedenk zelf enige voorbeelden met genummerde en nietgenummerde lijsten.

Een aanklikbare kaart
Een interessante mogelijkheid is ook bepaalde gedeelten van een figuur een referentie naar een verschillende url te geven. De figuur wordt dan aanklikbaar, en naargelang de plaats waar je klikt wordt je naar een verschillend url gestuurd.

Een voorbeeld is onderstaande oefening. Naargelang de naam waar je op klikt, surf je naar een verschillende zoekcomputer.

Hierbij moet je de figuur voorstellen met de normale <img>-tag. Er moet echter een lokale verwijzing instaan naar een map-area: USEMAP="#....".

Onderaan het body gedeelte komt dan het map-gedeelte, waarin de verschillende areas worden aangeduid.

Hier werd de figuur verdeeld in vier horizontale rechthoekige banden. De figuur is 200 pixels hoog en breed. Elke band is dus 50 pixels hoog en 200 pixels breed.

De <area>-tag heeft volgende parameters:

Definieert de vorm van het gebied.

Dit kan een rechthoek, cirkel, veelhoek, of een onbepaald gebied zijn.

De coordinaten van het gebied.
Een en ander zal duidelijker worden in onderstaande oefening.

Oefening 3_3 : een aanklikbare kaart
Geef onderstaande html-tekst in, en bewaar ze als oefening oef13.htm.
 

image10.gif
<HTML>
<HEAD>
<TITLE>Oef 13: een aanklikbare kaart</TITLE>
<META NAME="Author" CONTENT="Christine Daniels">
</HEAD>

<BODY BGCOLOR="blue">
<H1 ALIGN=CENTER><FONT COLOR="#FFFFFF">Een aanklikbare map</FONT></H1>
<CENTER>
<!-- Dit is de getoonde figuur -->
<IMG USEMAP="#MAP1" SRC="Image10.gif" HEIGHT=200 WIDTH=200>
</CENTER>

<!-- En hier worden de aanklikbare gebieden (area) aangeduid -->
<MAP name="MAP1">
<AREA shape="rect" coords="0,0,200,50" href="http://www.webcrawler.com/">
</AREA>
<AREA shape="rect" coords="0,50,200,100" href="http://www.lycos.com/">
</AREA>
<AREA shape="rect" coords="0,100,200,150" href="http://www.yahoo.com/">
</AREA>
<AREA shape="rect" coords="0,150,200,200" href="http://www.altavista.com/">
</AREA>
</MAP>
</BODY>
</HTML>

Oefening 3_4
Gebruik onderstaande kaart van belgie om een aanklikbare kaart te maken over de belgische hoofdplaatsen. Maak een pagina met uitleg over Brussel, Gent en Antwerpen. Gebruik nu een cirkel als area.

mapbetxt.gif
 

Lab 1: inleiding
Lab 2: hyperlinks en figuren
Lab 3: tabellen, lijsten, aanklikbare kaart
Lab 5: Forms
Lab 6: Frames

Lab 4: Een grafische html-editor gebruiken.
De kennis van de html-tags is onmisbaar om goede webpagina's te ontwerpen. Toch kun je je werk aanzienlijk verlichten door een goede html-editor te gebruiken, zoals FrontPage, of de grafische editor Composer van Netscape IV.
Ook kan je prima Word van Microsoft gebruiken. Het resultaat is perfect, nadeel is wel dat de gegenereerde html-code zeer ingewikkeld kan worden doordat style-sheets, en dergelijke worden gebruikt.

Prima zijn ook Dreamweaver, of CoffeeCup HTML-editor. Een 30-dagen trial versie is meestal meestal gratis te downloaden op de betrokken sites of via Tucows bijvoorbeeld.

We gaan daar hier niet verder op in

Lab 1: inleiding
Lab 2: hyperlinks en figuren
Lab 3: tabellen, lijsten, aanklikbare kaart
Lab 4: een grafische html-editor gebruiken
Lab 6: Frames
Lab 5 : Forms
Forms zijn delen van een HTML-formulier dat door de gebruiker kan worden ingevuld. De gebruiker kan alzo informatie verzenden naar de eigenaar van het formulier.
 

Hieronder de mogelijke tags verbonden aan het ontwerp van een formulier:

<FORM METHOD="post" ACTION="URL">..(rest of form)..</FORM>
<INPUT TYPE="hidden" NAME=" " VALUE="email addr">
<INPUT TYPE="text" NAME=" " VALUE=" " SIZE=" " MAXLENGTH>
<INPUT TYPE="password" NAME=" " VALUE=" " SIZE=" " MAXLENGTH>
<INPUT TYPE="checkbox" NAME=" " VALUE=" " CHECKED>
<INPUT TYPE="radio" VALUE=" " CHECKED>
<INPUT TYPE="submit" NAME=" " VALUE=" ">
<INPUT TYPE="reset" NAME=" " VALUE=" ">
<TEXTAREA NAME="comments" ROWS=6 COLS=40></TEXTAREA><TEXTAREA>
<SELECT NAME=" " VALUE=" " SIZE=" " MULTIPLE>
<OPTION SELECTED>
<OPTION VALUE=" ">
<OPTION>
</SELECT>

Opbouw van een formulier
Het begin en einde van een form wordt aangeduid met de tags <Form>.</Form>

De <Form>-tag bevat de attributen METHOD en ACTION:
 

·<FORM METHOD="POST" ACTION="URL">

·METHOD="POST" vertelt de server de server dit formulier te verwerken.

·ACTION="URL" vertelt de server welke de bestemming is van het formulier.
 

        Dit kan een CGI-script op de server zijn zoals in onderstaand commando:
        <FORM METHOD="POST" ACTION="/cgi-bin/post-query">

·Of de inhoud van het formulier kan ook via email gestuurd worden:


        <FORM METHOD="POST" ACTION=mailto:emailnaam@domain.com
        ENCTYPE="PLAIN/TEXT">

De METHOD=GET is een alternatief voor POST maar wordt minder gebruikt.
METHOD="HIDDEN" laat toe informatie door te sturen die onzichtbaar blijft voor de gebruiker.
ENCTYPE="PLAIN/TEXT" geeft aan dat de email als normaal tekst moet verstuurd worden.

De INPUT tag-elementen
Dit zijn de invulvelden voor de ingave van tekst, paswoorden, checkboxes, multiple radio "buttons" en SUBMIT- en RESET- knoppen
 

<INPUT TYPE="text"
TEXT heeft verschillende opties: NAME, VALUE, SIZE, MAXLENGTH and HIDDEN.
        NAME="name" is een naam voor het tekstveld
        VALUE="entry_name" geeft een voorbeeld van wat de gebruiker moet invullen
        SIZE=" ", (voorbeeld SIZE="8") geeft aan hoeveel karakters in de box passen.
            Als de gebruiker meer karakters invult scrolt het verder. Defaultwaarde =20.

MAXLENGTH="6" geeft aan hoeveel karakters er in het veld maximaal mogen ingegeven worden en geeft een biep als dit wordt overschreden.

HIDDEN verbergt het veld voor de gebruiker. Je kunt het gebruiken om extra informatie met het formulier mee te sturen, zonder dat de gebruiker dit ziet.

Voorbeeld: Onderstaande code:

Familienaam:<INPUT TYPE="text" Name="Familienaam" Value="familienaam" size="20">

Geeft volgende uitvoer in het browser-scherm:


 

<INPUT TYPE="password"
TYPE="password" geeft asterisken als de gebruiker het paswoord ingeeft.
 
 
 

<INPUT TYPE="checkbox"
CHECKBOX produceert een checkbox, die de gebruiker al of niet kan aanklikken. Een gebruiker kan zoveel checkboes aanklikken als hij wenst. Als de Checkbox aangklikt wordt neem hij de waarde aan in VALUE.

Voorbeeld: De onderstaande code:

Wat zijn je favoriete smaken van ijscreme?<br>
<INPUT TYPE =CHECKBOX name="ijscreme_smaken" Value="Vanille"
MULTIPLE>Vanille
<INPUT TYPE =CHECKBOX name="ijscreme_smaken" Value="Chocolade">Chocolade
<INPUT TYPE =CHECKBOX name="ijscreme_smaken" Value="Pistache">Pistache
<INPUT TYPE =CHECKBOX name="ijscreme_smaken" Value="Mokka">Mokka

geeft volgend resultaat:


 
 

<INPUT TYPE="radio"
Een Radio Button, is zoals een CHECKBOX, maar de gebruiker kan er slechts één uit de groep aanklikken.

Om te kiezen of je al of geen suiker wenst kan je het volgende paar radio buttons aanmaken, waarbij de ja-knop is aangeklikt als default:

De radio-buttons met dezelfde NAME horen bij elkaar.

Voorbeeld: De code:

Wil je suiker in de koffie?
<INPUT TYPE="radio" NAME="suiker" VALUE="ja" Checked> Ja
<INPUT TYPE="radio" NAME="suiker" VALUE="nee" > Nee
<INPUT TYPE="radio" NAME="suiker" VALUE="soms" > Soms

geeft onderstaand resultaat:

 

<INPUT TYPE="submit" en <INPUT TYPE="reset"
Dit zijn twee drukknoppen. SUBMIT verstuurt het formulier, RESET maakt het formulier terug leeg.

Voorbeeld: De volgende code:

<INPUT TYPE=SUBMIT VALUE="Versturen">
<INPUT TYPE=RESET VALUE="Clear">

Geeft dit resultaat:

 
 

SELECT Tag Elementen (Een scroll bar lijst)
Hiervoor heb je de twee tags <SELECT en </SELECT> nodig. Deze optie geeft een dropdown-lijst waaruit je een item kan kiezen.

<SELECT NAME=" " SIZE=" " MULTIPLE> Size geeft aan hoeveel items op het scherm getoond worden.

Er zijn 3 SELECT tag opties: OPTION, VALUE and SELECTED.

<OPTION is verplicht en geeft een nieuwe optie aan.

<OPTION VALUE=" ". VALUE=" " is optioneel. Het geft de naam van de optie aan.

<OPTION SELECTED>. SELECTED is optioneel. Je kan daarmee een ander item als het eerste op het scherm laten verschijnen.

Voorbeeld: De onderstaande form:

Wat vind je cool?
<SELECT NAME="type_of_cool">
<OPTION>sneeuwpret
<OPTION VALUE="ice_cream">chocolade of vanille
<OPTION>James Bond
<OPTION SELECTED>Zwemmen
<OPTION>Parties
<OPTION>Klassieke muziek
<OPTION>Moderne muziek
</SELECT>

geeft volgend resultaat:

 
 

Een figuur als SUBMIT-knop
Daarvoor moet je de code SRC="name_van_de_figuur" in de INPUT tag plaatsen.
 
 
 
 

TEXTAREA Tag

<TEXTAREA NAME="commentaar" ROWS=5 COLS=35></TEXTAREA>
Hiermee kun je verschillende lijnen tekst ingeven.
ROWS geeft het aantal tekstlijnen aan in het veld.
COLS geeft de breedte van het tekstveld aan.

Voorbeeld: Het volgende voorbeeld:

Geef hier je comentaar:<br>
<TEXTAREA NAME="commentaar" ROWS=5 COLS=25></TEXTAREA>

ziet eruit als volgt:

 
 

Oefening:

Ontwerp een formulier om je gastenboek te tekenen.
Vraag naar wat extra info over de gebruiker, zoals zijn hobbies, e.d.
Gebruik in je formulier alle soorten input-vormen.

Lab 1: inleiding
Lab 2: hyperlinks en figuren
Lab 3: tabellen, lijsten, aanklikbare kaart
Lab 4: een grafische html-editor gebruiken
Lab 5: Forms

Lab 6 : Frames
Met de frames-optie kunt u verschillende vensters tesamen op uw website tonen.
Eerts dient u een speciaal html-document te ontwerpen waarin de indeling van de vensters wordt aangegeven.

Hiervoor zijn de tags <FRAMESET></FRAMESET> nodig.

<FRAMESET> </FRAMESET>

De indeling van zo'n dokument ziet er uit als hironder:

<HTML>
<HEAD>
<TITLE>Mijn pagina met frames!</TITLE>
</HEAD>
<FRAMESET>
                    .....
</FRAMESET>

De indeling geven we aan met de tags

<FRAMESET ROWS="">    en/of   <FRAMESET COLS=""> 

De code hieronder:

<FRAMESET COLS="25%,75%">

heeft de volgende indeling als resultaat:
 
 
 
 
 
 
 
 

 
 

De code hieronder:

<FRAMESET ROWS="25%,25%,50%">

heeft de volgende indeling als resultaat:
 
 
 
 

Het laatste percentage mag je ook vervangen door een * (asterisk).
 

<FRAME>

Om aan tegeven welk document in een venster getoond wordt, gebruiken we de <FRAME >-tag.

Onderstaande code:

<FRAMESET COLS="20%",*>
        <FRAME src="doc1.htm" name="left">
        <FRAMESET ROWS="30%,*">
                <FRAME src="doc2.html" name="up">
                <FRAME src="doc3.html" name="down">
        </FRAMESET>
</FRAMESET>

geeft onderstaand resultaat:

<TARGET>
We hebben onze frames ook elk een naam gegeven: left, up en down. Deze namen kunnen we gebruiken in een link om aan te geven in welk frame het document moet getoond worden. Dit gaat met de tag TARGET.
 

Onderstaande code plaats de inhoud van whatever.html in het frame met de naam "down":

<A HREF="whatever.html" TARGET="down">

<NOFRAMES></NOFRAMES>

Niet alle browsers ondersteunen frames. Om hier toch enige informatie te laten zien kunnen de tags <NOFRAMES> </NOFRAMES> gebruikt worden. Hiertussen wordt een alternatieve paginainhoud gezet, meesatl als volgt:

....
</FRAMESET>
<NOFRAMES>
    <body>
    Uw browser ondersteunt geen frames!
</body>
</NOFRAMES>
</HTML>
 

Aanverwante tags voor FRAMESET:

    BORDER="_" geeft de dikte van de rand aan. Bij waarde 0 is er geen rand tussen de frames.

    FRAMEBORDER="_" Geeft aan of je een boord rond het frame wenst (waarde 1) of niet (waarde 0)

    FRAMESPACING="_" Geeft de ruimte aan tussen de frames.

    SCROLLING="_" geeft aan of er scrollbars moeten voorzien worden. Mogelijke waarden zijn: YES, NO,
                                                    en AUTO (default).

Aanverwante tags voor FRAME

    MARGINHEIGHT="_" Vertelt de browser de marge boveaan het frame in pixels.

    MARGINWIDTH="_" Geeft de breedte van de linkermarge aan in pixels.

    NAME="_" geeft het frame een naam

    NORESIZE="_" Hierdoor weet de browser dat het frame niet kan aangepast worden in grootte.

    SCROLLING="_" geeft aan of het frame een scrollbar krijgt.
                Mogelijke waarden zijn: YES, NO en AUTO (default).

    SRC="filename.html" Geeft aan welk document wordt geladen.

Aanvulling: het aanmelden van je site op de zoekrobots

dhtml, html, javascript, internet, style sheets, DHTML, HTML, Javascript, Style Sheets, Internet, De computer van Voltaire, thuisbasis, Thuisbasis, zoekrobotten, Zoekrobotten, alles over zoekrobotten 


Top
Alles over zoekrobotten 

TAGS... 
Eerst en vooral moet je bepaalde delen van je HTML pagina klaarmaken voor de zoekrobotten.

WOORDEN... 
De woorden in je tekst, dus na de <BODY> tag hebben een grote invloed op de indexering van je pagina.

AANMELDEN... 
De derde stap is je site aanmelden bij de verschillende zoekrobotten.

ONDERHOUD... 
De vierde stap is je site REGELMATIG bijwerken.

LINKEN... 
De vijfde stap heb je niet volledig onder controle. Het aantal linken naar je site zijn bij sommige zoekrobotten medebepalend voor je plaats in de top...... 

ALT & Comments... 
De zesde stap wordt door enkele zoekrobotten ingelezen. De tekst na ALT (bv. in de IMG tag) en in de COMMENT tag <!-- duwen je omhoog naar de top...... 

TAGS...
Er zijn twee tags die je moet updaten. De TITLE en de META tag.

<TITLE> 
We beginnen met de TITLE tag. Verschillende zoekrobotten lezen de TITLE tag en zetten deze als titel in de zoekresultaten. Indien er geen TITLE aanwezig is, nemen : 

·HOTBOT en WEBCRAWLER uw url. 

·ALTAVISTA zet NO TITLE 

·EXCITE zet UNTITLED 

·INFOSEEK en LYCOS zetten de eerste regel tekst die na de <BODY> tag komt als titel

Naast het opgeven van de TITLE kan men eveneens zoeken op woorden die in de TITLE staan.
O.a. de volgende zoekrobotten ondersteunen zoekopdrachten in de TITLE tag : 

·AltaVista 

·GoTo 

·HotBot 

·Infoseek 

·MSN Search 

·Northern Light
Bij Lycos kun je onder ADVANCED SEARCH een TITLE zoekopdracht ingeven.
Bij Yahoo moet je    t:    i.p.v    title:    zetten
Het commando is :
title :    hettezoekenwoord

Wat zet je het best in de TITLE tag ? 

·Voor een firma zal de naam van de firma of van een produkt of dienst het beste zijn. Tenslotte is een naam een veelvuldig gebruikte zoekterm. 

·Maak een titel waarin 1 of 2 relevante woorden voor de site zijn in opgenomen. Naargelang de zoekrobot zal ook de TITLE meetellen in de zoekopdracht. 

De tweede tag is de META tag. Een deel van internet zweert bij de META tag, het andere deel van internet vindt de META tag overroepen.
Beiden hebben gelijk. Men moet steeds voor ogen houden dat : 

·NIET ALLE ZOEKROBOTTEN REKENING HOUDEN MET DE META TAG. 

·EN JE WEET NIET WELKE ZOEKROBOT DE SURFER ZAL GEBRUIKEN.

Hieronder het gebruik van de META tag in detail :

<META...>
De drie META tags die wij nodig hebben zijn : 

Naast AUTHOR, KEYWORDS en DESCRIPTION zijn er nog META tags. O.a. om pagina's opnieuw in te laden enz..

Maar dit behoort niet tot deze cursus. Hiervoor kunt u eventueel de HTML gids op deze site raadplegen.

De META tag heeft geen eind-tag=</META>.
We onderscheiden drie namen gevolgd door content. De NAME zal het soort META tag omschrijven, de CONTENT geeft de waarde weer.

Na AUTHOR zetten we als waarde natuurlijk onze naam (of de naam van de auteur)
Na KEYWORDS zetten we alle woorden die zouden kunnen gebruikt worden door personen die onze site zoeken.
Na DESCRIPTION geven we een omschrijving van onze site.

AUTHOR
Dit hoeft in feite geen betoog. En eerlijkheid duurt het langst.

KEYWORDS
Dit zijn de woorden waar alles om draait. Maak er goed gebruik van, maar verwacht er geen wonderen van. Vergeet niet dat er andere punten zijn die u eveneens in het oog moet houden om een goede "ranking" te verkrijgen.
Welke producten verkoopt of promoot u. Welke diensten of welke informatie. Hoe zullen de mensen deze opzoeken. Zijn er bepaalde woorden die zeker betrekking hebben op uw site. Is de firmanaam bekend. Zullen de mensen deze gebruiken om uw site op te zoeken.
Vertrek steeds van het standpunt dat niemand u kent. Ook al bent u de PDG van IBM. Of de taartenproever van Microsoft. Denk na en vraag eventueel aan andere mensen welke woorden ze zouden gebruiken om uw site, of een bepaald produkt of dienst, op te zoeken.

Eenmaal dat je denkt deze woorden te kennen, gebruik ze dan als KEYWORDS. Gescheiden door een komma.

MAAR HOU EVENEENS REKENING MET WAT U IN DE TITLE ZET. Alleen door beiden goed te gebruiken, zal u resultaat hebben.

Kan je KEYWORDS meerdere malen herhalen? Heeft dit meer effect? Staat mijn site dan beter in de rangschikking? 

Ja, maar ! Zoekrobotten houden geen rekening met de META tag indien je meer dan 5 à 6 keer hetzelfde woord gebruikt. 

Mag je zoveel verschillende KEYWORDS zetten als je wenst? 

De meeste zoekrobotten houden zich aan een maximum van 1000 tekens tekst. Dus niet alleen letters maar ook cijfers, tekens enz..tellen mee. 

DESCRIPTION
De omschrijving die je hier opgeeft zal worden gebruikt als omschrijving van je site in de zoekresultaten.
OPGEPAST, dit is belangrijk. Alhoewel de zoekopdracht reeds is uitgevoerd vooraleer de surfer de beschrijving ziet in de lijst van de zoekresultaten, zal hij toch beinvloed worden door de omschrijving.
Hetzelfde als de beknopte samenvatting op de achterflap van een boek .