Cursuswebdesign by Klaas Staelens

Webdesign met (X)HTML en CSS Boekhouden-Informatica Informaticabeheer

T.I. H. Familie Ieper 2009-2010

1 Inleiding

1.1 Statische en dynamische websites Een website is een verzameling bij elkaar horende webpagina’s. Via muisklikken navigeer je tussen de verschillende pagina’s van een website. Een website kan statisch of dynamisch zijn. Een statische website toont informatie aan de gebruiker over een bepaald onderwerp; de gebruiker kan niet veel meer doen dan deze informatie gewoon bekijken. In een dynamische website kan de gebruiker zelf gegevens invoeren, en zo de verkregen informatie beïnvloeden (spelletjes spelen, producten bestellen, berekeningen maken, enz.). Enkele voorbeelden: • op www.gezondgewicht.be kun je een “body mass index” laten berekenen • bij www.tgv.be kun je treintickets bestellen In deze cursus maken we enkel statische websites.

1.2 Websites en het Internet Wat gebeurt er eigenlijk als je surft naar een website, zoals www.b-rail.be? • Het webadres www.b-rail.be wordt eerst omgezet naar een IP-adres. Een IP-adres is een code die een computer in een netwerk identificeert. Het IP-adres van www.b-rail.be is b.v. 195.177.246.77. Dit is het adres van de webserver waarop deze website voorkomt. De omzetting naar een IP-adres gebeurt door speciale servers op het Internet (zogenaamde DNS-servers). • Aan elke website is op de webserver een hoofdmap gekoppeld en een standaard startpagina (b.v. index.html).

• De hoofdpagina wordt van de webserver naar je eigen computer gestuurd. Het browserprogramma op je computer zet de ontvangen code om in een leesbare pagina op je scherm. Je eigen computer wordt hier de client genoemd.

Figuur 1.1 – Client en server

1.3 Een website voor het grote publiek Het is niet zo simpel om een website te maken die er voor élke bezoeker even goed uitziet. Er zijn immers heel wat verschillen bij de “clients”: • Er worden verschillende browser-programma’s gebruikt (zie figuur 1.2) • Gebruikt je bezoeker een Windows-PC, of een Macintosh, of misschien een Linux-PC? • Welke beeldschermresolutie gebruikt je bezoeker: 800x600, of 1024x768, of... (zie figuur 1.3) • Heeft je bezoeker een snelle internetverbinding?

Figuur 1.2 – Gebruik van verschillende browsers (bron: www.w3schools.com)

1.4 Webpagina’s en HTML Een webpagina is eigenlijk een gewone tekstpagina die naast inhoud ook heel wat codes bevat. Deze codes zijn zogenaamde HTML-codes. HTML staat voor

HFI IB BI

HyperText Markup Language, en dit is zowat de basistaal van het “World Wide Web”. Een voorbeeld van een stukje code uit een webpagina: Welkom bij <i>onze</i> website!

En het resultaat:

In dit voorbeeld zijn <i> en </i> HTML-codes of tags. Ze komen dikwijls per twee voor (maar niet altijd). Bij een eindcode herhaal je de startcode, maar met een /-teken ervoor.

1.5 Een website publiceren Grote bedrijven hebben soms een eigen webserver waarop hun website geplaatst wordt. Deze webserver wordt dan meestal toegankelijk gemaakt voor bezoekers vanop het Internet. Kleinere bedrijven, of particulieren, hebben vaak niet de middelen om een eigen webserver te onderhouden. In dat geval kan dan beroep gedaan worden op de diensten van webhosting bedrijven. Deze stellen webruimte ter beschikking, uiteraard meestal tegen een vergoeding. Als je een eigen domeinnnaam wil, moet je deze eerst laten registreren. Op websites zoals www.dns.be kun je controleren of de gewenste domeinnaam nog vrij is.

Figuur 1.3 – Overzicht van www.w3schools.com)

Webdesign met XHTML en CSS

gebruikte

schermresoluties

