Cursus XHTML VHTI 06 oho · 2007. 1. 31. · Christophe De Waele Lab Multimedia en Webtechnologie -...

Studiegebied handelswetenschappen en bedrijfskunde Industriële wetenschappen en technologie opleiding van één cyclus

DEPARTEMENT VHTI

VRIJ HOGER INSTITUUT VOOR TECHNOLOGIE & INFORMATICA Doorniksesteenweg 145 8500 KORTRIJK

Tel. : (056)26 41 20 Fax : (056)21 98 67 e-mail : [email protected]

XHTML

Christophe De Waele

Opleiding Bachelor TOEGEPASTE INFORMATICA

1 ste jaar

Katholieke Hogeschool Zuid-West-Vlaanderen

Christophe De Waele

Lab Multimedia en Webtechnologie - 3 - Bachelor Toegepaste Informatica

XHTML.....................................................................................................................................4

1 Waarom XHTML ?....................................................................................................................... 5

2 Versies van XHTML ..................................................................................................................... 6 2.1 XHTML 1.0............................................................................................................................. 6 2.2 XHTML 1.1............................................................................................................................. 6 2.3 XHTML 2.0............................................................................................................................. 7

3 De structuur van een XHTML-document ................................................................................... 8 3.1 Opbouw van XHTML ............................................................................................................. 8 3.2 DOCTYPE............................................................................................................................... 8 3.3 Namespace............................................................................................................................... 9 3.4 Tekenset................................................................................................................................... 9

4 XHTML-tags................................................................................................................................ 11 4.1 Elementen binnen de <head>-tag......................................................................................... 11 4.2 Elementen binnen de <body>-tag......................................................................................... 12 4.3 Definitielijst........................................................................................................................... 16 4.4 Tabellen ................................................................................................................................. 17 4.5 Hyperlinks en anchors ........................................................................................................... 20

5 XHTML-regels............................................................................................................................. 23 5.1 Alle tagnamen met kleine letters schrijven............................................................................ 23 5.2 Alle tags afsluiten.................................................................................................................. 23 5.3 Alle waarden van attributen tussen aanhalingstekens plaatsen ............................................. 24 5.4 Alle afbeeldingen moeten een alt-attribuut hebben............................................................... 24 5.5 Alle elementen moeten correct genest zijn............................................................................ 24 5.6 Commentaren correct schrijven............................................................................................. 25 5.7 Geen Attributen minimaliseren ............................................................................................. 25 5.8 Het id attribuut in plaats van name........................................................................................ 25

6 XHTML validaren....................................................................................................................... 26 6.1 On-linevalidatie ..................................................................................................................... 26 6.2 Aparte toepassingen voor validatie ....................................................................................... 27

7 Formulieren ................................................................................................................................. 29 7.1 Formulierobjecten ................................................................................................................. 30 Tekstvak ............................................................................................................................................ 30 Paswoordvelden ................................................................................................................................ 30 Tekstvak met meerdere regels ........................................................................................................... 30 Checkbox........................................................................................................................................... 31 Radiobutton ....................................................................................................................................... 31 Keuzelijst........................................................................................................................................... 31 Verborgen velden .............................................................................................................................. 32 7.2 Formulieren verzenden.......................................................................................................... 32 7.3 Voorbeeld van een formulier................................................................................................. 33

8 Oefeningen ................................................................................................................................... 35

Christophe De Waele


XHTML In deze cursus maak je kennis met de principes van XHTML (Extensible HyperText Markup Language), dit wordt de basistaal voor het maken van webpagina's. XHTML is een vernieuwde versie van HTML 4.01 in XML en wordt herkend door de bestaande browsers, mits enkele eenvoudige regels te volgen. XHTML 1.0 werd een officiële W3C aanbeveling op 26 januari 2000. Een W3C-aanbeveling betekent dat deze versie nu een webstandaard is.

In feite is het geen taal voor het opmaken van webpagina's, maar een taal waarmee documenten gestructureerd worden. De bedoeling is dat je na het doorlopen van deze cursus inzicht hebt in de basissyntaxis en structuur van XHTML-documenten. Op de duur zal HTML door XHTML vervangen worden. XHTML lijkt erg veel op HTML 4.0, maar is een strengere en “gekuiste” versie van HTML. Een XHTML-pagina is niets anders dan een tekstdocument dat een andere extensie gekregen heeft en waarin de tekst in een bepaalde codering staat. Dat verklaart ook waarom XHTML-bestanden vrij klein zijn. In XHTML worden speciale controletekens en codewoorden gebruikt. Deze worden tags genoemd. Een tag staat altijd tussen < en > tekens. Welke standaarden moet je kennen :

• (HTML), XHTML en XML voor het structureren van gegevens.

• CSS level I en CSS level 2.1 voor het presenteren (opmaken) van gegevens. • ECMAScript en DOM voor interactieve items en gedrag (behavior) voor gegevens.

Onderstaande figuur geeft de relatie tussen deze standaarden weer. Dit is een erg belangrijke figuur

Structuur XHTML XML

Presentatie CSS1 CSS2 CSS3

1996 CSS 1.0 Recom-

mendation

1994 HTML

2.0 Draft

HTML 3.2

HTML 4.0

2000 XHTML

1.0 Recom-

mendation

1998 CSS 2.0 Recom-

mentdation

2002 CSS 2.1 Working

Draft

2001 XHTML

1.1 Recom-

mendation

1999 XHTML

1.0 Draft

1995 CSS 1.0

Woriking Draft

1997 CSS 2.0

Woriking Draft

2003

2004 XHTML

2.0

2005 CSS 3.0

Christophe De Waele


1 WAAROM XHTML ?

XHTML is een herformulering van HTML 4 in XML. Maar wat houdt die herformulering precies in ? Waarom zouden we dat eigenlijk willen, HTML herformuleren als XML. Daar zijn verschillende redenen voor.

