cursus HTML 5

< HTML & CSS >de basis

< Jeroen Goubert / Don Bosco Halle >

versie 23/03/2013

2MULTIMEDIATECHNIEKEN // WEBDESIGN - HTML & CSS DE BASIS // GOUBERT

INLEIDING IN HTML 3

1.1 Wat is HTML? 3

1.2 Minimum HTML5 Document 3

1.3 Elementen 4

1.4 Attributen 4

HELLO WORLD 6

2.1 Hello world - onze eerste pagina 6

2.2 De Head 7

2.3 Body element 8

2.5 Maak je eigen template 10

LOGISCHE STRUCTUUR EN SEMANTIEK 11

3.1 HTML en semantiek 11

3.2 Markeren van “zones” in HTML5 11

3.3 Andere groepeerelementen: <div> en <span> 12

3.4 Logische opmaak van inhoud binnen “zones” 14

CASCADING STYLESHEETS 15

4.1 Inleiding 15

4.2 CSS syntax 16

4.3 Stijlen verbinden met HTML 17

CSS SELECTORS 19

4.1 Selectors 19

4.2 Element selectors 19

4.3 Universele selector 22

4.4 Attribuut selectors 23

4.5 Class en ID selectors 24

4.6 CSS Pseudo-classes 25

CSS EN HET BOXMODEL 27

5.1 Wat? 27

5.2 Dimensies 28

BOXEN POSITIONEREN 30

6.1 Positionering 30

6.2 Elementen Floaten 34

HYPERLINKS 39

7.1 Wat zijn hyperlinks? 39

7.2 Navigatie binnen mappenstructuur op server 39

7.3 Downloaden bestand 40

7.4 Bestemming binnen document 41

7.5 Mailto-links 42

GESTRUCTUREERDE NAVIGATIE 43

8.1 Inleiding 43

8.2 HTML-lijsten 43

8.3 Navigatie met een UL 44

OPBOUW VAN EEN LAYOUT 46

9.1 Inleiding 46

9.2. Alles bijeenhouden, gebruik van een container 47

9.3 Grote zones 48

9.4 Invullen van de grote zones 49

9.5 Het resultaat, een fase in de ontwikkeling 51

DE WEBSITE ONLINE PLAATSEN 53

10.1 FTP (File Transfer Protocol) 53

10.2 Praktisch 53

CSS WORKFLOW 55

11.1 Workflow? 55

11.2 Frameworks 55

11.3 Reset CSS 56

11.4 Master CSS 57

11.5 Algemene Conclusie 57

RESPONSIVE DESIGN EN @MEDIA 58

12.1 CSS3 en nieuwe mogelijkheden 58

12.2 @media van de grootte en soort 59

12.3 Werkwijze voor het omgaan met schermformaten 60

12.4 Media Queries en het Video element 62

LETTERTYPES EN WEBDESIGN 63

13.1 Keuze van het font 63

13.2 Hoe specifieke lettertypes gebruiken 63

13.3 Speciale karakers in HTML 67

BRONVERMELDING 68

TYPE GUIDE 69

Inhoudsopgave


HOOFDSTUK 1Inleiding in HTML

1.1 Wat is HTML?

HTML5 wordt de nieuwe standaard voor HTML. De vorige versie van HTML, HTML 4.01, kwam in 1999. Het web is veel veranderd sinds die tijd HTML5 is nog steeds in evolutie. Echter, de belangrijk-ste browsers ondersteunen veel van de nieuwe HTML5 elementen en API’s.

Enkele regels voor HTML5 werden reeds vastgesteld:

• Nieuwe functies moet gebaseerd zijn op HTML, CSS, DOM en JavaScript

• Verminder de behoefte aan externe plugins (zoals Flash)

• Betere foutafhandeling

• Meer markup (html) om scripting te vervangen

• HTML5 moet apparaat onafhankelijk zijn

• Het ontwikkelingsproces moet zichtbaar zijn voor het publiek

1.2 Minimum HTML5 Document

HTML is géén programmeertaal. Het dient om inhoud te structureren en bestaat uit:

• document type definition <!DOCTYPE html>

• inhoud

• tags <html></html>

• attributen <img src="bol.jpg"/>

Een HTML-document bestaat uit twee grote delen: de head en de body.

De head wordt gedefinieerd met het HEAD element en bevat informatie, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan bijvoorbeeld instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden.

In de head van elk document moet in ieder geval het TITLE element worden opgenomen. Hiermee wordt een titel vastgelegd, welke in de meeste browsers te zien is in de titelbalk van het venster.

De body wordt gedefinieerd met het BODY element en bevat de feitelijke inhoud van het document.

Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat. Binnen het BODY element kun je ondermeer koppen, paragrafen, horizontale lijnen, afbeeldingen en hyperlinks opnemen.


<!DOCTYPE html> <html> <head> <title>Titel van het document</title> </head>

<body> inhoud van het document...: <img src="bol.jpg" /> </body>

</html>

1.3 Elementen

Starttag Element inhoud Eindtag<p> </p><a href="default.html"> dit is een link </a><br>

De starttag wordt ook wel de opening tag genoemd. De eind-tag wordt ook wel de afsluitende tag genoemd.

HTML element syntax:

• Een HTML-element begint met een begin-tag / openingstag

• Een HTML-element wordt afgesloten met een eind-tag / afsluitende tag

• De elementinhoud is alles wat tussen de begin en de eind-tag staat

• Sommige HTML-elementen hebben lege inhoud

• Lege elementen worden gesloten in de begin-tag

• De meeste HTML-elementen hebben attributen

De meeste HTML-elementen kunnen worden genest (in andere HTML-elementen). De volledige HTML-documenten zelf bestaan uit geneste HTML-elementen.

1.4 Attributen

Elementen kunnen bepaalde eigenschappen hebben die attributen worden genoemd:

• HTML-elementen kunnen attributen bevatten

• Attributen geven extra informatie over een element

• Attributen worden altijd in de begin-tag geschreven

• Attributen bestaan uit naam / waarde-paren, zoals: naam = “waarde”

• Attribuutwaarden moeten altijd tussen aanhalingstekens staan

• gebruik kleine letters voor attribuutnamen


Een voorbeeld:

<!DOCTYPE html> <html> <head> <title>Titel van het document</title> </head>

<a href="home.html" > Klik hier om naar de startpagina te gaan </a> </body> </html>

Het href-attribuut kan enkel binnen het a-element gebruikt worden. Een element kan meerdere attributen tegelijkertijd bevatten. Als voorbeeld vind je hier de lijst van alle attributen die bij het a-element horen. Het is natuurlijk niet nodig die allemaal te gebruiken.

� http://www.w3schools.com/tags/tag_a.asp

Een lijst van de globale HTML attributen:

� http://www.w3schools.com/tags/ref_standardattributes.asp

Een lijst van ALLE html attributen:

� http://www.w3schools.com/tags/default.asp


2.1 Hello world - onze eerste pagina

HTML-documenten zijn zogenaamde ASCII-bestanden. Dat wil zeggen dat je ze kunt maken met een gewone tekst-editor. Met behulp van een teksteditor schrijven we onze pagina’s.

De formele extensie van de bestandsnaam van een HTML-document is “html”. Omdat een extensie uit slechts 3 posities mag bestaan bij op DOS/Windows 3.x gebaseerde systemen, is in het verleden de gewoonte ontstaan om “htm” als extensie te gebruiken. Aangezien deze systemen niet of nauwe-lijks meer voorkomen, is er weinig reden meer om niet gewoon “html” aan te houden.

Voordat je anderen in de gelegenheid stelt je HTML-documenten te bekijken, moet je controleren of ze geen fouten bevatten. Daarbij gaat het niet alleen om de spelling, maar ook om de HTML-code en de hyperlinks.

Het is belangrijk dat je de HTML-code op de juiste manier gebruikt. Je verkleint daarmee de kans dat de browser van een bezoeker de documenten niet correct kan weergeven.Voor de controle van de HTML-code kun je gebruik maken van de HTML Validation Service van het W3C (World Wide Web Consortium), of van de WDG HTML Validator. Deze online validators ma-ken gebruik van officiële door het W3C voor de verschillende HTML-versies opgestelde “document type definitions” (DTD; zie ook de beschrijving van de DOCTYPE-declaratie).Wanneer je de HTML-documenten liever offline wilt controleren, dan kun je gebruik maken van een daarvoor bedoeld programma.

Naast de controle met behulp van een validator, is het ook goed je documenten te bekijken met verschillende browsers. Je komt er dan onder meer achter of een browser een afwijkende weergave heeft, of fouten bevat waarmee je rekening moet houden.

Enkele vuistregels bij het schrijven van HTML pagina’s:

Weg met WYSIWYG:

• want je wil pro worden:

• een teksteditor zoals TextWrangler of Crimson Editor (Géén Dreamweaver!)

Maak een template:

• Anders verliest je veel tijd

• Een map met daarin de nodige mapjes (img, css) en bestanden (index.html, stijl.css)

Spring per niveau in middels tabs:

• Leesbare code is van levensbelang

• Enkel inhoud moet je niet persé inspringen.

Valideer!!!

HOOFDSTUK 2Hello World


Een HTML-document bestaat uit twee delen: de head en de body. De head wordt gedefinieerd met het HEAD element en bevat informatie over het document, de body wordt gedefinieerd met het BODY element en bevat de feitelijk inhoud van het document. Het HTML element markeert het begin en einde van een HTML-document en geeft aan dat het document HTML-code bevat.

Helemaal aan het begin van het document kan een DOCTYPE (document type) declaratie worden opgenomen, waarmee wordt aangegeven welke HTML-versie gebruikt is bij het maken van het docu-ment. In het voorbeeld hierboven gebruiken we de HTML5 doctype declaratie.

2.2 De Head

<head></head>

In de head van een document wordt informatie opgenomen, die betrekking heeft op het document, maar niet in het documentvenster wordt weergegeven. De informatie kan instructies aan de browser bevatten over hoe het document verwerkt of weergegeven moet worden, of bijvoorbeeld gericht zijn op zoekmachines.

2.2.1 De head elementen

<head> Definieert informatie over het document<title> Definieert de titel van een document<base> Definieert een standaard adres of een standaard doel voor alle links op een pagina<link> Definieert de relatie tussen een document en een externe bron<meta> Definieert metagegevens over een HTML-document<script> Definieert een client-side script<style> Definieert stijl informatie voor een document

<title> element

In de head van elk document moet een titel worden vastgelegd met het TITLE element. Deze titel is te zien in de titelbalk van het documentvenster en wordt daarnaast door zoekmachines gebruikt bij de weergave van zoekresultaten.

<title>Mijn eerste HTML pagina</title>

<base> element

De bestemming of URI (Uniform Resource Identifier) van een hyperlink kan absoluut of relatief zijn. In een absolute URI is in ieder geval het adres opgenomen van de server, waarop het bestand staat dat geopend moet worden. Een relatieve URI bevat alleen het path op de server. Wanneer een hyperlink met een relatieve URI geopend moet worden, gebruikt de browser de URI van het huidige document als basisadres en bepaalt daarmee de absolute URI van de link. Door het BASE element op te nemen, kan aan de browser aangegeven worden dat een andere URI als basisadres gebruikt moet worden. Als dat basisadres bijvoorbeeld betrekking heeft op een andere server, dan kun je naar bestanden op deze server toch relatieve links opnemen. Daarnaast kan het gebruik van het BASE ele-ment handig zijn als het huidige document verplaatst wordt naar een andere directory of server, maar niet tegelijkertijd alle bestanden waarnaar de relatieve URI’s in het document verwijzen.Het BASE element kan ook gebruikt worden om aan te geven in welk frame of venster de hyperlinks in het document geopend moeten worden.

<meta> element


Een korte beschrijving van het document, sleutelwoorden en andere informatie, welke zoekmachines gebruiken bij de indexering van een document, worden opgenomen met het META element, waar-aan de attributen NAME en CONTENT worden toegevoegd. Daarnaast kan ook het LINK element met de attributen REL en HREF een functie hebben in het vastleggen van informatie ten behoeve van zoekmachines.

<meta name=”description” content=”webdesign en ontwikkeling”>

Meer uitleg over deze materie, door Google: � http://www.youtube.com/watch?feature=player_embedded&v=RBTBEfd7z_Y

<link> element

Met het LINK element wordt een relatie gelegd tussen het huidige document en een andere bron (bijvoorbeeld een ander document). Het heeft onder andere zijn toepassing bij stylesheets, waar het aangeeft welk extern stijlblad gebruikt moet worden. Het LINK element kan ook informatie bevatten, welke gebruikt wordt door zoekmachines.

<link rel=”stylesheet” type=”text/css” href=”mijnStijlen.css”>

<script> element

Het SCRIPT element kan worden gebruikt om een script te definiëren, dat automatisch of als resul-taat van een actie van de gebruiker wordt uitgevoerd.

2.3 Body element

