inleiding De algemene structuur van een webpagina is als volgt : <TITLE>Mijn eerste webpagina
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 De hoofding staat tussen de tags
en
gedeelte .
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 . 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 :
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 :
De HTML 4.01 Frameset DTD bevat alles uit de Transitional DTD en ook frames. Declaratie :
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 -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 () 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! <TITLE>Cursus HTML - IVO Brugge
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 : <TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> BODY { background: white; color: black} A:link { color: red } A:visited { color: maroon } A:active { color: fuchsia } ... body van het document ...
Het gebruik van externe stijlbladen stelt je in staat de opmaakeigenschappen van de inhoud van de pagina te scheiden: <TITLE>Cursus HTML - IVO Brugge ... 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.
Een alinea.
Nog een alinea.
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. <TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> BODY { background: white; color: black} SPAN.opmerking { color: green } SPAN.belangrijk { color: yellow }
<SPAN class="belangrijk">Niet vergeten !
<SPAN class="opmerking">Wees goedgehumeurd
<SPAN class="belangrijk">Opgepast !
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 : ?
ICT
Inhoud : blok-elementen mogen andere blok-elementen en inline elementen bevatten, inline elementen mogen enkel data en andere inline elementen bevatten. 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.
<TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> BODY { background: white; color: black} SPAN.opmerking { color: green } SPAN.belangrijk { color: yellow } DIV.blok {border:solid 1px;background:red }
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. <TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> BODY { background: white; color: black} H2 { color: darkblue; text-align:center; } H3 { color: red }
ICT
HTML basiscursus
7
Werken met toepassingssoftware
Word
Werken met een tekstverwerker ...
Figuren
...
Tabellen
...
Kolommen
...
Excel
Werken met een rekenblad ...
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. <TITLE>Cursus HTML - IVO Brugge
<EM>Nadruk
<STRONG>Sterke nadruk
WWW NMBS
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).
<TITLE>Cursus HTML - IVO Brugge
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.
En het konijn zei : Geef me nog een wortel !
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.
<TITLE>Cursus HTML - IVO Brugge H<sub>2O E = mc<sup>2 <SPAN lang="fr">M<sup>lle Dupont
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 ! <TITLE>Cursus HTML - IVO Brugge
Achtergrondkleur met het attribuut bgcolor : AFGEKEURD !
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: <TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> BODY { background: yellow;}
Achtergrondkleur met Style Sheets.
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 ! <TITLE>Cursus HTML - IVO Brugge
Uitlijning met het attribuut align : AFGEKEURD !
Rechts uitgelijnd
standaard uitlijning
Een gecentreerde alinea
rechts uitgelijnde divisie
Gecentreerde alinea
terug in de divisie
Ook het centreren met de tags
...
is afgekeurd. Uitlijning met Style Sheets: <TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> H1 {text-align:center} .rechts {text-align:right} .midden {text-align:center}
Uitlijning met het Style Sheets
Rechts uitgelijnd
standaard uitlijning
Een gecentreerde alinea
rechts uitgelijnde divisie
Gecentreerde alinea
terug in de divisie
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: <TITLE>Cursus HTML - IVO Brugge
bold, italic, bold italic, teletype, en big en <small>small
Voorbeeld met Style Sheets :
<TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> H1 {font-style:italic} P.groot {font-size:x-large;font-weight:bold}
Uitlijning met het Style Sheets
ICT
HTML basiscursus
14
Een gewone alinea
Een grote alinea
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 ! <TITLE>Cursus HTML - IVO Brugge
Een grote zin
Een kleine zin
Gekleurde tekst ingeven is ook mogelijk
Een grote groene zin
Een ander lettertype
FONT-tags kan je gemakkelijk nesten
Met behulp van Style Sheets: <TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> H1 { font-style:italic; color:blue;
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 < >
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
en
tags. De items worden aangeduid met een
tag, met optioneel een
tag. Het attribuut type (disc, square of circle) voor deze lijst is afgekeurd ten voordele van Style Sheets. Je kan lijsten nesten. <TITLE>Cursus HTML - IVO Brugge
Boodschappenlijst :
Aardappelen
Water
Vlees
Worst
Varkenshaasje
Lamsbout
Suiker
Bloem
Ordered Lists : OL, LI Bij geordende lijsten opsommingsteken.
worden
de
items
uit
de
lijst
voorafgegaan
door
een
Geordende lijsten staan tussen de tags en , de items worden voorafgegaan door de tag
en optioneel gevolgd door een
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
<TITLE>Cursus HTML - IVO Brugge
Planning vergadering
Welkomstwoord van de voorzitter
Bespreken agendapunten
Bespreken kosten
Bespreken inkomsten
Bespreken of we er nog mee doorgaan
Dankwoord
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
en
. De termen worden voorafgegaan door de tag
, de verklaringen door de tag
. De eindtag is voor beiden optioneel. Je kan lijsten nesten. <TITLE>Cursus HTML - IVO Brugge
Verklaring gebruikte termen
WWW
World Wide Web
HTML
Hypertext Markup Language
Pluto
Hemellichaam in ons melkwegstelsel
Hondje uit Disney-tekenfilms
ICT
HTML basiscursus
19
HTML 4.01 : Tabellen 1. 2. 3. 4. 5. 6.
Inleidend voorbeeld Eenvoudige tabellen : TABLE, TR, TH, TD Caption Rijen groeperen : THEAD, TFOOT en TBODY Kolommen groeperen : COLGROUP, COL Cellen samenvoegen : COLSPAN en ROWSPAN
Inleidend voorbeeld <TITLE>Cursus HTML - IVO Brugge
Inleidend voorbeeld
Naam
Geslacht
Leukste vak
Afstand
P. Janssens
M
Engels
12
J. Dinnen
V
Frans
17
Eenvoudige tabellen : TABLE, TR, TD Een tabel wordt in HTML geplaatst tussen de tags
en
. Een tabelrij wordt geplaatst tussen
en
. Gegevens in een cel worden geplaatst tussen
en
.
Tabellen: TABLE Een tabel staat tussen de tags
en
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
en
(eindtag is optioneel). Belangrijkste attributen : ? ?
?
ICT
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 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. <TITLE>Cursus HTML - IVO Brugge
Eenvoudige tabel
Naam
Geslacht
Leukste vak
Afstand
P. Janssens
M
Engels
12
J. Dinnen
V
Frans
17
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) <TITLE>Cursus HTML - IVO Brugge
Eenvoudige tabel : CAPTION
Gegevens over studenten
Naam
Geslacht
Leukste vak
Afstand
P. Janssens
M
Engels
12
J. Dinnen
V
Frans
17
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: ? ?
ICT
THEAD, TFOOT en TBODY moeten uit evenveel kolommen bestaan. De TBODY tag is verplicht als er een THEAD of TFOOT aanwezig is
HTML basiscursus
23
? ?
De eindtags mogen weggelaten worden. De TFOOT tag komt voor de TBODY tag(s)
<TITLE>Cursus HTML - IVO Brugge
Tabel : THEAD, TFOOT, TBODY
Gegevens over studenten
Naam
Geslacht
Leukste vak
Afstand
Einde Naam
Einde Geslacht
Einde Vak
Einde Afstand
P. Janssens
M
Engels
12
J. Dinnen
V
Frans
17
P. Kalvers
M
Aardrijkskunde
25
E. Deblazer
V
Wiskunde
27
W. Beestjens
V
Wiskunde
28
ICT
HTML basiscursus
24
K. Posters
V
Tekenen
33
T. Verpinnen
M
Frans
39
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. <TITLE>Cursus HTML - IVO Brugge
COLGROUP
Inshrijving badmintontornooien
Lidnr ID
Naam
Prov. Kamp.
B. Kamp.
Rec. Brugge
Rec. Izegem
Rec. Oostende
1200
K. Peters
X
X
?
1250
C. Somers
X
X
X
X
1251
V. Pluims
X
X
X
X
ICT
HTML basiscursus
25
1252
S. Geerts
X
X
X
X
1253
T. Bastiaans
X
X
X
X
1254
G. Verhulst
X
X
X
X
1255
M. Talpe
X
X
1256
C. Erics
X
X
1257
A. Pieters
X
X
1361
V. Vertsraete
X
?
X
437
L. Evers
X
X
X
X
708
G. Taar
X
X
709
W. Ten Schap
X
X
710
F. Abels
X
X
720
N. Nuyttens
X
X
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. <TITLE>Cursus HTML - IVO Brugge
COL
Inshrijving badmintontornooien
Lidnr ID
ICT
HTML basiscursus
26
Naam
Prov. Kamp.
B. Kamp.
Rec. Brugge
Rec. Izegem
Rec. Oostende
Nog Betalen
Betaald
1200
K. Peters
X
X
?
X
1250
C. Somers
X
X
X
X
X
1251
V. Pluims
X
X
X
X
X
1252
S. Geerts
X
X
X
X
X
1253
T. Bastiaans
X
X
X
X
X
1254
G. Verhulst
X
X
X
X
X
1255
M. Talpe
X
X
X
1256
C. Erics
X
X
X
1257
A. Pieters
X
X
X
1361
V. Vertsraete
X
?
X
X
437
L. Evers
X
X
X
X
X
708
G. Taar
X
X
X
709
W. Ten Schap
X
X
X
710
F. Abels
X
X
X
720
N. Nuyttens
X
X
X
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. <TITLE>Cursus HTML - IVO Brugge <STYLE type="text/css"> TR { text-align:center; }
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)
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 en -tags.
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.
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. <TITLE>Hoofdstuk hyperlinks ...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)
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)
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 en -tags.
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.
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. <TITLE>Hoofdstuk hyperlinks ...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. 2. 3. 4. 5. 6. 7.
Voorbeelden De FRAMESET-tag De FRAME-tag Nesten van FRAMESET-elementen Wisselwerking tussen frames: target Het NOFRAMES-element 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%: <TITLE>Een eenvoudig frameset document
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 *:
ICT
HTML basiscursus
39
<TITLE>Een eenvoudig frameset document
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*): <TITLE>Een eenvoudig frameset document
Een frameset met een verdeling in twee rijen en drie kolommen. Dit resulteert in 6 deelvensters die onafhankelijk gevuld kunnen worden: <TITLE>Een eenvoudig frameset document
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.
<TITLE>Een eenvoudig frameset document
ICT
HTML basiscursus
41
Nesten van FRAMESET-elementen Voor complexere vensterstructuren is het mogelijk FRAMESETS te nesten. <TITLE>Geneste framesets
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: <TITLE>Wisselwerking tussen frames: target
Code van het document navigatie.html:
ICT
HTML basiscursus
42
"http://www.w3.org/TR/html4/strict.dtd"> <TITLE>Framesets : IVO - cursussen : navigatie <STYLE type="text/css"> BODY { background:#FFFFCC; margin-top:40px; } Informatica Talen Koken
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:
Deze naam gebruik je als waarde van het target-attribuut in de hyperlink: Informatica
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.
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 -tag. <TITLE>Het NOFRAMES-element
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. <TITLE>IFRAME: inline frames <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; }
<IFRAME name="beesten" src="koeien.html" width="465" height="300" scrolling="auto" frameborder="1"> Uw browser ondersteunt geen frames - geen alternatieve navigatie voorzien.
attributen voor IFRAMES: ? ? ? ? ? ? ? ? ?
ICT
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
HTML basiscursus
45
HTML 4.01: Gebruik van formulieren 1. 2. 3. 4. 5. 6. 7. 8. 9.
Inleiding Het FORM-element Het INPUT-element Het button-element SELECT, OPTGROUP en OPTION Het TEXTAREA-element FIELDSET en LEGEND Een element de focus geven 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: Cursus HTML 4.01 : gebruik van formulieren - voorbeeld 1
Voorbeeld formuliergebruik
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 . 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. o
tikken
password: zoals een text-veld, maar de invoer van de gebruiker wordt door de User Agent gemaskeerd.
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. deel1 deel2 deel3
o
deel3
small medium large
submit: verstuurt de gegevens van het formulier. De value van dit element is de tekst die op de knop staat.
ICT
deel2
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. small medium large
o
deel1
HTML basiscursus
versturen
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.
o
reset: stelt al controls in op hun originele waarden.
o
opnieuw !
button: knop zonder basisfunctie, webontwikkelaars kunnen via client-side scriptcode zelf de functionaliteit van deze knop bepalen.
o
hidden: controls die niet worden weergegeven maar waarvan de value wel wordt meegestuurd.
o
file: opent een bestandskeuzevenster. Het value attribuut kan worden gebruikt om een standaardbestandslocatie aan te geven.
? ? ? ? ? ?
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. 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: ? ? ?
ICT
name: naam van de keuzelijst size: aantal keuzemogelijkheden die tegelijk zichtbaar zijn multiple: maakt meerdere keuzes mogelijk 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.
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.
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
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.
Persoonlijk Naam:
Schokkele
Voornaam:
William
Opleiding Niveau:
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.
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. cursus java
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: ? ? ? ? ? ?
ICT
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