• XML is consistent, terwijl HTML dat niet is. Als u in een XML-document een tag opent, moet deze ook weer gesloten worden. In HTML is dat niet het geval. Sommige tags kennen wel een sluittag (<h1> ….. </h1>, terwijl andere geen sluittag kennen (vb. <br>). Weer andere tags kennen weliswaar een sluittag (bijvoorbeeld <p>… </p>), maar als deze ontbreekt, is er ook geen man overboord. De browser bakt er wel wat fraais van. Dat is in XML ondenkbaar. Het traditioneel HTML is daardoor onvoorspelbaar, hetgeen bij vertoning op verschillende typen devices voor problemen kan zorgen. XHTML is daarentegen net als XML voorspelbaar en consistent

• Door webdocumenten te baseren op een XML-gebasseerde taal (XHTML) is samenwerking

en gegevensuitwisseling met toekomstige XML-applicaties veel makkelijker geworden. Elke moderne device kan ermee overweg. Of het nu een webbrowser is, een tablet PC, een Smart Phone, noem maar op. Bovendien is XHTML volledig backward compatible.

Gedag : ECMAScript DOM

Christophe De Waele


XHTML is de huidige standaard terwijl toch de complete HTML 4-tagset wordt ondersteund. XHTML slaat de brug tussen HTML en XML.

2 VERSIES VAN XHTML

2.1 XHTML 1.0

XHTML is de oudste versie van XHTML en de directe opvolger van HTML 4.01. Deze versie heeft volgende kenmerken.

• Alle tags uit HTML 4.01 worden ondersteund. • De wijze waarop de tags door de browser worden ondersteund, is afhankelijk van het

opgegeven documenttype (DOCTYPE). Deze regel was overigens ook al van kracht voor HTML 4.01 maar moderne browsers interpreteren deze regel nu strenger.

• XHTML is onbeperkt neerwaarts compatibel. • Er zijn binnen XHTML weer drie subtypen te onderscheiden. W3C noemt het “de drie smaken

van XHTML 1.0” o XHTML-1.0-Strict : gebruik deze versie als je 100 % structurele webdocumenten wilt

schrijven die vrij zijn van alle opmaakkenmerken. Alle opmaak moet vastgelegd zijn in CSS-bestand. Dit is de strengste vorm.

o XHTML-1.0-Transitional: gebruik deze versie om gebruik te maken van alle voordelen van XHTML maar toch de vrijheid van HTML te behouden. Het staat vrij CSS te gebruiken.

o XHTML-1.0-Frameset : gebruik deze versie indien uw site gebruik maakt van frames om de site weer te geven. In deze versie is het bijvoorbeeld verboden om de tag <body> te gebruiken. Alleen frametags zijn toegestaan. De documenten die binnen de frames worden getoond, kunnen vervolgens weer van het type Transitional of Strict zijn.

2.2 XHTML 1.1

Dit is een breuk met het verleden. Tags die in HTML 4.01 de status deprecated hebben, zijn in XHTML 1.1 verboden. Zo mogen in XHTML 1.1 documenten tags als <font>, <applet>, <center> en <u> niet meer voorkomen. Hieronder vind je een beknopte lijst van een aantal deprecated tags. De volgende lijst kan je bekijken op http://www.w3.org/TR/html40/index/elements.html

Deprecated tags:

<applet> (replaced by <object>)

<basefont> (replaced by CSS)

<center> (replaced by CSS)

<dir> (replaced by <ul>)

<embed/ > (replaced by <object>

<font> (replaced by CSS)

<menu> (replaced by <ul>)

Christophe De Waele


<s> (replaced by CSS)

<shadow> (replaced by CSS)

<strike> (replaced by CSS)

<u> (replaced by CSS)

Deprecate attributes:

alink (replaced by CSS)

align (replaced by CSS)

bgcolor (replaced by CSS)

border (replaced by CSS)

color (replaced by CSS)

compact (replaced by CSS)

face (replaced by CSS)

height (replaced by CSS)

link (replaced by CSS)

noshade (replaced by CSS)

nowrap (replaced by CSS)

text="colour" (replaced by CSS)

start (replaced by CSS)

vlink (replaced by CSS)

vlink (replaced by CSS)

value (replaced by CSS)

width (replaced by CSS)

• Alle opmaak voor XHTML-document wordt geregeld via CSS • Het attribuut name is verboden, andere tags binnen een pagina (zoals <a

name=”top> zijn daarmee ook onmogelijk geworden. In plaats daarvan gebruik het attribuut id =”…”

2.3 XHTML 2.0

XHTML 2.0 is volledig modulair opgebouwd. Deze modulaire opbouw betekent onder meer afscheid van veelgebruikte tags als <img> en <br>. Deze worden respectievelijk vervangen door <object> en <line>. Een XHTML 2.0-document zal gecombineerd gebruik maken van verschillende aanvullende XML-standaarden : XFORMS voor het gebruik van formulieren, XMLEVENTS voor het werken met DOM level 2 events. Op dit moment is XHTML 1.0 transitional de beste keuze als wordt gelet op beperkende randvoorwaarden terwijl toch goed wordt geanticipeerd op verschillende platformen (draadloze apparaten, mobiele devices) en manieren om structuur en presentatie van elkaar te scheiden.

Christophe De Waele


3 DE STRUCTUUR VAN EEN XHTML-DOCUMENT

De algemene opbouw van een xhtml-document zullen we uitleggen a.d.h.v. een voorbeeld Voorbeeld 3.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="txt/html; charset=iso-8859-1" /> <title> Onze eerste webpagina </title> </head> <body> </body> </html> We bewerken XHTML-code bij voorkeur vanuit een tekst-editor. Dit is een programma waarmee we met tekst zonder opmaak kunnen werken. Voorbeelden van zulke programma’s zijn Emacs, Notepad, BBedit, . . . . Om de webpagina beschreven in Voorbeeld 3.1, te bekijken slaan we de code op in een tekstbestand met extensie .html. We kunnen dit bestand vervolgens openen in een browservenster.

3.1 Opbouw van XHTML

De root-tag van onze webpagina is zoals we zien <html>. Verder wordt de code gesplitst in twee grote delen: een <head>-gedeelte en een <body>-gedeelte. In het <head>-gedeelte komen alle gegevens die niet rechtstreeks de inhoud van onze pagina vormen. We zullen verder bijvoorbeeld zien hoe we hier trefwoorden voor zoekmachines kunnen opgeven. Wanneer we toch inhoudelijke gegevens binnen de <head>-tag opnemen is de browser niet verplicht deze weer te geven. De <title>-tag is een verplicht element in het <head>-gedeelte. Met deze tag geven we aan de pagina een korte maar informatieve titel. Meestal zal deze in de titelbalk van het browservenster verschijnen. Bezoekers kunnen zo onmiddellijk zien of een pagina voor hun relevante informatie bevat. Binnen de <body>-tag komt de weer te geven content van onze webpagina. Wanneer we hier tekst invoegen verschijnt deze effectief in het browser-venster. Regelovergangen, tabs en meervoudige spaties worden dus genegeerd.

3.2 DOCTYPE

De eerste regel in een XHTML-document geeft altijd het documenttype aan. Hiervoor wordt de tag <!DOCTYPE> (in hoofdletters) gebruikt. Dit vertelt de browser dat het navolgende document geïnterpreteerd moet worden als XHTML-document en welke regels moeten worden toegepast bij het parsen en renderen (berekenen en weergeven) van de pagina. Als er codes in het document voorkomen die volgens het opgegeven DOCTYPE niet mogen voorkomen, wordt een foutmelding weergegeven. Omdat er drie typen XHTML 1.0 zijn, zijn er ook drie DOCTYPES beschikbaar. <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Strict // EN"

Christophe De Waele


" http :// www.w3.org /TR/ xhtml1 / DTD/xhtml1 - strict .dtd"> Deze DTD vereist – zoals de naam al doet vermoeden – een volledige naleving van de recommendatie. In XHTML Strict kan je geen deprecated elementen gebruiken. Dit zijn achterhaalde elementen uit vorige versies van de recommendatie. <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Transitional // EN" " http :// www.w3.org /TR/ xhtml1 / DTD/xhtml1 - transitional .dtd "> Deze DTD omvat naast de volledige Strict DTD ook nog een heel aantal deprecated elementen. Een aantal nieuwere elementen worden door bepaalde browsers niet of gebrekkig ondersteund. Wanneer we hiermee geconfronteerd worden, kunnen we soms niet om het gebruik van XHTML Transitional heen. <! DOCTYPE html PUBLIC " -// W3C // DTD XHTML 1.0 Frameset // EN" " http :// www.w3.org /TR/ xhtml1 / DTD/xhtml1 - frameset .dtd"> Deze DTD hebben we nodig wanneer we de layout van onze webpagina met frames willen verzorgen. Het gebruik van frames is om verschillende redenen af te raden. We zullen daar later op ingaan. Het is uiteraard niet onze bedoeling met oudere versies van de recommendatie te leren werken. We zullen het in het verloop van deze cursus dus enkel over XHTML 1.0 Strict hebben. Het belang van een correcte DOCTYPE-declaratie wordt vaak onderschat. We willen daarom graag benadrukken dat de weergave van een webpagina wel degelijk kan afhangen van deze declaratie. Wanneer ze ontbreekt, of wanneer de browser een syntactuele fout tegenkomt, wordt vaak overgeschakeld op een compatibiliteits-modus. Deze modus is ontworpen om incorrecte XHTML code zo goed en zo kwaad mogelijk toch weer te geven. Dit heeft vaak uiteenlopende – en browser-afhankelijke – gevolgen voor het uitzicht van de pagina. Het is dus zeer belangrijk dat we onze webpagina’s van een correcte DOCTYPE-declaratie voorzien en dat we ze steeds valideren. Dit laatste kan online via de XHTML validator van het W3C. Deze is terug te vinden op http://validator.w3.org/.

3.3 Namespace

Nadat we de juiste DOCTYPE hebben aangegeven, moeten we ook nog de juiste namespace vermelden. Zo’n namespace valt te beschouwen als een lijst van alle toegelaten taal-elementen. Het vermelden van zo’n namespace gebeurt door in de html-tag een attribute xmlns mee met waarde http://www.w3.org/1999/xhtml mee te geven. <html xmlns =" http :// www.w3.org /1999/ xhtml ">

3.4 Tekenset

Wereldwijd bestaan er nogal wat verschillende character encodings. Wij kiezen voor charset=iso-8859-1 (ook wel bekend als Latin-1). In theorie volgens de XML regels zou je helemaal bovenaan het document het volgende moeten noteren : <? xml version ="1.0" encoding =" iso -8859 -1"? > Maar in de praktijk blijkt deze regel veel browsers behoorlijk in de war te brengen. In plaats van de gebruikte tekenset bovenaan te vermelden, kan je dit ook doen via een metatag in de header van het document. De code wordt dan : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Christophe De Waele


Er zijn enkele “gereserveerde” tekens in XHTML zoals >,< en &. We moeten ervoor zorgen dat deze tekens niet in de gewone tekst voorkomen of in de tekst van attributen. Ze geven namelijk het begin van een entiteitsnaam aan (zoals é ©) of ze geven het begin van een tag aan (zoals <body>. Als je daarom letterlijk de tekens &, > en < in het document wil tonen, moet je dit altijd aangeven met hun entiteitsnamen (entity reference) & > en < Voor speciale symbolen en tekens maar ook voor een hele hoop wiskunde en andere, zijn in XHTML extra entity references gedefinieerd. We zullen later zien dat dit soort definities voorkomt in de zogenaamde Document Type Definition (DTD). Een paar voorbeelden van zulke entities zijn weergegeven in Tabel 3.1. Een entity reference begint altijd met een ampersand (&) en eindigt met een puntkomma (;). De volledige lijst kunnen we terugvinden op het Internet, op http://www.w3.org/TR/html4/sgml/entities.html. Tabel 3.1: Een paar veelgebruikte XHTML entity-references

Entity reference Voorgesteld karakter © © ° ° ± ± È E É E Ê Ê Ë Ë è è é é ê ê ë ë &tilde; ~ € €

Christophe De Waele


4 XHTML-TAGS

In dit hoofdstuk zullen we de meeste gebruikte XHTML-elementen overlopen. We kunnen hiermee onze basis-webpagina uit voorbeeld 3.1 uitbreiden. XHTML 1.0 is eigenlijk een vertaling van de oudere HTML 4.01 recommendatie naar XML. Voor de definitie van de verschillende elementen wordt dan ook rechtstreeks verwezen naar de HTML 4.01 specificatie. We kunnen deze online terugvinden, op http://www.w3.org/TR/ html4/. We rekenen voorlopig op de browser om aan alle elementen een default uiterlijk toe te wijzen. Dit betekent dat de bewuste tag van invloed is op dat deel van het document. In een ander deel van de cursus Lab-Multimedia zullen we de stijl-eigenschappen van elementen leren aanpassen met CSS. Wanneer we rekenen op de default opmaak van de browser moeten we altijd goed opletten! Dit kan immers variëren van browser tot browser. We weten dat een XHTML-document uit twee grote delen bestaat, nl. de head en de body. We zullen eerst de <head>-tag bespreken en vervolgens de <body>-tag.

4.1 Elementen binnen de <head>-tag

Gezien we in het <head>-gedeelte van een pagina geen inhoudelijke gegevens plaatsen zal hier meestal niet zoveel instaan. We hebben reeds gezien dat we altijd een titel aan onze webpagina’s geven met de <title>- tag, als volgt: <title > Een titel </ title > We herhalen nogmaals dat de titel kort en informatief behoort te zijn. Gebruikers kunnen dan in één oogopslag zien of onze pagina voor hen relevant is. Zo’n titel is eigenlijk meta-data. Dit wil zeggen dat het eigenlijk geen inhoudelijk gegeven is, maar eerder een gegeven `over de inhoudelijke gegevens. We kunnen op een meer algemene manier meta-data aangeven met behulp van <meta>-tags. Dit ziet er als volgt uit: <meta name =" naam " content =" data "/> Eender welke applicatie die onze pagina inleest is vrij om iets met deze informatie te doen. De specificatie gaat niet verder dan aangeven hoe we documenten van meta-data voorzien. We kunnen er dan ook niet van uitgaan dat browsers met deze tags rekening zullen houden. Trefwoorden zijn een veel voorkomend voorbeeld van meta-data. De meeste zoekmachines zullen deze gebruiken voor het meer correct indexeren van onze site. In een webpagina over deze cursus zouden we bijvoorbeeld het volgende kunnen opnemen: <meta name =" keywords " content =" XHTML , CSS , cursus "/> Wanneer onze pagina via het Internet wordt opgevraagd stuurt de webserver meta-data naar de browser in de vorm van headers. XHTML voorziet een andere vorm van de <meta>-tag om deze headers te beïnvloeden. We vervangen hiertoe de name-attribute door een http-equivattribute. We kunnen bijvoorbeeld proberen zelf de content-type en character encoding van onze pagina vast te leggen, als volgt:

Christophe De Waele


<meta http - equiv =" Content - Type " content =" text / html ; charset =ISO-8859 -1"/ > Niet elke webserver zal hier echter gevolg aan geven.

4.2 Elementen binnen de <body>-tag

Nadat het volledige document is omsloten door de tags <html> en </html> en de titel een plaatsje heeft gekregen binnen de tags <head> en </head>, kan je verder alle overige tekst, afbeeldingen en codes kwijt in het body-gedeelte. Er bestaan tientallen tags om uw document structuur te geven. Een tag bestaat altijd uit een openingstag (<html>) en een sluitingstag (</html>). Deze beïnvloedt de tekst die tussen de openen sluittag staat. Dit wordt in XHTML een containertag of tag-element genoemd.

4.2.1 De document-structuur

Binnen een tekst brengen we meestal structuur aan met titels op verschillende niveau’s. In XHTML zijn zes zulke niveau’s voorzien, die we – in dalende volgorde van significantie – voorstellen met <h1>-, <h2>-, <h3>- , <h4>-, <h5>- en <h6>-tags. Bijvoorbeeld: <h1 > Een heel significante titel </h1 > Default worden titels in het algemeen vetgedrukt weergegeven. De tekstgrootte varieert meestal van heel groot, voor <h1>, naar heel klein, voor <h6>. Voorbeeld : <h1>Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6> Hieronder zie je het resultaat van de tekst.

Na elke header-tag begint de browser automatisch een nieuwe regel. Voor de verdere verdeling van ons document in blokken gebruiken we de <div>-tag. Hiermee geven we de logische samenhang van een groep elementen aan. Default hebben <div>-tags geen uiterlijke kenmerken, maar we zullen dit vaak met CSS beïnvloeden. Dit wordt verder in de cursus uitgebreid behandeld.

Christophe De Waele


4.2.2 Gestructureerde tekst

Ook binnen platte tekst kunnen we logische onderdelen onderscheiden. Het meest voor de hand liggend is de onderverdeling van tekst in paragrafen. Dit doen we in XHTML met de <p>-tag, als volgt: <p> Tekst van een paragraaf .</p> De meeste browsers plaatsen default boven en onder paragrafen een marge. Veel mensen misbruiken daarom kennelijk graag de <p>-tag als algemene methode om witruimte tussen elementen te verkrijgen. De specificatie verzoekt browsers dan ook om lege paragrafen te negeren. We kunnen echter verder gaan en aan individuele zinsdelen een logische betekenis geven. De specificatie vermeldt hiervoor de volgende tags:

<em> Geeft een benadrukking aan. De meeste browsers geven default tekst binnen een <em>-tag cursief weer. Vb. <em>tekst</em> resultaat : tekst

<strong> Geeft een sterkere benadrukking aan. De meeste browsers geven

default tekst binnen een <strong>-tag vetgedrukt weer.

Vb. <strong>tekst</strong> resultaat : tekst

<cite> Geeft een citaat uit of referentie naar een andere bron aan. De meeste browsers geven default tekst binnen een <cite>-tag cursief weer.

<dfn> Geeft een definitie aan. Tekst niet-proportioneel maken (dan neemt

elk teken dezelfde hoeveelheid ruimte in). Meestal wordt dan de tekst in het lettertype Courier gezet.

<code> Geeft computer-code aan. Tekst niet-proportioneel maken (dan neemt

elk teken dezelfde hoeveelheid ruimte in). Meestal wordt dan de tekst in het lettertype Courier gezet.

<samp> Geeft uitvoer van programma’s, scripts, . . . aan. <kbd> Geeft tekst die de gebruiker dient in te voeren aan. Deze tekst wordt

meestal in een niet-proportioneel lettertype weergegeven. Vb. kbd>Geef uw naam in :</kbd> resultaat : Geef uw naam in : <var> Geeft een variabele of een programma-argument aan. <abbr> Geeft een afkorting aan. <acronym> Geeft een acroniem (type afkorting) aan.

Het is uiteraard niet de bedoeling deze tags te misbruiken louter om een zekere opmaak te bekomen. De meeste van deze tags vloeien duidelijk voort uit de wereld van de technische documentatie. Om meer algemene logische zinsdelen te onderscheiden biedt XHTML de <span>-tag. Deze is vergelijkbaar met een <div>, maar dan voor het verdelen van zinnen in componenten. Ook de <span>-tag heeft default geen uiterlijke kenmerken en dient louter om met CSS

Christophe De Waele


beïnvloed te worden. We hebben reeds vermeld dat alle whitespace in ons bronbestand wordt overgeslagen. Zo kunnen we bijvoorbeeld netjes de zinnen van een paragraaf over verschillende regels spreiden. De browser zal deze regelovergangen negeren. Willen we toch ergens een nieuwe lijn beginnen dan voegen we een <br>-tag in. Op die plek wordt dan een regelovergang geforceerd. Dit element is leeg en kan als volgt gebruikt worden: <p> Lab Multimedia .<br /> XHTML ... </p> Met meerdere <br />-tags achter elkaar krijgen we lege regels. Af en toe is het wenselijk dat de browser zich niet te veel moeit met de formatering van onze tekst. Het type-voorbeeld is het publiceren van gedichten. Het is duidelijk dat we hierbij willen bekomen dat regelovergangen en meerdere spaties achter elkaar behouden blijven. In dit geval gebruiken we de <pre>-tag. Er wordt een niet-proportioneel lettertype gebruikt. Hieronder vind je een voorbeeld. <pre>Test a 10 20 b 8 16 c 6 12</pre>

Het resultaat ziet er als volgt uit: Test a 10 20 b 8 16 c 6 12 De meeste browsers gebruiken default een monospaced font om tekst binnen een <pre>-tag weer te geven. Alle whitespace blijft behouden. Op een paar bijzondere gevallen na geven we er sterk de voorkeur aan dat de browser de formatering van onze tekst verzorgt. Deze kan immers rekening houden met de situatie waarin de pagina wordt afgebeeld, en bijvoorbeeld op een nieuwe lijn verdergaan wanneer een regel te lang wordt.

4.2.3 Lijsten

Bepaalde gegevens komen het best naar voor in de vorm van een lijst. Op een webpagina kom je ook vaak opsommingen tegen. In dit onderdeel worden de verschillende types besproken. Default komen de termen tegen de linkerkant en worden de verklaringen geïntendeerd.

4.2.3.1 Genummerde lijst

Een genummerde lijst bestaat uit een opsomming met letters of getallen ervoor. Bovendien springen de items van de lijst in. Hieronder vind je een eenvoudig voorbeeld van een genummerde lijst. <ol>

Christophe De Waele


<li>Eerste jaar</li> <li>Tweede jaar</li> <li>Derde jaar</li> <li>Vierde jaar</li> </ol>

Het resultaat ziet er als volgt uit:

1. Eerste jaar 2. Tweede jaar 3. Derde jaar 4. Vierde jaar

<ol> lijst </ol>

Deze element-tag geeft het begin en het einde van de genummerde lijst aan.

<li> lijstitem </li>

Hiermee wordt een optie in de lijst aangeduid. Een voorbeeld van een genummerde lijst. <ol> <li>Dit is optie 1</li> <li>Dit is een optie met extra opties eronder: <ol> <li>nummer 1</li> <li>nummer 2</li> </ol> </li> <li>en hier is optie 3. </li> </ol>


1. Dit is optie 1 2. Dit is een optie met extra opties eronder:

1. nummer 1 2. nummer 2

3. en hier is optie 3.

4.2.3.2 Ongenummerde lijst

Ongenummerde lijsten zijn hetzelfde als genummerde lijsten, alleen staat hier geen cijfer of letter voor, maar een ander symbool.

<ul> lijst </ul>

Deze element-tag omvat een ongenummerde lijst. Het gaat dus om een lijst met een bepaald symbool bij elk item.

<li> lijstitem </li>

Hiermee wordt een optie in de lijst aangeduid.

Christophe De Waele


Een voorbeeld van een ongenummerde lijst. <ul> <li>Dit is optie 1 </li> <li>Dit is een optie met extra opties eronder: <ul> <li>nummer 1</li> <li>nummer 2</li> </ul> </li> <li>en hier is optie 3. </li> </ul>


• Dit is optie 1 • Dit is een optie met extra opties eronder:

• nummer 1 • nummer 2

• en hier is optie 3.

4.3 Definitielijst

Een definitielijst is een lijst met koppen en inspringende alinea's.

<dl> tekst </dl>

Deze element-tag geeft het begin en het einde van een definitielijst aan.

<dt> tekst </dt>

Dit is de element-tag voor de kop met de tekst of term die uitgelegd gaat worden (Definition Term).

<dd> tekst </dd>

Deze element-tag omsluit de alinea onder de kop met de uitleg (Definition Description). Hieronder vind je een voorbeeld van een definitielijst <dl> <dt>XHTML</dt> <dd>Extensible HyperText Markup Language</dd> <dt>CSS</dt> <dd>Cascade Stylesheets</dd> <dt>DOM</dt> <dd>Data Object Model</dd> </dl>

XHTML

Extensible HyperText Markup Language CSS

Cascade Stylesheets DOM

Data Object Model

Christophe De Waele


4.4 Tabellen

Het komt vrij regelmatig voor dat we gegevens willen voorstellen in tabel-vorm. Bij het opmaken van XHTML-pagina's worden tabellen heel vaak gebruikt. Laten we tabellen niet meer gebruiken voor opmaak, (vb om figuur te schikken) maar enkel nog om een lijst van data weer te geven.

<table> tabel </table>

Deze element-tag geeft het begin en einde van een tabel aan.

Attribuut Betekenis

Border=n Een rand van n beeldpunten rond de tabel en een standaardlijn tussen de cellen

cellspacing=n Het aantal beeldpunten tussen twee cellen. Standaard is dit 2.

cellpadding=n Het aantal beeldpunten tussen de inhoud en de rand van een cel. Standaard is dit 1.

height=n

height=n%

de hoogte van de tabel in beeldpunten of de relatieve grootte ten opzichte van de beschikbare ruimte (in %)

width=n

width=n%

de breedte van de tabel in beeldpunten of de relatieve grootte ten opzichte van de beschikbare ruimte (in %)

<caption> tekst </caption>

Met deze element-tag kun je de titel boven de tabel zetten.

<tr> ... </tr>

Deze element-tag duidt het begin en einde van een (horizontale) rij aan.

<td> ... </td>

Deze element-tag duidt het begin en einde van een cel aan.

Attribuut

colspan=n Het aantal kolommen waar de cel overheen komt te staan ('omspannen')

rowspan=n Het aantal rijen waar de cel overheen komt te staan ('omspannen')

valign= ... top de tekst aan de bovenkant van de cel middle de tekst in het midden van de cel bottom de tekst aan de onderkant van de cel

Christophe De Waele


Attribuut

baseline de onderkant van de tekst gelijk met de onderkant van het grootste element

<th> ... </th>

Deze element-tag wordt gebruikt om de eerste rij of kolom van een tabel als header aan te duiden. Het resultaat is dat de inhoud van de cel in het vet getoond wordt. Laten we een voorbeeld bekijken : <table border="1" width ="95%"> <caption> Een uitgebreide voorbeeld -tabel </caption > <colgroup> <col width ="20%" /> <col width ="*" /> <col width ="20%" /> </colgroup > <thead> <tr> <th colspan ="2" > Heading <br />rij 1 <br /> kolom 1 en 2 </th> <th> Heading <br />rij 1 <br/> kolom 3 </th> </tr> <tr> <td> Heading <br /> rij 2 <br/> kolom 1 </td> <td> Heading <br /> rij 2<br/> kolom 2 </td> <td> Heading <br/>rij 2<br/> kolom 3 </td> </tr> </thead> <tfoot> <tr> <td> Footer <br/> kolom 1 </td> <td> Footer <br/> kolom 2 </td> <td> Footer <br/> kolom 3 </td> </tr> </tfoot> <tbody> <tr> <td>Body <br/>rij 1<br/> kolom 1 </td> <td>Body <br/>rij 1<br/> kolom 2 </td> <td rowspan ="2" > body <br/>rij 1 en 2<br/> kolom 3 </td> </tr> <tr> <td>Body <br/>rij 2<br/> kolom 1 </td> <td>Body <br/>rij 2<br/> kolom 2 </td> </tr> </tbody> </table>

Christophe De Waele


We plaatsen dus eerst en vooral de hele structuur binnen een <table>-tag. Desgewenst geven we met een optioneel width-attribute een gewenste breedte aan. In het voorbeeld neemt de tabel 95% van de beschikbare breedte van de omliggende container in beslag. Een gewoon getal zou hier geïnterpreteerd worden als een aantal beeldpunten. We dienen er overigens op te letten om tables nooit aan de gehele breedte van het browser-venster toe te kennen. Internet Explorer houdt namelijk bij het berekenen van breedtes geen rekening met de zichtbare scroll-balken. Indien er bij het weergeven van onze pagina een verticale scroll-balk zichtbaar is zou hier een stuk van onze tabel onder vallen. Er zou zodoende ook een horizontale scroll-balk getoond worden. Met het <caption>-element geven we een korte omschrijving aan onze tabel. Dit zal default boven de eigenlijke tabel worden afgebeeld. Daarna zien we in het voorbeeld een <colgroup>-element met hierin een aantal <col>- elementen. Deze geven aan hoeveel kolommen onze tabel zal bevatten en hoe breed deze zullen zijn. De breedte wordt hier opnieuw procentueel of in beeldpunten uitgedrukt. Let wel dat de procentuele uitdrukking hier ten opzichte van de breedte van de tabel zelf is. Met een * geven we aan dat die kolom de rest van de beschikbare ruimte dient in te nemen. In principe geven we voor elke kolom een <col>-element op. Vervolgens geven we de effectieve gegevens binnen onze tabel op. Deze worden verdeeld in drie delen: een header-gedeelte binnen een <thead>-tag, een footer-gedeelte binnen een <tfoot>-tag en een body-gedeelte binnen een <tbody>-tag. Binnen deze delen geven we telkens individuele rijen aan met <tr>-tags. Daarbinnen geven we dan de individuele cellen aan met <th>- en <td>-tags, naargelang ze respectievelijk headers of gegevens bevatten. Met de rowspan- en colspan-attributes geven we aan dat een cel zich respectievelijk over meerdere rijen of kolommen moet spreiden. We laten de <td>- of <th>-elementen die hierdoor bedekt worden gewoon weg. We moeten hierbij wel goed opletten dat we nooit overlappende cellen definiëren !

Christophe De Waele


Verder moeten we er ook op letten dat een cel nooit leeg mag zijn. Wanneer we in een zekere cel geen gegevens willen plaatsen, voegen we hier in de plaats een no-breaking space in. Dit kan met de -entity. In praktijk zullen we vaak geen <caption>- of <th>-elementen gebruiken. We zullen meestal ook geen <thead>- of <tfoot>-gedeeltes opgeven. We mogen in dat geval de <tbody>-tag overigens ook weglaten. Wanneer we deze elementen wel opgeven, moeten we wel de correcte volgorde aanhouden: dus de <caption>-tag vlak na de <table>-tag en de <thead>-, <tfoot>- en <tbody>-tags in die volgorde. Wanneer we dit voorbeeld in een browser bekijken zien we dat onze gegevens netjes in tabelvorm worden weergegeven. Wanneer we de grootte van het browser-venster aanpassen zal de tabel bovendien worden herberekend om opnieuw maar 95% van de beschikbare breedte in beslag te nemen. Iets wat ons misschien – en terecht – niet zo lekker zit is dat we breedtes opgeven in onze XHTML-code. Dit is immers duidelijk een layout-eigenschap en behoort dus eigenlijk in een stylesheet. We zullen later echter zien dat het in CSS wat omslachtig is om verschillende layouteigenschappen aan verschillende individuele tags toe te kennen. Vaak is het opgeven van een breedte in XHTML daarom toch wat duidelijker. De width-attributes en het <colgroup>-element zijn dus niet verplicht. Wanneer de breedte van de tabel of de kolommen ook niet uit een stylesheet blijkt zal de browser waarden kiezen aan de hand van de tabel-inhoud.

4.5 Hyperlinks en anchors

Eén van de bijzondere structurele mogelijkheden van XHTML is het verbinden van gegevens met hyperlinks. We kunnen zo een component van de ene pagina laten verwijzen naar gegevens op een andere pagina. Om dit te bereiken omvatten we deze component in een <a>-tag , als volgt: <a href="..."> </a> Voorbeelden : <a href ="http://www.katho.be/vhti/informatica"> De website van informatica </a> <a href ="leden/lijst.html"> Naar de ledenlijst </a> <a href ="mailto:[email protected]"> Verstuur een email </a> De component tussen de <a>-tags wordt meestal op een duidelijke visuele manier als hyperlink gekenmerkt. De waarde van het href-attribute wordt niet getoond en is het internetadres dat de browser moet openen wanneer de link wordt geactiveerd. Het voorbeeld toont drie types van zulke adressen. De eerste voorbeeld-link verwijst naar een volledig adres, zoals we gewend zijn dat in de adresbalk van onze browser in te typen. We noemen dit een absoluut adres. Het tweede voorbeeld verwijst naar het bestand lijst.html in de directory leden, gezien vanuit de bestands-locatie van de huidige pagina. Dit is een relatief adres. Voor verwijzingen tussen verschillende pagina’s op dezelfde website gebruiken we bij voorkeur relatieve adressen. We moeten dan bij het verplaatsen van onze site naar een andere server niets aanpassen. De bedoeling van de laatste voorbeeld-link is dat de gebruiker een mailclient te zien krijgt met hierin een nieuw, aan ons geadresseerd, bericht. Dit is een mailto adres. Met het vermelden van email-adressen op webpagina’s moeten we wel voorzichtig zijn. Spambots doen immers niet liever dan het Internet afspeuren op zoek naar nieuwe “klanten”.

Christophe De Waele


We kunnen hyperlinks ook laten verwijzen naar een heel specifiek gedeelte binnen een bepaalde webpagina. We moeten dan wel van de component waarnaar we willen verwijzen een destination anchor maken, hetgeen we ook met de <a>-tag doen. Meestal maken we destination anchors naar titels, bijvoorbeeld als volgt: <h1 ><a id ="hoofdstuk XHTML" >Nodige en voldoende XHTML elementen </a></h1>

Attribuut Betekenis

id="Naam"

href="#Naam"

Als je het attribuut id gebruikt, krijgt een positie in een webpagina een naam. De tekst is dan niet aanklikbaar, maar er kan vanuit een andere plaats op de pagina een sprongopdracht naar uitgevoerd worden via het attribuut href met als verwijzing een #, gevolgd door de naam van de locatie.

Een destination anchor heeft standaard geen speciale opmaak. Om nu specifiek naar dit gedeelte te verwijzen plaatsen we achter het internetadres van de betreffende pagina een #-teken gevolgd door de naam van de anchor. Bijvoorbeeld als volgt: <a href ="#hoofdstuk - XHTML">XHTML</a> <a href ="xhtml -css.html #hoofdstuk - XHTML" >XHTML</a> <a href ="http ://www.domainname.be/xhtml-css.html#hoofdstuk - XHTML" >XHTML</a>

4.5.1 Tekeningen

Het Internet zou niet zijn wat het is indien we informatie niet met figuren zouden kunnen ondersteunen. Hier zie je hoe je de verwijzing, de opmaak en de positie van een figuur kunt instellen.

<img />

Met deze tag kun je een afbeelding invoegen

Attribuut Betekenis

src="foto.gif" De locatie en de naam van het afbeeldingbestand. Denk ook aan hoofd- en kleine letters en vermijd spaties in de naam.

De figuur moet van het type GIF of JPG zijn.

alt="tekst" alternatieve tekst die verschijnt als de afbeelding nog niet geladen is of niet geladen kan worden

width=n De breedte van de afbeelding in pixels

height=n De hoogte van de afbeelding in pixels

In het src-attribute geven we het absoluut of relatief adres van de figuur op. In het alt-attribute – dat eveneens verplicht is – plaatsen we een korte tekstuele beschrijving van de figuur. Dit laatste wordt bijvoorbeeld gebruikt door voorlees-software voor slechtzienden en text-based browsers – of natuurlijk omdat de tekening om één of andere reden niet beschikbaar is. Ook aan figuren kunnen we buiten CSS om een breedte en een hoogte meegeven en wel met respectievelijk de width- en height-attributes. We kunnen de afmetingen opgeven in zowel pixels als

Christophe De Waele


percentages. Onthoud hierbij wel dat percentages berekend worden ten opzichte van de dimensies van de omliggende container, en dus niet ten opzichte van de figuur zelf! Een voorbeeld: <p> <img src =" http ://www.katho.be/vhti/informatica/images/katho-logo.jpg" alt = “Een grote figuur" width ="100" height ="40"/ > </p> We moeten goed beseffen dat het de browser is die de tekeningen herschaalt. We kunnen dus onmogelijk bandbreedte besparen of onze pagina’s sneller laten laden door op deze manier figuren te verkleinen. Een horizontale lijn invoegen: <hr />

Christophe De Waele


5 XHTML-REGELS

In de inleiding van deze cursus werd reeds gezegd dat XHTML een strengere taal is dan HTML. Er zijn een paar vereisten waaraan tags moeten voldoen om geldige XHTML tags te zijn. In gewoon HTML golden deze vereisten niet.

5.1 Alle tagnamen met kleine letters schrijven

Dit is waarschijnlijk de grootste verandering die geldt voor XHTML code: alle tags moeten nu lowercase zijn, dat wil zeggen: in kleine letters. Standaard HTML was niet case-sensitive. Dus fout is nu: <Table> <TABLE> <TablET> De enige, juiste manier om deze tag te schrijven in XHTML is: <table> Net als voor de tags in XHTML geldt voor de attributen dat ze lowercase moeten zijn, dus met kleine letters geschreven. In HTML mocht je dit nog schrijven: <a HREF="pagina.html"> In XHTML is dit fout en is de juiste wijze om deze code te schrijven: <a href="pagina.html">

5.2 Alle tags afsluiten

Je moet namelijk alle tags sluiten. Natuurlijk moest je in HTML ook al een heleboel tags sluiten, zoals: <a></a> <b></b> <table></table> Maar er waren ook een aantal tags die niet gesloten hoefden te worden. De meest voorkomende tags van dit type waren: <br> <hr> <img> In XHTML moeten deze tags wel gesloten worden! Je kunt deze tags op twee manieren sluiten. De eerste manier zal je bekend voorkomen. Je voegt gewoon een sluitingstag toe.

Christophe De Waele


<br></br> <hr></hr> <img></img> Bij de tweede manier voeg je de sluitingstag toe aan de al bestaande tag. Dit doe je als volgt: <br /> <hr /> <img /> De methode wordt ook aanbevolen door het W3C. Het zal je waarschijnlijk ook zijn opgevallen dat er in de code hierboven een spatie staat voor de / . Deze spatie is strict gezien niet nodig, dus <img/> zou ook correct zijn. Ik raad je echter wel aan de spatie telkens te gebruiken, omdat je XHTML code anders problemen zal opleveren voor bezoekers met een oudere browser. De / plaats je voor het > teken. Een <img> tag zou er dus als volgt kunnen uitzien in XHTML: <img src="plaatje.jpg" width="100" height="50" alt="Alternatieve tekst" />

5.3 Alle waarden van attributen tussen aanhalingstekens plaatsen

Alle waarden van attributen moeten nu tussen quotes staan. In HTML mocht je bij numerieke waarden de quotes weglaten. In HTML kon je dit bijvoorbeeld gebruiken: <img src="plaatje.gif" width=”100” height=50 alt="Alternatieve tekst"> In XHTML moet je de volgende syntax gebruiken: <img src="plaatje.gif" width="100" height="50" alt="Alternatieve tekst" />

5.4 Alle afbeeldingen moeten een alt-attribuut hebben

Alle afbeeldingen moeten een attribuut alt hebben. In een alt-attribuut wordt meestal een beschrijvende tekst geplaatst voor de afbeelding. <img src="plaatje.gif" width="100" height="50" alt="Alternatieve tekst" />

5.5 Alle elementen moeten correct genest zijn

Een andere belangrijke regel in XHTML is dat je de tags correct moet nesten. Dit betekent dat je de tags in de juiste volgorde moet openen en sluiten. Fout is dus: <p><b><em>Tekst van de pagina.</b></em></p> Waarom is dit nu fout? Omdat de tags niet in de juiste volgorde gesloten zijn. De sluitingstag </i> had voor de </b> tag moeten staan. De correcte code is dus als volgt: <p><b><em>Tekst van de pagina.</em></b></p>

Christophe De Waele


5.6 Commentaren correct schrijven

We kunnen in ons bronbestand op elke plek commentaar invoegen. Commentaar begint met de code . Alle tekst hiertussen wordt door de parser genegeerd. Commentaar kan zonder problemen over meerdere regels gespreid worden. We kunnen dus heel eenvoudig een fragment van ons bronbestand buiten beschouwing laten door het binnen een commentaar te plaatsen. Wat wel gewijzigd is in XHTML, is dat je alleen aan begin en aan de einde van het commentaar twee liggende streepjes (--) achter elkaar mag gebruiken. Een veelvoorkomende constructie als  is verboden.

5.7 Geen Attributen minimaliseren

In HTML was het gebruikelijk om bepaalde attributen te minimaliseren om zo minder code te hoeven typen. Geminimaliseerde attributen konden er als volgt uitzien: <option selected> <frame noresize> <input checked> In XHTML is het niet langer toegestaan om deze geminimaliseerde vorm te gebruiken. Je moet deze attributen nu voluit schrijven. In XHTML is nu de correcte syntax: <option selected="selected"> <frame noresize="noresize"> <input checked="checked">

5.8 Het id attribuut in plaats van name

Dit is een grote verandering. In HTML gebruikte je soms voor de tags a, applet, frame, iframe, img en map het name attribuut. In XHTML is dit name attribuut vervangen door het id attribuut. Dus deze HTML code is verouderd: <img src="plaatje.gif" name="mijnplaatje"> In XHTML moet je deze code hiervoor gebruiken: <img src="plaatje.gif" id="mijnplaatje" /> Alleen is de bovenstaande XHTML code niet compatible met oudere browsers. Daarom is het verstandig om voorlopig zowel het id attribuut als het name attribuut te gebruiken. Je krijgt nu dus de volgende code voor de img tag: <img src="plaatje.gif" id="mijnplaatje" name="mijnplaatje" width="100" height="50" alt="Alternatieve tekst" />

Christophe De Waele


6 XHTML VALIDAREN

Vooral wanneer we informatie gaan uitwisselen zijn duidelijke afspraken omtrent het formaat en de structuur zeer belangrijk. Voor een XHTML markup-taal betekent dit dat we duidelijk moeten vastleggen welke tags, attributes en entities er bestaan en waar ze mogen voorkomen. Wanneer we een pagina eenmaal structuur hebben gegeven, is het interessant om te controleren of er geen kleine foutjes in de tags zijn. Hiervoor zijn verschillende validatietools beschikbaar. In deze paragraaf bespreken we verschillende manieren om een XHTML-document te valideren.

6.1 On-linevalidatie

De bekenste onlinevalidatieservice is waarschijnlijk die W3C zelf. Het adres is validator.w3.org. Hier kan je zowel pagina’s valideren die reeds online staan als een bestand vanaf je eigen pc uploaden en laten testen. Dit laatste is uiteraard handig als controlemiddel voordat je de site definitief publiceert. Het valideren van een pagina op je computer is eenvoudig :

• Open in uw browser de W3C Markup Validation Service op http://validator.w3.org • Klik in het vak Local File en klip op Browse om het gewenste bestand op uw computer te

selecteren. • Klik daarna op Check om het bestand te uploaden en te laten valideren.

Als alle XHTML-regels zijn toegepast, wordt het document als XHTML 1.O strict aangemerkt. Je mag

dan een XHTML-button op de pagina plaatsen, als het document correct is gevalideerd.

Christophe De Waele


Een andere handige online-dienst om pagina’s te valideren vind je bij de Web Design Group. Deze dienst heeft een validatieservice op www.htmlhelp.com/tools/validator. Deze validator heeft ook uitgebreide mogelijkheid om bestanden op uw computer te uploaden en te valideren en kan ook een hele serie pagina’s in één keer valideren (batch validation).

6.2 Aparte toepassingen voor validatie

Een bekende stand-alonetoepassing voor het valideren van webdocumenten is CSE HTML Validator. De laatste versie valideert zowel HTML, XHTML, XML als CSS en kan ook controleren of een document voldoet aan de standaarden voor toegankelijk websites (WAI - Web Accessibility Initiative). Een programma dat zeker niet mag ontbreken, is HTML-Tidy. Deze tool is oorspronkelijk van W3C-medewerker Dave Ragget, maar enige tijd geleden overgedragen aan de Open Source gemeenschap. De homepage is te vinden op tidy.sourceforge.net

HTML Tidy is veel meer dan alleen een validatietool. U kunt HTML-bestanden snel converteren naar XHTML. Van oorsprong is HTML Tidy een programma dat bediend wordt vanaf de opdrachtregel. Het is beschikbaar voor Windows, Linus, Mac OS en verschillende Unix-dialecten. Verschillende Open Source vrijwilligers hebben meegewerkt aan het ontwikkelen van een grafische schil voor Tidy, waardoor je het programma nu ook via dialoogvenster kunt bedienen. (http://users.rcn.com/creitzel/tidy.html#tidyui). Van deze toepassing zie je hieronder een schermafbeelding

Christophe De Waele


Christophe De Waele


7 FORMULIEREN

We kunnen pas van een dynamische website spreken als verschillende invoeringen door de client tot verschillende resultaten en reacties leiden. Omdat een muisklik alleen niet veel toepassingsmogelijkheden biedt, moeten er formulieren gebruikt worden. XHTML biedt de programmeur een hele waaier formulierelementen. Formulieren kunnen in elk normaal XHTML-document worden opgenomen. U hoeft hiervoor geen speciale voorzorgmaatregelen te treffen of acties te ondernemen. Formulieren kunnen prima gecombineerd worden met gewone tekst., opmaakcode, tabellen, enz. Op de plek waar u in het web-document een formulier wilt opnemen, plaats u het element <form> …. </form>. Alle formulierobjecten staan binnen dit element. Binnen het formulierelement kunt u desgewenst allerlei andere opmaakcodes opnemen (alinea’s, lijsten, tabellen, …). De basisopbouw van een formulier ziet er als volgt uit: <form action="filemane" method="post/get"> ... formulierobjecten ... </form> Het element <form> bevat altijd een aantal attributen die de webserver vertellen hoe het formulier moet worden verwerkt. Die attributen beschrijven de methode waarop de gegevens verstuurd worden en de actie die de server moet ondernemen om de gegevens verder te verwerken. De attributen heten method en action. Het attribuut method wordt gebruikt om aan te geven hoe de gegevens van de browser naar de server worden verstuurd. U kunt dit vanuit twee manieren beredeneren : de gebruiker ‘post’ de gegevens van het formulier naar de server (method=”post”), ofwel ‘haalt’ de server de gegevens van het formulier (method=”get”). U kan met de methode GET maximaal 8192 karakters meezenden. Alle gegevens uit het formulier worden als een lange sliert gegevens achter de URL gepakt (de querystring) Op het moment dat u veel gegevens wilt versturen (zoals TEXTAREA’s), of paswoorden is het verstandiger om de POST methode te gebruiken. Het attribuut action geeft letterlijk aan welke action de server met de gegevens die u hebt gepost moet uitvoeren. De URL geeft aan waar het script zich bevindt dat de gegevens verwerkt. Met dit attribuut kunt u twee kant op :

• U stuurt de data naar een script dat de gegevens verwerkt, bijvoorbeeld action=”http://www.katho.be/verwerk.aspx” (deze manier van werken zien we in het vak ASP.NET)

• U stuurt de data naar een e-mailadres, waardoor het attribuut wordt: action=mailto:[email protected]?subject=gegevensformulier. U hoeft bij het verzenden via e-mail niet over een script te beschikken en krijgt zelf de resultaten van het formulier per e-mail geleverd. Deze vorm is gemakkelijk te gebruiken maar wordt uit veiligheidsoverwegingen niet meer door alle browsers ondersteund.

Wij zullen voorlopig action niet benoemen, nl action=””

Christophe De Waele


7.1 Formulierobjecten

Tekstvak

• Een tekstvak

<input type="text" id="invoerveld" size="aantal karakters zichtbaar" maxlength="max lengte" value="startwaarde" />

• Voorbeeld

<input type="text" id="postcode" size="4" maxlength="4" />

Paswoordvelden

• <input type="password" id="data-id" size="aantal karakters zichtbaar" maxlength="max lengte" value="startwaarde" />

• Voorbeeld <input type="password" id="paswoord" size="10" maxlength="10" />

Tekstvak met meerdere regels

• Een tekstvak met meerdere regels :

<textarea rows="aantal rijen" cols="aantal karakters breed" id="date-id" wrap="virtual"> eventueel begintekst </textarea>

• Voorbeeld

<textarea rows="5" cols="50" id="Opmerkingen" wrap="virtual"> Bij opmerkingen gelieve dit invoerveld te gebruiken </textarea>

Christophe De Waele


Checkbox

• Een selectievak

<input type="checkbox" id="data-id" value="waarde die wordt overgedragen" checked = “checked” />

• Voorbeeld Kent u deze sporten ? <br/> <input type="checkbox" id="voetbal" value="V" checked=”checked” />Voetbal <br/> <input type="checkbox" id="tennis" value="t" /> tennis

Radiobutton

• Wanneer er maar één antwoord mag geselecteerd worden !

• Een radiobutton <input type="radio" id="data-id" value="waarde die wordt overgedragen" checked =”checked” />

• Voorbeeld Hoe zal u betalen ? <br> <input type="radio" id="betaalmiddel" value=”c" />Contant <input type="radio" id="betaalmiddel" value=”v" />Visa <input type="radio" id="betaalmiddel" value=”p" checked=”checked” />Proton

• Opmerking : Let vooral op de identieke dataids

Keuzelijst

• Een keuzelijst <select id="data-id" size="aantal menuopties zichtbaar" multiple=”multiple”> <option value="waarde1" selected =”selected”>keuze1 </option> <option value="waarde2">keuze2 </option> </select>

• Een voorbeeld

Welke programmeertalen kent u ? <br/> <select id="taal" size="3">

Christophe De Waele


<option value="java">JAVA </option> <option value="delphi">Delphi</option> <option value="c">C#.NET</option> <option value="asp">ASP.NET</option> <option value="vb">VB.NET</option> </select>

Verborgen velden

• Onder een verborgen veld verstaan we een formulierelement dat niet op het beeldscherm is te zien, maar wel wordt overgedragen.

• <input type="hidden" id="data-id" value="waarde" />

7.2 Formulieren verzenden

In de voorgaande paragrafen hebt u de belangrijkste html-opdrachten voor het maken van een formulier gezien. Eén aspect is tot nu toe nog niet behandeld: hoe verzenden wij een formulier ?

Hiervoor zijn speciale formulierobjecten beschikbaar, de buttons. Er zijn drie hoofdtypen buttons :

• Een button waarmee de informatie die met het formulier verzameld is, verstuurd wordt; dit heet Submet. De code is : <input type=”submit” />

• Een andere hoofdtype is een button waarmee alle invoervelden in het formulier gewist worden. Dit type heet Reset. De code is : <input type=”reset” />

• Een derde type is een neutrale button. U zult acties voor deze knop zelf moeten programmeren met JavaScript (zie deel : Javascript). De code is : <input type=”button” />

Voor alle typen is het attribuut value beschikbaar, waarmee u tekst op een button kunt plaatsen.

<form action="filemane" method="post/get"> ...formulierobjecten... <input type="submit" id="knop" value="Verzenden" /> </form>

Wanneer een formulier verstuurd wordt, moet men aangegeven volgens welke METHOD dit zal gebeuren. Hierbij hebben we de keuze tussen POST of GET. Welke actie er moet gebeuren op de verzonden data, wordt vermeld na ACTION. Met de XHTML-code <input type=”submit”> krijgt men

Christophe De Waele


een verzendknop. Let op de volgende attributen. id is de specifier van het knopvlak. value geeft een waarde aan het knopvlak, belangrijk voor de latere identificatie. Als men een aantal van deze knoppen in een formulier gebruikt, kan men met value vaststellen welke knop is aangeklikt.

7.3 Voorbeeld van een formulier

DE CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="txt/html;

charset=iso-8859-1" />

<title> Onze eerste webpagina </title>

</head>

<body>

<h2>Inlichtingen</h2>

<form action="" method="post">

<p>Naam: <input type="text" name="naam" size="30" /><br />

Geslacht:<br />

<input type="radio" name="geslacht" value="m" /> man<br />

<input type="radio" name="geslacht" value="w" /> vrouw</p>

<hr />

<p>Welke programmeertalen kent u ?<br />

<select name="taal" size="3">

<option value="java">

Christophe De Waele


JAVA

</option>

<option value="delphi">

Delphi

</option>

<option value="c">

C#.NET

</option>

<option value="asp">

ASP.NET

</option>

<option value="vb">

VB.NET

</option>

</select></p>

<hr />

<p>Welke sporten kent u ?<br />

<input type="checkbox"

name="voetbal"

value="v" /> Voetbal<br />


name="tennis"

value="t" /> Tennis<br />


name="zwemmen"

value="z" /> Zwemmen<br />

<br />

<input type="submit"

name="knop"

value="Verzenden" /></p>

</form>

</body>

</html>

Christophe De Waele


8 OEFENINGEN

Hieronder vind je een aantal oefeningen om XHTML mee in te oefenen. De pagina's worden gemaakt in Kladblok/Notepad. Je kan dit programma vinden onder het startmenu of starten door gebruik te maken van de opdracht Uitvoeren… en dan notepad in te typen. Je kan het menu Uitvoeren ook starten door de windowstoets en de R-toets samen in te drukken. Op deze manier kan je ook snel een Verkenner venster starten (windows-E), de desktop tonen (windows-D) of bestanden zoeken (windows-F). Bekijk ook telkens het resultaat in Internet Explorer of Firefox. De oefeningen moeten XHTML 1.0 strict of XHTML 1.1 zijn. Gebruik de volgende url om uw pagina’s te valideren : http://validator.w3.org/ Elke pagina begint met de volgende regels (zie pag. 8) : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="txt/html; charset=iso-8859-1" /> <title> oefening nummer </title> </head> <body> Enkel opdracht 2 moet ingediend worden via Blackboard (opdrachten -> XHTML). Opdracht 1 : Eigen homepage maken Maak een gestructureerde persoonlijke pagina over jezelf, met daarin volgende gegevens: • een foto van jezelf • “Persoonlijke gegevens” (groot)

• naam en voornaam • adres • telefoonnummer • geboortedatum

• voeg een horizontale lijn in • Hobby’s (groot) • … • voeg een horizontale lijn in • Favoriete muziek (groot) • … • voeg een horizontale lijn in • Favoriete websites (groot) • … • voeg een horizontale lijn in

Christophe De Waele


• Leg links naar andere sites, natuurlijk vooral voor het laatste punt, maar ook eventueel bij je hobby’s of favoriete muziek (bijvoorbeeld naar je de fansite van je favoriete muziekgroep).

Noem de pagina familienaam_voornaam_oef1.html. Ook de afbeeldingen dienen in dezelfde map geplaatst te worden als de html-pagina. Voeg ook een aantal speciale tekens in, zoals bijvoorbeeld het copyright teken. Deze tekens noemen we ook entities. Voorbeelden kan je terugvinden in de documentatie of op de website http://www.htmlhelp.com/reference/html40/entities/ Let op volgende zaken: • Probeer je XHTML te structureren (nodige spaties / tabs invoegen) • Let er op dat XHTML-tags in kleine letters worden geschreven (volgens xhtml 1.0). • Speciale tekens als < en > moet je invoegen met behulp als entity: < voor < (kleiner dan, less

than) en > voor > (groter dan, greater than). Let op de puntkomma! • Het afsluiten van lege tags, zoals <br /> is een goede praktijk, let er echter wel op om steeds een

spatie voor de “/” te laten. Dus beter <br /> dan <br> of <br/>. • Wees niet te snel tevreden met je resultaat. Zoek als uitbreiding mogelijke attributen op in de

specificaties.

Christophe De Waele


Opdracht 2 : Maak een webpagina die er uit ziet als de volgende pagina. De lettertypes en grootte moeten niet exact worden gekopieerd. Let ook de speciale tekens! (Ω, è)

KATHO Katho is de katholieke Hogeschool Zuid-West-Vlaanderen. Deze school heeft een zevental departementen.

1. HANTAL 2. HIVB 3. HIVV 4. IPSOC 5. PHO 6. RENO 7. VHTI

Aan het departement VHTI kan je volgende professionele bachelor diploma’s behalen:

• Toegepaste informatica 1. Applicatie-ontwikkeling 2. Software-management

• Autotechnologie • Elektromechanica

1. Automatisering 2. Elektromechanica 3. Klimatisering

• Electronica-ICT 1. Electronica 2. Informatie- en communicatie technologie

• Electrotechniek • Mechanische ontwerp- en productietechnologie

1. Kunststofverwerking 2. Mechanisch ontwerp- en productietechnologie

Aan het departement Hantal:

• Bedrijfsmanagement • Office management

Aan het departement HIVV:

• Verpleegkunde • Vroedkunde

Aan het departement IPSOC:

Christophe De Waele


1. Maatschappelijke veiligheid 2. Orthopedagogie 3. Toegepaste psychologie 4. Sociaalwerk

Definitie van Ohm De Ohm is een afgeleide SI-eenheid. Ze is afgeleid van Ampère en Watt. Ze wordt genoteerd met de griekse hoofdletter Omega (Ω). Door een onderdeel met een weerstand van 1 Ohm zal bij een spanning van 1 Volt een stroom van 1 Ampère vloeien.

© 2006 Noem de pagina familienaam_voornaam_oef2.html. Opdracht 3 :

Maak in een nieuwe html-pagina de volgende tabel. Sla het resultaat op onder de naam adressen.html.

Hou met de volgende opmerkingen rekening:

• Op de titel is de opmaak Heading 2 toegepast.

• Aan de e-mailadressen en de URL's moeten hyperlinks toegevoegd worden.

Noem de pagina familienaam_voornaam_oef3.html.

Opdracht 4 :

Christophe De Waele


Ontwerp een formulier dat volgende gegevens opvraagt:

• Naam • Voornaam • Postcode • Gemeente • Geslacht (man, vrouw) (vrouw moet reeds geselecteerd zijn) • Taal (nederlands, frans, duits, engels)

Zorg ook voor een reset-knop.

Noem de pagina familienaam_voornaam_oef4.html.

Cursus XHTML VHTI 06 oho · 2007. 1. 31. · Christophe De Waele Lab Multimedia en Webtechnologie -...

Documents

Transcript of Cursus XHTML VHTI 06 oho · 2007. 1. 31. · Christophe De Waele Lab Multimedia en Webtechnologie -...