XHTML en CSS

Ruud Koortens Frans Peeters

januari 2008

xhtml en css Inhoudsopgave Inleiding .................................................................................................................... i 1.

XHTML 1.0 .......................................................................................................... 1 1.1. XML Declaratie .................................................................................................. 1 1.2. Het juiste DOCTYPE in hoofdletters .................................................................... 2 1.3. De XML-namespace........................................................................................... 2 1.4. De <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" />

Hier komt de website.

1.1.

XML Declaratie

Wanneer XHTML wordt gebruikt voor de markup van websites kun je een zogenaamde XML declaratie gebruiken vóór de DOCTYPE declaratie.

-1-

xhtml en css De XML declaratie kan weggelaten worden maar dan kan het document van geen andere karakterset dan utf-8 of utf-16 gebruik maken.

1.2.

Het juiste DOCTYPE in hoofdletters

De eerste regel in een XHTML-bestand geeft altijd het juiste documenttype aan. Hiervoor wordt de tag gebruikt. Dit vertelt de browser dat het navolgende document geïnterpreteerd moet worden als XHTML-document en welke regels moeten worden toegepast bij het parsen en renderen van de pagina. Bovendien wordt het DOCTYPE gebruikt voor de juiste validatie, zoals je die bij http://validator.w3.org kunt laten doen. DOCTYPE bestaat ook in HTML 4.0 maar geen browser maakt er zich druk om als het ontbreekt. Alle XHTML-tags worden in kleine letters geschreven maar het woord DOCTYPE staat altijd in hoofdletters. Aangezien er drie typen XHTML 1.0 zijn, zijn er ook drie DOCTYPES beschikbaar voor XHTML, namelijk Transitional, Strict en Frameset. We kiezen voor het DOCTYPE dat past bij XHTML Strict.

Het DOCTYPE verwijst altijd naar de site van de W3C en het komt te staan vóór .

1.3.

De XML-namespace

Aangezien elk XHTML-bestand een valide XML-document is, moet ook de namespace worden opgegeven. Een namespace is een verzameling bij elkaar horende elementen en hun attributen die bij een zogenaamde Document Type Definition (DTD) horen. In de DTD worden formele specificaties vastgelegd op grond waarvan ze kunnen worden gevalideerd. Een DTD geeft onder meer aan wat de elementen zijn, waar ze voorkomen, wat de kenmerken zijn waaraan ze moeten voldoen, enzovoorts. Je geeft de namespace aan door de basistag uit te breiden met een aantal attributen. Behalve de locatie waar de namespace gevonden kan worden, wordt aangegeven in welke taal de XML-versie is gesteld en in welke taal het document is gesteld. De tag komt er dan op de volgende manier uit te zien:

1.4.

De <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" />

Een kop

Een alinea met <em>nadruk op een woord.

• • • • • •

html is het hoofdelement of de root alle andere elementen zijn afstammelingen van html h1, p, div zijn kinderen van body em is een child van p ul is een child van div li is een child van ul en afstammeling van div en body

Met andere woorden: het element HTML bevat de elementen head en body, deze elementen bevatten op hun beurt andere elementen die weer elementen kunnen bevatten. Bijvoorbeeld de genoemde div(ision) bevat een ul element. De division is hier het bovenliggende element ten opzichte van ul. Het ul element (ongeordende lijst) bevat twee op zijn beurt lijstitem elementen, het em element is in de paragraaf geplaatst en benadrukt het stukje tekst dat daar weer in is geplaatst. De boomstructuur van het document heeft gevolgen voor het stijlblad. Zie het voorbeeld uit een denkbeeldig stijlblad: body { font-family: Arial, Helvetica; } h1 { font-family: Verdana; } p { } em { } div { font-family: Verdana; } ul { } li { }

Alle tekst in het body element heeft Arial, Helvetica als lettertype definitie. Het lettertype in h1 is niet hetzelfde lettertype maar wordt overschreven (overruled) door de eigen definitie. Het p element krijgt toch weer Arial, Helvetica, net als em. Het ul en li element krijgen echter Verdana als lettertype toegewezen.

-7-

xhtml en css Een kritische lezer zou nu overigens kunnen opmerken dat het in dit geval zinloos is om het p element in het stijlblad te definiëren, er is immers niets nieuws in de definitie van p.

3.3.

De syntaxis van CSS rules

CSS moet volgens een bepaalde set van regels worden vastgelegd. Het is te vergelijken met de grammatica oftewel de syntaxis van een taal. De regels zijn als volgt: • Eerst wordt een selector genoemd. • Vervolgens staat er een accolade. • Dan komt er een attribuut. • Na de attribuutnaam volgt een dubbele punt. • Daarna volgt de waarde van het attribuut. • Elke declaratie wordt afgesloten met een puntkomma. • Het blok met declaraties wordt afgesloten met een accolade.

Voorbeeld: h1

{ color : #333; font-size : x-large;

}

-8-

xhtml en css

3.4.

Waar kun je CSS plaatsen?

Je kunt op drie plaatsen CSS vastleggen:

3.4.1.

Inline CSS

Overal binnen de HTML-code kun je CSS plaatsen. Het verdient geen schoonheidsprijs en we gaan dit zo dan ook niet doen, maar toch maar een voorbeeld:

Een ongebruikelijke kop

De kop wordt in een rode kleur en in hoofdletters in de browser getoond. Opdracht: Maak een XHTML bestand en plaats de bovenstaande regel in de body en bekijk het resultaat.

3.4.2.

Embedded CSS

Het is ook mogelijk in de head een style vast te leggen en die verderop in de body te gebruiken. De kop van een document ziet er dan bijvoorbeeld zo uit: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> h1 {color : red;} h2 {color : green;} h3 {color : blue;}

Dit is een h1.

Dit is een h2.

Dit is een h3.

-9-

xhtml en css Opdracht: Maak het bovenstaande XHTML document en bekijk het resultaat. Overal in het document zal de

rood zijn, de

groen en de

blauw. Ook deze manier van CSS zullen we niet gaan gebruiken.

3.4.3.

External CSS

De beste manier om de opmaak vast te leggen is in een apart opmaakbestand. In de head van het document wordt dan verwezen naar dat document. Het grote voordeel van een extern stijlblad is dat er maar één plaats is waar de stijldefinities gedefinieerd zijn, als je iets wilt wijzigen in de vormgeving van de site hoef je alleen het CSS bestand te bewerken en de wijziging zal zichtbaar zijn in de hele site. In onderstaand voorbeeld bestaat er een opmaakbestand met de naam opmaak.css. Daarin is vastgelegd hoe de

,

en

er uit moeten zien. Een voorbeeld hiervan zie je hieronder en dit is de manier waarmee we aan de slag gaan. <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" />

Dit is een h1.

Dit is een h2.

Dit is een h3.

- 10 -

