HTML BASISCURSUS. ICT HTML basiscursus 1

Transcriptie

1 HTML BASISCURSUS ICT HTML basiscursus 1

2 inleiding De algemene structuur van een webpagina is als volgt : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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" " ICT HTML basiscursus 2

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

4 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 "> 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" " <BODY bgcolor="white" text="black" ICT HTML basiscursus 4

5 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" " <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" " <LINK rel="stylesheet" type="text/css" href="stijl.css">... body van het document... ICT HTML basiscursus 5

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

7 ? 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" " <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" " <STYLE type="text/css"> BODY { background: white; color: black} H2 { color: darkblue; text-align:center; } H3 { color: red } </STYLE> ICT HTML basiscursus 7

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

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

10 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" " <BLOCKQUOTE cite=" <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" " 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

11 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

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

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

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

15 <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" " <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" " <STYLE type="text/css"> H1 { font-style:italic; color:blue; ICT HTML basiscursus 15

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

17 & & & é é é ë ë ë 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

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

19 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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" " <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

20 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

21 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

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

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

24 ? De eindtags mogen weggelaten worden.? De TFOOT tag komt voor de TBODY tag(s) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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

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

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

27 <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" " <STYLE type="text/css"> TR { text-align:center; } ICT HTML basiscursus 27

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

29 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" " <h1>hyperlinks : absolute verwijzingen</h1> <p> Lees het nieuws op de website van <a href=" <p> Bekijk de <a href=" 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

30 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" " <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=" 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

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

32 </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" " <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

33 </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" " <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

34 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" " <h1>hyperlinks : absolute verwijzingen</h1> <p> Lees het nieuws op de website van <a href=" <p> Bekijk de <a href=" 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

35 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" " <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=" 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

36 Het name-attribuut in een A-tag <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <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" " <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

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

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

39 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" " <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" " ICT HTML basiscursus 39

Nog meer weergeven