HTML BASISCURSUS ICT HTML basiscursus 1
inleiding De algemene structuur van een webpagina is als volgt : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <TITLE>Mijn eerste webpagina</title> <P>Hallo iedereen! Een HTML 4 Document bestaat uit drie delen : 1. Een lijn met informatie over de gebruikte versie van HTML 2. Een hoofding : beschrijvend gedeelte De hoofding staat tussen de tags en. De hoofding bevat hier enkel het title-blok : de titel van de webpagina zoals die in de titelbalk van de browser wordt weergegeven. De titel staat tussen de tags <TITLE> en </TITLE>. 3. Een body : de eigenlijke inhoud van de webpagina De body tussen de tags en deel 2 en 3 worden omgeven door het HTML-element : de tags en. Tags zijn dus instructies voor een browser die tussen < en > worden aangegeven. Een tag </... > duidt op een einde van een instructie.namen van tags worden in deze cursus steeds op deze manier weergegeven. Informatie over de HTML versie Een correct (Eng.: Valid) HTML-document geeft aan welke versie van HTML in het document werd gebruikt, er zijn immers reeds een aantal versies van deze taal sedert het ontstaan ervan. De declaratie van het documenttype geeft aan welke Document type Definition (DTD) er gebruikt werd voor dit document. Een DTD is een document dat dus aangeeft aan welke regels het huidige document is onderworpen. Het is een kwestie van standaardisatie van documenten, zodat HTML documenten op vele platformen door vele ontwikkelaars op eenzelfde manier zouden worden gemaakt. Deze DTD's zijn aangemaakt door het W3C : het World Wide Web Consortium. De HTML 4.01 DTD's : The HTML 4.01 Strict DTD bevat alle elementen en attributen die niet afgekeurd zijn en niet voorkomen in documenten met frames. Declaratie : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> ICT HTML basiscursus 2
De HTML 4.01 Transitional DTD bevat alles uit de strict DTD plus afgekeurde elementen en attributen (de meeste gaan over visuele presentatie). Declaratie : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> De HTML 4.01 Frameset DTD bevat alles uit de Transitional DTD en ook frames. Declaratie : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> De hoofding (HEAD) Het HEAD-element ( en -tags) Dit element bevat informatie over de pagina, zoals de titel, sleutelwoorden die nuttig kunnen zijn voor zoekmotoren, en andere gegevens die niet als inhoud van de webpagina worden beschouwd. User Agents (programma's die webdocumenten lezen en weergeven, zoals browsers) geven de inhoud van de hoofding meestal niet op het scherm weer. Het TITLE-element (<TITLE> en </TITLE>-tags) Elk HTML-document moet een TITLE-element hebben in de HEAD-sectie. Wees er als auteur van bewust dat de titel belangrijk is voor het opzoeken en beschrijven van je HTMLdocument, kies dus een duidelijke, beschrijvende titel voor je documenten. De titel mag tekstwaarden bevatten, maar geen andere HTML-tags. Title als attribuut (<tagnaam title="...">) In een aantal tags kan title als attribuut worden gebruikt, meer hierover verderop in de cursus. META - data (<META...>) HTML staat toe dat je informatie over het document opgeeft die geen inhoud voor de pagina is. Een van de manieren om dit te doen is via META-data. Je kan bijvoorbeeld de auteur van een document op de volgende manier aangeven : <META name="author" content="william Schokkelé"> Je kan ook de taal van de auteur opgeven met het attribuut lang : <META name="author" lan="nl" content="william Schokkelé"> Bekijk het overzicht van de gebruikte talen volgens de ISO 639-standaard.. Een META-element beschrijft steeds een eigenschap in het attribuut name waarvan de waarde opgegeven is in het attribuut content. ICT HTML basiscursus 3
Het http-equiv attribuut kan gebruikt worden in plaats van het name atrribuut. Server maken dan een aangepaste HTTP-header. META en zoekmotoren Met behulp van META-tags kan je zoekmotoren een handje helpen voor het indexeren van je pagina's. <-- Voor Nederlandstaligen --> <META name="keywords" lang="nl" content="vakantie, Griekenland, zon"> <-- Voor Engelstaligen --> <META name="keywords" lang="en" content="holiday, Greece, sunshine"> <-- Voor Franstaligen --> <META name="keywords" lang="fr" content="vacances, Grèce, soleil"> Opmerking: tekst tussen <-- en --> is commentaar van de auteur en wordt niet geïnterpreteerd. Bij het W3C vind je uitgebreidere informatie over het aanpassen van je documenten voor een vlotte indexering bij zoekrobotten. In een HTML document neem je ook op welke karakterset er op de pagina werd gebruikt : <META http-equiv="content-type" content="text/html; charset=iso-8859-1"> De BODY van het document De BODY van een document bevat de eigenlijke inhoud van een HTML pagina. Deze inhoud wordt door een grafische User Agent (zoals browsers) meestal op het scherm geplaatst : tekst, tabellen, figuren, animaties, en vele andere objecten. Daar er aanbevolen wordt Style Sheets te gebruiken voor de opmaak van je documenten, zijn de attributen van de BODY-tag die zorgen voor de visualisering, afgewezen. Je kan ze echter wel gebruiken met de Transitional DTD, we zullen er kennis mee maken maar toch zo veel mogelijk van Style Sheets gebruik maken in de toekomst. Dit betekent dat je voor het begin van deze HTML-cursus misschien wat zal moeten spieken bij de cursus Style Sheets, zodanig dat we de HTML-code die we leren correct leren gebruiken in combinatie met Style Sheets. Standaard kleurinstellingen als attributen in de BODY-tag : AFGEKEURD! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <BODY bgcolor="white" text="black" ICT HTML basiscursus 4
link="red" alink="fuchsia" vlink="maroon">... body van het document... Je kan een aantal standaard instellingen doen in de BODY-tag met behulp van attributen:? bgcolor: geeft de achtergrondkleur op? text: geeft de standaard tekstkleur op? link: geeft de kleur aan van niet bezochte hyperlinks? alink: geeft de kleur op van een actieve hyperlink (erop geklikt)? vlink: geeft de kleur op van een bezochte hyperlink Opmerking: het opgeven van kleuren als attribuutwaarden gebeurt met de Engestalige naam van een kleur of een # en een RGB-waarde (rood-groen-blauw) :? red, blue, black, green,...? #FF0000 = rood : eerste twee hex. cijfers = aandeel rood, tweede koppel = aandeel groen, laatste koppel : aandeel blauw. Standaard kleurinstellingen met behulp van Style Sheets : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> BODY { background: white; color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } </STYLE>... body van het document... Het gebruik van externe stijlbladen stelt je in staat de opmaakeigenschappen van de inhoud van de pagina te scheiden: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <LINK rel="stylesheet" type="text/css" href="stijl.css">... body van het document... ICT HTML basiscursus 5
In documenten die framesets bevatten wordt de BODY-tag vervangen door de FRAMESET-tag. Elementen identificeren met id en class Met behulp van het attribuut id kan je elementen in een pagina een naam geven, deze naam moet uniek zijn in het document. Deze naam kan dan gebruikt worden voor sprongen met behulp van hyperlinks, als aanduiding voor een gebruikte Style Sheet, als referentie voor het object bij gebruik van scripttalen zoals Javascript, als naam van een gedeclareerd OBJECT-element. <P id="alinea1">een alinea.</p> <P id="alinea2">nog een alinea.</p> Met behulp van het attribuut class kan je aangeven dat een element behoort tot een bepaalde klasse. Meerdere elementen kunnen tot dezelfde klasse behoren. Dit attribuut wordt voornamelijk gebruikt bij het toepassen van Style Sheets. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> BODY { background: white; color: black} SPAN.opmerking { color: green } SPAN.belangrijk { color: yellow } </STYLE> <P><SPAN class="belangrijk">niet vergeten!</span> <P><SPAN class="opmerking">wees goedgehumeurd</span> <P><SPAN class="belangrijk">opgepast!</span> Blok-niveau en inline elementen Bepaalde elementen die voorkomen in de BODY van de pagina zijn blok-niveau elementen en anderen zijn inline elementen. Het verschil zit in een aantal aspecten :? Inhoud : blok-elementen mogen andere blok-elementen en inline elementen bevatten, inline elementen mogen enkel data en andere inline elementen bevatten. ICT HTML basiscursus 6
? Opmaak : algemeen beginnen blok elementen op een nieuwe lijn, inline elementen niet. Elementen groeperen : DIV en SPAN De DIV en SPAN elementen vormen, in samenwerking met de id en class attributen, een manier om documenten te structureren. Deze elementen geven weer of de inhoud inline (SPAN) of op blok-niveau (DIV) moet worden weergegeven. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> BODY { background: white; color: black} SPAN.opmerking { color: green } SPAN.belangrijk { color: yellow } DIV.blok {border:solid 1px;background:red } </STYLE> <DIV class="blok"> <SPAN class="belangrijk">niet vergeten!</span> <SPAN class="opmerking">wees goedgehumeurd</span> </DIV> <SPAN class="belangrijk">opgepast!</span> Hoofdingen : H1, H2, H3, H4, H5, H6 elementen Een hoofding geeft een korte beschrijving van een besproken onderwerp. Hoofdingen worden door User Agents gebruikt om deze secties op te maken. Je kan deze secties ook zelf opmaken met behulp van Style Sheets. Er zijn zes niveaus van hoofding : H1 is belangrijkst, H6 het minst belangrijk. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> BODY { background: white; color: black} H2 { color: darkblue; text-align:center; } H3 { color: red } </STYLE> ICT HTML basiscursus 7
<H1>Werken met toepassingssoftware</h1> <H2>Word</H2> Werken met een tekstverwerker<br>... <H3>Figuren</H3>... <H3>Tabellen</H3>... <H3>Kolommen</H3>... <H2>Excel</H2> Werken met een rekenblad<br>... ICT HTML basiscursus 8
Tekst structureren : gebruik van definiërende tags. Tekst kan je structureren met behulp van een aantal tags : EM: Nadruk, meestal schuingedrukt weergegeven door de User Agent STRONG: Sterkere nadruk, meestal vet weergegeven door de User Agent CITE: Citaat of referentie naar een andere bron DFN: De definiërende eenheid van de ingesloten term CODE: Een fragment computer code SAMP: Voorbeeldoutput van programma's, scripts,... KBD: Tekst die moet worden ingevoerd door de gebruiker VAR: Een variabele of argument uit een programma ABBR: Een afkorting (b.v.., WWW, HTTP, URI, enz.). ACRONYM: Duidt een acronym aan (b.v., WAC, radar, enz.). Veel van deze elementen hebben enkel hun nut in technische documenten, die eventueel door speciale User Agents worden gelezen. Al deze elementen vereisen een start- en eindtag. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <P> <EM>Nadruk</EM> <P> <STRONG>Sterke nadruk</strong> <P> <ABBR title="world Wide Web">WWW</ABBR> <ABBR lang="nl" title="nationale maatschappij voor buurtspoorwegen"> NMBS </ABBR> ICT HTML basiscursus 9
Citaten : BLOCKQUOTE en Q Deze twee elementen hebben tot doel citaten van andere tekst te bevatten. In het attribuut cite geef je de bron van het citaat op. BLOCKQUOTE wordt gebruikt voor een blok-niveau element en Q voor een inline element. BLOCKQUOTE-elementen worden doorgaans weergegeven door de browser met een inspringing, terwijl Q-elementen tussen quotes worden geplaatst (niet in alle browsers). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html"> <P>They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.</p> </BLOCKQUOTE> <P> En het konijn zei : <Q cite="konijn">geef me nog een wortel!</q> Het is af te raden BLOCKQUOTE te gebruiken met enkel tot doel tekst te doen inspringen, gebruik beter Style Sheets. Subscript en superscript : SUB en SUP Bepaalde talen en wetenschappelijke schriften vereisen subscript en superscript. Je kan deze in HTML gebruiken met de elementen SUB en SUP. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> H<sub>2</sub>O<br> E = mc<sup>2</sup><br> <SPAN lang="fr">m<sup>lle</sup> Dupont</SPAN> ICT HTML basiscursus 10
Alinea's : P Een alinea kan je maken met de P-tag, de eindtag is optioneel. Een P-element kan geen andere blok-elementen bevatten (inclusief andere P-elementen). Het is af te raden witruimte te creëren met lege P-tags. Regeleinde : BR Een BR-element resulteert in een regeleinde : data gaat verder op de regel eronder. Regeleinde tegengaan Wanneer je de code ingeeft tussen twee woorden, dan wordt er tussen deze woorden door de User Agent geen regeleinde genomen. wordt ook wel eens gebruikt voor extra ruimte tussen gegevens. Vooraf opgemaakte tekst : PRE Met een PRE element geef je aan dat de User Agent de data moet beschouwen als vooraf opgemaakt :? Laat witruimtes intact (normaal gezien worden (meerdere) spaties en regeleindes door de User Agent genegeerd)? Geen automatische regeleindes PRE gebruikt een start en een eindtag. ICT HTML basiscursus 11
Opmaak : achtergrondkleur, uitlijning Achtergrondkleur De achtergrondkleur van een pagina kan je in stellen met behulp van Style Sheets. Hiervoor stel je een achtergrondkleur in voor het BODY-element. Dit doe je met de eigenschap background. Deze eigenschap geef je als waarde een geldige kleuraanduiding. Het afgekeurde attribuut bgcolor kan je nog gebruiken, maar het is aan te raden zoveel mogelijk met Style Sheets te werken. Achtergrondkleur van een pagina met behulp van het bgcolor attribuut: AFGEKEURD! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <BODY bgcolor="yellow"> <h1>achtergrondkleur met het attribuut bgcolor : AFGEKEURD!</h1> Het afgekeurde attribuut bgcolor wordt ook wel eens gebruikt om tabellen, rijen van tabellen en cellen van tabellen van een achtergrondkleur te voorzien. Achtergrondkleur van een pagina met behulp van Style Sheets: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> BODY { background: yellow;} </STYLE> <h1>achtergrondkleur met Style Sheets.</h1> Uitlijning De uitlijning van elementen op een pagina gebeurt het best met Style Sheets. Hiervoor maak je gebruik van de eigenschap text-align. Deze eigenschap kan de waarden left, right, ICT HTML basiscursus 12
center en justify aannamen : links, rechts uitgelijnd, gecentreerd of uitgevuld (links en rechts tegen de marge). Het align-attribuut kan ook in tal van elementen worden gebruikt maar is afgekeurd ten voordele van Style Sheets. Uitlijning met het attribuut align : AFGEKEURD! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <BODY bgcolor="yellow"> <h1 align="center">uitlijning met het attribuut align : AFGEKEURD!</h1> <h2 align="right">rechts uitgelijnd</h2> <h2>standaard uitlijning</h2> <p align="center">een gecentreerde alinea</p> <div align="right"> rechts uitgelijnde divisie <p align="center">gecentreerde alinea</p> terug in de divisie </div> Ook het centreren met de tags <CENTER>...</CENTER> is afgekeurd. Uitlijning met Style Sheets: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> H1 {text-align:center}.rechts {text-align:right}.midden {text-align:center} </STYLE> <h1>uitlijning met het Style Sheets</h1> <h2 class="rechts">rechts uitgelijnd</h2> <h2>standaard uitlijning</h2> <p class="midden">een gecentreerde alinea</p> <div class="rechts"> rechts uitgelijnde divisie <p class="midden">gecentreerde alinea</p> terug in de divisie </div> ICT HTML basiscursus 13
Lettertypes Om lettertypes, lettergroottes en stijlen aan te geven maak je best gebruik van Style Sheets. We bespreken hier echter ook aan aantal tags die afgekeurd zijn doordat ze nog steeds veel in webdocumenten gebruikt worden. Stijlelementen : TT Maakt tekst monospaced op (teletype) I Plaatst tekst schuingedrukt (Italics) B Plaatst tekst vetgedrukt (Bold) BIG Plaatst tekst in een groot lettertype SMALL Plaatst tekst in een klein lettertype STRIKE en S AFGEKEURD. trekt een streep door de tekst. U AFGEKEURD. Plaatst tekst onderstreept (Underlined) Voorbeeld: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><b>bold</b>, <i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype</tt>, en <big>big</big> en <small>small</small> Voorbeeld met Style Sheets : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> H1 {font-style:italic} P.groot {font-size:x-large;font-weight:bold} </STYLE> <h1>uitlijning met het Style Sheets</h1> ICT HTML basiscursus 14
<p>een gewone alinea</p> <p class="groot">een grote alinea</p> FONT voor uitgebreidere lettertype-instellingen Om kleur, grootte en lettertype aan te passen maak je best gebruik van Style Sheets. De FONT-tag is sinds HTML 4 afgekeurd. Deze tag had drie attributen met betrekking tot de weergave van data :? size: de grootte van de tekens aangeduid met een cijfer 1-7, waarbij 3 de normale lettergroote is. Je kan ten opzicht van de standaardfontgrootte ook werken met een grootteaanduiding: vb. +2,-1? color: de kleur van de tekens aangeduid op een correcte manier? face: het lettertype (eventueel een aantal types gescheiden door komma's voor het geval bepaalde types niet ondersteund worden). Gebruik van FONT : AFGEKEURD! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <p><font size="5">een grote zin</font></p> <p><font size="2">een kleine zin</font></p> <p><font color="red">gekleurde tekst ingeven is ook mogelijk</font></p> <p><font color="green" size="6">een grote groene zin</font></p> <p><font color="blue" size="5" face="verdana,arial,serif">een ander lettertype</font></p> <p> <FONT color="red">font-tags kan je <FONT color="blue" size="4">gemakkelijk</font> nesten</font> </p> Met behulp van Style Sheets: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <STYLE type="text/css"> H1 { font-style:italic; color:blue; ICT HTML basiscursus 15
} P.stijl1 { font-size:x-large; font-weight:bold; font-family:verdana,arial,serif; } </STYLE> <h1>een hoofding met een andere opmaak</h1> <p class="stijl1">een mooie stijl voor een alinea</p> Horizontale lijnen : HR Met een HR-element kan je een 'Horizontal Rule' : een horizontale lijn laten weergeven. Een HR-element kent ook een aantal attributen die allen afgekeurd zijn ten voordele van Style Sheets :? align: uitlijning van de lijn - left / center / right? noshade: een lijn in één kleur i.p.v. standaard twee kleuren? size: de hoogte van de lijn op te geven in pixels? width: de lengte van de lijn op te geven in pixels of een percentage van de beschikbare breedte (standaard : 100%)? color: enkel ondersteund in bepaalde browsers (IE) om de lijn te kleuren - af te raden Symbolen en speciale tekens Om in HTML speciale karakters te gebruiken is het aan te raden deze tekens niet gewoon via het klavier in te tikken. Daar het WWW een wereldwijd medium is, weet je niet altijd vooraf welke tekenset de internaut gebruikt. Voor deze doeleinden zijn er lijsten van deze tekens met de juist code, dergelijke lijsten vind je bij het W3C. Sommige tekens zoals < en > moet je ook op deze manier ingeven omdat ze anders door de browser 'geïnterpreteerd' worden inn plaats van op het scherm getoond. Enkele voorbeelden : Teken Gebruiksvriendelijke code Numerieke code < < < > > > ICT HTML basiscursus 16
& & & é é é ë ë ë a α α non-breaking space / vaste spatie Opmerking: bepaalde karakters hebben geen gebruiksvriendelijke code, je bent dan verlicht de numerieke code te gebruiken. ICT HTML basiscursus 17
Unordered lists : UL, LI Een niet geordende lijst is een lijst waarvan de items niet genummerd zijn. De lijst wordt geplaatst tussen de <UL> en </UL> tags. De items worden aangeduid met een <LI> tag, met optioneel een </LI> tag. Het attribuut type (disc, square of circle) voor deze lijst is afgekeurd ten voordele van Style Sheets. Je kan lijsten nesten. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>Boodschappenlijst :</BIG> <UL type="disc"> <LI>Aardappelen <LI>Water <LI>Vlees <UL type="circle"> <LI>Worst <LI>Varkenshaasje <LI>Lamsbout </UL> <LI>Suiker <LI>Bloem </UL> Ordered Lists : OL, LI Bij geordende lijsten worden de items uit de lijst voorafgegaan door een opsommingsteken. Geordende lijsten staan tussen de tags <OL> en </OL>, de items worden voorafgegaan door de tag <LI> en optioneel gevolgd door een </LI> tag. De attributen voor deze lijsten zijn afgekeurd ten voordele van Style Sheets:? type: 1, a, A, i of I? start: een geheel getal dat de startwaarde voor de OL aangeeft? value: geheel getal dat de waarde aanduidt voor een LI element Je kan lijsten nesten. ICT HTML basiscursus 18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>Planning vergadering</big> <OL type="1"> <LI>Welkomstwoord van de voorzitter <LI>Bespreken agendapunten <OL type="a"> <LI>Bespreken kosten <LI>Bespreken inkomsten <LI>Bespreken of we er nog mee doorgaan </OL> <LI>Dankwoord </OL> Definition Lists : DL, DT, DD Met Definition Lists kan je een overzicht maken van een aantal termen en de verklaring bij elke term. De termen en de verklaring worden door de User Agent gestructureerd getoond. De lijst staat tussen de tags <DL> en </DL>. De termen worden voorafgegaan door de tag <DT>, de verklaringen door de tag <DD>. De eindtag is voor beiden optioneel. Je kan lijsten nesten. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>Verklaring gebruikte termen</big> <DL> <DT>WWW <DD>World Wide Web <DT>HTML <DD>Hypertext Markup Language <DT>Pluto <DD>Hemellichaam in ons melkwegstelsel <DD>Hondje uit Disney-tekenfilms </DL> ICT HTML basiscursus 19
HTML 4.01 : Tabellen 1. Inleidend voorbeeld 2. Eenvoudige tabellen : TABLE, TR, TH, TD 3. Caption 4. Rijen groeperen : THEAD, TFOOT en TBODY 5. Kolommen groeperen : COLGROUP, COL 6. Cellen samenvoegen : COLSPAN en ROWSPAN Inleidend voorbeeld <P><BIG>Inleidend voorbeeld</big><br><br> <TABLE border="1px"> <TR> <TH>Naam</TH> <TH>Geslacht</TH> <TH>Leukste vak</th> <TH>Afstand</TH> </TR> <TR> <TD>P. Janssens</TD> <TD>M</TD> <TD>Engels</TD> <TD>12</TD> </TR> <TR> <TD>J. Dinnen</TD> <TD>V</TD> <TD>Frans</TD> <TD>17</TD> </TABLE> Eenvoudige tabellen : TABLE, TR, TD Een tabel wordt in HTML geplaatst tussen de tags <TABLE> en </TABLE>. Een tabelrij wordt geplaatst tussen <TR> en </TR>. Gegevens in een cel worden geplaatst tussen <TD> en </TD>. Tabellen: TABLE Een tabel staat tussen de tags <TABLE> en </TABLE> ICT HTML basiscursus 20
De TABLE-tag ondersteunt attributen, de belangrijkste :? summary: beschrijving van de inhoud van de tabel voor niet grafische User Agents (audio, braille).? align: uitlijning van de tabel (left, right, center) : AFGEKEURD? width: breedte van de tabel in pixels of procenten (t.o.v. de beschikbare breedte)? bgcolor: achtergrondkleur : AFGEKEURD? frame: randen omheen de tabel : o void: geen rand o above: enkel een rand bovenaan o below: enkel een rand onderaan o hsides: rand boven en onder o vsides: rand links en rechts o lhs: enkel links (left-hand-side) o rhs: enkel rechts (right-hand-side) o box: rand aan de 4 kanten o border: rand aan de 4 kanten? rules: lijntjes tussen de cellen van de tabel : o none: geen lijntjes o groups: enkel tussen groepen : THEAD, TFOOT, TBODY, COLGROUP en COL (zie verderop) o rows: enkel lijntjes tussen de rijen o cols: enkel lijntjes tussen de kolommen o all: lijntjes tussen rijen en kolommen? border: breedte in pixels van de rand omheen de volledige tabel? bordercolor, bordercolorlight, bordercolordark: deze attributen komen niet voor in de HTML-specificaties van het W3C, maar worden soms gebruikt om de randkleur aan te geven. Een vaste randkleur stel je in met het attribuut bordercolor, wil je twee verschillende kleuren gebruiken dan werk je met bordercolorlight en bordercolordark.? cellspacing: ruimte tussen de verschillende cellen van de tabel? cellpadding: ruimte tussen de inhoud van een cel en de celrand Tabelrijen : TR De inhoud van een tabel wordt rij per rij opgebouwd. Een rij van een tabel staat tussen de tags <TR> en </TR> (eindtag is optioneel). Belangrijkste attributen :? bgcolor: AFGEKEURD? align: horizontale uitlijning de cellen van de tabelrij. o left: links uitgelijnd o justify: links en rechts uitgelijnd o right: rechts uitgelijnd o center: gecentreerd o char: uitgelijnd op een karakter aangegeven door het char attribuut (standaard het decimaal scheidingsteken). Werkt niet in alle browsers.? valign: vertikale uitlijning van de cellen van de tabelrij. o top: gegevens bovenaan uitgelijnd ICT HTML basiscursus 21
o o middle: in het midden van de cel uitgelijnd bottom: onderaan in de cel uitgelijnd Tabelcellen : TH en TD Met de elementen TH en TD kan je inhoud aan de tabel geven. TH wordt gebruikt voor kolom- en rijkoppen, TD voor de andere cellen. User Agents zorgen ervoor dat THelementen anders worden weergegeven dan TD-elementen. De attributen voor de TH en TD-tags komen overeen met de attributen voor de TR-tag hierboven. Een aantal extra attributen komen verderop ter sprake. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>Eenvoudige tabel</big><br><br> <TABLE summary="deze tabel bevat de naam van een student, het geslacht van de student, het meest geliefde vak en de afstand tot de school in km" frame="hsides" rules="cols" border="10px" cellspacing="0px" cellpadding="5px"> <TR> <TH>Naam</TH> <TH>Geslacht</TH> <TH>Leukste vak</th> <TH>Afstand</TH> <TR> <TD>P. Janssens</TD> <TD align="center">m</td> <TD>Engels</TD> <TD align="right">12</td> <TR> <TD>J. Dinnen</TD> <TD align="center">v</td> <TD>Frans</TD> <TD align="right">17</td> </TABLE> CAPTION Met het CAPTION-element kan je een (korte) beschrijving bij een tabel geven. ICT HTML basiscursus 22
Een CAPTION-element moet onmiddellijk na de TABLE-tag worden geplaatst. Er is slechts één CAPTION-element per tabel. Met het afgekeurde attribuut align kan je de positie van de CAPTION ten opzichte van de tabel bepalen (top, bottom, left of right) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>Eenvoudige tabel : CAPTION</BIG><br><br> <TABLE summary="deze tabel bevat de naam van een student, het geslacht van de student, het meest geliefde vak en de afstand tot de school in km" frame="hsides" rules="cols" border="10px" cellspacing="0px" cellpadding="5px"> <CAPTION>Gegevens over studenten</caption> <TR> <TH>Naam</TH> <TH>Geslacht</TH> <TH>Leukste vak</th> <TH>Afstand</TH> <TR> <TD>P. Janssens</TD> <TD align="center">m</td> <TD>Engels</TD> <TD align="right">12</td> <TR> <TD>J. Dinnen</TD> <TD align="center">v</td> <TD>Frans</TD> <TD align="right">17</td> </TABLE> Rijen groeperen : THEAD, TFOOT en TBODY Je kan in een tabel rijen groeperen door de elementen THEAD, TFOOT en TBODY te gebruiken. Zo kan een User Agent de tabel-onderdelen beter structureren, en kan je als gebruiker deze gebieden beter opmaken. Onthoud:? THEAD, TFOOT en TBODY moeten uit evenveel kolommen bestaan.? De TBODY tag is verplicht als er een THEAD of TFOOT aanwezig is ICT HTML basiscursus 23
? De eindtags mogen weggelaten worden.? De TFOOT tag komt voor de TBODY tag(s) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>Tabel : THEAD, TFOOT, TBODY</BIG><br><br> <TABLE summary="deze tabel bevat de naam van een student, het geslacht van de student, het meest geliefde vak en de afstand tot de school in km" frame="hsides" rules="groups" border="10px" cellspacing="0px" cellpadding="5px"> <CAPTION>Gegevens over studenten</caption> <THEAD> <TR> <TH>Naam</TH> <TH>Geslacht</TH> <TH>Leukste vak</th> <TH>Afstand</TH> <TFOOT> <TH>Einde Naam</TH> <TH>Einde Geslacht</TH> <TH>Einde Vak</TH> <TH>Einde Afstand</TH> <TBODY> <TR> <TD>P. Janssens</TD> <TD align="center">m</td> <TD>Engels</TD> <TD align="right">12</td> <TR> <TD>J. Dinnen</TD> <TD align="center">v</td> <TD>Frans</TD> <TD align="right">17</td> <TBODY> <TR> <TD>P. Kalvers</TD> <TD align="center">m</td> <TD>Aardrijkskunde</TD> <TD align="right">25</td> <TR> <TD>E. Deblazer</TD> <TD align="center">v</td> <TD>Wiskunde</TD> <TD align="right">27</td> <TR> <TD>W. Beestjens</TD> <TD align="center">v</td> <TD>Wiskunde</TD> <TD align="right">28</td> <TBODY> <TR> ICT HTML basiscursus 24
<TD>K. Posters</TD> <TD align="center">v</td> <TD>Tekenen</TD> <TD align="right">33</td> <TR> <TD>T. Verpinnen</TD> <TD align="center">m</td> <TD>Frans</TD> <TD align="right">39</td> </TABLE> Kolommen groeperen : COLGROUP, COL COLGROUP COLGROUPs staan je toe structurele verdelingen te maken in een tabel. Je kan kolomgroepen van een tabel opmaken volgens een Style Sheet of met behulp van attributen zoals het rules-attribuut van het TABLE element. Met het span-attribuut van het COLGROUP element kan je aangeven hoeveel kolommen er binnen deze groep vallen Met het width-attribuut kan je de breedte van de kolommen binnen deze groep instellen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>COLGROUP</BIG><br><br> <TABLE border="2" frame="hsides" rules="groups" summary="inschrijving voor Badmintontornooien."> <CAPTION>Inshrijving badmintontornooien</caption> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center" span="2"> <COLGROUP align="center" span="3"> <THEAD valign="top"> <TR> <TH>Lidnr<BR>ID <TH>Naam <TH>Prov.<br> Kamp. <TH>B.<br>Kamp. <TH>Rec.<br>Brugge <TH>Rec.<BR>Izegem <TH>Rec.<BR>Oostende <TBODY> <TR><TD>1200<TD>K. Peters<TD><TD><TD>X<TD>X<TD>? <TR><TD>1250<TD>C. Somers<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1251<TD>V. Pluims<TD>X<TD><TD>X<TD>X<TD>X ICT HTML basiscursus 25
<TR><TD>1252<TD>S. Geerts<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1253<TD>T. Bastiaans<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1254<TD>G. Verhulst<TD>X<TD><TD>X<TD>X<TD>X <TR><TD>1255<TD>M. Talpe<TD>X<TD><TD><TD><TD>X <TR><TD>1256<TD>C. Erics<TD>X<TD><TD><TD><TD>X <TR><TD>1257<TD>A. Pieters<TD>X<TD><TD><TD><TD>X <TR><TD>1361<TD>V. Vertsraete<TD>X<TD><TD><TD>?<TD>X <TBODY> <TR><TD>437<TD>L. Evers<TD><TD>X<TD>X<TD>X<TD>X <TR><TD>708<TD>G. Taar<TD><TD>X<TD><TD><TD>X <TR><TD>709<TD>W. Ten Schap<TD><TD>X<TD><TD><TD>X <TR><TD>710<TD>F. Abels<TD><TD>X<TD><TD><TD>X <TR><TD>720<TD>N. Nuyttens<TD><TD>X<TD><TD><TD>X </TABLE> COL Je kan kolommen ook groeperen met het COL-element. COL-elementen kunnen binnen een COLGROUP voorkomen maar ook als zelfstandige eenheid. COL elementen dienen enkel om via attributen zoals Style Sheets kolommen op te maken, ze kunnen niet als structurele eenheid gebruikt worden. In de praktijk is het voor de visuele weergave van tabellen onbelangrijk of je nu met COLGROUP of COL werkt. COL elementen kunnen ook het attribuut span hebben om verschillende kolommen van een opmaak te voorzien. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <P><BIG>COL</BIG><br><br> <TABLE border="2" frame="hsides" rules="groups" summary="inschrijving voor Badmintontornooien." cellspacing="0"> <CAPTION>Inshrijving badmintontornooien</caption> <COLGROUP align="center"> <COLGROUP align="left"> <COLGROUP align="center"> <COL style="background:yellow"> <COL style="background:lightgreen"> </COLGROUP> <COLGROUP align="center"> <COL style="background:pink" span="2"> <COL style="background:lightblue"> </COLGROUP> <COL style="color:red;text-align:center"> <COL style="color:green;text-align:center"> <THEAD valign="top"> <TR> <TH>Lidnr<BR>ID ICT HTML basiscursus 26
<TH>Naam <TH>Prov.<br> Kamp. <TH>B.<br>Kamp. <TH>Rec.<br>Brugge <TH>Rec.<BR>Izegem <TH>Rec.<BR>Oostende <TH>Nog<br> Betalen <TH>Betaald <TBODY> <TR><TD>1200<TD>K. Peters<TD><TD><TD>X<TD>X<TD>?<TD>X<TD> <TR><TD>1250<TD>C. Somers<TD>X<TD><TD>X<TD>X<TD>X<TD>X<TD> <TR><TD>1251<TD>V. Pluims<TD>X<TD><TD>X<TD>X<TD>X<TD><TD>X <TR><TD>1252<TD>S. Geerts<TD>X<TD><TD>X<TD>X<TD>X<TD>X<TD> <TR><TD>1253<TD>T. Bastiaans<TD>X<TD><TD>X<TD>X<TD>X<TD><TD>X <TR><TD>1254<TD>G. Verhulst<TD>X<TD><TD>X<TD>X<TD>X<TD><TD>X <TR><TD>1255<TD>M. Talpe<TD>X<TD><TD><TD><TD>X<TD><TD>X <TR><TD>1256<TD>C. Erics<TD>X<TD><TD><TD><TD>X<TD>X<TD> <TR><TD>1257<TD>A. Pieters<TD>X<TD><TD><TD><TD>X<TD>X<TD> <TR><TD>1361<TD>V. Vertsraete<TD>X<TD><TD><TD>?<TD>X<TD><TD>X <TBODY> <TR><TD>437<TD>L. Evers<TD><TD>X<TD>X<TD>X<TD>X<TD>X<TD> <TR><TD>708<TD>G. Taar<TD><TD>X<TD><TD><TD>X<TD>X<TD> <TR><TD>709<TD>W. Ten Schap<TD><TD>X<TD><TD><TD>X<TD><TD>X <TR><TD>710<TD>F. Abels<TD><TD>X<TD><TD><TD>X<TD><TD>X <TR><TD>720<TD>N. Nuyttens<TD><TD>X<TD><TD><TD>X<TD><TD>X </TABLE> Cellen samenvoegen : COLSPAN en ROWSPAN Met de attributen COLSPAN en ROWSPAN kan je ervoor zorgen dat bepaalde cellen uit een tabel worden samengevoegd. Je kan deze attributen gebruiken in TH en TD-elementen COLSPAN gebruik je voor een cel die meerder kolommen moet overspannen : cellen samenvoegen in horizontale richting. De rij waarin een cel een colspan heeft zal minder TH en TD elementen bevatten dan een rij waarin bij geen enkele cel colspan is gebruikt. ROWSPAN gebruik je wanneer een TH of TD element meerdere rijen moet overspannen : vertikaal samenvoegen van cellen. De daaropvolgende rij(en) zal (zullen) bijgevolg een cel minder hebben. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <STYLE type="text/css"> TR { text-align:center; } ICT HTML basiscursus 27
</STYLE> <P><BIG>COLSPAN en ROWSPAN</BIG><br><br> <TABLE border="2" frame="hsides" rules="border" summary="lesrooster IVO Brugge 2e semester" cellspacing="0px" cellpadding="10px"> <CAPTION>Lesrooster</CAPTION> <COLGROUP style="background:#ffffcc;text-align:left"> <COLGROUP span="5" style="background:#ccccff;text-align:center;color:#990000"> <THEAD> <TR style="background:#ccffcc"> <TH>Lesrooster <TH>maandag <TH>dinsdag <TH>woensdag <TH>donderdag <TH>vrijdag <TBODY> <TR> <TH>Voormiddag <TD>Excel <TD colspan="2">access <TD>HTML <TD rowspan="3">geen les <TR> <TH>Namiddag <TD rowspan="2">javascript <TD>C <TD>Java <TD>Access <TR> <TH>Avond <TD>SQL <TD>Analyse <TD>C </TABLE> ICT HTML basiscursus 28
HTML 4.01 : Links 1. Hyperlinks volgen : <A href="..."> 2. Plaatsen markeren 3. De LINK-tag 4. De BASE-tag Hyperlinks volgen : <A href="..."> Absolute verwijzingen Een hyperlink naar een externe webpagina maak je met het A-element (Anchor) en het attribuut href (Hypertext reference). Het href-attribuut bevat bij een absolute verwijzijng de exacte URI van het op te halen bestand. Tussen de <A> en de </A>-tag neem je het element op dat voor de gebruiker als hyperlink moet dienen (de gebruiker kan dan bv. op deze plaats klikken om het gekoppelde bestand op te vragen). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <h1>hyperlinks : absolute verwijzingen</h1> <p> Lees het nieuws op de website van <a href="http://www.cnn.com">cnn</a> <p> Bekijk de <a href="http://www.ivobrugge.be/cursusweb/images/computer.jpg">figuur</a>. Relatieve verwijzingen In het href-attribuut kan je het pad naar het gekoppelde bestand ook relatief opbouwen ten opzichte van de locatie van het huidige document. Wanneer de gekoppelde bestanden zich in dezelfde map bevinden als het document met de hyperlink, kan je een hyperlink maken met enkel de bestandsnaam als waarde voor het href-attribuut Verwijzen naar submappen doe je door de namen van deze mappen te noteren gescheiden door een slash: / ICT HTML basiscursus 29
Verwijs je naar documenten die zich in een hoger gelegen map bevinden dan kan je een map omhoog met../ (denk aan het vroegere DOS) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <h1>hyperlinks : relatieve verwijzingen</h1> <p> Bekijk het voorbeeld over <a href="links1.html">absolute verwijzingen</a>. <p> Keer terug naar het <a href="../../index.asp">hoofdscherm</a>. <p> Bekijk de <a href="../../images/bos.jpg">figuur</a>. Een figuur als hyperlink Je kan een figuur als hyperlink gebruiken door eenvoudig de code voor het invoegen van de figuur op te nemen tussen de <a> en </a>-tags. <a href="http://www.vbv.be" target="_blank"> <img src="../images/bos.jpg" width="200" height="133" alt="naar Vereniging voor bos in Vlaanderen" border="0"> </a> Opmerking: target="_blank" zorgt ervoor dat de hyperlink in een nieuw browservenster opent. Plaatsen markeren Op een webpagina kan je plaatsen markeren door ze een name of id te geven. Je kan met een hyperlink naar deze plaats in het document 'springen'. De koppeling maak je door in het href-attribuut van de hyperlink de name of id van de plaats op te geven, voorafgegaan door een spoorwegteken ( # ). Zorg ervoor dat de namen en id's die je opgeeft uniek zijn op de pagina. Het name-attribuut in een A-tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ICT HTML basiscursus 30
"http://www.w3.org/tr/html4/strict.dtd"> <A name="top"><h1>hyperlinks : het name attribuut</h1></a> <A href="#deel1">deel 1</A> <A href="#deel2">deel 2</A> <A href="#deel3">deel 3</A> <A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</a> <div style="height:400px;margin-top:50px"> <A name="deel1"><h2>deel 1</h2></A> Hier komt een beschrijving voor deel 1... </div> <div style="height:400px"> <A name="deel2"><h2>deel 2</h2></A> Hier komt een beschrijving voor deel 2... </div> <div style="height:400px"> <A name="deel3"><h2>deel 3</h2></A> Hier komt een beschrijving voor deel 3... </div> <A href="#top">naar boven</a> Het id-attribuut in een A-tag Je kan in plaats van het name-attribuut ook het id-attribuut gebruiken. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <A id="top"><h1>hyperlinks : het id attribuut</h1></a> <A href="#deel1">deel 1</A> <A href="#deel2">deel 2</A> <A href="#deel3">deel 3</A> <A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</a> <div style="height:400px;margin-top:50px"> <A id="deel1"><h2>deel 1</h2></A> Hier komt een beschrijving voor deel 1... ICT HTML basiscursus 31
</div> <div style="height:400px"> <A id="deel2"><h2>deel 2</h2></A> Hier komt een beschrijving voor deel 2... </div> <div style="height:400px"> <A id="deel3"><h2>deel 3</h2></A> Hier komt een beschrijving voor deel 3... </div> <A href="#top">naar boven</a> Je kan beide naamgevingen afwisselen en zelfs combineren: een <A>-tag met zowel het attribuut name als het attribuut id. <A name="a1" id="a1">...<a> Het is wel belangrijk op te merken dat het id-attribuut ook gebruikt kan worden voor andere acties dan enkel het doel van een hyperlink. Plaatsen markeren zonder de A-tag Je bent niet verplicht een <A>-tag met het attribuut name of id te gebruiken bij het bepalen van een koppelplaats op een pagina. Je kan het attribuut id ook gebruiken in zowat alle andere HTML-tags. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <h1 id="top">hyperlinks : id in andere tags <A href="#deel1">deel 1</A> <A href="#deel2">deel 2</A> <A href="#deel3">deel 3</A> <A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</a> <div style="height:400px;margin-top:50px"> <h2 id="deel1">deel 1</h2> Hier komt een beschrijving voor deel 1... </div> <div style="height:400px"> <p id="deel2">deel 2</p> Hier komt een beschrijving voor deel 2... </div> <div style="height:400px"> <h3 id="deel3">deel 3</h3> Hier komt een beschrijving voor deel 3... ICT HTML basiscursus 32
</div> <A href="#top">naar boven</a> De LINK-tag Een LINK-tag definiëert een koppeling met het huidige document. In tegenstelling tot de A-tag mag de LINK-tag enkel voorkomen in de HEAD-sectie van de pagina en niet in de BODY-sectie. Een LINK-tag kan gebruikt worden om informatie te verschaffen in verband met documenten die verband houden met het huidige document. Deze informatie wordt door de User Agent al dan niet grafisch weergegeven. In de browser Opera kan je een werkbalk 'navigatie' activeren waarmee je deze koppelingen kan volgen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <TITLE>Hoofdstuk hyperlinks</title> <LINK rel="index" href="../../index.asp"> <LINK rel="contents" href="../links.asp"> <LINK rel="next" href="../objecten.asp"> <LINK rel="prev" href="../lijsten.asp">...de rest van het document... Met de LINK-tag kan je ook een koppeling maken naar een extern CSS-bestand (zie later). Meer over het LINK-element bij het W3C. De Base-tag Met behulp van de BASE-tag en het href-attribuut kan je aangeven ten opzichte van welke URI relatieve verwijzingen moeten worden gevolgd. Standaard worden relatieve verwijzigen gevolgd ten opzichte van het huidige document. Met het attribuut target kan je aangeven dat de gekoppelde pagina in een bepaald frame moet worden geopend. (zie later) ICT HTML basiscursus 33
HTML 4.01 : Links 1. Hyperlinks volgen : <A href="..."> 2. Plaatsen markeren 3. De LINK-tag 4. De BASE-tag Hyperlinks volgen : <A href="..."> Absolute verwijzingen Een hyperlink naar een externe webpagina maak je met het A-element (Anchor) en het attribuut href (Hypertext reference). Het href-attribuut bevat bij een absolute verwijzijng de exacte URI van het op te halen bestand. Tussen de <A> en de </A>-tag neem je het element op dat voor de gebruiker als hyperlink moet dienen (de gebruiker kan dan bv. op deze plaats klikken om het gekoppelde bestand op te vragen). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <h1>hyperlinks : absolute verwijzingen</h1> <p> Lees het nieuws op de website van <a href="http://www.cnn.com">cnn</a> <p> Bekijk de <a href="http://www.ivobrugge.be/cursusweb/images/computer.jpg">figuur</a>. Relatieve verwijzingen In het href-attribuut kan je het pad naar het gekoppelde bestand ook relatief opbouwen ten opzichte van de locatie van het huidige document. Wanneer de gekoppelde bestanden zich in dezelfde map bevinden als het document met de hyperlink, kan je een hyperlink maken met enkel de bestandsnaam als waarde voor het href-attribuut Verwijzen naar submappen doe je door de namen van deze mappen te noteren gescheiden door een slash: / ICT HTML basiscursus 34
Verwijs je naar documenten die zich in een hoger gelegen map bevinden dan kan je een map omhoog met../ (denk aan het vroegere DOS) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <h1>hyperlinks : relatieve verwijzingen</h1> <p> Bekijk het voorbeeld over <a href="links1.html">absolute verwijzingen</a>. <p> Keer terug naar het <a href="../../index.asp">hoofdscherm</a>. <p> Bekijk de <a href="../../images/bos.jpg">figuur</a>. Een figuur als hyperlink Je kan een figuur als hyperlink gebruiken door eenvoudig de code voor het invoegen van de figuur op te nemen tussen de <a> en </a>-tags. <a href="http://www.vbv.be" target="_blank"> <img src="../images/bos.jpg" width="200" height="133" alt="naar Vereniging voor bos in Vlaanderen" border="0"> </a> Opmerking: target="_blank" zorgt ervoor dat de hyperlink in een nieuw browservenster opent. Plaatsen markeren Op een webpagina kan je plaatsen markeren door ze een name of id te geven. Je kan met een hyperlink naar deze plaats in het document 'springen'. De koppeling maak je door in het href-attribuut van de hyperlink de name of id van de plaats op te geven, voorafgegaan door een spoorwegteken ( # ). Zorg ervoor dat de namen en id's die je opgeeft uniek zijn op de pagina. ICT HTML basiscursus 35
Het name-attribuut in een A-tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <A name="top"><h1>hyperlinks : het name attribuut</h1></a> <A href="#deel1">deel 1</A> <A href="#deel2">deel 2</A> <A href="#deel3">deel 3</A> <A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</a> <div style="height:400px;margin-top:50px"> <A name="deel1"><h2>deel 1</h2></A> Hier komt een beschrijving voor deel 1... </div> <div style="height:400px"> <A name="deel2"><h2>deel 2</h2></A> Hier komt een beschrijving voor deel 2... </div> <div style="height:400px"> <A name="deel3"><h2>deel 3</h2></A> Hier komt een beschrijving voor deel 3... </div> <A href="#top">naar boven</a> Het id-attribuut in een A-tag Je kan in plaats van het name-attribuut ook het id-attribuut gebruiken. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <A id="top"><h1>hyperlinks : het id attribuut</h1></a> <A href="#deel1">deel 1</A> <A href="#deel2">deel 2</A> <A href="#deel3">deel 3</A> <A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</a> ICT HTML basiscursus 36
<div style="height:400px;margin-top:50px"> <A id="deel1"><h2>deel 1</h2></A> Hier komt een beschrijving voor deel 1... </div> <div style="height:400px"> <A id="deel2"><h2>deel 2</h2></A> Hier komt een beschrijving voor deel 2... </div> <div style="height:400px"> <A id="deel3"><h2>deel 3</h2></A> Hier komt een beschrijving voor deel 3... </div> <A href="#top">naar boven</a> Je kan beide naamgevingen afwisselen en zelfs combineren: een <A>-tag met zowel het attribuut name als het attribuut id. <A name="a1" id="a1">...<a> Het is wel belangrijk op te merken dat het id-attribuut ook gebruikt kan worden voor andere acties dan enkel het doel van een hyperlink. Plaatsen markeren zonder de A-tag Je bent niet verplicht een <A>-tag met het attribuut name of id te gebruiken bij het bepalen van een koppelplaats op een pagina. Je kan het attribuut id ook gebruiken in zowat alle andere HTML-tags. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <h1 id="top">hyperlinks : id in andere tags <A href="#deel1">deel 1</A> <A href="#deel2">deel 2</A> <A href="#deel3">deel 3</A> <A href="../links.asp#plaats">theorie over het markeren van een plaats op een pagina.</a> <div style="height:400px;margin-top:50px"> <h2 id="deel1">deel 1</h2> Hier komt een beschrijving voor deel 1... </div> <div style="height:400px"> <p id="deel2">deel 2</p> Hier komt een beschrijving voor deel 2... </div> ICT HTML basiscursus 37
<div style="height:400px"> <h3 id="deel3">deel 3</h3> Hier komt een beschrijving voor deel 3... </div> <A href="#top">naar boven</a> De LINK-tag Een LINK-tag definiëert een koppeling met het huidige document. In tegenstelling tot de A-tag mag de LINK-tag enkel voorkomen in de HEAD-sectie van de pagina en niet in de BODY-sectie. Een LINK-tag kan gebruikt worden om informatie te verschaffen in verband met documenten die verband houden met het huidige document. Deze informatie wordt door de User Agent al dan niet grafisch weergegeven. In de browser Opera kan je een werkbalk 'navigatie' activeren waarmee je deze koppelingen kan volgen. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <TITLE>Hoofdstuk hyperlinks</title> <LINK rel="index" href="../../index.asp"> <LINK rel="contents" href="../links.asp"> <LINK rel="next" href="../objecten.asp"> <LINK rel="prev" href="../lijsten.asp">...de rest van het document... Met de LINK-tag kan je ook een koppeling maken naar een extern CSS-bestand (zie later). Meer over het LINK-element bij het W3C. De Base-tag Met behulp van de BASE-tag en het href-attribuut kan je aangeven ten opzichte van welke URI relatieve verwijzingen moeten worden gevolgd. Standaard worden relatieve verwijzigen gevolgd ten opzichte van het huidige document. Met het attribuut target kan je aangeven dat de gekoppelde pagina in een bepaald frame moet worden geopend. (zie later) ICT HTML basiscursus 38
HTML 4.01 : werken met frames 1. Voorbeelden 2. De FRAMESET-tag 3. De FRAME-tag 4. Nesten van FRAMESET-elementen 5. Wisselwerking tussen frames: target 6. Het NOFRAMES-element 7. Het IFRAME-element: werken met inline frames Voorbeelden Het werken met frames geeft je de mogelijkheid het scherm te verdelen in meerdere 'vensters'. Deze vensters kunnen onafhankelijk van elkaar gemanipuleerd worden. Voor het werken met frames is er een pagina nodig waar je de verdeling in frames opgeeft. Dergelijke pagina's zie je hieronder. Deze pagina bevat enkel de informatie over het verdelen van het venster, geen inhoud. Vandaar dat de BODY-tags hier niet voorkomen. Ze werden vervangen door de FRAMESET-tags. De pagina's waarnaar wordt verwezen in de FRAME-tags worden afzonderlijk aangemaakt. Je kan de broncode van deze pagina's zien door in IE met de rechtermuisknop in de frame te klikken en te kiezen voor bron weergeven. Een frameset-waarbij de pagina wordt verdeeld in twee kolommen, de eerste kolom neemt 20% van de breedte in beslag, de tweede kolom 80%: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>Een eenvoudig frameset document</title> <FRAMESET cols="20%, 80%"> <FRAME src="vb1_inhoud_frame1.html"> <FRAME src="vb1_inhoud_frame2.html"> </FRAMESET> Een frameset-waarbij de pagina wordt verdeeld in drie rijen. De eerste rij is 200 pixels hoog, de tweede rij 100 pixels, de derde rij neemt de rest van de beschikbare hoogte, dit wordt aangegeven met *: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> ICT HTML basiscursus 39
<TITLE>Een eenvoudig frameset document</title> <FRAMESET rows="200, 100, *"> <FRAME src="vb1_inhoud_frame1.html"> <FRAME src="vb1_inhoud_frame2.html"> <FRAME src="vb1_inhoud_frame3.html"> </FRAMESET> Een frameset-waarbij de pagina wordt verdeeld in drie rijen. De tweede rij is 250 pixels hoog, de eerste rij neemt van de resterende hoogte 25% in beslag, de derde rij 75% (1* en 3*): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>Een eenvoudig frameset document</title> <FRAMESET rows="1*, 250, 3*"> <FRAME src="vb1_inhoud_frame1.html"> <FRAME src="vb1_inhoud_frame2.html"> <FRAME src="vb1_inhoud_frame3.html"> </FRAMESET> Een frameset met een verdeling in twee rijen en drie kolommen. Dit resulteert in 6 deelvensters die onafhankelijk gevuld kunnen worden: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>Een eenvoudig frameset document</title> <FRAMESET rows="300,*" cols="30%,1*,2*"> <FRAME src="vb1_inhoud_frame1.html"> <FRAME src="vb1_inhoud_frame2.html"> <FRAME src="vb1_inhoud_frame3.html"> <FRAME src="vb1_inhoud_frame4.html"> <FRAME src="vb1_inhoud_frame5.html"> <FRAME src="vb1_inhoud_frame6.html"> </FRAMESET> ICT HTML basiscursus 40
De FRAMESET-tag De FRAMESET-tag duidt aan dat je de pagina in deelvensters wenst te verdelen. Met de attributen cols en rows geef je in de FRAMESET-tag aan welke verdeling je wenst : kolommen of in rijen. De attributen cols en rows hebben als attribuutwaarde een lijst van getallen die de breedte van de kolommen of de hoogte van de rijen aangeven. Deze getallen zijn afmetingen in pixels of percentages (%). Bekijk de voorbeelden voor meer informatie. De FRAME-tag Voor elke verdeling die met de FRAMESET-tag maakt, verschijnt in de browser een venster. Deze vensters moeten met inhoud gevuld worden. Dit doe je met de FRAME-tag en het attribuut src. De FRAME-tag kent volgende attributen:? longdesc: link naar een bestand met een uitgebreide beschrijving.? name: je kan een fame een naam geven, zodat je later vanuit een andere frame de inhoud van deze frame kan veranderen.? src: bestandsnaam voor de inhoud van deze frame? frameborder: waarde 0 of 1 - heeft deze frame een rand? standaard: 1 - de frame heeft een rand? marginwidth: breedte van de marge in pixels? marginheight: hoogte van de marge in pixels? noresize: waarde noresize om gebruikers niet toe te staan zelf de afmetingen van de frame te veranderen.? srolling: yes, no of auto - kan de gebruiker scrollen binnen deze frame? standaard: auto - scrolbar zichtbaar indien nodig. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>Een eenvoudig frameset document</title> <FRAMESET rows="300,*" cols="30%,1*,2*"> <FRAME src="vb1_inhoud_frame1.html" frameborder="0"> <FRAME src="vb1_inhoud_frame2.html" frameborder="0"> <FRAME src="vb1_inhoud_frame3.html" scrolling="yes"> <FRAME src="vb1_inhoud_frame4.html" marginwidth="60"> <FRAME src="vb1_inhoud_frame5.html" marginheight="50"> <FRAME src="vb1_inhoud_frame6.html" noresize> </FRAMESET> ICT HTML basiscursus 41
Nesten van FRAMESET-elementen Voor complexere vensterstructuren is het mogelijk FRAMESETS te nesten. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>Geneste framesets</title> <FRAMESET rows="20%,80%" > <FRAME src="vb1_inhoud_frame1.html"> <FRAMESET cols="*,200"> <FRAME src="vb1_inhoud_frame2.html"> <FRAME src="vb1_inhoud_frame3.html"> </FRAMESET> </FRAMESET> Wisselwerking tussen frames: target Target in de A-tag Wanneer in één van de deelframes gebruik maakt van hyperlinks, dan zal de gekoppelde pagina standaard geopend worden in de frame waar de hyperlink zich bevindt. Dit is niet altijd de bedoeling! Open ter illustratie onderstaand voorbeeld: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>Wisselwerking tussen frames: target</title> <FRAMESET rows="80,*" > <FRAME src="titel.html"> <FRAMESET cols="150,*"> <FRAME src="navigatie.html"> <FRAME name="inhoud" src="intro.html"> </FRAMESET> </FRAMESET> Code van het document navigatie.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ICT HTML basiscursus 42
"http://www.w3.org/tr/html4/strict.dtd"> <TITLE>Framesets : IVO - cursussen : navigatie</title> <STYLE type="text/css"> BODY { background:#ffffcc; margin-top:40px; } </STYLE> <a href="informatica.html" target="inhoud">informatica</a><br> <a href="talen.html" target="inhoud">talen</a><br> <a href="koken.html" target="inhoud">koken</a><br> <br> <a href="intro.html" target="inhoud">intro</a><br> Toon (deel van een framesdocument, werkt niet naar behoren indien zelfstandig geopend) Wanneer je een hyperlink aanklikt in het navigatiegedeelte merk je dat de pagina opent in het rechtergedeelte van het scherm. Dit kan je bereiken door de doelframe een naam te geven met het attribuut name: <FRAME name="inhoud" src="intro.html"> Deze naam gebruik je als waarde van het target-attribuut in de hyperlink: <a href="informatica.html" target="inhoud">informatica</a> Deze hyperlink bevindt zich in het bestand navigatie.html. Voorgedefiniëerde target-waarden Andere target-waarden voor hyperlinks zijn:? _blank: openen in een nieuw browservenster? _parent: openen in de overkoepelende frameset? _top: openen in het volledige huidige venster? _self: openen in de huidige frame Target in de BASE-tag Je kan in de hoofding van een pagina de BASE-tag gebruiken met het attribuut target om aan te geven dat hyperlinks in dit document standaard in een andere frame moeten geopend worden. <BASE target="inhoud"> Je kan van deze standaardwaarde nog afwijken door in een hyperlink het attribuut target te gebruiken met een andere waarde. ICT HTML basiscursus 43
Het NOFRAMES-element Om User Agents die het gebruik van frames niet ondersteunen toch de inhoud van uw pagina's te laten zien kan je gebruik maken van het NOFRAMES-element. Dit element neem je op voor de laatste </FRAMESET>-tag. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>Het NOFRAMES-element</TITLE> <FRAMESET rows="80,*" > <FRAME src="titel.html"> <FRAMESET cols="150,*"> <FRAME src="navigatie.html"> <FRAME name="inhoud" src="intro.html"> </FRAMESET> <NOFRAMES> <H1>Cursussen aan het IVO-Brugge</H1> Uw browser ondersteunt geen frames - alternatieve navigatie: <UL> <LI><a href="informatica.html">informatica</a> <LI><a href="talen.html">talen</a> <LI><a href="koken.html">koken</a> </UL> </NOFRAMES> </FRAMESET> Het IFRAME-element Met het IFRAME-element kan je een gebied op een webpagina gebruiken voor variabele inhoud. Je kan documenten openen in de IFRAME-met hyperlinks. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <TITLE>IFRAME: inline frames</title> <STYLE type="text/css"> BODY { background:#ffff99 } td { background:#9933ff; width:150px; height:40px; text-align:center; } a:link { color:#ffff00; } a:visited { color:#ffffff; } ICT HTML basiscursus 44
a:active { color:#ff3300; } a:hover { color:#9933ff; text-decoration:none; background:#ffffcc; } </STYLE> <h1>beestenboel</h1> <table> <tr> <td><a href="koeien.html" target="beesten">koeien</a></td> <td><a href="schapen.html" target="beesten">schapen</a></td> <td><a href="geiten.html" target="beesten">geiten</a></td> </tr> </table> <IFRAME name="beesten" src="koeien.html" width="465" height="300" scrolling="auto" frameborder="1"> Uw browser ondersteunt geen frames - geen alternatieve navigatie voorzien. </IFRAME> attributen voor IFRAMES:? longdesc: verwijzing naar een bestand met een uitgebreide beshrijving.? name: naam van de IFRAME - voor verwijzingen met het attribuut target.? width: breedte van het IFRAME.? height: hoogte van het IFRAME.? scrolling: kan de gebruiker scrollen? (yes, no, auto)? frameborder: rand omheen de IFRAME? marginwidth: breedte van de marge? marginheight: hoogte van de marge? align: uitlijning van de IFRAME ICT HTML basiscursus 45
HTML 4.01: Gebruik van formulieren 1. Inleiding 2. Het FORM-element 3. Het INPUT-element 4. Het button-element 5. SELECT, OPTGROUP en OPTION 6. Het TEXTAREA-element 7. FIELDSET en LEGEND 8. Een element de focus geven 9. Disabled en Readonly controls Inleiding Formulieren zijn elementen die je op een webpagina kan plaatsen wanneer je de gebruiker om informatie verzoekt. Formulierelementen kunnen gewone tekstinhoud, opmaak en speciale formuliercontrols bevatten. Gebruikers vullen dan de formuliergegevens in versturen de gegevens. Deze gegevens worden dan verwerkt op een server en gemanipuleerd: een opzoeking in een database, wegschrijven in een database, uploaden van bestanden, verstuurd via email,... In dit deel van de cursus focussen we ons op het client-side gebruik van forulieren: we zorgen ervoor dat een gebruiker een formulier op het scherm ziet en de nodige gegevens kan invullen. Het verwerken van de gegevens kan gebeuren met een server-side techniek zoals ASP, ASP.net, PHP, JSP, Coldfusion,... Het client-side manipuleren van de gegevens zoals uitvoeren van controles kan gebeuren in Javascript of VBScript. Je vindt hieronder een voorbeeld van een formulier in HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>cursus HTML 4.01 : gebruik van formulieren - voorbeeld 1</title> </head> <h1>voorbeeld formuliergebruik</h1> <FORM action="../../formscript.asp" method="get"> <P> <LABEL for="voornaam">voornaam: </LABEL> <INPUT type="text" name="voornaam"><br> <LABEL for="familienaam">familienaam: </LABEL> <INPUT type="text" name="familienaam"><br> ICT HTML basiscursus 46
<LABEL for="email">email: </LABEL> <INPUT type="text" name="email"><br> <INPUT type="radio" name="geslacht" value="m">man<br> <INPUT type="radio" name="geslacht" value="v">vrouw<br> <INPUT type="submit" value="versturen"> <INPUT type="reset"> </P> </FORM> </body> </html> Zoals je merkt in het voorbeeld zal het qua layout beter zijn tabellen te gebruiken voor het schikken van de formulierelementen. Het bestand op de server dat instaat voor de formulierafhandeling is aangeduid in het action-attribuut van de FORM-tag. Hier werk ik met een relatieve verwijzing t.o.v. dit document, wil je in je eigen formulieren dit script gebruiken (voor testdoeleinden) verwijs dan naar de absolute locatie van dit bestand: http://www.ivobrugge.be/cursusweb/formscript.asp Het aanmaken van dergelijke server-side scriptbestanden maakt geen deel uit van de cursus HTML 4.01 maar zal je leren in de cursussen ASP en ASP.net. Het FORM-element De gegvens die tot één formulier behoren plaats je tussen de tags <FORM> en </FORM>. De FORM-tag kent heel wat specifieke attributen:? action: URI van het afhandelingsscript? method: specifiëert welke HTTP-methode er gebruit zal worden voor het versturen van de formuliergegevens. Mogelijke waarden zijn GET (standaard) en POST. GET: formuliergegevens worden verstuurd door een? aan de URI te plakken samen met de naam-waarde paren van de formulierelementen. We noemen dit deel van de URI de querystring. POST: de gegevens worden verstuurd in de BODY van de request-aanvraag naar de server.? enctype: specifiëert het type van de inhoud van de verstuurde gegevens bij formulieren met de method POST. De standaardwaarde is application/x-wwwform-urlencoded, multipart/form-data gebruik je voor het versturen van bestanden - in combinatie met het INPUT-element van het type file.? accept-charset: geeft de karakterset aan waartoe de verstuurde tekens behoren, aangegeven in een lijst gescheiden door komma's - standaard : UNKNOWN.? accept: een door komma's gescheiden lijst van inhoudtypes? name: hiermee geef je het formulier een naam voor opmaak met Style Sheets of voor scripting. Het W3C raadt aan het attribuut id te gebruiken voor naamgeving. Het FORM-element fungeert als container voor formulierelementen : tekstvakken, keuzelijsten, keuzerondjes, keuzevakjes,... ICT HTML basiscursus 47
Het FORM-element kan ook andere elementen voor opmaak van de pagina bevatten. Het INPUT-element Het INPUT element groepeert een ganse serie formuliercontrols die je op een webpagina kan gebruiken. Het type en de eigenschappen van een INPUT-element stel je in met volgende attributen:? type: het type formulierelement dat je wenst aan te maken - Standaard: text o text: een tekstvak voor één regel tekst. <input name="tekst" type="text" value="tikken"> tikken o password: zoals een text-veld, maar de invoer van de gebruiker wordt door de User Agent gemaskeerd. <input name="pwd" type="password" value="paswoord"> o checkbox: maakt een keuzevak. Je kan meerder keuzevakken eenzelfde name geven om aan te duiden dat deze vakken bij elkaar horen (een aantal opties onder dezelfde noemer). Enkel waarden van keuzelijsten die aangevinkt (checked) zijn worden meegestuurd naar de afhandelingsscript. Je kan keuzelijsten standaard aanleggen door de waarde checked in de input-tag op te nemen. <input type="checkbox" name="deel" value="d1">deel1 <input type="checkbox" name="deel" value="d2">deel2 <input type="checkbox" name="deel" value="d2">deel3 deel1 deel2 deel3 o radio: maakt een keuzerondje. Bij elkaar horende keuzerondjes moet je dezelfde name geven, anders zullen ze niet samenwerken. Het is nu eenmaal de bedoeling bij keuzerondjes dat je slechts één van de mogelijkheden kan selecteren. <input type="radio" name="deel" value="small">small <input type="radio" name="deel" value="medium">medium <input type="radio" name="deel" value="large">large small medium large o submit: verstuurt de gegevens van het formulier. De value van dit element is de tekst die op de knop staat. <input type="submit" value="versturen"> versturen ICT HTML basiscursus 48
o image: zelfde functionaliteit als een submit-button, maar met een figuur naar keuze. De figuur wordt aangeduid met het src-attribuut van de INPUT-tag. Het is nu ook aan te raden een alternatieve tekst te voorzien met het alt-attribuut. <input type="image" src="../images/arrowbutton.gif" alt="versturen"> o reset: stelt al controls in op hun originele waarden. <input type="reset" value="opnieuw!"> opnieuw! o button: knop zonder basisfunctie, webontwikkelaars kunnen via client-side scriptcode zelf de functionaliteit van deze knop bepalen. <input type="button" value="klik me"> o hidden: controls die niet worden weergegeven maar waarvan de value wel wordt meegestuurd. <input name="verborgen" type="hidden" value="mij zie je niet"> o file: opent een bestandskeuzevenster. Het value attribuut kan worden gebruikt om een standaardbestandslocatie aan te geven. <input name="bestand" type="file">? name: de naam van het formulierelement, sommige elementen hebben bij voorkeur dezelfde naam.? value: standaardwaarde van het element, optioneel behalve bij radio en checkbox-types.? size: de breedte van het element in pixels, behalve bij text of password-types : hier is size het aantal karakters.? maxlength: gebruikt bij text en password-types : stelt het maximaal in te geven aantal karakters in. Als maxlength > size dat kan er gescrolld worden.? checked: activeert de optie voor een radio en checkbox? src: voor INPUT-elementen van het type image: stelt het bestand voor de figuur in. Het BUTTON-element Het BUTTON-element functioneert net als een INPUT-element maar ondersteund meer opmaakmogelijkheden. De eigenschappen van een BUTTON kan je instellen met volgende attributen: ICT HTML basiscursus 49
? name: de naam van de knop? value: standaardwaarde van de knop? type: het type knop o submit: verstuur de formuliergegevens o button: een drukknop waarvoor je zelf de actie kan definiëren. o reset: plaatst alle controls op hun standaardwaarde In het volgende voorbeeld zie je een kleine toepassing met knoppen. Maak je voorlopig geen zorgen over de Javascript-code in het het onclick-attribuut van de eerste BUTTON. <form name="f2" action="../formscript.asp" method="post"> <input name="getal1" type="text" value="10" size="8"><br> <input name="getal2" type="text" value="20" size="8"><br> <Button name="bereken" type="button" onclick="f2.som.value=parseint(f2.getal1.value)+parseint(f2.getal2.value)"> <img src="../images/bereken.gif" width="17" height="16" alt="" border="0" > Som </Button><br> <input name="som" type="text" value="" size="8" disabled><br><br> <Button name="reset" type="reset"> <img src="../images/reset2.gif" width="21" height="14" alt="" border="0"> Reset </Button><br> <Button type="submit">verstuur!</button> </form> 10 20 Som Reset Verstuur! SELECT, OPTGROUP en OPTION SELECT en OPTION Met het SELECT en het OPTION-element kan je keuzelijsten maken. Het SELECT-element vormt de container voor meerdere OPTION-elementen. Voor het SELECT-element is de eindtag verplicht, voor het OPTION-element is die optioneel. Attributen voor het SELECT-element:? name: naam van de keuzelijst? size: aantal keuzemogelijkheden die tegelijk zichtbaar zijn? multiple: maakt meerdere keuzes mogelijk ICT HTML basiscursus 50
Attributen voor het OPTION-element:? selected: het element is vooraf geselecteerd? value: standaardwaarde van de optie? label: eventueel een verkorte notatie voor de inhoud van het OPTION-element. <form name="f3" action="../formscript.asp" method="post"> Niveau:<br> <Select name="lijstniveau"> <Option value="1">basis <Option value="2" selected>gevorderd <Option value="3">expert </Select> <p> Curssen:<br> <Select name="lijstcursus" multiple size="5"> <Option value="c">c <Option value="vb">visual Basic <Option value="java">java <Option value="html" selected>html <Option value="js" selected>javascript <Option value="sql">sql <Option value="w">word <Option value="e">excel <Option value="a">access <Option value="fr">frans <Option value="eng">engels <Option value="du">duits </Select> <p><input type="submit" value="verstuur!"> </form> Niveau: Gevorderd Curssen: C Visual Basic Java HTML Javascript Verstuur! OPTGROUP Met het OPTGROUP-element kan je opties groeperen. Dit elemente ondersteund het attribuut label: tekst voor de groepering. Starttag is verplicht, eindtag optioneel. <form name="f3" action="../formscript.asp" method="post"> Niveau:<br> <Select name="lijstniveau"> <Option value="1">basis <Option value="2" selected>gevorderd <Option value="3">expert ICT HTML basiscursus 51
</Select> <p> Curssen:<br> <Select name="lijstcursus" multiple size="5"> <Optgroup label="programmeren"> <Option value="c">c <Option value="vb">visual Basic <Option value="java">java <Option value="html" selected>html <Option value="js" selected>javascript <Option value="sql">sql <Optgroup label="office"> <Option value="w">word <Option value="e">excel <Option value="a">access <Optgroup label="talen"> <Option value="fr">frans <Option value="eng">engels <Option value="du">duits </Select> <p><input type="submit" value="verstuur!"> </form> Niveau: Gevorderd Curssen: C Visual Basic Java HTML Javascript Verstuur! Het TEXTAREA-element Met TEXTAREA-element kan je een tekstvak met meerdere lijnen op het scherm brengen. Attributen van het TEXTAREA-element:? name: naam van het element? rows: het aantal zichtbare lijnen? cols: aantal karakters zichtbaar naast elkaar <form name="f4" action="../formscript.asp" method="post"> <textarea name="opmerkingen" rows="5" cols="30" > Tik hier je opmerkingen of je commentaar </textarea><br> <input type="submit" value="verstuur!"> </form> ICT HTML basiscursus 52
Tik hier je opmerkingen of je commentaar Verstuur! FIELDSET en LEGEND Het FIELDSET-element staat je toe formulierelementen per onderwerp te groeperen. Met het LEGEND element en het afgekeurde attribuut align kan je tekst op een FIELDSETelement plaatsen. <form name="f3" action="../formscript.asp" method="post"> <FIELDSET style="width:300px"> <LEGEND align="center">persoonlijk</legend> <table width="200"> <tr> <td>naam:</td> <td><input name="naam" type="text" value="schokkele"></td> </tr> <tr> <td>voornaam:</td> <td><input name="voornaam" type="text" value="william"></td> </tr> </table> </FIELDSET> <FIELDSET style="width:300px"> <LEGEND align="center">opleiding</legend> <table> <tr> <td>niveau:</td> <td><select name="lijstniveau"> <Option value="1">basis <Option value="2" selected>gevorderd <Option value="3">expert </Select></td> </tr> <tr> <td valign="top">curssen:</td> <td><select name="lijstcursus" multiple size="5"> <Optgroup label="programmeren"> <Option value="c">c <Option value="vb">visual Basic <Option value="java">java <Option value="html" selected>html <Option value="js" selected>javascript <Option value="sql">sql <Optgroup label="office"> <Option value="w">word <Option value="e">excel <Option value="a">access <Optgroup label="talen"> <Option value="fr">frans <Option value="eng">engels <Option value="du">duits </Select></td> ICT HTML basiscursus 53
</tr> </table> </FIELDSET> <p><input type="submit" value="verstuur!"> </form> Persoonlijk Naam: Voornaam: Opleiding Niveau: Schokkele William Gevorderd Curssen: C Visual Basic Java HTML Javascript Verstuur! Een element de focus geven Er zijn voor een webpagina een aantal manieren om een element de focus te geven (ervoor zorgen dat het element actief is):? Het element aanklikken met bijvoorbeeld de muis? Het element aanduiden met het toestenbord (tab-toets)? Gebruik maken van een access key (sneltoets) Tabvolgorde Voor het vastleggen van de volgorde van controls bij bijvoorbeeld het drukken op de tabtoets kan je gebruik maken van het attribuut tabindex voor de controls die dit ondersteunen. Je kent voor dit attribuut een positief getal tussen 0 en 32767 toe, de elementen worden geactiveerd van kleine naar grote waarde voor deze tabindex. Elementen die disabled zijn worden niet opgenomen. <form name="f5" action="../formscript.asp" method="post"> tweede veld: <input name="twee" type="text" value="" tabindex="2"><br> eerste veld: <input name="een" type="text" value="" tabindex="1"><br> derde veld: <input name="drie" type="text" value="" tabindex="3"><br> <p><input type="submit" value="verstuur!"> </form> tweede veld: eerste veld: derde veld: ICT HTML basiscursus 54
Verstuur! Access key (sneltoets) Je kan met het attribuut accesskey ook een sneltoets voor een element vastleggen: In een Windows-omgeving druk je ALT + sneltoets om het element te activeren. Sommige elementen zoals hyperlinks vereisen wel nog een druk op de enter-toets. <form name="f5" action="../formscript.asp" method="post"> <u>t</u>weede veld: <input name="twee" type="text" value="" accesskey="t"><br> <u>e</u>erste veld: <input name="een" type="text" value="" accesskey="e"><br> <u>d</u>erde veld: <input name="drie" type="text" value="" accesskey="d"><br> <p><button type="submit" accesskey="v"><u>v</u>erstuur!</button> </form> <a href="../java" target="_blank" accesskey="j">cursus <b>j</b>ava</a> tweede veld: eerste veld: derde veld: verstuur! cursus java Disabled en Readonly controls Disabled controls Controls met het attribuut disabled:? Worden getoond? Kunnen door de gebruiker niet worden aangepast? Kunnen de focus niet krijgen? Worden overgeslagen bij tab-navigatie? Kunnen niet successful zijn (worden niet verstuurd)? Kan gebruikt worden voor volgende elementen: BUTTON, INPUT, OPTGROUP, OPTION, SELECT en TEXTAREA Readonly controls Controls met het attribuut readonly:? Worden getoond? Kunnen door de gebruiker niet worden aangepast? Kunnen wel de focus krijgen? Worden niet overgeslagen bij tab-navigatie? Kunnen successful zijn (worden verstuurd)? Kan gebruikt worden voor volgende elementen: INPUT en TEXTAREA ICT HTML basiscursus 55
ICT HTML basiscursus 56