In de body van een document wordt de inhoud opgenomen, welke in het documentvenster te zien is. Bij deze inhoud kan het gaan om tekst, maar bijvoorbeeld ook om afbeeldingen.Er is een groot aantal mogelijkheden beschikbaar voor de wijze waarop de inhoud gestructureerd en gepresenteerd kan worden.

De volledige lijst van HTML tags vind je op het web:

� http://www.w3schools.com/tags/default.asp

Hieronder staan enkele voorbeelden van veel gebruikte tags:

2.3.1 Enkele Body elementen

<h1> Titels boven teksten

HTML headings worden gedefinieerd met de <h1> om <h6> tags.

<h1>Dit is een heading</h1><h2>Dit is een heading</h2><h3>Dit is een heading</h3>


<p> Paragrafen

HTML alinea’s worden gedefinieerd met de <p> tag.

<p>Dit is een paragraaf</p><p>Dit is een andere paragraaf</p>

Na elke paragraaf wordt een lege regel geforceerd.

<br/> Break (return)

Is een geforceerde return binnen een tekst. Denk bijvoorbeeld aan een gedicht waar je niet elke lijn wil opdelen in paragrafen.Een <br/> element is een uitzondering op de regel dat elementen in paren komen.

<p>Dit is een break <br/> binnen een paragraaf</p>

<a> Links naar andere pagina’s

HTML-links worden gedefinieerd met de tag <a>.

<a href=”http://www.w3schools.com”>Dit is een link</a>

� ! Meer uitleg vind je in hoofdstuk 7 van deze cursus!

<img> Afbeeldingen

HTML-afbeeldingen worden gedefinieerd met de tag <img>. Het is niet meer aanbevolen om de breedte en hoogte aan te duiden door middel van hun respectievelijke attributen. Vroeger wat dat een goed idee omdat de pagina structuur dan al goed gerenderd kon worden, maar tegenwoordig, met responsive webdesign e.d. zijn zulke html-attributen vooral vervelend omdat we dit via de CSS definiëren.

<img src=”bert_en_ernie.jpg” width=”104” height=”142”>

<img src=”bert_en_ernie.jpg”>


2.5 Maak je eigen template

De volgende code is je template die je bewaard en altijd zal gebruiken als basis waarop je kan begin-nen bouwen.

Typ de volgende tekst en bewaar met als benaming template.html in een map genaamd “HTML tem-plate” op je eigen priv-map.

<!DOCTYPE html> <html> <head> <title>Mijn eerste HTML pagina</title> <link href=”css/reset.css” rel=”stylesheet” type=”text/css” /> <link href=”css/web.css” rel=”stylesheet” type=”text/css” /> <meta name=”description” content=”webdesign en ontwikkeling”> </head> <body> <h1>Dit is een heading</h1> <h2>Dit is een heading</h2> <h3>Dit is een heading</h3>

<p>Dit is een paragraaf</p> <p>Dit is een andere paragraaf</p>

<a href=”http://www.w3schools.com”>Dit is een link </a>

<img src=”bert_en_ernie.jpg” width=”104” height=”142”> </body> </html>

Zowel in de head als in de body van een document kan tekst als commentaar opgenomen worden, waardoor het niet door de browser wordt weergegeven.




HOOFDSTUK 3Logische structuur en semantiek

3.1 HTML en semantiek

Semantiek vertelt ons wat woorden en woordgroepen (bv. zinnen) betekenen.

In het geval van HTML komt het erop neer, dat men de inhoud (content) van de webpagina markeert (de markup) om aan te geven wat die inhoud betekent. Een voorbeeld:

Klein klein kleutertje

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce arcu. Proin eget neque. Donec adipiscing, mi nec condimentum aliquet, mi lorem fermentum erat, sed vestibulum orci libero sed wisi.

Je ziet een titel en een stuk tekst. In HTML noemen we dat een heading, en een paragraaf. Dus:

<h1>Klein klein kleutertje</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce arcu. Proin eget neque. Donec adipiscing, mi nec condimentum aliquet, mi lorem fermentum erat, sed vestibulum orci libero sed wisi.</p>

Indien we de inhoud van een webpagina niet voorzien van tags (markeringen), dan zal de browser alles als 1 brok tekst laten zien. Om de tekst witregels, koppen en lijsten te laten worden, gebruiken we dus tags.

Maar semantiek is meer dan content markeren. Het is ook het juist markeren wat belangrijk is. Feitelijk is het markeren met tags het proces van het toevoegen van meta-informatie aan de inhoud. Meta-informatie maakt geen onderdeel van de inhoud, maar beschrijft de inhoud.

3.2 Markeren van “zones” in HTML5

Alvorens we onze paginainhoud specifiek gaan markeren als tekst, titels, afbeeldingen etc. is het goed om een indeling te doen door middel van zones.

Elke webpagina kent wel enkele zones die er steeds zijn:

• hoofding

• navigatie

• artikel

• voetnoot


In HTML 5 gebruiken we daar dan de volgende tags voor:

<aside> Definieert bepaalde inhoud los van de pagina-inhoud<figure> Definieert op zich staande inhoud: afbeeldingen, diagrammen, foto’s, code lijsten, etc.<header> Definieert een hoofding voor een document of sectie<nav> Definieert navigatielinks<section> Definieert een onderdeel in een document<article> Definieert een artikel<footer> Definieert een voettekst voor een document of sectie

Een volledige lijst vind je op:

� http://www.w3schools.com/html/html5_new_elements.asp

In de praktijk zouden we dus bijvoorbeeld deze opmaak kunnen doen:

<header> <h1>Dagboek</h1></header> <nav> <h2>Menu</h2> <ul> <li><a href="vorige-week.html">vorige week</a></li> <li><a href="archief.html">archief</a></li> </ul></nav><article> <h2>Gisteren</h2> <p>Vorige week dronk ik koffie... blabla</p></article><footer> <p><small>copyright Jef Pedal</small></p></footer>

3.3 Andere groepeerelementen: <div> en <span>

HTML Block-elementen

De meeste HTML-elementen worden gedefinieerd als block-level elementen of als inline elementen.Block-level elementen beginnen met een nieuwe lijn wanneer deze wordt weergegeven in een brow-ser.

Voorbeelden: <h1>, <p>, <ul>, <table>

HTML Inline-elementen

Inline elements worden normaal getoond zonder een nieuwe lijn te starten.

Voorbeelden: <strong>, <a>


Andere HTML Groupeertags

<div> Definieerd een deel in een document (block-level)<span> Definieerd een deel in een tekst in een document (inline)

Het HTML <div> Element

Het HTML <div> element is een blokniveau element dat kan worden gebruikt als een container voor het groeperen andere HTML elementen.

Het <div> element heeft geen speciale betekenis. Behalve, omdat het een blokniveau element is zal de browser een regeleinde ervoor en erachter forceren.

Wanneer het samen met CSS wordt gebruikt, kan het <div> element worden gebruikt om de stijlat-tributen in te stellen op grote blokken inhoud.

Een andere veel voorkomende gebruik van de <div> element, is voor document opmaak. Het ver-vangt de “oude manier” van het definiëren van lay-out met behulp van tabellen. Het gebruik van tabel-len is niet het juiste gebruik van de <table> element. Het doel van het <table> element is het tonen van tabelgegevens.

<div> Lorem ipsum dolor sit amet, consectetur elit </div>

Het HTML <span> Element

Het HTML <span> element is een inline element dat gebruikt kan worden als een container voor tekst.

Het <span> element heeft geen speciale betekenis.

Wanneer het samen met CSS gebruikt wordt, kan het <span> element dienen om de (css)stijl in te stellen op delen van de tekst.

<p> Lorem ipsum dolor sit amet, adipisicing elit <span> sed do eiusmod tem-por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </span> quis nostrud exercitation ullamco laboris nisi ut aliquip </p>


3.4 Logische opmaak van inhoud binnen “zones”

3.3.1 Tekst formatteren

<p><strong>Deze tekst is bold of strong</strong></p><p><em>Deze tekst is italic of emphasized</em></p><p><code>Deze tekst is computer output</code></p><p>Deze tekst is<sub> subscript</sub> en <sup>superscript</sup></p>

In de browser is dit het resultaat:

Deze tekst is bold of strong

Deze tekst is italic of emphasized

Deze tekst is computer output

Deze tekst is subscript en superscript

<strong> of <em> betekent dat u de tekst wil weergeven op een manier dat de gebruiker begrijpt dat deze belangrijk is. Momenteel renderen alle belangrijke browsers <strong> als vet en <em> als cursief. Dit kan natuurlijk wijzigen in de toekomst.

Je zal later merken dat je door het gebruik van CSS een eigen stijl kan geven aan <strong> en <em> zonder dat de semantische betekenis verloren gaat.


4.1 Inleiding

HTML is oorspronkelijk ontwikkeld om informatie via hypertext-documenten te ontsluiten voor verschillende platforms (zoals Windows, Macintosh en Unix). Bij de weergave van HTML-documenten ging het niet om een mooie, door de auteur geheel vastgelegde lay-out. Uitgangspunt was dat de informatie in een heldere structuur aan een bezoeker geboden moest worden. Bijvoorbeeld door de informatie in te delen met behulp van koppen van verschillend gewicht en paragrafen.

Met het toenemende gebruik van het internet ontstond bij webauteurs steeds meer de behoefte aan extra mogelijkheden bij de opmaak van documenten. Op deze behoefte is door de ontwikkelaars van browsers (Netscape en Microsoft) ingespeeld door het introduceren van nieuwe elementen en attributen. Sommige van deze elementen en attributen werden breed geaccepteerd, maar bij andere elementen bleef de ondersteuning beperkt tot één enkele browser. Webauteurs zelf gebruikten hun creativiteit om binnen de bestaande mogelijkheden van HTML meer invloed op de opmaak van hun documenten te krijgen. Voorbeelden zijn het gebruik van tabellen om de inhoud op een bepaalde plaats te krijgen en het omzetten van tekst in een afbeelding. De verstrengeling van structuur en presentatie die hierdoor ontstaat, heeft tot gevolg dat het niet meer zeker is dat een document altijd in elke browser en op elk platform goed te bekijken is.

Als oplossing voor dit probleem zijn stylesheets geïntroduceerd. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet weer zorgen voor de structuur van het docu-ment, de presentatie wordt bepaald met behulp van in stylesheets vastgelegde stijlen.

De taal waarmee stylesheets worden gemaakt, heet Cascading Style Sheets (CSS) en is ontwikkeld door het World Wide Web Consortium (W3C). De laatste specificatie van Cascading Style Sheets (CSS 3) bevat een groot aantal mogelijkheden bij de opmaak van HTML-documenten en in toekom-stige versies zal dit aantal alleen maar toenemen:

• CSS staat voor C ascading S tyle S heets

• Stijlen definiëren hoe HTML-elementen er uit zien in de browser

• Stijlen werden toegevoegd aan HTML 4.0 om een probleem op te lossen

• Externe Stylesheets kan een hoop werk besparen

• Externe Stylesheets worden opgeslagen in CSS-bestanden

HOOFDSTUK 4Cascading stylesheets


4.2 CSS syntax

Als je dit zelf zou schrijven in een extern stijlblad doe je dit best zo, om de leesbaarheid hoog te houden:

h1 { color: blue; font-size: 12px; }

Wat hierboven staat, laat zich wel raden. Alle inhoud die binnen alle <h1>-elementen staat in de webpagina waar deze css is aan gekoppeld heeft blauwe tekst met als corpsgrootte 12 pixels.

CSS commentaarCommentaar worden gebruikt om je code uit te leggen, en kan je helpen wanneer je de broncode wil bewerken op een later tijdstip. Commentaar worden genegeerd door browsers.

Een CSS commentaar begint met /* en eindigt met */ zoals deze:

/*dit is een stukje commentaar*/

p { text-align:center;

/* dit is een ander stukje commentaar*/

color:black; font-family:arial;}


4.3 Stij len verbinden met HTML

Wanneer je met stijlen wilt werken, dan moet je die op de een of andere manier in verband brengen met je HTML-document. HTML biedt daarvoor drie mogelijkheden:

• inline stijlen

• een stijlblok

• extern stijlblad

Inline stijlenEen inline stijl gebruik je als een stijl slechts voor een enkel element binnen één HTML-document wilt gebruiken. Je voegt dan aan het element het STYLE attribuut toe en geeft het als waarde één of meer stijldeclaraties:

<p style="font-family: Helvetica"> lorem ipsum </p>

StijlblokWanneer een stijl vaker gebruikt wordt en/of voor meer elementen, maar slechts binnen één docu-ment, dan kun je het beste een stijlblok in de head van het document plaatsen. Dat doe je door het STYLE element op te nemen en daarbinnen één of meer stijlregels te plaatsen.

<!DOCTYPE html> <html> <head> <title> Mijn eerste CSS stijlen via een stijlblok </title> <meta name="keywords" content="HTML,CSS">

<style>

h1 { color: blue; font-size: 12px; }

</style> <meta name="description" content="webdesign en ontwikkeling"> </head> <body> <h1> Deze titel zal in blauwe tekst staan met corps grootte 12px </h1> </body>

