februari

1

Gemanipuleerde tekst Sluittag

Begintag

schoolvoorbeeld van een <em>efemeer Hoekige haakjes

Voorwaartse slash

Figuur 1.1 Dit is een typisch (X)HTML-element. De begin- en sluittag omsluiten de tekst die gemanipuleerd moet worden. In dit geval wordt het woord efemeer benadrukt, wat in de meeste gevallen betekent dat het cursief zal worden weergegeven.

Een spatie en een voorwaartse slash

Figuur 1.2 Lege elementen, zoals img, omsluiten geen tekstinhoud. Ze hebben een enkele tag die zowel dient om het element te openen als het te sluiten. In HTML is de laatste slash optioneel. In XHTML is deze slash verplicht.

colspan is een attribuut van id

februari De waarde van het attribuut colspan

Figuur 1.3 Hier ziet u een td-element (voor een tabelcel) met een eenvoudig attribuut-waardepaar. Attributen bevinden zich altijd binnen een begintag van een element. De waarde van een attribuut moet altijd tussen dubbele aanhalingstekens staan.

Hoofdstuk 1 Bouwstenen van webpagina’s src is een attribuut van img Waarde van

src

width is eveneens een attribuut van img Waarde van width

Figuur 1.4 Sommige elementen, zoals img in dit voorbeeld, kunnen een of meer attributen met elk een eigen waarde hebben. De volgorde is niet belangrijk. Scheid elk attribuut-waardepaar door een spatie van het volgende paar.

Vooraf gedefinieerde waarde

Figuur 1.5 Sommige attributen accepteren uitsluitend specifieke waarden. Zo kan het attribuut media van het element link onder andere worden ingesteld op screen, handheld of print, maar niet op een getal.

Ik blijf me voortdurend verbazen over de wondermooie, delicate Blue Flax die op een of andere manier in mijn tuin bloeien. Ze staan er elke morgen fleurig bij, maar toch is er ‘s middags geen enkele bloem over. Ze zijn een schoolvoorbeeld van een <em>efemeer verschijnsel.

© 2002 by Blue Flax Society.

Figuur 1.6 De blokelementen, hier vet weergegeven, zijn div en p. De inline-elementen zijn img en em.

Hoofdstuk 1 Bouwstenen van webpagina’s

Figuur 1.7 Elk element van blokniveau begint op een nieuwe regel. De inline-elementen (in dit geval de afbeelding en de cursieve tekst) gaan verder op de regel die werd begonnen door het blokelement waarvan ze deel uitmaken.

... een <em>efemeer

... by Blue Flax Society

Figuur 1.8 Het element div is de ouder van de elementen img en p. Omgekeerd zijn de elementen img en p kinderen (en afstammelingen) van het div-element. Het eerst p-element is de ouder van de em-tag. De em-tag is een kind van de eerste p en ook een afstammeling (maar niet een kind) van de div.

Correct (geen overlappende regels)

... een <em>efemeer

... een <em>efemeer
Onjuist (de paren tags liggen over elkaar heen)

Figuur 1.9 Elementen moeten op de juiste manier worden genest. Als u eerst p en vervolgens em opent, moet u eerst em sluiten voordat u p sluit.




Figuur 1.10 De tekstinhoud is in wezen alles wat geen markeertaal is. U ziet dat de zinnen door een lege regel (een extra Return-teken) van elkaar worden gescheiden. Verder heb ik de speciale lettertekenverwijzing © gebruikt voor het copyrightsymbool om er zeker van te zijn dat dit teken netjes wordt weergegeven, ongeacht hoe ik het document opsla.

Figuur 1.11 U ziet dat de extra Returns worden genegeerd wanneer het document wordt bekeken in een webbrowser en dat de lettertekenverwijzing door het bijbehorende symbool © is vervangen.


Tijgerlelies lijken op hun neefjes in het dierenrijk. Ze verbergen zich in het gras en springen kleurig te voorschijn op het moment dat je dat het minst verwacht.

Ze zijn net zo alomtegenwoordig als de tijger zeldzaam is. Je vindt ze langs zo veel wegen dat ze wel <em>Ditch Lilies worden genoemd.


Figuur 1.12 In dit (X)HTML-document wordt verwezen naar een bestand met de naam tigerlily.jpg. Dit bestand wordt door de browser geopend en geladen wanneer de rest van de pagina wordt geladen.

Figuur 1.13 Naar afbeeldingen en andere niet-tekstinhoud wordt vanuit een webpagina verwezen, waarna de browser ze tezamen met de tekst weergeeft.


Bestandsnaam geheel in kleine letters

Bestandsextensie

tweede_kamer.html Tweede_Kamer.html Bestandsnamen met hoofdletters zijn lastig om te typen en zorgen voor problemen

Figuur 1.14 Gebruik voor al uw bestandsnamen uitsluitend kleine letters en voeg daar consistent de extensie .htm of .html aan toe. Door hoofdletters en kleine letters te vermengen maakt u het de bezoekers van uw site lastiger om het juiste adres in te typen en uw pagina te vinden.

http://www.uwsite.nl/WebPaginas/ POLITIEK/Tweede_Kamer.html Figuur 1.15 Geef mappen eveneens namen die uitsluitend uit kleine letters bestaan. Consistentie is het devies. Als u geen hoofdletters gebruikt, verspillen uw bezoekers (en u) geen tijd aan piekeren over dingen als “was het nu met een hoofdletter T of met een kleine t?’.

Naam van de server Schema

Pad

“http://www.site.nl/liz/bestand.html˝ Bestandsnaam

Figuur 1.16 Uw elementaire URL bevat een schema, een servernaam, een pad en een bestandsnaam.


Voorwaartse slash

“http://www.site.nl/liz/˝ Figuur 1.17 Een URL dat op een voorwaartse slash eindigt waarna geen bestandsnaam volgt, wijst naar het standaardbestand in de laatstgenoemde directory (in dit geval liz). Veelgebruikte standaardbestandsnamen zijn index.html en default.htm.

Servernaam Schema

Pad

“ftp://ftp.site.nl/pub/prog.exe˝ Bestandsnaam

Figuur 1.18 Wanneer de gebruiker op deze URL klikt, begint de browser een FTP-bestandsoverdracht van het bestand prog. exe.

Schema

E-mailadres

“mailto:[email protected]˝ Figuur 1.19 Een URL voor een e-mailadres bevat het schema mailto, gevolgd door een dubbele punt (maar geen voorwaartse slashes) en vervolgens het e-mailadres zelf.

Stationsletter Schema

“file:///˝c| /pad/home.htm˝ Verticale balk Pad en bestandsnaam

Figuur 1.20 Als u naar een bestand op een lokale Windowsmachine wilt verwijzen, gebruikt u het schema file (methodiek van verwijzen naar een bestand). Op een Macintosh gebruikt u file:///Harddisk/pad/bestandsnaam (zonder verticale balk te gebruiken). Soms gaat dit onder Windows ook goed.


server

map/dir

=web

map/dir

=index.html

=info

=data.html

=jebenthier.html =images

map/dir

server

map/dir

=image.gif

=www.remote.nl

=pub

map/dir

=homepg.html

=bcn

=info.html

Figuur 1.21 Het document dat de URL’s bevat (youarehere. html in dit geval) is het referentiepunt voor relatieve URL’s. Met andere woorden, relatieve URL’s zijn relatief ten opzichte van de locatie van dat bestand op de server. Absolute URL’s malen er niet om waar ze zich bevinden.

Binnen de huidige map bevindt zich een bestand met de naam index.html

“index.html˝ Figuur 1.22 De relatieve URL voor een bestand dat zich in dezelfde map (figuur 1.21) bevindt als het bestand dat de link bevat, is gelijk aan de bestandsnaam plus de bestandsextensie.


Binnen de huidige map bevindt zich een map die images heet ...

“images/image.gif˝ die een bestand bevat ...

dat image.gif heet

Figuur 1.23 Bij een bestand dat zich in een map binnen de huidige map bevindt (figuur 1.21), voegt u de naam van de map en een voorwaartse slash vóór de bestandsnaam toe.

De map die de huidige map bevat ... ... bevat ... ... een map die info heet ...

“.../info/data.html˝ dat data.html heet en die een bestand bevat ...

Figuur 1.24 Zoals u in figuur 1.21 kunt zien, bevindt dit bestand zich in een map binnen een map die de huidige map bevat (een hele mondvol!). In dat geval typt u twee punten en een slash om een niveau omhoog te gaan, gevolgd door een voorwaartse slash en de bestandsnaam.


© 2002 by Blue Flax Society. Figuur 1.25 In HTML hebben sommige elementen, bijvoorbeeld p, geen sluittag nodig. Erna volgende p-tags sluiten impliciet de vorige p’s.


Figuur 1.26 In XHTML moeten alle elementen sluittags hebben.

Figuur 1.27 In HTML hebben lege elementen geen afsluitende slash, hoewel browsers er niet over zullen klagen wanneer dat wel het geval is.

Figuur 1.28 In XHTML moeten zelfs lege elementen een sluittag hebben. Hoewel een onafhankelijke sluittag voor een leeg element, bijvoorbeeld , technisch correct zou zijn, verzekert de toevoeging van een spatie en / aan de enkelvoudige img-tag de compatibiliteit met browsers die niet dol zijn op XHTML.

10


Figuur 1.29 In HTML moeten attribuutwaarden alleen tussen dubbele aanhalingstekens worden geplaatst als ze spaties of andere speciale lettertekens (alles, behalve letters, cijfers, koppeltekens, punten, underscores of dubbele punten) bevatten.

Figuur 1.30 In XHTML moeten alle waarden van attributen altijd tussen dubbele aanhalingstekens worden geplaatst.

Figuur 1.31 In HTML maakt het geen verschil of u de namen van elementen of attributen of vooraf gedefinieerde waarden in hoofdletters of in kleine letters typt.

Figuur 1.32 In XHTML moeten alle namen van elementen en attributen en vooraf gedefinieerde waarden in kleine letters worden geschreven.

Figuur 1.33 In HTML verlangen sommige attributen, zoals het hier getoonde noshade, helemaal geen waarde.

Figuur 1.34 In XHTML moeten attribuutwaarden expliciet worden gedeclareerd. Bij de attributen die in HTML geen waarde hebben, gebruikt u gewoon de naam van het attribuut als waarde.

11

Hoofdstuk 1 Bouwstenen van webpagina’s Figuur 1.35 Hier is de officiële DOCTYPE voor transitional XHTML-documenten. Op mijn website kunt u een lijst met DOCTYPE-declaraties vinden. (Het is uiterst omslachtig om ze met de hand in te typen.)

body {background:url(bg_flax.jpg) bottom right norepeat} p {font-family: “Trebuchet MS”, “Helvetica”, sans-serif; font-weight: bold; color:3366cc; } img {float:left;margin-right:10px} Figuur 1.36 Sommige browsers, met name Internet Explorer, vinden het niet erg als u het beginteken # vóór een hexadecimale kleur weglaat. Hoewel u misschien denkt dat dat aardig van ze is, biedt het webontwikkelaars de gelegenheid om slechte code te schrijven die in andere browsers fout loopt.

Figuur 1.37 Als u de DOCTYPE weglaat, handhaaft Internet Explorer de niet-standaard quirkmodus en wordt de tekst in een blauwe kleur weergegeven. Maar dat is de bedoeling helemaal niet!

12


Figuur 1.38 Als u de DOCTYPE gebruikt, neemt Internet Explorer aan dat u de standaard wilt volgen; de foutieve kleurwaarde wordt genegeerd en de tekst wordt in zwart afgedrukt.

Figuur 1.39 Zodra het stijlblad van het ontbrekende #-symbool is voorzien, leidt het gebruik van de DOCTYPE wederom tot blauwe tekst (op de juiste manier en in de standaardmodus).

Figuur 1.37 Als u de DOCTYPE weglaat, handhaaft Internet Explorer de niet-standaard quirkmodus en wordt de tekst in een blauwe kleur weergegeven. Maar dat is de bedoeling helemaal niet!

13


Figuur 1.38 Als u de DOCTYPE gebruikt, neemt Internet Explorer aan dat u de standaard wilt volgen; de foutieve kleurwaarde wordt genegeerd en de tekst wordt in zwart afgedrukt.

Figuur 1.39 Zodra het stijlblad van het ontbrekende #-symbool is voorzien, leidt het gebruik van de DOCTYPE wederom tot blauwe tekst (op de juiste manier en in de standaardmodus).

14


Figuur 1.40 Zonder opmaakstijlen wordt de tekst onder de afbeelding weergegeven in het standaardlettertype en in de standaardkleur. De meeste huidige versies van de belangrijkste browsers (van boven naar beneden: Internet Explorer 7, Firefox 1.5, Opera 8.54 en Netscape 8.1.2) hebben sterk op elkaar lijkende standaardinstellingen. Safari wijkt iets af omdat het op een Mac draait, maar lijkt sterk op de Firefox en Opera voor Macintosh.

15

2

home

pers

intern

nu

nieuws

archief

banen

home

v&a

faq

tech

intro Foto 1

einde Foto 3

Foto 2

Figuur 2.1 Door een schets te maken van de site en na te denken over wat er op de site moet komen te staan, kunt u gemakkelijker beslissen welke structuur u voor uw site nodig hebt: een gecentraliseerd hiërarchisch model (boven), een kringvormig model dat de bezoeker van de ene naar de andere pagina leidt (onder) of een ander systeem.

Hoofdstuk 2 Werken met webpaginabestanden

Figuur 2.2 Open een teksteditor of tekstverwerkingsprogramma en kies in het menu Bestand de menuoptie Nieuw. (Links ziet u TextEdit voor Macintosh en rechts WordPad voor Windows.)

Figuur 2.3 Op een Macintosh-computer kunt u de (X)HTMLcode van uw pagina in TextEdit schrijven.

Figuur 2.4 Dit is WordPad, een van de programma’s waarmee Windows-gebruikers (X)HTML-pagina’s kunnen maken.

Hoofdstuk 2 Werken met webpaginabestanden Figuur 2.5 Een Excel-werkblad heeft de extensie .xlsx en wordt aangeduid door het Excel-pictogram (boven). Door op dit pictogram te dubbelklikken opent u het bestand in Excel. Een webpaginabestand heeft de extensie .htm of .html, ongeacht met welke tekstverwerker of teksteditor dat bestand werd gemaakt, en heeft het pictogram van de standaardbrowser. Als u op zo’n pictogram dubbelklikt, wordt het bestand in de standaardbrowser (en niet in de tekstverwerker) geopend.

Figuur 2.6 Kies in het menu Bestand van uw tekstverwerker of teksteditor de menuoptie Opslaan als.

Figuur 2.7 Geef het bestand in WordPad voor Windows de extensie .htm of .html, kies Tekstdocument in de vervolgkeuzelijst Bestand opslaan als en klik op Opslaan.

Figuur 2.8 Geef uw bestand in TextEdit voor Macintosh een naam, kies een locatie en klik op Opslaan.


Figuur 2.9 Kies op een Windows-computer Extra > Mapopties om het dialoogvenster Mapopties te openen. Plaats het tabblad Weergave op de voorgrond en blader naar beneden totdat u het item Extensies voor bekende bestandstypen verbergen ziet. Het bijbehorende selectievakje moet leeg zijn als u de extensie van een bestand (bijvoorbeeld .html) op het bureaublad wilt kunnen zien.

Figuur 2.10 In veel tekstverwerkers, zoals de uitstekende BBEdit (boven) kunt u de codering voor uw bestand kiezen, zodat u symbolen en lettertekens uit verschillende talen in hetzelfde document kunt opslaan. Vanaf versie 7 slaat BBEdit uw bestand automatisch op met dezelfde codering als die u verderop in uw document declareert. Een heel handige functie!


Figuur 2.11 Kies in Word niet het item Webpagina in de vervolgkeuzelijst Bestand opslaan als! En kies evenmin Opslaan als webpagina in het menu Bestand! Deze menuopties zijn bedoeld om doorsnee Word-documenten naar webpagina’s te converteren en sturen met de hand gecodeerde pagina’s in de war.

Figuur 2.12 Kies in plaats daarvan het item Tekstbestand (*.txt) in de vervolgkeuzelijst Bestand opslaan als ...

Figuur 2.13 ... en typ vervolgens de extensie .html met de hand. Klik ten slotte op Opslaan.

Figuur 2.14 Sla het bestand op als index.html of default.htm om het bestand te benoemen tot de standaardpagina die in die directory geopend moet worden.


Figuur 2.15 Wanneer de bezoeker het pad naar de directory typt, maar de bestandsnaam zelf weglaat, wordt het bestand met de standaardnaam gebruikt.

Figuur 2.16 Sommige tekstverwerkers in Windows zien (X)HTML-bestanden niet automatisch. Kies zo nodig Alle documenten om bestanden met allerlei extensies te laten weergeven.

Figuur 2.17 Zodra alle bestanden worden weergegeven, kunt u op het gewenste (X)HTML-bestand klikken en daarna op Openen klikken.


Figuur 2.18 In Windows kunt u ook met de rechtermuisknop op het documentpictogram klikken en vervolgens in het snelmenu de menuoptie Bewerken of Openen met kiezen. Op een Mac klikt u met ingedrukte Control-knop op het pictogram, waarna u in het pop-upmenu de menuoptie Openen met kiest en vervolgens de gewenste teksteditor selecteert.

Figuur 2.19 Kies op een Mac Nieuwe map en geef de map een naam. Maak vervolgens voor elke sectie van uw site een aparte map.

Figuur 2.20 In Windows kiest u Bestand > Nieuw > Map op het bureaublad of in Explorer.


Figuur 2.21 U kunt desgewenst submappen in de map maken.

Figuur 2.22 Kies in het menu Bestand van de gewenste browser (Firefox in dit voorbeeld) de menuoptie Bestand openen. In Internet Explorer kiest u Bestand > Openen. In de Explorer voor de Mac kiest u Bestand > Bestand openen.

Figuur 2.23 In Explorer voor Windows krijgt u een dialoogvenster te zien met de vraag of u het pad met de hand wilt intypen. Als u dat niet wilt – en waarom zou u? – klik u op de knop Bladeren.

Hoofdstuk 2 Werken met webpaginabestanden Figuur 2.24 Selecteer het bestand dat u wilt openen en klik op de knop Openen (hier niet zichtbaar).

Figuur 2.25 De pagina wordt in de browser getoond. Bekijk hem goed en ga na of alles op de gewenste manier wordt weergegeven.

Figuur 2.26 Alle browsers bieden menuopties om de (X)HTML-code van een pagina te bekijken. De naam van de optie varieert van Paginabron (in Firefox) tot Broncode of kortweg Bron.


Figuur 2.27 In de meeste browsers kunt u ook met de rechtermuisknop (op de Mac met ingedrukte Control-toets) klikken en in het snelmenu de menuoptie Bron (bekijken) kiezen. Hier ziet u Internet Explorer voor Windows.

Figuur 2.28 Sommige browsers tonen de code in een gespecificeerde teksteditor. In andere browsers kunt u kiezen tussen het standaardvenster in de browser (hier weergegeven) of in de teksteditor van uw keuze.

10

3

Figuur 3.1 Dit is de DOCTYPE voor een transitional HTMLdocument plus de begin- en sluittags. Omdat het een vaste, maar langdradige formule is, raad ik aan om het van het ene nar het andere document te kopiëren in plaats van te proberen dit abracadabra steeds weer in te typen.

Figuur 3.2 Dit is de DOCTYPE voor een transitional XHTMLdocument, gevolgd door de begintag html en de eindtag html.

Figuur 3.3 De elementen head en body helpen uw (X)HTMLdocumenten te structureren.

Hoofdstuk 3 De elementaire structuur van (X)HTML

Figuur 3.4 Ik heb mijn bestanden opgeslagen in Unicode met de UTF8-codering. (Dit is MS Word.) Zie hoofdstuk 21 voor meer details over bestanden opslaan met een andere codering dan de standaardcodering van uw systeem.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Figuur 3.5 Wanneer de browser van de bezoeker op deze meta-tag stuit, weet de browser dat de pagina met UTF-8 werd gecodeerd en zal de pagina correct worden weergegeven. Van belang is dat de codering die u in de meta-tag declareert, overeenkomt met de codering waarmee u het bestand daadwerkelijk hebt opgeslagen.

Hoofdstuk 3 De elementaire structuur van (X)HTML <meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Antoni Gaudí - Inleiding Figuur 3.6 Het element title dient u in de kopsectie te plaatsen. Het is een verplicht element.

Figuur 3.7 De titel van een webpagina wordt in de titelbalk van het venster getoond.

Figuur 3.8 Nog belangrijker is het dat de titel door Google en andere zoekmachines wordt gebruikt om uw pagina bij zoekresultaten te beschrijven. Verder is het een van de belangrijkste factoren die de relevantie en de ranking van de pagina in de zoekresultaten bepaalt.

Figuur 3.9 De titel verschijnt ook in de lijsten Geschiedenis (hier weergegeven), Favorieten en Bladwijzers van uw bezoeker.

Hoofdstuk 3 De elementaire structuur van (X)HTML <meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Antoni Gaudí - Inleiding
Antoni Gaudí

La Casa Milà

La Sagrada Família

Figuur 3.10 Door koppen te gebruiken kunt u een document structuur geven, zoals bij een overzicht.

Figuur 3.11 De standaardweergave van een kop van niveau 1 is vaak 24 pixels, Times New Roman, vet.

Antoni Gaudí

Veel toeristen bezoeken Barcelona om Antoni Gaudí’s ongelooflijke gebouwen te zien.

Barcelona vierde de 150e verjaardag van Gaudi’s geboortedag in 2002.

La Casa Milà

Gaudí’s werk was echt voor gebruik bedoeld. La Casa Milà is een flatgebouw waarin echte mensen wonen.

