Hoofdstuk 2: De body van uw pagina
Nu we gezien hebben hoe de algemene structuur van een webpagina eruitziet, kunnen we overgaan tot XHTML code die zorgt voor een concrete weergave in de webbrowser (vb. Mozilla Firefox).
Ook binnen de body blijft het structureren uitermate belangrijk. Enerzijds zullen we dankzij dit structureren met een minimum aan CSS code de pagina al grotendeels kunnen vormgeven en anderzijds zullen we hierdoor met een beperkt aantal karakters een fraaie XHTML pagina kunnen maken.
In XHTML moeten we alle tags weergeven in kleine lettertjes en bovendien moet elke tag worden gesloten. Elke vergissing hiertegen wordt als fout aanzien. Hoewel de browser er soms in slaagt om deze fout te corrigeren moeten we er toch alles aan doen om dit soort vergissingen te vermijden.
Naast de elementen die we in nagenoeg elke website gebruiken staat tussen ronde haken het woord basis: (basis). Ook de gewone lijst (niet de geneste of dubbel geneste lijst) uit hoofdstuk 3 komt in de meeste websites voor.
1. Kopje en alinea (basis)
Webpagina's die behoorlijk wat doorlopende tekst bevatten kunnen we best opdelen in kopjes en alinea's. Dit maakt de pagina's overzichtelijk, bevordert het semantische web1 en zorgt voor een vlotte validatie. De zoekmachine geeft woorden in een kopje een hogere waarde dan deze in de rest van de tekst (bv. alinea). Meer over het beïnvloeden van zoekresultaten vint u in hoofdstuk 13.
De validatie zal tips geven om resterende fouten in onze code te corrigeren. Een pagina, die goedgekeurd is door de validator, wordt sneller gelezen. De webbrowser (vb. MS Internet Explorer) hoeft enkel de vaste regels te doorlopen. Hoe die validatie precies verloopt, zullen we verderop in dit werk bespreken.
Een titel of subtitel van een pagina kunnen we benadrukken door er een kopje van te maken. Bij grote koppen (h1, h2 en h3) worden de letters groot en vet weergegeven.
XHTML code:
<h1>Dit is een titel</h1>
<h2>Dit is een subtitel</h2>
<h3>Dit is een ondertitel van de subtitel</h3>
Weergave in de browser:
Afbeelding 10: Gebruik van kopjes
1Semantische web heeft te maken met het begrijpen, combineren, interpreteren, selecteren, enzovoorts, van de gegevens op het World Wide Web.
XHTML code (voorbeeld):
|
<h1>XHTML</h1> <h2>Hoofdstuk 1: Basisbegrippen in XHTML</h2> <p>We gebruiken XHTML (eXtensible HyperText Markup Language) omdat we in deze Markuptaal ons document op een goede manier kunnen structureren. Bovendien is het in deze taal noodzakelijk om de inhoud en de opmaak van elkaar te scheiden. </p> <h3>Basisbegrippen in XHTML</h3> |
In bovenstaand voorbeeld wordt het kopje <h1> afgesloten door </h1>. In XHTML is het verplicht om geopende tag ook te sluiten. Maar onmiddellijk daarna wordt er opnieuw een kopje geopend.
In de praktijk wordt een titel meestal gevolgd door een alinea, die geopend wordt met de tag <p> en gesloten met de sluit tag </p>.
1.1 Harde return (basis)
Om de tekst verplicht naar een nieuwe regel te doen overgaan en tevens geen extra witruimte te voorzien gebruiken we de tag <br />. Deze tag is gelijktijdig open- en sluit-tag. Vergeet de spatie na de letters "br" niet.
2. Hyperlinks (basis)
Een hyperlink is een woord, een stukje tekst of een afbeelding waarop je kunt klikken en waarmee je automatisch naar een andere webpagina of andere website gaat. Wij gaan hier voorlopig enkel dieper in op de teksthyperlink. Hier dient de gebruiker te klikken op het woord of de reeks woorden om naar een andere pagina of website te gaan.
Een hyperlink bestaat uit een a-element (anchor) en een href-attribuut. Ze dragen in belangrijke mate bij tot de informatiesnelweg. Een hyperlink kan je ook het attribuut title geven. Indien de gebruiker over de hyperlink zweeft met de muis ziet hij dan de inhoud van het title-attribuut.
Er bestaan verschillende mogelijkheden van verwijzen:
1. Absolute verwijzing (basis)
Deze verwijzing gebruiken we om te verwijzen naar andere websites of naar een pagina binnen onze site. Bij een absolute verwijzing geef je steeds het volledige adres in:
<a href=”volledige URL”>woord(en)</a>
XHTML code (voorbeeld 1)
<a href=”http://www.cursusboek.eu”>Cursussen over programmeren</a>
XHTML code (voorbeeld 2)
<a href="http://www.cursusboek.eu/extra/disclaimer" title="Beperkte aansprakelijkheid">Disclaimer</a>
2. Absolute verwijzing met e-mailadres (basis)
We kunnen ook verwijzen naar een e-mailadres. Als de gebruiker op een e-mail link klikt, gaat zijn standaard mailprogramma (vb. Windows Mail) open. Het opgegeven e-mail adres na mailto: wordt in de To: (Aan:) van de browser geplaatst. De gebruiker moet enkel nog zijn boodschap typen en op verzenden klikken. (Zie afbeelding 11)
Het invoegen van een e-mail link heeft enkele nadelen. Uw e-mailadres is te vinden in de code waardoor programmeurs met slechte bedoelingen uw e-mailadres kunnen onderscheppen en vervolgens krijgt u dan spam toegestuurd. Sommige bezoekers van uw site maken gebruik van een web-based e-mailadres. Het mailprogramma op hun PC gebruiken zij dan niet, wel de applicatie op een website (bij Yahoo, Hotmail).
<a href="mailto:gebruiker@provider.be">Webmaster</a>
Afbeelding 11: Mailprogramma zoals ze geopend wordt bij de gebruiker.
Om bovenstaande problemen te verhelpen, krijgt de bezoeker van de website vaak een invulformulier te zien. De gegevens in deze formulieren worden verwerkt door een applet (klein programmaatje). De sturing gebeurt via een programmeertaal (PHP, ASP of ASP.NET) en is bijgevolg moeilijker te ontwerpen.
Er staan een aantal php-scripts met bijhorend formulier op het internet. Helaas zijn er weinig goede bij. Bovendien zult u zowel het formulier als de elementen in het script moeten aanpassen.
Daarom is het gebruik van een mailto link vaak de enige uitweg om de toch wel heel belangrijke feedback te krijgen van uw bezoekers. Hoe we een formulier in XHTML opmaken bespreken we verderop in dit hoofdstuk. De opmaak via een programmeertaal (PHP, ASP of ASP.NET) komt hier niet aan bod.
3. Relatieve verwijzing (basis)
Deze verwijzing gebruiken we om te verwijzen naar andere pagina's op onze site. Hierdoor kan de internaut surfen van de ene pagina binnen je site naar de andere. Zelfs als je verwijst naar een pagina in een andere map op je site kan je hiervoor een relatieve verwijzing gebruiken.
Bestand in eenzelfde map
<a href=”bestandsnaam”>woord(en)</a>
Bestand in bovenliggende map
<a href=”../bestandsnaam”>woord(en)</a>
Bestand in een sub map (een niveau lager)
<a href=”naam submap/bestandsnaam”>woord(en)</a>
Concreet voorbeeld: <a href="extra/disclaimer_website.htm" title="Beperkte aansprakelijkheid">Disclaimer</a>
Bestand in een onderliggende map van de sub map
Afbeelding 12: mappen structuur
Nu we de structuur van de mappen
kennen, kijken we naar de relatieve verwijzing:
<a
href=”submap/subsubmap/bestandsnaam”>woord(en)</a>
Het gebruik van relatieve verwijzingen komt veelvuldig voor bij websites, waarbij onderdelen van de site in een of meer submappen geplaatst worden.
Geef de submappen betekenisvolle namen zodat u de kans verkleint om bij het aanpassen van het bestand deze bij het uploaden in een foutieve map onder te brengen. Ook later is het onderhoud van de site heel belangrijk. Een goede structuur van mappen zal het bijwerken van de site beduidend vereenvoudigen.
3. Plaats markeren
Deze plaats kan je markeren door ze een naam of id te geven. Via een hyperlink kan je dan naar deze plaats springen.
| <!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" xml:lang="en" lang="en"> |
| <head> |
| <title>VAAK GESTELDE VRAGEN</title> |
| <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
| <link href="faq.css" rel="stylesheet" type="text/css" /> |
| </head> |
| <body> |
| <h1><a name="top">Dit werk bevat meerdere hoofdstukken</a></h1> |
| <h2><a name="hoofdstuk1">Hoofdstuk 1</a> </h2> |
| <p>In dit hoofdstuk nl. hoofdstuk 1 gaan we het hebben over ... |
| Dit komt aan bod in <a href="#hoofdstuk3">hoofdstuk3</a>. We zien er dat deze statistiek best vergeleken wordt met de vorige enz.</p> |
| <h2><a name="hoofdstuk2">Hoofdstuk 2</a></h2> |
| <p>In dit hoofdstuk nl. hoofdstuk 2 gaan we het hebben over ... We bespraken dit al in |
| <a href="#hoofdstuk1">hoofdstuk1</a></p> |
| <h2><a name="hoofdstuk3">Hoofdstuk 3</a></h2> |
| <p>In dit hoofdstuk nl. hoofdstuk 3 gaan we het hebben over ... We bespraken dit al in <a |
| href="#hoofdstuk2">hoofdstuk2</a></p> |
| <p><a href="#top">Boven</a></p> |
| </body> |
| </html> |
Er bestaan nog veel meer toepassingsmogelijkheden binnen de relatieve verwijzing. Het is echter niet de bedoeling om in dit werk in detail te treden.
De markering: <a name="hoofdstuk1">Hoofdstuk 1</a>
De verwijzing: <a href="#hoofdstuk1">hoofdstuk1</a>
Om deze linken goed te zien werken moet het bestand iets langer gemaakt worden of in een klein browser venstertje getoond worden. Als de gebruiker klikt op de verwijzing wordt de markering getoond op zijn scherm.
4. Afbeelding (basis)
Niet alle afbeeldingsformaten zijn toegelaten. De keuze is beperkt tot de extensies gif, jpg en meer geavanceerd de extensie “png”. Een speciaal soort afbeelding is de favicon en deze eindigt op “.ico”. Deze afbeelding wordt ontworpen door gevorderde webdesigners en wordt pas later behandeld.
Opbouw van de afbeeldingsnaam
naam van het bestand . (punt) extensie (vb. vlinder.gif)
Ook bij afbeeldingen kunnen we gebruik maken van absolute - en relatieve verwijzingen en er zelfs een hyperlink aan koppelen.
Verwijzing naar een afbeelding, de syntax:
<img src=”afbeeldingsnaam” alt=''omschrijving van de afbeelding” />
We ontleden even bovenstaande componenten. De letters img zijn de afkorting van image. De afkorting img wordt gevolgd door een spatie en vervolgens src=”afbeeldingsnaam” waarop opnieuw een spatie volgt en dan het alt attribuut: alt=”omschrijving van de afbeelding”. Er komt opnieuw een spatie en dan de slash gevolgd door >.
Hieronder een uitgewerkt voorbeeld:
<img src=''vlinder.gif'' alt=''Afbeelding van de jasius vlinder'' />
Zowel de bestandsnaam als de omschrijving staan tussen dubbele aanhalingstekens. Het is uitermate belangrijk dat je geen enkel karakter vergeet. Indien je wel een foutje maakt zal de afbeelding waarschijnlijk niet getoond worden. De omschrijving invullen tussen de dubbele aanhalingstekens is niet verplicht. Bij IE7 (Internet Explorer 7) verschijnt de omschrijving als je met de cursor (muisaanwijzer) zweeft over de afbeelding. Als je de omschrijving leeg laat, verschijnt er natuurlijk niets.
1. Absolute verwijzing (basis)
Net als bij de absolute verwijzing (zie hierboven: 2. Hyperlinks) geef je ook hier het volledige adres in.
Syntax
<img src="pad + afbeeldings naam" alt="omschrijving" />
Voorbeeld
<img src="http://www.cursussenvb.be/extra/voorbeeld.gif" alt="Voorbeeld van een afbeelding" />
In deze code geven we geen enter maar in dit boek kon de code niet op 1 regel. Terwijl de absolute verwijzing bij hyperlinks vaak wordt gebruikt, komt ze bij afbeeldingen zelden voor. Er wordt immers vooral verwezen naar websites van anderen en niet naar afbeeldingen van anderen.
2. Relatieve verwijzing (basis)
Sommige webdesigners stoppen de afbeeldingen allemaal in eenzelfde map. De werkwijze is gelijklopend met deze voor hyperlinks met relatieve verwijzing.
Afbeelding in zelfde map: <img src=''vlinder.gif'' alt=''Afbeelding van de jasius vlinder'' />
Ook dit kunnen we beschouwen als relatief want alles hangt ervan af in welke map het bronbestand zich bevindt.
5. Afbeelding is ook hyperlink
<a href="rdf.xml"><img src="rss.gif" alt="RSS kanaal" /></a>
Als we bovenstaande code regel analyseren zien we dat ze begint met <a href=”rdf.xml”> en eindigt op </a>. Deze beide tags gebruiken we voor een hyperlink. In het midden voegen we een code regel die een afbeelding oproept, hier: <img src="rss.gif" alt="RSS kanaal" />. Code schrijven hoeft dus niet eens zo moeilijk te zijn!
6. Tabel (basis)
Om te positioneren hebben we XHTML gecombineerd met CSS mogelijkheden. Hierop komen we in het gedeelte over CSS terug. Als we echter een tabel nodig hebben zullen we uiteraard de instructies eigen aan de tabel moeten gebruiken.
Om een tabel te beginnen gebruiken we de tag <table> en we sluiten ze af met </table>.
Rijen starten we met de tag <tr> en sluiten we met de sluit tag </tr>.
De cellen in een tabel duiden we aan met de tag <td> en sluiten we af met </td>.
Cellen in de kop van de tabel kunnen we specifiek benoemen met <th> en sluiten met </th>.
Voorbeeld uit webpagina met XHTML Transitional:
| <table align="center" border="1"> |
| <tr><th>Koersfiets</th><th>Mountainbike</th><th>Volwassen- en kinderfiets</th></tr> |
| <tr><td>Basso</td><td>Carraro</td><td>BNB</td></tr> |
| <tr><td>Scanini</td><td>Corratec</td><td>Batavus</td></tr> |
| <tr><td>Zannata</td><td>Massi</td><td>Bergy</td></tr> |
| <tr><td>Prorace</td><td>Olympia</td><td>Olympia</td></tr> |
| <tr><td>Olympia</td><td>enz. </td><td>enz.</td></tr> |
| </table> |
Afbeelding op scherm
| Koersfiets | Mountainbike | Volwassen- en kinderfiets |
|---|---|---|
| Basso | Carraro | BNB |
| Scanini | Corratec | Batavus |
| Zannata | Massi | Bergy |
| Prorace | Olympia | Olympia |
| Olympia | enz. | enz. |
De zilverkleurige achtergrond was een keuze van de webmaster en van toepassing op de volledige webpagina. Naast table ziet u staan border=''1'' Dit mag bij XHTML Strict niet meer gebruikt worden. Later zullen we zien dat we dit kunnen oplossen met CSS.
7. Formulier
Nu vertrekken we rechtstreeks vanuit de code. Het is immers belangrijk dat we ook leren om zelf code te interpreteren.
- <body>
- <form action="contact.php" method="post">
- <fieldset><legend><strong>Contactformulier</strong></legend>
- <fieldset><legend>Persoonlijke gegevens</legend>
- <label for="field1">Voornaam</label>
- <input name="voorletters" id="field1" title="Vul hier uw voorletters of voornaam in." /><br />
- <label for="field2"<Achternaam</label>
- <input name="achternaam" id="field2" title="Vul hier uw naam in." /><br />
- <label for="field3">Geslacht</label>
- <select name="geslacht" id="field3" size="1" title="Selecteer hier uw geslacht"><br />
- <option value="Man">Man</option>
- <option value="Vrouw">Vrouw</option>
- </select><br />
- <label for="field4">E-mailadres</label>
- <input name="email" id="field4" title="Vul hier uw e-mailadres in." /><br />
- <label for="field5">Adres</label>
- <input name="adres" id="field5" title="Vul hier uw adres in." /><br />
- <label for="field6">Postcode</label>
- <input name="postcode" id="field6" title="Vul hier uw postcode in." class="vaklengte" /><br />
- <label for="field7">Woonplaats</label>
- <input name="woonplaats" id="field7" title="Vul hier uw woonplaats in." /><br />
- <label for="field8">Telefoonnummer</label>
- <input name="telefoonnummer" id="field8" title="Vul hier uw telefoonnummer in." /></fieldset>
- <fieldset><legend>Vraag of opmerking</legend>
- <textarea name="opmerking" cols="40" rows="10" title="Geef hier uw vraag of opmerking in"></textarea></fieldset>
- <input id="button1" type="submit" value="Verstuur!" title="Verstuur bovenstaande informatie." />
- <input name="Reset" type="reset" id="button2" onclick="valid.reset(); return false" value="Wissen" /><br /></fieldset>
- </form>
- </body>
Uitleg van de code (van boven naar beneden)
< form ...> om met het formulier te starten
<fieldset> om bij elkaar horende formulier velden te groeperen.
<legend> om een omschrijving te geven aan een aantal bij elkaar horende formulier velden.
<strong> gebruiken we om iets in het vet te zetten.
<label for=”field1”> om een label te benoemen, hierin komt de naam van het veld.
<input name="voorletters" id="field1" title="naam ingeven" /> om een tekstvak aan te maken.
<br /> Hiermee gaan we naar de volgende regel. Deze tag is gelijktijdig open- en sluit tag</p>.
<select name ...> gebruiken we om een keuze te bepalen.
<textarea name="opmerking" cols="40" rows="10"> om een groter veld aan te maken. De gebruiker kan er veel informatie kwijt. Textarea geven we een naam (name=”naam van het tekstvak”) en we bepalen hoeveel kolommen (cols=”getal”) en hoeveel rijen (rows="getal") de textarea heeft.
<input id="button1" ... /> gebruiken we om een knop te maken.
Het blijft van het grootste belang dat we alle tags die we openen ook sluiten.
Weergave van bovenstaande code in de browser:
Afbeelding 13: Contactformulier opgemaakt in XHTML
8. Diverse (basis)
Om iets in het vet te zetten gebruiken we als opentag <strong> en als sluit tag </strong>. Cursief plaatsen gebeurt met <em> en </em>. Dit zijn echter enkele uitzonderingen want normaal laten we de opmaak over aan een of meerdere CSS bestanden. Hoe we met CSS werken wordt verderop besproken.
Instructies zoals <span> en <div> worden gebruikt in XHTML om opmaak te regelen. Deze instructies werken enkel in combinatie met CSS (Cascading Style Sheets). Op zich doen deze instructies in een XHTML pagina niets. Verder in dit werk zullen we zien hoe we de correctheid van de code regels kunnen nagaan. We zullen er leren hoe een pagina te valideren.
© Marc Vandenbussche d.d. 01 juni 2008