</html>


Extern stijlbladWanneer een stijl in meerdere documenten gebruikt moet worden, dan is het verstandig deze in een apart document te plaatsen: een extern stijlblad. In de head van een HTML-document kun je het LINK element opnemen om aan te geven in welk stijlblad de stijlen staan. We hebben dit reeds in onze template gedaan. Nu kunnen we dit eindelijk effectief gebruiken.

<link href="stijlblad.css" rel="stylesheet" type="text/css">

Het stijlblad zelf bevat geen HTML-code, maar alleen één of meer stijlregels. Dus bijvoorbeeld:

h3 { color:red; text-align:left; font-size:8px;}

Een uitgebreide beschrijving van de mogelijkheden om stijlen te koppelen aan HTML is te vinden op:

� http://www.w3schools.com/css/css_howto.asp


4.1 Selectors

De selector selecteert de elementen waarvoor de gedeclareerde stijl geldt. Er zijn verschillende soorten selectors.

• Element-selectors

• Attribuut-selectors

• CLASS- en ID-selectors

• Pseudo-element selectors

• Pseudo-class selectors

Bij element-selectors is de selector een element of een combinatie van elementen. Bij attribuut-se-lectors worden elementen geselecteerd op de aanwezigheid van een attribuut of de waarde van een attribuut. CLASS- en ID-selectors zijn een speciale vorm van attribuut-selectors, omdat de attributen vaak alleen aan een element worden toegevoegd om er een stijl aan te koppelen. Bij pseudo-class selectors en pseudo-element selectors gaat het om speciale constructies voor situaties, waarin niet alleen op basis van een attribuut of element bepaald kan worden welke stijl gebruikt moet worden.

4.2 Element selectors

Bij element-selectors bepalen één of meer elementen op welk deel van een document de stijl be-trekking heeft. In de meest eenvoudige vorm is een enkel element de selector. Meerdere elementen waarvoor dezelfde stijl geldt, kunnen ook gegroepeerd worden. Verder zijn er constructies voor des-cendent en child element-selectors, waarbij de stijl alleen mag worden aangehouden als een element is opgenomen in een ander element. Bij adjacent sibling element-selectors gaat het om elementen die direct op elkaar volgen. Tenslotte kennen we nog de universele selector.

Stijlregels met element-selectors worden opgenomen in een stijlblok in de head van een document, of in een extern stijlblad.

Enkelvoudige element-selectorBij een enkelvoudige element-selectors is de selector een enkel element.De opbouw van een stijlregel met een enkelvoudige element-selector is:

Element { stijldeclaratie }

Elk element kan gebruikt worden als selector. Bijvoorbeeld:

body { font-family: sans-serif; }p { font-size: 13px; }

Groeperen selectorsElement-selectors, waarvoor de stijldeclaratie hetzelfde is, kunnen gegroepeerd worden in een door komma’s gescheiden lijst. Daarmee kan de omvang van een stijlblok in de head van een document of een extern stijlblad beperkt worden. Stijlregels met gegroepeerde element-selectors hebben de volgende opbouw:

HOOFDSTUK 4CSS selectors


Element1, Element2 { stijldeclaratie }

Element1, Element2, Element3 { stijldeclaratie }

In het volgende voorbeeld wordt bepaald dat de tekst ingesloten door de elementen H1 en H2 in rood en met een schreefloos lettertype moet worden weergegeven. Omdat we voor de twee elementen een van de standaard afwijkende, maar onderling verschillende grootte willen definiëren, is elk ook nog eens als enkelvoudige element-selector gebruikt. In een stijlblok in de head van het document staan daarom de volgende drie stijlregels:

H1, H2 { color: #FF0000; background-color: #FFFFFF; font-family: sans-serif; }H1 { font-size: 30px; }H2 { font-size: 24px; }

4.2.1 Descendent element-selector

Bij descendent element-selectors wordt de stijl alleen aan een element toegevoegd, wanneer deze een nakomeling (descendent) is van één of meer andere elementen.

Stijlregels met descendent element-selectors hebben de volgende opbouw:

Element1 Element2 { stijldeclaratie }

Element1 Element2 Element3 { stijldeclaratie }

In het eerste geval geldt dat Element2 een nakomeling moet zijn van Element1. In het tweede geval moet Element3 een nakomeling moet zijn van Element2, dat op zijn beurt weer een nakomeling ele-ment moet zijn van Element1.

Als voorbeeld staan in een stijlblok in de head van het document de volgende stijlregels:

P, H3 { color: #000000; background-color: #FFFFFF; }P { font-size: 13px; }H3 { font-size: 16px; }P I { color: #FF0000; }

In de body van het document is het I element op verschillende manieren opgenomen:

<P>De <em>cursieve tekst </em> in een P element is rood.</P> <P>Ook als I <strong>is ingesloten in B is <em>cursieve tekst</em> </strong> in een P element rood.</P><H3>De <em>cursieve tekst</em> in een H3 element is niet rood</H3>


4.2.2 Child element-selector

Bij child element-selectors gaat het om een beperking van de descendent element selectors. De stijl wordt alleen aangehouden als het element een kind is van een ander element en niet bij relaties die verder weg liggen. In de stijlregel wordt tussen de elementen het teken voor ‘groter dan’ (>) ge-plaatst, naar wens voorafgegaan en gevolgd door één of meer spaties.

Stijlregels met child element-selectors hebben de volgende opbouw:

Element1>Element2 { stijldeclaratie }

Element1 > Element2 { stijldeclaratie }

Element1 > Element2 > Element3 { stijldeclaratie }

Voor de eerste twee identieke stijlregels geldt dat Element2 een kind moet zijn van Element1. In de derde stijlregel moet Element3 een kind zijn van Element2, dat op zijn beurt weer een kind element moet zijn van Element1.

Als voorbeeld staan in een stijlblok in de head van het document de volgende stijlregels:

P { color: #000000; background-color: #FFFFFF; }P > I { color: #FF0000; }

In de body van het document is het I element op verschillende manieren opgenomen:

<P>De <em>cursieve tekst</em> in een P element is rood</P><P>Als I <strong>is ingesloten in B is <em>cursieve tekst</em></strong> in een P element niet rood</P>

4.2.3 Adjacent sibling element-selector

Adjacent sibling element-selectors kun je gebruiken om de stijl vast te leggen van een element op een vergelijkbaar niveau (dus geen kind), die direct op elkaar volgen. In de stijlregel wordt tussen de elementen een plusteken (+) geplaatst, naar wens voorafgegaan en gevolgd door één of meer spaties.

Stijlregels met adjacent sibling element-selectors hebben de volgende opbouw:

Element1+Element2 { stijldeclaratie }

Element1 + Element2 { stijldeclaratie }

Voor deze twee identieke stijlregels geldt dat Element2 direct voorafgegaan moet worden door Ele-ment1. Er mogen dus geen andere elementen tussen staan, wel is eventuele gewone tekst toegestaan.

H1, H2 { color: #FF0000; background-color: #FFFFFF; font-family: sans-serif; }H1 { font-size: 30px; }H2 { font-size: 24px; }H1 + H2 { margin-top: -12px; }

In de body van het document staan een H1 en twee H2 element:

<H1>Dit is H1</H1><H2>Dit is H2</H2><H2>Dit is nog een H2</H2>


4.3 Universele selector

De universele selector kan gebruikt worden om aan te geven dat de in een stijlregel gedefinieerde stijl betrekking heeft op alle elementen. De universele selector wordt aangeduid met een sterretje (*).

* { stijldeclaratie }

In het volgende voorbeeld wordt de universele selector gebruikt om aan te geven dat alle tekst in het document met een schreefloos lettertype moet worden weergegeven.

* { font-family: sans-serif; }

Enige voorzichtigheid met het gebruik van de universele selector als enige selector is aan te raden, omdat de stijl ook wordt aangehouden voor elementen waarvoor dat misschien niet de bedoeling is.

Voorbeelden bij dit stukje HTML:

<div> <p>kindparagraaf a <p>kleinkindparagfraaf a1</p> <p>kleinkindparagfraaf a2</p> </p> <a href is="link.html">link</a> <p>kindparagraaf b <p>kleinkindparagfraaf b1</p> <p>achterkleinkindparagfraaf b1</p> </p> <p>kleinkindparagfraaf b2</p> </p></div>

Verander elk element in een <div> rood. Ook bijvoorbeeld als er in die div links zitten die een an-dere kleur hebben:

div * { color: red;}

Selecteer alle kleinkindparagrafen binnen de div, maar niet direct de kindparagrafen:

div * p { color: red;}

Je zou nog een stap verder kunnen gaan en alle achterkleinkinderen kunnen selecteren...

div * * p { color: red;}


4.4 Attribuut selectors

Attribuut-selectors bieden de mogelijkheid een stijl aan een element te koppelen afhankelijk van de aanwezigheid van een bepaald attribuut, of de waarde ervan.Net als bij andere selectors, worden stijlregels met attribuut-selectors opgenomen in een stijlblok in de head van een document, of in een extern stijlblad.

Wanneer een attribuut alleen aanwezig hoeft te zijn en het niet uitmaakt wat de waarde is, dan heeft de stijlregel met een attribuut-selector de volgende opbouw:

[ATTR] { stijldeclaratie }

Met de selector [ATTR] worden alle elementen geselecteerd, waarvoor het attribuut is opgenomen. Wanneer het erom gaat dat het attribuut aanwezig is voor een specifiek, dan gebruik je de volgende stijlregel:

Element[ATTR] { stijldeclaratie }

Voorbeeld:

<!DOCTYPE html> <html> <head> <style> [title] { color:blue; } </style> </head>

<body> <h2>zal toegepast worden op:</h2> <h1 title="Hello world">Hello world</h1> <a title="DBH" href="http://donboscohalle.be">DBH</a> <hr> <h2>zal niet toepepast worden op:</h2> <p>Hallo!</p> </body></html>


4.5 Class en ID selectors

Bij CLASS- en ID-selectors gaat het in principe om gewone attribuut-selectors. Het belangrijkste verschil met andere attribuut-selectors is, dat het CLASS attribuut en vaak ook het ID attribuut speciaal wordt toegevoegd aan een element om de koppeling met een stijl te realiseren. Het verschil tussen de twee selectors is, dat het CLASS attribuut een onbeperkt aantal keren met een bepaalde class-naam in een document gebruikt mag worden, terwijl het ID attribuut slechts één keer met een bepaalde id-waarde in een document mag staan.Een classe-naam en ook een ID-naam kan niet starten met een nummer!

Stijlregels met CLASS- en ID-selectors worden opgenomen in een stijlblok in de head van een docu-ment, of in een extern stijlblad.

4.5.1 CLASS-selector

De CLASS-selector heeft als basis een punt gevolgd door een class-naam. Stijlregels waarin gebruik gemaakt wordt van een CLASS-selector kunnen er als volgt uitzien:

De classe kan aan elk element gekoppeld worden door het opnemen van het CLASS attribuut met als waarde de class-naam:

<h3 class="blauw">De tekst van deze H3 is blauw</H3>

.class-naam { stijldeclaratie }

.blauw {background-color: ##336699; }

Deze kan gebruikt worden in situaties, waarin de stijl (deze classe) slechts op één bepaald element betrekking heeft:

Element.class-naam { stijldeclaratie }h3.blauw {background-color: ##336699; }

Men kan meerdere class-attributen aan een element hangen:

<h3 class="groot blauw">Deze H3 is ook blauw en cursief</H3>

.groot { font-size: 16px; }

.blauw { background-color: ##336699; }


4.5.2 ID-selector

De ID-selector heeft als basis een hekje gevolgd door een id-waarde. Stijlregels waarin gebruik ge-maakt wordt van een ID-selector kunnen er als volgt uitzien:

syntax:#id-waarde { stijldeclaratie }#speciaal { color: #FF0000; background-color: #FFFFFF; }

Er kan maar één ID met dezelfde naam bestaan. Een ID is uniek. Wanneer gebruik je dan een classe en wanneer een ID?De naam ID zegt het eigenlijk al, het gaat om een unieke naam, gekoppeld aan kernelementen van een website, bijvoorbeeld de header, de navigatie, de inhoud, de zijkant, de footer en de zoekfunctie.

4.6 CSS Pseudo-classes

CSS pseudo-classes worden gebruikt om speciale effecten toe te voegen aan een aantal selectors.

De syntax van pseudo-classes:

selector:pseudo-class {property:value;}

CSS klassen kunnen ook worden gebruikt met pseudo-klassen:

selector.class:pseudo-class {property:value;}

Anker Pseudo-classes

Koppelingen kunnen worden weergegeven op verschillende manieren in een browser:

a:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */a:hover {color:#FF00FF;} /* mouse over link */a:active {color:#0000FF;} /* selected link */

! opgelet

a: hover MOET komen na a: link en a: visited in de CSS definitie om effectief te zijn!a: active MOET komen na een: hover in de CSS definitie om effectief te zijn!Pseudo-class namen zijn niet hoofdlettergevoelig.


Pseudo-classes en CSS Classes

Pseudo-classes kunnen worden gecombineerd met CSS-klassen:

a.red:visited {color:#FF0000;}

<a class="red" href="css_syntax.html">CSS Syntax</a>

Als de link is bezocht, wordt deze in het rood weergegeven.

Alle CSS Pseudo Classes/Elementen:

selector Voorbeeld beschrijving: link a:link Selecteert alle onbezochte koppelingen: visited a:visited Selecteert alle bezochte links: actief a:active Hiermee selecteert u de actieve link: hover a:hover Hiermee selecteert u links op de muis over: focus input:focus Selecteert het inputelement dat de focus heeft bij een formulier: first-letter p:first-letter Hiermee selecteert u de eerste letter van elk <p> element: first-line p:first-line Selecteert de eerste regel van elk <p> element: first-child p:first-child selecteert elk <p> elementen dat het eerste kind is van zijn ouder: before p:before Inhoud invoegen voor elke <p> element: after p:after Inhoud invoegen na elke <p> element: lang ( taal ) p:lang(it) selecteert alle <p> elementen met een lang-attribuutwaarde die begint met “it “

Je kan uitgebreide uitleg vinden op w3schools over alle pseudo classen:

� http://www.w3schools.com/css/css_pseudo_classes.asp


5.1 Wat?

Elk element op een webpagina kan in feite worden voorgesteld als een doos met een bepaalde inhoud, we spreken van de box. In CSS wordt de term “box model” gebruikt als het over vormgeving en lay-out gaat.

Het CSS box model is in wezen een kader met een rand en een binnenruimte en een buitenruimte. Deze ruimtes kunnen een eigen breedte hebben, ook de rand.

De box model stelt ons in staat om een rand rond elementen en ruimte-elementen te plaatsen in relatie tot andere elementen.

De box bevat van buiten naar binnen volgende onderdelen:

marginborderpadding

inhoud

Margin Is de ruimte rond de Border. De Margin heeft geen background color en is compleet transparent.Border Een rand die rond de inhoud en de padding zit.Padding Is de ruimte rond de inhoud. De padding heeft dezelfde background color als de boxInhoud De inhoud van de box waarin tekst en afbeeldingen zitten.

Voorbeelden Padding

padding: 10px; 10px boven, rechts, onder en linkspadding: 5px 8px; 5px boven en onder, 8px links en rechtspadding: 5px 8px 6px 9px; 5px boven, 8px rechts, 6px onder en 9px links (Tip: Wijzers van de klok)padding-top: 5px; Geef enkel padding aan de bovenkant (padding-right, padding-bottom, padding-left)

HOOFDSTUK 5CSS en het boxmodel


Voorbeelden Margin

Net zoals bij padding bestaan de volgende properties:

• margin: 10px;

• margin: 10px 5px;

• margin: 10px 5px 6px 8px;

• margin-top: 10px; (en margin-right, margin-bottom, margin-left)

In tegenstelling tot padding kan margin wél negatieve waarden krijgen

• margin-top: -10px; Op deze manier kan je objecten laten overlappen

• margin:auto; het object (horizontaal) in het midden van het parent element geplaatst worden

Voorbeelden Border

Een border wordt zichtbaar als je deze 3 eigenschappen op geeft:

• style: solid, dotted, dashed, ...

• width: 1px, 3em, 4%, ...

• color: red, #FF0, #FFFF00, transparant, ...

Dit doe je het snelst op volgende manier:

• border:1px solid red; De volgorde van de drie values is hier niet van belang

Bepaalde values en properties kan je specifieker instellen:

• border-left: 1px solid red;

• border-bottom-style: dashed;

• border-top-color: red;

• border-top-width: 10px;

• border-style: dashed;

• border-width: 11px;

• border-color: #0FE;

• border-style: solid dashed;

• border-width: 1px 1px 1px 5px;

5.2 Dimensies

width en height properties

• Kunnen niet toegepast worden op inline-elementen (bv. a, em, strong ...)

• Kunnen bepaald worden in verschillende eenheden

• px, pt, cm, mm


• %: Procent van beschikbare ruimte

• em: 1em = 1x de huidige lettergrootte

Om de breedte en de hoogte van een box correct in te stellen moet je weten hoe de box werkt. Wanneer je de width en height van een element (box) instelt met css, stel je dit enkel in voor de Inhoud! Om de volledige grootte te berekenen moet je er de padding, borders en margins bijtellen.

Een voorbeeld:

De totale breedte van het element is bv. 300px:

• width:250px;

• padding:10px;

• border:5px solid gray;

• margin:10px;

De berekening:

• 250px (width)

• + 20px (left en right padding)

• + 10px (left en right border)

• + 20px (left en right margin)

• = 300px

Stel je voor dat je eigenlijk enkel 250px ruimte hebt voor het element te plaatsen:

• width:220px;

• padding:10px;

• border:5px solid gray;

• margin:0px;

De totale breedte van een element bereken je als volgt:

width + left padding + right padding + left border + right border + left margin + right margin

De totale hoogte van een element bereken je als volgt:

height + top padding + bottom padding + top border + bottom border + top margin + bottom margin


6.1 Positionering

Met de CSS positionering-eigenschappen kun je een element positioneren. Het kan een element ook plaatsen achter een ander, en opgeven wat er moet gebeuren als de inhoud van een element te groot is.

Elementen kunnen worden gepositioneerd met behulp van de boven-, onder-, linker-en rechterkant eigenschappen. Deze eigenschappen zullen echter niet werken, tenzij de eigenschap position wordt ingesteld. Ze werken ook op een andere manier, afhankelijk van de methode voor positiebepaling.

Een alternatief voor de eigenschappen van position (top, left, right, bottom) zijn de eigenschappen van margin (margin-top, margin-left, margin-right, margin-bottom). daarmee kan je ook een element (box) verplaatsen ten op zichte van de andere elementen in combinatie met position relative.

Er zijn vier verschillende methoden voor positiebepaling:

• static: Standaardwaarde van alle elementen: Plaats het element waar het in de HTML hoort te staan volgens de normale flow

• fixed: Positioneer relatief t.o.v. het browservenster

• absolute: Positioneer t.o.v. het parent element

• relative: Positioneer relatief t.o.v. zijn eigen oorspronkelijke positie

Positioneren doe je met deze properties:

top, left, right, bottom

Als waarden kan je naast px ook gebruik maken van cm, mm, %, em, ...

#footer{ position:fixed; top:30px; right:5px; left:10px;}

Er zijn een aantal manieren waarop je elementen een positie kunt geven met behulp van CSS. Wanneer je welke manier gebruikt hangt af van een paar zaken. Ten eerste wat je als basis wilt gebruiken voor het te plaatsen ele-ment. Ten tweede de invloed van andere elementen op dat ene element.

HOOFDSTUK 6Boxen positioneren


Om dit te verduidelijke gebruiken we een voorbeeld code:

<section> Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labo ris nisi ut</section><section id="position"> Ut enim ad minim veniam, quis nostrud exercitation ullamco labo ris 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,</section><section> sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetaur 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

</section>

6.1.2 Static

Statisch positioneren is de normale gang van zaken. Je hoeft deze specificatie niet mee te geven wanneer een element op de plek moet komen te staan waar deze volgens de code zou ko-men te staan.

Voorbeeld:

width: 200px;height: 100px;background-color: white;padding: 2px;border: 1px solid black;position: static;

Resultaat in het browservenster:


6.1.2 Fixed

Het element wordt verwijderd uit de pagina structuur: Voor omliggende elementen is het alsof het element nooit heeft bestaan.

Het element wordt binnen het browservenster geplaatst op de opgegeven positie door middel van top, left, right, bottom.

• Scrollen binnen de pagina wordt door dit element genegeerd.

• Fixed gepositioneerde elementen kunnen andere elementen overlappen.

• Standaard behoudt een gepositioneerd item zijn grootte.

• Geef je minstens 3 van de 4 mogelijke positioneringsproperties op, dan kan je schalen (In sommige gevallen ook al met twee...).

6.1.3 Absolute

Het element wordt binnen het parent-element op de opgegeven positie geplaatst.

• ! Belangrijk: Het parent element moet hiervoor ook gepositioneerd worden.

Is dat niet echt nodig, dan zet je daar eenvoudig weg “position:relative” Zonder top, left, bottom of right waarden.

• Doe je dit niet dan positioneer je eigenlijk ten opzichte van het body element, dus het scherm!

Voorbeeld:

width: 200px;height: 100px;background-color: white;padding: 2px;position: absolute;border: 1px solid black;top: 50px;left: 100px;



6.1.4 Relative

Positioneer relatief t.o.v. zijn eigen oorspronkelijke positie. Voor omliggende elementen is het alsof het element op de oorspronkelijke positie blijft staan.

Het element wordt wel met de opgegeven waarden (left, top, bottom en right) verplaatst in een richting. Wanneer je relative gaat gebruiken, dan gaat het element verplaatst worden naar een nieuwe positie, vanaf de positie die normaal gesproken ingenomen zou worden.

Voorbeeld:

width: 200px;height: 100px;background-color: white;padding: 2px;position: relative;border: 1px solid black;top: 50px;left: 100px;



6.2 Elementen Floaten

Met float, kan een element worden geschoven naar links of naar rechts, waardoor andere elementen er omheen “drijven”.

Lorem ipsum dolor sit amet, consectetur ad-ipisicing elit, sed do eiusmod tempor in-cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer-citation 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. Ex-cepteur sint occaecat cupidatat non proi-dent, sunt in culpa qui officia deserunt

mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor in-cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex e. Excepteur sint occaecat cupidatat non proi-dent, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisic-ing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul-lamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre-henderit 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

Float wordt heel vaak gebruikt voor afbeeldingen, maar het is ook handig bij het werken met lay-outs.


6.2.1 Hoe elementen floaten?

• Elementen worden enkel horizontaal gefloat, dit betekent dat een element alleen drijft

naar links of rechts en niet omhoog of omlaag.

• Een gefloat element kan je niet centreren.

• Als je meerdere elementen float zullen ze naast mekaar komen. Als er geen plaats meer

is worden ze naar onder geschoven.

• Een zwevend element drijft zover naar links of rechts als mogelijk is. Meestal betekent

dit helemaal naar links of rechts binnen het parent element.

• Wel is het nodig de breedte van het element expliciet vast te leggen met de

width eigenschap.

• De elementen die na het floatend element komen zullen er rond “flowen”.

• Het probleem met floats (en met alles in HTML/CSS) is dat we afhankelijk zijn van de

verschillende interpretaties van de browsers. Naargelang een layout ingewikkeld

wordt is de kans op problemen groter... (in puntje 6.2.4 meer hierover)

Voorbeeld

img{ float:right;}

“Drijvende” Elementen naast elkaar

Als u meerdere zwevende elementen na elkaar hebt zullen ze ook zweven naast elkaar als er de-ruimte voor is.

Hier hebben we een fotogalerij met behulp van de float eigenschap:

.icoon{ float:left; width:100px; height:100px; margin:5px;}

Dit geeft in het browservenster:

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left


Indien de boxen in een andere box genest zitten, dan zullen ze floaten tot zover de breedte van deze box toelaat:

section{ float:left; width:510px;

}

.icoon{ float:left; width:100px; height:100px; margin:5px;

}

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

float: left

Willen we voor elke soort box (er zijn verschillen in de omlijning) een aparte rij, zonder dat we gebruik maken van een andere “vaderbox” waarin ze vervat zitten, dan dienen we de float uit te scha-kelen door middel van een clear.


6.2.2 Het uitschakelen van float - Het gebruik van clear

Elementen na het floatend element zullen er langs floaten. Om dit te voorkomen, gebruikt je de clear eigenschap.

In dit voorbeeld kennen we de property clear toe aan elk eerste element van elke nieuwe rij. Elk element heeft wel ook nog steeds een float:left property.

.icoon{ float:left; width:100px; height:100px; margin:5px;}

.nieuwe_rij{ clear:left;}

Dit geeft in het browservenster:

float: left

float: left

float: left

float: left

float: leftclear: left

float: left

float: left

float: left

float: leftclear: left

float: left

float: left

float: left

6.2.3 Gedetailleerde informatie over float op het web

� http://css.maxdesign.com.au/floatutorial/index.htm � http://www.westciv.com/style_master/house/tutorials/quick/floated_layout/index.html � http://css-tricks.com/all-about-floats/ � http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/


6.2.4 Clearfix

Wanneer een element wordt gefloat, dan wordt het uit de normale flow van het document gehaald. Het resultaat is dat dit element geen height inneemt (in de normale flow). Elk container-(parent-)ele-ment zal zich niet automatisch herschalen naar de height van de floatende elementen dat er in zitten.

Bijvoorbeeld HTML:

<div id="parent" style="background-color:#F00;"> <div id="child" style="float: left;">Floated element</div></div>

De rode achtergrond is niet zichtbaar omdat de de hoogte van het child-element geen invloed heeft op het parent-element.

Clearfix is een benaming van een trukje om een class (“clearfix” genaamd) te maken die cross-browser werkt. Zet deze class op het container (parent-)element en je kunt daarna weer vrolijk door zonder dat er elementen over elkaar heen gaan zweven.

.clearfix:after { clear: both; display: block; content: " "; height: 0px; visibility: hidden;}

We kunnen dus de clearfix class toevoegen aan ons container-element:

<div class="clearfix" id="parent" style="background-color:#F00;"> <div id="child" style="float: left;">Floated element</div></div>

Het gebruik van de clearfix is een DOM manipulatie. Wat ook een goede oplossing kan zijn is het container element een width geven en die op overflow:hidden; zetten. (ie7+). Hou dan wel rekening met de juiste afmetingen!

Een gedailleerde uitleg over dit onderwerp vind je op: � http://www.positioniseverything.net/easyclearing.html � http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/


7.1 Wat zijn hyperlinks?

Een hyperlink maak je met het A-element, waaraan je het HREF attribuut toevoegt. Het HREF attri-buut geeft aan op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt.

De waarde van het HREF attribuut is een zogenoemde Uniform Resource Identifier (URI). Een URI is een compacte reeks karakters, waarmee een bron (resource) geïdentificeerd kan worden..Bij het maken van een hyperlink naar een bestand zijn de belangrijkste methoden die je kunt gebrui-ken http (HyperText Transfer Protocol) en ftp (File Transfer Protocol). Voor deze methoden is de opbouw van de URI:

protocol://host/path

Het protocol zal meestal http zijn en alleen ftp, als het gevraagde bestand zich op een speciale FTP-server bevindt. Host specificeert het adres van de server, waarop zich het gevraagde bestand bevindt. Het is meestal een domeinnaam, maar mag ook een IP-adres zijn. Path geeft aan hoe het gevraagde bestand op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.

Het is niet altijd nodig een complete URI te gebruiken. Wanneer je verwijst naar de beginpagina van een site, dan is het voldoende alleen de domeinnaam op te nemen. Meestal wordt dan automatisch een bestand met de naam “index.html” geopend (mits dat bestaat natuurlijk).

<a href="http://www.donboscohalle.be">DBH</A>

In de browser zie je: DBH

7.2 Navigatie binnen mappenstructuur op server

De URI van een hyperlink kan absoluut of relatief zijn. In een absolute URI zijn in ieder geval het te gebruiken protocol en het adres van de server opgenomen, een relatieve URI bevat alleen het path op de server. Wanneer een hyperlink met een relatieve URI geopend moet worden, gebruikt de browser de URI van het huidige document als basisadres en bepaalt daarmee de absolute URI van de link.

Verwijs je niet naar de host, maar naar een directory op de server, dan beëindig je de URI met een slash:

<a href="http://www.donboscohalle.be/mm/">multimedia-gedeelte DBH</A>

In de praktijk wil je vaak een verwijzing naar een specifiek bestand in een bepaalde directory van een server opnemen. Bijvoorbeeld:

<a href="http://www.donboscohalle.be/mm/inhoud-html.html">Inhoud HTML-gedeelte</A>

HOOFDSTUK 7Hyperlinks


Wanneer de link verwijst naar een bestand op de lokale server, is het voldoende om alleen het path op te nemen. Daarbij zijn er de volgende mogelijkheden:

Zelfde directoryStaat het bestand in dezelfde directory als het huidige document, dan hoef je slechts de naam van het bestand op te nemen:

<a href="info.html">Info</A>

SubdirectoryStaat het bestand in een subdirectory van de huidige directory staat, dan geef je eerst de namen van de achtereenvolgende subdirectories met achter elke naam een slash en daarna de naam van het bestand:

<a href="html/contactgegevens/contact.html">Contact</a>

Hogere directoryBevindt het bestand zich in een hogere directory dan de huidige, dan neem je voor elke stap omhoog een slash voorafgegaan door twee punten op:

<a href="../contact.html">Contact</a>

Combinatie van hogere directory en subdirectoryEen combinatie van de laatste twee mogelijkheden gebruik je bijvoorbeeld als je moet verwijzen naar een bestand in een directory, die niet in dezelfde lijn ligt:

<a href="../html/contactgegevens/contact.html">Contact</a>

Verwijs naar directoryVerwijs je niet naar een bestand, maar naar een directory, dan beëindig je de URI met een slash:

<a href="html/">HTML-gedeelte</a

7.3 Downloaden bestand

Om een bezoeker in de gelegenheid te stellen een bestand te downloaden, hoef je in principe niet meer te doen dan het maken van een gewone hyperlink. Voor een zip-achiefbestand, dat in dezelfde directory op de server staat als het HTML-document, ziet zo’n hyperlink er als volgt uit:

<A HREF="bestand.zip">Download bestand</A>

Als het bestand zich op een FTP-server bevindt, dan heeft de link bijvoorbeeld de volgende opbouw:

<A HREF="ftp://ftp.domein.nl/pub/bestand.zip">Download bestand</A>

Als je de naam van het bestand weglaat, krijgt de bezoeker een lijst te zien met alle bestanden in de opgegeven directory ‘pub’ en kan hij of zij zelf één of meer bestanden kiezen om te downloaden.

<A HREF="ftp://ftp.domein.nl/pub/">Download bestand(en)</A>


In de voorgaande voorbeelden gaat het om een link naar een FTP-server, waar vanaf je anoniem kunt downloaden. Wanneer het noodzakelijk is een link te maken naar een FTP-server waarvoor een gebruikersnaam en een wachtwoord vereist zijn, dan heeft de link de volgende opbouw:

<A HREF="ftp://gebruiker:[email protected]/pub/">Download bestand(en)</A>

Als je niet wilt dat de gebruikersnaam en het wachtwoord bij iedereen bekend worden, is het ver-standig een dergelijke link niet zomaar open en bloot op een voor iedereen toegankelijke website te plaatsen.

Als de bezoeker op een hyperlink van een zip-bestand klikt, zal elke browser een venster openen waarin gevraagd wordt of het bestand moet worden opgeslagen of geopend met het bijbehorende programma. Zoals al eerder is aangegeven zal dat echter niet bij alle bestandstypen het geval zijn. HTML-documenten en bijvoorbeeld afbeeldingen zal de browser zelf openen, voor andere bestands-typen hangt het af van de op het systeem van de bezoeker geïnstalleerde plug-ins of programma’s.Als auteur kun je niet beïnvloeden wat de browser met een bepaald type bestand doet. Wil je er zeker van zijn dat de bezoeker het bestand kan opslaan, dan is het de beste oplossing het bestand te verpakken in een zip-archief. Heb je daar geen mogelijkheid voor, of verwacht je dat de bezoeker het zip-bestand niet kan uitpakken, dan rest je weinig anders dan de bezoeker via de tekst van de hyper-link te adviseren de rechter muisknop te gebruiken en te kiezen voor ‘Opslaan als’.

7.4 Bestemming binnen document

Soms wil je niet zomaar verwijzen naar een ander document, maar naar een specifieke plaats in een document. Dat kan als je eerst de plaats, waarnaar je wilt verwijzen, markeert met een A element waaraan het NAME attribuut is toegevoegd. Zo’n markering (of anker) ziet er bijvoorbeeld als volgt uit:

<a name="inhoud"></a>

In dit voorbeeld heeft de markering de naam “inhoud”.

Als je binnen een document een link naar een gemarkeerde plaats wilt maken, gebruik je als URI een hekje (#) gevolgd door de naam van de markering (ofwel de waarde van het NAME attribuut van de markering). Een link naar de markering in het voorbeeld hiervoor ziet er dus als volgt uit:

<a href="#inhoud">Inhoud Hyperlinks</a>

De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks bovenaan deze pagina.

Dit soort linken werken overigens niet alleen binnen een document. Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander document, in dezelfde of een andere directory, of op een andere server. Als waarde van het HREF attribuut neem je in dat geval gewoon de verwijzing naar het betreffende document op (zie het onderdeel Link naar bestand) en zet daar het hekje en de naam van de markering achter. In het volgende voorbeeld verwijst de link naar het document “inhoud-html-plus.html”, dat zich in een hoger gelegen directory bevindt. De plaats van bestemming binnen dat document is aangegeven met een markering die de naam “hyperlinks” heeft.

<a href="../inhoud-html-plus.html#hyperlinks">Inhoud Hyperlinks</a>

De link wordt door de browser weergegeven als: Inhoud Hyperlinks. Volg je deze link, dan kom je bij de inhoud van het onderdeel Hyperlinks in de uitgebreide inhoudsopgave van het HTML-gedeelte van de Handleiding HTML.


Linken naar een plaats binnen een document zorgt ervoor dat de gebruiker niet het hele document hoeft door te scrollen, maar direct naar de gewenste informatie kan springen.

7.5 Mailto-links

Met behulp van een mailto-link kun je een bezoeker van je pagina snel een bericht naar je laten stu-ren. In plaats van een http-URI in de eerdere voorbeelden, gebruik je nu een mailto-URI. Bijvoorbeeld:

<a href="mailto:[email protected]">Webmaster</a>

In de browser zie je: Webmaster.

Wanneer je op deze link klikt, dan opent een browser die deze mogelijkheid ondersteunt, het (via de instellingen opgegeven) e-mailprogramma en plaats het e-mailadres is in het To-veld.

De meeste browsers en e-mailprogramma’s ondersteunen een parameter in een mailto-URI om het onderwerp (subject) van het e-mailbericht vast te leggen:

<a href="mailto:[email protected]?SUBJECT=Reactie">Webmaster</a>

Bekijk de weergave van de link in de statusbalk van de browser: Reageer per e-mail

Een e-mailadres in een HTML-document wordt tegenwoordig vaker misbruikt dan gebruikt voor het eigenlijke doel, namelijk het reageren op of naar aanleiding van de inhoud van het document. Vooral de verzenders van spam (ongewenste reclame) maken op grote schaal misbruik van de op het web gevonden e-mailadressen. Daarnaast zijn er virussen en wormen die HTML-documenten (onder an-dere in de cache van de browser) scannen op e-mailadressen en die vervolgens gebruiken om zichzelf te verspreiden. Om het misbruik te voorkomen, is het daarom verstandig je e-mailadres alleen in gecodeerde vorm in de documenten op te nemen.

Als voorbeeld van het coderen de mailto-link naar het e-mailadres [email protected]:

<a href="mailto:gebruiker%40provider%2Ebe">Webmaster</a>

In de browser zie je: Webmaster

Wanneer je in de omschrijving van de mailto-link ook het e-mailadres wilt laten zien, dan moet je deze coderen met de Speciale karakters voor tekst.

gebruiker@provider.be

In de browser zie je: [email protected]

Met deze codering is de weergave van de mailto-link in de browser en in de statusbalk hetzelfde als normaal. Ook wordt het e-mailadres bij klikken op de link op de gebruikelijke wijze doorgegeven aan het e-mailprogramma. In het document zelf staat echter niets meer dat de vorm heeft van een e-mailadres.

Of het coderen van het e-mailadres misbruik in alle gevallen tegenhoudt, is overigens de vraag. Als je nog meer zekerheid wilt, dan kun je er ook voor kiezen bezoekers te laten reageren via een formu-lier. Voor het verwerken van de informatie van dat formulier moet je dan uiteraard wel gebruik maken van een script op de server, want als je kiest voor een mailto-formulier haal je je alleen maar meer problemen op de hals.


8.1 Inleiding

Elke website bestaat minstens uit twee delen: een gedeelte met de navigatie en een gedeelte met de inhoud. Meestal is er ook nog een derde deel, namelijk de banner met de titel van de website boven-aan. De footer sluit dan het geheel af.

Je kunt een navigatiebalk maken op verschillende manieren en met verschillende vormen: met Flash-knoppen, met afbeeldingen, gewone tekst,... De beste manier is echter om gebruik te maken van pure HTML, gecombineerd met CSS voor de opmaak. Afbeeldingen kunnen immers niet ingelezen worden door zoekrobots en spraakbrowsers, dus gebruiksvriendelijk is het niet.

Wanneer men vroeger een navigatiebalk ging maken, haalde men al meteen de <table>-tag naar bo-ven. Je kon inderdaad heel makkelijk werken door elk item in een aparte tabelcel te verpakken, maar hiervoor zijn tabellen echter niet bedoeld. Wij gaan dit oplossen op een meer semantische manier, namelijk door een ongeordende lijst te gebruiken.

8.2 HTML-lijsten

In HTML-documenten kun je verschillende soorten lijsten toepassen:

• ongeordende lijst

• geordende lijst

• definitielijst

• menulijst

• directorylijst

Meer hierover vind je op:

� http://www.w3schools.com/html/html_lists.asp

Voor de gestructureerde opbouw van navigatie gebruiken we echter een ongeordende lijst. In een ongeordende lijst zijn de items niet genummerd, maar hebben ze een symbool als markering. De ongeordende lijst wordt gemaakt met de elementen UL en LI.

<UL> <LI> Dit is het eerste item van de ongeordende lijst (indien ... in) </LI> <LI>Dit is het tweede item van de ongeordende lijst</LI> <LI>Dit is het derde item van de ongeordende lijst</LI></UL>

De browser geeft dit zo weer:

• Ditisheteersteitemvandeongeordendelijst(indiendetekstlangerisdanopéénregelpast,springtdezeopdevolgenderegelsin)

• Ditishettweedeitemvandeongeordendelijst

HOOFDSTUK 8Gestructureerde navigatie


• Ditishetderdeitemvandeongeordendelijst

8.3 Navigatie met een UL

Als we hyperlinks plaatsen binnen de <li> van de <ul> dan hebben we een duidelijke structuur in de HTML dat veel flexibiliteit geeft om CSS toe te passen.

Merk ook op dat we gebruik maken van <nav>, in combinatie met een ID. Er kunnen immers meer-dere navigiemenu’s in de pagina voorkomen.

8.1 De HTML

<nav id="navcontainer"> <ul id="navlist"> <li id="actieveLink"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul></nav>

Deze code is een basis die ook wordt gebruikt op de website Listamatic, waar je een massa goede creatieve voorbeelden vindt, steeds gebaseerd op de zelfde HTML met steeds uitgebreidere CSS:

� http://css.maxdesign.com.au/listamatic/index.htm

8.2 De CSS voor een verticale navigatiebalk

a{ display:block; list-style-type: none; width:60px;}

Verklaring

• display: block Weergave van de links als blokelementen maakt het hele

<a>- gebied klikbaar (niet alleen de tekst), en het stelt ons in

staat om de breedte te definiëren

• breedte: 60px Block elementen nemen de volle breedte die standaard

beschikbaar is. In dit voorbeeld willen we een breedte van

60px opgeven.

• list-style-type: none verwijderd de bullets, de bolletjes


8.3 De CSS voor een horizontale navigatiebalk d.m.v. float

li{ float:left;}

a{ display:block; width:60px;}

Verklaring

• float: left Gebruik float om blokelementen naast elkaar te “drijven”.

• display: block Weergave van de links als blokelementen maakt het hele

<a>- gebied klikbaar (niet alleen de tekst),

en het stelt ons in staat om de breedte te definiëren

• breedte: 60px Block elementen nemen de volle breedte die standaard beschikbaar is.

In dit voorbeeld willen we een breedte van 60px opgeven.

8.4 De CSS voor een horizontale navigatiebalk d.m.v. display inline

#navlist li{ display: inline; list-style-type: none; padding-right: 20px;}

Verklaring

• display: inline Standaard <li> elementen zijn block-elementen. Hier verwijderen

we de regeleinden voor en na elke item in de lijst,

om ze te tonen op één lijn.


9.1 Inleiding

Wireframes, ook wel interactie-ontwerp genoemd, zijn een soort bouwtekening van een website. Met behulp van wireframes kan een overzicht gegeven worden van de verschillende onderdelen die op een website aanwezig zullen zijn. In de wireframes gaat het alleen om de inhoud van de website, zonder gebruik te maken van een grafisch ontwerp. Hierdoor kan gefocust worden op de inhoud van de website en wordt de vormgeving van de website voorlopig buiten beschouwing gelaten.

Stel dat we een basis layout willen maken met logo, navigatie, fotogallerij en tekstkolom. Dan zou dit het wireframe kunnen zijn van deze pagina.

culpa qui

officia dese-runt mollit anim id est laborumculpa qui officia deserunt mollit anim id est labo-rumculpa qui officia deset laborumculpa qui officia mollit anim id est labo-rum

*logo navigatie

footer

afbeelding

� http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

HOOFDSTUK 9Opbouw van een layout


9.2. Alles bijeenhouden, gebruik van een container

Elementen in een pagina staan in relatie tot mekaar, omdat ze in mekaar genest zijn. Denk aan de russische poppetjes die in mekaar zitten. Zo kunnen we de positition van een element bepalen (zie elders in de cursus) omdat dit ten op zichte van andere elementen staat. Denk maar bijvoorbeeld aan position: relative.Om een website op te bouwen wordt er wel eens gebruik gemaakt (er zijn ook andere technieken) van een container-element die alles op zijn plaats houdt. In het wireframe hierboven is dit de buiten-ste rand, in stippellijnen.

9.2.1 HTML

We maken een block-element <div> met een ID.

<!DOCTYPE html> <html> <head> <title>Mijn eerste HTML layout</title> <meta name="keywords" content="HTML, CSS"> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/web.css" rel="stylesheet" type="text/css" /> <meta name="description" content="webdesign en ontwikkeling"> </head> <body> <div id="container"> ... </div> </body></html>

9.2.3 CSS

Deze <div> geven we een dynamische maximum breedte in %, ten op zichte van de <body>. Als de surfer een kleiner scherm dan 960px breed heeft zal die <div> toch nog 90% breed zijn. Dit geeft toch een nette afstand van de rand van het browservenster. De margin op auto zetten centreert de <div> in het midden van het scherm.

Voor de duidelijkheid van onze opbouw gaan we tijdelijk kleuren geven aan onze elementen. Dan kunnen we in de browser zien of alles klopt.

Je zal merken dat er niets te zien valt als je dus ook niets in een element steekt. Daarom zijn er in de HTML van dit voorbeeld telkens tijdelijk drie punten gestoken (...).

De body krijgt alvast een lettertype en grootte. Deze zullen worden doorgegeven aan alle elemen-ten. We zullen later op basis van deze lettergrootte een relatieve grootte bepalen voor de overige elementen zoals <h1> en <p>.


body { font-family: Verdana,Geneva,sans-serif; font-size: 12px; } #container { background-color: green; margin: auto; max-width: 90%; width: 960px; }

9.3 Grote zones

We puzzelen verder en bakenen de grootste zones af door middel van semantisch correcte elemen-ten te plaatsen in de container. Dit zijn <header> voor de hoofding, <section> voor onbepaalde grote zones, <article> voor, jawel een stuk tekst en <footer> voor de onderste balk.

9.3.1 HTML

<body> <div id="container"> <header> ... </header> <section> ... </section> <article> ... </article> <footer> ... </footer> </div></body>

9.3.2 CSS

De <header> heeft dezelfde breedte als de container. Dus geven we deze de waarde 100%. Dat wil zeggen 100% van het element waarin de <header> zelf zit. Dus 100% van de breedte van de <contai-ner>. Dit kan 960px of 90% van de <body> zijn. De hoogte is minstens 80px maar kan ook vergroten.

<header> krijgt een minimum hoogte, maar zal verhogen naarmate we het venster dichttrekken en zijn child-elementen onder mekaar zullen schuiven (float).

header { background-color: red; float: left; min-height: 100px; width: 100%; }


section { background-color: yellow; float: left; width: 70%; } article { background-color: blue; float: left; width: 30%; } footer { background-color: purple; float: left; width: 100%; }

9.4 Invullen van de grote zones

Nu ons grof raamwerk klaar is kunnen we verder verfijnen door de andere elementen er in te plaat-sen: <header>: <img> en <nav>, <section>: meerdere <img>, <article>: <h1> en <p>.

9.4.1 HTML

<body> <div id="container"> <header> <img src="beelden/logo.jpg" width="200px" height="100px" title="logo" alt="logo" > <nav> ... </nav> </header> <section> <img src="beelden/bert-ernie.jpg" width="100%" title="foto bert en ernie" alt="foto bert en ernie" > ... </section> <article> <h1>de titel van het tekstje</h1> <p> Lorem ipsum dolor sit amet, consectetur ...</p> </article> <footer> copyright Jef Pedal </footer> </div></body>


9.4.1 CSS

Alle elementen die we naast mekaar willen plaatsen moeten we floaten. We geven ze ook position: relative. We selecteren ze door middel van descendent element selectors (zie eerder in de cursus).De <img> in de <header> geven we een margin van 10px, daardoor plakt deze niet aan de rand van de <header>. De margin-top van de <nav> heeft 90px, om deze te laten zakken. De <img> in <sec-tion> krijgt een relative breedte (als ook zijn margin) uitgedrukt in %, deze zal dan ook meeschalen als we het venster dichtrekken. <h1> en <p> in <article> krijgen een font-size uitgedrukt in em. Diit is een waarde relatief tenn opzichte van de basiswoorde opgegeven in de <body>. In <body> is deze 12px. 12px is gelijk aan 1em. Als men spreekt van 2em is dit hier dus 24px.

header img { float: left; margin: 10px; position: relative; } header nav { float: left; margin-top: 90px; position: relative; } section img { margin: 5%; width: 90%; } article p { font-size: 1em; margin: 20px; } article h1 { font-size: 2em; margin: 20px; } footer h2 { font-family: Verdana,Geneva,sans-serif; font-size: 1em; margin: 10px; text-align: center; }


9.5 Het resultaat, een fase in de ontwikkeling

Dit is natuurlijk geen website, maar we hebben wel de basis gelegd voor de verdere vormgeving. Alle zones zijn afgebakend en bieden een plaats voor de elementen die de pagina bepalen.

Wat nu? De verdere afwerking:

• verwijderen van de background-color in alle elementen

• navigatie met <ul><li> in de zone <nav>

• pseudo-classen op de <a> voor interactie

• eventueel background-image in de css plaatsen

• kiezen van font-family, color, line-height...

Neem aan kijkje op de referentie van alle css eigenschappen om je op ideeën te brengen:

� http://www.w3schools.com/cssref/default.asp


9.5.2 Resultaat CSS ( De complete html-code staat reeds in punt 9.4.1 )

body { font-family: Verdana,Geneva,sans-serif; font-size: 12px; } #container { background-color: green; margin: auto; max-width: 90%; width: 960px; } header { background-color: red; float: left; min-height: 100px; width: 100%; } section { background-color: yellow; float: left; width: 70%; } article { background-color: blue; float: left; width: 30%; } footer { background-color: purple; float: left; width: 100%; } header img { float: left; margin: 10px; position: relative; } header nav { float: left; margin-top: 90px; position: relative; } section img { margin: 5%; width: 90%; } article p { font-size: 1em; margin: 20px; } article h1 { font-size: 2em; margin: 20px; } footer h2 { font-family: Verdana,Geneva,sans-serif; font-size: 1em; margin: 10px; text-align: center; }


HOOFDSTUK 10De website online plaatsen

10.1 FTP (File Transfer Protocol)

File Transfer Protocol (FTP) is een protocol dat uitwisseling van bestanden tussen computers verge-makkelijkt. Het standaardiseert een aantal handelingen die tussen besturingssystemen vaak verschillen.

Een FTP-client (zoals FileZilla) start een verbinding met een FTP-server standaard via TCP-poort 21.

GeschiedenisFTP ontstond in 1971 en groeide zeer snel uit tot een wereldstandaard. Sinds die tijd maakt FTP het mogelijk bestanden te verzenden of te ontvangen van elke computer ter wereld, voor zover deze is aangesloten op internet, en zolang een eventuele proxy of firewall FTP-verkeer toelaat.

TechniekHet concept van een FTP is gebaseerd op het cliënt-servermodel dat ook andere delen van het inter-net kenmerkt. De clientsoftware maakt een verbinding met de opgegeven FTP-server aan de andere kant van de ‘lijn’. Deze antwoordt aan de cliënt, waarna de cliënt de gegevens aan de gebruiker toont. FTP-servers kunnen anonieme gebruikers toelaten of juist een geldige gebruikersnaam/wachtwoord combinatie vereisen alvorens toegang tot de achterliggende bestanden te geven.

VeiligheidStandaard FTP-verbindingen zijn niet voorzien van encryptie, waardoor de verstuurde gegevens gemakkelijk kunnen worden uitgelezen door hackers. Door gebruik te maken van een encryptie-laag kan dit, voor zover mogelijk, worden voorkomen.

SoftwareBekende FTP-clients voor Microsoft Windows zijn CuteFTP, FileZilla en WS_FTP. Voor Mac Os X is (naast FileZilla) Cyberduck en Transmit (betalend) een bekende open source client. Ook de meeste webbrowsers hebben (beperkte) FTP-functionaliteit. Voor Firefox is er een plugin beschikbaar onder de naam Fireftp die van Firefox een volwaardige ftp-client maakt.

Een lijst van FTP software vind je op Wikipedia:

� http://nl.wikipedia.org/wiki/Lijst_van_FTP-serversoftware

10.2 Praktisch

In een FTP-programma dien je minstens drie dingen in te geven om een verbinding te maken met de server. Deze gegevens krijg je van de hostingprovider:

• adres

• gebruikersnaam

• wachtwoord

• poort (niet nodig als het een standaardpoort betreft)


Bovenaan kan je in Filezilla deze zaken invullen. De poort is facultatief. Daarna klik je gewoon op “quickconnect” en zal je verbonden zijn. Je zal een overzicht krijgen van de inhoud van de server (de map op de server waarop jij toegang hebt).

Het volstaat om de nodige files te slepen naar de server om te uploaden en omgekeerd om te down-loaden.

FileZilla, zowel beschikbaar op Windows als op Mac.

Downloaden is het overdragen van computergegevens van de ene computer naar de andere, waarbij het initiatief van de ontvangende computer uitgaat. De ontvangende computer heet ‘cliënt’ en de zendende computer heet ‘server’. Wie met de browser gegevens op het internet bekijkt of emails uitleest, is technisch gezien aan het downloaden. Meestal spreekt men pas van downloaden als men gegevens ophaalt met de bedoeling ze permanent op te slaan.


11.1 Workflow?

Een aantal jaar geleden kwamen er verschillende ontwikkelaars achter dat ze bij iedere website prak-tisch opnieuw begonnen wat betreft hun CSS code. Zij moesten telkens op basis van hun ontwerp een nieuwe structuur bouwen.

Om de werkwijze te stroomlijnen hebben ze verschillende manieren bedacht om repetitieve taken te automatiseren. Dit deed allerhande templates ontstaan:

• frameworks

• reset.css

• master.css

11.2 Frameworks

Een framework bestaat uit een aantal lijnen CSS code en uit een aantal regels (guidelines) waaraan je je dient te houden om het gebruik van het framework tot een succes te maken.

De meeste frameworks zijn gebaseerd op een kolom-structuur. Hier is voor gekozen dat je als ontwerper en ontwikkelaar flexibel met breedtes om kunt gaan en toch binnen het gegeven stramien blijft. In een aantal frameworks zijn ook typografische zaken meegenomen zoals een basislijnraster, verschillende standaard headers en fonts. Tevens zijn er zelfs frameworks waarin jQuery elementen beschikbaar zijn.

Een aantal frameworks:

� http://960.gs/ � http://baselinecss.com/ � http://www.blueprintcss.org/ � http://bluetrip.org/

11.2.1 Voordelen frameworks

Het grote voordeel van een framework is dat je zeker weet dat het ontwerp wat je maakt er op vrij-wel alle browsers hetzelfde uit ziet. Deze frameworks zijn hier namelijk uitgebreid op getest. Wan-neer je van plan bent om met een bepaald framework te gaan werken kun je best even kijken naar de documentatie. Vaak zitten er bij de verschillende frameworks namelijk ook basisbestanden voor verschillende ontwerp-programma’s, zodat je hiermee direct aan de slag kan.

11.2.2 Nadelen frameworks

Je kent je code nietWanneer we jQuery gaan implementeren in een webontwerp om het interactiever te maken, dan is het erg belangrijk om bijvoorbeeld te weten hoe uw navigatie werd opgebouwd en hoe ze werd opgemaakt met CSS. Willen we de navigatie animeren, dan weten we perfect hoe we de menu-items

HOOFDSTUK 11CSS Workflow


moeten aanspreken of welke opmaak we moeten aanpassen, we hebben de xHTML én CSS-code namelijk zelf geschreven.

Niets is erger dan een framework te gebruiken om tijd te besparen, om dan te moeten ontdekken dat je tien keer langer bezig bent met uit te zoeken hoe het framework een bepaald element heeft opgemaakt.

BugsEen ontwerp is nooit helemaal perfect en het is best mogelijk dat hier en daar een foutje opduikt. Ook CSS frameworks kunnen mogelijk bugs bevatten of zodanig geschreven zijn dat ze conflicte-ren met je eigen opmaak. Hoe tijdrovend en frusterend het soms kan zijn om eigen bugs te moeten oplossen, het is alleszins vele malen makkelijker en leuker dan bugs uit het werk van iemand anders te moeten vissen.

Je negeert het unieke van elk projectElk project is uniek. Elke klant heeft unieke wensen waarvoor een even unieke oplossing moet ge-boden worden. In plaats van steeds dezelfde standaard templates of structuren te gebruiken uit een framework, ga je beter uit van de inhoud die de klant je aanlevert. Op basis van die inhoud ga je op zoek naar het beste ontwerp om die inhoud zo goed mogelijk tot zijn recht te laten komen.

11.2.3 Conclusie

Of je gebruik wenst te maken van een CSS-framework hangt volledig af van je eigen voorkeuren. Je kan verkiezen om je eigen code te gebruiken en om hiermee een eigen basisframework te ontwik-kelen. Zo ben je er zeker van dat je steeds snel start met een nieuw project én dat je alle code zelf onder controle heb.

Voor sommigen is het sop de kool niet waard. CSS-frameworks kunnen zeker nuttig zijn, maar enkel binnen bepaalde situaties en voor bepaalde projecten.

Hierover meer in punt 11.4:

11.3 Reset CSS

Iedere browser gaat op zijn eigen manier met de verschillende HTML-elementen om. Zo zien bijvoorbeeld het formaat van verschillende witruimtes, regelafstanden, borders en fonts er in ie-dere browser anders uit. Om te voorkomen dat we bij iedere id of class die we aanmaken al deze zaken moeten onderzoeken op de verschillende browsers, wordt er vaak gebruik gemaakt van een zogenaamd reset-bestand. In dit reset-bestand worden de waardes van van de verschillende HTML-elementen op nul gezet. Zo zorgen we er bijvoorbeeld voor dat de margins van ‘block-elementen’ op 0 staan, de borders op ‘none’ staan en de fonts op 100% worden gezet.

Wanneer dit niet gebeurd en we kijken naar het resultaat in Firefox, kan deze er heel anders uitzien wanneer je de website later in Internet Explorer opent. De standaardwaarden van deze browsers kunnen namelijk erg verschillen. Bij het gebruik van een reset-bestand zorg je er dan ook voor dat de basis er in iedere browser hetzelfde uit ziet. Hoewel er verschillende reset-bestanden te verkrijgen zijn, is het natuurlijk ook mogelijk om zelf een specifiek reset-bestand te maken dat precies aan jouw eisen en wensen voldoet.

Een aantal reset-bestanden:

� http://meyerweb.com/eric/tools/css/reset/ � http://developer.yahoo.com/yui/reset/ � http://tantek.com/log/2004/undohtml.css


Het reset bestand linken we aan onze HTML-file in de <head> van de pagina. We zetten deze steeds boven de verwijzing naar onze eigen CSS-file(s). Indien we dit niet zouden doen resetten we eerst onze eigen CSS...

11.4 Master CSS

Er is wel een probleem dat opduikt als je een reset.css gebruikt. Het vernietigd namelijk alle <form> elementen. Eens de stijl is gereset op bv. een button, kan je die niet meer terug brengen!De bedoeling van een master stylesheet is dat je niet dient gebruik te maken van een globale reset. Je zou je eigen template of master.css moeten schrijven als de basis van je projecten...

Daarin kan je alle eigen persoonlijke stijlen stoppen die voor jou een mooie basis vormen en toch telkens terugkomen:

• typografisch

• formulieren

• tabellen

• headings

• links

Enkele voorbeelden van master.css

� http://webdesign.about.com/od/css/a/master_stylesht.htm � http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/

11.5 Algemene Conclusie

Om niet altijd hetzelfde werk te moeten overdoen en toch flexibel en snel te kunnen werken herge-bruiken sommigen wel degelijk eenzelfde code base. Zo hebben die ondertussen een eigen workflow ontwikkeld met een eigen “framework”. Framework is hier een groot woord, aangezien ze starten vanuit een redelijk kale HTML template met hieraan een gekoppelde master CSS-stylesheet en al dan niet een CSS-reset. Ook staan telkens de terugkerende mappen (images, css, js) al klaar wanneer we aan een nieuw project beginnen werken.

De algemene voorkeur is het gebruik van een master.css ipv een reset.css of een framework.

Wens je meer te weten te komen over de workflow m.b.t. CSS, dan biedt deze pagina van smashingmagazine alle informatie en tips die er te geven zijn:

� http://coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/


12.1 CSS3 en nieuwe mogelijkheden

Alle moderne webpagina’s maken gebruik van stylesheets (CSS) om de opmaak van de pagina te bepalen. Kleuren, lettertypes, afmetingen en marges worden in de stylesheets beschreven. Met de komst van HTML5 is er ook een nieuwe versie voor stylesheets: CSS3. Een nieuw onderdeel in deze specificatie zijn de Media Queries.

Met CSS3 worden er een hoop nieuwe dingen mogelijk (of gestandaardiseerd):

• afgeronde hoekjes

• semi-transparantie

• drop-shadows

• embedded lettertypes

Media Queries zorgen ervoor dat we kunnen bepalen welke styles er van toe-passing zijn, naar aanleiding van de eigenschappen van het medium waarop de pagina getoond wordt.

In CSS2 hadden we bijvoorbeeld al de mogelijkheid om verschil te maken tussen een stylesheet voor het scherm en een stylesheet voor een afdruk op papier.

<head> <link rel=”stylesheet” type=”text/css” media=”screen” href=”main.css”> <link rel=”stylesheet” type=”text/css” media=”print” href=”print.css”></head>

Met de komst van CSS3 krijgen we niet alleen de mogelijkheid om te bepalen welke stylesheet op welk medium van toepassing is, maar ook informatie over dat medium:

• Afmetingen: de afmetingen van het scherm en van het venster

waarin de pagina getoond wordt.

• Aantal kleuren: de mogelijkheid van het scherm om een aantal

verschillende kleuren weer te geven.

• Resolutie: het aantal pixels per Inch (dpi) of per centimeter (dpcm)

• Richting (landscape of portret): computerschermen zijn over het

algemeen ‘Landscape’ terwijl telefoons vaak in ‘Portret’ richting gebruikt worden.

• Aspect Ratio: de verhouding van het scherm (bv. wel of niet breedbeeld)

HOOFDSTUK 12Responsive design en @media


12.2 @media van de grootte en soort

Hieronder zie je een voorbeeld van zo’n query. De elementen met de class “content” worden beïnvloed door de grootte van het venster en de richting waarin het scherm gedraaid is. Mocht de browser geen CSS3 ondersteunen, dan zullen de styles met query genegeerd worden en het element dus 500 bij 400 pixels groot worden.

.content{ width: 500px; height: 400px;}

@media (min-width: 800px) and (max-width: 1023px){ .content { width: 775px; height: 500px; }}

@media (min-width: 1024px){ .content { width: 1000px; height: 600px; } }

@media (orientation:portrait){ .content { display : block; }}


12.3 Werkwijze voor het omgaan met schermformaten

Men kan er op drie manieren voor zorgen dat de inhoud zich aanpast aan de beschikbare ruimte:

1. Moeilijk: Werken met percentages (width: 50%;) en variabele eenheden (2em)

2. Gemakkelijk: Media Queries

3. Het beste: De combinatie van die twee (zoals hieronder beschreven)

Stap 1: 960px

Maak je stylesheet zoals je dat al eerder deed en zorg dat je website er prima uitziet op een breedte van 1024 (960) pixels. Oude browsers ondersteunen geen media queries, dus ziet je website er dan toch overal aanvaardbaar uit.

Bepaal op voorhand welke verschillende schermresoluties je wil aanspreken (480, 960, 1200, 1600, ...)

Stap 2: kleinste formaat

Voeg onderaan je css volgende code toe

@media screen and (max-width: 480px){ .content { width:320px; } ...}

Deze code wordt maar énkel uitgevoerd als de huidige breedte kleiner is dan dan max-widthVerwar dit niet met de max- en min-width properties!Tussen de accolades van de media query schrijf je vervolgens énkel de aanpassingen die je wil maken aan de originele stylesheet. Dat hoeft niet enkel om lettergroottes te gaan, maar kan ook over kleu-ren, display, float, background-image, ... gaan.

Stap 3: grootste formaat

@media screen and (min-width: 1280px){ .content { width:1200px; }}

• Schrijf weer onder al het eerder geschrevene.

• Schrijf énkel de aanpassingen die je wil maken aan de originele stylesheet.

• Deze code wordt maar énkel uitgevoerd als de huidige breedte groter is dan

min-width .


Stap 4: tussenformaten

@media screen and (min-width: 550px) and (max-width:900px){ .content { width:550px; }}

• Voor elke andere tussenstap geef je zowel een onder als bovengrens op.

• Deze code wordt maar énkel uitgevoerd als de huidige breedte groter is dan

min-width en kleiner dan de max-width.

Stap 5: print

@media print{ .content { width:auto; color:black; margin:1cm; }}

• Dit is code voor wanneer het document afgedrukt wordt.

• Zorg ervoor om navigatie, footer, achtergrondafbeeldingen... te verbergen

• Werk in cm/mm i.p.v. px

• Zet alle tekst op een donkere kleur

Enkele tips

Defineer enkel in de body je font-size met px: body{ font-size: 12px;}

• Defineer in alle andere selectors de font-grootte in em: h1{ font-size: 8em; }

• Dat zorgt ervoor dat je bij elke media query niet steeds,

bij elke property de font-size met enkele punten moet vergroten.

• Je kan em ook gebruiken als eenheid bij andere properties

(bv. border-radius, border-width, margin, ...)

Gebruik waar mogelijk % voor breedtes, zo moet je enkel de parent met een Media Query vergroten


12.4 Media Queries en het Video element

Je kan verschillende bestandsformaten specificeren zodat de browser het juiste bestandsformaat kiest dat afgespeeld kan worden. Het is hier ook mogelijk om met de CSS3 Media Queries te werken. In onderstaand voorbeeld zie je 4 videobestanden gespecificeerd staan, waarvan er 2 low-res die be-doeld zijn om op smart-phones af te spelen en 2 hi-res voor op de computer.

<video autoplay autobuffer="true" width="400px" height="300px"> <source src="vid-hi.mp4" type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’ media="(min-device-width: 800px)">

<source src="vid-lo.mp4" type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’> <source src="vid-hi.ogg" type=’video/ogg; codecs="theora, vorbis" media="(min-device-width: 800px)"’> <source src="vid-lo.ogg" type=’video/ogg; codecs="theora, vorbis"’> 

</video>


13.1 Keuze van het font

De keuze van een lettertype is zeer belangrijk voor de uitstraling van een site. We kunnen niet blin-delings en volgens onze eigen voorkeur zomaar een lettertype kiezen. Er komen een aantal faktoren bij kijken die de juiste keuze bepalen:

1. De uitstraling van een lettertype

2. De inhoud van de site of productie

3. De leesbaarheid van het lettertype

Het aanwenden van één of meerdere lettertypes in een ontwerp waarbij de uitstraling van het let-tertype volledig harmonisch is met de inhoud of vormgeving van de site of cd-romproductie is een zaak van juist aanvoelen, theoretische kennis, ervaring en inzicht. Daarnaast is het correct bepalen van de grootte en zwaarte van een letter, het bepalen van de witruimte tussen de letters en regels, het kiezen van een juiste zetbreedte en het zoeken naar een juiste bladspiegel zeer belangrijk voor de vlotte leesbaarheid van een tekst. Je ziet, bij het kiezen van een juiste letter en het toepassen van die letter binnen een vlak komt heel wat kijken, en daarbij staat één ding voorop, de vlotte leesbaarheid.

Het valt niet binnen de doelstelling van deze technische cursus om hier dieper op in te gaan.

Over deze materie kan je hier meer informatie vinden:

� http://naarvoren.nl/artikel/typografie_internet/ � http://www.usabilityweb.nl/2005/05/typografie-en-leesbaarheid/ � http://www.xicero.com/blog/design/typografie-voor-het-internet.html � http://nieuw.marissen.net/lettertypen-website-typografie/ � http://blog.associatie.kuleuven.be/liendierckx/tag/typografie-2/

Op de laatste pagina’s van deze cursus staat een information graphic over typo en grafisch design.

13.2 Hoe specifieke lettertypes gebruiken

Een lettertype kan maar juist worden weergegeven als de bezoeker van uw website dat lettertype ook op zijn computer heeft staan. De term Web-safe fonts duidt op lettertypes die op vrijwel alle computers geïnstalleerd zijn.

Dit zorgt er voor dat de keuze beperkt is qua lettertypes. Doch zijn er meerdere oplossingen om toch het juiste font te kunnen kiezen:

• invoegen als een afbeelding (af te raden)

• standaard lettertypes; web-safe fonts.

• zelf hosten van lettertypes

• gebruikmaken van een webdienst zoals Google webfonts

HOOFDSTUK 13Lettertypes en webdesign


13.2.1 Afbeeldingen

Tekst die op het web wordt gepubliceerd als een afbeelding kan niet worden geselecteerd of gekopi-eerd als tekst in een browservenster. Afbeeldingen worden trager geladen dan bij webveilige letterty-pen. Gebruik ze dan ook spaarzaam., maar liever niet.

13.2.2 Web-save fonts

Webveilige lettertypen bieden je een beperkte keuze uit lettertypen voor webontwerp die voor iedereen beschikbaar zijn, zoals Helvetica, Arial, Georgia en Verdana. Webveilige lettertypen zijn onder andere de lettertypen die zijn geïnstalleerd op de meeste computers die compatibel zijn met Mac en Windows®. Als de eerste keuze (bijvoorbeeld Helvetica) niet beschikbaar is op de computer van een bezoeker, zal de site op zoek gaan naar het volgende lettertype, zoals Arial. Het uitzicht en de lay-out van een webpaginaontwerp kan op die manier verschillen tussen computers van verschillende gebruikers.

Dit is een (niet volledige) maar bruikbare lijst van web-save fonts:

Windows fonts / Mac fonts / Font family

Normal style Bold style

Arial, Arial, Helvetica, sans-serif Arial, Arial, Helvetica, sans-serif

Arial Black, Arial Black,

Gadget, sans-serif

Arial Black, Arial Black,

Gadget, sans-serif

Comic Sans MS, Comic Sans MS5,

cursive

Comic Sans MS, Comic Sans

MS5, cursive

Courier New, Courier New,

monospace

Courier New, Courier New,

monospace

Georgia1, Georgia, serif Georgia

1, Georgia, serif

Impact, Impact5

, Charcoal6

, sans-serif Impact, Impact5

, Charcoal6

, sans-serif

Lucida Console, Monaco5,

monospace

LLuucciiddaa CCoonnssoollee,,

MMoonnaaccoo55,, mmoonnoossppaaccee

Lucida Sans Unicode, Lucida

Grande, sans-serif

Lucida Sans Unicode, Lucida

Grande, sans-serif

Palatino Linotype, Book Antiqua3,

Palatino, serifPalatino Linotype, Book Antiqua

3,

Palatino, serif

Tahoma, Geneva, sans-serif Tahoma, Geneva, sans-serif

Times New Roman, Times New

Roman, Times, serif

Times New Roman, Times New

Roman, Times, serif

Trebuchet MS1, Trebuchet MS,

sans-serif

Trebuchet MS1, Trebuchet MS,

sans-serif

Verdana, Verdana, Geneva,

sans-serif

Verdana, Verdana, Geneva,

sans-serif

Symbol, Symbol (Symbol2, Symbol

2) Symbol,, Symbol (Symbol

2, Symbol

2)

Webdings, Webdings

(Webdings2, Webdings

2)

Webdings, Webdings

(Webdings2, Webdings

2)

Wingdings, Zapf Dingbats

(Wingdings2, Zapf Dingbats

2)

Wingdings, Zapf Dingbats

(Wingdings2, Zapf Dingbats

2)

MS Sans Serif4, Geneva,

sans-serif

MMSS SSaannss SSeerriiff44,, GGeenneevvaa,,

ssaannss--sseerriiff

MS Serif4, New York

6, serif MS Serif

4, New York

6, serif


13.2.2 Zelf hosten van lettertypes via @fontface

De @font-face CSS-methode is een van de sterkste, meest eenvoudige en flexibele manieren om lettertypes te gebruiken. In de nieuwe @ font-face regel moet je een naam voor het lettertype (bijv. myFirstFont)aangeven, en verwijzen naar het lettertype bestand.

Als je het lettertype wil gebruiken voor een HTML-element, raadpleeg je de naam van het lettertype (myFirstFont) door de font-family eigenschap:

<style>@font-face{font-family: myFirstFont;src: url(‘Sansation_Light.ttf’), url(‘Sansation_Light.eot’); /* IE9+ */}

div{font-family:myFirstFont;}</style>

Met bijvoorbeeld vette (bold) tekst: Maak een andere extra @ font-face regel aan met een beschrij-ving voor vette tekst:

<!DOCTYPE html><html> <head> <style> @font-face { font-family: myFirstFont; src: url(‘Sansation_Light.ttf’) }

@font-face { font-family: myFirstFont; src: url(‘Sansation_Bold.ttf’) font-weight:bold; }

div { font-family:myFirstFont; } </style> </head><body>

<div> Met CSS3, websites kunnen <b>eindelijk</b> andere fonts gebruiken dan web-safe fonts. </div>

</body></html>


Licenties en Free FontsOpgelet! Vele fonts zijn auteursrechtelijk beschremd en kun je dus eigenlijk niet op deze wijze gebrui-ken. Gelukkig heeft dit “web-font-licenties-probleem” geleid tot een grote stijging in de populariteit van sites die kwalitatieve fonts gratis aanbieden. Daaronder zijn deze de beste:

� http://www.fontsquirrel.com/ � http://www.fontex.org/

13.2.3 Webdienst zoals Google webfonts

Met Google Web Fonts kunt je kiezen uit meer dan 500 verschillende lettertypen. Deze fonts zijn gratis en rechtenvrij te gebruiken. Alle lettertypes die via Google Web Fonts worden aangeboden, worden door Google online gehost op haar servers. Door een verwijzing naar het gewenste font in je website op te nemen, worden die fonts als het ware door jouw website “opgehaald” en aan de bezoeker getoond. Daardoor is het niet meer nodig dat het lettertype in kwestie op de PC van je websitebezoeker aanwezig is -- Google doet het werk.

� http://www.google.com/webfonts

Werkwijze

1. Ga naar Google Web Fonts en klik op Start choosing fonts

2. Kies een font en klik op Quick-use.

3. Scroll omlaag en kopieer de code bij Add this code to your website.

4. Plak de code in het <head> gedeelte van de pagina.

5. Open het stylesheet van de pagina, en voeg de naam van het lettertype toe.

De naam is te zien op de Google Web Fonts website (onder de ingevoegde code).

body { font-family: arabicaLight; font-size: 12px; }


13.3 Speciale karakers in HTML

3.3.1 Woordafbreken

Een browser heeft geen ingebouwd mechanisme om woorden af te breken. Daardoor begint en ein-digt een regel standaard altijd met een compleet woord. In de meeste gevallen is dat geen probleem, maar bij lange woorden kan dat leiden tot een minder fraaie weergave. Bij eenzijdig uitgelijnde tekst omdat er aan het eind (of begin) van de regel een grote witruimte ontstaat, bij tweezijdig uitgevulde tekst omdat de ruimte tussen de woorden erg groot wordt. Je kunt dat voorkomen, door in het woord één of meer keer de code voor een zacht koppelteken (soft hyphen) op te nemen.Deze code, of &173;, zorgt ervoor dat het woord als dat nodig is wordt afgebroken en een afbreekstreepje wordt ingevoegd.

<P>... tekstverwerkingsprogramma’s ...</P>

<P>... tekstverwerkingsprogramma’s ...</P>

Een mechanisme om woorden aan het eind van de regel af te breken (zoals je zonder twijfel kent van een tekstverwerkings-programma), ontbreekt in de browser.

Een mechanisme om woorden aan het eind van de regel af te breken (zoals je zonder twijfel kent van een tekstverwerkingsprogramma), ontbreekt in de browser.

tekstverwerker browser

Rechts is de weergave door de browser en links is de weergave door een tekstverwerker. Merk op dat een browser geen woorden kan afbreken!

3.3.2 Speciale tekens

Bij het maken van een HTML-document mag je niet zomaar alle karakters opnemen, die je met al-lerlei toetscombinaties in bijvoorbeeld je tekstverwerker wel kunt gebruiken. Enerzijds omdat niet elk systeem (DOS/Windows, Macintosh, Linux) deze karakters op dezelfde wijze interpreteert, ander-zijds omdat sommige karakters in HTML een speciale betekenis hebben. In principe kun je alle letters, cijfers en tekens die je op een standaard toetsenbord vindt gewoon gebruiken.

Een uitzondering vormen deze karakters:

“ dubbel aanhalingsteken " "

& ampersand & &

< kleiner dan < <

> groter dan > >

Stel dat je bijvoorbeeld een groter-dan-teken wil gebruiken in je tekst dan schrijf je dit zo:

<p> vijftien is > dan tien <p>

Naast deze vier karakters, dient men ook voor wiskundige symbolen, Griekse letters, verschillende pijlen, technische symbolen en vormen speciale karaktercombinaties te gebruiken Deze zijn hoofdlet-tergevoelig.

Een volledige referentie vind je hier:

� http://www.w3schools.com/tags/ref_symbols.asp


Bronvermelding

� http://wikipedia.be/ � http://www.handleidinghtml.nl � http://www.w3schools.com � http://www.tweepixels.nl � http://www.goodbytes.be � http://www.smashingmagazine.com � http://www.yes2web.nl � http://sceneone.nl/tips_tricks � http://css-tricks.com � http://www.html-site.nl � http://home.parse.nl/~michiel/semantiek.html � http://www.crucialwebhost.com/blog � http://blog.master-it.nl/blog00189/Tal_van_nieuwe_mogelijkheden_met_CSS3_Media_Queries.htm � http://users.telenet.be/philippe.somers1/keuze.html � http://users.telenet.be/philippe.somers1/typografie.html � http://www.adobe.com/be_nl/products/muse/font-types.html � http://sixrevisions.com/css/font-face-guide/

Op de laatste pagina’s van deze cursus staat een information graphic over typo en grafisch design van Noodlor Typegraphic:

� http://www.feedgeeks.net/2011/08/noodlor-typegraphic/

Documents

cursus HTML 5