La Sagrada Família

De nog altijd niet voltooide kerk van de Heilige Familie (Sagrada Familia) is het meest bezochte bouwwerk van Barcelona.
Figuur 3.12 Zet elke alinea tussen een begintag
en een eindtag
. Als u alinea’s niet met een sluittag afsluit (wat in HTML volkomen legaal is, maar in XHTML niet wordt getolereerd), zullen opmaakstijlen niet correct worden toegepast.

Figuur 3.13 De hoeveelheid ruimte tussen de alinea’s varieert proportioneel met de grootte van de tekst.

Antoni Gaudí



La Casa Milà


La Sagrada Família

Figuur 3.14 Voeg een id-attribuut toe aan een uniek element als u dit later voor opmaak of links wilt gebruiken. Voeg een class-attribuut toe aan een groep elementen om ze later allemaal tegelijk in één klap te kunnen opmaken.

Figuur 3.15 De attributen id en class wijzigen op zich niets aan het uiterlijk van een element. Ze moeten met CSS-opmaak worden gecombineerd (zie de hoofdstukken 10 en 11).


Antoni Gaudí



La Casa Milà


La Sagrada Família


Figuur 3.16 Er is één grote omvattende sectie (die met de niveau-1 kop begint en op de voorlaatste regel eindigt) en twee binnensecties (die de niveau-2 koppen en hun alinea’s omringen).

Figuur 3.17 Meestal ziet u het effect van divs pas wanneer u opmaakstijlen toevoegt (zie pagina 127). Dan pas gaan ze schitteren. U kunt deze pagina met opmaakstijlen op mijn website bekijken (zie pagina 26).


Antoni Gaudí



La Casa Milà

Gaudí’s werk was echt voor gebruik bedoeld. La Casa Milà is een flatgebouw waarin <span class=”emph”>echte mensen wonen.

La Sagrada Família

De nog altijd niet voltooide kerk van de Heilige Familie (Sagrada Familia) is het <span class=”emph”>meest bezochte bouwwerk van Barcelona.

Figuur 3.18 De span-tag wordt gebruikt om een heleboel inline-inhoud te markeren. Daarna kunt u de gemarkeerde inhoud op elke gewenste manier opmaken (zie de hoofdstukken 10 en 11).

Figuur 3.19 Ook het span-element geeft uw document structuur. U kunt het effect ervan pas waarnemen wanneer u opmaakstijlen toepast (zie pagina 127). U kunt deze pagina met opmaakstijlen bekijken op mijn website (zie pagina 26).

Antoni Gaudí
La Casa Milà
La Sagrada Família

Antoni Gaudí


Barcelona vierde de 150e verjaardag van Figuur 3.20 Ik heb aan de bovenzijde van de pagina een nieuwe sectie gemaakt die als inhoudsopgave kan dienen. Dat worden drie regels (dankzij de br-tag) met een minimumhoeveelheid ruimte ertussen.

Antoni Gaudí
La Casa Milà
La Sagrada Família

Antoni Gaudí


Barcelona vierde de 150e verjaardag van Figuur 3.21 Onthoud dat Return-tekens in uw code altijd worden genegeerd. Deze code is equivalent aan de code in figuur 3.20, maar beter leesbaar.

Figuur 3.22 Het element br plaatst daaropvolgende elementen op een nieuwe regel.

Antoni Gaudí
La Casa Milà
La Sagrada Família

Antoni Gaudí


Figuur 3.23 Commentaar is een uitstekende manier om uw tekst van geheugensteuntjes te voorzien. U kunt commentaar ook gebruiken om revisies bij te houden.