(bron:

1.6 Programma’s om websites te maken Eigenlijk heb je niet veel nodig om een mooie website te maken. Aangezien websites hoofdzakelijk bestaan uit tekstbestanden, kun je een volledige website maken met niets meer dan een eenvoudige editor zoals Kladblok. Je moet dan wel alle HTML (en andere) codes zélf intikken. Afbeeldingen worden als aparte bestanden opgeslagen op de webserver. Je kunt allerlei programma’s gebruiken om je afbeeldingen te bewerken, gaande van heel eenvoudige zoals Windows Paint, tot heel professionele (en dure) programma’s als Adobe PhotoShop. Gratis programma’s zoals Inkscape en The Gimp kunnen ook goede diensten bewijzen. Als je niet zelf alle codes wil intoetsen, kun je gebruik maken van zogenaamde WYSIWYG-editors (What You See Is What You Get). Met deze programma’s kun je heel snel webpagina’s maken, maar de geproduceerde HTML-code is niet altijd “perfect”. Voorbeelden hiervan zijn: Microsoft Frontpage (nu toch wel verouderd), Microsoft Expression Web Designer, Adobe Dreamweaver, NVU (gratis), ... Ook met klassieke tekstverwerkers zoals Microsoft Word en OpenOffice Writer kun je bladzijden tekst bewaren als HTML-pagina. Moet je nu HTML kennen om websites te maken? Misschien krijg je de indruk dat dat eigenlijk niet hoeft; je kunt immers een WYSIWYG-editor gebruiken. Toch ga je al snel ondervinden dat je eigenlijk niet ver komt in het webdesignwereldje zonder behoorlijke HTML-kennis. Door rechtstreeks met de HTMLcode te werken, heb je veel meer controle op het ontwerp, en dikwijls zul je het zelfs eenvoudiger vinden om gewoon de code aan te passen, dan te werken via de WYSIWYG-editor.

1.7 HTML: een stukje geschiedenis De eerste standaard voor HTML verscheen in 1995, gevolgd door HTML 3.0, HTML 3.2, en dan HTML 4.01 in 1999. Deze standaarden werden bepaald door het World Wide Web Consortium (W3C).

Figuur 1.4 – www.dns.be

HFI IB BI

Daarna probeerde het W3C om een andere “markup language”, namelijk XML (eXtensible Markup Language), als universele “markup language” naar voren te schuiven. HTML 4 werd aangepast aan de nieuwe normen, en zo onstond XHTML (eXtensible HyperText Markup Language). De bedoeling van deze vernieuwing was om webpagina’s beter begrijpbaar te maken voor ...computers. Dat lijkt vreemd. Je denkt misschien dat computers web-pagina’s echt wel begrijpen, aangezien je een computer gebruikt om webpagina’s te bekijken. Dat klopt, maar computers weten eigenlijk alleen hoe ze een webpagina moeten weergeven op het scherm, niet wat een webpagina betekent. Als een computer web-pagina’s echt zou begrijpen, zou je b.v. je laptop kunnen opdracht geven om eens alle websites van supermarkten in de buurt te doorzoeken, om uit te zoeken waar een bepaald product het goedkoopste is.

1.8 XHTML standaarden In deze notities proberen we een evenwicht te vinden tussen de (strenge) regels van XHTML, en de wat lossere “zeden” uit de eerste jaren van HTML. Wanneer je een webpagina maakt, vermeld je best welke W3C-standaard je volgt. Voor een XHTML-pagina begin je dan met de volgende regel, die aangeeft dat het document in feite een XML-document is. <?xml version="1.0" encoding="UTF-8"?>

Daarna moet je opgeven met welke (X)HTML versie er gewerkt wordt. Dat doe je met een Document Type Definition (DTD). Werk je volgens de regels van XHTML 1.1, dan wordt deze DTD:

Figuur 1.5 – Verschillende HTML-versies

Webdesign met XHTML en CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" xhtml11/DTD/xhtml11.dtd">

"http://www.w3.org/TR/

Van de XHTML 1.0 standaard bestaan drie “smaken”: • strict: de “strengste” versie (goed gelijkend op XHTML 1.1) • transitional, de “overgangsversie”: hiermee kun je nog wat “oude” technieken gebruiken. • frameset: een versie die het gebruik van zogenaamde “framesets” ondersteunt, een manier om het browservenster in kleinere deelvensters te verdelen; deze techniek wordt niet meer aanbevolen. De drie overeenkomstige XHTML 1.0 DTD’s zijn dan: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Tenslotte moet je bij het hoofdelement van je pagina, <html>, opgeven waar de gebruikte standaard te vinden is. Voor alle genoemde XHTML-versies is dit: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Tenslotte een voorbeeldje van een complete webpagina waarin de gebruikte standaarden correct zijn opgegeven: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Webpagina volgens XHTML 1.1</title> </head> <body> <h2>Een titel</h2> </body> </html>

HFI IB BI

1.9 Webpagina’s valideren Het W3C biedt een service waarmee je kunt controleren of een webpagina wel aan de standaarden voldoet. Je vindt deze op http://validator.w3.org.

Figuur 1.6 – W3C validator

Je kunt een webpagina op drie manieren laten controleren: • je kunt de URL van de pagina intikken (als deze pagina al bereikbaar is op het WWW); • je kunt een pagina “uploaden”; • je kunt de code in een tekstvak plaatsen (b.v. via kopiëren en plakken). We proberen deze laatste methode even met het vorige voorbeeld. De vaildator zegt ons dat deze code geldig is volgens de XHTML 1.1 standaard (zie figuur 1.7).

Figuur 1.7 – Succesvolle validatie

Op een webpagina die deze test doorstaat, mag je een logo plaatsen (figuur 1.8).

Webdesign met XHTML en CSS

1.10 Inhoud en opmaak Met de oudere HTML-versies kun je heel veel opmaak instellen. In de begindagen van het WWW werd een webpagina volledig met HTML opgebouwd. Ook de opmaak werd geregeld via allerlei attributen bij HTMLtags. Dit was geen goede manier van werken. Bij elke titel, alinea... moest je telkens opnieuw de opmaak instellen. Om achteraf nog veranderingen aan te brengen (b.v. alle tussentitels in een andere kleur), moesten wéér al die aanpassingen uitgevoerd worden. Héél vervelend, en tijdrovend. De komst van CSS (Cascading Style Sheets) bood een oplossing. Dank zij deze “stijlbladen” werd het mogelijk om inhoud en vorm van elkaar te scheiden: (X)HTML-tags gebruik je om de structuur en de inhoud van je document te bepalen, en voor de verdere opmaak gebruik je CSS.

Figuur 1.8 – XHTML 1.1 compliant

HFI IB BI

Figuur 1.9 â&#x20AC;&#x201C; Scheiding tussen inhoud en opmaak

CSS Zen Garden De CSS Zen Garden is een website voor webdesigners ter promotie van het gebruik van Cascading Style Sheets (CSS). De Zen Garden heeft als doel het enthousiast maken, inspireren en aanmoedigen van het gebruiken van CSS door grafische ontwerpers. Op de website wordt dezelfde tekst getoond met allerlei verschillende CSS-bestanden. Het doel hiervan is om te laten zien wat er mogelijk is met CSS. De HTML van de

webpagina is telkens hetzelfde en het uiterlijk van de webpagina wordt vormgegeven met CSS.

Infotekst 1 â&#x20AC;&#x201C; CSS Zen Garden

Webdesign met XHTML en CSS

2 Bouwstenen van XHTML

XHTML pagina’s worden gebouwd met elementen en tags. Een element is een deel van een document. Dat kan gaan van het hele document, tot een deel van een woord.

2.1 Een eerste pagina Hier zie je de code van een héél simpele web-pagina: <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello World</title> </head> <body> <p>My first Web page.</p> </body> </html>

In Internet Explorer ziet deze pagina er uit als in figuur 2.1. De tekst “Hello World” vind je terug in de titelbalk.

XHTML is een “markup language”: je markeert bepaalde stukken tekst om de betekenis ervan aan te geven. Dat wordt gedaan door elementen te gebruiken.

Een element bestaat uit twee tags, een begin-tag en een eind-tag. Tags gebruiken scherpe haken (< en >), en in de eind-tag komt een schuine streep voor (/). In het voorbeeld hierboven wordt het <title> element gebruikt om de titel van een pagina aan te duiden. Deze titel wordt meestal in de titelbalk van het browser-venster afgebeeld. Het volledige element ziet er zo uit: <title>Hello World</title>

De naam van de begin- en de eind-tag moet dezelfde zijn, dus dit is ongeldig: <title>Hello World</heading>

Binnen een element kan een ander element voorkomen. Zo staat het <title> element b.v. binnen een <head> element. <head> <title>Hello World</title> </head>

Het <head> gedeelte van een document bevat informatie over het document. De <title> maakt zelf geen deel uit van de pagina. Alle XHTML-documenten moeten een <head> element hebben, dat één <title> element moet bevatten. Er kunnen hier nog andere elementen in voorkomen, maar die bespreken we later. Na de <head> komt de <body>. Hierin wordt de eigenlijke inhoud van de pagina geplaatst. In het voorbeeld is het <body> gedeelte heel simpel: het bevat één element <p>: <body> <p>My first Web page.</p> </body>

Een <p> element bevat een alinea (paragraph).

Figuur 2.1 – Eenvoudige webpagina

HFI IB BI

We kunnen hier natuurlijk een alinea bijvoegen: <body> <p>My first Web page.</p> <p>I hope you like it.</p> </body>

In een browser krijgen we dan dit:

Figuur 2.2 – Webpagina met twee alinea’s

Over één belangrijk element hebben we het nog niet gehad. De <head> en <body> elementen zitten binnen een element <html>, dat het hele document bevat: <html> <head> <title>Hello World</title> </head> <body> <p>My first Web page.</p> </body> </html>

Een webpagina zoals dit voorbeeld kun je gemakkelijk maken met een eenvoudige tekst editor (b.v. Kladblok). Nadat je dan de code hebt ingetikt, moet je deze bewaren met een aangepaste extensie. Bestanden voor web-pagina’s hebben een eigen extensie: .htm of .html.

2.2 Elementen Een element bevat gewoonlijk een begin-tag, inhoud en een eind-tag.

Webdesign met XHTML en CSS

begintag

inhoud

eindtag

<title>

Hello world

</title>

element Dit element vertelt de computer dat de tekenreeks “Hello World” de titel van het document is. Zonder deze start- en eind-tags zou de computer niet weten waarvoor dit stuk tekst dient.

2.3 Tags Een start-tag bestaat uit een “kleiner dan” teken, gevolgd door de naam, en dan een “groter dan” teken:

title

start-tag Een eind-tag bestaat uit een “kleiner dan” teken met een schuine streep, gevolgd door de naam van het element, en dan een “groter dan” teken.

title

eind-tag XHTML is hoofdlettergevoelig (gewone HTML niet); de tags worden met kleine letters geschreven.

2.4 Lege elementen Sommige elementen hebben geen inhoud. Voor deze lege elementen is er een speciale syntax voorzien: we plaatsen dan een spatie en een schuine streep voor het rechtse haakje van de start-tag.

HFI IB BI

Het <br> element wordt gebruikt om een regelterugloop (line break) in het document te plaatsen. Dit element heeft geen inhoud, dus gebruiken we in plaats van <br></br> één enkele tag <br />.

2.5 Inhoud Elementen kunnen méér bevatten dan alleen maar tekst. Binnen een element kun je b.v. andere elementen plaatsen. <head> <title>The document title</title> </head>

Hier hebben we een <head> element dat een <title> element bevat. We zeggen ook wel dat het <title> element “genest” is in het <head> element. Elementen moeten op de juiste manier genest worden: daarmee bedoelen we dat een element zich helemaal bevindt binnen het element dat het omvat. We bekijken enkele voorbeelden, waarin we de elementen <em> en <strong> gebruiken. Beide elementen worden gebruikt om tekst te benadrukken (“em” staat voor “emphasize”). De meeste browsers tonen <em> elementen met een cursief lettertype, en <strong> elementen in het vet.

Dit is geldige XHTML. In een browser wordt dit b.v. zo afgebeeld:

Dit is niet goed. Het <strong> element begint binnen het <em> element, maar eindigt erbuiten.

2.6 Verplichte elementen Er zijn vier elementen die in alle XHTML documten moeten voorkomen. • Het <html> element is de container voor het hele document.

Webdesign met XHTML en CSS

• Na de <html> tag volgt een <head> element. Dit bevat informatie over het document zélf, deze informatie wordt niet in de webpagina afgebeeld. Je vindt hier b.v. de document titel en informatie voor zoekmachines zoals Google. • Binnen het <head> element moet een <title> voorkomen. Zonder <title> voldoet het document niet aan de XHTML-specificaties. • Het document moet ook een <body> element bevatten. Dit bevat de gegevens die in de webpagina worden afgebeeld. Samen vormen ze de basisstructuur van een XHTML-document:

Figuur 2.3 – Basisstructuur van een (X)HTML document

2.7 Attributen Soms is het niet genoeg om van een element alleen maar de naam te vermelden. Het <img> element wordt b.v. gebruikt om een afbeelding te tonen, maar je moet dan wél vermelden waar die afbeelding kan gevonden worden. Je kunt dat doen met attributen. Attributen worden bij de start-tag gevoegd, en bestaan uit een naam en een waarde:

attribuutnaam

"waarde"

De waarden staan tussen aanhalingstekens (enkel of dubbel). In het volgende voorbeeld krijgt het <img> element een attribuut src, dat aangeeft dat de afbeelding /images/logo.gif moet getoond worden. <img src="/images/logo.gif" />

HFI IB BI

2.8 Elementen: block-level of inline De meeste XHTML elementen binnen de <body> van een webpagina zijn ofwel block-level elementen (zie figuur2.4), ofwel inline elementen (figuur 2.5). • block-level: deze elementen kunnen andere block level elementen bevatten, en inline elementen; normaal gezien beginnen block-level elementen met een nieuwe regel. Voorbeelden: <blockquote>, <div>, <h1>, <h2>, ..., <ol>, <ul>, <p>, <pre>, <table>. • inline: deze elementen bevatten enkel “data” en andere inline elementen; ze beginnen niet met een nieuwe regel. Voorbeelden: <a>, <em>, <img>, <q>, <strong>.

Figuur 2.4 – Block-level elementen

Figuur 2.5 – Inline elementen

Webdesign met XHTML en CSS

Mozilla Firefox Mozilla Firefox (kortweg Firefox) is een gratis, vrije webbrowser ontwikkeld door de Mozilla Corporation en honderden vrijwilligers. Firefox is gebaseerd op de Gecko-rendermachine uit het Mozilla-project. De naam is de Engelse aanduiding van de rode of kleine panda. Firefox is vooral populair bij thuisgebruikers. Ook door webontwikkelaars wordt Firefox veel gebruikt omdat het de W3C-standaard beter volgt dan Internet Explorer en omdat er veel verschillende nuttige hulpprogramma’s (extensions) voor Firefox beschikbaar zijn die het testen en het

gebruik van internetpagina’s vergemakkelijken. Verder is Firefox minder vatbaar voor spyware en computervirussen. Dit komt mede door de afwezigheid van ActiveX-ondersteuning en omdat Firefox strikt gescheiden is van het Microsoft Windows-besturingssysteem. Net als voor andere software worden echter wel beveiligingsupdates verstrekt. Naast de webbrowser Firefox maakt Mozilla ook een e-mailclient, Mozilla Thunderbird genaamd. Deze berust op dezelfde filosofie als Firefox en is gedeeltelijk op dezelfde programmacode gebaseerd.

Infotekst 2 – Firefox (bron: Wikipedia)

HFI IB BI

3 Tekstelementen

3.1 Alinea’s Het <p> element bevat een alinea (paragraph). Het is een block of box element. Dat betekent het op een nieuwe lijn zal beginnen, en dat het volgende element ook op een nieuwe lijn zal beginnen. Er is als het ware een rechthoek rond zo een element die het element afzondert van de rest van de pagina. Bekijk even dit voorbeeld: <body> <p>My first Web page.</p> <p>I hope you like it.</p> </body>

We hebben hier twee alinea’s. In een web-browser ziet dit er zo uit; de blauwe lijnen zijn toegevoegd om te tonen waar er extra ruimte komt als gevolg van het gebruik van het <p> element:

3.2 Tekst met nadruk De tags <em> en </em> duiden tekst aan die nadruk moet krijgen (emphasis). <p><em>Godenslaap</em> won de AKO literatuurprijs</p>

De manier waarop <em> wordt behandeld door een web-browser kan variëren. Een visuele browser zoals Internet Explorer zal zo een element meestal cur-

sief afbeelden, terwijl een “audio browser” (voor blinden) de tekst luider zal uitspreken.

3.3 Sterke nadruk We passen het voorbeeld wat aan om een “sterke” nadruk te krijgen: <p><strong>Godenslaap</strong> won de AKO literatuurprijs</p>

Ook hier hangt het resultaat wat af van de gebruikte browser, maar meestal wordt dit vetjes weergegeven.

3.4 Citaten Om citaten, of informatie uit andere bronnen weer te geven, kun je de tags <q> (quote) en <blockquote> gebruiken. is een inline element, het heeft geen invloed op de indeling van de tekst. <blockquote> is een block element (het wordt afgescheiden van de rest van de inhoud). <q>

Voor korte citaten gebruik je <q>: <p>Shakespeare schreef: <q>Suspicion always haunts the guilty mind</q></p>

Figuur 3.1 – Alinea’s zijn blok-elementen

HFI IB BI

Met <blockquote> wordt de geciteerde inhoud afgescheiden van de andere inhoud; je gebruikt het normaal gezien voor langere fragmenten: <p>Homer Simpson said:</p> <blockquote>The code of the schoolyard, Marge! The rules that teach a boy to be a man. Let’s see. Don’t tattle. Always make fun of those different from you. Never say anything, unless you’re sure everyone feels exactly the same way you do. What else..</blockquote>

In de meeste browsers wordt een <blockquote> voorzien van extra ruimte aan de linker- en rechterkant van het blok.

3.5 Programmacode In XHTML is een speciale tag voorzien voor het opnemen van programmacode: <code>. <p>Met de regel <code>lblTijd.Visible = True</code> wordt het label zichtbaar gemaakt.</p>

Resultaat:

Meestal wordt het code-fragment weergegeven met een niet-proportioneel lettertype. Dit is een lettertype waarbij elk teken even breed is (zoals b.v. Courier).

3.6 Wijzigingen Informatie in een web-pagina moet soms aangepast worden: bepaalde delen worden gewist, andere worden toegevoegd. Natuurlijk kun je gewoon de tekst wijzigen, maar met de tags <ins> en <del> kun je duidelijk tonen welke wijzigingen er gebeurd zijn.

Webdesign met XHTML en CSS

<p>The code of the schoolyard, Marge! The rules that teach a boy to be a man . Let’s see. <del>Don’t tattle.</del> Always make fun of those different from you. <ins>Never say anything, unless you’re sure everyone feels exactly the same way you do.</ins> What else..</p>

De meeste browsers onderlijnen <ins> elementen, en doorstrepen <del> elementen.

Nadat je de voorbeelden in dit deeltje hebt gezien, zou je geneigd kunnen zijn om bepaalde elementen te gebruiken omwille van hun visueel effect. Dat is eigenlijk niet de bedoeling. XHTML elementen zijn hoofdzakelijk bedoeld om de betekenis van bepaalde onderdelen aan te duiden. Later zullen we zien dat we via “stijlen” deze elementen om het even welk uitzicht kunnen geven.

3.7 Opsommingen en lijsten Heel vaak vind je in web-pagina’s opsommingen terug. Er zijn 3 belangrijke soorten “lijsten”: ongeordende lijsten, geordende lijsten, en definitielijsten. Voor niet-geordende lijsten wordt de tag <ul> gebruikt (unordered list). De verschillende items in de lijst worden in <li> elementen geplaatst (list item). <ul> <li>een</li> <li>twee</li> <li>drie</li> </ul>

Figuur 3.2 – Een niet-geordende lijst

Geordende lijsten worden op een gelijkaardige manier gemaakt, maar hier toont het opsommingstekens een bepaalde volgorde (b.v. met cijfers).

HFI IB BI

Figuur 3.3 â&#x20AC;&#x201C; Een geordende lijst

Een definitielijst bestaat uit een reeks termen, telkens met een verklaring erbij. <dl> <dt>Lagere kosten</dt> <dd>De nieuwe versie van ons product kost veel minder dan de vorige!</ dd> <dt>Gemakkelijk te gebruiken</dt> <dd>Ons product is heel eenvoudig te gebruiken!</dd> <dt>Veilig voor kinderen</dt> <dd>Laat je kinderen rustig alleen met ons product, er zal hen niets overkomen!</dd> </dl>

De tags <dt> worden gebruikt voor de termen, de tags <dd> voor de uitleg.

Figuur 3.4 â&#x20AC;&#x201C; Een definitielijst

3.8 Speciale tekens Bij het maken van een web-pagina mag je niet zomaar alle karakters opnemen, die je b.v. in je tekstverwerker wel kunt gebruiken. Enerzijds omdat niet elk

Webdesign met XHTML en CSS

systeem (DOS/Windows, Macintosh, Linux) deze karakters op dezelfde wijze verwerkt, anderzijds omdat sommige karakters in HTML een speciale betekenis hebben. Voor bepaalde tekens heb je dus een speciale code nodig. Die speciale code kun je op twee manieren vormen. Ofwel maak je gebruik van getallen, ofwel gebruik je specifieke benamingen voor het symbool. De volgende vier tekens hebben een speciale betekenis in HTML: symbool

beschrijving

code1

code2

dubbel aanhalingsteken ampersand kleiner dan groter dan

&#34;

&quot;

&#38;

&amp;

&#60;

&lt;

&#62;

&gt;

& < >

Als je de codes m.b.v. een getal opgeeft, moet je dus de volgende vorm respecteren:

169

;

copy

;

En als je met een benaming werkt:

Meer voorbeelden vind je in tabel 3.2.

3.9 White space Met “white space” bedoelt men de karakters in een document die dienen om “ruimte” te creëren. Dit zijn o.a. spaties, tabs, regeleinden (“return”), ... Een browser zal witruimte tussen woorden altijd reduceren tot één enkele spatie. <body> hierin zit er veel ruimte tussen de

woorden

</body>

HFI IB BI

In de browser merk je dus niets van de overtollige ruimte:

3.10 Commentaar In een document kun je ook “commentaar” kwijt: informatie voor jezelf (of anderen), die niet door de browser wordt afgebeeld. Commentaar bouw je zo op: <!--

commentaar

-->

Een voorbeeldje:  <p> My first Web page. </p>

symbool ©

° ² ³ ¹ ¼ ½ ¾ à á è é ê ë ï ó ö ü

beschrijving

code1

code2

niet afbrekende spatie copyright-teken zacht koppelteken (wordt alleen weergegeven als een woord door afbreken wordt gesplitst) graadteken 2 in superscript 3 in superscript 1 in superscript een kwart een half drie kwart a accent grave a accent acute e accent grave e accent acute e accent circumflex e met umlaut i met umlaut o accent acute o met umlaut u met umlaut

&#160;

&nbsp;

&#169; &#173;

&copy; &shy;

&#176;

&deg;

&#178; &#179; &#185; &#188; &#189; &#190;

&sup2; &sup3; &sup1; &frac14; &frac12; &frac34

&#224; &#225; &#232; &#233; &#234; &#235;

&agrave; &aacute; &egrave; &eacute; &ecirc; &euml;

&#239; &#243; &#246; &#252;

&iuml; &oacute; &ouml; &uuml;

Tabel 3.2 – Speciale tekens

Webdesign met XHTML en CSS

3.11 Kopjes Een tekst die wat langer is, verdeel je best in kleinere onderdelen. Boven een onderdeel kun je een titel (of “kop”) plaatsen. Er zijn in XHTML 6 titelniveaus, die aangeduid worden met de tags <h1>, <h2>, ... ,<h6>. Hier is een voorbeeld met drie niveaus. <h1>XHTML voor beginners</h1> <h2>Inleiding</h2> <p>Dit artikel is voor lezers die ...</p> <h3>Kleur</h3> <p>In het volgende voorbeeld...</p> <h3>Stijlen</h3> <p>Indien je meer...</p>

Figuur 3.5 – Verschillende niveaus voor kopjes

3.12 Regeleinde Soms wil je een nieuwe regel beginnen, maar geen nieuwe alinea. Hiervoor dient het <br> element. Dit is een leeg element, dus in je code schrijf je <br />. <p> Und der Haifisch, der hat Z&auml;hne<br />

HFI IB BI

und die tr&auml;gt er im Gesicht<br /> und Macheath, der hat ein Messer<br /> doch das Messer sieht man nicht. </p>

3.13 Harde spaties In een web browser wordt een reeks woorden soms over twee lijnen verdeeld. Dat is niet altijd wat je wil; de oplossing is dan een harde spatie: &nbsp (non breaking space). Als je een &nbsp tussen twee woorden plaatst (zonder gewone spaties er rond), dan wordt die tekst behandeld als één geheel dat nooit zal verdeeld worden over twee lijnen. Dit&nbsp;blijft&nbsp;altijd&nbsp;op&nbsp;1&nbsp;regel&nbsp;staan.

3.14 Tekst met vaste opmaak Extra “white space” tussen woorden wordt gewoonlijk samengedrukt tot één enkele spatie. Er is op deze regel één uitzondering: met het <pre> element kun je de tekst in de browser op de zelfde manier laten weergeven als in de broncode (preformatted). Meestal wordt deze tekst dan afgebeeld met een niet-proportioneel lettertype. <pre> Und der Haifisch der hat Tr&auml;nen und die laufen vom Gesicht doch der Haifisch lebt im Wasser so die tr&auml;nen sieht man nicht. </pre>

Webdesign met XHTML en CSS

Het semantisch web Omschrijving Het Semantisch Web (Engels: Semantic Web) is een extensie in ontwikkeling van het rond 1991 geïntroduceerde World Wide Web. Het is een uitwerking van de visie van W3C-directeur Tim Berners-Lee over het Web als een universeel medium voor de uitwisseling van gegevens, informatie en kennis. Doelstellingen Het uitdrukken van informatie op het internet op zo’n manier dat niet alleen mensen er mee kunnen omgaan, verwerken, linken ed., maar dat dit ook softwarematig kan. Mensen zijn in staat om bepaalde taken uit te voeren op het bestaande World Wide Web, zoals het zoeken van een vertaling, de laagste prijs van een DVD of het

reserveren van een boek. Een machine (waaronder computers) is niet of zeer slecht in staat om bruikbare informatie te halen uit webpagina’s. Deze geven vooral de opmaak aan en niet de context die het programma nodig heeft om het te kunnen begrijpen, mensen kunnen dit wel.

Infotekst 3 – Het semantische web (bron: Wikipedia)

HFI IB BI

4 Hyperlinks

Hyperlinks zijn een belangrijk onderdeel van websites. Ze maken het mogelijk dat je, door een simpele klik van de muis, snel van de ene locatie naar de andere surft. Dat kan een andere plaats in hetzelfde document zijn, of een ander document (al of niet van dezelfde website). Naast documenten kan het bovendien gaan om andere soorten bestanden, zoals afbeeldingen en geluidsfragmenten, of software die je wilt downloaden. Een hyperlink maak je met het <a> element (anchor). Met het href attribuut definieer je op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt.

4.1 Link naar een bestand Een hyperlink maak je met het a element, waaraan je het href attribuut toevoegt. Het href attribuut geeft aan op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt. De waarde van het href attribuut is een zogenoemde Uniform Resource Identifier (URI). Het is niet altijd nodig een complete URI te gebruiken. Wanneer je verwijst naar de beginpagina van een site, dan is het voldoende alleen de domeinnaam op te nemen. Meestal wordt dan automatisch een standaardpagina geopend (b.v. index.html). <a href="http://www.hfi.be">Onze school</a>

De uitdrukking http:// duidt hier het systeem aan dat gebruikt wordt om het bestand te versturen (het protocol). Hier is dat HTTP (HyperText Transfer Protocol).

In de browser zie je alleen dit:

In de praktijk wil je vaak een verwijzing naar een welbepaalde pagina van een site opnemen. Bijvoorbeeld: <p>Opmaak doe je met <a href="http://nl.wikipedia.org/wiki/Css">CSS</a>. </p>

Wanneer de link verwijst naar een bestand op de lokale server, is het voldoende om alleen het pad op te nemen. Daarbij zijn er de volgende mogelijkheden: • als het bestand in dezelfde map als het huidige document staat, dan hoef je slechts de naam van het bestand op te nemen: <a href="inleiding.html">inleiding</a>

• als het bestand in een submap van de huidige map staat, dan geef je eerst de namen van de achtereenvolgende submappen, met achter elke naam een slash en daarna de naam van het bestand: <a href="html/deel1/koppen.html">Koppen</a>

• als het bestand zich in een hogere map bevindt dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op: <a href="../lijsten.html">lijsten</a>

In de voorbeelden hiervoor is steeds een link gemaakt naar een webpagina. Je kunt echter ook hyperlinks maken naar andere typen bestanden, zoals zip-bestanden, exe-bestanden, afbeeldingen (gif-, jpg- of png-bestanden), multimedia objecten (wav-, mp3-, swf- en mov-bestanden), Word-documenten (docbestanden) of Powerpoint presentaties (ppt-bestanden). Sommige bestanden zal de browser direct openen. Dat is bijvoorbeeld zo voor afbeeldingen. Bij andere soorten bestanden (zip- en exe-bestanden) zal de browser normaal gesproken met een voorstel tot opslaan komen. In de overige gevallen hangt het er vanaf of de bezoeker een plug-in of programma heeft geïnstalleerd dat iets met het bestand kan aanvangen,. Het <a> element is een inline element en moet dus geplaatst worden binnen een element op blokniveau (bijvoorbeeld <p>).

HFI IB BI

4.2 Links binnen een pagina Soms wil je niet zomaar verwijzen naar een ander document, maar naar een specifieke plaats binnen een document. Daarvoor moet je eerst de plaats, waarnaar je wilt verwijzen, aanduiden met een <a> element waaraan het name attribuut is toegevoegd. Zoâ&#x20AC;&#x2122;n markering (of anker) ziet er bijvoorbeeld als volgt uit: <a name="inhoud"></a>

In dit voorbeeld heeft de markering de naam "inhoud". Als je binnen een document een link naar een gemarkeerde plaats wilt maken, gebruik je als URI een hekje (#) gevolgd door de naam van de markering (ofwel de waarde van het name attribuut van de markering). Een link naar de markering in het voorbeeld hiervoor ziet er dus als volgt uit: <a href="#inhoud">inhoud hyperlinks</a>

De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks bovenaan deze pagina. Dit soort linken werken overigens niet alleen binnen een document. Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander document, in dezelfde of een andere directory, of op een andere server. Als waarde van het href attribuut neem je in dat geval gewoon de verwijzing naar het betreffende document op (zie het onderdeel Link naar bestand) en zet daar het hekje en de naam van de markering achter. In het volgende voorbeeld verwijst de link naar het document "inhoud-html-plus.html", dat zich in een hoger gelegen directory bevindt. De plaats van bestemming binnen dat document is aangegeven met een markering die de naam "hyperlinks" heeft. <a href="../inhoud-html-plus.html#hyperlinks">Inhoud Hyperlinks</a>

De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks in de uitgebreide inhoudsopgave van het HTML-gedeelte van de Handleiding HTML. Linken naar een plaats binnen een document zorgt ervoor dat de gebruiker niet het hele document hoeft door te scrollen, maar direct naar de gewenste informatie kan springen. In de browser:

Webdesign met XHTML en CSS

Figuur 4.1 â&#x20AC;&#x201C; Links binnen een pagina: de broncode

HFI IB BI

Figuur 4.2 â&#x20AC;&#x201C; Webpagina met links

Webdesign met XHTML en CSS

5 Tabellen

5.1 Eenvoudige tabellen In het volgende voorbeeld wordt een eenvoudige tabel met twee rijen en twee kolommen gemaakt. Een tabel maak je met het <table> element. Het <tr> element (table row) definieert een rij en het <td> element (tabel data) definieert de cellen in de rij. De randen van de tabel zijn zichtbaar, omdat voor het <table> element het border attribuut is opgenomen met een andere waarde dan "0". <table border="1"> <tr><td>West-Vlaanderen</td><td>Brugge</td></tr> <tr><td>Oost-Vlaanderen</td><td>Gent</td></tr> </table>

Figuur 5.1 â&#x20AC;&#x201C; Eenvoudige tabel met een rand

De browser maakt de cellen net zo breed als nodig is om de inhoud weer te geven. Door in de eerste rij de cellen te definiĂŤren met het <th> element wordt de tabel voorzien van kolomtitels. <table border="1">

<tr><th>Provincie</th><th>Hoofdstad</th></tr> <tr><td>West-Vlaanderen</td><td>Brugge</td></tr> <tr><td>Oost-Vlaanderen</td><td>Gent</td></tr> </table>

De browser zal deze koptitels in vet weergeven:

Figuur 5.2 â&#x20AC;&#x201C; Tabel met kolomtitels

Met het width attribuut van het <table> element wordt de breedte van de tabel gedefinieerd. <table border="1" width="50%"> <tr><th>Provincie</th><th>Hoofdstad</th></tr> <tr><td>West-Vlaanderen</td><td>Brugge</td></tr> <tr><td>Oost-Vlaanderen</td><td>Gent</td></tr> </table>

De browser zal de beschikbare breedte over de kolommen verdelen. De breedte 50% betekent hier de helft van de breedte die beschikbaar is binnen het browservenster.

Figuur 5.3 â&#x20AC;&#x201C; Tabel met als breedte de helft van het browservenster

HFI IB BI

5.2 Samenvoegen van cellen Opeenvolgende cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in verticale richting gebruik je het rowspan attribuut van het <td> (of <th>) element, voor het samenvoegen in horizontale richting het colspan attribuut. In het volgende voorbeeld wordt de eerste cel in de eerste rij met het rowspan attribuut samengevoegd met de onderliggende cellen in de volgende twee rijen. In de tweede en derde rij hoeven er daardoor slechts twee cellen gedefinieerd te worden. <table border="1" width="50%"> <tr><td rowspan="3">abc1</td><td>a2</td><td>a3</td></tr> <tr><td>b2</td><td>b3</td></tr> <tr><td>c2</td><td>c3</td></tr> </table>

De browser geeft dit voorbeeld zo weer:

Figuur 5.4 â&#x20AC;&#x201C; Samengevoegde cellen: rowspan

In het vorige voorbeeld worden nu de overblijvende cellen in de tweede rij samengevoegd met het colspan attribuut. <table border="1" width="50%"> <tr><td rowspan="3">abc1</td><td>a2</td><td>a3</td></tr> <tr><td colspan="2">b23</td></tr> <tr><td>c2</td> <td>c3</td></tr> </table>

Figuur 5.5 â&#x20AC;&#x201C; Samengevoegde cellen: colspan

Webdesign met XHTML en CSS

6 Afbeeldingen

6.1 Een afbeelding op een webpagina plaatsen Op een HTML-pagina kunnen naast tekst ook afbeeldingen opgenomen worden. Dat gebeurt met behulp van het <img> element. Aan het <img> element voeg je minimaal de attributen src en alt toe. Het src attribuut bepaalt welke afbeelding moet worden geladen. Je geeft hier dus de naam van het bestand met de afbeelding op. Als dit bestand zich niet in dezelfde map bevindt als het html-bestand, moet je ook het pad opgeven waar de afbeelding te vinden is. Met het alt attribuut geef je een omschrijving op, die getoond wordt als de browser geen afbeeldingen kan weergeven. De attributen width en height gebruik je om de afmetingen van de afbeelding op te geven. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst, welke op de afbeelding volgt, sneller weergegeven. Met het title attribuut kun je tekst opnemen, welke in de nieuwste browsers in een tooltip te zien is als je met de muis boven de afbeelding komt. Een voorbeeldje: <img src="eiffel1.jpg" width="144" height="175" alt="bouw eiffeltoren" />

In de browser verschijnt enkel de afbeelding (figuur 6.1)

Als de browser zo is ingesteld dat er geen afbeeldingen worden getoond, verschijnt de â&#x20AC;&#x153;alternatieve tekstâ&#x20AC;? (figuur 6.2).

Enkele tips: • Hoewel het gebruik van afbeeldingen een HTML-pagina zeker aantrekkelijker kan maken, ga je er best voorzichtig mee om. Veel grote afbeeldingen vragen een lange downloadtijd. Beperk daarom het aantal afbeeldingen in een document en gebruik bij voorkeur kleine afbeeldingen. Zo nodig kan de bezoeker de mogelijkheid geboden worden een grotere versie te openen, door op de opgenomen kleine afbeelding te klikken. • Alhoewel het niet verplicht is, is het toch beter om de hoogte en de breedte van een afbeelding op te geven. Bij het laden van de pagina kan de browser dan al direct de nodige ruimte voorzien voor de afbeelding. • Gebruik de height en width attributen niet om een afbeelding sterk te verkleinen. De gebruiker moet dan immers toch het grote bestand van de afbeelding downloaden. Gebruik in zulke gevallen een grafisch programma om de afbeelding te “schalen”.

6.2 Grafische formaten: GIF, JPG, PNG 6.2.1 Bitmapgrafiek en vectorgrafiek In een website kun je grafische bestanden in het formaat GIF, JPG en PNG gebruiken. Al deze formaten zijn zogenaamde bitmap-formaten, waarbij de afbeelding uit losse puntjes is opgebouwd (pixels).

Vectorgrafiek, daarentegen, bestaat uit punten, lijnen, curves, en andere meetkundige vormen, die samen een object opbouwen. Deze vormen kunnen opgevuld worden met allerlei kleuren en patronen. Een bestand met vectorgrafiek

Figuur 6.1 – Webpagina met afbeelding

HFI IB BI

bevat dan ook enkel een reeks instructies over hoe deze vormen moeten getekend worden.

Vectorgrafiek kan hertekend worden in om het even welke grootte, richting, positie, zonder dat de kwaliteit ervan vermindert. Het nadeel ervan is dat dergelijke afbeeldingen redelijk simpel moeten blijven; het is bijna niet mogelijk om alle nuances van b.v. een foto om te zetten in meetkundige vormen.

In webpagina’s wordt momenteel niet zo veel gebruik gemaakt van vectorgrafiek (afgezien van Flash-objecten; maar Flash is eigenlijk bedoeld voor animatie, en is geen officiële standaard, maar een product van Adobe). Er bestaat wel een standaard-formaat SVG (Scalable Vector Graphics).

6.2.2 GIF GIF (Graphics Interchange Format) is een bitmap-formaat waarbij maximaal 256 kleuren kunnen weergegeven worden. Het wordt vaak gebruikt voor lijnen en logo’s. In GIF-afbeeldingen kun je een kleur transparant maken, b.v. de witte achtergrond bij een logo.

Je kunt ook een animated GIF gebruiken: hierin zitten er meerdere afbeeldingen in één bestand, zodat je een (beperkt) soort tekenfilm-effect krijgt.

Figuur 6.2 – Het bestand met de afbeelding wordt niet gevonden

Webdesign met XHTML en CSS

6.2.3 JPEG/JPG JPEG (Joint Photographic Experts Group) wordt vooral voor foto’s gebruikt, omdat je hier niet beperkt bent tot 256 kleuren. Je moet wel uitkijken dat de bestanden met afbeeldingen niet te groot zijn, zodat de webpagina niet te traag inlaadt. Een JPEG-afbeelding kent geen “transparantie”.

6.2.4 PNG Het PNG-formaat (Portable Network Graphics) is iets nieuwer dan de twee vorige. Het biedt heel wat voordelen: compact, miljoenen kleuren, transparantie mogelijk...

Figuur 6.3 – Bitmap grafiek: kwaliteitsverlies bij vergroting

HFI IB BI

Paint.Net If all you want is a quick image retouch, Photoshop is overkill. Paint.NET, on the other hand, is an open-source freeware editor with all the essentials, including tools to crop, rotate, and resize images, adjust colors, and create collages. It supports common image formats–JPEG, PNG, GIF, TIFF, and others–but not high-resolution RAW files. There are enough basic and intermediate effects and features to keep image-tweakers happy, including a red-eye removal tool that has seen dramatic improvements. Unlike most free image editors, Paint.NET supports layers, history, and has an actions manager. The pleasing interface boasts semitransparent windows for ease of use. Version 3.5 addresses many performance quibbles and offers some interface tweaks for the Aero-theme users, but fans of the "dancing ants"may not like the gray-overlay changes made to the selection tools. The useful tools under Effects on the menu bar have seen many additions since version 3, including surface blurs, dents, and crystalize. The new version automatically downloads and installs the program’s prerequisites, including the latest Microsoft .Net version and Windows Installer. It will update in the background now, too, so you can continue to use the program until it’s ready to restart. Longtime users should notice that the program starts up about 20 percent faster, according to the publisher. Regardless of minor problems, Paint.NET is far more advanced than Microsoft Paint, and given its free price, it’s a must-have for anyone needing to fix images. (www.cnet.com)

use. Upon installation, the app attempts to install two Google programs, but you can opt out. The program lets you open and edit images, as well as multiple media formats. You can cut and crop images, apply batch conversions, add, sharpen, or blur effects, create panoramas, and change color modes easily. The program continues to add support for an array of file formats and has plug-in support for most image, video, and sound formats, including MP3, AVI, audio CD, and WMA. The interface is far from fancy but should be easy enough for most users to figure out. An IrfanView Thumbnails shortcut on the desktop offers an Explorer-like file tree that quickly displays all images in a particular folder. The latest version includes a basic drawing palette made accessible by hitting F12. It contains simple Erase, Draw, Fill, Rotate, Draw an Arrow, and Color Picker commands, perfect for grabbing screenshots and highlighting image specifics. IrfanView does what it does well. It’s not going to replace a major paint program, but why use a meat cleaver to cut a stick of butter? (www.cnet.cm) GIMP GIMP is a popular open-source image editor originally developed for Unix/Linux. Often lauded as the "free Photoshop,ït does have an interface and features similar to Photoshop, but with a steep learning curve to match. Because it’s volunteer-developed beta software, stability and frequency of updates could be an issue; however, many happy users report using GIMP for Windows without significant problems. (http://graphicssoft.about.com/)

Irfanview This image viewer and editor is a longtime favorite among our staff, and with good reason. IrfanView is simple, fast, and free for individual

Infotekst 4 – Enkele gratis programma’s voor het werken met bitmapgrafiek

Webdesign met XHTML en CSS

Figuur 6.4 – Vectorgrafiek is opgebouwd uit meetkundige vormen

Figuur 6.5 – Vectorgrafiek: bij vergroting blijft de kwaliteit behouden

Figuur 6.6 – Transparantie

HFI IB BI

7 Cascading Style Sheets

7.1 Inleiding HTML is oorspronkelijk ontwikkeld om (meestal wetenschappelijke) informatie via hypertext-documenten uit te wisselen. Bij de weergave van de eerste HTMLdocumenten ging het niet om een mooie lay-out. Het uitgangspunt was dat de informatie in een heldere structuur aan een bezoeker geboden moest worden.

Figuur 7.1 – CSS-code

Met het populair worden van het Internet ontstond steeds meer de behoefte aan extra mogelijkheden bij de opmaak van documenten. Op deze behoefte is door de ontwikkelaars van browsers ingespeeld door het introduceren van steeds nieuwe elementen en attributen. Sommige van deze elementen en attributen werden breed geaccepteerd, maar bij andere elementen bleef de ondersteuning beperkt tot één enkele browser. Webauteurs gebruikten hun creativiteit om

binnen de bestaande mogelijkheden van HTML meer invloed op de opmaak van hun documenten te krijgen. Voorbeelden zijn het gebruik van tabellen om de inhoud op een bepaalde plaats te krijgen en het omzetten van tekst in een afbeelding. De vermenging van vorm en inhoud die hierdoor ontstaat, heeft tot gevolg dat het niet meer zeker is dat een document in elke browser en op elk platform goed te bekijken is. Als oplossing voor dit probleem zijn stijlen geïntroduceerd (CSS: Cascading Style Sheets). De achterliggende gedachte is de scheiding tussen inhoud en vorm: HTML moet weer zorgen voor de inhoud van het document, de vorm wordt bepaald met behulp van stijlen. Deze stijlen kunnen in het document zelf staan, maar ook in een extern document dat wordt geïmporteerd. Een dergelijk apart geïmporteerd document wordt ook wel stylesheet genoemd.

7.2 CSS syntax 7.2.1 Een stijl definiëren Een instructie voor een “stijl” (een stijlregel) bestaat uit twee delen: • de selector bepaalt op welke onderdelen de instructies van toepassing zijn; • één of meer declaraties bepalen hoe onderdelen moeten weergegeven worden; deze declaraties staat tussen akkolades (zie figuur 7.2).

Figuur 7.2 – Opbouw van een stijlregel

Voorbeeld: body { font-family: verdana, helvetica, sans-serif; font-size: 1em; text-align:justify; }

Als selectoren kun je o.a. HTML-elementen gebruiken, (zie vorig voorbeeld), maar ook zgn. “klassen”, b.v. .nadruk {font-weight:bold}

HFI IB BI

Let op de punt! In je HTML-code schrijf je dan b.v. <p class="nadruk">tekst </p>

Deze klasse kun je nu op alle HTML-elementen toepassen. Je kunt ook een klasse definiëren voor een bepaald HTML-element, b.v. voor cellen van een tabel: td.accent {font-color:red}

In de HTML-code heb je dan de keuze of je een “gewone” cel wil: <td>celinhoud</td>

of een cel waarop de klasse “accent” is toegepast: <td class="accent">celinhoud</td>

Tussen stijlregels kun je ook commentaar plaatsen; commentaar begint met /*, en eindigt met */. Een voorbeeldje: /*Dit is commentaar*/ p { text-align:center; /*nog enkele opmerkingen*/ color:black; font-family:arial }

7.2.2 Stijlen toepassen “Inline” stijl De instructies staan bij het style attribuut van het element, b.v.: <h1 style="color:olive; background:silver">een titel</h1> <p style="font-weight:bolder; font-size:larger; color:#009933">hier komt een alinea tekst</p>

Men raadt af om veel met inline stijlen te werken: het wordt dan immers moeilijk om snel de layout van de hele website aan te passen. Ingebedde stijlen Bij ingebedde stijlen (embedded styles) staan de instructies in de <head> van de webpagina, tussen de tags <style> en </style>: een stijlblok.

Webdesign met XHTML en CSS

Voorbeeld 1 <html> <head> <title>ons kookboek</title> <style> <!-h1, h2 {font-family: monospace;} body {color: blue; background: white;} p.opgepast { font-family:verdana, sans-serif; font-size:larger; text-align:center; color:red; } --> </style> </head> <body> <h1>ons kookboek</h1> <p>deze pagina bevat enkele favoriete recepten.</p> <p class="opgepast">verbrand je vingers niet!</p> <p>het bakken van een omelet</p> <h2>omelet</h2> benodigdheden: <ul> <li>een ei</li> <li>boter</li> <li>zout</li> </ul> </body> </html>

Resultaat:

HFI IB BI

Voorbeeld 2 <html> <head> <title>Test</title> <style type="text/css"> .tip { background-color:LightGrey; color:Indigo; font-size:14pt; border-width:2; border-style:solid } </style> </head> <body> Normale tekst <p>Een nieuwe alinea</p> <p class="tip">Deze alinea krijgt een aangepaste opmaak</p> </body> </html>

Resultaat:

Verwijzen naar een stijlblad In plaats van de beschrijving van de stijlen in het <head> element te plaatsen, kan men ook verwijzen naar een ander bestand, waarin de stijlen gedefinieerd worden. Het voordeel hiervan is natuurlijk dat méérdere webpagina’s hetzelfde stijlblad kunnen gebruiken.

Om het vorige voorbeeld op deze manier uit te werken, krijgen we twéé bestanden: Eén met de HTML-code: <html> <head> <title>ons kookboek</title> <link rel="stylesheet" type="text/css" href="stijlen.css">

Webdesign met XHTML en CSS

</head> <body> <h1>ons kookboek</h1> <p>deze pagina bevat enkele favoriete recepten.</p> <p class="opgepast">verbrand je vingers niet!</p> <p>het bakken van een omelet</p> <h2>omelet</h2> benodigdheden: <ul> <li>een ei</li> <li>boter</li> <li>zout</li> </ul> </body> </html>

En één met de beschrijving van de stijlen (hier stijlen.css). Als voorbeeld hebben we nog een aantal stijlen toegevoegd. h1, h2 {font-family: monospace} body {color: blue; background: white} p.opgepast { font-family:verdana, sans-serif;font-size:larger; text-align:center;color:red } td {color:white; background:black}

Figuur 7.3 – Verwijzing naar een extern stijlblad

HFI IB BI

hr {text-align: center; width:50%} .groot {font-size:150%}

Opmerking: browsers “cachen” de css-bestanden die door een website gebruikt worden; bij de “tijdelijke internet-bestanden” vind je waarschijnlijk massa’s css-bestanden terug.

7.2.3 Selectoren Als selector in een stijlregel kun je de volgende zaken gebruiken: • een HTML-tag • een klasse-selector • een id-selector Hierboven zagen we al enkele voorbeelden van het gebruik van HTML-tags. Nog een voorbeeld met klassen: <html> <head> <style type="text/css"> .center {text-align:center;} </style> </head> <body> <h1 class="center">Een gecentreerde titel</h1> <p class="center">Een gecentreerder alinea</p> </body> </html>

Een id selector bepaalt een stijl voor één enkel element. Deze selector gebruikt het id attribuut van een HTML element, en wordt voorafgegaan door een #-teken. De stijlregel hieronder zal toegepast worden op het element met id “al1”. <html> <head> <style type="text/css"> #al1 {text-align:center;color:red} </style>

Webdesign met XHTML en CSS

</head> <body> <p id="al1">Dag allemaal!</p> <p>Deze alinea wordt niet aangepast</p> </body> </html>

Soms hebben meerdere elementen een zelfde stijl, b.v. h1 { color:green; } h2 { color:green; } p { color:green; }

In dat geval kun je de selectoren groeperen: h1,h2,p {color:green;}

7.3 Meerdere stijlregels voor de zelfde selector Bij CSS kun je op verschillende manieren de stijl voor een element vastleggen: met inline stijlen, met ingebedde stijlblokken, en met externe stijlbladen. Je kunt deze mogelijkheden ook tegelijkertijd gebruiken en daarbij voor één element verschillende stijlen definiëren. In zo een geval geldt in principe de opmaak die het dichtste bij de betrokken tekst staat (meer specifieke selectors hebben prioriteit boven minder specifieke selectors): • inline stijlen hebben voorrang op stijlen in een ingebed stijlblok • stijlen in een ingebed stijlblok hebben voorrang op stijlen in een extern stijlblad (tenzij de <link> tag na de <style> tag geplaatst wordt) Een voorbeeldje. Veronderstel dat een extern stijlblad deze eigenschappen bevat voor <h3>: h3 {color:red; text-align:left; font-size:8pt}

En een intern stijlblok heeft deze eigenschappen: h3 {text-align:right; font-size:20pt}

De toegepaste (“winnende”) eigenschappen worden dan:

HFI IB BI

• color:red; • text-align:right; • font-size:20pt

7.4 <div> en <span> elementen Het <div> element (division) verdeelt de inhoud van een webpagina in afzonderlijke delen. Elk deel kan dan zijn eigen opmaak krijgen; deze opmaak wordt via CSS bepaald. Een <div> element is een blok-element; daardoor is er een regelterugloop na het element. <html> <head> <style type="text/css"> .groot {color: #000030;font-family:arial;font-size: 14pt} </style> </head> <body> <p>dit is gewone tekst</p> <div class="groot"> <p>De Marseillaise is misschien wel het bekendste volkslied ter wereld. Bijna iedereen weet dat dit het volkslied van Frankrijk is. Minder bekend is dat de Marseillaise ook kort het volkslied van revolutionair Rusland was. </p> <p>In 1917 is de Marseillaise het volkslied van revolutionair Rusland. Lang duurt dit niet. In 1918 wordt het lied vervangen door de Internationale.</p> </div> </body> </html>

body

div

Resultaat: zie figuur7.4.

Webdesign met XHTML en CSS

Figuur 7.4 – Stijl toegepast op <div> element

Het <span> element lijkt op het <div> element: het wordt ook gebruikt om de inhoud in delen op te splitsen. Het verschil is dat <span> normaal gezien voor kleinere deeltjes wordt gebruikt (tot zelfs één teken). Het is een in-line element, dus de tekststroom wordt niet verstoord; er is geen regelterugloop na een <span> element. <html> <head> <style type="text/css"> .groot {color: #000030;font-family:arial;font-size: 14pt} </style> </head> <body> <p>De <span class= "groot">Marseillaise</span> is misschien wel het bekendste volkslied ter wereld. Bijna iedereen weet dat dit het volkslied van <span class= "groot">Frankrijk</span> is. Minder bekend is dat de Marseillaise ook kort het volkslied van revolutionair <span class= "groot">Rusland</span> was. </p> <p>In 1917 is de Marseillaise het volkslied van revolutionair Rusland. Lang duurt dit niet. In 1918 wordt het lied vervangen door de <span class= "groot">Internationale</span>.</p> </body> </html>

body

span

HFI IB BI

Figuur 7.5 – Stijl toegepast op <span> elementen

7.5 Het erven van stijleigenschappen 7.5.1 Relaties tussen elementen Bij de beschrijving van de CSS-eigenschappen wordt regelmatig gesproken over parent en child elementen. Een parent-element sluit child-elementen in en een child element wordt ingesloten door zijn parent element. In het volgende voorbeeld wordt het <strong> element ingesloten door het <p> element. <p> is dus het parent element van <strong> en <strong> is het child element van <p>. <p>dit is het parent element <strong>en dit het child element</strong></p>

Men gebruikt ook de begrippen ancestor element (“voorouder”) en descendant element (“nakomeling”). Een ancestor kan het parent element zijn, maar ook de parent van de parent, enz. Een descendent of nakomeling kan een child element zijn, maar ook een child van een child, enz. In het volgende voorbeeld zijn <body> en <p> de ancestors van <strong> en is <strong> een descendant van <body> en <p>. <body> <p>.. <strong>..</strong> ..</p> </body>

Nog een voorbeeld: <html> <head> <title>Welkom!</title> </head> <body> <h1>Welkom op onze website</h1> <p>We zijn blij dat je er bent.</p> <p>Je kunt hier details vinden over onze laatste producten en aanbiedingen .</p> <p>Meer info: <a href="products.htm">On-line catalogus</a></p> </body> </html>

Webdesign met XHTML en CSS

Je kunt de relatie tussen de verschillende elementen grafisch voorstellen.

Figuur 7.6 – Relatie tussen elementen als blokdiagram

html

body

head

title

Figuur 7.7 – Relatie tussen elementen als boomstructuur

7.5.2 Overerving Bij het gebruik van stijlen moet je er rekening mee houden, dat bij een groot aantal eigenschappen de stijl van een parent element geërfd wordt door child elementen. Als bijvoorbeeld voor het <body> element via een stijlregel een kleur voor de tekst gedefinieerd wordt, dan geldt deze ook voor elementen als <p>, <h1>, ...

HFI IB BI

Wanneer je niet wilt dat voor bepaalde elementen de stijl van het parent element geërfd wordt, dan moet je voor die elementen een nieuwe stijl definiëren. Deze laatste stijl zal gelden, omdat deze meer specifiek is. In de volgende voorbeelden, waarin gebruik gemaakt wordt van een inline stijl, is het principe van het erven van eigenschappen te zien. <p style="font-style:italic;">hier erft <strong>dit element</strong> de kleur van de paragraaf.</p>

Dit wordt als volgt weergegeven:

Als we voor het binnenste element een stijl definiëren: <p style="font-style:italic;">hier gaat de stijl van <strong style="font-style: normal;">dit element</strong> boven de stijl van de paragraaf.</p>

dan zien we:

Opgepast: veel eigenschappen worden niet geërfd, b.v. marges, vulruimtes, randen en achtergronden.

Webdesign met XHTML en CSS

8 Basisopmaak met CSS

8.1 Kleurgebruik Een kleurenbeeldscherm werkt met drie basiskleuren: rood, groen en blauw (het RGB-kleurenmodel). Elk van deze kleuren heeft een waarde de die varieert tussen 0 en 255. In theorie kun je dus 256 * 256 * 256 verschillende kleuren “mengen”. De waarde van één basiskleur kun je aangeven met een decimaal getal (tussen 0 en 255), maar ook met een hexadecimaal getal (waarden van 00 tot FF). Voor een hexadecimale waarde wordt een #-teken geplaatst. Zo is #FF0000 zuiver rood, #0000FF zuiver blauw, en #E0E0E0 een licht grijs. CSS laat ook toe om de waarden van de basiskleuren als percentages op te geven. Je mag ook met namen werken. De kleuren die vastgelegd zijn in de CSSspecificaties zijn: white, yellow, fuchsia, red, aqua, lime, blue, black, gray, olive, purple, maroon, teal, green, navy en silver. Daarnaast ondersteunen de meeste browsers nog een reeks andere namen. Meestal raadt men aan om met een veilig kleurenpalet te werken (web-safe colors). Dat is een reeks kleuren die ook op “beperkte” browsers (die slechts 256 kleuren kunnen weergeven) zonder problemen kunnen getoond worden. Het veilig kleurenpalet is opgebouwd door voor de basiskleuren niet alle mogelijke waarden te gebruiken, maar enkel waarden uit deze reeksen: • percentages: 0%, 20%, 40%, 60%, 80%, 100% • “gewone” getallen: 0, 51, 102, 153, 204, 255 • hexadecimale notatie: 00, 33, 66, 99, CC, FF De eigenschap color wordt gebruikt om de (voorgrond)kleur van een element in te stellen. De achtergrondkleur stel je in met background-color (je kunt ook

met de eigenschap background werken, waarmee je nog andere kenmerken kunt instellen). Een voorbeeld: <html> <head> <style type="text/css"> body {color:red} h1 {color:#00ff00} .ex {color:white;background-color:rgb(20%,0%,0%)} </style> </head> <body> <h1>Dit is een groene titel</h1> <p>Dit is een gewone alinea; de tekst staat in het rood, dit is geĂŤrfd van het &lt;body&gt; element.</p> <p class="ex">Dit is een alinea met klasse "ex".</p> </body> </html>

Resultaat:

Figuur 8.1 â&#x20AC;&#x201C; Overerving van CSS-eigenschappen

8.2 Tekstuitlijning Met de eigenschap text-align wordt de horizontale uitlijning van de tekst bepaald. Mogelijke waarden zijn: left, right, center, justify. <html> <head> <style type="text/css"> h1 {text-align:center} p.datum {text-align:right} p.hoofd {text-align:justify}

HFI IB BI

</style> </head> <body> <h1>Voorbeeld uitlijning</h1> <p class="datum">12 mei 2010</p> <p class="hoofd">Saïdjah’s vader had een buffel, waarmede hij zijn veld bewerkte. Toen deze buffel hem was afgenomen door het districtshoofd van Parang-Koedjang, was hy zeer bedroefd, en sprak geen woord, vele dagen lang. </p> <p><strong>Opmerking:</strong> Pas de venstergrootte aan om de effecten van het uitlijnen te zien.</p> </body> </html>

Resultaat:

Figuur 8.2 – Tekstuitlijning

8.3 Tekstdecoratie De eigenschap text-decoration wordt gebruikt om een aantal speciale effecten op tekst toe te passen. Mogelijke waarden: none, underline, overline, line-through, blink. <html> <head> <style type="text/css">a {text-decoration:none}</style> </head> <body> <p>Link naar: </p>

Webdesign met XHTML en CSS

<a href="http://www.ieper.be">Ieper</a></p> <p style="text-decoration:line-through">doorstreept</p> </body> </html>

Figuur 8.3 – Tekst “decoratie”

De eigenschap text-decoration wordt meestal gebruikt om de onderstreping bij hyperlinks weg te nemen. a {text-decoration:none}

Het is niet aan te bevelen om tekst te onderstrepen die géén hyperlink is: dit is verwarrend.

8.4 Inspringen van tekst De eigenschap text-indent wordt gebruikt om de insprong van de eerste regel tekst van een element te bepalen. In dit voorbeeld springt de eerste regel van een alinea 50 pixels (beeldpunten) in: p {text-indent:50px}

8.5 Lettertype en lettergrootte 8.5.1 Lettertypes Als een ontwerper lettertypes kiest voor een webpagina, gaat hij meestal niet één lettertype opgeven voor een bepaald element, maar een lijstje met mogelijke types, b.v. Arial, Helvetica, sans-serif. Als op de computer van de bezoeker het lettertype Arial aanwezig is, dan wordt dit gebruikt. Op een Apple Mac is dit lettertype niet aanwezig, maar wel het type Helvetica, dat goed lijkt op Arial. Is geen van beide lettertypes beschikbaar op het systeem, dan kiest het zelf een lettertype van het type sans-serif.

HFI IB BI

Sans-serif en serif zijn algemene aanduidingen voor lettertypes zonder en mét “schreef ”. Het verschil zie je in deze figuur:

Figuur 8.4 – Lettertypes met en zonder “schreef ”.

Om de lettertypes op te geven voor een bepaald element, gebruik je de eigenschap font-family, b.v. p{font-family:"Times New Roman", Times, serif}

8.5.2 Letterstijl De eigenschap font-style wordt meestal gebruikt om cursieve tekst aan te duiden. <html> <head> <style type="text/css"> p.normaal {font-style:normal} p.cursief {font-style:italic} </style> </head> <body> <p class="normaal">Dit is een alinea met "normale" letters</p> <p class="cursief">Dit is een alinea met "cursieve" letters</p> </body> </html>

Webdesign met XHTML en CSS

8.5.3 Lettergrootte De eigenschap font-size bepaalt de grootte van de letters. Dat kan op verschillende manieren. Absolute grootte Een absolute grootte geef je op met de woorden: xx-small, x-small, small, medium, large, x-large en xx-large. Deze woorden verwijzen naar een reeks lettergroottes, die door de browser berekend worden. Relatieve grootte Bij een relatieve grootte worden de termen larger en smaller gebruikt. De verkregen lettergrootte hangt nu af van het “parent” element waarin het huidig element zich bevindt. Wanneer voor het parent element een absoluut sleutelwoord is gebruikt, dan is het resultaat bij larger de volgende waarde in de reeks (bijvoorbeeld large wordt x-large) en bij smaller de vorige waarde in de reeks (bijvoorbeeld large wordt medium). Lengte Een lengte wordt uitgedrukt als combinatie van een getal en een eenheid. Als eenheid kun je (o.a.) gebruik maken van mm (millimeters), pt (punten; 1 inch = 72 punten), en px (pixels). Bij het opgeven van een lengte wordt ook vaak gebruik gemaakt van de eenheid em. Dit is een eenheid uit de drukkerswereld: 1em is het zelfde als de puntgrootte van het gebruikte lettertype (zie figuur 8.5). Als je em gebruikt met font-size, wordt er rekening gehouden met het parent element; 1.5em betekent dan “anderhalve keer de lettergrootte van het parent element”. Percentage Het percentage wordt berekend ten opzichte van de lettergrootte van het parent element. Voor de font-size eigenschap geldt dat 100% overeenkomt met 1em . Voorbeeld In het volgende voorbeeld krijgt het <body> element een basisgrootte van 12 punten. Kopjes van het eerste niveau worden 2.5 keer groter gemaakt (2.5em). Kopjes van het tweede niveau krijgen een grootte die de helft meer is dan de basisgrootte (150%). De klasse “klein” definieert een grootte die iets kleiner is dan de basisgrootte van he document (smaller).

HFI IB BI

<html> <head> <style> body {font-size:12pt} h1 {font-size:2.5em} h2 {font-size:150%} p.klein {font-size:smaller} </style> </head> <body> <h1>Dit is titel 1</h1> <h2>Dit is titel 2</h2> <p>Dit is een alinea.</p> <p class="klein">Publicatie overeenkomstig artikelen 472 tot 478 van de programmawet van 24 december 2002, gewijzigd door de artikelen 4 tot en met 8 van de wet houdende diverse bepalingen van 20 juli 2005.</p> </body> </html

8.5.4 Het “gewicht” van een lettertype Het gewicht geeft aan hoe donker of vet de letters moeten worden weergegeven. Bij toenemend gewicht worden de letters donkerder/vetter. We gebruiken hiervoor de eigenschap font-weight, met mogelijke waarden normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. <html>

Figuur 8.5 – Bij een drukletter is “em” de grootte van het stukje metaal waarop de letter gevormd is (grootheid “c” in deze figuur).

Webdesign met XHTML en CSS

<head> <style type="text/css"> p.normaal {font-weight:normal} p.licht {font-weight:lighter} p.zwaar {font-weight:bold} p.extra {font-weight:900} </style> </head> <body> <p class="normaal">Dit is een alinea.</p> <p class="licht">Dit is een alinea.</p> <p class="zwaar">Dit is een alinea.</p> <p class="extra">Dit is een alinea.</p> </body> </html>

8.6 Hyperlinks Hyperlinks kunnen een andere opmaak krijgen volgens de “toestand” waarin ze zich bevinden. Er zijn 4 mogelijkheden: • a:link - een normale link die nog niet gebruikt werd • a:visited - een link die al gebruikt werd • a:hover - een link op het moment dat de muis erover beweegt • a:active - een link op het moment dat die aangeklikt wordt. Voorbeeld:

Figuur 8.6 – Verschillende lettergroottes

HFI IB BI

a:link {color:#FF0000} /* nog niet bezochte link: rood */ a:visited {color:#00FF00} /* bezochte link: groen */ a:hover {color:#FF00FF} /* muis boven link: paars */ a:active {color:#0000FF} /* klik op link: blauw */

Opgepast: • a:hover moet geplaatst worden na a:link en a:visited. • a:active moet komen na a:hover. Je kunt ook de eigenschap text-decoration gebruiken, b.v. a:link {text-decoration:none} a:visited {text-decoration:none} a:hover {text-decoration:underline} a:active {text-decoration:underline}

Of de achtergrondkleur veranderen: a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

8.7 Lijsten Met list-style-type kun je het uitzicht van een lijst aanpassen. Voor een niet-geordende lijst bestaan o.a. de waarden none, circle (open bolletje), square en disc (gesloten bolletje). Geordende lijsten kennen o.a. de types decimal (cijfers), lower-alpha (a, b, c, ...), upper-alpha, (A, B, C, ...), lower-roman (i, ii, iii, ...), upper-roman. Een voorbeeld (resultaat zie figuur 8.8): <html> <head>

Figuur 8.7 – Letters met verschillende zwaartes

Webdesign met XHTML en CSS

Figuur 8.8 – Lijsten: niet-geordend en geordend

Je kunt zelfs een afbeelding als opsommingsteken, gebruiken. ul {list-style-image: url(’vinkje.gif’);}

HFI IB BI

Dit levert soms wel verschillende resultaten op, afhankelijk van de gebruikte browser.

8.8 Achtergronden 8.8.1 Achtergrondkleur De eigenschap background-color bepaalt de achtergrondkleur van een element. In het volgende voorbeeld stellen we een achtergrondkleur voor de volledige pagina in. <html> <head> <style type="text/css"> body {background-color:#b0c4de;} </style> <title></title> </head> <body> <h1>Mijn CSS-pagina!</h1> <p>Deze pagina krijgt een lichtblauwe achtergrond.</p> </body> </html>

Figuur 8.9 â&#x20AC;&#x201C; Een kleur als achtergrond

8.8.2 Afbeeldingen als achtergrond De eigenschap background-image zorgt er voor dat een afbeelding als achtergrond van een element wordt gebruikt. Normaal gezien wordt de afbeelding meerdere keren afgebeeld, zodat het hele element een achtergrond krijgt. In dit voorbeeld gebruiken we een kleine GIF-afbeelding, met de naam papier.gif, als achtergrond voor de pagina.

Webdesign met XHTML en CSS

Figuur 8.10 – papier.gif

De code: <html> <head> <style type="text/css"> body {background-image:url(’paper.gif’)} </style> </head> <body> <h1>Mijn verhaal...</h1> </body> </html>

Figuur 8.11 – Een afbeelding als achtergrond

8.8.3 Achtergrondafbeeldingen herhalen Normaal gezien herhaalt de eigenschap background-image een afbeelding zowel horizontaal als verticaal. Als je deze manier van werken wil veranderen, kun je de eigenschap background-repeat gebruiken. Met de waarde repeat-x wordt de afbeelding enkel horizontaal herhaald, met repeat-y enkel verticaal, en met no-repeat wordt de afbeelding slechts één maal getoond. Een voorbeeldje met repeat-x, we gebruiken de afbeelding verloop.png.

Figuur 8.12 – verloop.png

HFI IB BI

Code: <html> <head> <style type="text/css"> body { background-image:url(’verloop.png’); background-repeat:repeat-x; } </style> </head> <body> <h1>Hoe het begon...</h1> </body> </html>

Resultaat: zie figuur 8.13.

Figuur 8.13 – Een achtergrond-afbeelding die horizontaal herhaald wordt.

8.8.4 Een positie bepalen voor een achtergrondafbeelding Door no-repeat op te geven bij de eigenschap background-repeat, wordt een afbeelding slechts één keer getoond. Met de eigenschap background-position kun je een positie voor deze afbeelding opgeven. Je kunt hierbij werken met percentages, lengtes (zie 8.5.3), of de uitdrukkingen top, center, bottom, left, right. In het voorbeeld wordt een afbeelding bovenaan rechts geplaatst. <html> <head> <style type="text/css"> body { background-image:url(’front_face.jpg’); background-repeat:no-repeat; background-position: top right; } </style> </head>

Webdesign met XHTML en CSS

<body> <h1>What is Lorem Ipsum?</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industryâ&#x20AC;&#x2122;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </body> </html>

Resultaat: zie figuur 8.14.

Figuur 8.14 â&#x20AC;&#x201C; Achtergrondafbeelding die een bepaalde plaats krijgt

Je ziet dat de tekst door de afbeelding komt. Je zou dat kunnen voorkomen door marges voor de tekst op te geven (zie hoofdstuk 9), of door gebruik te maken van zwevende elementen (zie 10.3).

HFI IB BI

8.9 Tabellen Met CSS kun je het uitzicht van tabellen sterk verbeteren.

8.9.1 Tabelranden Deze kunnen we instellen met de border eigenschap. In het volgende voorbeeld wordt er een zwarte rand gegeven aan de elementen <table> en <td>. <html> <head> <style type="text/css"> table,td {border:1px solid black;} </style> </head> <body> <table> <tr><th>Voornaam</th><th>Achternaam</th></tr> <tr><td>Peter</td><td>Dewitte</td></tr> <tr><td>Petra</td><td>Dezwarte</td></tr> </table> </body> </html>

Je ziet dat er in de tabel dubbele randen voorkomen. Dat komt omdat zowel <table> als <td> elk hun eigen rand hebben. Echt mooi is dat meestal niet, en je kunt dit voorkomen met de border-collapse eigenschap.

8.9.2 Samenvallende tabelranden Met de border-collapse eigenschap kun je ervoor zorgen dat randen van verschillende tabelonderdelen, samengevoegd worden tot ĂŠĂŠn rand. We passen het stijlblok uit het vorige voorbeeld aan. table {border-collapse:collapse;} table,td {border: 1px solid black;}

De dubbele randen zijn hiermee verdwenen.

Webdesign met XHTML en CSS

8.9.3 Breedte en hoogte De afmetingen van de tabel, en de elementen binnen de tabel, worden bepaald door de eigenschappen width en height. In volgende voorbeeld krijgt de tabel een breedte van 70%, en de hoogte van de elementen wordt op 50 pixels ingesteld.

<th>

<html> <head> <style type="text/css"> table,td,th {border:1px solid black;} table {width:70%;} th{height:50px;} </style> </head> <body> <table> <tr><th>Voornaam</th><th>Achternaam</th></tr> <tr><td>Peter</td><td>Dewitte</td></tr> <tr><td>Petra</td><td>Dezwarte</td></tr> </table> </body> </html>

8.9.4 Uitlijning van tekst binnen de tabel Met de text-align eigenschap wordt de horizontale uitlijning geregeld (left, right, center, justify). De eigenschap vertical-align bepaalt de verticale uitlijning (zoals top, bottom, of middle). <html> <head>

HFI IB BI

8.9.5 Padding Om de afstand te regelen tussen de inhoud van een tabelelement, en de rand ervan, gebruiken we de eigenschap padding. <html> <head> <style type="text/css"> table, td, th {border:1px solid black;} td {padding:15px;} </style> </head> <body> <table> <tr><th>Voornaam</th><th>Achternaam</th></tr> <tr><td>Peter</td><td>Dewitte</td></tr> <tr><td>Petra</td><td>Dezwarte</td></tr> </table> </body> </html>

Webdesign met XHTML en CSS

HFI IB BI

9 Het CSS Box model

9.1 Inleiding In CSS wordt een HTML element gezien worden als een “box”. Een box bestaat uit: margins (marges), borders (randen), padding (vulruimte) en de content (eigenlijke inhoud). Dank zij dit “box model” kunnen we een rand plaatsen rond een element, en de afstand regelen tot andere elementen.

• De margin maakt een ruimte vrij omheen de rand. Een marge heeft geen achtergrondkleur, en is volledig transparant. • Een border ligt rond de vulruimte en de inhoud. • De padding houdt ruimte vrij rond de inhoud. • De content bestaat uit de eigenlijke tekst, of een afbeelding. Om de breedte en hoogte in van een element correct in te stellen in alle browsers, moet je weten hoe het box model werkt. En dat verschilt nogal van browser tot browser.

9.2 Breedte en hoogte van een element Als je de afmetingen van een element opgeeft met CSS, stel je eigenlijk de breedte en de hoogte in van het content gebied. Om de volledige grootte van het element te kennen, moet je ook de padding, border en margin erbij rekenen. De totale breedte van de eerste alinea in het volgende voorbeeld is 250 pixels: (220 pixels (content) + 20 pixels (padding links en rechts) + 10 pixels (border links en rechts) + 0 pixels (margin links en rechts). <html> <head> <style type="text/css"> p.voorbeeld { width:220px; padding:10px; border:5px solid gray; margin:0px; } </style> </head> <body> <img src="spacer.png" width="250" height="1" /><br /><br /> <p class="voorbeeld">de lijn hierboven is 250 pixels breed. De totale breedte van dit element zou 250 pixels moeten zijn.</p> <p><b>Opgepast:</b> Dit voorbeeld werkt niet correct in Internet Explorer! </p> </body> </html>

Als je dit uittest in Internet Explorer, krijg je jammer genoeg een andere breedte:

HFI IB BI

Dat komt omdat Internet Explorer de padding en de border hier méérekent in de waarde van “width”. Oudere versies van IE (IE5 en vroeger) werken dus niet volgens het box model van het W3C, maar volgens hun eigen box model (zie figuur 9.1).

Figuur 9.1 – Verschillende box-modellen

In de nieuwere versies van IE (vanaf 6), kun je deze problemen gemakkelijk voorkomen door een passend DOCTYPE op te geven1 . Het W3C verplicht dit eigenlijk, als je wil dat je pagina aan de standaarden voldoet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1

Van IE browsers die het IE boxmodel volgen, zegt men dat ze in “quirks mode” werken.

Webdesign met XHTML en CSS

<html> <head> <style type="text/css"> p.geen{border-style:none} p.punt{border-style:dotted} p.streep{border-style:dashed} p.doorlopend{border-style:solid} </style> </head> <body> <p class="geen">Geen rand</p> <p class="punt">Een rand met puntjes</p> <p class="streep">Een rand met streepjes</p> <p class="doorlopend">Een doorlopende lijn</p> </body> </html>

9.3 Randen 9.3.1 Randstijl De eigenschap border-style bepaalt welke soort rand er getoond wordt. De andere eigenschappen voor randen hebben géén effect als deze eigenschap niet ingesteld is! Enkele voorbeelden:

Figuur 9.2 – Verschillende randstijlen

9.3.2 Breedte van de rand De randbreedte stel je in met de eigenschap border-width. Je kunt een aantal pixels opgeven, of één van de waarden thin, medium of thick.

HFI IB BI

<html> <head> <style type="text/css"> p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; } </style> </head> <body> <p>2 verschillende randstijlen</p> </body> </html>

9.3.3 Kleur van de rand Hiervoor dient de eigenschap border-color. De manier van kleuren opgeven is dezelfde als bij een tekstelement (zie 8.1 op pagina 59).

9.3.4 Verschillende randen Je kunt per kant van het element een andere rand instellen.

Figuur 9.3 – Verschillende randstijlen rond één element

Het vorige voorbeeld kun je ook korter schrijven: border-style:dotted solid;

De eigenschap border-style kan namelijk van één tot vier waarden hebben: • border-style:dotted solid double dashed; betekent: – bovenste rand “dotted” – rechtse rand “solid” – onderste rand “double” – linkse rand “dashed”

Webdesign met XHTML en CSS

• border-style:dotted solid double; betekent: – bovenste rand “dotted” – linkse en rechtse rand “solid” – onderste rand “double” • border-style:dotted solid; – bovenste en onderste rand “dotted” – linkse en rechtse rand “solid” • border-style:dotted; – de vier randen “dotted” In dit voorbeeld werd border-style gebruikt. Je kunt deze korte notaties ook gebruiken voor border-width en border-color.

9.3.5 De eigenschap “border” Het kan nog korter. Je kunt alle eigenschappen voor randen in één keer opgeven. Men noemt dit een shorthand property. B.v. border:5px solid red;

De volgorde van de eigenschappen is hier: border-width, border-style en border-color. Het geeft niet als er één ontbreekt, zo lang ze maar in volgorde staan (border-style moet je wel opgeven, als je enig effect wil zien).

9.4 Marges De marge houdt ruimte vrij rond het element (aan de buitenzijde van de rand). Een marge heeft geen achtergrondkleur, en is volledig transparant. Je kunt aparte boven- onder- linker- en rechtermarges instellen. Enkele mogelijke waarden: • auto: de browser bepaalt de marge • een “lengte”: hiermee bepaal je een marge met als eenheid pixels, punten, em, cm, ... • een percentage: de marge wordt uitgedrukt in procenten t.o.v. het parent element. Voorbeeld: <html> <head> <style type="text/css">

HFI IB BI

p{background-color:yellow;} p.marge { margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; } </style> </head> <body> <p>Hier werden geen marges opgegeven.</p> <p class="marge">Hier werden wél marges opgegeven.</p> </body> </html>

Figuur 9.4 – Verschillende marges

Voor een marge kun je ook negatieve waarden opgeven, b.v. om bepaalde elementen met elkaar te laten overlappen. Net zoals bij de randen (zie (9.3.4)), is er een “verkorte” eigenschap. Deze heet hier gewoon margin, en je kunt één tot vier waarden instellen. Een voorbeeldje: met margin:100px 50px stel je de boven-en ondermarge op 100 pixels in, en de linker- en rechtermarge op 50 pixels.

9.5 Padding De eigenschap padding houdt ruimte vrij rond de inhoud van een element (maar binnen de rand). Deze ruimte wordt beïnvloed door de achtergrondkleur van het element. Je kunt, net zoals bij de marges, aparte waarden opgeven voor de vier kanten van het element (eigenschappen padding-top, padding-right, padding-bottom en padding-left), of alle waarden in één keer opgeven (eigenschap padding).

Webdesign met XHTML en CSS

<html> <head> <style type="text/css"> p{background-color:yellow;} p.ruimte { padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } </style> </head> <body> <p>Dit is een alinea zonder "padding"</p> <p class="ruimte">Dit is een alinea mét "padding" (extra vulruimte).</p> </body> </html>

Figuur 9.5 – Alinea’s met en zonder “padding”

HFI IB BI

10 CSS: gevorderde onderwerpen

10.1 Nesten van selectoren Je kunt stijlen opgeven voor selectoren binnen een andere selector. Men noemt dit descendant selectors (andere naam: contextual selectors). Stijlregels met descendent element-selectors hebben de volgende opbouw: Element1 Element2 { stijldeclaratie } of Element1 Element2 Element3 { stijldeclaratie } In het eerste geval geldt dat Element2 een nakomeling (descendant) moet zijn van Element1. In het tweede geval moet Element3 een nakomeling moet zijn van Element2, dat op zijn beurt weer een nakomeling element moet zijn van Element1. Je kunt dit natuurlijk verder uitbreiden tot 4, 5, ... elementen. Voorbeeld1 In het volgende voorbeeld is er een stijl voor alle <p> elementen, en een afzonderlijke stijl voor <p> elementen die voorkomen binnen een klasse met de naam â&#x20AC;&#x153;nadrukâ&#x20AC;?. <html> <head> <style type="text/css"> p {color:blue;text-align:center;} .nadruk {background-color:blue} .nadruk p {color:white;} </style> </head> <body>

<p>Dit is een blauwe, gecentreerde alinea.</p> <div class="nadruk"> <p>Hier heb je witte letters</p> </div> <p>Alineaâ&#x20AC;&#x2122;s binnen een element van de klasse "nadruk" behouden de uitlijning, maar hebben een andere tekstkleur.</p> </body> </html>

Voorbeeld 2 Stel dat je op een webpagina een groot aantal hyperlinks aanbiedt: hyperlinks in een navigatiemenu, hyperlinks in doorlopende tekst en hyperlinks in een voetregel om te verwijzen naar de faq, email, enz... Je wil graag dat deze koppelingen een ander uiterlijk hebben. Een koppeling in de navigatie moet er bv. anders uitzien dan een hyperlink in de voettekst. Je zou dan voor elke koppeling een eigen class kunnen maken. De HTML-code wordt dan zoiets als:  <a href="home.html" class="navmenu">Home</a><br /> <a href="klant.html" class="navmenu">Klant</a><br /> <a href="product.html" class="navmenu">Product</a><br />  <a href="lees1.html" class="lees">lees verder ...</a><br /> <a href="lees2.html" class="lees">lees verder ...</a><br /> <a href="lees3.html" class="lees">lees verder ...</a><br />  <a href="contact.html" class="voet">Contact</a><br /> <a href="disclaimer.html" class="voet">Disclaimer</a><br /> <a href="faq.html" class="voet">Faq</a><br />

Dit is niet verkeerd, maar het kan handiger. We verdelen de pagina in 3 <div> elementen (het menu, de inhoud, en de voettekst). Stel bijvoorbeeld dat het navigatiemenu van de pagina is opgenomen in een <div id="menu">...</div>. In het stijlblad kun je dan deze regel opnemen: #menu a { css-kenmerken}

HFI IB BI

De opmaak die je geeft, zal hier nu alleen gelden voor <a> elementen die voorkomen binnen de <div> met id â&#x20AC;&#x153;menuâ&#x20AC;?... Op dezelfde manier kan je het CSSbestand uitbreiden met opmaakregels voor de andere hyperlinks (in de eigenlijke inhoud, en de voettekst): #inhoud a {css-kenmerken} #voet a { css-kenmerken}

De HTML-code wordt nu: <div id="menu">  <a href="home.html">Home</a><br /> <a href="klant.html">Klant</a><br> <a href="product.html">Product</a><br /> </div> <div id="inhoud">  <a href="lees1.html">lees verder ...</a><br /> <a href="lees2.html">lees verder ...</a><br /> <a href="lees3.html">lees verder ...</a><br /> </div> <div id="voet">  <a href="contact.html">Contact</a><br /> <a href="disclaimer.html">Disclaimer</a><br /> <a href="faq.html">Faq</a><br /> </div>

Webdesign met XHTML en CSS

10.2 De eigenschap â&#x20AC;&#x153;displayâ&#x20AC;? In 2.8 zagen we het verschil tussen block-level elementen zoals <h1>, <p>, <div> en inline elementen zoals <span> en <a>. Je kunt de manier waarop deze elementen worden afgebeeld, veranderen. In het volgende voorbeeld worden lijstelementen als inline elementen afgebeeld. <html> <head> <style type="text/css"> li{display:inline} </style> </head> <body> <p>Toon deze lijst met links als een horizontaal menu</p> <ul> <li><a href="/html/default.asp" target="_blank">HTML</a></li> <li><a href="/css/default.asp" target="_blank">CSS</a></li> <li><a href="/js/default.asp" target="_blank">JavaScript</a></li> <li><a href="/xml/default.asp" target="_blank">XML</a></li> </ul> </body> </html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> li{display:inline} </style> <title></title> </head> <body> <p>Toon deze lijst met links als een horizontaal menu</p> <ul> <li><a href="/html/default.asp" target="_blank">HTML</a></li> <li><a href="/css/default.asp" target="_blank">CSS</a></li> <li><a href="/js/default.asp" target="_blank">JavaScript</a></li> <li><a href="/xml/default.asp" target="_blank">XML</a></li> </ul> </body> </html>

Resultaat:

HFI IB BI

En nu omgekeerd: hier worden inline elementen (<span>) als block elementen afgebeeld. <html> <head> <style type="text/css"> span {display:block;} </style> </head> <body> <h2>Nirvana</h2> <span>CD: MTV Unplugged in New York</span> <span>Jaar: 1993</span> <h2>Radiohead</h2> <span>CD: OK Computer</span> <span>Jaar: 1997</span> </body> </html>

Resultaat:

Webdesign met XHTML en CSS

10.3 Zwevende elementen 10.3.1 Begrip In afgedrukte documenten wordt vaak gebruik gemaakt van afbeeldingen waarrond er tekst is geplaatst (figuur 10.1).

Figuur 10.1 – “Floats” bij een afgedrukte bladzijde

Ook bij een webpagina kun je dit effect bekomen. Met een zwevend element of float kun je elementen naar links of rechts “duwen”, zodat andere elementen zich er rond plaatsen. Zwevende elementen worden dikwijls gebruikt voor afbeeldingen, maar zijn ook nuttig om de pagina in te delen. Een zwevend element zal zich zo ver mogelijk naar links of rechts bewegen, binnen het parent element. De elementen die na het zwevend element vermeld worden, zullen zich links of rechts van dat zwevend element plaatsen. De elementen ervoor ondervinden geen invloed. Om een element zwevend te maken, passen we er de CSS-eigenschap float op toe. Mogelijke waarden hiervoor zijn: left, right en none.

10.3.2 Voorbeeld: zwevende afbeeldingen <html> <head> <style type="text/css"> img {float:right;} </style> </head> <body> <p>In het volgende deel zal er aan de rechterkant van de alinea een afbeelding geplaatst worden als zwevend element.</p> <img src="pdf.png" width="128" height="128"/> <p> Het Portable Document Format, of kortweg PDF, is sinds ongeveer 1993 een de facto standaard voor de uitwisseling van

HFI IB BI

elektronische documenten en formulieren die in hun oorspronkelijke vorm gereproduceerd moeten kunnen worden. PDF is een universele bestandsindeling waarmee lettertypen, afbeeldingen en lay-out van elk willekeurig brondocument behouden blijven, ongeacht het programma of het platform waarmee het document werd gemaakt, dit in tegenstelling tot bijvoorbeeld HTML. </p> </body> </html>

Resultaat:

Figuur 10.2 – Een “zwevende” figuur

Als je verschillende zwevende elementen na elkaar opgeeft in de code, zullen deze zich naast elkaar plaatsen in de webpagina. Zo kun je b.v. een foto-album maken. <html> <head> <style type="text/css"> .miniatuur { float:left; width:110px; height:90px; margin:5px; } </style> </head> <body> <h3>Afbeeldingen</h3> <p>Verander de venstergrootte om te zien wat er gebeurt als er te weinig ruimte is.</p> class="miniatuur" class="miniatuur" class="miniatuur" class="miniatuur" class="miniatuur"

src="klematis_small.jpg" /> src="klematis2_small.jpg" /> src="klematis3_small.jpg" /> src="klematis4_small.jpg" /> src="klematis_small.jpg" /> <img class="miniatuur" src="klematis2_small.jpg" /> <img <img <img <img <img

Webdesign met XHTML en CSS

/> />

</html>

Resultaat:

Figuur 10.3 – Meerdere zwevende afbeeldingen worden naast elkaar geplaatst

10.3.3 De eigenschap “clear” Elementen die na een zwevend element in de code staan, zullen er normaal naast geplaatst worden in de webpagina. In figuur 10.4 wordt b.v. het deel “voet” naast de “hoofdinhoud” geplaatst (aangezien “hoofdinhoud” als een zwevend element werd geplaatst). hoofdinhoud

zijbalk

float right

voet float left

zonder "clear"

Figuur 10.4 – De voettekst wordt naast de “zwevende” hoofdinhoud geplaatst.

Als je dit niet wil, kun je de eigenschap clear gebruiken. Een element met de clear eigenschap zal niet naar boven, naast een zwevend element verschuiven, maar zal zich onder de een zwevend element plaatsen (zie figuur ).

HFI IB BI

hoofdinhoud

zijbalk

float right

float left

voet mĂŠt "clear"

Figuur 10.5 â&#x20AC;&#x201C; De voettekst komt onder de zwevende elementen

De eigenschap clear wordt meestal gebruikt met de waarde both. Deze waarde betekent dat het element zich niet naast een zwevend element zal plaatsen, ongeacht of dit zwevend element links of rechts bevindt.

10.3.4 Voorbeeld: afbeeldingen naast elkaar plaatsen <html> <head> <style type="text/css"> .miniatuur { float:left; width:110px; height:90px; margin:5px; } .aparte_regel { clear:both; margin-bottom:2px; } </style> </head> <body> <h3>Afbeeldingen</h3> <p>Verander de venstergrootte om te zien wat er gebeurt als er te weinig ruimte is.</p> class="miniatuur" class="miniatuur" class="miniatuur" class="miniatuur" class="miniatuur"

src="klematis_small.jpg" /> src="klematis2_small.jpg" /> src="klematis3_small.jpg" /> src="klematis4_small.jpg" /> src="klematis_small.jpg" /> <img class="miniatuur" src="klematis2_small.jpg" />

<img <img <img <img <img

Webdesign met XHTML en CSS

<img class="miniatuur" src="klematis3_small.jpg" /> <img class="miniatuur" src="klematis4_small.jpg" /> <h3 class="aparte_regel">Tweede reeks</h3> <img class="miniatuur" src="klematis_small.jpg" /> <img class="miniatuur" src="klematis2_small.jpg" /> <img class="miniatuur" src="klematis3_small.jpg" /> <img class="miniatuur" src="klematis4_small.jpg" /> </body> </html>

Resultaat:

Figuur 10.6 – De eigenschap “clear” zorgt er voor dat de tekst “Tweede reeks” zich niet naast zwevende elementen gaat plaatsen.

HFI IB BI

11 Praktische voorbeelden

11.1 Een tabel met opmaak In dit deeltje proberen we een aantrekkelijke tabel te maken. Hierbij gebruiken we HTML-elementen alléén voor de structuur van de tabel. De opmaak doen we volledig via CSS. We gebruiken dus enkel de elementen <table>, <tr>, en <td>, en de attributen rowspan, colspan en class. De HTML-code van onze tabel: <!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> <title></title> <link rel="stylesheet" type="text/css" href="kruidnagel.css"> </head> <body> <table> <tr><td colspan="4" class="titelbalk">Kruidnagel</td></tr> <tr> <td rowspan="2" class="afbeelding"> <img src="kruidna.jpg" alt="Kruidnagel" /> </td> <td class="bijschrift">Oorsprong</td> <td class="bijschrift">Biologische naam</td> <td class="bijschrift">Beschikbaar?</td> </tr> <tr> <td>India, Senegal, Sri Lanka</td> <td>Syzygium aromaticum</td>

<td><a href="../index.html#cloves">Nu kopen!</a></td> </tr> <tr> <td class="bijschrift">Beschrijving</td> <td colspan="3"> Kruidnagel is een in de keuken gebruikte specerij met een zeer overheersende smaak. Kruidnagels zijn de gedroogde, nog gesloten bloemknoppen van de kruidnagelboom (Syzygium aromaticum, synoniemen: Eugenia aromaticum en Eugenia caryophyllata). Kruidnagels hebben een ongeveer 1 cm lang steeltje, met daarop een knopje, dat ongeveer 3mm groot is. Voor de teelt van kruidnagels worden de bloemknoppen geplukt als ze ongeveer anderhalve centimeter lang en groenroze van kleur zijn. De oogst vindt dus plaats voordat de knoppen uitkomen en een dieprode bloesem vormen. Kruidnagels worden veel gebruikt in koekkruiden, zoals in speculaas. Bij stoofgerechten, zoals runderlappen worden kruidnagels langdurig meegetrokken. Traditioneel worden kruidnagels ook meegekookt met rode kool en met wild. Kruidnagel vormt een bestanddeel van het kerriemengsel. In Duitsland wordt kruidnagel toegevoegd aan gl端hwein, in Nederland wordt kruidnagel toegevoegd aan de (vergelijkbare) bisschopswijn . </td> </tr> <tr> <td class="bijschrift"> Medische toepassingen </td> <td colspan="3"> Kruidnagelolie werd in de tandheelkunde gebruikt als verdovend middel. Vroeger werd de kruidnagel als verdoving in een pijnlijke kies gestoken. </td> </tr> </table> </body> </html>

In deze code staat al een verwijzing naar een extern stijlblad kruidnagel.css, maar voorlopig is dit leeg. Je merkt het al: zonder wat opmaak komt deze tabel nogal saai over, en het is ook niet zo duidelijk wat de betekenis is van de verschillende delen.

Dit moet beter. Eerst kunnen we randen toevoegen. In het stijlblad kruidna-

HFI IB BI

Figuur 11.1 – Tabel zonder opmaak

Figuur 11.2 – Tabel met randen

gel.css voegen we de volgende regels toe: td { border: 2px black solid; } table { border-collapse: collapse; }

De tabel wordt hiermee al een stuk duidelijker. We laten de randen van aan elkaar grenzende tabelelementen “samenvallen” (border-collapse), zodat we geen dubbele lijnen krijgen tussen deze elementen. Onze tabel kan nog wat kleur gebruiken. Het <table> element krijgt een achtergrondkleur, en deze kleur zal overgenomen worden door de cellen in de tabel. Maar als bepaalde van deze cellen een class attribuut gekregen

Webdesign met XHTML en CSS

hebben (zoals in de HTML-code hierboven), dan kunnen we de class selector in ons stijlblad gebruiken om deze cellen een andere kleur te geven. Terwijl we de stijlen aanpassen voor de kleur, kunnen we meteen ook het lettertype, de lettergrootte, het gewicht, en de uitlijning aanpassen. Het stijlblad wordt: table { background-color: #f0aa28; border-collapse: collapse; font-family:Arial,Helvetica,sans-serif } td { border: 2px black solid; } td.titelbalk { background-color: #000000; color: white; font-size:2em; font-weight:bold; text-align:center; } td.bijschrift { background-color: #e4be6d; font-weight: bold; } td.afbeelding { background-color: #e4be6d; text-align: center; }

Figuur 11.3 â&#x20AC;&#x201C; Tabel met kleuren

Nu gaan we de breedte van de kolommen bepalen: we geven ze alle vier een breedte van 25%. We voorzien ook wat extra ruimte tussen de inhoud van de cellen en de rand. Het stijlblad wordt aangepast: ... td { border: 2px black solid; width:25%; padding:1%} td.titelbalk { background-color: #000000; color: white; font-size: 2em; font-weight: bold; text-align: center; padding:0.15em

HFI IB BI

} ...

Figuur 11.4 – Tabel: eindresultaat

Door voor de “padding” waarde percentages en “ems” te gebruiken, zorgen we ervoor dat de uiteindelijke hoeveelheid extra ruimte afhangt van de grootte van de tabel (percentages), of van de lettergrootte (ems). In de laatste afbeeldingen zie je hoe de meeste onderdelen evenredig vergroten of verkleinen naarmate de tabel van grootte verandert. Maar je merkt ook dat de afbeelding voor problemen zorgt bij een te smalle tabel: de browser past de grootte van de figuur niet automatisch aan. De “padding” op de <td> elementen is 1% van de breedte van de tabel (het parent-element). In een smal venster heb je dus weinig “extra ruimte” (in de gewone tabelcellen). Bij de titelbalk werd de “padding” ingesteld met de eenheid em, dus zal deze afhangen van de gebruikte lettergrootte. Als we de lettergrootte aanpassen in de browser, zien we inderdaad dat de “extra ruimte” in de titelbalk zich méé aanpast.

Webdesign met XHTML en CSS

Figuur 11.5 – Tabel: weergave in smal venster

Figuur 11.6 – Tabel: weergave in breed venster

100

HFI IB BI

Figuur 11.7 â&#x20AC;&#x201C; Padding wordt aangepast volgens lettergrootte

Webdesign met XHTML en CSS

101

11.2 Een afbeelding met bijschrift In dit voorbeeld willen we een afbeelding aan de rechterkant plaatsen, en de tekst errond laten vloeien. Onder de figuur moet een bijschrift komen. Basisstructuur We beginnen met de basisstructuur, voorlopig zonder opmaak. <html> <head> <title>De derde man</title> </head> <body> <h1>The Third Man</h1> <img src="derdeman.jpg" alt="Affiche" width="150"/> <p>Filmaffiche</p> <p>The Third Man (De derde man) is een Engelse speelfilm uit 1949 van regisseur Carol Reed met onder meer Joseph Cotten, Orson Welles en Alida Valli. Het screenplay is van de hand van Graham Greene. De gelijknamige roman die Greene ter voorbereiding schreef, verscheen in januari 1950.</p> <p>Het is een zwart-wit film van 104 minuten. De muziek, die werd geschreven en uitgevoerd door Anton Karas op citer, maakt de spanning van de thriller extra dreigend en werd welhaast even klassiek als de film zelf.</p> <p>Het verhaal speelt zich af in het naoorlogse Wenen, een kapotgeschoten ru誰ne, die bovendien door de geallieerde overwinnaars (Amerika, Rusland, Frankrijk en Engeland) in vieren is opgedeeld. De wederopbouw moet nog beginnen, alleen het beroemde reuzenrad uit 1897 draait alweer. In de stad is gebrek aan van alles, maar met name penicilline. Harry Lime heeft een oplossing.</p> </body> </html>

102

HFI IB BI

Figuur 11.8 – Basisstructuur

Afbeelding en bijschrift in een <div> Nu gaan we de afbeelding en het bijschrift in een <div> element plaatsen, zodat ze samen één element vormen. Dit verandert niets aan het uitzicht van de webpagina. ... <div class="afbrechts"> <img src="derdeman.jpg" alt="Affiche" width="150"/> <p>Filmaffiche</p> </div> ...

Het blok met afbeelding en bijschrift zwevend maken Apply "float: right" to the div. This will force the div over to the right edge of its containing box. A width is also required when floating an element - unless it is an image. Op het <div> element passen we de CSS-eigenschap float toe met de waarde right. Hiermee wordt de <div> aan de rechterkant van zijn ouder-element geplaatst (figuur 11.9). We geven ook een breedte op. <html> <head> <title>De derde man</title> <style> .afbrechts {float:right}

Webdesign met XHTML en CSS

103

</style> </head> <body> <h1>The Third Man</h1> <div class="afbrechts"> <img src="derdeman.jpg" alt="Affiche" width="150"/> <p>Filmaffiche</p> </div> <p>The Third Man (De derde man) is een Engels ... </p> </body> </html>

Figuur 11.9 â&#x20AC;&#x201C; Het <div> element wordt zwevend gemaakt

Marges Sommige tekstregels komen nogal dicht van de afbeelding. We voegen marges toe om de inhoud verder weg te plaatsen van het <div>-element. We gebruiken hier een korte notatie: margin: 0 0 20px 20px.

Deze korte notaties worden in wijzerzin toegepast: boven, rechts, onder, links. ... <style> .afbrechts {float:right; margin: 0 0 20px 20px;} </style> ...

104

HFI IB BI

Figuur 11.10 â&#x20AC;&#x201C; Rond het <div> element komen marges

Achtergrondkleur Je kunt een achtergrondkleur toevoegen om de afbeelding en het bijschrift te accentueren. Deze achtergrondkleur zie je nu eigenlijk enkel bij het bijschrift. Je kunt dat veranderen door wat vulruimte op te geven bij de <div> (figuur 11.11). ... .afbrechts { float:right; margin: 0 0 10px 10px; background-color: #ddd; padding: 10px; } ...

Figuur 11.11 â&#x20AC;&#x201C; Achtergrondkleur en padding

Een rand rond het <div> element Rond het <div> element plaatsen we een grijze rand, door deze stijlregel toe te voegen aan de klasse .afbrechts.:

Webdesign met XHTML en CSS

105

border: 1px solid #666;

Figuur 11.12 – Rand toevoegen

Het bijschrift aanpassen Het bijschrift wordt gecentreerd, krijgt een ander lettertype, en een kleinere lettergrootte (0.8em). Het bijschrift is een <p> element, maar we kunnen niet zomaar een stijlregel definiëren voor alle <p> elementen: de alinea’s in de hoofdtekst zouden dan ook veranderen. We gebruiken dus een "descendant selector" regel: we geven een stijldeclaratie op voor alle <p> elementen die voorkomen in een <div> met klasse afbrechts (zie 10.1). div.afbrechts p { text-align:center; font-family:arial,helvetica,sans; font-size:0.8em; padding-top:10px; margin:0 }

106

HFI IB BI

Figuur 11.13 â&#x20AC;&#x201C; Bijschrift vormgeven

Extraatje: een schaduweffect Eventueel kuin je nog wat met randen spelen om allerlei effecten te krijgen. Je krijgt een schaduweffect door de bovenrand en linkse rand lichtgrijs te maken, en de rechtse rand en onderrand donkergrijs.

Figuur 11.14 â&#x20AC;&#x201C; Schaduweffecten

Zo een effect kun je krijgen als je de regel voor de border vervangt door b.v. de volgende regels: border-top: 1px solid #aaa; border-right: 2px solid #555; border-bottom: 2px solid #555; border-left: 1px solid #aaa;

Het eindresultaat zie je in figuur 11.15.

Webdesign met XHTML en CSS

107

Figuur 11.15 â&#x20AC;&#x201C; Rechterpaneel met schaduweffect

108

HFI IB BI

11.3 Navigatiebalken 11.3.1 Een lijst met hyperlinks In een website moet je natuurlijk gemakkelijk de informatie terugvinden. Daarbij worden meestal navigatiebalken gebruikt. In deze voorbeelden gaan we een navigatiebalk bouwen op basis van een lijst met hyperlinks. <html> <body> <ul> <li><a <li><a <li><a <li><a

href="#home">Home</a></li> href="#nieuws">Nieuws</a></li> href="#contact">Contact</a></li> href="#info">Info</a></li>

</ul> <p>Nota: We gebruiken href="#" voor testlinks. In een echte website moet je hier natuurlijk passende URI’s opgeven.</p> </body> </html>

Het resultaat is een redelijk “vervelende” HTML-lijst (figuur 11.16).

Figuur 11.16 – Lijst met hyperlinks

We verwijderen nu de opsommingstekens, de marges en de opvulruimte. <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#nieuws">Nieuws</a></li> <li><a href="#contact">Contact</a></li>

Webdesign met XHTML en CSS

109

<li><a href="#info">Info</a></li> </ul> <p>Nota: We gebruiken href="#" voor testlinks. In een echte website moet je hier natuurlijk passende URI’s opgeven.</p> </body> </html>

Met list-style-type:none worden de opsommingstekens verwijderd; die zijn niet nodig voor een navigatiebalk. Door margin en padding een waarde 0 te geven, zorgen we dat de browser-instellingen voor het weergeven van lijsten niet gebruikt worden (zie figuur ).

Figuur 11.17 – Aangepaste lijst met hyperlinks

Deze code is nu de basis voor zowel verticale als horizontale menubalken.

11.3.2 Verticale navigatiebalken Om een verticale navigatiebalk te maken, moeten we nu enkel de <a> elementen vorm geven. a { display:block; width:60px; background-color:#dddddd; }

Figuur 11.18 – Een stijlregel voor de hyperlinks

Door de links als blok-elementen af te beelden, wordt het hele gebied met de link aanklikbaar (niet alleen de tekst), je kunt ook een breedte opgeven: hier 60 pixels. Blok-elementen gebruiken standaard de volledige beschikbare ruimte. Je kunt de opmaak van de hyperlinks verder aanpassen door gebruik te maken van de speciale pseudo-klassen voor hyperlinks (zie 8.6). Als je met de muis over de hyperlinks beweegt, krijgen deze een andere achtergrondkleur. <html>

110

HFI IB BI

<head> <style type="text/css"> ul { list-style-type:none; margin:0; padding:0; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover,a:active {background-color:#7A991A;} </style> </head> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#nieuws">Nieuws</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#info">Info</a></li> </ul> <p>Je kunt het hele gekleurde gebied aanklikken.</p> </body> </html>

11.3.3 Horizontale navigatiebalken Je kunt op twee manieren horizontale navigatiebalken maken: met inline of floating lijst-elementen. Als je wil dat de links de zelfde grootte hebben, moet je de elementen floating (zwevend) maken. Een horizontale navigatiebalk met inline-elementen Met de eerste werkwijze laten we de <li> elementen als inline-elementen afbeelden (figuur 11.19). <html> <head> <style>

Webdesign met XHTML en CSS

111

li { display:inline; } </style> </head> <body> <ul> <li><a <li><a <li><a <li><a

href="#home">Home</a></li> href="#nieuws">Nieuws</a></li> href="#contact">Contact</a></li> href="#info">Info</a></li>

</ul> </body> </html>

Figuur 11.19 â&#x20AC;&#x201C; Een horizontale menubalk met inline elementen

De elementen <li> zijn normaal gezien blok-elementen; via de CSS-stijlregel tonen we ze hier als inline-elementen. Een horizontale menubalk met zwevende elementen In het vorige voorbeeld hebben de hyperlinks verschillende breedtes. Als je wil dat ze allemaal dezelfde breedte hebben, kun je de <li> elementen zwevend maken, en een breedte opgeven voor de hyperlinks <a> (figuur ). <html> <head> <style> ul {list-style-type:none;} li {float:left;} a {display:block;width:70px;} </style> </head> <body> <ul> <li><a <li><a <li><a <li><a

href="#home">Home</a></li> href="#nieuws">Nieuwtjes</a></li> href="#contact">Contact</a></li> href="#info">Info</a></li>

</ul> </body> </html>

Wat uitleg:

112

HFI IB BI

• float:left zorgt ervoor dat blok-elementen naast elkaar worden geplaatst. • Met display:block wordt het hele gebied van de hyperlink aanklikbaar (niet alleen de tekst), en kunnen we ook een breedte opgeven (70 pixels). • Blok-elementen nemen normaal gezien de volledige beschikbare ruimte in, door een kleinere breedte op te geven (width:70px), zorgen we ervoor dat ze toch naast elkaar kunnen komen.

Figuur 11.20 – Een horizontale menubalk met zwevende elementen

Webdesign met XHTML en CSS

113

11.4 Een eenvoudige twee-kolommen layout In dit deeltje ontwerpen we een pagina-indeling met twee kolommen. De indeling bestaat uit een koptekst, een horizontaal navigatiedeel, een kolom voor de hoofdinhoud, een zijkolom, en een voettekst.

11.4.1 Basis Eerst maken we de HTML-structuur. <html> <head> <style type="text/css"> a {text-decoration:none} </style> <title></title> </head> <body> <div id="alles"> <div <div <div <div <div </div>

id="kop"></div> id="nav"></div> id="hoofdkolom"></div> id="zijkolom"></div> id="voet"></div>

</body> </html>

Dan plaatsen we wat testgegevens in deze structuur. <html> <head> <title>twee kolommen</title> </head> <body> <div id="alles"> <div id="kop"> <h1>Titel document</h1> </div> <div id="nav"> <ul> <li><a href="#">Optie 1</a></li> <li><a href="#">Optie 2</a></li> </ul> </div> <div id="hoofdkolom"> <h2>Kolom 1</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

114

HFI IB BI

</div> <div id="zijkolom"> <h2>Kolom 2</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </div> <div id="voet"> <p>voettekst</p> </div> </div> </body> </html>

Nu hebben we een webpagina, die goed gestructureerd is, maar voorlopig zonder opmaak (figuur (11.21)).

Figuur 11.21 â&#x20AC;&#x201C; De basisstructuur

11.4.2 Aanpassen van de elementen <body> en <html> De inhoud zou moeten gaan tot aan de randen van het browser-venster. Daarom zetten we de margin en padding van de elementen <body> en <html> op 0. We geven ook kleuren op voor tekst en achtergrond. <html> <head> <title>twee kolommen</title> <style> body,html { margin:0;

Webdesign met XHTML en CSS

115

padding:0; color:#000; background:#a7a09a; } </style> </head> <body> ... </body> </html>

Resultaat: zie figuur11.22.

Figuur 11.22 â&#x20AC;&#x201C; Inhoud tot tegen de rand, kleuren

11.4.3 De verschillende zones vorm geven Nu gaan we het hoofdgebied, waar de eigenlijke inhoud moet komen, vorm geven. We doen dat door een breedte op te geven, en marges in te stellen. Dit deel wordt horizontaal gecentreerd. We zorgen ook voor een achtergrondkleur. Het centreren doen we als volgt. Wanneer je de linker- en rechtermarge van een element instelt op auto, dan delen deze marges de ruimte die overblijft als je de breedte van dat element aftrekt van de breedte van zijn parent element. In dit geval zal de breedte van het <div> element met id #alles afgetrokken worden van de breedte van het browser-venster. Opgepast: deze methode werkt in Internet Explorer (vanaf versie 6) alleen maar als het document een doctype bevat waardoor IE de webstandaarden volgt. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

116

HFI IB BI

We passen de code aan, en zorgen er ook voor dat de code XHTML 1.1 compliant wordt (dat betekent dat ze voldoet aan de XHTML 1.1 voorschriften). <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>twee kolommen</title> <style type="text/css"> body,html { margin:0; padding:0; color:#000; background:#a7a09a; } #alles { width:750px; margin:0 auto; background:#99c; } </style> </head> <body> ... </body> </html>

Nu geven we de verschillende delen van het document een eigen achtergrondkleur. De code wordt: ... <style type="text/css"> body,html { margin:0; padding:0; color:#000; background:#a7a09a; } #alles { width:750px; margin:0 auto; background:#99c; } #kop {background:#ddd;} #nav {background:#c99;} #hoofdkolom {background:#9c9;} #zijkolom{background:#c9c;} #voet {background:#cc9;}

Webdesign met XHTML en CSS

117

</style> ...

Het resultaat zie je in figuur 11.23.

Figuur 11.23 – Aanpassen verschillende zones

11.4.4 De kolommen naast elkaar plaatsen Om de twee kolommen (met id’s #hoofdkolom en #zijkolom) naast elkaar te plaatsen, maken we de overeenkomstige <div>-elementen zwevend. Eén kolom wordt links geplaatst, de andere rechts. We geven ook een breedte op voor de kolommen. We passen de code aan. Het resultaat zie je in figuur 11.24. #hoofdkolom { float:left; width:500px; background:#9c9; } #zijkolom { float:right; width:250px; background:#c9c; }

11.4.5 De voettekst De voettekst komt nog niet onderaan de pagina. Het element #voet komt onmiddellijk onder het element #zijkolom. We kunnen dat veranderen door de eigenschap clear toe te passen op de voettekst (zie 10.3) (resultaat: figuur 11.25)

118

HFI IB BI

Figuur 11.24 – Plaatsen van de kolommen

Figuur 11.25 – Plaatsen van de voettekst

11.4.6 De achtergrondkleur aanpassen Je ziet dat de (kortere) rechterkolom niet doorloopt tot tegen de voettekst. We zorgen er nu voor dat dit niet meer opvalt, door de zelfde kleur te gebruiken voor #zijkolom en voor #alles (zie figuur 11.26)1 . #zijkolom { background:#99c; float:right; width:250px; } 1

Als je niet weet welke kolom de grootste zal zijn, en beide kolommen verschillende achtergronden moeten hebben, en tot aan de voettekst moeten lijken te gaan, dan moet je anders te werk gaan; google b.v. op “faux columns” of “liquid layouts with negative margins”.

#voet { clear:both; background:#cc9; }

Webdesign met XHTML en CSS

119

Figuur 11.26 â&#x20AC;&#x201C; Kleur rechterkolom aanpassen

11.4.7 Een horizontale navigatiebalk maken In het navigatiemenu bevindt zich momenteel een lijst met hyperlinks (een unordered list). Daarvan gaan we nu het uitzicht veranderen. We voegen de volgende code toe in het stijlblok, het resultaat zie je in figuur 11.27. #nav ul { margin:0; padding:0; list-style:none; } #nav li { display:inline; margin:0; padding:0; }

Figuur 11.27 â&#x20AC;&#x201C; Aanpassen navigatie

120

HFI IB BI

11.4.8 Marges en vulruimte aanpassen Tenslotte zorgen we ervoor dat de teksten wat minder dicht tegen de randen staan. Daarvoor maken we de volgende aanpassingen in het stijlblok. <style type="text/css"> body,html { margin:0; padding:0; color:#000; background:#a7a09a; } #alles { width:750px; margin:0 auto; background:#99c; } #kop { padding:5px 10px; background:#ddd; } h1 {margin:0;} #nav { padding:5px 10px; background:#c99; } #nav ul { margin:0; padding:0; list-style:none; } #nav li { display:inline; margin:0; padding:0; } #hoofdkolom { background:#9c9; float:left; width:480px; padding:10px; } h2 {margin:0 0 1em;} #zijkolom { background:#99c; float:right; width:230px; padding:10px; }

Webdesign met XHTML en CSS

121

#voet { clear:both; background:#cc9; padding:5px 10px; } #footer p {margin:0;} </style>

Resultaat: zie figuur 11.28. Bemerk dat we de breedte van de elementen #hoofdkolom en #zijkolom verkleind hebben, omdat we “padding” hebben toegevoegd aan deze elementen (zie hoofdstuk 9).

Figuur 11.28 – Ruimte aanpassen

122

HFI IB BI

Inhoudsopgave

1 Inleiding 1.1 Statische en dynamische websites . 1.2 Websites en het Internet . . . . . . 1.3 Een website voor het grote publiek 1.4 Webpagina’s en HTML . . . . . . . 1.5 Een website publiceren . . . . . . . 1.6 Programma’s om websites te maken 1.7 HTML: een stukje geschiedenis . . 1.8 XHTML standaarden . . . . . . . . 1.9 Webpagina’s valideren . . . . . . . . 1.10 Inhoud en opmaak . . . . . . . . . .

. . . . . . . . . .

1 1 1 2 2 3 4 4 5 7 8

2 Bouwstenen van XHTML 2.1 Een eerste pagina . . . . . . . . 2.2 Elementen . . . . . . . . . . . . 2.3 Tags . . . . . . . . . . . . . . . . 2.4 Lege elementen . . . . . . . . . 2.5 Inhoud . . . . . . . . . . . . . . . 2.6 Verplichte elementen . . . . . . 2.7 Attributen . . . . . . . . . . . . 2.8 Elementen: block-level of inline

. . . . . . . .

11 11 13 14 14 15 15 16 17

3 Tekstelementen 3.1 Alinea’s . . . . . . . . . . 3.2 Tekst met nadruk . . . . 3.3 Sterke nadruk . . . . . . 3.4 Citaten . . . . . . . . . . 3.5 Programmacode . . . . . 3.6 Wijzigingen . . . . . . . . 3.7 Opsommingen en lijsten . 3.8 Speciale tekens . . . . . . 3.9 White space . . . . . . . . 3.10 Commentaar . . . . . . . 3.11 Kopjes . . . . . . . . . . . 3.12 Regeleinde . . . . . . . . 3.13 Harde spaties . . . . . . . 3.14 Tekst met vaste opmaak

. . . . . . . . . . . . . .

19 19 19 20 20 21 21 22 23 24 25 26 26 27 27

. . . . . . . . . . . . . .

123

4 Hyperlinks 29 4.1 Link naar een bestand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 4.2 Links binnen een pagina . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 5 Tabellen 35 5.1 Eenvoudige tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 5.2 Samenvoegen van cellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 6 Afbeeldingen 6.1 Een afbeelding op een webpagina plaatsen 6.2 Grafische formaten: GIF, JPG, PNG . . . . 6.2.1 Bitmapgrafiek en vectorgrafiek . . 6.2.2 GIF . . . . . . . . . . . . . . . . . . 6.2.3 JPEG/JPG . . . . . . . . . . . . . . 6.2.4 PNG . . . . . . . . . . . . . . . . . .

. . . . . .

39 39 40 40 41 42 42

7 Cascading Style Sheets 7.1 Inleiding . . . . . . . . . . . . . . . . . . . 7.2 CSS syntax . . . . . . . . . . . . . . . . . . 7.2.1 Een stijl definiëren . . . . . . . . . . 7.2.2 Stijlen toepassen . . . . . . . . . . “Inline” stijl . . . . . . . . . . . . . Ingebedde stijlen . . . . . . . . . . Verwijzen naar een stijlblad . . . . 7.2.3 Selectoren . . . . . . . . . . . . . . . 7.3 Meerdere stijlregels voor de zelfde selector 7.4 <div> en <span> elementen . . . . . . . . . 7.5 Het erven van stijleigenschappen . . . . . 7.5.1 Relaties tussen elementen . . . . . 7.5.2 Overerving . . . . . . . . . . . . . .

. . . . . . . . . . . . .

45 45 46 46 47 47 47 49 51 52 53 55 55 56

8 Basisopmaak met CSS 8.1 Kleurgebruik . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.2 Tekstuitlijning . . . . . . . . . . . . . . . . . . . . . . . . . . 8.3 Tekstdecoratie . . . . . . . . . . . . . . . . . . . . . . . . . . 8.4 Inspringen van tekst . . . . . . . . . . . . . . . . . . . . . . 8.5 Lettertype en lettergrootte . . . . . . . . . . . . . . . . . . . 8.5.1 Lettertypes . . . . . . . . . . . . . . . . . . . . . . . . 8.5.2 Letterstijl . . . . . . . . . . . . . . . . . . . . . . . . . 8.5.3 Lettergrootte . . . . . . . . . . . . . . . . . . . . . . . Absolute grootte . . . . . . . . . . . . . . . . . . . . . Relatieve grootte . . . . . . . . . . . . . . . . . . . . . Lengte . . . . . . . . . . . . . . . . . . . . . . . . . . . Percentage . . . . . . . . . . . . . . . . . . . . . . . . Voorbeeld . . . . . . . . . . . . . . . . . . . . . . . . . 8.5.4 Het “gewicht” van een lettertype . . . . . . . . . . . . 8.6 Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.7 Lijsten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.8 Achtergronden . . . . . . . . . . . . . . . . . . . . . . . . . . 8.8.1 Achtergrondkleur . . . . . . . . . . . . . . . . . . . . 8.8.2 Afbeeldingen als achtergrond . . . . . . . . . . . . . . 8.8.3 Achtergrondafbeeldingen herhalen . . . . . . . . . . 8.8.4 Een positie bepalen voor een achtergrondafbeelding .

. . . . . . . . . . . . . . . . . . . . .

59 59 60 61 62 62 62 63 64 64 64 64 64 64 65 66 67 69 69 69 70 71

124

HFI IB BI

8.9 Tabellen . . . . . . . . . . . . . . . . . . . . 8.9.1 Tabelranden . . . . . . . . . . . . . 8.9.2 Samenvallende tabelranden . . . . 8.9.3 Breedte en hoogte . . . . . . . . . . 8.9.4 Uitlijning van tekst binnen de tabel 8.9.5 Padding . . . . . . . . . . . . . . . .

. . . . . .

73 73 73 74 74 75

. . . . . . . . . .

77 77 78 80 80 80 81 81 82 82 83

10 CSS: gevorderde onderwerpen 10.1 Nesten van selectoren . . . . . . . . . . . . . . . . . . Voorbeeld1 . . . . . . . . . . . . . . . . . . . . Voorbeeld 2 . . . . . . . . . . . . . . . . . . . . 10.2 De eigenschap “display” . . . . . . . . . . . . . . . . . 10.3 Zwevende elementen . . . . . . . . . . . . . . . . . . 10.3.1 Begrip . . . . . . . . . . . . . . . . . . . . . . . 10.3.2 Voorbeeld: zwevende afbeeldingen . . . . . . . 10.3.3 De eigenschap “clear” . . . . . . . . . . . . . . 10.3.4 Voorbeeld: afbeeldingen naast elkaar plaatsen

. . . . . . . . .

85 85 85 86 88 90 90 90 92 93

11 Praktische voorbeelden 11.1 Een tabel met opmaak . . . . . . . . . . . . . . . . . . . . . . 11.2 Een afbeelding met bijschrift . . . . . . . . . . . . . . . . . . Basisstructuur . . . . . . . . . . . . . . . . . . . . . . Afbeelding en bijschrift in een <div> . . . . . . . . . Het blok met afbeelding en bijschrift zwevend maken Marges . . . . . . . . . . . . . . . . . . . . . . . . . . Achtergrondkleur . . . . . . . . . . . . . . . . . . . . Een rand rond het <div> element . . . . . . . . . . . Het bijschrift aanpassen . . . . . . . . . . . . . . . . Extraatje: een schaduweffect . . . . . . . . . . . . . . 11.3 Navigatiebalken . . . . . . . . . . . . . . . . . . . . . . . . . 11.3.1 Een lijst met hyperlinks . . . . . . . . . . . . . . . . . 11.3.2 Verticale navigatiebalken . . . . . . . . . . . . . . . . 11.3.3 Horizontale navigatiebalken . . . . . . . . . . . . . . Een horizontale navigatiebalk met inline-elementen Een horizontale menubalk met zwevende elementen 11.4 Een eenvoudige twee-kolommen layout . . . . . . . . . . . . 11.4.1 Basis . . . . . . . . . . . . . . . . . . . . . . . . . . . 11.4.2 Aanpassen van de elementen <body> en <html> . . . 11.4.3 De verschillende zones vorm geven . . . . . . . . . . 11.4.4 De kolommen naast elkaar plaatsen . . . . . . . . . . 11.4.5 De voettekst . . . . . . . . . . . . . . . . . . . . . . . 11.4.6 De achtergrondkleur aanpassen . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . .

95 95 102 102 103 103 104 105 105 106 107 109 109 110 111 111 112 114 114 115 116 118 118 119

9 Het CSS Box model 9.1 Inleiding . . . . . . . . . . . . . . . 9.2 Breedte en hoogte van een element 9.3 Randen . . . . . . . . . . . . . . . . 9.3.1 Randstijl . . . . . . . . . . . 9.3.2 Breedte van de rand . . . . . 9.3.3 Kleur van de rand . . . . . . 9.3.4 Verschillende randen . . . . 9.3.5 De eigenschap “border” . . . 9.4 Marges . . . . . . . . . . . . . . . . 9.5 Padding . . . . . . . . . . . . . . . .

Webdesign met XHTML en CSS

. . . . . . . . . .

125

11.4.7 Een horizontale navigatiebalk maken . . . . . . . . . . . . . . . . . . . . . . 120 11.4.8 Marges en vulruimte aanpassen . . . . . . . . . . . . . . . . . . . . . . . . . 121

126

HFI IB BI