xhtml en css Het opmaakbestand opmaak.css ziet er als volgt uit. De plaats van de accolades maakt niets uit, soms worden ze op aparte regels gezet. Het is een goede gewoonte elke regel met een tab te laten inspringen. body { /* rand, uitvulling, achtergrond, lettertype instellen */ margin: 0; padding: 0; background-color: #666666; font: small Arial, Helvetica, sans-serif; color: white; } h1

{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 48px; font-weight: bold; color: #43616B; text-align: center;

} h2

{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; color: #5C6F90;

} h3

{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #9C1A1E;

}

3.5.

Selectors

3.5.1.

Universal selector

Hiermee kun je alle elementen op de pagina een waarde geven. In onderstaand voorbeeld is van alle elementen de kleur van de tekst rood. De asterisk is eigenlijk overbodig, want een regel zonder selector geldt altijd voor de hele pagina. *

{ color: red;

}

3.5.2.

Element type selector

De body, h1 en h2 en de p zijn voorbeelden van element selectors. Het is eenvoudig te begrijpen hoe je de eigenschappen kunt aanpassen in het CSS-bestand.

- 11 -

xhtml en css body

{ color: black; background-color: white;

}

3.5.3.

Class selector

Een speciaal type selector is de class selector. Hiermee kun je uit de vrije hand een opmaak samenstellen en deze toekennen aan elk gewenst element. Class selectors worden in CSS aangegeven met een punt voorafgaand aan de klassenaam. In het onderstaande voorbeeld is .content een class. .content { position: relative; width: auto; min-width: 120px; margin: 0 210px 20px 170px; border: 1px solid black; background-color: white; padding: 10px; z-index: 3; }

Als je een class alleen wilt toepassen op een bepaald element, dan kun je er voor kiezen de klassenaam vooraf te laten gaan door een elementnaam. Op de volgende manier worden bijvoorbeeld alleen alinea’s die het attribuut class=”belangrijk” hebben rood en vet gemaakt. p.belangrijk { color : red; font-weight : bold; }

3.5.4.

id selector

De id selector lijkt sterk op een class selector. Hij wordt voorafgegaan door een hekje (#). Een class kan aan meerdere elementen worden toegekend, maar een id mag maar aan één element op een pagina worden toegekend. Id’s worden meestal gebruikt om logische secties op een pagina te maken, zoals banners, menu’s, contentgebieden, navigatiebuttons e.d. De onderstaande voorbeeldpagina bestaat in werkelijkheid uit drie delen en het linker- en rechterdeel wordt bepaald door de id’s #navleft en #navright. Het middelste gedeelte van de pagina is de eigenlijke content en die wordt gevuld met instanties van de class .content. Met de id selector kunnen we een box absoluut plaatsen op een pagina. Het linkerdeel is 128px breed en staat 20px van de top. Het rechterdeel heeft een breedte van 168px en staat ook 20px van de top. De class .content heeft een rechtermarge van 210px en een linkermarge van 170px en past dus altijd binnen het linker- en rechtergedeelte, ongeacht wat de resolutie van het beeldscherm is.

- 12 -

xhtml en css Hieronder zie je de stijldefinitie van het linkerdeel: #navleft { position: absolute; width: 128px; top: 20px; left: 20px; font-size: 0.9em; border: 1px dashed black; background-color: white; padding: 10px; z-index: 2; }

En de toepassing van dit id-element in het HTML document:

ipsum
ipsum
ipsum
ipsum
ipsum

Let op de selector, omdat het een id-selector is wordt het hekje (#) gebruikt in de stijldefinitie en de id selector bij de toepassing in het HTML document.

3.5.5.

Pseudo-element selector

Er zijn drie pseudo-elements, namelijk first-letter, first-line en first-child. Een aardig voorbeeld hiervan is het drop-cap effect. Je laat elke alinea beginnen met een grote eerste letter. Let op de dubbele punt voor het pseudo-element. Een voorbeeld wordt hieronder getoond: p:first-letter { font-face: Gothic, serif; font-size: 250%; float: left; padding: 2pt; }

- 13 -

xhtml en css

3.5.6.

Pseudo-class selector

In CSS2 zijn de volgende pseudo-classes gedefinieerd: :hover Hoe ziet een element er uit als je er met de muis boven komt? :active Hoe ziet een element eruit als het actief is. :focus Hoe ziet een element eruit als het de focus heeft? :link Hoe ziet een link eruit? :visited Hoe ziet een bezochte link eruit? :lang() Hiermee kun je aangeven in welke taal een element is geschreven. Voorbeelden: a:link { color: teal; } a:visited { color: red; } a:hover { background-color: blue; }

3.5.7.

Descendant selector

Alle elementen zijn volgens het overervingsprincipe kinderen van een ouder (parent). Als de ouder afwijkt van het overervingsschema, kun je de descendant selector gebruiken. In onderstaand voorbeeld heeft text met em (emphasis, schuin) de lettergrootte 16px en de kleur groen, maar alleen als het een kind (child) is van de ouder li, dus alleen in opsommingen met

. li em { font-size: 16px; color: green; }

3.5.8.

Parent-child selector

De parent-child selector is een speciaal geval van de voorgaande selector. Alleen als er sprake is van een directe relatie ouder-kind geldt dit. Als de relatie bijvoorbeeld grootouderkleinkind is, geldt de opmaak niet. In onderstaand voorbeeld wordt alleen een kind

vet als het een directe nakomeling van is. body > p { font-weight: bold; }

- 14 -

xhtml en css 3.5.9.

Adjacent selector

Als twee elementen onder elkaar staan, krijg je soms te veel of te weinig witruimte tussen de headers. Met de adjacent selector kun je aangeven wat de afstand tussen elementen moet zijn als ze pal onder elkaar staan. Je plakt de elementen aan elkaar met het + teken en legt vast wat de afstand tot elkaar moet zijn zoals in onderstaand voorbeeld van twee headers: h1+h2 { margin-top: 11px; }

Opdracht: Bestudeer het onderstaande stijlblad en beantwoord de volgende vragen. Is er sprake van een class selector of een id selector bij container, kopregel, kopregel_onder, hoofdsectie, inhoud en zijbalk? Wat is het verschil tussen een class selector en een id selector? Waar gebruik je een class selector voor en waarvoor gebruik je een id selector? Wat voor selector wordt gebruikt bij het body element? Worden er ook pseudo-class selectors gebruikt? Zo ja, noem deze. Worden de hoofdsectie, de zijbalk en de voetregel absoluut of relatief gepositioneerd? Waar kun je dit uit afleiden?

/* CSS stijl */ body { /* rand, uitvulling, achtergrond, lettertype instellen */ margin: 0; padding: 0; background-color: #666666; font: small Arial, Helvetica, sans-serif; color: white; } #container{ /* plaatshouder voor alle pagina-elementen */ background-color: #ffffff; color: #000000; margin: 30px 40px 30px 40px; /* padding creëert ruimte tussen de elementen en de rand van de division */ padding: 10px; border: 1px; } /* division met elementen voor de kopsectie */ #kopregel{ background-color:#ffffff; height: 1%; } #kopregel_onder{ border-top:solid 1px #333333; background-color:#ffffff; border-bottom: 1px solid #333333; height: 1%; }

- 15 -

xhtml en css #kopregel_onder a:link, #kopregel_onder a:visited{ text-decoration: none; background-color:#ffffff; color: #333333; font-style:oblique; } #kopregel_onder h1{ color: #333333; font-size:14px; font-style:oblique; font-weight: bold; } #hoofdsectie{ /*position: relative; top:0; left: 0;*/ width: 100%; margin-top: 10px; } #inhoud{ /* top right bottom left, in de richting van de klok */ margin: 0 0 0 240px; padding: 0; border: 1px solid #000059; background-color: #FFFFFF; color: #000000; } #zijbalk{ float: left; border: 1px solid #000059; width: 230px; background-color: #FFFFFF; color: #000000; margin: 0; padding: 0; } #voetregel{ clear: both; border: 1px solid #000059; margin-top: 10px;

3.6.

Positionering van pagina-elementen

Bij het bepalen van de positie van de verschillende pagina-elementen is het belangrijk om enkele basisprincipes voor het definiëren van een CSS lay-out te begrijpen. Aan de orde komen: de display eigenschap, positionering en de CSS Box Model techniek.

3.6.1.

Display

De display eigenschap kan een grote invloed hebben op een pagina lay-out. Deze eigenschap bepaalt hoe een browser een element toont en afhandelt, als een blok, een inline tekstfragment of als iets anders.

- 16 -

xhtml en css Er zijn • • • • • •

17 mogelijke waarden, de volgende zes worden veel gebruikt: block inline list-item none table-footer-group table-header-group

De standaard waarde wisselt van element tot element. Block elementen als p, h1, div hebben als standaard waarde block, inline elementen (binnen een deel van een tekst) als strong, span, etc. hebben standaard inline als waarde. Het toewijzen van niet-standaard waarden aan elementen kan nuttige effecten tot gevolg hebben. Als je none als waarde kiest, zal het element niet getoond worden, de ruimte die het element zou innemen wordt vrijgegeven. Dit in tegenstelling tot de eigenschap visibility: hidden. Hierbij wordt het element wel verborgen maar blijft de ruimte voor het element bezet. Een voorbeeld van display zag je in het bovenstaande stijlblad: #kop-beneden li { display: inline; background-color: #ffffff; color: #050845; }

Opdracht: Zoek op bijvoorbeeld www.handleidinghtml.nl de beschrijving van de display eigenschap en de zes genoemde waarden op, noteer de waarden en de betekenis van deze waarden. Maak een webpagina met zes voorbeelden waarbij de verschillende waarden zijn toegepast.

- 17 -

xhtml en css

3.6.2.

Het Box Model

Bij CSS wordt vaak gesproken over het Box Model. Elk element zit opgesloten in een box. Het basis CSS Box Model ziet er als volgt uit:

Kijk goed naar wat het verschil is tussen de padding en de margin. Padding is de ruimte tussen het element en de (wel of niet getoonde rand (grens). De marge is de ruimte tussen de rand en een volgend element. Bij margin en padding kun je vier verschillende maten opgeven, waarbij je begint bij de top en met de wijzers van de klok meegaat. Een ezelsbruggetje dat hiervoor vaak gebruikt wordt is TRBL (trouble). Een padding van 15px 20px 30px 25px wil dus zeggen dat de top-padding 15 pixels bedraagt, de right-padding 20 pixels, de bottom-padding 30 pixels en de leftpadding 25 pixels. Met padding: 15 px 25 px geef je aan dat de boven- en onderkant een padding hebben van 15 pixels en de linker- en rechterkant 25 pixels. Met padding: 20px bepaal je dat de padding aan alle kanten 20 pixels bedraagt. Opdracht: Bestudeer de onderstaande code en het voorbeeld in de browser. Padding en margin zijn hier toegepast. Ga na welk invloed margin en padding hebben op h1. Staan de zichtbare breedte en breedte van de inhoud hier vast of zijn ze afhankelijk van de grootte van het browservenster? Verklaar je antwoord.

- 18 -

xhtml en css <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> h1 { border: solid #FF0000 medium; background-color:#FFFF99; text-align:center; color:#0066FF; padding-left: 25px; padding-top: 30px; padding-bottom: 30px; padding-right: 25px; margin: 100px; }

Help! Ik zit vast in een box model!

3.6.3.

Padding, margin en border

- 19 -

xhtml en css Padding We nemen eerst padding onder de loep. Dit doen we aan de hand van een h1 element dat we eerst zonder padding, margin of rand bekijken: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color:#000000; background-color: #FF0000; }

Kopregel zonder padding en margin

De CSS regels zijn hier voor het overzicht in het HTML document geplaatst. De CSS regels zullen hieronder steeds wat aangepast worden, alleen die wijzigingen zullen getoond worden. Padding kent vier eigenschappen: padding-left, padding-right, padding-top en paddingbottom. De padding kan met verschillende eenheden worden ingesteld en ook absoluut of relatief. Pixels worden het vaakst toegepast, als je een ontwerp wilt maken dat gebruikt maakt van het hele scherm, gebruik dan percentages in plaats van pixels. De padding wordt dan aan het formaat van het venster aangepast. Als we de padding als volgt aanpassen: padding-left: 50 px, dan zal de tekst verderop beginnen: h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color:#000000; background-color: #FF0000; padding-left:50px; }

- 20 -

xhtml en css

Verdere wijzigingen in de padding: padding-top: 25px; padding-right: 55px; padding-bottom: 75px; padding-left: 50px;

Je kunt bovenstaande code als volgt kort coderen: padding: 25px, 55px, 75px, 50px;

Je kent het ezelsbruggetje wel: lees met de klok mee: boven, rechts, onder, links. In het Engels: top, right, bottom en left. Het is in dezelfde volgorde als in het woord trouble.

Opdracht: Neem de HTML en CSS code over en ga na onder welke omstandigheden de padding-right werkt. Van welke factor is het afhankelijk of het effect van padding-right zichtbaar is?

Je kunt padding op de volgende manieren gebruiken: Aantal waarden 1 2 3 4

Resultaat Alle vier waarden worden met deze waarde ingesteld. Top en bottom worden volgens de eerste waarde ingesteld, left en right volgens de tweede. Top wordt volgens de eerste waarde ingesteld, links en rechts volgens de tweede, bottom volgens de derde waarde. Top volgens de eerste, rechts volgens de tweede, onder volgens de derde, links volgens de vierde waarde.

- 21 -

xhtml en css

Opdracht: Neem de HTML en CSS code over experimenteer met de vier mogelijkheden voor het instellen van de padding.

Margin Het verschil tussen padding en margin is dat padding binnen de grenzen van het element is terwijl margin zich buiten de grenzen van het element beweegt. h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color:#000000; background-color: #FF0000; margin-left:50px; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color:#000000; background-color: #00FF00; margin-left:50%; }

Deze code zorgt er voor dat het element, inclusief de achtergrond en tekst naar rechts wordt verschoven. Bij padding echter verschoof alleen de tekst binnen het element naar rechts. Net zoals bij de padding eigenschap kun je ook bij margin de code verkort noteren waarbij dezelfde regels gelden als bij padding, zie daarvoor de tabel over padding.

Border Border heeft drie eigenschappen: style, width en color. De style eigenschap van border is standaard none, dat wil zeggen; er wordt geen rand getoond. De breedte is standaard medium. De kleur is gelijk aan de tekstkleur van het element. De style eigenschap kent de volgende mogelijkheden: none, solid, dashed, dotted, dot-dash, dot-dot-dash, wave, double, groove, ridge, inset, outset, hidden en none. Hidden lijkt op none maar werkt in combinatie met tabellen op een andere wijze. Daar gaan we hier niet verder op in.

- 22 -

xhtml en css

De breedte van een rand kan via vier verschillende declaraties (border-top-width, borderright-width, border-bottom-width en border-left width) worden gegeven of kort met borderwidth worden genoteerd. De mogelijke waarden kunnen absoluut of relatief zijn (bijvoorbeeld px, ems, percentage) en kunnen ook een beschrijvende waarde zijn (thin, medium, thick). De kleur kan aangegeven worden in een RGB waarde (100, 10, 1), als standaardkleurwaarde (red) of als een hexidecimale RGB (#ff9900). De border eigenschap kan kort gedefinieerd worden in de volgorde style, width en color. Voorbeeld van een kort genoteerde regel: .waarschuwing { border: 3p solid red }

Opdracht: Experimenteer met de mogelijkheden voor het instellen van de padding, margin en border van drie elementen op een pagina.

- 23 -

xhtml en css

3.6.4.

Positionering, absoluut en relatief

De CSS position eigenschap bepaalt hoe een element (in dit geval een block-element) wordt gepositioneerd op de pagina. De twee meest gebruikte waarden zijn: relative en absolute. Static is de standaard waarde voor deze eigenschap. De vierde waarde (fixed) wordt niet ondersteund door MS Internet Explorer 6. Positionering door middel van CSS kan verwarrend zijn. Er is geen stelsel van absolute coördinaten dat je kunt gebruiken voor het plaatsen van elementen, ook niet als je absolute gebruikt. De plaatsing van een element is afhankelijk van het element waar in deze geplaatst wordt. Binnen dat element wordt een element geplaatst ten opzichte van de linker bovenhoek (de oorsprong is daar 0,0). De positie van een element wordt dan ook berekend ten opzichte van het element waar binnen het geplaatst is, de ‘positioning context’. Voorbeeld: de inline stijldefinitie van de twee divisions hieronder levert het volgende resultaat op:

Dit is de eerste gepositioneerde regel.

<span style="position: relative; left: 10px; top: 30px;" >Dit is een voorbeeld van een tweede regel.

De tweede regel springt een stukje in ten opzichte van de eerste regel (25 pixels). Dit komt doordat de eerste regel de context bepaalt voor de positionering. Het is het bovenliggende (parent) element voor de tweede regel. Beide regels zijn absoluut gepositioneerd. De eerste

- 24 -

xhtml en css regel is gepositioneerd ten opzichte van de linkerbovenhoek van het browserscherm, de tweede is gepositioneerd ten opzichte van de eerste regel.

3.6.5.

Float en clear

Met de float eigenschap kan een element zwevend worden gemaakt. Je zorgt er hiermee voor dat een element als het ware zweeft op de pagina, de rest van de inhoud sluit er rondom op aan. Float is naast absolute positionering de enige manier om elementen te plaatsen waar je wilt. Wetenswaardigheden: • Block-elementen zoals p, table en h2 worden gewoonlijk onder elkaar geplaatst. Met float (zweven) kunnen we block-elementen naast elkaar plaatsen. • Je kunt ieder element zwevend maken, het element wordt dan altijd een block element. • Bij float moet de breedte en de hoogte van het element worden opgegeven. • Het zwevend gemaakte element wordt uit de normale HTML document structuur gehaald maar dit gebeurt altijd na het voorgaande element. • Tekst zal altijd rond een zwevend element vloeien. • Zwevende elementen zullen een afbeelding of tekst niet afdekken, absoluut gepositioneerde elementen kunnen dat wel. • Twee opeenvolgende zwevende elementen (float: left of right) zullen langs elkaar komen te liggen zolang de totale breedte de breedte van het omvattende element (het element waar de twee opeenvolgende zwevende elementen in geplaatst zijn) niet overschrijdt. • Een element met float: left doe je teniet met clear: left, een element met float : left met clear: right; • Voorgaande zwevende elementen met float: left en float: right doe je teniet met clear: both. De combinatie van float en clear gaan we bij de voorbeeld lay-outs gebruiken om een pagina in te delen. De combinatie is belangrijk bij het vormgeven van sites die in bijvoorbeeld Explorer, Firefox en Safari weergegeven worden. Tussendoor: de ‘natuurlijke flow’ van een pagina. Het is goed te realiseren dat een web pagina een vastgestelde hiërarchie kent. Elementen op een pagina hebben allemaal hun eigen plaats. Die plaats hangt af van de eigenschappen van het element en van de plaats waar jij ze in de html hebt geplaatst. Met de natuurlijke flow van een web pagina wordt de manier bedoeld waarop een pagina verwerkt wordt. Je beïnvloedt met behulp van CSS de gang van zaken bij het verwerken van de pagina: Je gaat m.a.w. de natuurlijke flow van de pagina beïnvloeden. In feite wordt een element dat de eigenschap float krijgt als het ware boven de flow van de pagina uitgetild. De float eigenschap is een veel gebruikte CSS eigenschap. Float kent maar drie waarden: left, right en none. Float (left of right) drukt het element uit zijn natuurlijke positie en verschuift het naar links of naar rechts. Float vervangt de align eigenschap van het img element en heeft precies hetzelfde effect. Er is een voordeel van float ten opzichte van align: float kan ook voor andere elementen worden gebruikt. - 25 -

xhtml en css Bij het onderstaande voorbeeld wordt de afbeelding naar links verplaatst door de eigenschap float met als waarde left te gebruiken. De tekst wordt daardoor rechts geplaatst.

Bij het bovenstaande voorbeeld wordt de afbeelding naar rechts verplaatst door de eigenschap float met als waarde rechts te gebruiken. De tekst wordt daardoor links geplaatst. Er is bij de stijldefinitie van het img element ook gebruik gemaakt van respectievelijk marginright en margin-left om een afstand van 5 pixels te maken tussen de tekst en de afbeelding.

- 26 -

xhtml en css h1

} p

{ font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color:#000000; background-color: #FFFF66; margin-left:50px; margin-right: 100px; { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color:#000000; background-color: #FFFF66; margin-left:50px; margin-right: 100px;

} .data { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: red; background-color: #ffffff; margin-left:50px; margin-right: 100px; } img { float: left; margin-right: 5px; }

Schilderbeurt voor Watertoren

<span class="data">nieuwsbericht, 16 augustus 2006

De Watertoren in Heemstede is aan een schilderbeurt toe. De steigers zijn ... enzovoort

Als je de eigenschap float niet gebruikt, ziet het resultaat er als hiernaast uit!

- 27 -

xhtml en css De eigenschap float kun je op elk blokelement toepassen, hieronder zie je een voorbeeld waarbij de foto verwijderd is en er een kopregel in de tekst is geplaatst.

.p_kop { font-family: Arial, Helvetica, sans-serif; font-size: 36px; float: left; font-weight: bold; margin-right: 10px; margin-top: 10px; }

<span class="p_kop">Watertoren in Heemstede is aan een schilderbeurt toe. De steigers zijn al geplaatst … enzovoort

Met de clear eigenschap wordt aangegeven of er links en/of rechts van het element wel of geen zwevende elementen mogen voorkomen. De mogelijke waarden zijn none, left, right en both. De beginwaarde none van de clear eigenschap bepaalt dat zwevende elementen wel zijn toegestaan naast het element waaraan de eigenschap wordt toegevoegd. Er mogen dan ook wél zwevende elementen naast het element komen staan. clear: left clear: right clear: both

3.6.6.

geeft aan dat aan de linkerkant geen zwevende elementen mogen staan geeft aan dat aan de rechterkant geen zwevende elementen mogen staan geeft aan dat er géén elementen naast het element mogen staan

Float en clear in de praktijk

In het onderstaande ontwerp wordt clear gebruikt om er voor te zorgen dat de lay-out in de browser wordt getoond zoals deze bedoeld is. Het ontwerp bestaat uit een kopregel, drie kolommen en een voetregel. - 28 -

xhtml en css

De pagina zou zonder een gekoppeld stijlblad als volgt in de browser weergegeven worden:

De bovenstaande weergave illustreert het gegeven dat met CSS de ‘natuurlijke flow’ kan worden beïnvloed. Kijk eens naar de volgorde waarin de elementen in de bovenstaande webpagina worden getoond, vergelijk dit met de HTML code en kijk daarna nog eens naar de weergave mét het stijlblad.

- 29 -

xhtml en css

Kop

Eerste zijbalk

Tweede zijbalk

Inhoud

Voetregel

- 30 -

xhtml en css

body

{ margin: 0; padding: 0; font: small Helvetica, Arial, sans-serif; font-weight: bold;

} #container{ background-color: #ffffff; color: #000000; margin: 30px 40px 30px 40px; padding: 10px; border: 1px; } #kop { margin: 0; padding: 0; border: 1px solid black; } #hoofd { margin-top: 10px; } #zijbalk { float: right; width: 220px; border: 1px solid black; background-color:#666666; color: white; } #zijbalk2 { float: left; width: 159px; border: 1px solid black; background-color:#D4D4D4; color: black; } #inhoud { border: 1px solid black; background-color:#9E9E9E; margin: 0 240px 0 160px; } #voetregel { clear: both; border: 1px solid black; background-color: #464646; color: white; }

Zoals je inmiddels weet: float zorgt er voor dat de zwevende elementen uit de natuurlijke positie wordt gedwongen. Niet-zwevende elementen zullen rond de zwevende elementen vloeien. De linker- en rechter zijbalken worden naar links en rechts gedwongen, de inhoud division willen we niet om de zijbalken laten vloeien, vandaar dat hierbij brede marges worden ingesteld om er voor te zorgen dat de vulling van de inhoud division in ongeveer het midden van de pagina geplaatst wordt. De clear: both waarde bij de voetregel zorgt er voor dat de voetregel altijd beneden de inhoud en de zijbalken getoond zal worden. Both geeft in dit geval de linker- en rechterbalk vrij. De voetregel komt na de inhoud div, binnen de natuurlijke loop van het document.

- 31 -

xhtml en css Opdracht: Neem bovenstaande HTML en CSS code over en experimenteer met de margin eigenschap om de verdeling van de zijbalken en de inhoud op verschillende manieren in te stellen. Zorg er voor dat bij een van je experimenten de breedte van de beide zijbalken even groot is. Experimenteer ook met de padding eigenschap van de zijbalken en de inhoud division. Bestudeer het effect van padding op de positie van de inhoud van de kolommen en kop- en voetregel.

Je zult merken dat het ook mogelijk is om de breedte van de kolommen zo in te stellen dat de lay-out verminkt raakt. Een kwestie van eenvoudig rekenen en een te smal browservenster. Houd rekening met de breedte van de browser van de bezoeker. Je mag er van uitgaan dat de bezoeker een beeldscherm gebruikt met een breedte van tenminste 800 pixels en een hoogte van tenminste 600 pixels.

Nu je gezien hebt hoe float en clear gebruikt kunnen worden om een meer-kolommen layout te realiseren zou je een basisontwerp voor een lay-out kunnen maken. Om dit basisontwerp gezicht te kunnen geven moet je meer weten van de opmaakmogelijkheden met gebruik van CSS. We gaan dan ook eerst aandacht geven aan het gebruik van lettertypen.

3.7.

Fonts

Je kunt er nooit vanuit gaan dat een bepaald font op een systeem geïnstalleerd zal staan. Er is bijvoorbeeld geen enkel font dat standaard zowel op een Macintosh als op een Windows systeem staat. Er zijn echter wel verschillende fonts die op elkaar lijken en daarom wordt er meestal een aantal fonts meegegeven in de font-family. Hieronder schematisch welke fonts bij welk systeem horen en of ze wel of niet standaard geïnstalleerd zijn.

- 32 -

xhtml en css

Windows Courier New Arial Times New Roman Arial Black Comic Sans MS Trebuchet MS Verdana

3.7.1.

Macintosh Courier Helvetica (of Geneva) Times (of New York) Arial Black Comic Sans MS Trebuchet MS Verdana

Standaard geïnstalleerd ja ja ja nee nee nee nee

De font-family eigenschap

Je kunt het lettertype voor een element als een verzameling van fonts geven door middel van de font-family eigenschap. De leden van een font familie hebben – net als bij een echte familie - zaken gemeenschappelijk. Een schreefloos lettertype is heel geschikt voor het gebruik op een beeldscherm. Schreven zijn de kleine zijstreepjes aan de letters van fonts zoals Times New Roman. Bij lage resolutie worden lettertypen met schreven op een beeldscherm wat onscherp of gekarteld. Voor weergave op een beeldscherm hebben schreefloze lettertypen daarom de voorkeur. Schreefloze lettertypen geven we aan met de term sans-serif, dat is Frans voor “zonder schreef”.

R

R

Times New Roman (met schreef) (serif)

Arial (schreefloos) (sans-serif)

De hieronder gegeven fonts zijn allemaal zonder schreef. h1

{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}

In ons geval wordt dus gezocht in de volgorde Verdana, Arial, Helvetica. Als geen van alle gevonden wordt, dan wordt in ieder geval een generiek sans-serif (schreefloos) lettertype gebruikt. Andere generieke lettertypes die je op kunt geven zijn serif, monospace, cursive en fantasy. Bij fantasy zijn de resultaten onvoorspelbaar en dat lettertype kun je beter niet gebruiken.

3.7.2.

De font-size eigenschap

Het instellen van de lettergrootte voor een webpagina is problematisch omdat browsers op verschillende manieren het formaat van letters afhandelen. De aanduidingen voor het bepalen van de grootte van een lettertype voor een webpagina zijn de volgende: - 33 -

xhtml en css xx-small, x-small, small, medium, large, x-large en xx-large Deze absolute sleutelwoorden definiëren niet een exacte grootte in punten of pixels die in elke situatie en voor elke browser en elk lettertype gelijk is. Ze verwijzen echter naar een tabel met lettergroottes die door de browser berekend wordt en per lettertype kan verschillen. Deze definitie is niet zo absoluut als het op het eerste gezicht lijkt. Je kunt absolute waarden voor de lettergrootte ook in eenheden als pixels of points uitdrukken. De wijze waarop absoluut opgegeven lettergrootten worden weergegeven door de verschillende browsers verschilt helaas. Het is onvermijdelijk dat het ontwerp er in de ene browser wat anders uit zal zien dan in de ander. Je kunt de grootte van het lettertype ook uitdrukken in relatieve eenheden. Dit kunnen percentages zijn, ems of de relatieve sleutelwoorden larger en smaller.

3.7.3.

Hoe meten we?

Je hebt al gezien dat je met verschillende waarden kunt meten. Als iets 0 is, hoef je uiteraard niet op te geven met welke maat je meet. Maar de volgende voorbeelden zullen allemaal hetzelfde resultaat opleveren: font-size: font-size: font-size: font-size: font-size:

1in; 2.54cm; 24.4mm; 72pt; 6pc;

Een overzicht van de maten: Afkorting in cm mm pt pc px

Betekenis inch centimeter millimeter point pica pixel

Uitleg 2.54 cm

1/72 inch 12 point (1/6 inch) één puntje van je scherm

Dit zijn absolute maten. Er is ook nog de mogelijkheid een relatieve maat op te geven met em. Als je bijvoorbeeld line-height: 1.1em gebruikt, dan betekent dit dat je vanaf dat moment de regelhoogte met 1.1 van het huidige font moet vermenigvuldigen. Of stel dat je een marge instelt van 1em, dan betekent dit dat er een witruimte komt ter grootte van de font-size die daar ingesteld is. De term em is oorspronkelijk de breedte of hoogte van de hoofdletter M in het huidige font. Het gebruik van een relatieve maat maakt het voor de gebruiker mogelijk om de weergave van de pagina op het beeldscherm zelf in te stellen. Dat is van belang voor mensen met een verminderd zichtvermogen. Het toepassen van relatieve maten verhoogt dan ook de bruikbaarheid en toegankelijkheid van de site en heeft de voorkeur.

- 34 -

xhtml en css 3.7.4.

De font-style eigenschap

De font-style eigenschap kun je gebruiken om te bepalen of de tekst normaal, cursief of schuin naar rechts hellend moet worden weergegeven. De waarde voor de laatste twee mogelijkheden is italic respectievelijk oblique. Bij schreefloze lettertypen (sans-serif) zijn italic en oblique over het algemeen hetzelfde. Bij lettertypen met schreef (serif) kan er verschil tussen zitten en wordt oblique wel gezien als een schuin geplaatste normale letter. In de praktijk blijkt de weergave door browsers van de waarden italic en oblique echter hetzelfde te zijn. Een voorbeeldje uit een CSS regel: font-style: italic;

3.7.5.

De font-weight eigenschap

Weight geeft de ‘vetheid’ van de lettertekens aan. Weight kan een relatieve waarde krijgen: bolder en lighter, absolute waarden variëren van 100 tot 900 (het vetst). De stappen worden per honderd gedaan (100, 200, … 900). Je kunt hier ook de absolute waarde normal (gelijk aan 400) of bold (700) gebruiken. De ervaring leert dat je deze eigenschap beter niet kunt toepassen omdat de meeste browsers er weinig of niets mee doen.

3.7.6.

De font shorthand eigenschap

Met de shorthand eigenschap kun je op verkorte wijze alle eigenschappen van de font declaratie in de CSS regel plaatsen, bijvoorbeeld: h3

{ font: bold italic 13px Arial, “Lucida Console”, sans-serif;

}

Neem altijd de font-size en de font-family op in een dergelijke definitie. De volgorde is belangrijk! De grootte en de familie komen achteraan en ook in die volgorde, dus eerst de grootte en dan de famlie. Als je een lettertype hebt dat uit meerdere woorden bestaat, is het verstandig dat lettertype tussen quotes te plaatsen.

3.7.7.

De font variant eigenschap

Deze eigenschap kent maar één effect: small-caps, dit zijn kleine hoofdletters, voorbeeld: KLEIN KAPITAAL.

3.8.

Teksteffecten

In deze paragraaf worden enkele toepassingen van teksteffecten besproken.

3.8.1.

Tekstuitlijning

Goed ontwerp bevat naast positieve ruimte (bezette ruimte) ook negatieve ruimte (lege ruimte). Bij een goed ontwerp is er een afweging tussen positieve en negatieve ruimte (gebruikte en ongebruikte ruimte). Je kunt op een webpagina negatieve ruimte maken door middel van het uitlijnen van de tekst. Met CSS heb je vier mogelijkheden om de tekst uit te lijnen: left, center, right en justify. De laatste eigenschap zorgt er voor dat de tekst uitgevuld

- 35 -

xhtml en css wordt. Met gebruik van deze eigenschappen kun je van een te volle pagina een pagina met lucht en ruimte maken. h1 { text-align: center; } h2 { text-align: right; }

De uitlijning kan een groot verschil maken, vergelijk de onderstaande tekstblokken eens: Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute Irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute Irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - 36 -

xhtml en css Lorep Ipsum is een bekende Latijnse tekst die door websitemakers vaak gebruikt wordt als vulling voor een website. De kijker wordt niet afgeleid door de inhoud van de website. Op www.lipsum.com kun je een gewenst aantal paragrafen genereren en die knippen en plakken. Je kunt met behulp van CSS de eerste regel van een paragraaf ook laten inspringen. De mate van inspringen kan opgegeven worden: p { text-indent: 3em; }

3.8.2.

Pseudo-element selectors

In CSS worden stijlen normaal gedefinieerd voor een element. Soms is het echter wenselijk effecten te bereiken, die niet mogelijk zijn als je alleen beschikt over element- of attribuutselectors. Bijvoorbeeld het in een bepaalde opmaak weergeven van de eerste letter of de eerste regel van de inhoud van een element. Om dat soort effecten mogelijk te maken, zijn pseudo-elementen geïntroduceerd. Een pseudo-element kun je zien als een denkbeeldig element, dat weliswaar niet in het document voorkomt, maar waarvoor je wel een stijl kunt definiëren. CSS 2.1 kent een viertal pseudo-element selectors: first-line: de eerste regel van een element wordt in een andere stijl weergegeven first-letter: de eerste letter van een element wordt in een andere stijl weergegeven (in de typografie 1 ook wel bekend als initial caps of drop caps) before: direct voor een element wordt extra inhoud toegevoegd after: direct na een element wordt extra inhoud toegevoegd De opbouw van een stijlregel met een pseudo-element selector is: element: first-line { stijldeclaratie }

Voorbeelden: p { font-weight: normal; } p:first-line { font-weight: bold; }

p { font-weight: normal; } p:first-letter { font-size: 250%; font-weight: bold; }

1

Typografie, van het Griekse τύπος (tupos: slag, vorm, afdruk) en γράφειν (graphein: schrijven), behelst het zetten, drukken en vormgeven van teksten, zowel voor functionele als esthetische doeleinden. Om deze doeleinden te verwezenlijken speelt de opmaak van tekstblokken, de bladspiegel alsook de keuze van lettertypen, vette en cursieve varianten, witruimte en interpunctie een belangrijke rol.

- 37 -

xhtml en css

Bron: www.handleidinghtml.nl

3.8.3.

Het opmaken van hyperlinks

Hyperlinks vormen speciale tekstelementen op een webpagina. Links zijn actieve elementen. Je kunt de volgende vier pseudoklassen gebruiken om het uiterlijk van de hyperlinks naar eigen smaak op te maken: link: visited: active:

legt de stijl van een hyperlink vast die nog niet bezocht is; legt de stijl van een hyperlink vast die al bezocht is; bepaalt de stijl van een hyperlink op het moment dat de gebruiker deze activeert door erop te klikken; bepaalt de stijl van een element op het moment dat de gebruiker er met de muisaanwijzer boven komt of er weer vanaf gaat;

hover:

Voorbeeldcode: a:link a:visited a:active a:hover

{ { { {

color: color: color: color:

blue; background-color: yellow; } black; background-color: yellow; } yellow; background-color: red; } red; background-color: blue; }

Zie verder: www.handleidinghtml.nl

3.8.4.

Kleur

Er zijn verschillende manieren om kleuren vast te leggen. In onderstaand voorbeeld is blauw gemaakt op verschillende manieren. color color color color color color

: : : : : :

blue; AppWorkspace; rgb(0, 0, 255); rgb(0%, 0%, 100%); #0000ff; #00f;

h1

{ color: #0000ff;

}

- 38 -

xhtml en css Je kunt kleuren vast leggen door middel van: 1. Beschrijvende kleurnamen 2. Systeemkleurnamen 3. RGB decimale kleurwaarden 4. RGB percentage waarden 5. Hexadecimale kleurwaarden 6. Hexadecimale kleurwaarden (afgekort) 1. Er zijn 17 officiële beschrijvende kleurnamen die door HTML en CSS ondersteund worden. Momenteel worden door de meeste browsers 140 beschrijvende kleurnamen ondersteund. De 17 officiële namen zijn: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal en yellow. De andere 133 namen worden niet door W3C ondersteund. Door de kleurnamen te gebruiken heb je vooraf een aardig idee van hoe de kleur er uit zal zien. 2. Er zijn 28 systeemkleurnamen. Deze kleurnamen komen overeen met kleurnamen die door het besturingssysteem worden gebruikt. De kleurnamen zijn specifiek voor het bedoelde besturingssysteem. Je kunt deze kleurnamen gebruiken om web interfaces te maken die overeen komen met het besturingssysteem van de gebruiker. Zie http://w3.org/TR/CSS21/ui.html voor een overzicht van de kleurnamen (system colors). 3. Kleuren die op een computerscherm worden getoond worden samengesteld uit drie basiskleuren, rood, groen en blauw. Deze drie kleuren kunnen gemengd worden tot een bijna eindeloze reeks kleurschakeringen. De RGB functie kan gebruikt worden door voor iedere kleur een waarde op te geven, gescheiden door een komma (van 0 tot en met 255). 4. Je kunt de RGB kleurwaarden ook in percentages opgeven. 5. De hexadecimale notatiewijze loopt van zwart (#000000) tot wit (#ffffff). De eerste twee tekens achter # staan voor rood, de tweede voor groen, de derde voor blauw. #0000ff staat voor géén rood, géén blauw, maximaal blauw. De hexadecimale notatie geeft de grootste controle over de kleurspecificatie, webdesigners zullen deze notatiewijze het liefst gebruiken. Als je echter snel een eenvoudige site wilt maken kies je wellicht liever voor de beschrijvende kleurnamen. 6. De afkorting kan alleen gebruikt worden wanneer de hexadecimale cijfers per paar gelijk zijn (#0000ff = #00f).

3.8.5.

Het gebruik van kleuren bij het ontwerp van een website

Het kiezen van een combinatie van kleuren die goed werken is een vak apart. Vooral het gebruik van kleur van de tekst in combinatie met een gekleurde achtergrond kan de leesbaarheid van de tekst bemoeilijken. Kies daarvoor in beginsel kleurenparen die complementair zijn aan elkaar. Je kunt daarvoor een kleurenwiel gebruiken.

- 39 -

xhtml en css Je kunt het kleurenwiel ook gebruiken om kleuren te zoeken die goed bij elkaar passen. Dit doe je door kleurcombinaties voor de vormgeving van de site te kiezen die dicht bij elkaar liggen. Kies twee of drie bij elkaar liggende kleuren en gebruik deze voor grote gebieden als achtergronden en bijvoorbeeld menu’s. Zo kun je zorgen voor een mooie site met esthetische effecten. Houdt bij het kiezen van kleuren ook rekening met bezoekers die kleurenblind zijn. Tip: Kijk op www.color-wheel-pro. Daar vind je een programma met een handig kleurenwiel en met informatie over kleurentheorie en kleurenschema’s.

.

Color Wheel Pro met een complementair kleurenschema en het helpbestand (kleurentheorie) Het kiezen van een geschikte kleurencombinatie (denk bijvoorbeeld aan tekst boven een gekleurde achtergrond) kan lastig zijn. Probeer verschillende combinaties uit. Dit kost tijd maar is de moeite waard. Je kunt hulp zoeken op het internet. Gebruik bijvoorbeeld Pixy’s Color Scheme Generator. Dit programma bevat ook een lijst van verschillende soorten kleurenblindheid. Je kunt zien hoe jouw schema er uit ziet voor bezoekers van je website die een bepaalde soort kleurenblindheid hebben. Zorg er ook voor dat – naast onbruikbaarheid van de site door verkeerde kleurencombinaties – de site niet alleen begrepen kan worden door de kleurencombinaties. Zorg er voor dat er naast gekleurde knoppen of afbeeldingen ook tekstuele informatie is.

- 40 -

xhtml en css Het zoeken naar een geschikt en fraai kleurenschema voor je site is een leuk en creatief proces. Zoek naar nieuwe combinaties, laat je niet uitsluitend leiden door dat wat gebruikelijk is.

3.8.6.

De kleur van de body instellen

Je kunt de kleur van de body tekst door middel van een extern stijlblad instellen met: body { color: red; }

Een betere manier is: body { color: white; background-color: maroon }

Verklaring: als je een voorgrondkleur (body tekst) instelt, stel dan ook een achtergrond kleur in. Je weet immers niet of de bezoeker de browser zo heeft ingesteld dat er een andere standaard achtergrond kleur getoond wordt, door via het stijlblad de achtergrondkleur in te stellen, voorkom je dat je pagina er mogelijk niet goed uit ziet.

Kleuren instellen in Microsoft Explorer 7 (links) en Firefox (rechts) Bedenk dat de ingestelde voorgrondkleur ook gebruikt gaat worden voor andere tekstelementen als kopregels, paragrafen en lijsten, tenzij je de kleuren voor deze elementen door middel van een CSS definitie zelf instelt.

3.8.7.

Transparantie en kleuren

Je kunt ervoor zorgen dat de achtergrondkleur van elk HTML element dezelfde is als de achtergrondkleur van de body. Dit doe je door de achtergrondkleur van het HTML element als transparant in te stellen: - 41 -

xhtml en css #transparanteRechthoek { color: white; background-color: transparant; }

3.8.8.

Wetenswaardigheden over kleur en achtergrondafbeeldingen

Je kunt op een webpagina de aandacht van de bezoeker voor bepaalde secties op de pagina trekken door middel van kleur. Je kunt in je stijlblad klasse definities opnemen als: .waarschuwing of .gevaar. Een dergelijke klasse definieert een achtergrondkleur, lettertype en voorgrondkleur en eventueel een kader, zo gekozen dat de aandacht van de bezoeker getrokken wordt. .gevaar { font-size: 1.3em; text-align: center; background-color: red; font-weight: bold; color: white; border: 2px solid black; }

Je kunt rijen in een tabel afwisselende kleuren geven om de leesbaarheid en aantrekkelijkheid van de tabel te bevorderen. In de stijldefinitie neem je op: .even { background-color: lightgrey; } .oneven { background-color: yellow;}

En in de html code:

rij 1, cel 1	rij 1, cel 2	rij 1, cel 1
rij 2, cel 1	rij 2, cel 2	rij 2, cel 1
rij 3, cel 1	rij 3, cel 2	rij 3, cel 1

- 42 -

xhtml en css Als je een achtergrond afbeelding voor de body gebruikt, stel dan ook een achtergrondkleur in. Als de pagina geladen wordt, zal eerst de achtergrondkleur getoond worden, daarna de afbeelding. De achtergrondafbeelding zal zich (standaard effect) horizontaal en verticaal herhalen. Je kunt met CSS er ook voor zorgen dat de afbeelding zich niet herhaalt. Je kunt er ook voor zorgen dat de achtergrondafbeelding op een vaste plaats blijft, ook tijdens het scrollen. De tekst zal dan over de afbeelding heen schuiven bij het scrollen. CSS: body { background-color: white; color: red; background-image: url(plaatje.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; }

Je kunt background-repeat ook zó instellen: • •

repeat-x: de afbeelding zal horizontaal herhaald worden. repeat-y: de afbeelding zal verticaal herhaald worden.

De background-position gebruikt twee waarden: de eerste voor de horizontale positie, de tweede voor de verticale positie. De mogelijke waarden zijn: left, right, center en top, center en bottom. Je kunt ook een percentage gebruiken voor elk van deze waarden, bijvoorbeeld: background-position: 50% 50%;

- 43 -

xhtml en css

4.

CSS lay-outs

4.1.

Twee kolommen voorbeeld lay-out met CSS

De indeling van de webpagina zal bestaan uit een middelgebied met twee kolommen met daarboven een kopregel en daaronder een voetregel. Het geheel krijgt een zekere afstand ten opzichte van de randen van het browservenster.

Het resultaat moet correct worden getoond in Firefox, daarna wordt het ontwerp – indien nodig – aangepast om ook correct te werken in Explorer 6 en 7 en Safari. Firefox voldoet meer aan de eisen die gesteld worden aan een voor CSS2 geschikte browser, daarom wordt het ontwerp het liefst eerst in Firefox getest.

4.2.

Voorbereiding

Maak een stijlblad en sla deze op als stijl.css in de map ‘stijl’. Koppel dit stijlblad aan het HTML document met:

4.3.

Stap 1: body eigenschappen instellen in het stijlblad

body { /* rand, achtergrond, lettertype instellen */ margin: 0; padding: 0; background-color: #000059; background-image: url(../images/picture.jpg) background-repeat: repeat-x; font: small Arial, Helvetica, sans-serif; }

4.4.

Stap 2: division container definiëren

Voor het gemak wordt er meestal een division gemaakt waarin alle andere elementen worden geplaatst. Deze division krijgt een achtergrondkleur, een voorgrondkleur en marges. Een dergelijke division wordt vaak een container genoemd.

- 44 -

xhtml en css

#container{ /* plaatshouder voor alle pagina-elementen */ /* achtergrondkleur: bijna wit */ background-color: #fdf8f2; color: #000000; margin: 30px 40px 30px 40px; /* padding creëert ruimte tussen de inhoud en de rand van de division */ padding: 10px; }

4.5.

Stap 3: HTML document maken en stijldefinities toepassen

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" />

Plaatshouder voor alle andere elementen

Voorbeeld in Firefox

- 45 -

xhtml en css 4.6.

Stap 4: kopregel definiëren en toepassen

In het stijlblad wordt opgenomen: #kopregel{ } #kopregel_onder{ border-top:solid 1px #333333; background-color:#fdf8f2; border-bottom: 1px solid #333333; }

De body in het HTML bestand wordt:

kopregel onder

Je plaatst de afbeelding in de kopregel div, daarin plaats je ook een andere div: kopregel_onder. In deze kopregel plaats je testregels tekst om na te kunnen gaan wat het resultaat is. De verschillende divisions zijn in elkaar geplaatst, dit wordt nesten genoemd. De divisions moeten in de juiste volgorde worden afgesloten. Geef bij elke afsluitende tag aan welke division wordt afgesloten. Zo blijft de structuur van de code duidelijk.

Voorbeeld in Firefox De kopregel onder gaat de koppelingen naar andere pagina’s bevatten, de tekst voor de links wordt geplaatst:

- 46 -

xhtml en css

Titel

Home | Sitemap | Contact

Voorbeeld in Firefox De koppelingen worden daadwerkelijk aangebracht:

Welkom op onze site

Home | Sitemap | Contact

De links krijgen het standaard uiterlijk van een hyperlink, dit past niet goed in het ontwerp.

- 47 -

xhtml en css

Voorbeeld in Firefox Het stijlblad wordt uitgebreid met definities voor a: link en a:visited. De onderlijning die aangeeft dat de tekst een link bevat kan worden opgelost door text-decoration: none. #kopregel_onder a:link a:visited text-decoration: none; background-color:#fdf8f2; color: #333333; font-style:oblique; }

{

De paginatitel valt weinig op, de h1 tag voor deze division krijgt de volgende definitie: #kopregel_onder h1 { color: #333333; font-size:14px; font-style:oblique; font-weight: bold;}

De HTML code wordt:

Welkom op onze site

Home | Sitemap | Contact

- 48 -

xhtml en css

Voorbeeld in Firefox

4.7.

Stap 5: de hoofdsectie met de inhoud en zijbalk

De hoofdsectie wordt na de kopregel geplaatst. De hoofdsectie bevat een zijbalk en een sectie voor de inhoud van de pagina. Na de inhoud-definitie wordt nog een voetregel geplaatst. Het stijlblad wordt uitgebreid met:

- 49 -

xhtml en css #zijbalk { float: left; border: 1px solid #000059; width: 230px; background-color: #FFFFFF; color: #000000; margin: 0; padding: 0; } #inhoud { /* top right bottom left, in de richting van de klok */ margin: 0 0 0 240px; padding: 0; border: 1px solid #000059; background-color: #FFFFFF; color: #000000; } #voetregel { clear: both; border: 1px solid #000059; margin-top: 10px; }

De HTML code wordt nu zó uitgebreid:

Welkom op onze site

Home | Sitemap | Contact

inhoud zijbalk

inhoud

Copyright 2007 Alle rechten gereserveerd.

- 50 -

xhtml en css

Voorbeeld in Firefox

Voorbeeld in Internet Explorer 6 - 51 -

xhtml en css HTML code twee_kolommen_layout.html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" />

Welkom op onze site

Home | Sitemap | Contact

inhoud zijbalk

inhoud

Copyright 2007 Alle rechten gereserveerd.

- 52 -

xhtml en css CSS regels stijl.css: /* CSS stijl */ body { /* rand, uitvulling, achtergrond, lettertype instellen */ margin: 0; padding: 0; background-color: #666666; font: small Arial, Helvetica, sans-serif; color: white; } #container { /* plaatshouder voor alle pagina-elementen */ /* achtergrondkleur: bijna wit */ background-color: #ffffff; color: #000000; margin: 30px 40px 30px 40px; /* padding creëert ruimte tussen de elementen en de rand van de division */ padding: 10px; border: 1px; } /* division met elementen voor de kopsectie */ #kopregel { background-color:#ffffff; height: 1%; } #kopregel_onder { border-top:solid 1px #333333; background-color:#ffffff; border-bottom: 1px solid #333333; height: 1%; } #kopregel_onder a:link, #kopregel_onder a:visited { text-decoration: none; background-color:#ffffff; color: #333333; font-style:oblique; } #kopregel_onder h1 { color: #333333; font-size:14px; font-style:oblique; font-weight: bold; } #hoofdsectie { /*position: relative; top:0; left: 0;*/ width: 100%; margin-top: 10px; } #inhoud { /* top right bottom left, in de richting van de klok */ margin: 0 0 0 240px; padding: 0; border: 1px solid #000059; background-color: #FFFFFF; color: #000000;}

- 53 -

xhtml en css #zijbalk { float: left; /*position: absolute;*/ /*top: 0;*/ /*left: 0;*/ border: 1px solid #000059; width: 230px; background-color: #FFFFFF; color: #000000; margin: 0; padding: 0; } #voetregel { clear: both; border: 1px solid #000059; margin-top: 10px; }

4.8.

En nu verder …

Je kunt nu, gewapend met de kennis uit deze reader, sites ontwerpen en maken zonder gebruik te maken van tabellen voor de lay-out. Je kunt XHTML sites maken waarbij de opmaak en paginastructuur door CSS wordt bepaald. Het is nu aan jou om te zoeken naar creatieve oplossingen voor het ontwerpen en maken van een site waar de bezoekers graag naar terug komen en waarvan de gebruikers vinden dat het vooral een aantrekkelijke, interessante en goed ontworpen site is. Kijk kritisch en nieuwsgierig naar de sites die bezoekt, je wordt zo wellicht op leuke en goede ideeën gebracht. Veel succes!

- 54 -

xhtml en css

Bijlage: Nuttige links W3C

www.w3c.org

XHTML 1.0

www.playgarden.com/w3c/TR/xhtml1/overview.html

W3Schools

www.w3schools.com/xhtml/

HandleidingHTML

www.handleidinghtml.nl/css/

Webdesign.about.com

webdesign.about.com/od/advancedcss/a/aa042406.htm

Madness.nl

www.madness.nl/artikel/default.asp

Websitemaken.be

www.websitemaken.be/index.php?page=show_item&id=470

Sitemasters.be

www.sitemasters.be/?pagina=tutorials/tutorials&cat=2&id=90

TopStyle Lite

http://topstyle.en.softonic.com/

- 55 -

xhtml en css

- 56 -

×

Report "XHTML en CSS. Ruud Koortens Frans Peeters"

Your name

Email

Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint

Description

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close