Figuur 3.24 Commentaarregels zijn onzichtbaar (maar worden wel weergegeven wanneer u de broncode opvraagt (zie pagina 53).

10

Antoni Gaudí
La Casa Milà
La Sagrada Família

Antoni Gaudí



La Casa Milà

Gaudí’s werk was echt voor gebruik bedoeld. La Casa Milà is een flatgebouw waarin <span class=”emph”>echte mensen wonen.

Figuur 3.25 Aan elk gewenst element mag u een title toevoegen.

Figuur 3.26 Wanneer uw bezoekers naar het gelabelde element wijzen, wordt de titel zichtbaar.

11

4

Het nachtleven in Barcelona

Barcelona is een fantastische stad om te wonen. De mensen daar zijn echt sociaal ingesteld. Stel je voor dat het belangrijker is om met je vrienden uit te gaan dan promotie te krijgen. Zelfs wanneer je, zucht, de dertig bent gepasseerd. Naar verluidt zijn er meer bars in Barcelona dan in de rest van de Europese Gemeenschap bij elkaar.
Figuur 4.1 Vette of cursieve opmaak mag overal in een (X)HTML-document worden gebruikt, behalve in de title.


Barcelona is een fantastische stad om te wonen. De mensen daar zijn echt <strong>sociaal ingesteld. Stel je voor dat het belangrijker is om met je vrienden uit te gaan dan promotie te krijgen. Zelfs wanneer je, zucht, de <em>dertig bent gepasseerd. Naar verluidt zijn er meer bars in Barcelona dan in de rest van de Europese Gemeenschap <em>bij elkaar
Figuur 4.2 Desgewenst kunt u de logische tags em en strong gebruiken om tegelijkertijd structuur en opmaak toe te voegen.

Figuur 4.3 Vette of cursieve opmaak is de eenvoudigste en doelmatigste manier om een tekstfragment opvallender te maken.

Hoofdstuk 4 Elementaire (X)HTML-opmaak

Barcelona is een fantastische stad om te wonen. De mensen daar zijn echt <strong>sociaal ingesteld. Stel je voor dat het belangrijker is om met je vrienden uit te gaan dan promotie te krijgen. Zelfs wanneer je, zucht, de <em>dertig bent gepasseerd. Naar verluidt zijn er meer bars in Barcelona dan in de rest van de Europese Gemeenschap <em>bij elkaar

Begrijp me niet verkeerd, want ik bedoel niet dat iedereen altijd dronken wordt--de bars zijn om met elkaar te praten of een kop koffie te drinken (expresso uiteraard).

<small>De mening op deze pagina is louter mijn persoonlijke mening.
Figuur 4.4 De tags big en small bieden een snelle en gemakkelijke manier om tekst opvallender te maken.

Figuur 4.5 De elementen big en small worden op grote schaal gebruikt. In de meeste browsers brengen ze een identiek effect teweeg. (Dit is Internet Explorer 7 voor Windows.)

Perl-leerboek, les 1

Op een UNIX-server dient elk Perl-script te beginnen met een regel die de patch naar de Perl-interpreter op uw server beschrijft. Die regel kan er bijvoorbeeld als volgt uitzien:

#!/usr/local/bin/perl
Figuur 4.6 Het element code maakt zijn inhoud niet alleen op in een monotype lettertype, maar geeft ook aan dat de inhoud computercode is. Het is een logische tag.

Figuur 4.7 Monotype tekst is geknipt voor URL’s en computercode.

Figuur 4.8 Tekst die wordt omsloten door de tags code, kbd, samp of tt, wordt weergegeven in het lettertype dat uw bezoekers in hun browsers voor monotype tekst hebben gekozen. U kunt de lettertypenlijst van Internet Explorer 7 (hier weergegeven) opvragen door Extra > Internetopties te kiezen en vervolgens op het tabblad Algemeen op de knop Lettertypen te klikken.

Dit is het eerste deel van het script van Cat en Otter Bistro (zie het hoofdstuk WAP/WML), waarin de variabelen worden gedeclareerd en de variabele $number wordt gecheckt om er zeker van te zijn dat het echt een getal is: <pre>my $number = param(‘number”); my $smoke = param(‘smoke”); my $dinner_index = param(‘dinner_index”); $number =~ /([0-9]*)/ ; $number = $1; Figuur 4.9 Het element pre is ideaal voor tekst die belangrijke spaties en regeleinden bevat, zoals het Perl CGI-codefragment dat in deze figuur wordt weergegeven.

Figuur 4.10 U ziet dat de regeleinden, met inbegrip van de extra Return tussen de derde en vierde coderegel, zijn gehandhaafd.

Soms word ik zo down dat niets me meer kan schelen. Maar dan lees ik zoiets als dit en raak ik onmiddellijk weer geïnspireerd:

Het is niet moeilijk om erachter te komen wat goed is voor kinderen, maar in dit politieke klimaat dat steeds kindonvriendelijker wordt, is het soms moeilijk om eraan te blijven denken dat je gewoon aan de slag te gaan en het moet doen. ... Bijvoorbeeld besluiten om aandacht aan te besteden aan het feit, in plaats van het te negeren, dat een buurvrouw de zorg voor haar kinderen niet aan kan, en haar aanbieden om twee keer per week op de kinderen te passen. Dat is niet tussenbeide komen. Tussen een voetballer en een bal gaan staan, dat is tussenbeide komen. Maar de bal is een onbezield iets.

Dit citaat is uit Barbara Kingsolver’s briljante verzameling essays, High Tide in Tucson (1995, HarperCollins)
. Figuur 4.11 Een blokcitaat mag zo kort of lang zijn als u wilt. U kunt zo’n citaat zelfs onderverdelen in diverse alinea’s door zo nodig p-tags toe te voegen.

Figuur 4.12 Blokcitaten springen meestal zowel links als rechts in. Het attribuut cite wordt nog niet herkend door de browsers die ik ben tegengekomen.

Hoofdstuk 4 Elementaire (X)HTML-opmaak [knip]
En toen zei ze Heb je High Tide in Tucson van Kingsolver gelezen? Dat is een inspirerend boek.

Ze probeerde het opnieuw, ditmaal in het Frans: Avez-vous lu le livre High Tide in Tucson de Kingsolver? C”est inspirational.
Figuur 4.13 Het attribuut lang in de html-tag is naar verluidt een standaard voor de andere tags. In mijn tests heeft het geen invloed op het q-element.

Figuur 4.14 Firefox voegt gekrulde dubbele aanhalingstekens rond q-elementen toe, en enkelvoudige gekrulde aanhalingstekens rond geneste q-elementen.

Beroemde Catalanen

Toen ik op school zat, speelde ik cello. Er was daar een docent die me altijd vroeg of ik wist wie “Pablo Casals” was. Ik wist dat niet, hoewel ik ooit naar een concert van Rostropovitch was geweest. In feite was Pablo Casals” echte naam Pau Casals, waarbij Pau het Catalaanse equivalent is van Pablo<sup>1.

Behalve dat hij een uitstekend cellist was, is Pau Casals in zijn land bekend om zijn hartstochtelijke rede in de Verenigde Naties tegen kernwapens,<sup>2 die hij begon met: “Ik ben een Catalaan. Catalonië is een onderdrukte natie.”

<sup>1vgl. Paul in het Nederlands.
<sup>2In 1963, meen ik.
Figuur 4.15 De begintag sup of sub gaat vooraf aan de te manipuleren tekst.

Figuur 4.16 Helaas verstoren sup en sub de regelafstand. U ziet dat er meer ruimte is tussen regel 6 en regel 7 van de eerste alinea en tussen regel 4 en 5 van de tweede alinea.

Ik beloof dat ik al mijn huiswerk zal doen en al mijn taakjes, inclusief de kattenbak schoonmaken, en dat ik niet meer dan <del>drie en een half uu<del>r televisie zal kijken.

Handtekening,
Figuur 4.17 U moet erop letten dat de bijbehorende leestekens ook door de elementen ins en del worden omsloten.

Figuur 4.18 De wijzigingen zijn duidelijk zichtbaar.


LBJ nam de IRT naar 4th Street USA.
Wat zag hij, toen hij daar arriveerde?
De toekomst van Amerika, onder de invloed van LSD .

--Hair, de musical, 1967

Of wil je misschien over een minder politiek onderwerp praten, bijvoorbeeld over laser , radar of scuba ?
Figuur 4.19 Dit lijkt een heleboel code voor slechts een paar woorden. Toch kan het erg handig zijn om onmiddellijke informatie over een afkorting te krijgen, in elk geval de eerste keer dat die afkorting wordt gebruikt.

Figuur 4.20 Firefox voor Windows en Macintosh laat afkortingen en acroniemen opvallen door een gestippelde onderstreping. Als de bezoeker de muisaanwijzer op zo’n onderstreepte term plaatst, wordt de inhoud van het title-attribuut van het element als scherminfo weergegeven.


Figuur 4.21 Explorer toont de titel van de afkortingen in de vorm van een scherminfo, maar laat de afkorting zelf niet opvallen tussen de omringende tekst.

De kern van de aarde

In het middelpunt van de aarde, meer dan 6000 kilometer van de oppervlakte, is de temperatuur zo’n 6500 graden Kelvin.

Niet slecht voor zo’n planeetje.
Figuur 4.22 Het element center fungeert als een div-element met het align-attribuut ingesteld op center.

Figuur 4.23 Het element center wordt nog steeds uitstekend ondersteund.

10

5 Figuur 5.1 Logo’s en andere door de computer gegenereerde afbeeldingen of illustraties met weinig kleur kunt u efficiënt comprimeren met LZW. Daarom worden dergelijke afbeeldingen meestal opgeslagen in GIF-formaat.

Figuur 5.2 Kleurenfoto’s en andere afbeeldingen met kleurverloop of afbeeldingen met meer dan 256 kleuren dienen in het JPEG-formaat opgeslagen te worden.

Hoofdstuk 5 Afbeeldingen

Figuur 5.3 Deze specifieke afbeelding is 1704 pixels breed en heeft in Photoshop een uitvoerresolutie van 284 ppi, waardoor de afmetingen 15 x 24 centimeter bedragen. In Firefox (hier afgebeeld) wordt de resolutie bepaald door het beeldscherm van de bezoeker (ongeveer 86 ppi), wat betekent dat deze illustratie 50 centimeter breed is!

Figuur 5.4 De afmetingen van deze afbeelding zijn in Photoshop eveneens 15 x 24 centimeter, maar de resolutie is 50 ppi. Ook nu zijn deze relatieve maten niet relevant. Wat telt, is dat de afbeelding 300 pixels breed is, oftewel ongeveer de helft van een doorsnee browservenster.


Figuur 5.5 Een gedeelte van het dialoogvenster Opslaan voor web met de oorspronkelijke afbeelding (linksboven) en drie compressiemogelijkheden. Deze illustratie bevat veel egale kleuren en tekst die scherp moet blijven. U ziet dat het GIF-formaat (linksonder) de afbeelding het best comprimeert (tot iets meer dan 8 Kb). JPEG van hoge kwaliteit levert een enorm bestand op. Bij gemiddelde kwaliteit is het beeld lelijk en het bestand groot.

Figuur 5.6 De GIF-compressie van deze afbeelding resulteert in streepvorming (linksonder). De twee JPEG-opties aan de rechterzijde zijn van betere kwaliteit en leveren kleinere bestanden op.

De markt van Barcelona

De eerste foto toont de ingang naar de Mercat de la Boquería, de centrale markt vlakbij de Ramblas, een ongelooflijke plek met alle mogelijke soorten fruit, vlees, vis, of wat je maar nodig hebt. Het duurde lang voordat ik daar een foto durfde nemen. Misschien vind je me een bangerik, maar omdat ik daar woonde, was het toch gek. Neem jij een foto van de supermarkt bij jou in de buurt?
Figuur 5.7 Aangezien de URL van deze afbeelding alleen de bestandsnaam en geen pad bevat, geeft dit aan dat de afbeelding zich in dezelfde map bevindt als deze webpagina.

Figuur 5.8 Afbeeldingen worden standaard links op de pagina uitgelijnd. U kunt de uitlijning echter wijzigen of de tekst om een afbeelding heen laten lopen.

De markt van Barcelona

De eerste foto toont de ingang naar de Mercat de la Boquería, de centrale markt vlakbij de Ramblas, een ongelooflijke plek met alle mogelijke soorten fruit, vlees, vis, of wat je maar nodig hebt. Figuur 5.9 Hoewel u alternatieve tekst in principe zo lang mag maken als u wilt, laten de meeste browsers lange regels niet automatisch teruglopen. Daarom kunt u de tekst het best uit minder dan vijftig tekens laten bestaan.

Figuur 5.10 In Internet Explorer wordt alternatieve tekst afgedrukt naast een klein vierkant met een rode x. In andere browsers wordt uitsluitend de alternatieve tekst weergegeven.

Figuur 5.11 Wanneer een bezoeker in Explorer voor Windows met de muisaanwijzer naar een afbeelding met alternatieve tekst wijst, wordt deze in een scherminfo weergegeven. Met behulp van de title-tag kunt u scherminfo’s voor alle huidige browsers maken (zie pagina 68).


Figuur 5.12 Klik met de rechtermuisknop (of met ingedrukte Control-toets) in de browser op de afbeelding om een snelmenu te openen en kies vervolgens de menuoptie Eigenschappen of Info.

Figuur 5.13 De browser toont vervolgens de afmetingen van de afbeelding in pixels in een vak waarvan het uiterlijk per browser varieert.


Figuur 5.14 Klik in Photoshop met ingedrukte Alt- of Optiontoets op de documentinfobalk aan de onderzijde van een documentvenster als u de eigenschappen van de afbeelding wilt bekijken. (Maak het documentvenster iets groter als de documentinfobalk niet zichtbaar is.)

[knip] toch gek. Neem jij een foto van de supermarkt bij jou in de buurt?

Ik vind het prachtig, zoals ze het fruit en de groenten opstapelen. Ik kom altijd in de verleiding om een paprika onderaan de stapel te pakken, maar natuurlijk is het niet de bedoeling dat je overal aan komt. En daar zit wel wat in. Goed je staat op de markt, tussen duizenden andere mensen die hun boodschappen doen. Figuur 5.15 Als u de exacte hoogte en breedte in pixels opgeeft, hoeft de browser niet over de afmetingen na te denken en kan hij de afbeelding sneller weergeven.


Figuur 5.16 Als u een afbeelding direct in een browser opent (hier Firefox voor Windows), worden de afmetingen in de titelbalk weergegeven.

Figuur 5.17 De oorspronkelijke afmetingen van 396 x 439 pixels maken de afbeeldingen veel te groot voor de pagina.

Visvrouwen

De visvrouwen staan in speciale kramen op de markt. De vloer is er nat en een beetje slijmerig, de doordringende geur van vis vult je neusgaten en de koelte van het ijs doet je vergeten dat het buiten een zonnige dag is. Tenzij ze klanten helpen, zijn ze bezig om Figuur 5.18 Specificeer uitsluitend de getallen, zonder px.


Figuur 5.19 De afbeelding wordt half zo groot weergegeven. Bedenk wel dat de laadtijd van de afbeelding hetzelfde blijft; per slot van rekening is het hetzelfde bestand.

Figuur 5.20 De oorspronkelijke afbeelding werd gemaakt met de standaardwaarden van mijn digitale camera (2048 x 1536 pixels), wat niet alleen voor de meeste browsers te groot is, maar ook na compressie (hogekwaliteits JPEG) een enorm bestand van 366.9 Kb oplevert.


Figuur 5.21 Typ de gewenste nieuwe breedte van 300 pixels in het invoervak Breedte en klik op Toepassen. De kleinere afbeelding past op mijn pagina en kan bij 128 Kbps in zes seconden worden gedownload (bij een snellere verbinding in nog minder tijd).

Pioneer Valley: Northampton

Dit appartement in South Street is een goed [knip] Figuur 5.22 Wanneer u een afbeelding rechts uitlijnt, laat u de tekst feitelijk links om de afbeelding heen lopen.

Figuur 5.23 De afbeelding is rechts uitgelijnd en de tekst loopt er links omheen.

10

Dit appartement in South Street is een goed [knip] Figuur 5.24 Als u de afbeelding links wilt weergeven en de tekst aan de rechterzijde moet omlopen, typ dan align=”left”.

Figuur 5.25 De afbeelding is links uitgelijnd en de tekst loopt er rechts omheen. De tekst staat nu nog te dicht tegen de afbeelding aan, maar dat zullen we zo dadelijk verhelpen.


Dit gebouw dat er volgens sommigen uitziet als een kerk, is in feite het Hampshire County Courthouse. Mocht u ooit [knip]

Dit appartement in South Street is een goed voorbeeld van woningen voor meerdere gezinnen in dit gebied. Het werd in de jaren dertig gebouwd als één gezinswoning, maar is [knip].
Figuur 5.26 De afbeelding gaat altijd vooraf aan de tekst die er omheen moet lopen.

11


Figuur 5.27 De eerste afbeelding is rechts uitgelijnd en de tekst loopt er links omheen. De tweede afbeelding wordt weergegeven na de laatste regel tekst van de vorige alinea; deze afbeelding drukt de volgende alinea naar rechts.


Dit appartement in South Street is een goed voorbeeld Figuur 5.28 Let op de volgorde: eerst het huis, dan de header, vervolgens het bloemlogo en ten slotte nog wat meer tekst.

12


Figuur 5.29 Het attribuut clear=”left” zorgt ervoor dat de tekststroom stopt totdat er een lege linkermarge wordt gevonden (in dit geval onder de links aangelijnde bloem).

Figuur 5.30 Bij clear=”all” stroomt de tekst pas zodra de linker- en rechtermarge beide schoon zijn.

Figuur 5.31 Standaard wordt geen ruimte opengelaten tussen de zwevende afbeeldingen en de elementen waarnaast zij zweven.

13



Dit appartement in South Street is een goed voorbeeld van woningen voor meerdere gezinnen in dit gebied. Het werd in de jaren dertig gebouwd als één Figuur 5.32 Aan afbeeldingen kunt u horizontale en verticale ruimte toevoegen.

Figuur 5.33 Een stevige beperking van hspace en vspace is dat ze ruimte aan beide zijden van een afbeelding toevoegen. In deze figuur is de foto niet langer op de linkerrand van de tekst uitgelijnd.

14

Uitgelijnd op de bovenzijde

Als u een afbeelding in een regel tekst plaatst, oogt de afbeelding misschien beter als hij op de bovenzijde van de regel is uitgelijnd en daarna door een paar andere interessante regels tekst wordt gevolgd

Uitgelijnd op het midden

Of misschien oogt de afbeelding beter in het midden van de regel , afhankelijk wat eromheen staat, hoewel dit niet erg op het midden van de regel lijkt.
Uitgelijnd op de onderzijde

Of kan de afbeelding het best op de onderzijde van de regel staan met een heleboel tekst die iets belangrijks meldt

Of maakt het misschien allemaal weinig uit? Figuur 5.34 U kunt een afbeelding uitlijnen op de bovenzijde, het midden of de onderzijde van de regel waarin u hem wilt weergeven.

Figuur 5.35 Bedenk dat de hoogte van de afbeelding bepalend is voor de regelhoogte van de hele regel.

15

AstroFinder 3
Pleiades Expander
Southern Cross

De AstroFinder3 is een revolutionair nieuw Figuur 5.36 De hr-tag bevat een automatisch regeleinde voor en na de lijn.

Figuur 5.37 Horizontale lijnen kunnen handig zijn om de pagina in afzonderlijke stukken onder te verdelen.

Southern Cross

De AstroFinder3 is een revolutionair nieuw product dat Figuur 5.38 De hr-attributen zijn verouderd, maar worden door browsers goed ondersteund.

Figuur 5.39 Horizontale lijnen kunnen breder en smaller worden gemaakt.

16

Hoofdstuk 5 Afbeeldingen Figuur 5.40 Favicon-pictogrammen zijn in werkelijkheid nog kleiner dan in deze figuur; ze zijn 16 pixels hoog en 16 pixels breed.

Farm Training Podcasts <style type=”text/css” > Figuur 5.41 Hanteer beide linkschrijfwijzen om er zeker van te zijn dat alle browsers ermee overweg kunnen.

Figuur 5.42 Het favicon wordt meestal gebruikt in de adresbalk, het menu Favorieten en op tabbladen.

Figuur 5.43 Aangezien tabbladen meestal grijs of gekleurd zijn, kunt u de achtergrond van het pictogram het best transparant maken.

17

6

Figuur 6.1 Sommige pagina’s zullen links naar veel andere pagina’s bevatten, terwijl andere pagina’s misschien slechts één link hebben. Weer andere pagina’s bevatten wellicht koppelingen naar multimediabestanden. Sommige pagina’s bevatten mogelijk geen enkele link.

Hoofdstuk 6 Links
Cookie en Woody

Alom worden ze beschouwd als de zoetste en de meest onafhankelijke katten in Pioneer Valley. En toch worden Cookie en Woody door de mensen doorlopend onderschat.
Figuur 6.2 Aangezien het href-attribuut slechts naar een bestandsnaam (zonder pad) verwijst, moet het bestand pioneerval.html zich in dezelfde directory bevinden als deze webpagina die de link bevat.

Figuur 6.3 Wanneer een bezoeker wijst naar een link (standaard weergeven in de vorm van blauw onderstreepte tekst) wordt de doel-URL in de statuszone weergegeven. Als de bezoekers daadwerkelijk op een link klikken ...

Figuur 6.4 ... wordt de pagina die in de doel-URL wordt genoemd, in hun browser weergegeven.

Hoofdstuk 6 Links

Pixel

Wil je kennismaken met een Javakat? Ga dan naar Pixel op de site van Tom Negrino and Dori Smith over <em>JavaScript for the World Wide Web: Visual QuickStart Guide.
Figuur 6.5 Als u links maakt naar websites van anderen, moet u een absolute URL opgeven (http://, de naam van de server, het volledige pad en de bestandsnaam).

Figuur 6.6 Wanneer bezoekers wijzen naar een link (standaard weergeven in de vorm van blauw onderstreepte tekst) wordt de doel-URL in de statuszone weergegeven. Als de bezoekers daadwerkelijk op een link klikken ...

Figuur 6.7 ... wordt de pagina die in de doel-URL wordt genoemd, in hun browser weergegeven.

Hoofdstuk 6 Links

Inhoudsopgave
Inleiding
Beschrijving van de hoofdpersonen
Spanning wordt opgevoerd
Climax
Afloop

Inleiding

Dit is de intro. Als ik genoeg dingen kon bedenken om over te schrijven, zou ik een paar bladzijden mee kunnen vullen met alle informatie die voor een inleiding nodig is.

Beschrijving van de hoofdpersonen

Frankie en Johnny zijn de hoofdpersonen. Zij is jaloers en heeft daar alle reden voor. Hij is een viespeuk en zal dat bekopen.

Spanning wordt opgevoerd

Dit is het begin: Johnny gaat uit zonder Frankie, zonder haar te zeggen waar hij heen gaat. Ze vindt het niet leuk, maar laat hem gaan. Even later krijgt ze dorst en gaat ze naar de bar om de hoek. Al pratend met de barkeeper hoort ze dat Johnny daar uitgerekend met Nelly Bly is gesignaleerd. Woedend neemt ze de stadsbus om hem te zoeken.

Climax

Als Frankie bij Nellie’s huis arriveert, kijkt ze omhoog en ziet ze het stel in een hartstochtelijke omarming op het balkon. Met tranen in haar ogen pakt ze haar geweer schiet ze haar Johnny dood. Johnny stort ter aarde.

Afloop

Frankie voelt zich rot, maar het is te laat want Johnny <em>is niet meer. De politie is snel ter plekke en voert haar weg.
Figuur 6.8 Bedenk dat de meeste ankers worden gemaakt met het a-element en het name-attribuut, waarbij het laatstgenoemde attribuut wordt gemaakt door simpelweg een idattribuut aan het bestaande h2-element toe te voegen (zie de eerste tip). Het id-attribuut vervult in verreweg de meeste browsers een dubbele functie als anker.

Hoofdstuk 6 Links

Figuur 6.9 Wanneer de bezoekers naar een link met een anker wijzen, worden de URL en de naam van het anker linksonder in het venster in de statusbalk weergegeven.

Figuur 6.10 Zodra de bezoeker op de link klikt, wordt het gedeelte van de pagina waarheen door het anker wordt verwezen, aan de bovenzijde van het browservenster getoond.

Hoofdstuk 6 Links
Nathaniel Hawthorne

Nathaniel Hawthorne was een belangrijke Amerikaanse schrijver in de 19e eeuw. Zijn beroemdste hoofdpersoon isHester Prynne, een vrouw die in puriteins New England woonde. [knip]

Behalve <em>The Scarlet Letter , schreef Hawthorne <em>The House of Seven Gables, <em>The Blithedale Romance, <em>The Marble Figuur 6.11 In dit voorbeeld zullen sommige links in het venster characters en andere links in het venster books worden weergegeven.

Figuur 6.12 Wanneer de bezoeker op een link met een doel klikt ...

Figuur 6.13 ... wordt de bijbehorende pagina in het targetvenster weergegeven. In dit voorbeeld is het venster characters het targetvenster.

Hoofdstuk 6 Links <meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1” /> Amerikaanse schrijvers in de 19e eeuw
Nathaniel Hawthorne

Nathaniel Hawthorne Nathaniel Hawthorne was een belangrijke Amerikaanse schrijver in de 19e eeuw. Zijn beroemdste hoofdpersoon is Hester Prynne, een vrouw die in puriteins New England woonde. Een ander beroemd onderwerp van Hawthorne was Franklin Pierce, de 14e president van de Verenigde Staten.

Behalve <em>The Scarlet Letter , schreef Hawthorne <em>The House of Seven Gables ,

Hoofdstuk 6 Links
Op een webpagina kunt u een heleboel verschillende links maken. Dat wil zeggen, er zijn een heleboel verschillende bestanden die u aan uw webpagina kunt koppelen.

U kunt links maken naar foto’s en zelfs een link maken van een foto als deze:

U kunt ook koppelen naar films.

Hoewel u links kunt maken naar e-mailadressen met het protocol mailto:, raad ik dat niet aan omdat spambots dat oppikken en het adres met spam gaan belagen. Jammer, want het zou heel makkelijk zijn. Beter kunt u uw e-mailadres op een beschrijvende manier in de body van uw webpagina plaatsen, bijvoorbeeld via html apestaart cookwood.com , hoewel dat ook niet waterdicht is.

Via het ftp-protocol kunt u links naar ftp-sites maken. Er zijn niet veel openbare (anonieme) ftpsites meer omdat veel mensen via het web (HTTP) downloaden. Een ervan is de site GNU FTP, waar u gratis software kunt downloaden. FTP klinkt moeilijker dan het is.

Mensen bieden vaak links naar RSS feeds, hoewel ik eigenlijk niet begrijp waarom. Ze zijn zo lelijk wanneer u erop klikt. Ik vermoed dat het gewoon een gemakkelijke manier is om iets beschikbaar te maken zonder de URL te tonen. Toch heb ik een hekel aan een link waarop u niet geacht wordt te klikken.
Figuur 6.15 U kunt links maken naar alle mogelijke soorten URL’s.

Hoofdstuk 6 Links

Figuur 6.16 Waarheen een link ook verwijst, in een browser ziet deze er hetzelfde uit (tenzij u de link om een afbeelding heen laat lopen). U ziet dat ik labels heb proberen te maken die met de hoofdtekst mee vloeien in plaats van een heleboel “Hier klikken’ te maken. Dit zijn allemaal echte links. U kunt zien waarheen deze links leiden door de pagina www.cookwood.com/html6ed/examples/links/newotherlinks.html in uw eigen browser te openen.

Hoofdstuk 6 Links
Onze katten

Elk van onze katten heeft haar eigen home page. Klik op de bijbehorende link of druk op de sneltoets om een kat te bekijken.
Woody (Alt-W, Ctrl-W)
Cookie (Alt-C, Ctrl-C)
Xixona (Alt-X, Ctrl-X)
Llumeta (Alt-L, Ctrl-L)
Figuur 6.17 Maak een sneltoets voor een link door het attribuut accesskey aan zijn tag toe te voegen. De verklarende tekst (Alt-W enzovoort) is niet verplicht, maar wel handig).

Figuur 6.18 Er is geen manier om te bepalen of een link een sneltoets heeft, tenzij u die link als zodanig hebt gelabeld.

Figuur 6.19 Wanneer de sneltoets wordt gebruikt, wordt de link actief en wordt de bijbehorende pagina weergegeven.

10

Hoofdstuk 6 Links
Inhoud Zoeken Over ons

Onze katten

Elke van onze katten is speciaal. Klik op de bijbehorende link of druk op de sneltoets om meer over een kat te lezen.

Woody (Alt-W, Ctrl-W)
Cookie (Alt-C, Ctrl-C)
Xixona (Alt-X, Ctrl-X)
Llumeta (Alt-L, Ctrl-L)
Figuur 6.20 Deze pagina begint met een verzameling links die wel handig zijn, maar niets met deze specifieke pagina te maken hebben. Om ervoor te zorgen dat de eerste tab de eerste ‘echte’ link selecteert, heb ik deze link de laagste tabindex gegeven.

Figuur 6.21 Wanneer bezoekers voor de eerste keer op de Tab-toets drukken (goed, de negende keer, zie de laatste tip), wordt de link Woody geselecteerd. Na nog een druk op de Tabtoets wordt Cookie geselecteerd, daarna Xixona en ten slotte Llumeta. Pas daarna geeft een druk op de Tab-toets toegang tot de link Contents.

11

Hoofdstuk 6 Links
Cookie en Woody

Alom worden ze beschouwd als de zoetste en de meest onafhankelijke katten in Pioneer Valley. En toch worden Cookie en Woody door de mensen onderschat.

Figuur 6.22 Uit alle afbeeldingslinks heb ik de rand verwijderd.

Figuur 6.23 De afbeeldingen fungeren op precies dezelfde manier als aanklikbare tekst. De alt-tekst kan aangeven waarheen de link leidt.

12

Hoofdstuk 6 Links
Meer foto’s van de markt

Figuur 6.24 Onthoud dat u de afbeelding in de link gebruikt en de miniatuur in de afbeeldingsdefinitie.

Figuur 6.25 In dit voorbeeld zijn de miniaturen ongeveer 4 Kb groot en worden ze in een paar seconden geladen.

Figuur 6.26 Als de bezoeker op het pictogram klikt, wordt de afbeelding in een nieuw venster op ware grootte weergegeven.

13

Hoofdstuk 6 Links Figuur 6.27 Zowel in Photoshop (hier weergegeven) als in Photoshop Elements kiest u Venster > Info om het palet Info zichtbaar te maken.

Figuur 6.28 Plaats de muisaanwijzer in de linkerbovenhoek van de rechthoek en noteer de x- en y-coordinaten die in het palet Info van Photoshop worden weergegeven. (x=395 en y=18 in dit voorbeeld.) Doe hetzelfde ten aanzien van de rechterbenedenhoek van de rechthoek.

14

Hoofdstuk 6 Links

<map name=”banner” id=”banner”> <area alt=”Nieuwe informatie” shape=”rect” coords=”395, 18, 445, 35” href=”newinfo.html” /> <area alt=”Nieuwe uitgaven” shape=”rect” coords=”395, 38, 445, 55” href=”pressrelease.html” /> <area alt=”Evenementen” shape=”rect” coords=”395, 58, 445, 75” href=”events.html” />

Starsearch Enterprises
Nieuwe programma’s
Nieuwe uitgaven
Evenementen
Over Starsearch Enterprises

Figuur 6.29 U mag de map in uw (X)HTML-document plaatsen waar u wilt. Elk aanklikbaar gebied wordt gedefinieerd door zijn eigen verzameling coördinaten en heeft zijn eigen bijbehorende URL. Vergeet vervolgens niet om het usemapattribuut toe te voegen aan de afbeelding die als afbeelding met hyperlinks zal worden gebruikt.

15

Hoofdstuk 6 Links

Figuur 6.30 Wanneer uw bezoekers naar een van de gedefinieerde zones wijzen, wordt de doel-URL aan de onderzijde van het venster in de statusbalk weergegeven.

Figuur 6.31 Als een gebruiker op de link klikt, toont de browser onmiddellijk de bijbehorende pagina.

16

7

Selector Declaratie

h1 {color: red;} Eigenschap

Puntkomma Waarde

Figuur 7.1 Een stijlregel bestaat uit een selector (die aangeeft welke elementen moeten worden opgemaakt) en een declaratie (die de gewenste opmaak beschrijft).

Puntkomma’s

h1 {color: red; background: yellow;} Twee eigenschap-waardeparen

Figuur 7.2 Achtereenvolgende eigenschap-waardeparen in de declaratie moeten door een puntkomma van elkaar worden gescheiden. Sommige mensen voegen gewoon na elk eigenschap-waardepaar een puntkomma toe (ook na het laatste paar van de lijst) om er zeker van te zijn dat ze het nooit vergeten. Dat is prima, maar verplicht is het niet. De extra spaties en de inspringing dienen om alles leesbaar te houden.

/* Afbeeldingen krijgen een egale rode rand van 4 pixels */ img {border: 4px solid red} Figuur 7.3 U kunt commentaar toevoegen om stijlregels te ebschrijven, zodat u ze naderhand gemakkelijker kunt bewerken of bijwerken. (Toegegeven, deze stijlregel is niet bijster ingewikkeld, maar misschien zijn de uwe dat wel.)

img {border: 4px solid red} /* Afbeeldingen krijgen een egale rode rand van 4 pixels breed */ Figuur 7.4 Desgewenst kunt u na een stijlregel commentaar invoegen.

Hoofdstuk 7 Bouwstenen van stijlbladen body {background:url(bg_flax.jpg) bottom right no-repeat} p {font-family: “Trebuchet MS”, “Helvetica”, sans-serif; font-weight: bold; color:#3366cc; } img {float:left;margin-right:10px} Figuur 7.5 Dit is het stijlblad van het document. Maakt u zich over de details geen zorgen, maar merk alleen op dat er wel een regel is voor p-elementen, maar niet voor emelementen.


Figuur 7.6 Het em-element is binnen het p-element geplaatst en is derhalve een kind van p.

Figuur 7.7 Omdat er voor het em-element in figuur 7.5 niet expliciet een regel is gespecificeerd, erft dit element het lettertype, de tekengrootte en de tekenkleur van zijn ouder, het p-element.

Hoofdstuk 7 Bouwstenen van stijlbladen p {color:red} p.group {color:blue} p#one {color:green} p#one {color:magenta} Figuur 7.8 Hier zijn vier regels van wisselende specificiteit. De eerste regel geldt voor alle p-elementen, de tweede geldt uitsluitend voor p-elementen met een klasse die gelijk is aan group, terwijl de derde en de vierde regel alleen gelden voor het enkele p-element met een id dat gelijk is aan one.

Dit is een generiek element; het wordt rood.

Dit p-element is van de group class. In dit geval gelden twee regels, maar omdat de p.group-regel specifieker is, zal deze alinea blauw worden.

Dit is een p-element met een id dat gelijk is aan one. voor deze alinea zouden vier regels kunnen gelden. De eerste twee worden onderdrukt door de specifiekere laatst twee regels. De positie geeft de doorslag; de laatste regel wint en dus wordt de alinea magenta.
Figuur 7.9 Drie alinea’s: een generieke alinea, een alinea met slecht een klasse en een alinea met een klasse en een id.

Figuur 7.10 Aangezien de derde en de vierde regel dezelfde specificiteit hebben, wordt hun positie belangrijk. In dit geval wint de vierde regel, aangezien deze als laatste werd gespecificeerd.

Hoofdstuk 7 Bouwstenen van stijlbladen

Een vooraf ingestelde waarde

border: none; Figuur 7.11 Veel CSS-eigenschappen accepteren uitsluitend waarden uit een vooraf gedefinieerde lijst. Typ ze exact en plaats ze niet tussen dubbele aanhalingstekens.

Een lengte

font-size: 24px; Figuur 7.12 Bij lengten moet de maateenheid altijd expliciet worden opgegeven. Tussen het getal en de maateenheid mag geen spatie worden geplaatst.

Een percentage

font-size: 80%; Figuur 7.13 Percentages zijn over het algemeen relatief ten opzichte van het ouderelement. In dit voorbeeld wordt het lettertype derhalve ingesteld op 80% van het lettertype van de ouder.

Een aantal

line-height: 1.5; Figuur 7.14 Verwar aantallen en gehele getallen niet met lengten. Een aantal of een geheel getal heeft geen eenheid (bijvoorbeeld px). In dit geval is de weergegeven waarde een factor die met de tekengrootte wordt vermenigvuldigd en op die manier de regelhoogte oplevert.

Een URL

background: url(bg_flax.jpg); Figuur 7.15 URL’s in CSS-eigenschappen hoeven niet tussen dubbele aanhalingstekens te staan.

Hoofdstuk 7 Bouwstenen van stijlbladen

Zestien vooraf gedefinieerde kleuren De kleurnamen en de hexadecimale waarden zijn niet hoofdlettergevoelig, zelfs niet in XHTML

Figuur 7.16 De 16 vooraf gedefinieerde kleurnamen met hun bijbehorende hexadecimale codes.

De hoeveelheid rood in de kleur

color: rgb(%35, 0%, 50%) De hoeveelheid groen in de kleur De hoeveelheid blauw in de kleur

Figuur 7.17 De hoeveelheid van elk van de drie kleuren mag ook worden uitgedrukt in percentages. Definieer rood eerst, daarna groen en ten slotte blauw.

De hoeveelheid rood in de kleur

color: #59007F De hoeveelheid blauw in de kleur De hoeveelheid groen in de kleur Een hekje

Figuur 7.18 URL’s in CSS-eigenschappen hoeven niet tussen dubbele aanhalingstekens te staan.

8 Figuur 8.1 CSS-documenten kunt u in elke teksteditor schrijven. Dit is WordPad.

Figuur 8.2 Let erop dat u het CSS-bestand als platte tekst (Tekstdocument, Platte tekst of ASCII of hoe uw teksteditor dat ook noemt) opslaat en u het bestand de extensie .css geeft.

img {border: 4px solid red;} Figuur 8.3 Dit is het externe stijlblad (base.css) dat we op pagina 128 maakten. Let niet speciaal op de eigenschappen en waarden. (Het betekent simpelweg dat er een ondoorzichtige rode rand om alle img-elementen wordt geplaatst.)

Hoofdstuk 8 Werken met stijlbladbestanden <meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Palau de la Música Figuur 8.4 De link-tag komt binnen de head-sectie van uw (X)HTML-document te staan.

Figuur 8.5 De stijlregel (een rode solide rand) is toegepast op elk img-element.

Figuur 8.6 Andere documenten mogen eveneens naar precies hetzelfde externe stijlblad verwijzen.

Hoofdstuk 8 Werken met stijlbladbestanden img {border: 4px solid red;} Figuur 8.7 Dit CSS-bestand (base.css) wordt ons vaste stijlblad en zal worden toegepast, omgeacht wat de bezoeker doet.

img {border-style: dashed;} Figuur 8.8 Ik wil dat dit stijlblad (preferred.css) standaard wordt geladen wanneer de bezoeker naar mijn pagina springt.

img {border-style: dotted;} Figuur 8.9 De bezoeker krijgt de gelegenheid om desgewenst dit alternatieve stijlblad te laden. De bestandsnaam van dit stijlblad is alternate.css.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Palau de la Música Figuur 8.10 Achtereenvolgens heb ik het vaste oftewel basisstijlblad, het voorkeur- oftewel automatische stijlblad en een alternatief stijlblad gedefinieerd. Elk stijlblad heeft een eigen link-element nodig.

Hoofdstuk 8 Werken met stijlbladbestanden

Figuur 8.11 Nadat de pagina is geladen, heeft deze een gestippelde rand (de voorkeurwaarde heeft voorrang boven de basiswaarde – een ononderbroken lijn – maar de basiskleur blijft gehandhaafd). Als de bezoeker Streepjeslijn kiest, zal het alternatieve stijlblad worden toegepast.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> El Palau de la Música <style type=”text/css”> img {border: 4px solid red; } Figuur 8.12 Het style-element en diens stijlregels worden in de head-sectie van het document geplaatst. Vergeet niet om de afsluitende -tag toe te voegen!


Figuur 8.13 Het resultaat is exact hetzelfde als wanneer u de opmaakstijlen in een extern stijlblad definieert. Het verschil is dat andere webpagina’s niet kunnen profiteren van de stijlen die op deze pagina zijn gebruikt.

Figuur 8.14 Sommige hele oude browsers konden niet met bepaalde CSS-functies overweg en rommelden dan maar wat aan. Dat was bijvoorbeeld het geval bij randen in Netscape 4.x. Hier ziet u dat er vierkantjes in plaats van de gevraagde randen werden aangebracht.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> El Palau de la Música <style> @import “not_for_Netscape4.css”; Figuur 8.15 De @import-regel moet voorafgaan aan alle individuele stijlregels in het style-element. De regel mag na andere @import-regels volgen.


Figuur 8.16 Alle belangrijke moderne browsers ondersteunen de import van opmaakstijlen.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> El Palau de la Música Figuur 8.17 Beperk het stijlblad tot een bepaalde output door het media-attribuut aan het link-element toe te voegen.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> El Palau de la Música <style> @import “screenstyles.css” screen; @import “printstyles.css” print; Figuur 8.18 Als u stijlbladen importeert in plaats van ze te koppelen, voeg dan de waarde van het media-attribuut toe aan het eind van de @import-regel.

Hoofdstuk 8 Werken met stijlbladbestanden <meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> El Palau de la Música

Ik ben wég van het Palau de la Música. Het is Figuur 8.19 Lokaal toegepaste regels gelden uitsluitend voor een enkel element, in dit geval de linkse img-tag.

Figuur 8.20 Alleen de linkerafbeelding is van een rand voorzien. Als u dit effect in de rest van dit hoofdstuk wilt herhalen, moet u style=”border: 4px solid red” aan elke afzonderlijke img-tag toevoegen.


El Palau de la Música <style> img {border-style: dashed} Figuur 8.21 In dit voorbeeld volgt het style-element als laatste. Daarom hebben zijn regels voorrang boven de regels van het stijlblad base.css (zolang de elkaar tegensprekende regels dezelfde erfelijkheid en specificiteit hebben).

Figuur 8.22 De gestippelde rand van het style-element wint het van de gekoppelde solide rand.

El Palau de la Música <style> img {border: dashed} Figuur 8.23 Hier staat het gekoppelde stijlblad onderaan en heeft het in principe voorrang boven het style-element.

Figuur 8.24 De ononderbroken rand van het stijlblad base. css heeft voorrang boven de gestippelde rand van het interne style-element.


Figuur 8.25 Bekijk de broncode van de (X)HTML-pagina waarin u geïnteresseerd bent en kopieer vervolgens de URL van het href-attribuut van het link-element of de @import-regel.

Figuur 8.26 Dit is de URL van de pagina met het stijlblad waarin we geïnteresseerd zijn.

Figuur 8.27 Plak de relatieve URL die u in figuur 8.25 hebt gekopieerd, in de volledige URL in plaats van de bestandnaam van de webpagina. Al naargelang de relatieve URL zult u misschien de oorspronkelijke directory van de webpagina eveneens moeten verwijderen. Druk op Enter.

Figuur 8.28 De CSS-code wordt weergeven in het bronvenster van de browser of in een externe teksteditor (zoals in deze figuur), afhankelijk van de gebruikte browser en de ingestelde voorkeuren.

9

Naam van het gewenste element

h1 {color: red;} Figuur 9.1 Het eenvoudigste type selector is gewoon de naam of het type van de elementen (in dit geval h1) die opgemaakt moeten worden.

Naam van het gewenste element

h1 em {color: red;} Context

Figuur 9.2 Deze selector maakt gebruik van context. De stijl zal alleen op de em-elementen binnen h1-elementen worden toegepast. Elders aangetroffen em-elementen blijven ongewijzigd.

Naam van het gewenste element Klasse

em.very {color: red;} div#gaudi {color: red;} ID Naam van het gewenste element

Figuur 9.3 De eerste selector kiest alle em-elementen die tot de klasse very behoren. De tweede selector kiest het ene div-element met het id gaudi.

a:link {color: red;} Pseudo-klasse Naam

Figuur 9.4 In dit voorbeeld kiest de selector a-elementen die tot de pseudo-klasse link behoren. (In gewone taal zijn dit de links die nog niet zijn bezocht.)

a[name] {color: red;} Naam Attribuut

Figuur 9.5 De rechte haakjes gebruikt u om informatie over de attributen en/of waarden van het gewenste element aan een selector toe te voegen.

Hoofdstuk 9 Selectors opstellen

Barcelona vierde de 150e verjaardag van Gaudí’s geboortedag in 2002.

La Casa Milà

Gaudí’s werk was echt voor gebruik bedoeld. La Casa Milà is een flatgebouw waarin <em>echte mensen wonen.

La Sagrada Família

De nog altijd niet voltooide kerk van Figuur 9.6 Onze (X)HTML-code bevat twee h2-elementen.

h2 {color:red;} Figuur 9.7 Deze selector kiest alle h2-elementen in het document.

Figuur 9.8 Alle h2-elementen worden in een rode kleur weergegeven.

Antoni Gaudí


Barcelona vierde the 150e verjaardag van Gaudí’s geboortedag in 2002.

La Casa Milà


La Sagrada Família
Figuur 9.9 De div binnen de id gaudi omvat bijna de hele pagina (oftewel alles behalve het eerste h1-element).

div#gaudi {color:red;} Figuur 9.10 Deze selector kiest het div-element met een id dat gelijk is aan gaudi.

Figuur 9.11 De div gaudi wordt in rood weergegeven, het h1-element niet.


Antoni Gaudí

Veel toeristen ...

Barcelona ...

La Casa Milà

Gaudí’s werk ...

La Sagrada Família
Figuur 9.12 Ik heb de tekst laten inspringen om de relaties tussen elementen te verduidelijken. Elke inspringing representeert een generatie. U ziet dat er direct binnen de div gaudi twee tweede-generatie p-elementen zijn, en dat er binnen de divs werken (binnen de div gaudi) één derde-generatie p-element aanwezig is.

div#gaudi p {color:red;} Figuur 9.13 De spatie tussen div #gaudi en p betekent dat deze selector elk p-element dat van de div gaudi afstamt, ongeacht zijn generatie zal selecteren.

Figuur 9.14 Alle p-elementen die binnen de div gaudi zijn geplaatst, zullen rood worden weergegeven, zelfs als ze binnen andere elementen binnen de div gaudi zijn geplaatst.

Hoofdstuk 9 Selectors opstellen div#gaudi > p {color:red;} Figuur 9.15 Deze selector kiest alleen de p-elementen die kinderen van de div gaudi zijn. Om daarvoor in aanmerking te komen mogen ze niet binnen een ander element zijn geplaatst.

Figuur 9.16 Alleen de eerste twee p-elementen zijn kinderen van de div gaudi. De twee andere p-elementen zijn kinderen van de div werken. Zie figuur 9.12 voor de (X)HTML-code die in dit voorbeeld werd gebruikt.

Figuur 9.17 Internet Explorer 5.5 en 6 herkennen de child selector niet; Internet Explorer 7 wél.

Hoofdstuk 9 Selectors opstellen div#gaudi p:first-child {color:red} Figuur 9.18 Deze selector kiest uitsluitend het p-element dat het eerste kind van de div gaudi is.

Figuur 9.19 Het eerste p-element binnen de div gaudi is rood, het tweede p-element niet.

div#gaudi p+p {color:red} Figuur 9.20 Deze selector kiest alleen de p-elementen die direct na een broer p-element volgen.

Figuur 9.21 Alleen de p-elementen die direct na een broer p-element volgen, zijn roodgekleurd. Deze selector komt bijvoorbeeld van pas als u bijvoorbeeld alle alinea’s behalve de eerste alinea wilt laten inspringen.

Antoni Gaudí



La Casa Milà

Figuur 9.22 Hier is niets gemarkeerd omdat u de eerste regel pas kunt identificeren als de pagina in een browser wordt weergegeven.

p:first-line {color:red;} Figuur 9.23 Hier kiest de selector de eerste regel van elk p-element.

Figuur 9.24 Door de breedte van het venster te wijzigen wordt de inhoud van de eerste regels (en dus van de opmaak) gewijzigd.

Hoofdstuk 9 Selectors opstellen p:first-letter {color:red;} Figuur 9.25 Hier kiest de selector alleen de eerste letter van elk p-element. Zie figuur 9.22 voor de bijbehorende (X)HTMLcode.

Figuur 9.26 De selector first-letter kunt u bijvoorbeeld gebruiken om initialen te maken (zodra we andere eigenschappen dan color hebben besproken).

Figuur 9.27 De specificaties delen mee dat het pseudo-element first-letter ook geldt voor eventuele leestekens die aan de eerste letter voorafgaan. Firefox en Opera (links) doen dat netjes, Internet Explorer (tot en met versie 7, rechts weergegeven) niet.



La Casa Milà
Figuur 9.28 U kunt in de code niet aangeven welke toestand een link moet hebben. Dat bepalen uw bezoekers.

a:link {color:red;} a:visited {color:orange;} a:focus {color: purple;} a:hover {color:green;} a:active {color:blue;} Figuur 9.29 Stijlen voor links moeten altijd in deze volgorde worden opgegeven om onderdrukking van eigenschappen te voorkomen wanneer een link meer dan één toestand kent (bijvoorbeeld bezocht of aangewezen).

Figuur 9.30 Links zijn roodgekleurd wanneer ze nieuw zijn en nog niet bezocht.

Figuur 9.31 Zodra de link is bezocht, verandert deze in een oranje kleur.

Figuur 9.32 Als de link de focus krijgt (via een druk op de Tab-toets), is de link gekleurd.

Figuur 9.33 Als de muisaanwijzer van de bezoeker op de link rust, heeft de link een groene kleur.

Figuur 9.34 Door te klikken op de link krijgt deze een blauwe kleur.

Antoni Gaudí

Veel toeristen bezoeken Barcelona...

Barcelona
La Casa Milà

Gaudí’s werk was echt voor gebruik....

La Sagrada Família

De nog altijd niet voltooide kerk van...

Figuur 9.35 In deze code hebben alleen de twee binnenste div-elementen class-attributen.

div[class] {color:red;} Figuur 9.36 De vierkante haakjes omringen het gewenste attribuut en een eventuele gewenste waarde.

Figuur 9.37 Elk div-element dat een class-attribuut omsluit, is rood, ongeacht de waarde van de klasse.

10

Antoni Gaudí

Veel toeristen bezoeken Barcelona ....

Barcelona
La Casa Milà

Gaudí’s werk was echt voor gebruik...

La Sagrada Família

De nog altijd niet voltooide kerk van...

Figuur 9.38 Hier hebben we één h1-element en twee h2elementen.

h1, h2 {color:red;} Figuur 9.39 Zolang u ze maar door een komma van elkaar scheidt, mag u net zoveel selectors gebruiken als u wilt.

Figuur 9.40 Nu kleurt een enkele regel zowel de h1- als h2elementen rood.

11


Naam

div.werken p em:first-letter {color: red:} Context

Pseudo-klasse

Figuur 9.41 Dit is een ingewikkelde. Wat er staat, is: “kies alleen de eerste letter van de em-elementen die zich bevinden binnen p-elementen die zich in div-elementen bevinden waarvan de klasse gelijk is aan werken”.

12

10 Figuur 10.1 Zo ziet de pagina eruit zonder dat een stijlblad werd toegepast. De (X)HTML-broncode vindt u in de sectie Examples van mijn site (www.cookwood.com/html6ed/ examples/).

h1, h2 {font-family: “Arial Black”} p {font-family: “Palatino Linotype”} Figuur 10.2 Voor de koppen heb ik het veelgebruikte lettertype Arial Black gespecificeerd. Voor de alinea’s koos ik Palatino Linotype, een lettertype dat op Windows-systemen gebruikelijk is.

Figuur 10.3 Op dit Windows XP-systeem is Palatino Linotype standaard geïnstalleerd, zodat het in de browser correct wordt weergegeven.

Hoofdstuk 10 Tekst opmaken met opmaakstijlen

Figuur 10.4 Palatino Linotype is op de meeste Mac-systemen niet standaard geïnstalleerd. Als u een lettertype kiest dat niet op het systeem van de bezoeker aanwezig is, zoals in deze figuur, wordt in plaats daarvan het standaardlettertype gebruikt (Times in dit geval).

h1, h2 {font-family: “Arial Black”, sans-serif} p {font-family: “Palatino Linotype”, Palatino, serif} Figuur 10.5 Via de eigenschap font-family kunt u alternatieve lettertypen opgeven die door de browser moeten worden gebruikt als het eerste lettertype niet op het systeem is geïnstalleerd. In dit geval dragen we de browser op om naar Palatino te zoeken op systemen waarop Palatino Linotype niet is geïnstalleerd.

Figuur 10.6 Systemen waarop Palatino Linotype is geïnstalleerd zullen dat lettertype blijven gebruiken.


Figuur 10.7 Systemen zonder Palatino Linotype zullen Palatino gebruiken (als ze daarover beschikken, zoals op de meeste Mac-systemen het geval is). Als Palatino evenmin aanwezig is, zal de browser de derde keuze proberen. U ziet dat de standaardregelhoogte nog steeds afwijkt. We zullen dat verderop in dit hoofdstuk verhelpen.

h1, h2 {font-family: “Arial Black”, sans-serif} p {font-family: “Palatino Linotype”, Palatino, serif} .emph {font-style: italic} Figuur 10.8 In dit geval laat ik de klasse .emph cursief weergeven.

De nog altijd niet voltooide kerk van de Heilige Familie (Sagrada Familia) is het meest bezochte bouwwerk van Barcelona. In dit bouwwerk combineert Gaudí zijn kijk op de natuur en de architectuur met zijn levenshouding, zijn <span class=”emph”>geloof . Hij concentreerde zich zo intens op dit project dat hij alle andere werkzaamheden afstootte en op de werkplek in een appartement sliep. Figuur 10.9 Onthoud dat het woord geloof in de (X)HTMLcode met de klasse emph is gemarkeerd.


Figuur 10.10 Palatino Linotype heeft een echt cursief lettertype, zoals u in de derde regel kunt zien. Vooral de kleine letter “f” is niet simpelweg schuin getrokken.

h1, h2 {font-family: “Arial Black”, sans-serif; font-weight:normal} p {font-family: “Palatino Linotype”, Palatino, serif} .emph {font-style: italic;font-weight:bold} a:link, a:hover {font-weight:bold} Figuur 10.11 Browsers voegen aan koppen (zoals h1 en h2 ) automatisch vette opmaak toe. Ik kan een normale letterdikte toevoegen om dit effect te verwijderen (omdat het op deze pagina wat te veel van het goede is). Ik heb eveneens vette opmaak toegevoegd aan de emph-klasse en aan nieuwe links en links waar de muisaanwijzer op rust.

Figuur 10.12 Nu de extra vette opmaak is verwijderd, zijn de koppen minder overheersend. Nieuwe links vallen meer op, terwijl bezochte links minder opdringerig zijn geworden.


Figuur 10.13 De benadrukte tekst (het woord geloof in de voorlaatste regel) is niet alleen cursief opgemaakt (zoals op de vorige pagina), maar ook vet.

h1, h2 {font-family: “Arial Black”, sans-serif; font-weight: normal} h1 {font-size: 22px} h2 {font-size: 16px} p {font-family: “Palatino Linotype”, Palatino, serif; font-size: 14px} .emph {font-style: italic; font-weight:bold} a:link, a:hover {font-weight:bold} #toc {font-size:12px} Figuur 10.14 Hier heb ik pixelwaarden gebruikt om de begingrootte van de tekst te regelen. (Ik heb een kleinere tekengrootte gebruikt dan wat in de meeste browsers standaard is.)


Figuur 10.15 De door mij gespecificeerde tekengrootten worden in de browser weergegeven. Internet Explorer gebruikt deze afmetingen zelfs als de gebruiker via de menuoptie Tekengrootte een andere tekengrootte heeft gekozen.

h1 {font-size: 1.37em} h2 {font-size: 1em} p {font-family: “Palatino Linotype”, Palatino, serif; font-size:87%} .emph {font-style: italic; font-weight:bold} a:link, a:hover {font-weight:bold} #toc {font-size:75%} Figuur 10.16 Uitgaande van een standaardtekengrootte van 16 pixels is dit stijlblad equivalent aan het stijlblad in figuur 10.14.


Figuur 10.17 Het verschil wordt evident als uw bezoekers de grootte van de tekst in hun browser proberen te wijzigen.

Figuur 10.18 Zolang u relatieve tekengrootten hebt gebruikt, zal de menuoptie Tekengrootte de tekengrootten van alle tekst (maar niet de afbeeldingen) op de pagina proportioneel wijzigen ten opzichte van de oorspronkelijke tekengrootten.

Hoofdstuk 10 Tekst opmaken met opmaakstijlen h1, h2 {font-family: “Arial Black”, sans-serif; font-weight: normal} h1 {font-size: 1.37em} h2 {font-size: 1em} p {font-family: “Palatino Linotype”, Palatino, serif; font-size: 87%; line-height: 170%} .emph {font-style: italic; font-weight:bold} a:link, a:hover {font-weight:bold} #toc {font-size: 75%} Figuur 10.19 Uitgaande van een standaard body-element van 16 pixels wordt de tekengrootte van het p-element 87% oftewel ongeveer 14 pixels. De regelhoogte wordt 170% van die 14 pixels, oftewel ongeveer 24 pixels.

Figuur 10.20 Door de afstand tussen regels te vergroten wordt de tekst visueel aantrekkelijker en beter leesbaar.


h1, h2 {font: 1.37em “Arial Black”, sans-serif} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif} .emph {font-style: italic; font-weight:bold} a:link, a:hover {font-weight:bold} #toc {font-size: 75%} Figuur 10.21 Dit stijlblad is equivalent aan het stijlblad in figuur 10.19. Ik heb de font-eigenschappen van de regels h1, h2 en p simpelweg gecombineerd. U ziet dat ik niet hoef te specificeren dat het font-weight van h1 en h2 normal moet zijn, aangezien normal de standaardinstelling van de fonteigenschap is.

Figuur 10.22 Deze pagina is identiek aan de pagina die in figuur 10.20 is weergegeven.

Hoofdstuk 10 Tekst opmaken met opmaakstijlen h1, h2 {font: 1.37em “Arial Black”, sans-serif; color: navy} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} a:visited {font-weight:normal; color:#909} a:hover {font-weight: bold; color: #74269D} #toc {font-size: 75%} Figuur 10.23 Voor de definitie van kleuren mag u kleurnamen, hexadecimale waarden en zelfs RGB-waarden gebruiken. Bij de tweede kleur (#909) werd de afkorting gebruikt die in de derde tip wordt besproken.

Figuur 10.24 De koppen zijn marineblauw, de tekst is lichtpaars en de links zijn donkerpaars, maar worden lichter nadat ze bezocht zijn, en wederom donkerpaars wanneer de bezoeker de muisaanwijzer erop laat rusten.

10


body {background:#eef} h1, h2 {font: 1.37em “Arial Black”, sans-serif; color: navy} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} a:visited {font-weight:normal; color:#909} a:hover {font-weight: bold; color: #74269D} #toc {font-size: 75%; background:#EBC6F9} Figuur 10.25 Het is een goed idee om de achtergrondkleur in te stellen van elk element waarvoor u een voorgrondkleur hebt gespecificeerd. Door de achtergrondkleur van het bodyelement in te stellen bepaalt u de achtergrond van al zijn kindelementen.

Figuur 10.26 De achtergrond van het body-element is lichtblauw. De achtergrond van de inhoudsopgave is lichtpaars.

11

Hoofdstuk 10 Tekst opmaken met opmaakstijlen body {background:#eef} h1, h2 {font: 1.37em “Arial Black”, sans-serif;color: navy; letter-spacing:0.4em} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} a:visited {font-weight:normal; color:#909} a:hover {font-weight: bold; color: #74269D} #toc {font-size: 75%; background:#EBC6F9} Figuur 10.27 Hier heb ik .4em extra ruimte toegevoegd tussen de letters (wat bij een tekengrootte van 22px betekent dat er bijna 9 pixels tussenruimte tussen twee letters aanwezig is.

Figuur 10.28 Ik ben dol op koppen met meer tussenruimte tussen opeenvolgende letters.

12


body {background:#eef} h1, h2 {font: 1.37em “Arial Black”, sans-serif;color: navy; letter-spacing:0.4em} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909; text-indent:1.5em} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} a:visited {font-weight:normal; color:#909} a:hover {font-weight: bold; color: #74269D} #toc {font-size: 75%; background:#EBC6F9} Figuur 10.29 Ik heb een inspringing van 1.5 em toegevoegd aan de p-elementen. (Aangezien hun tekengrootte ongeveer 14 pixels is, zal de inspringing ongeveer 21 pixels bedragen.)

Figuur 10.30 Elke alinea springt 21 pixels in.

13

Hoofdstuk 10 Tekst opmaken met opmaakstijlen body {background:#eef} h1, h2 {font: 1.37em “Arial Black”, sans-serif;color: navy; letter-spacing:0.4em} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909; text-indent:1.5em} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} a:visited {font-weight:normal; color:#909} a:hover {font-weight: bold; color: #74269D} #toc {font-size: 75%; background:#EBC6F9; white-space: nowrap} Figuur 10.31 De waarde nowrap van white-space behandelt spaties als vaste spaties.

Figuur 10.32 De inhoudsopgaveregel loopt niet terug, ook niet als het browservenster te smal is om de hele regel weer te geven.

14

Hoofdstuk 10 Tekst opmaken met opmaakstijlen body {background:#eef} h1, h2 {font: 1.37em “Arial Black”, sans-serif;color: navy; letter-spacing:0.4em; text-align:center} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909; text-indent:1.5em; text-align:justify} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} a:visited {font-weight:normal; color:#909} a:hover {font-weight: bold; color: #74269D} #toc {font-size: 75%; background:#EBC6F9; white-space: nowrap; text-align:center} Figuur 10.33 Vergeet het streepje in text-align niet.

Figuur 10.34 De inhoudsopgave en de koppen zijn gecentreerd, terwijl de alineatekst is uitgevuld.

15

Hoofdstuk 10 Tekst opmaken met opmaakstijlen body {background:#eef} h1, h2 {font: 1.37em “Arial Black”, sans-serif;color: navy; letter-spacing:0.4em; text-align:center} h1 {text-transform: uppercase} h2 {font-size: 1em} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909; text-indent:1.5em; text-align:justify} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} a:visited {font-weight:normal; color:#909} a:hover {font-weight: bold; color: #74269D} #toc {font-size: 75%; background:#EBC6F9; white-space: nowrap; text-align:center} Figuur 10.35 Met het oog op meer nadruk besloot ik de niveau 1-kop geheel in hoofdletters weer te geven.

Figuur 10.36 Nu is de kop pas echt opvallend.

16

Hoofdstuk 10 Tekst opmaken met opmaakstijlen body {background:#eef} h1, h2 {font: 1.37em “Arial Black”, sans-serif;color: navy; letter-spacing:0.4em; text-align:center} h1 {text-transform: uppercase} h2 {font-size: 1em; font-variant: small-caps} p {font: 87%/170% “Palatino Linotype”, Palatino, serif; color:#909; text-indent:1.5em; text-align:justify} .emph {font-style: italic;font-weight:bold} a:link {font-weight:bold; color:#74269D} Figuur 10.37 Vergeet het verbindingsstreepje niet in fontvariant en small-caps!

Figuur 10.38 Klein kapitaal wordt in de diverse browsers lichtelijk verschillend weergegeven. Van boven naar beneden ziet u de weergave in Firefox voor Windows (identiek aan Internet Explorer 7), Internet Explorer 6 en Opera 8.5 voor Windows.

17

Hoofdstuk 10 Tekst opmaken met opmaakstijlen [knip] a:link {font-weight:bold; color:#74269D; text-decoration:none;} a:visited {font-weight:bold; color:#909; text-decoration:none;} a:hover {font-weight:bold; color:#74269D; text-decoration: underline;} #toc {font-size: 75%; background:#EBC6F9; white-space:nowrap; text-align:center;} Figuur 10.39 Onderstreping of andere versiering van de tekst hoeft niet beperkt te blijven tot links, zoals in dit geval. U mag deze versieringen op elk element toepassen.

Figuur 10.40 Ik verwijderde de onderstreping, zowel van nieuwe als bezochte links. Vervolgens voegde ik onderstreping toe aan de links waar de muisaanwijzer op rust om bezoekers te laten weten dat de desbetreffende tekst een link is. De tekst is cursief weergegeven omdat het de titel van een boek betreft.

18

11

Figuur 11.1 Deze pagina met twee vloeiende kolommen, een kop en een voettekst werd opgemaakt met behulp van CSS. In dit hoofdstuk worden de toegepaste principes stap voor stap uitgelegd.

Hoofdstuk 11 Opmaakstijlen gebruiken voor lay-out

fotobarcelona . . .
...knip...

Hospital Sant Pau
...knip...
Het Sint Paulus-ziekenhuis aan het eind van ...

Kathedrale kloostergang
...knip...
Buiten voelt het alsof er een oorlog woedt, ...

...knip...

vanuit mijn venster
...knip...

over dit foto blog
...knip...

Figuur 11.2 Dit is het document dat ik het hele hoofdstuk door gebruik. Het bestaat uit vier divs, te weten header, main, sidebar en footer, omsloten door twee buitenste verpakkingsdivs (wrap en screen). U vindt het volledige bestand op mijn website (zie pagina 26).

Figuur 11.3 Zo ziet het voorbeeld er uit zonder enige opmaakstijl. Dankzij zijn keurige structuur is het een begrijpelijk, zij het een beetje Spartaans document.


De margin

Figuur 11.4 Elk elementvak heeft vier belangrijke eigenschappen die zijn afmetingen bepalen. In volgorde van het midden naar de buitenzijde zijn dat de content area, de padding, de border en de margin. Elke eigenschap en zelfs gedeelten van de eigenschap kunt u afzonderlijk regelen.

#wrap {background-image: url(bluebench.jpg); background-position: left top; background-repeat: repeat;} Figuur 11.5 Om te beginnen passen we een achtergrondafbeelding toe op de buitenste div (de div wrap). Daarna plaatsen we de afbeelding in de linkerbovenhoek van de div wrap en herhalen we dit in beide richtingen.

#wrap {background: url(bluebench.jpg) left top repeat;} Figuur 11.6 U kunt een kortere weg kiezen (met behulp van de background-eigenschap die op de volgende pagina wordt beschreven) als u meer dan één achtergrondeigenschap tegelijk wilt toepassen.


Figuur 11.7 Een webpagina van een achtergrondafbeelding voorzien is altijd een hachelijke onderneming. Op de volgende pagina zullen we de achtergrond bedekken, zodat de tekst leesbaar wordt. Verderop in dit hoofdstuk zullen we die bedekking weer enigszins afpellen zodat een deel van de achtergrond wederom zichtbaar wordt.

#wrap {background: url(bluebench.jpg) left top repeat;} #screen {background: #FEF6F8;} a:focus, a:hover, a:active {background: #F3CFB6;} #sidebar {background: #F5F8FA;} Figuur 11.8 De achtergrond van de div screen zal de tekst leesbaar maken. De kleur hiervan is tijdelijk. Vervolgens voegen we een achtergrond toe aan links wanneer de muisaanwijzer erop rust, om duidelijk te maken dat de desbetreffende tekst een link is. Ten slotte zullen we een achtergrondkleur toevoegen aan de maandelijkse opiniekolom in de div sidebar.


Figuur 11.9 De achtergrond van de div screen bedekt onze nieuwe achtergrondafbeelding van de vorige pagina geheel. We zullen dat straks verhelpen door middel van padding (zie pagina 177). U ziet dat de links die niet door de muisaanwijzer worden aangewezen, dezelfde achtergrond hebben als het scherm, terwijl de links die wel door de muisaanwijzer worden aangewezen, een sterker contrast ten opzichte van de achtergrond hebben om ze te laten opvallen. Figuur 11.10 De achtergrondkleur van de sidebar is zo lichtblauw als maar mogelijk is, net voldoende om de sidebar van de overige tekst af te grenzen.

#wrap {width: 90%;} #main {width: 75%;} .photo {width:100px;height: 75px;} Figuur 11.11 Door de div wrap te beperken tot 90% van het browservenster krijgt de div wat lucht en ziet hij er minder opeengepakt uit. Door de div main te beperken tot 75% van de div screen (die dezelfde afmetingen heeft als de div wrap) laten we ruimte over voor de sidebar.


90%

75%

10%

25%

Figuur 11.12 De div wrap, die de gearceerde div screen geheel omsluit, beslaat nu slechts 90% van het browservenster.

#wrap {max-width: 900px; min-width: 480px;} Figuur 11.13 De eigenschappen max-width en min-width zijn geknipt om de buitengrenzen van onze vloeiende layout in te stellen. We willen geen al te brede pagina, ook niet als de bezoeker over een reusachtig beeldscherm beschikt, en evenmin een te smalle pagina als de bezoeker zijn browservenster klein maakt. Firefox en Opera ondersteunen deze eigenschappen, maar Internet Explorer (tot en met versie 7) helaas niet.

div {width:300px; height: 500px; background: yellow;} p.auto {width:auto; margin: 10px; padding: 5px; border: 5px solid blue; background: white;} p {width: 200px; margin: 10px; padding: 5px; border: 5px solid purple; background: white;} Figuur 11.14 In dit minivoorbeeld heb ik de width van de div parent ingesteld op 300 pixels. Dit is het ons omvattende blok. Vervolgens hebben beide alinea’s een marge (margin) van 10 pixels, een padding van 5 pixels en een rand (border) van 5 pixels aan alle zijden. Bij de eerste alinea wordt de breedte automatisch ingesteld; de tweede alinea is ingesteld op 200 px.


width:auto => 260px Breedte van hele blok: 300px

width: 200px => 200px

80px

Figuur 11.15 Als width is ingesteld op auto, zoals bij de bovenste alinea het geval is, wordt zijn waarde afgeleid van het blok (geel weergegeven) minus de marges, de padding en de border. Als width met de hand is ingesteld (zoals bij de onderste alinea), wordt de rechtermarge gewoonlijk aangepast om het verschil te compenseren.

#wrap {margin: 20px auto;} Figuur 11.16 Een van de belangrijkste aanpassingen van de marges betreft de div wrap. Wanneer u twee waarden instelt, wordt de eerste waarde toegepast op de boven- en ondermarge, de tweede waarde op de linker- en rechtermarge. We hebben de boven- en ondermarge ingesteld op 20px om ons ontwerp wat lucht te geven.


Figuur 11.17 De marge-instelling auto centreert de lay-out in het venster door de resterende, niet door de div wrap gebruikte 10% van het browservenster gelijkelijk over de linker- en rechtermarge te verdelen.

#sidebar {margin-left: 74%;} .photo_text {margin-left: 110px;} Figuur 11.18 De div sidebar krijgt een linkermarge van 74%, die de ruimte van de hoofdinhoud net voldoende zal overlappen om rond de tekst van de sidebar wat padding aan te brengen.

110px

74% Figuur 11.19 De marge van 110px links van de hoofdinhoud geeft ons ruimte om naderhand de foto toe te voegen.

#wrap {padding: 30px 20px 0 0;} Figuur 11.20 Wanneer u voor padding vier waarden instelt, worden deze in die volgorde aan de bovenzijde, rechterzijde, onderzijde en linkerzijde toegewezen. In dit geval is er dus alleen aan de boven- en onderzijde sprake van padding.


Figuur 11.21 Wanneer we padding aan de div wrap toevoegen, voegen we in feite padding toe tussen de inhoud (in dit geval de div screen) en zijn marge (die we op de vorige pagina instelden). Padding die aan de div wrap is toegevoegd, maakt gebruik van de achtergrondafbeelding van de div wrap.

#screen {padding: 10px 10px 10px 0;} Figuur 11.22 Nu gaan we padding toevoegen aan de inhoud van de div screen, en wel aan de bovenzijde, rechterzijde en onderzijde, niet aan de linkerzijde.

Figuur 11.23 Padding die aan de div screen is toegevoegd, wordt ingevoegd tussen de inhoud en de marge. Let op de extra 10 pixels tussen photobarcelona en de bovenrand en tussen het woord archives in het menu en de rechterrand.

Figuur 11.24 Wanneer de schermachtergrond op wit is ingesteld, is het duidelijk waarom we padding niet aan de linkerzijde hoefden toe te voegen. Ik heb een aantal andere paddingaanpassingen aangebracht die u in de codebestanden op mijn website kunt bestuderen.


Figuur 11.25 Hoewel de datum rechts is uitgelijnd, staat deze op een andere regel dan het kopelement en wordt derhalve onder de kopregel weergegeven.

.date {position: relative; top: -1.1em;} Figuur 11.26 Onthoud dat u zowel de relatieve positionering als de offset (:v) moet specificeren. Door gebruik te maken van em’s houdt u de offset proportioneel ten opzichte van de tekengrootte van de tekst.

Figuur 11.27 Door de datum van een negatieve offset te voorzien duwen we deze omhoog in de ruimte van het voorafgaande blok. In dit geval heeft dat tot gevolg dat de datum op de sectietitel is uitgelijnd. Op de daarna volgende elementen heeft dit geen enkele invloed.

.description {position: relative; left: 1em; margin-bottom: 0.2em} Figuur 11.28 Hier laten we de beschrijving vanaf de linkerrand ietwat inspringen en ietwat omhoogduwen door een negatieve marge op te geven.

Figuur 11.29 U ziet dat de beschrijving (die begint met culturele) nu naar rechts is verplaatst tot onder fotobarcelona.

10


Figuur 11.30 Onze foto staat nog steeds boven de tekst in de div photo_text. We willen die foto naar beneden verplaatsen en wel naar de ruimte die we in de linkermarge voor de foto hebben gereserveerd.

.photo_text {position: relative;} .photo {position: absolute; left: -112px; top: 3px;} Figuur 11.31 Als eerste stellen we de positie van de klasse photo_text in om de foto’s ten opzichte van die klasse te positioneren (en niet ten opzichte van de body). De negatieve linker-offset trekt de foto naar links en uit het vak photo_text.

Figuur 11.32 Waar de klasse photo_text ook heengaat, de foto zal aan de linkerzijde daarvan worden geplaatst. Onthoud dat de tekst in photo_text niet voor de foto zal wijken. Wij duwden die tekst weg door op pagina 176 een linkermarge van 110px in te stellen.

11

Hoofdstuk 11 Opmaakstijlen gebruiken voor lay-out #sidebar {position: fixed; width: 26%;} #main {padding:4px;} Figuur 11.33 We maken even een uitstapje door een fixed element te tonen, in dit geval de sidebar. Voor Internet Explorer moet de breedte expliciet worden opgegeven. In de (X)HTML heb ik de divs main, wrap en header verwijderd omdat ze bij een fixed element niet zinvol zijn. Verder plaatste ik de sidebar vóór de div main. We zullen deze CSS in de rest van het voorbeeld in dit hoofdstuk niet meer gebruiken.

Figuur 11.34 Een fixed element laat andere elementen gewoon over zich heen stromen. Bovendien beweegt het element niet wanneer de bezoeker door de pagina bladert.

Figuur 11.35 U ziet dat de sidebar onbeweeglijk op zijn plaats blijft staan wanneer de bezoeker door de inhoud aan de linkerzijde bladert.

12


#main {width: 75%; float: left;} #navbuttons {width: 22em; float: right;} Figuur 11.36 We hebben de sidebar al naar rechts geduwd. Nu zullen we de hoofdinhoud links daarvan laten zweven. De div navbuttons zal naast de beschrijving zweven in plaats van eronder.

Figuur 11.37 Het is de div main die zweeft, niet de sidebar. De sidebar vloeit gewoon naast de rechterzijde van de div main. Strikt genomen was het niet nodig om de sidebar een brede linkermarge te geven om het zwevende effect te realiseren, maar tenzij de div main exact dezelfde lengte heeft als de sidebar, helpt de marge het zwevende effect te handhaven, lang nadat de div main klaar is.

13


Figuur 11.38 Aangezien het de div main is die zweeft, vloeien alle andere elementen, met inbegrip van de voettekst, er omheen tenzij we anders aangeven.

#footer {clear:both;} Figuur 11.39 We zouden hier ook clear:left kunnen gebruiken omdat het enige belangrijke zwevende element links zweeft. Maar het kan geen kwaad om beide zijden te clearen; het kan bovendien van pas komen, mocht ons ontwerp later ingewikkelder worden.

Figuur 11.40 De clear-eigenschap geeft aan dat het desbetreffende element (in dit geval de footer) niet rond het zwevende element moet vloeien, maar in plaats daarvan na het zwevende element moet worden weergegeven.

14


Figuur 11.41 Toen we de navbuttons zwevend maakten, glipten ze onder de beschrijving. In het begin valt dat niet op omdat de beschrijving een transparante achtergrond heeft, maar wanneer u op de links probeert te klikken, geven ze niet huis.

#navbuttons {position:relative; z-index:1;} Figuur 11.42 We hebben het z-index niveau ingesteld op 1, waardoor de navbuttons boven de beschrijving worden getrokken. Bedenk dat we de navbuttons relatief moeten positioneren zodat de z-index kan functioneren. Zolang we de offsets niet instellen, gaan de navbuttons nergens heen.

Figuur 11.43 Zodra de div navbuttons bovenaan staan, werken de links naar behoren.

15

Hoofdstuk 11 Opmaakstijlen gebruiken voor lay-out .entry {border-right: 2px dashed #B74E07;} .photo img {border: none;} #footer {border-top: 2px dotted #B74E07;} Figuur 11.44 Wanneer u van een img-element een link maakt, wordt de afbeelding in de meeste browsers standaard met een blauwe rand weergegeven. In dit voorbeeld is het gemakkelijker om de rand van het img-element te verwijderen dan van a-elementen, hoewel we dat ook zouden kunnen doen.

Figuur 11.45 Aangezien er een rechterrand is toegepast op de div entry en niet op de div main, stopt en begint deze rand bij elk item. Nu de foto’s niet meer door die hinderlijke standaardrand worden omgeven, is er eveneens voldoende ruimte tussen de foto’s en de tekst.

Figuur 11.46 De footer heeft een bovenrand die dezelfde kleur heeft, maar gestippeld is in plaats van gestreept.

16


p {padding:15px; border: 10px solid red;} p.ddd {border-width: 4px; border-style: dotted dashed double solid;} p.inset {border: 10px inset blue;} p.outset {border: 10px outset green;} p.groove {border: 10px groove purple;} p.ridge {border: 10px ridge orange;} Figuur 11.47 In dit minivoorbeeld heb ik de padding en de standaardrand voor elke alinea ingesteld. Vervolgens stelde ik de randbreedte voor alle vier zijden van de eerste alinea in en daarna de stijl voor elke zijde. Bij de vier resterende alinea’s was het eenvoudiger om de 10px te herhalen dan de stijl en de kleur in twee afzonderlijke eigenschappen te scheiden.

Figuur 11.48 Links ziet u Firefox, rechts Internet Explorer 7 voor Windows. De stijlen worden op soortgelijke wijze weergegeven, maar niet op exact dezelfde manier. U kunt bijvoorbeeld zien dat de stippen in Internet Explorer feitelijk rond zijn en dat de arcering in Firefox lichter en uitgesprokener is.

17


Figuur 11.49 Wanneer u naar de home-link wijst, verandert de vorm van de muisaanwijzer in een handje en wordt de link net als elke andere link gemarkeerd.

a:hover.current {cursor: default; background: white;} Figuur 11.50 Aangezien we ons op de home page bevinden, maakt de home link deel uit van de klasse current. Vervolgens kunnen we de cursor en de achtergrond van de home link zodanig wijzigen dat deze niet als link functioneert.

Figuur 11.51 Hoewel dit een echte levende link blijft, ziet hij er niet meer uit als een link. Aangezien we ons al op de pagina bevinden waarheen deze link verwijst, is dat een zinvolle ingreep.

Figuur 11.52 De afbeeldingen aan de onderzijde van de footer worden op verscheidene regels weergegeven.

p.miniphotos {height: 33px; overflow: hidden;} Figuur 11.53 Om een enkele regel afbeeldingen weer te geven stelden we de hoogte van de alinea in op de hoogte van de grootste afbeeldingen, waarna we overflow instelden op hidden.

18


Figuur 11.54 Nu worden de extra afbeeldingen verborgen.

Figuur 11.55 De regel afbeeldingen dijt uit of krimpt in al naargelang het browservenster breder of smaller wordt gemaakt. Er worden nooit extra regels toegevoegd.

Figuur 11.56 Standaard worden afbeeldingen uitgelijnd op de onderzijde van de regel.

.miniphotos img {vertical-align:middle;} Figuur 11.57 De uitlijning is hier ingesteld op de afbeelding zelf, niet op de alinea.

Figuur 11.58 Nu zijn de afbeeldingen uitgelijnd op het midden van de regel.

19

12

Weergave van de hele toren <style type=”text/css”> p {margin:0 0 2px 0;padding:0}

Figuur 12.1 Dit is de (X)HTML: drie eenvoudige alinea’s die elk een afbeelding bevatten. De middelste alinea heeft een class hide.

Figuur 12.2 De enige CSS die hier werd toegepast, is een 2 pixels brede ondermarge van de p-elementen. Alle drie de alinea’s en hun afbeeldingen zijn zichtbaar.

Hoofdstuk 12 Dynamische effecten met opmaakstijlen

.hide {display: none;} Figuur 12.3 Wanneer we de weergave verbergen ...

Figuur 12.4 ... is er geen spoor meer van de verborgen alinea (of de afbeelding binnen die alinea).

.hide {visibility: hidden;} Figuur 12.5 Wanneer we de zichtbaarheid instellen op hidden ...

Figuur 12.6 ... blijft er een lege ruimte achter op de plaats waar de verborgen alinea zich voorheen bevond.

Hoofdstuk 12 Dynamische effecten met opmaakstijlen Rollover Buttons <style type=”text/css”> a {display: block; padding: 2px; text-decoration: none; width: 5em; margin: 2px; color: #8D4F10; font-family: “Trebuchet MS”, Verdana, sans-serif;} a:link, a:visited {background: #efb57c; border: 2px outset #efb57c;} a:focus, a:hover {background: #DAA670; border: 2px outset #DAA670; color: black;} a:active {background: #BB8E60; border: 2px outset #BB8E60;} home info voorbeeld extra Figuur 12.7 In dit eenvoudige voorbeeld hebben de nietbezochte en bezochte links één kleur voor achtergrond en rand. De focus- en aanwijslinks hebben een iets donkerder achtergrond en rand, terwijl de zwarte tekst en de actieve links een nog donkerder achtergrond en rand hebben.

Figuur 12.8 De niet-bezochte en bezochte toestanden zijn links weergegeven. Wanneer de muisaanwijzer op een link rust of die link de focus heeft, wordt de link donkerder en met een zwarte tekst weergegeven (rechts).

Hoofdstuk 12 Dynamische effecten met opmaakstijlen <style type=”text/css”> img.mini {border: none;} div#minis a:hover {background: white;} div#minis a img.big {height: 0; width: 0; border-width: 0;} div#minis a:hover img.big {position: absolute; top: 18px; left: 120px; height: 375px; width: 500px; border: none;} #frame {position: absolute; top: 16px; left: 118px; height: 355px; width: 480px; border: 2px solid red; font: 1em “Trebuchet MS”, Verdana, sans-serif; color: red; padding: 10px;} p {margin-bottom: 26px;}

Klik op de foto’s om ze in dit vak vergroot te bekijken.

Figuur 12.10 Wanneer de muisaanwijzer van een bezoeker op een foto in de linkerkolom wordt geplaatst, wordt een grotere versie in het rechterframe weergegeven.


Producten

PageWhacker 13.1

InstaWeb 4.0

BookWriter 1.0 (beta)

Ondersteuning

Online Forum

Contact

...knip last top level li ...

PageWhacker Incorporated

PageWhacker Incorporated, creatief sinds 1995, Figuur 12.11 Elk van de submenu’s is een ul met zijn lielementen binnen begin- en eindtags van het li-item van het niveau top. De links zijn leeg om in dit voorbeeld ruimte te besparen, maar op een echte pagina moeten ze uiteraard naar iets verwijzen.

#navbar ul {margin: 0; padding: 0; list-style: none;} #navbar a {display: block; width: 10em;} #navbar li {float: left; width: 10em;} #navbar li ul {display: none;} #navbar li:hover ul {display: block; width: 10em; position: absolute;} div.content {clear: left;} Figuur 12.12 De elementaire code achter CSS dropdownmenu’s is niet ingewikkeld. Verwijder de standaardopmaak van de ul, laat de lijstitems horizontaal zweven, verberg de ul van de tweede laag en laat deze alleen verschijnen wanneer de muisaanwijzer erop rust. Clear zwevende elementen voor alle er op volgende inhoud.


Figuur 12.13 Wanneer er niet door de muisaanwijzer naar items wordt gewezen, zijn de li-items van het topniveau zichtbaar, maar zijn hun ul-baby’s (met de li-items van het tweede niveau) verborgen.

Figuur 12.14 Wanneer de muisaanwijzer van uw bezoeker op de lijst is geplaatst, wordt de ul van het tweede niveau en zijn lijstitems zichtbaar.

Figuur 12.15 Dit is dezelfde code met wat extra opmaak. De volledige code van beide CSS-bestanden kunt u inzien op mijn website (zie pagina 26).

Hoofdstuk 12 Dynamische effecten met opmaakstijlen h1 {background: url(ftplogo.gif) no-repeat; height: 111px;} h1 span {display: none;} Figuur 12.16 Voor de CSS-code voor vervanging van afbeeldingen dient u een extern stijlblad te gebruiken.

Vervangende afbeelding <style type=”text/css”> @import “imagereplacement.css” screen; p {font:italic 1.4em “Trebuchet MS”, Verdana, sans-serif;margin-left:4em; color:#EB7B31}
<span>Farm Training Podcasts

Deze week zijn we op bezoek op de Blackberry Farm in South Hills. Boerin Alice laat ons de juiste manier zien om die lekkernijen in te maken.
Figuur 12.17 Het is een goed idee om CSS-bestanden die van de FIR-techniek gebruikmaken, te importeren in plaats van te koppelen, om te voorkomen dat schermlezers en mobiele browsers deze stijlen gaan gebruiken.


Figuur 12.18 Het h1-element is vervangen door het logo Farm Training Podcasts.

13

Figuur 13.1 Hoewel het lastig is om de lay-out van een grote schermbrowser te handhaven, zijn er diverse aantal technieken waarmee u uw pagina voor mobiele bezoekers toegankelijker en aantrekkelijker kunt maken.

Hoofdstuk 13 Stijlbladen voor mobiele apparaten

Figuur 13.2 Dit is de bekende interface van Google voor desktopschermen. Het is duidelijk, overzichtelijk en kan gemakkelijk voor een klein scherm worden aangepast.

Figuur 13.3 Google heeft zijn standaardpagina niet simpelweg geminiaturiseerd. Behalve dat de afmetingen van de grafische onderdelen en de lay-out werden verkleind, biedt Google de mobiele bezoekers die www.google.com bezoeken, de mogelijkheid om het Mobile Web te doorzoeken, het laatste nieuws te lezen en met Gmail te werken.


Figuur 13.4 Het stijlblad voor grote schermen ziet er in deze mobiele Openwave browser belabberd uit.

Figuur 13.5 De desktopbrowsers van Opera kunnen u laten zien hoe uw pagina er in de Opera Mobile-software uitzien. Als er geen mobiel stijlblad beschikbaar is (zoals in de vorige figuur), past Opera het automatisch aan, en in dit geval helemaal niet slecht.

Hoofdstuk 13 Stijlbladen voor mobiele apparaten photobarcelona - Liz Castro’s photos and blog about Barcelona <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> Figuur 13.6 Voeg de waarde screen toe aan uw normale stijlbladen, zodat hun eigenschappen niet worden toegepast op uw mobiele stijlblad.

Figuur 13.7 Zo ziet ons voorbeeld er uit met een leeg mobiel stijlblad. Dit document produceerde een foutmelding toen de afbeeldingsbestanden aan het eind van het document werden geladen. We zullen die bestanden op de volgende pagina verbergen.

Hoofdstuk 13 Stijlbladen voor mobiele apparaten .description {display: none;} .miniphotos {display: none;} Figuur 13.8 Als mensen onze site met een mobieltje of PDA willen bezoeken, zullen we ze de beschrijving van de site besparen. Ook zullen we de fotobalk aan de onderzijde van de pagina verbergen.

Figuur 13.9 Nu gaan ze na de navigatiebalk direct naar het eerste artikel.

Figuur 13.10 Dit is de onderzijde van de webpagina met de minifoto’s aan het zicht onttrokken.


Figuur 13.11 Hier is onze slechts 100 pixels brede kopafbeelding.

photobarcelona . . .

Figuur 13.12 Aangezien dit logo de naam van de website toont, moeten we de naam in het attribuut alt herhalen voor het geval dat de afbeelding niet wordt weergegeven.

#header img {display: none;} Figuur 13.13 We willen niet dat het logo op onze site wordt weergegeven wanneer de pagina op een normaal computerscherm wordt bekeken, dus voegen we deze regel toe aan ons stijlblad screen.

h1 {display: none;} Figuur 13.14 Het logo is in strijd met de tekstkop, dus zullen we het h1-element uitsluitend voor mobieltjes verbergen.

Figuur 13.15 De bezoekers zien nu als eerste ons logo. De tekstkop is verborgen. (Op gewone computerschermen wordt de tekstkop gewoon weergegeven.)


continued<span class=”totop”> to top

Figuur 13.16 Voeg links toe om naar de bovenzijde of de navigatiebalk te kunnen terugkeren en het voor uw bezoekers gemakkelijker te maken om op uw pagina te bladeren.

.totop {display: none;} Figuur 13.17 We willen niet dat het logo wordt weergeven op onze site wanneer deze op een doorsnee computerscherm wordt bekeken, dus voegen we deze regel toe aan ons stijlblad screen.

Figuur 13.18 Aan het eind van elk artikel plaatsen we een knop to top, zodat een bezoeker desgewenst snel naar de navigatiebalk kan terugkeren.

Hoofdstuk 13 Stijlbladen voor mobiele apparaten body {text-align: center;} .description {display :none;} .miniphotos {display: none;} h1 {font-weight: normal;} h1 {display: none;} #navbuttons {font-size: 75%;} .date, .continued {font-size: 75%;} .continued {margin-bottom: 2em;} h1, h2, h3 {margin:.5em 0 0 0; padding: 2px; font-size: 90%; color: #193D79; border-top: 4px solid #193D79;} p {padding: 0; margin: 0;} img {border: none;} Figuur 13.19 Concentreer u op verbeteringen die de pagina onderverdelen in verticale richting, niet in horizontale richting.

Figuur 13.20 Er zijn niet zo bar veel mogelijkheden op een scherm dat 120 pixels breed is, dus houd het eenvoudig, overzichtelijk, leesbaar en gemakkelijk navigeerbaar.

14

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Red and Louis

Red and Louis
Figuur 14.1 In dit (X)HTML-document heb ik een link gemaakt naar het stijlblad screen.css ten behoeve van de stijlen die zullen worden gebruikt wanneer de pagina op het scherm wordt getoond, en een link naar het stijlblad print.css voor de stijlen die bij het afdrukken gebruikt dienen te worden.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8” /> Red and Louis <style type=”text/css”> @import “print.css” print;

Red and Louis
Figuur 14.2 In dit voorbeeld, dat in alle huidige browsers hetzelfde effect moet bewerkstelligen, heb ik een link gemaakt naar het stijlblad screen.css, maar heb ik het stijlblad print. css geïmporteerd.

Hoofdstuk 14 Stijlbladen om webpagina’s af te drukken

Figuur 14.3 Bij een schermversie kunt u een inhoudsopgave, een paar advertenties en schreefloze (sans-serif) lettertypen gebruiken die op het scherm gemakkelijker leesbaar zijn.

Figuur 14.4 Wanneer het document moet worden afgedrukt, kunt u de sidebar en de advertenties weglaten en serif-lettertypen gebruiken om het geheel leesbaarder te maken. In beide gevallen werd exact dezelfde (X)HTML-code gebruikt. De browser selecteer het juiste stijlblad automatisch.

Hoofdstuk 14 Stijlbladen om webpagina’s af te drukken #toc {display: none;} body {margin: .7in;} p {font: 14pt serif; page-break-inside: avoid;} h2 {page-break-before: always;} Figuur 14.5 Ik wil niet dat alinea’s half op de ene, half op de andere pagina komen te staan, dus gebruik ik page-breakinside:avoid. Om ervoor te zorgen dat elke kop van het tweede niveau op zijn eigen pagina begint, voeg ik aan de h2-tags page-break-before:always toe.

Figuur 14.6 Door alle h2-elementen (bijvoorbeeld The Storm) te laten voorafgaan door een pagina-einde weet ik zeker dat ze bovenaan op een nieuwe pagina worden geplaatst. U ziet dat er onderaan op de pagina extra ruimte is ontstaan omdat de daaropvolgende alinea te lang was om in zijn geheel (met vermijding van pagina-einden binnen alinea’s) op de pagina te passen. In plaats daarvan wordt de hele volgende alinea op de volgende pagina afgedrukt.

Hoofdstuk 14 Stijlbladen om webpagina’s af te drukken #toc {display: none;} body {margin: .7in;} p {font: 14pt serif; page-break-inside: avoid;} h2 {page-break-before: always;} a {text-decoration: none; color: black;} a:after {content: “ (“ attr(href) “)”; font-style: italic;} Figuur 14.7 Om te beginnen verwijder ik de kleuren en onderstrepingen van links op het scherm. Vervolgens neem ik het href-attribuut van het geselecteerde element en voeg ik er haakjes en ten slotte cursieve opmaak aan toe.

Figuur 14.8 De waarde van het href-attribuut van de link, oftewel de gewenste URL, wordt afgedrukt na het ‘klik-opme’-gedeelte van de link (in dit geval mijn naam), ingesloten door haakjes en cursief opgemaakt (de laatste regel van de figuur).

Figuur 14.9 Voordat de eigenschap widows werd toegepast, begon pagina 3 met anderhalve regel van de vorige alinea.

Hoofdstuk 14 Stijlbladen om webpagina’s af te drukken

toc {display: none;} body {margin: 2in; font-family: “Times”, serif;} h2 {page-break-after: avoid;} p {font: 12pt serif; orphans: 4; widows: 4;} Figuur 14.10 De eigenschap orphans regelt hoeveel regels er geïsoleerd onderaan op de pagina mogen staan; widows bepaalt daarentegen het minimumaantal regels dat bovenaan een pagina moet staan.

Figuur 14.11 Na toepassing van de eigenschap widows wordt het pagina-einde twee regels eerder ingevoegd, met als gevolg dat er vier regels bovenaan pagina 3 komen te staan.

15

Een gloeilamp verwisselen

Haal de stekker van de lamp uit het stopcontact.

Draai de oude peer eruit.

Haal de nieuwe peer uit de verpakking.

Controleer of het aantal Watt geschikt is.

Draai de nieuwe peer in.

Steek de stekker van de lamp in het stopcontact en doe de lamp aan!

Figuur 15.1 Er bestaat geen officiële manier om de titel van een lijst op te maken. U kunt een doorsnee kop gebruiken (zie pagina 61).

Figuur 15.2 Deze lijst maakt gebruik van Arabische cijfers (de standaardinstelling) om een genummerde lijst te maken.

Hoofdstuk 15 Lijsten Ongeordende lijsten zijn waarschijnlijk de meest gebruikte lijsten op het web. We gebruiken ze om een reeks items in een willekeurige volgorde op te sommen, bijvoorbeeld websites of namen.
PageWhacker, versie 12.0-- biedt:

Nieuwe of verbeterde functies worden door een rond opsommingsteken aangeduid

Opmaak met één muisklikklik

Spellingscontrole voor 400 talen

Plug-in om afbeeldingen te retoucheren

Speciale HTML-filters

Ongelimiteerd Ongedaan maken

Automatisch boeken schrijven

Figuur 15.3 De lijstitems van ongeordende lijsten zijn identiek aan die van geordende lijsten. Alleen de ul-tag verschilt.

Figuur 15.4 Ongeordende lijsten hebben standaard ronde, egaal gekleurde opsommingstekens.

Hoofdstuk 15 Lijsten
De Great American Novel

Inleiding

Ontwikkeling

Climax

Afloop

Epiloog

Figuur 15.5 Dit is een eenvoudige geordende lijst waarop we Romeinse cijfers (upper-roman) zullen toepassen.

li {list-style-type: upper-roman;} Figuur 15.6 U mag de eigenschap list-style-type toepassen op elk willekeurig lijstitem. Als u twee lijsten op deze pagina zou hebben, waarvan er een ongeordend is, zou u Romeinse cijfers alleen op de geordende lijst kunnen toepassen door de selector in dit voorbeeld in ol li te wijzigen.

Figuur 15.7 Nu is de geordende lijst genummerd met Romeinse cijfers. In de meeste browsers worden numerieke opsommingstekens rechts uitgelijnd.

Een gloeilamp verwisselen

Draai de oude peer eruit.
(een paar stappen zijn hier weggelaten)

Draai de nieuwe peer in.

Steek de stekker van de lamp in het stopcontact en doe de lamp aan!

Figuur 15.8 In dit voorbeeld heb ik een paar stappen weggelaten om de oorspronkelijke nummering te behouden. Dus begin ik de hele lijst met het getal 2 (via start=”2”) en stel ik de waarde van het derde item vervolgens in op 5 (via value=”5”).

Figuur 15.9 Niet alleen worden het eerste en derde item genummerd zoals we hebben opgedragen, maar ook wordt het derde item (Draai de nieuwe peer in) daardoor beïnvloed.


Nieuwe of verbeterde functies worden door een rond opsommingstken aangeduid.

Opmaak met één muisklik



Speciale HTML-filters

Ongelimiteerd Ongedaan maken

Automatisch boeken schrijven

Figuur 15.10 Ik wil in mijn lijst een de nieuwe items een speciaal opsommingsteken.

li.new { list-style-image: url(http://www.cookwood.com/ html6ed/examples/lists/rightarrow.gif); } Figuur 15.11 Om verwarring te voorkomen kunt u de locatie van de opsommingstekenafbeelding opgeven met een absolute URL (zie pagina 35).

Figuur 15.12 Het is soms lastig om aangepaste opsommingsteken met standaard opsommingstekens te mengen. Let er op dat u de aangepaste opsommingstekens niet te groot maakt.


Nieuwe of verbeterde functies worden door een rond opsommingstken aangeduid.

Opmaak met één muislklik. Dit is vooral handig als u een deadline moet halen. U geeft gewoon aan of het eindproduct een boek of een website moet zijn, u klikt en ...klaar!


Figuur 15.13 Ik heb wat meer tekst aan het eerste “nieuwe’ item toegevoegd om het effect van deze binnen de tekstregel staande opsommingstekens wat duidelijker te maken.

li.new { list-style-image: url(http://www.cookwood.com/ html6ed/examples/lists/rightarrow.gif); list-style-position: inside; } Figuur 15.14 Ik heb list-style-position: inside toegevoegd aan het stijlblad dat in figuur 11.15 werd weergegeven.

Figuur 15.15 De opsommingstekens van de “nieuwe’ items beginnen in de linkermarge van het lijstitem in plaats van in de marge van de lijst.

Hoofdstuk 15 Lijsten li.new { list-style: url(http://www.cookwood.com/ html5ed/examples/lists/rightarrow.gif) inside square;} Figuur 15.16 Deze stijlregel is equivalent aan: de list-styleimage instellen op het bestand right-arrow.gif, de list-styleposition op inside en de list-style-type op square. Het is gewoon een kortere manier.

Figuur 15.17 Zolang de afbeelding beschikbaar is, is het resultaat hetzelfde als in figuur 15.15.

Figuur 15.18 Als de afbeelding niet beschikbaar is, wordt het vierkant gebruikt.


Tijden van klassieke Griekse werkwoorden

Tegenwoordige tijd

<span class=”example”>e.g. .luo, luomai. De tegenwoordige tijd toont meestal de pure stam in sterke werkwoorden. [knip]

Futurum

<span class=”example”>e.g. luso, lusomai, luthesomai. Het futurum heeft de [knip]

Aorist

<span class=”example”>e.g. .elusa, eluthen, elusamen. De aoristus (from [knip]

Figuur 15.19 Elk lemmawoord wordt gelabeld met de tag dt, de omschrijving zelf met de tag dd.

dt {font-weight: bold;} .example {font-style: italic;} Figuur 15.20 Wellicht wilt u aan uw definitieterm opmaak toevoegen om hem opvallender te maken.

Figuur 15.21 Standaard wordt het gedefinieerde woord (de dt ) links uitgelijnd, terwijl de omschrijving (dd) inspringt.

De Great American Novel

Inleiding

Jeugd van de jongen

Jeugd van het meisje

Ontwikkeling

Jongen ontmoet meisje

Jongen en meisje worden stel
v
Jongen en meisje maken ruzie

Climax

Jongen stelt meisje ultimatum

Meisje kan oren niet geloven

Jongen verontwaardigd over verontwaardiging van meisje

Meisje doet jongen suggestie naar pomp te lopen

Afloop

Epiloog

Figuur 15.22 Hier hebben we vier geneste lijsten, namelijk één in het lijstitem Inleiding, één in het item Ontwikkeling, één in het item Climax en één gemarkeerde vette lijst binnen het item Jongen stelt meisje ultimatum (dat zich binnen het item Climax bevindt).

Hoofdstuk 15 Lijsten ol li {list-style-type: upper-roman; font-size: 75%;} ol ol li {list-style-type: upper-alpha;} ol ol ol li {list-style-type: decimal;} li li {font-size: 100%;} Figuur 15.23 Elk niveau van een geneste lijst kan afzonderlijk worden opgemaakt. Als u percentages voor lijsttekst gebruikt, let er dan op dat u de li li {font-size:100%} toevoegt zodat de tekst leesbaar blijft (zie de laatste tip).

Figuur 15.24 Lijsten van het eerste niveau (ol li) hebben Romeinse cijfers, lijsten van het tweede niveau (ol ol li) hebben hoofdletters, lijsten van het derde niveau (ol ol ol li) hebben Arabische cijfers.

10

16

Figuur 16.1 Met behulp van tabellen realiseert u een professioneel ogende opmaak die uw bezoekers verbijstert en toch met de meeste oudere browsers compatibel is.

Figuur 16.2 Dit is een overzicht van het belangrijkste voorbeeld dat in dit hoofdstuk wordt gebruikt. Ik gebruik een tabel voor de bovenste verzameling advertenties en het logo en een andere tabel voor de lager gelegen navigatiebalk en de inhoud. In die inhoud zweeft nog een derde tabel.

Hoofdstuk 16 Tabellen

Een baby-olifant verkeert in het gezelschap van zijn moeder, tantes, oudtantes en misschien zelfs zijn oma

Figuur 16.3 Deze uiterst simpele tabel bestaat uit twee rijen die elk slechts één cel hebben.

body {font-family: “Trebuchet MS”, Verdana, sansserif;} .caption {font-size: .8em; font-style: italic;} Figuur 16.4 Het stijlblad bevat uitsluitend tekstopmaak en geen dingen die de tabel zelf beïnvloeden.

Figuur 16.5 Standaard breidt een tabel zich uit tot de rand van het browservenster. Figuur 16.6 Hier ziet u precies dezelfde tabel in een smaller browservenster. De tabel krimpt simpelweg om zich aan de omvang van het venster aan te passen.



Figuur 16.7 In dit voorbeeld stellen we een 10 pixels brede rand in aan de buitenzijde van de tabel. Wanneer u het borderattribuut instelt (op welke waarde dan ook), zijn de celranden altijd 1 pixel breed.

Figuur 16.8 Hoewel randen meestal niet worden weergegeven in tabellen die voor opmaak worden gebruikt, zijn ze vaak tijdelijk handig om precies te laten zien wat er in een tabel gebeurt. Hier kunnen we zien dat de tabel uit twee rijen bestaat en dat elke rij slechts uit één cel bestaat. Het (X)HTMLattribuut border schakelt zowel tabelranden als celranden in.

body {font-family: “Trebuchet MS”, Verdana, sans-serif} table {border: 8px double red;} .caption {font-size: .8em; font-style: italic;} Figuur 16.9 U kunt de breedte, de kleur en de stijl via de border-eigenschap in één klap instellen.


Figuur 16.10 Deze pagina is het resultaat van de (X)HTML in figuur 16.7 en de CSS in figuur 16.9. Omdat we de CSSeigenschap border uitsluitend op het element table hebben toegepast, worden de randen rond cellen in het geheel niet beïnvloed.

Figuur 16.11 Deze pagina gebruikt dezelfde CSS als in de vorige figuur (16.10), maar zonder border-attribuut in de (X)HTML. U ziet dat er nu geen randen om de cellen zichtbaar zijn.

body {font-family: “Trebuchet MS”, Verdana, sans-serif;} table, td {border: none;} .caption {font-size: .8em; font-style: italic;} Figuur 16.12 Deze CSS zullen we in de rest van het voorbeeld voor randen gebruiken.



Figuur 16.13 Deze tabel bevat een 200 pixels brede afbeelding zonder randen. We stellen de breedte van de tabel in op 200 pixels om te voorkomen dat de tekst doorschiet tot voorbij de rand van de afbeelding.

table, td {border: none;} .rightsidebar {width: 200px;} .caption {font-size: .8em; font-style: italic;} Figuur 16.14 U kunt een stijlblad gebruiken of (X)HTML of beide. Een stijlblad heeft voorrang boven de (X)HTML (hoewel ze in dit voorbeeld hetzelfde zijn, zodat het er niet toe doet).

Figuur 16.15 De CSS-eigenschap width wordt goed ondersteund. U kunt deze eigenschap met een gerust hart gebruiken in plaats van het width-attribuut van (X)HTML.

Hoofdstuk 16 Tabellen .rightsidebar {width: 100px;} Figuur 16.16 In dit geval is de tabel smaller gemaakt dan de afbeelding die de tabel bevat.

Figuur 16.17 De afbeelding (200px) onderdrukt de op 100px ingestelde eigenschap en/of het width-attribuut, waardoor het eindresultaat hetzelfde is als in figuur 16.15. U kunt een tabel of cel niet smaller maken dan zijn afbeeldingen!

.rightsidebar {width: 300px;} Figuur 16.18 in dit geval is de tabel breder gemaakt dan de afbeelding die de tabel bevat.

Figuur 16.19 Natuurlijk kunt u een tabel breder maken dan zijn inhoud. In zo’n geval wordt de tekstregel langer om de ruimte op te vullen.


Figuur 16.20 De (verouderde, maar nog steeds goed ondersteunde) waarde center toevoegen aan het attribuut align is de eenvoudigste manier om een tabel te centreren.

table, td {border: none;} .rightsidebar {width: 200px; margin-right: auto; margin-left: auto;} .caption {font-size: .8em; font-style: italic;} Figuur 16.21 Als u de rechter- en linkermarge instelt op auto, maakt u ze gelijk aan elkaar; dit is de essentie van centreren.

Figuur 16.22 Hoe breed het browservenster ook is, de tabel wordt altijd precies in het midden gecentreerd.

De waarheid over olifanten


Het is moeilijk te zeggen wat er in een babyolifant omgaat wanneer zijn moeder hem in slaap Figuur 16.23 Ik heb wat tekst toegevoegd waarbinnen de tabel kan zweven. Wanneer u een tabel rechts uitlijnt, vloeit de tekst naar links. Let er ook op dat de tabel in de broncode voorafgaat aan de tekst die rond de tabel moet omlopen.

body {font-family: “Trebuchet MS”, Verdana, sans-serif; color: #006666;} table, td {border: none;} .rightsidebar {width: 200px; float: right;} .caption {font-size: 8em; font-style: italic; color: black;} Figuur 16.24 Wanneer u de eigenschap float gebruikt, moet u een breedte opgeven. De nieuwe tekst is groen en het onderschrift heb ik een zwarte kleur gegeven.

Figuur 16.25 Aangezien de tabel rechts zweeft, loopt de tekst aan de linkerzijde om de tabel heen.




Het is moeilijk te zeggen wat er in een [knip]

Figuur 16.26 Hier heb ik een buitentabel met één enkele rij gemaakt. De linkerkolom bevat een navigatiebalk en de rechterkolom de hoofdinhoud (oftewel datgene waaraan we in dit hoofdstuk tot dusverre hebben gewerkt) met zijn eigen tabel met tekstomloop.

Figuur 16.27 Hier heb ik de hoofdinhoud (rechts) gecombineerd met de navigatiebalk (links) door ze in een tabel in afzonderlijke cellen te plaatsen. Ik heb een rand toegevoegd zodat u kunt zien wat er aan de hand is.

Hoofdstuk 16 Tabellen ...

Lions Figuur 16.28 In plaats van een nieuwe tabel te maken om de logobalk en de tabel uit figuur 16.27 te combineren, verkrijgen we een schonere, kortere en snellere code als we twee onafhankelijke tabellen maken.

.caption {font-size: .8em; font-style: italic; color: black;} .toc {width: 120px;} .toc a:link {text-decoration: none; font-weight: bold;} Figuur 16.29 Ik gebruik CSS om de breedte van de linkerkolom in de onderste tabel af te stemmen op de breedte van de linkerkolom van de bovenste tabel.

Figuur 16.30 De nieuwe tabel staat bovenop de oude tabel. Aangezien de eerste kolommen dezelfde breedte hebben, lijkt het alsof ze deel uitmaken van dezelfde lay-out.

10


Leeuwen
Gordeldieren Figuur 16.31 De middelste afbeelding in de logobalk moet gecentreerd blijven en de rechterafbeelding moet rechts blijven staan, ongeacht de grootte van het browservenster. De items in de navigatiebalk aan de linkerzijde moeten boven in de cel staan en niet in het midden zoals dat standaard het geval is.

body {font-family: “Trebuchet MS”, Verdana, sans-serif; color:#006666;} table, td {border:none;} h1 {font-size: 1.8em; white-space: nowrap;} p {font-size: .9em;} .rightsidebar {width: 200px; float: right; border: none;} .caption {font-size: .8em; font-style: italic; color: black; text-align: center;} .toc {vertical-align: top; width: 120px;} .center {text-align: center;} .right {text-align: right;} .main {vertical-align: top;} Figuur 16.32 Voor het bijschrift bij de foto van de olifant en de linker navigatiebalk heb ik gewoon de uitlijningseigenschappen aan de bestaande klassen toegevoegd. Voor de andere cellen moest ik speciale klassen maken om de uitlijning te verzorgen en dat leek me eerlijk gezegd een beetje al te veel moeite.

11

Hoofdstuk 16 Tabellen Figuur 16.33 De navigatiebalk aan de linkerzijde valt onmiddellijk op, mooi boven in de cel, terwijl het bijschrift onder de foto van de olifant keurig is gecentreerd.

Figuur 16.34 U ziet dat de middelste cel van de bovenste rij gecentreerd blijft, ook al is het venster breder. Nog belangrijker is dat de rechtse cel met de leeuw rechts uitgelijnd blijft, recht boven de olifant en uitgelijnd op de rest van de tekst.

12


Figuur 16.35 U kunt het bgcolor-attribuut toevoegen aan elk gedeelte van de tabel. Hier heb ik de achtergrond van de logobalk afgestemd op de middelste afbeelding, zodat het lijkt alsof dit met het browservenster mee rekt. Verder heb ik een donkergroene achtergrond aan de navigatiebalk toegevoegd.

Figuur 16.36 Links ziet u de gele achtergrond rond en tussen de afbeeldingen in de logobalk. Op de foto hierboven ziet u dat de groene achtergrond ook de geneste tabel omringt en als achtergrond dient voor de tekst (die ik wit heb gemaakt).

13

Hoofdstuk 16 Tabellen body {font-family: “Trebuchet MS”, Verdana, sans-serif; color: #006666;} table, td {border: none;} h1 {font-size: 1.8em; white-space: nowrap;} p {font-size: .9em;} .rightsidebar {width: 200px; float: right; border:none; background: #006666; color: white;} .caption {font-size: .8em; font-style: italic; text-align: center; color: white;} .toc {vertical-align: top; width:120px; background: #339966 url(longerfish.jpg);} .center {text-align: center;} .right {text-align: right;} .main {vertical-align: top;} .logobar {background: #ffff66;} Figuur 16.37 In dit voorbeeld heb ik alle achtergrondkleuren gemaakt met CSS in plaats van (X)HTML. Bovendien heb ik een achtergrondafbeelding aan de navigatiebalk toegevoegd.

Figuur 16.38 Zit de ruimte om de cellen u dwars? Daar gaan we nu wat aan doen!

14


celinhoud

cell contents

celinhoud

cell contents

celinhoud

celinhoud

cell contents cell contents

Cellpadding heeft betrekking op de ruimte tussen de inhoud van een cel en zijn rand (donkerroze)

Tabelrand Cellspacing heeft betrekking op de ruimte tussen de randen van de cellen (lichtroze)

Celranden

Figuur 16.39 Cellspacing voegt ruimte toe tussen cellen. Cellpadding voegt ruimte toe tussen de celinhoud en de celrand.

Figuur 16.40 Ik heb zowel de cellpadding als de cellspacing ingesteld op 0 zodat er geen extra ruimte rond of tussen de cellen van mijn logobalk (en overige elementen) overblijft.

Figuur 16.41 De extra ruimten tussen de cellen zijn verdwenen (met name in de logobalk en tussen de logobalk en de vissenbalk). De tabel ziet er naadloos uit (hoewel hier en daar nog een beetje krap). In Explorer is er geen marge of pading boven de p- en h1-elementen in cellen.

15


Figuur 16.42 In veel browsers laten de marge en padding voor de h1- en p-elementen extra ruimte open onder de bovenzijde van de cel.

h1 {font-size: 1.8em; white-space: nowrap; margin: 10px 0 5px;} p {font-size: .9em; margin: 0 0 10px 0;} .rightsidebar {width: 200px; float: right; border: none; background: #006666; color: white; margin: 0 0 5px 10px;} .caption {font-size: .8em; font-style: italic; text-align: center; padding: 5px; margin: 0; color: white;} .toc {vertical-align: top; width: 110px; background: #339966 url(longerfish.jpg); padding: 25px 0 0 10px;} .center {text-align: center;} .right {text-align: right;} .main {vertical-align: top; padding-left:10px;} Figuur 16.43 Om de ruimte in de tabel aan te passen moeten we de eigenschappen margin en padding aanpassen. Ik heb de breedte van de inhoudsopgave verminderd tot 110 om de 10 pixels padding aan de linkerzijde mogelijk te maken.

16


Figuur 16.44 Nu hebben we de ruimtelijke indeling onder controle.

[knip]
[knip] van een olifant kon vinden, terwijl ik over gorilla’s nadacht?

Copyright © 2002 by Northampton Zoological Society, Inc.

Figuur 16.45 De onderste tabel bestaat nu uit twee rijen. De eerste rij bevat de linker navigatiecel en de hoofdinhoudcel. De tweede rij bevat één cel met copyright-informatie die beide kolommen beslaat.

17


Figuur 16.46 De copyright-rij aan de onderzijde omspant beide kolommen.

Figuur 16.47 Ik kan ervoor zorgen dat de linker navigatiebalk beide rijen omspant. Vervolgens moet ik de cel van de tweede rij zodanig aanpassen dat die niet meer twee kolommen probeert te omspannen.

Figuur 16.48 Nu omspant de linker navigatiebalk beide rijen en bestaat de copyright-rij uit één cel.

18


[knip]
[knip] van een olifant kon vinden, terwijl ik over gorilla’s nadacht?

Copyright © 2002 by Northampton Zoological Society, Inc.

Figuur 16.49 De eerste colgroup bevat de namen van de steden, de tweede is bestemd voor de tabelgegevens.

body {font-family: “Trebuchet MS”, “Verdana”, sans-serif;} td {padding: 4px 10px;} caption {font-weight: bold; color: #9A6016; padding-bottom: 5px;} .cities {background: #D1A367;} .data {background: #F0E7DB;} Figuur 16.50 Los van de elementaire CSS-opmaak die we eerder hebben besproken, pas ik ook achtergrondkleuren toe op de klassen cities en data. U kunt de eigenschappen background, border, width en visible uitsluitend toepassen op colgroup-elementen.

Figuur 16.51 Het colgroup-element maakt het gemakkelijk om alle cellen in een kolom te selecteren en ze in één klap op te maken. Hier hebben we een achtergrondkleur op elk colgroup-element toegepast.

19

Waargenomen kwartels in Oost-Gelderland
Jong Oud
Figuur 16.52 Nu splits ik de tweede kolomgroep in twee afzonderlijke niet-structurele kolomgroepen (door middel van col) om een hele kolom tegelijk te kunnen opmaken zonder dat dit invloed heeft op de manier waarop lijnen worden getrokken (zie pagina 249).

body {font-family: “Trebuchet MS”, “Verdana”, sans-serif} td {padding: 4px 10px;} caption {font-weight: bold; color: #9A6016; padding-bottom: 5px;} .cities {background: #D1A367;} .data {background: #F0E7DB;} .totals {background: #F3D9B7;} Figuur 16.53 We zullen aan elk nieuw col-element een achtergrondkleur toevoegen.

Figuur 16.54 Nu heeft de kolom Total zijn eigen achtergrondkleur.

20

Hoofdstuk 16 Tabellen ... Figuur 16.55 Zodra de eerste rij in een thead-sectie stat, kan ik er een klasse stijlen voor definiëren die op elke cel in de thead zal worden toegepast.

.data {background: #F0E7DB;} .totals {background: #F3D9B7;} .titles {text-align: center; background: #d1a367;} tbody {text-align: center;} Figuur 16.56 In de CSS zal ik het thead-element dezelfde achtergrond geven als de linkerkolom en zullen zowel de thead als de tbody worden gecentreerd.

Figuur 16.57 Alle elementen in de thead-sectie worden opgemaakt en als eenheid beschouwd wanneer de binnenranden worden getrokken.

21

Jong Oud

Jong Oud Totaal

Didam 2 12

Figuur 16.58 Voeg het attribuut frame toe binnen de tabletag. Ik heb een dikke rand toegevoegd zodat u het effect gemakkelijker kunt zien. Als u border weglaat en het frameattribuut niet gelijk is aan void, krijgt u standaard een rand die 1 pixel breed is.

body {font-family: “Trebuchet MS”, “Verdana”, sans-serif;} table {border-color: #754F1D;} td {padding: 4px 10px;} Figuur 16.59 Ik heb een kleur aan de rand toegevoegd zodat die beter oogt. U zou hier ook nog border-width kunnen instellen. Maar als u border-style hier instelt, denkt Internet Explorer dat u de rand overal wilt hebben en wordt het frame-attribuut genegeerd.

Figuur 16.60 Alleen de horizontale buitenranden worden weergegeven.

22



Figuur 16.61 Het rules-attribuut bepaalt welke interne randen moeten worden weergegeven. In dit geval zijn dat de verticale randen. In het CSS-bestand heb ik niets gewijzigd.

Figuur 16.62 Als rules is ingesteld op cols (en frame op void), worden alleen de binnenranden tussen kolommen getrokken. U ziet hoe dun die randen zijn.

Figuur 16.63 Ik heb het attribuut rules ingesteld op groups, maar ik blijf de buitenrand verbergen.

Figuur 16.64 Nu worden de binnenlijnen tussen groepen getrokken, waardoor een interessant effect wordt verkregen.

23


Figuur 16.65 Als een van uw cellen een item bevat dat uit twee wat langere woorden bestaat, zult u tekstterugloop wellicht willen vermijden om de numerieke gegevens een regelmatiger uiterlijk te geven.

Figuur 16.66 Voeg gewoon het nowrap-attribuut toe aan de td-cel die niet verscheidene regels mag bevatten.

Figuur 16.67 Hoe smal het venster en de tabel ook worden, de celinhouden blijven niettemin op één regel staan, zelfs als dat inhoudt dat een gedeelte van de tabel niet in het venster past.

24


table {table-layout: fixed;} Figuur 16.68 De eigenschap table-layout met de waarde fixed helpt om tabellen sneller weer te geven. Dit is handig bij tabellen met ongeveer even grote cellen.

25

17

Persoonsgegevens
Naam:
Adres:
Stad/dorp:
...
Figuur 17.1 Elk formulier bestaat uit drie onderdelen: de form-tag, de feitelijke formulieronderdelen waar de bezoeker informatie invoert, en de submitknop (of actieve afbeelding) die de vergaarde informatie naar de server stuurt.

#form {font-family: “Trebuchet MS”, Verdana, sans-serif; width: 25em;} h2 {margin: 0 0 0 0; padding: 0;} p {margin: 0 0 1em 0; padding: 0; font-size: 90%;} fieldset {background: #C361D2; border: none; margin-bottom: 1em; width: 24em; padding-top: 1.5em;} p.legend {background: #DED983; color: black; padding: .2em .3em; font-size: 1.2em; border: 2px outset #DED983; position: relative; margin-bottom: -1em; width: 10em; margin-left: 1em; margin-top: 1em;} #personal {background: #F3B4F5; border:outset #f3b4f5;} #choices {background: #F5D9B4; border: outset #f5d9b4;} Figuur 17.2 Een gedeelte van het stijlblad waarmee het formulier werd opgemaakt. Het volledige stijlblad kunt u vinden op mijn website (zie p9 26).

Hoofdstuk 17 Formulieren

Figuur 17.3 Dit is het volledige formulier dat in dit hoofdstuk wordt besproken.

Hoofdstuk 17 Formulieren Figuur 17.4 Dit is het script waarmee de formulieren uit dit hoofdstuk worden verwerkt. U ziet dat het PHP-script direct op een (X)HTML-pagina is geplaatst. (Op mijn website vindt u een becommentarieerde versie van dit script.)

Formuliergegevens verwerken <style type=”text/css”>...
Dit is een heel eenvoudig PHP-script dat ...

Winterswijk 7 5

Geen gegevens ingediend.
”; } else { foreach ($_POST as $key => $value) { if (get_magic_quotes_gpc()) $value= stripslashes($value); if ($key==”Extras”) { if (is_array($_POST[‘extras”]) ){ print “”; } else { print “\n”; } } else { print “\n”; } } } ?>

Veldnaam Waarde(n)
$key ”; foreach ($_POST[‘extras”] as $value) { print “$value
”; } print “
$key $value
$key $value


Figuur 17.5 Het in figuur 17.4 weergegeven script plaatst de naam en de waarde(n) van elk veld in een tabel in het browservenster. U kunt dit uitproberen op (en downloaden van) mijn website.

Hoofdstuk 17 Formulieren $body =”Dit zijn de ingediende gegevens:\n”; foreach ($_POST as $key => $value) { $key = clear_user_input($key); $value = clear_user_input($value); if ($key==”extras”) { if (is_array($_POST[‘extras”]) ){ $body .= “$key: “; $counter =1; foreach ($_POST[‘extras”] as $value) { //Voeg komma en spatie toe tot aan laatste element if (sizeof($_POST[‘extras”]) == $counter) { $body .= “$value\n”; break;} else { $body .= “$value, “; $counter += 1;

}}

} else {

//Dit is een heel eenvoudig PHP-script dat ...

$body .= “$key: $value\n”;

if (empty($_POST)) {

}

print “
Geen gegevens ingediend.
”;

} else {

print “”;

$body .= “$key: $value\n”;

exit(); } function clear_user_input($value) { if (get_magic_quotes_gpc()) $value=stripslashes($value); $value= str_replace( “\n”, ‘”, trim($value)); $value= str_replace( “\r”, ‘”, $value); return $value; } if ($_POST[‘comments”] == ‘Typ hier eventuele opmerkingen”) $_POST[‘comments”] = ‘”;

} } extract($_POST); $email = clear_user_input($email); $name = clear_user_input($name); $from=”From: ‘. $email . “(“ . $name . “)” . “\r\n” . ‘Bcc: [email protected]” . “\r\n”; $subject = ‘Bed besteld op website”; mail (‘[email protected]”, $subject, $body, $from); ?>
Bedankt voor uw bestelling! We sturen u het

Figuur 17.6 Dit script werd gebruikt om formuliergegevens per e-mail te versturen. Een van commentaar voorziene versie van dit script kunt u vinden op mijn website.

bed onmiddellijk.


Figuur 17.7 Dit formulier is op het e-mailveld na identiek aan het andere formulier.

Figuur 17.8 Het is altijd een goed idee om uw bezoeker feedback te geven over wat er zojuist is gebeurd, aangezien zij niet kunnen zien dat het e-mailbericht inderdaad naar u wordt verstuurd.

Figuur 17.9 Dit is het e-mailbericht dat werd ontvangen nadat het formulier uit figuur 17.7 werd ingediend.


Persoonsgegevens

Keuzemogelijkheden

Suggesties
Figuur 17.10 Ik heb een id-attribuut aan elk fieldset-element toegevoegd om het gemakkelijker te maken opmaakstijlen op elke groep formulierelementen toe te passen.

fieldset {margin-bottom:1em; width: 24em; padding-top: 1.5em;} #personal {background: #f3b4f5; border:outset #f3b4f5;} Figuur 17.11 Alle fieldset-elementen heb ik een marge, breedte en padding gegeven en vervolgens van een afzonderlijke achtergrondkleur en buitenrand voorzien.

Figuur 17.12 Internet Explorer doet rare dingen met het element legend. Kijk naar eens naar de achtergrond van het fieldset-element.

Persoonsgegevens

Figuur 17.13 Aangezien Internet Explorer het element legend zo slecht ondersteunt, raad ik aan om een doorsnee p-tag met een class legend te gebruiken.

p.legend {background:#DED983; color: black; border: 2px outset #DED983; padding: .2em .3em; font-size: 1.2em; position: relative; margin: 1em 0 -1em 1em; width: 10em;} Figuur 17.14 Vervolgens maak ik de legend-alinea op met een achtergrond en buitenrand. Vervolgens geef ik de alinea een negatieve ondermarge en een relatieve positionering om hem bovenop de fieldset te plaatsen.

Figuur 17.15 Nu ziet het bijschrift er zelfs in de weerbarstige Internet Explorer 6 goed uit.

Persoonsgegevens

Naam:
Adres:
Stad/dorp:
Prov.:
Postcode:
Figuur 17.16 Hoewel het essentieel is om het name-attribuut voor elk tekstvak in te stellen, hoeft u slechts het valueattribuut in te stellen wanneer u standaardwaarden aan een tekstvak wilt toevoegen.

Figuur 17.17 Vanwege de verschillende typen velden kunnen tekstvakken verschillende grootten hebben. We zullen ze straks aanpassen (op pagina 264).


Postcode:
Klantnummer: Figuur 17.18 Het name-attribuut identificeert het wachtwoord wanneer u de gegevens compileert.

Figuur 17.19 Wanneer een bezoeker een wachtwoord in een formulier intypt, wordt het wachtwoord verborgen door opsommingstekens of sterretjes.

Naam:
Adres:
Stad/dorp:
Prov.:
Postcode:
Klantnummer:
Figuur 17.20 Door veldnamen op een formele manier te markeren kunt u ze in een CSS-stijlblad gemakkelijk terugvinden.

10

Hoofdstuk 17 Formulieren #personal label {position: absolute; font-size: 90%; padding-top: .2em; left: 20px;} input {margin-left: 9em; margin-bottom:.2em; line-height:1.4em; } Figuur 17.21 Nu kan ik de labels uit de stroom halen en de tekstvakken en wachtwoordvakken rechts uitlijnen.

Figuur 17.22 Het formulier begint vaste vormen aan te nemen.

Soort bed:King Queen
Twin Single
Figuur 17.23 Het name-attribuut heeft bij keuzerondjes twee functies. Enerzijds koppelt het de keuzerondjes in een bepaalde verzameling aan elkaar, anderzijds geeft het de waarde aan wanneer die naar het script wordt gezonden. Het value-attribuut is essentieel omdat de bezoeker anders geen waarde kan intypen.

11

Hoofdstuk 17 Formulieren #choices label {position: absolute; padding-top: .2em; left: 20px} #size {font-size: 90%;} input {margin-left: 9em;} input+input {margin-left: 1em;} br+input {margin-left: 9em;} Figuur 17.24 Dit CSS positioneert de labels op een absolute manier, net zoals in figuur 17.21. Vervolgens krijgt het eerste keuzerondje en alle keuzerondjes na een br-element een marge van 9em. De resterende keuzerondjes krijgen een marge van 1em.

Figuur 17.25 De keuzerondjes zelf worden gemaakt met behulp van de (X)HTML-tags. De labels (King, Queen enzovoort) worden gemaakt met gewone tekst in combinatie met de (X)HTML-tags.

12

Hoofdstuk 17 Formulieren Twin Single

Houtsoort: <select name=”Houttype” >

Figuur 17.26 Menu’s bestaan uit twee (X)HTML-tags, namelijk select en option. U stelt het gebruikelijke name-attribuut in de select-tag in en het afzonderlijke value-attribuut in elk van de option-tags.

select {margin-left: 9em;} Figuur 17.27 We zullen CSS nogmaals gebruiken om het menu op de andere velden uit te lijnen.

Figuur 17.28 Een bezoeker zal nothing in een menu niet kunnen selecteren, tenzij u het size-attribuut instelt. De standaardselectie is de eerste optie in het menu of de optie die u in stap 8 als selected hebt ingesteld.

13

Houtsoort: <select name=”Houttype” >
Figuur 17.29 Elk submenu heeft een titel die in het labelattribuut van de optgroup-tag is gespecificeerd, plus een reeks opties die met option-tags en gewone tekst zijn gedefinieerd.

Figuur 17.30 Browsers genereren over het algemeen geen echte submenu’s, maar groeperen de items in een enkel menu met subgroepen.

14

Extra’s: Voetenplank Nachtkastjes
Klamboe Sprei in dezelfde kleur

Figuur 17.31 De labeltekst (niet gemarkeerd) hoeft niet met het value-attribuut overeen te komen. Dat komt omdat de labeltekst de selectievakjes voor de bezoeker in de browser verduidelijkt, terwijl value de gegevens voor het script aangeeft. De lege haakjes zijn voor PHP (zie de tip).

#extras {font-size: 90%;} input {margin-left: 9em;} input+input {margin-left: 1em;} br+input {margin-left: 9em;} Figuur 17.32 De CSS lijkt sterk op wat we voor de keuzerondjes hebben gebruikt. We geven het eerste selectievakje en elk volgend selectievakje dat na een br-element volgt een marge van 9em. De resterende selectievakjes krijgen slechts 1em.

Figuur 17.33 De bezoekers kunnen net zoveel selectievakjes afvinken als ze willen. Elke bijbehorende waarde wordt tezamen met de naam van de set selectievakjes naar het script verzonden.

15

Suggesties

Typ hier eventuele opmerkingen</ textarea> </fieldset> Figuur 17.34 Het value-attribuut wordt niet gebruikt bij de textarea-tag. Standaardwaarden worden ingesteld door tekst tussen de begin- en eindtags toe te voegen (zoals in “Typ hier eventuele opmerkingen” in dit voorbeeld).<br /> <br /> textarea {font: .8em “Trebuchet MS”, Verdana, sans-serif; width: 29em; padding: .2em;} Figuur 17.35 Om de een of andere reden moest ik de fonteigenschap direct toepassen op het textarea-element om dit vet weer te geven. Ik erfde niets van de body.<br /> <br /> Figuur 17.36 De bezoekers kunnen de standaardtekst simpelweg wijzigen door er overheen te typen.<br /> <br /> <form method=”post” enctype=”multipart/formdata”action=”http://www.cookwood.com/cgi-bin/ perl2e/uploading/uploading.cgi”> <h2>Wat voor bestanden stuurt u?</h2> <p><input type=”file” name=”uploadfile” size=”30” /> </form> Figuur 17.37 Als u bezoeker wilt toestaan om bestanden te uploaden, moet u ervoor zorgen dat u het juiste enctypeattribuut instelt en dat u een input-element van het type file maakt.<br /> <br /> 16<br /> <br /> Hoofdstuk 17 Formulieren<br /> <br /> Figuur 17.38 Wanneer u een zone creëert om een bestand te uploaden, verschijnt er op de pagina automatisch een veld waarin de bezoeker het pad naar het bestand kan typen en een knop Bladeren (zodat de bezoeker het bestand in een dialoogvenster Openen kan opzoeken).<br /> <br /> <form method=post action=”whatever.php”> <input type=”hidden” name=”name” value=”$name” /> <input type=submit value=’submit data” /> Figuur 17.39 Wanneer u een verborgen veld maakt, gebruikt u de variabelen uit uw script om de waarde van het veld in te stellen op wat de bezoeker oorspronkelijk invoerde.<br /> <br /> <p id=”buttons”><input type=’submit” value=”Bed bestellen” /></p> Figuur 17.40 Als u het name-attribuut weglaat, zal het naamwaardepaar van de submitknop niet worden doorgegeven aan het script. Aangezien u deze informatie gewoonlijk niet nodig hebt, is dat prima.<br /> <br /> input {background: #DED983; font:1.2em “Trebuchet MS”, Verdana, sans-serif;} #buttons {text-align: center;} Figuur 17.41 Ik pas op de submitknop een achtergrond en een lettertypeopmaak toe. Zie pagina 147 voor meer informatie over selectie door middel van een attribuut.<br /> <br /> 17<br /> <br /> Hoofdstuk 17 Formulieren<br /> <br /> Figuur 17.42 De submitknop activeert het script dat de gegevens van het formulier verzamelt. Via het value-attribuut kunt u de inhoud van de knop aanpassen. (De term Bed bestellen is voor uw bezoekers duidelijker dan de standaardtekst Submit Query.)<br /> <br /> <input type=”radio” name=”cats” value=”X” accesskey=”x” />Xixona<br /> <input type=”radio” name=”cats” value=”L” accesskey=”l” />Llumeta<br /> <input type=”radio” name=”cats” value=”A” accesskey=”a” />Allemaal! (ik wil niet kiezen) <p id=”buttons”><button type=’submit”><img src=”check.gif” width=”40” height=”40” alt=’stemknop” /> Stem</button> Figuur 17.43 U kunt een submitknop maken met een afbeelding door de button-tag te gebruiken.<br /> <br /> body {background: #FEFEE7;} h2 {margin: 1em 0 0; padding: 0;} button {font: 48px “Trebuchet MS”, “Verdana”, sans-serif; background: #F9CC7D; border: outset #F9CC7D;} p#buttons {white-space: nowrap;} Figuur 17.44 Ik maakte de knoppen sprekender door een buitenrand toe te passen met dezelfde kleur als de achtergrond in de CSS.<br /> <br /> 18<br /> <br /> Hoofdstuk 17 Formulieren<br /> <br /> Figuur 17.45 De (X)HTML-code voor een submitknop met een afbeelding is wat ingewikkelder, maar ziet er veel beter uit. (Natuurlijk zou het nog beter zijn als ik daadwerkelijk kon tekenen.)<br /> <br /> <input type=”reset” value=”Opnieuw” /> Figuur 17.46 Met behulp van het value-attribuut kunt u de tekst van de resetknop in elke gewenste tekst wijzigen.<br /> <br /> input {background: #DED983; font: 1.2em “Trebuchet MS”, Verdana, sans-serif;} Figuur 17.47 De CSS uit figuur 17.41 is al op de resetknop van toepassing. Het is niet nodig om nog iets toe te voegen.<br /> <br /> 19<br /> <br /> Hoofdstuk 17 Formulieren<br /> <br /> Figuur 17.48 Als uw bezoekers op de resetknop klikken, worden alle velden op de standaardwaarden ingesteld.<br /> <br /> 20<br /> <br /> Hoofdstuk 17 Formulieren <input type=”radio” name=”cats” value=”X” accesskey=”x” />Xixona<br /> <input type=”radio” name=”cats” value=”L” accesskey=”l” />Llumeta<br /> <input type=”radio” name=”cats” value=”A” accesskey=”a” />Allemaal! (ik wil niet kiezen) <p id=”buttons”><button type=’submit” name= “submit” value=’submit”><img src=”check.gif” width=”40” height=”40” alt=’stemknop” /> Stem</button> <button type=”reset”> <img src=”reset.gif” width=”40” height=”40” alt=”Resetknop” />Herstel</button></p> Figuur 17.49 Let erop dat u type op reset instelt, want anders doet de knop in de praktijk helemaal niets.<br /> <br /> Figuur 17.50 Nu vallen de submitknop en de resetknop pas echt op. (Het werkt tussen haakjes allemaal echt; probeer het maar uit op mijn website.)<br /> <br /> 21<br /> <br /> Hoofdstuk 17 Formulieren <input type=”radio” name=”infotype” value=”directions” />Toegangswegen <input type=”radio” name=”infotype” value=’statistics” />Statistische gegevens <br /></ small> <input type=”image” src=”zonemap.gif” name=”coord” alt=”Kaart, klik om gegevens in te dienen “ /> </form> Figuur 17.51 Als u een actieve afbeelding gebruikt, hebt u geen submitknop nodig.<br /> <br /> Figuur 17.52 Hetzelfde formulier kan zowel doorsnee velden (zoals keuzerondjes) als een afbeelding met links bevatten. Wanneer de bezoeker op de afbeelding met links klikt, worden alle gegevens naar het script gestuurd.<br /> <br /> Figuur 17.53 Dit script produceert de coördinaten van de muisklik in de afbeelding tezamen met de waarde van het keuzerondje.<br /> <br /> 22<br /> <br /> Hoofdstuk 17 Formulieren <body> <a href=”moreinfo.html” tabindex=”4” rel="nofollow"> Over ons bedrijf</a> <h2>Verzoeke de volgende gegevens in te vullen:</ h2> <form method=”post” action=’showform.php”> <p>Naam: <input type=”text” name=”firstname” size=”20” tabindex=”1” /></p> <p>E-mailadres: <input type=”text” name=”email” tabindex=”2” /></p> <p>Hobby”: <input type=”text” name=”hobbies” tabindex=”3” size=”25” /></p> <p><input type=’submit” value=”Versturen” /></p> </form> </body> Figuur 17.54 Door de tabindex in te stellen kunt u de volgorde regelen waarin uw bezoekers van het ene naar het andere veld kunnen overschakelen door op de Tab-toets te drukken.<br /> <br /> Figuur 17.55 Bij formulieren op een pagina die met een link begint, zult u de tabvolgorde wellicht willen wijzigen, waardoor de eerste tab u naar het eerste veld voert en niet naar de eerste link.<br /> <br /> 23<br /> <br /> Hoofdstuk 17 Formulieren <p>Kies een optie door op het toetsenbord de Alttoets (Ctrl-toets op de Mac) plus de eerste letter in te drukken. Via Alt+W/Ctrl+W ) bijvoorbeeld kiest u <em>Woody</em> (wat is-ie leuk). (Gebruik “T” voor het opmerkingenvak.)</p><hr /> <form action=”http://www.cookwood.com/cgi-bin/ vote.cgi” method=”post”> <input type=”radio” name=”cats” value=”W” accesskey=”w” />Woody<br /> <input type=”radio” name=”cats” value=”C” accesskey=”c” />Cookie<br /> <input type=”radio” name=”cats” value=”X” accesskey=”x” />Xixona<br /> <input type=”radio” name=”cats” value=”L” accesskey=”l” />Llumeta<br /> <input type=”radio” name=”cats” value=”A” accesskey=”a” />Allemaal! (ik wil niet kiezen) <p><textarea name=”comments” cols=”40” rows=”3” accesskey=”t”>Hebt u opmerkingen?</ textarea></p> <p><input type=’submit” value=’stem!” accesskey=”v” /> Figuur 17.56 Sneltoetsen zijn vooral op mobiele apparaten handig.<br /> <br /> Figuur 17.57 Door op Ctrl+T (Alt+T in Windows) te drukken plaatst u de cursor in het commentaarvak.<br /> <br /> 24<br /> <br /> Hoofdstuk 17 Formulieren<br /> <br /> <input type=”radio” name=”cats” value=”L” accesskey=”l” onclick= “document.vote.submit.disabled=false” />Llumeta <br /> <input type=”radio” name=”cats” value=”A” accesskey=”a” onclick= “document.vote.submit.disabled=false” /> Allemaal! (ik wil niet kiezen) <p><input name=’submit” type=’submit” value=’stem!” accesskey=”v” disabled=”disabled” /> <input type=”reset” value=”Reset” accesskey=”r” onclick=”document.vote.submit.disabled=true” /></p> Figuur 17.58 Hier gebruik ik JavaScript en het disabled-attribuut om de submitknop uitgeschakeld te laten totdat andere opties zijn geselecteerd.<br /> <br /> Figuur 17.59 Wanneer de bezoeker het formulier voor het eerst bekijkt, is er niets geselecteerd en is de submitknop uitgeschakeld.<br /> <br /> Figuur 17.60 Wanneer de bezoeker een item kiest, is de submitknop niet langer uitgeschakeld (dankzij het JavaScript in figuur 17.58).<br /> <br /> 25<br /> <br /> Hoofdstuk 17 Formulieren <p><textarea name=”votehistory” cols=”40” rows=”3” readonly=”readonly”>Woody op maandag, Cookie op dinsdag, Xixona on donderdag en Llumeta op woensdag
Figuur 17.61 Voeg het readonly-attribuut toe aan elk formulierelement dat u aan uw bezoekers wilt tonen, maar dat niet door hen kan worden gewijzigd.

Figuur 17.62 In dit voorbeeld worden de eerdere keuzen van de bezoeker in een read-only zone weergegeven. De gegevens kunnen door de bezoeker worden bekeken, niet gewijzigd, en vervolgens met de nieuwe keuzen worden overhandigd.

26

18 Figuur 18.1 Als uw bezoekers iets proberen te bekijken waar ze geen geschikte viewer voor hebben, zien ze meestal een puzzelstukjespictogram of een gebroken afbeelding. Ze worden eveneens uitgenodigd om de juiste plug-in te installeren.

Figuur 18.2 In Internet Explorer 7 (en latere versies van Internet Explorer 6) vraagt het programma iedere keer aan uw bezoekers of ze een AcriveX-besturingselement willen starten. Via JavaScript kunt u dit waarschuwingsvenster vermijden (zie pagina 292).

Figuur 18.3 Wanneer een webpagina in Internet Explorer 7 een plug-in nodig heeft die nog niet is geïnstalleerd, zal Internet Explorer meestal aanbieden om die plug-in te helpen installeren. Naar mijn mening is Internet Explorer echter niet erg bereidwillig bij de installatie van QuickTime; het duurt allemaal erg lang en voortdurend wordt aan u gevraagd of dit werkelijk is wat u wilt. Ga bij deskundigen op dit gebied te rade en bied alternatieve installatieprocedures aan als u QuickTime-films op uw site hebt.

Hoofdstuk 18 Video, audio en andere multimedia Figuur 18.4 De link naar de film sluit een momentopname in.

Figuur 18.5 Wanneer de bezoeker op de afbeelding klikt ...

Figuur 18.6 ... wordt de video geopend, geladen en automatisch afgespeeld in een afzonderlijk browservenster (let op de grijze achtergrond) in een ingesloten player (als er eentje beschikbaar is).

Hoofdstuk 18 Video, audio en andere multimedia

Figuur 18.7 Dit is de manier waarop Internet Explorer wil dat het object-element wordt gebruikt. Helaas wijkt het gebruik van een omslachtig lange waarde van het classid-attribuut (dat de fabrikantspecifieke ActiveX-technologie van Internet Explorer oproept) dermate van de standaard af dat andere browsers het object-element negeren.

Figuur 18.8 De film werkt prima in Internet Explorer (boven), maar wordt niet weergegeven in browsers die zich aan de standaard houden, zoals Firefox voor Windows (onder).

Hoofdstuk 18 Video, audio en andere multimedia Figuur 18.9 De standaardimplementatie van het object-element omvat een type dat het MIME-type van het multimediabestand aangeeft, een data-attribuut met de URL van het bestand, de width (breedte) en de height (hoogte) en een of meer parameters.

Figuur 18.10 Hier hebben we een film die wordt weergegeven in browsers die zich aan de standaarden houden, bijvoorbeeld Firefox.


Figuur 18.11 Internet Explorer ondersteunt de standaardimplementatie van het element object niet.

Figuur 18.12 Het object-element is voor nesting ontworpen. Als een browser het buitenste element niet ondersteunt, dienen de binnenste elementen afgezocht te worden totdat er een geschikt element wordt gevonden.


Figuur 18.13 Internet Explorer toont de eerste film en in plaats van het tweede object-element te negeren, wordt geprobeerd om dit eveneens te tonen, wat jammerlijk mislukt. Het gevolg is een spookfilm aan de onderzijde van het scherm.

Figuur 18.14 Ik raad aan om conditioneel commentaar van Internet Explorer (met de hier getoonde aanpassing) te gebruiken om het tweede object-element voor Internet Explorer te verbergen.


Figuur 18.15 Zodra we het tweede object voor Internet Explorer hebben verborgen (links), worden er geen spookverschijningen meer gesignaleerd. Standaardlievende browsers zoals Firefox (rechts) blijven het eerste object netjes negeren en tonen het tweede object zoals gewoonlijk op de juiste manier.

function InsertSampleMovie() { document.write(‘ ‘); } Figuur 18.16 Hier is het eenvoudigst mogelijke JavaScript. Definieer de functie, schrijf alle (X)HTML-code voor de film, inclusief alle geneste objecten en conditioneel commentaar, waarbij u er op moet letten dat u Returns en enkelvoudige aanhalingstekens weglaat en de functie met een } afsluit.

Hoofdstuk 18 Video, audio en andere multimedia function InsertSampleMovie() { document.write(‘

februari

Recommend Documents

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

Antoni Gaudí

Antoni Gaudí

Antoni Gaudí

La Casa Milà

Het nachtleven in Barcelona

Het nachtleven in Barcelona

Het nachtleven in Barcelona

Perl-leerboek, les 1

Beroemde Catalanen

De kern van de aarde

De markt van Barcelona

De markt van Barcelona

Visvrouwen

Pioneer Valley: Northampton

Pioneer Valley: Northampton

Pioneer Valley: Northampton

Pioneer Valley: Northampton

Pioneer Valley: Northampton

Uitgelijnd op de bovenzijde

Uitgelijnd op het midden

Uitgelijnd op de onderzijde

Cookie en Woody

Pixel

Inhoudsopgave

Inleiding

Beschrijving van de hoofdpersonen

Spanning wordt opgevoerd

Climax

Afloop

Nathaniel Hawthorne

Nathaniel Hawthorne

Onze katten

Onze katten

Cookie en Woody

Meer foto’s van de markt

Starsearch Enterprises

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Casa Milà

Antoni Gaudí

La Casa Milà

La Sagrada Família

Antoni Gaudí

La Casa Milà

La Sagrada Família

fotobarcelona . . .

Hospital Sant Pau

Kathedrale kloostergang

vanuit mijn venster

over dit foto blog

PageWhacker Incorporated

<span>Farm Training Podcasts

photobarcelona . . .

Red and Louis