basis HTML en CSS by lew land

< HTML & CSS > < Jeroen Goubert / Don Bosco Halle > versie 18 - 01 - 2020

I nh o u d s o p g ave INLEIDING IN HTML

1.1 Wat is HTML? 1.2 Minimum HTML5 Document 1.3 Elementen 1.4 Attributen HELLO WORLD

2.1 Hello world - onze eerste pagina 2.2 De Head 2.3 Body element 2.5 Maak je eigen template LOGISCHE STRUCTUUR EN SEMANTIEK

3.1 HTML en semantiek 3.2 Markeren van “zones” in HTML5 3.3 Andere groepeerelementen: <div> en <span> 3.4 Logische opmaak van inhoud binnen “zones”

3 3 4 4 6

6 7 8 10 11

11 11 12 14

HYPERLINKS 15

4.1 Wat zijn hyperlinks? 4.2 Navigatie binnen mappenstructuur op server 4.3 Downloaden bestand 4.4 Bestemming binnen document 4.5 Mailto-links CASCADING STYLESHEETS

5.1 Inleiding 5.2 CSS syntax 5.3 Stijlen verbinden met HTML 5.4 CSS eenheden / meetwaarden CSS SELECTORS

6.1 Selectors 6.2 Element selectors 6.3 Universele selector 6.4 Attribuut selectors 6.5 Class en ID selectors 6.6 CSS Pseudo-classes CSS EN HET BOXMODEL

7.1 Wat? 7.2 Dimensies DOCUMENT FLOW

8.1 Positionering ten op zichte van... 8.2 Elementen Floaten GRID LAYOUT

9.1 Inleiding 9.2 Starten met CSS Grid 9.3 Een stapje verder met CSS-grid VARIATIES IN GRIDLAYOUT

10.1 Inleiding 10.2. Fixed 10.3 Fluid 10.4 Responsive 10.5 Expliciet geplaatst 10.6 Overlappend en ratio-gebaseerde lijst

15 15 16 17 18 19

19 20 21 22 23

23 23 26 27 28 29 31

31 32 34

34 37 40

40 41 45

GESTRUCTUREERDE NAVIGATIE

56 59 66 72 76 77

12.1 Inleiding 12.2 HTML-lijsten 12.3 Navigatie met een UL

77 77 78

DE WEBSITE ONLINE PLAATSEN

13.1 FTP (File Transfer Protocol) 13.2 Praktisch

81 81

CSS WORKFLOW

14.1 Workflow? 14.2 Frameworks 14.3 Reset CSS 14.4 Master CSS 14.5 Algemene Conclusie

83 83 84 85 85

RESPONSIVE DESIGN EN @MEDIA

15.1 CSS3 en nieuwe mogelijkheden 86 15.2 @media van de grootte en soort 87 15.3 Werkwijze voor het omgaan met schermformaten 88 15.4 Media Queries en het Video element 90 15.5 Viewport 90 LETTERTYPES EN WEBDESIGN

16.1 Keuze van het font 16.2 Hoe specifieke lettertypes gebruiken 16.3 Speciale karakers in HTML 16.4 Responsive typography

91 91 95 96

AFBEELDINGEN OP HET WEB

17.1 Bestandsformaten 17.2 Bestandsgrootte & responsive 17.3 Werken met vectoren: SVG en icon fonts 17.4 Sprites CSS CUSTOM PROPERTIES

18.1 Inleiding 18.2 Syntax om te declareren 18.3 Draagwijdte (scope) en vererving 18.4 CSS custom properties toepassen

99 102 105 109 113

113 113 115 119

FORMULIEREN 121

19.1 Inleiding 19.2 Verwerken van informatie 19.3 Opbouw van een “control” 19.4 Knoppen

121 122 123 126

50 51 52 53 54 55

FLEXBOX 56

11.1 Omschrijving flexbox

11.2 Flexbox concepten 11.3 De afmeting van een flex-item (Flex-basis) 11.4 Flexbox container properties 11.5 Flex Item Properties 11.6 Werkwijze voor het gebruik van Flexbox

TABELLEN 127

20.1 Inleiding 20.2 Eenvoudige tabellen 20.3 Samenvoegen van cellen 20.4 Uitlijnen celinhoud

127 127 129 130

BRONVERMELDING 132 TYPE GUIDE

133

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Inleiding in HTML

1 . 1 Wa t i s 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 belangrijkste 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 Mi n i m um HTML5 Docu ment 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.

BASIS HTML & CSS // GOUBERT

<!DOCTYPE html> <html> <head> <title>Titel van het document</title> </head> <body> inhoud van het document...: <img src="bol.jpg" /> </body> </html>

1 . 3 E l e me nte n Starttag <p> <a href="default.html"> <br>

Element inhoud dit is een link

Eindtag </p> </a>

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 A t t ribute n 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

BASIS HTML & CSS // GOUBERT

Een voorbeeld: <!DOCTYPE html>

<html> <head> <title>Titel van het document</title> </head> <body> <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 aelement 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

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Hello World 2 . 1 He l lo worl d - onze e e rste pa gina 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 nauwelijks 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 maken 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!!!

BASIS HTML & CSS // GOUBERT

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 document. In het voorbeeld hierboven gebruiken we de HTML5 doctype declaratie.

2 . 2 De H e ad <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> <title> <base> <link> <meta> <script> <style>

Definieert informatie over het document Definieert de titel van een document Definieert een standaard adres of een standaard doel voor alle links op een pagina Definieert de relatie tussen een document en een externe bron Definieert metagegevens over een HTML-document Definieert een client-side script 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 element handig zijn als het huidige document verplaatst wordt naar een andere directory of server, maar niet tegelijkertijd alle bestanden waarnaar de relatieve URIâ&#x20AC;&#x2122;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.

BASIS HTML & CSS // GOUBERT

Meer uitleg over deze materie, door Google:

http://www.youtube.com/watch?feature=player_embedded&v=RBTBEfd7z_Y

2 . 3 B o dy e l e m e nt 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> tot <h6> tags. <h1>Dit is een heading</h1> <h2>Dit is een heading</h2> <h3>Dit is een heading</h3>

BASIS HTML & CSS // GOUBERT

<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 4 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” alt=”bert en ernie” width=”104” height=”142”> <img src=”bert_en_ernie.jpg” alt=”bert en ernie” >

Het alt-attribuut toont een alternatieve tekst in de browser indien de afbeelding niet zou worden geladen.

BASIS HTML & CSS // GOUBERT

2 . 5 Maa k je e i ge n te m plate De volgende code is je template die je bewaard en altijd zal gebruiken als basis waarop je kan beginnen bouwen. Typ de volgende tekst en bewaar met als benaming template.html in een map genaamd “HTML template” 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>

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. <!- Hier staat commentaar die niet zichtbaar is in de browser maar wel in de code staat ter informatie of verduidelijking. -->

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Logische structuur en semantiek 3 . 1 HTML e n s e m a ntie k 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 Ma rke re n va n “zone s ” in HTM L5 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

BASIS HTML & CSS // GOUBERT

In HTML 5 gebruiken we daar dan de volgende tags voor: <aside> <figure> <header> <nav> <section> <article> <footer>

Definieert bepaalde inhoud los van de pagina-inhoud Definieert op zich staande inhoud: afbeeldingen, diagrammen, fotoâ&#x20AC;&#x2122;s, code lijsten, etc. Definieert een hoofding voor een document of sectie Definieert navigatielinks Definieert een onderdeel in een document Definieert een artikel Definieert een voettekst voor een document of sectie

Een volledige lijst vind je op: â&#x20AC;&#x2021; 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 A nde re g roe pe e re le m enten: <div > en <spa n> 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 browser. Voorbeelden: <h1>, <p>, <ul>, <table> HTML Inline-elementen Inline elements worden normaal getoond zonder een nieuwe lijn te starten. Voorbeelden: <strong>, <a>

BASIS HTML & CSS // GOUBERT

Andere HTML Groupeertags <div> <span>

Definieerd een deel in een document (block-level) 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 van 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 stijlattributen in te stellen op grote blokken inhoud. Een andere veel voorkomende gebruik van de <div> element, is voor document opmaak. Het vervangt de “oude manier” van het definiëren van lay-out met behulp van tabellen. Het gebruik van tabellen 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 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </span> quis nostrud exercitation ullamco laboris nisi ut aliquip </p>

BASIS HTML & CSS // GOUBERT

3 . 4 Lo g i s che opm aa k va n inhoud binnen â&#x20AC;&#x153;zonesâ&#x20AC;? 3.4.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.

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Hyperlinks 4 . 1 Wa t z i j n hype rl i nks ? Een hyperlink maak je met het A-element, waaraan je het HREF attribuut toevoegt. Het HREF attribuut geeft aan op welke locatie het bestand, dat geopend of gedownload moet worden, zich bevindt. De waarde van het HREF attribuut is een zogenoemde Uniform Resource Identifier (URI). 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 gebruiken 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 FTPserver 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

4 . 2 N av ig ati e binne n m a ppenstructuur 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>

BASIS HTML & CSS // GOUBERT

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 directory Staat 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>

Subdirectory Staat 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 directory Bevindt 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 subdirectory Een 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 directory Verwijs je niet naar een bestand, maar naar een directory, dan beëindig je de URI met een slash: <a href="html/">HTML-gedeelte</a

4 . 3 Downloade n be s ta nd 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>

BASIS HTML & CSS // GOUBERT

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:wachtwoord@ftp.domein.nl/pub/"> Download bestand(en)</A>

Als je niet wilt dat de gebruikersnaam en het wachtwoord bij iedereen bekend worden, is het verstandig 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 bestandstypen 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 hyperlink te adviseren de rechter muisknop te gebruiken en te kiezen voor ‘Opslaan als’.

4 . 4 B e s te m m ing binne n do cument 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-htmlplus.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.

BASIS HTML & CSS // GOUBERT

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.

4 . 5 Ma i l to- li nks Met behulp van een mailto-link kun je een bezoeker van je pagina snel een bericht naar je laten sturen. In plaats van een http-URI in de eerdere voorbeelden, gebruik je nu een mailto-URI. Bijvoorbeeld: <a href="mailto:gebruiker@provider.be">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â&#x20AC;&#x2122;s ondersteunen een parameter in een mailto-URI om het onderwerp (subject) van het e-mailbericht vast te leggen: <a href="mailto:gebruiker@provider.be?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 andere 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 gebruiker@provider.be: <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&#64;provider&#46;be

In de browser zie je: gebruiker@provider.be 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 formulier.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.

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Cascading stylesheets 5 . 1 I n l e idi ng 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 document, 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 toekomstige 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

BASIS HTML & CSS // GOUBERT

5 . 2 C S S s yntax

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 commentaar Commentaar 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;

BASIS HTML & CSS // GOUBERT

5 . 3 S t i j l e n ve rbi nde n m e t HTM L 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 stijlen Een 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>

Stijlblok Wanneer een stijl vaker gebruikt wordt en/of voor meer elementen, maar slechts binnen één document, 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>

BASIS HTML & CSS // GOUBERT

Extern stijlblad Wanneer 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

5 . 4 C S S e e nhe de n / m e e twa a rden Alle elementen in html kunnen via CSS een bepaalde afmeting of grootte hebben. Deze kunnen in verschillende eeheden worden uitgedrukt. De belangrijkste zijn: Web: • • •

% px em

• •

pt cm

Hier heb je een overzicht: % in cm em

ex pt pc px

percentage inch centimeter één em is gelijk aan de huidige lettergrootte. 2em betekent 2 keer de grootte van het huidige lettertype. Bijvoorbeeld als een element wordt weergegeven met een lettertype van 12 pt, dan is ‘2 em gelijk aan 24 pt. De ‘em’ is een zeer nuttig apparaat in CSS, omdat het zich automatisch kan aanpassen aan het lettertype dat de lezer gebruikt één ex is de x-hoogte van een lettertype (x-hoogte is meestal ongeveer de helft van de font-size) punt (1 pt is gelijk aan 1/72 inch) pica (1 pc is hetzelfde als 12 punten) pixels (één px op het computerscherm)

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

CSS selectors 6 . 1 S e l e ctors 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-selectors 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.

6 . 2 E l e me nt s e l e ctors Bij element-selectors bepalen één of meer elementen op welk deel van een document de stijl betrekking 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 descendent 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-selector Bij 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 selectors Element-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:

BASIS HTML & CSS // GOUBERT

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; }

6.2.1 Descendent element-selector ( = samengesteld ) 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 element moet zijn van Element1. Maar ze kunnen nog dieper genest zijn. 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 em { 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 strong 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>

BASIS HTML & CSS // GOUBERT

6.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’ (>) geplaatst, 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 > em { 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>

6.2.3 Adjacent sibling element-selector Adjacent sibling element-selectors (aangrenzende broer of zus) 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 Element1. 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>

BASIS HTML & CSS // GOUBERT

6 . 3 U n i ve rs e le s e le ctor 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 andere 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; }

BASIS HTML & CSS // GOUBERT

6 . 4 A t t ribuut s e le ctors 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>

BASIS HTML & CSS // GOUBERT

6 . 5 C l as s e n ID s e le ctors 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 document, of in een extern stijlblad.

6.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; }

BASIS HTML & CSS // GOUBERT

6.5.2 ID-selector De ID-selector heeft als basis een hekje gevolgd door een id-waarde. Stijlregels waarin gebruik gemaakt 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.

6 . 6 C S S Ps e udo- cl as s e s 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.

BASIS HTML & CSS // GOUBERT

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

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

CSS en het boxmodel

7 . 1 Wa t ? 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:

margin border padding

inhoud

Margin Border Padding Inhoud

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

Voorbeelden Padding padding: 10px; padding: 5px 8px; padding: 5px 8px 6px 9px; padding-top: 5px;

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

BASIS HTML & CSS // GOUBERT

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;

7 . 2 Di me ns i e s 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

BASIS HTML & CSS // GOUBERT

• •

%: 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

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Document flow 8 . 1 Po s i ti one ring te n op zichte v a n... 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: • relative: • fixed: • absolute:

Standaardwaarde van alle elementen: Plaats het element waar het in de HTML hoort te staan volgens de normale flow (onder mekaar) Positioneer relatief t.o.v. zijn eigen oorspronkelijke positie Positioneer relatief t.o.v. het browservenster Positioneer t.o.v. het parent element

Positioneren doe je met deze properties: top, left, right, bottom

BASIS HTML & CSS // GOUBERT

8.1.1 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 komen te staan.

Browser

HTML

CSS

<section> Lorem ipsum dolor sit amet, consectetaur adipisicing e... </section> section id=”position”> Ut enim ad minim veniam, quis nostrud exercitation ullamco ... </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 ... </section>

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

8.1.2 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. Browser

HTML

CSS

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

BASIS HTML & CSS // GOUBERT

8.1.3 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...).

Dit wordt vaak gebruikt om een navigatiebar vast te zetten in de pagina.

Browser

HTML

CSS

#position { position: fixed; width: 200px; height: 100px; background-color: white; padding: 2px; border: 1px solid black; top: 0; left: 0;}

In bovenstaand voorbeeld wordt het element links boven tegen het browservenster geplaatst en wordt het door de andere elemeneten genegeerd. Eventueel kan je de volgorde van de elementen die gelaagd boven mekaar liggen bepalen met de CSSproperty z-index.

8.1.4 Absolute Het element wordt t.o.v. het parent-element op de opgegeven positie geplaatst, net zoals postion: fixed dit doet t.o.v. het browservenster. • ! 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, wat neer kom op position:fixed... !

BASIS HTML & CSS // GOUBERT

8 . 2 E l e me nte n Floate n Met float, kan een element naar links of naar rechts worden geschoven waardoor andere elementen er omheen “drijven”. Browser

HTML

CSS

<article> <img src=”bene.jpg”> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus unde, quo aut eligendi quibusdam ratione ... </p> </article>

article { width: 90%;} img { float: left; width: 150px; margin: 10px;}

8.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”.

“Drijvende” Elementen naast elkaar Als je meerdere zwevende elementen na elkaar hebt zullen ze ook zweven naast elkaar als er deruimte voor is. Hier hebben we een fotogalerij met behulp van de float eigenschap:

BASIS HTML & CSS // GOUBERT

Browser

HTML

CSS

<div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div>

div { width: 100px; height: 100px; background-color: white; padding: 2px; border: 1px solid black; float: left; margin: 2px;}

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

Browser

HTML

CSS

<section> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> <div>float</div> </section>

section { width: 90%; border: 1px dotted black; overflow: auto;} div { width: 100px; height: 100px; background-color: white; padding: 2px; border: 1px solid black; float: left; margin: 2px;}

Wanneer een element wordt gefloat, dan wordt het uit de normale flow van het document gehaald. Het resultaat is dat dit element geen hoogte inneemt (in de normale flow). Elk container-(parent-)element zal zich niet automatisch herschalen naar de height van de floatende elementen dat er in zitten. Clearfix is een benaming van een trukje om een class (â&#x20AC;&#x153;clearfixâ&#x20AC;? genaamd) te maken die cross-browser werkt. Zet deze class op het container (parent-)element en de parent neemt de hoogte aan van het child zonder dat er elementen over elkaar heen gaan zweven (In het voorbeeld hier boven is het direct in de css bijgeschreven zonder extra classe.). .clearfix { overflow: auto; }

BASIS HTML & CSS // GOUBERT

8.2.2 Het uitschakelen van float - Het gebruik van clear Willen we bepaalde boxen op een aparte rij, zonder dat we gebruik maken van een andere “vaderbox” waarin ze vervat zitten, dan dienen we de float uit te schakelen door middel van een clear. In dit voorbeeld kennen we de property clear toe een classe clear. Elk element heeft wel ook nog steeds een float:left property.

Browser

HTML

CSS

<div>float</div> <div>float</div> <div class=”clear”> float en clear:left </div> <div>float</div> <div>float</div> <div>float</div> <div class=”clear”> float en clear:left </div> <div>float</div> <div>float</div>

.clear { clear: left;} div { width: 100px; height: 100px; background-color: white; padding: 2px; border: 1px solid black; float: left; margin: 2px;}

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Grid Layout 9 . 1 I n l e idi ng Ontwerpers gebruiken al jaren rasters om pagina’s te ordenen. Grids als ontwerptool worden geassocieerd met de Zwitsers die het formaliseerden als een manier om na te denken over de lay-out in de jaren 1940. Toen mensen begonnen te ontwerpen voor internet, werden rastersystemen van drukwerk naar het digitale overgebracht. Gedurende deze tijd was CSS (de code die de stijl van elementen in uw browser beheert) beperkt in termen van layoutmogelijkheden. Je kan het gelijkstellen met het proberen om ontwerpen te maken met behulp van de tooling van Microsoft Word. Om deze beperkingen te omzeilen, zijn een aantal layoutframeworks ontwikkeld om het werken met layout eenvoudiger te maken. In 2011 bracht Twitter Bootstrap uit, een van de meer populaire lay-outoplossingen. Bootstrap heeft achter de schermen een heleboel berekeningen uitgevoerd, zodat ontwikkelaars vereenvoudigde code kunnen gebruiken om lay-outs op een 12-koloms raster te implementeren.

Rasters op het web waren niet alleen ontwerprichtlijnen voor de lay-out, maar daadwerkelijke code die de plaatsing van elementen in viewports en breekpunten zowel beperkte als uitvoerde. CSS Grid kwam uit begin 2017. Deze technologie verwijdert veel van de beperkingen die tot nu toe in CSS bestonden. Maar CSS Grid is niet alleen een hulpmiddel voor front-end ontwikkelaars; ontwerpers kunnen nu op nieuwe manieren nadenken over de weblay-out. CSS Grid maakt het gemakkelijk om rasterlijnen te maken met behulp van CSS. Grid is een mooie manier om kolommen en rijen te plaatsen. Het raster met 12 kolommen dat Bootstrap populair maakte, was destijds een slimme oplossing, maar CSS Grid biedt ons veel meer lay-outopties. Met CSS Grid kunnen we snel aangepaste rasters maken voor onze projecten. Dit betekent dat we niet met 12 kolommen hoeven te beginnen - we kunnen er vijf of acht hebben. We kunnen rasters maken die de plaatsing van elementen zowel verticaal als horizontaal beter regelen. Dit alles brengt klassiek grafisch ontwerp en art direction terug naar webdesign. CSS Grid maakt het gemakkelijk om nieuwe rasters te definiëren op elk breekpunt (@media) Grid-template-areas bewaart al uw lay-outcode op één plaats. Met CSS Grid kan de inhoud de paginalay-out bepalen in plaats van de inhoud te dwingen in een bestaande rasterstructuur te passen.

BASIS HTML & CSS // GOUBERT

9 . 2 S t a rte n m e t C S S G ri d De taal van CSS Grid is ongelooflijk eenvoudig, dus is het niet nodig om cryptische klassennamen te leren die populair waren bij Bootstrap, zoals col-sm-8. Er zijn twee hoofdstappen om een pagina in te stellen met behulp van CSS Grid: definieer de rasterbanen en plaats vervolgens elementen in die gebieden.

9.2.1 De rasterbanen definiëren Om het raster in te stellen, maken we een parent-element dat alle HTML-elementen in het raster zal bevatten. Dit bovenliggende element is meestal een <div> met een klassenaam van grid-container of container. Om deze container als het raster te identificeren, gebruiken we display: grid in de CSS.

Nu de rastercontainer op de pagina staat, willen we het raster in kolommen gaan verdelen. Om kolommen te definiëren gebruiken we grid-template-columns, en om de gaten tussen kolommen te definiëren gebruiken we grid-column-gap. Het aantal kolommen op de pagina wordt bepaald door het aantal waarden dat is gedefinieerd in grid-template-columns (we kunnen in het onderstaande voorbeeld zien dat er drie waarden zijn die zich vertalen in drie kolommen).

In een meer traditioneel grafisch ontwerp wordt de kolombreedte bepaald door een berekening van het papierformaat en de typografie. Omdat webdesign nooit tot een specifieke breedte wordt beperkt, is soms een kolombreedte ingesteld op procent de beste keuze. CSS Grid accepteert percentages, pixels en fractionele eenheden bij het definiëren van kolombreedtes. Je bent waarschijnlijk bekend met pixel- en percentagewaarden, maar ik wil even de tijd nemen om fractionele eenheden, die nieuw zijn bij CSS Grid, te benadrukken. Fractionele eenheden, of frs, verwerken wiskundige breuken door de resterende beschikbare ruimte perfect te verdelen. Als we

BASIS HTML & CSS // GOUBERT

bijvoorbeeld willen dat een raster drie kolommen zonder tussenruimte heeft, heeft het percentage een afgeronde decimale waarde zoals: grid-template-columns: 33,33% 33,33% 33,33%; Breukeenheden halen het giswerk weg en we kunnen dus nu dit schrijven: grid-template-columns: 1fr 1fr 1fr. Kolommen toevoegen of verhoudingen aanpassen is eenvoudig.Verhoog of verlaag eenvoudig de getallen, zoals dit: grid-template-columns: 1fr 2fr 1fr. CSS Grid accepteert ook auto voor column width, wat een enorm krachtig hulpmiddel is. auto zal de kolom uitbreiden tot de maximaal beschikbare breedte, zoals gedefinieerd door de omringende kolommen. Als grid-template-columns bijvoorbeeld 100px automatisch 100px is en de pagina 500 pixels breed is, neemt de automatische sectie de resterende 300 pixels in beslag. Als we fijnere controle over het bereik willen, kunnen we ook minmax() gebruiken, die de kolombreedte beperkt tot de bereiken die we specificeren, zoals minmax(550px,800px).

We hebben kolommen gemaakt, maar CSS Grid staat ook een rijdefinitie toe. Rows kunnen geweldig zijn voor fijnere controle over het verticale ritme van de pagina en worden op exact dezelfde manier gemaakt als grid-template-kolommen met behulp van grid-template-rows and grid-row-gap.

In de functie repeat()hierboven is het eerste nummer (in dit geval 4) het aantal keren dat het tweede nummer (150 px) moet worden herhaald.

BASIS HTML & CSS // GOUBERT

9.2.2 Elementen in het raster plaatsen O.K., rasters zijn geweldig, maar ze zijn onzichtbaar tenzij ze inhoud bevatten. Om ervoor te zorgen dat rasters op de pagina verschijnen, moeten we elementen in elk rasterspoor plaatsen. Grid plaatst impliciet items. Maar we willen leren hoe we items expliciet kunnen plaatsen voor meer controle. Hier zijn twee benaderingen voor. Rasterlijnen Een benadering is om de rasterlijnen te identificeren waarin een element zou moeten leven. Omdat tracks de ruimte tussen regels zijn, geeft deze benadering de tracks aan waarin het element zal leven. Als we bijvoorbeeld een element in het derde kolomspoor wilden plaatsen, kunnen we CSS Grid vertellen dat het element begint bij de derde rasterlijn en eindigt bij de laatste rasterlijn. Dit zou er ongeveer zo uitzien:

Deze aanpak is belangrijk om te leren, maar het is vooral handig als we proberen meerdere elementen in hetzelfde raster te plaatsen. Grid-template-areas De andere benadering, die de voorkeur heeft, specificeert plaatsing met behulp van grid-template-areas. Hiermee kunnen we specifieke gebieden benoemen waar elementen in het raster moeten worden weergegeven, maar het belangrijkste is dat we al onze lay-outcode op een nette plaats kunnen bewaren. Om dit in te stellen, heeft elk element eerst een grid-area nodig in zijn CSS, waarnaar dan kan worden verwezen in de bovenliggende containerdeclaratie. Zodra deze elementen een naam hebben gekregen, kunnen we de namen gebruiken om de lay-out visueel in de bovenliggende parent gridcontainer te rangschikken. In het onderstaande voorbeeld wordt de afbeelding toegewezen aan de eerste kolom en tweede kolom met behulp van de syntaxis â&#x20AC;&#x153;image image .â&#x20AC;?. Image herhalen vertelt de CSS dat de afbeelding de eerste en tweede kolom moet omvatten. Het . vertelt de CSS dat gebied leeg te houden. Elke nieuwe regel in grid-template-areas declaratie correleert met een nieuwe row in het ontwerp. Op de tweede regel vertelt text text aan de CSS dat de tweede rij in de eerste kolom text hebben en dat het tekstelement de tweede en derde kolom overspant.

BASIS HTML & CSS // GOUBERT

Wat nog beter is met deze aanpak is dat het gemakkelijk is om onze lay-out snel te herschikken zonder de elementen te hernoemen of de HTML te verplaatsen. We hoeven alleen de plaatsing van de namen in de verklaring van het grid-template-area om te schakelen om de lay-out van elementen ingrijpend te veranderen.

Deze technieken werken allemaal responsief, en dit is waar CSS Grid schittert. Om een lay-out voor een kleiner breekpunt te definiĂŤren, hoeven we alleen ons raster opnieuw te definiĂŤren en de eigenschappen in raster-sjabloongebieden te reorganiseren.

@media only screen and (max-width: 735px) { .grid-container { margin: 2% 1% 0 1%; display: grid; grid-template-columns: 1fr 4fr; grid-column-gap: 10px; grid-row-gap: 10px; grid-template-areas: ". caption" "image image" "text text"; } }

Het kleinere breekpunt rechts definieert een nieuw raster met twee kolommen. Door items in het raster te plaatsen met behulp van raster-sjabloongebieden, kunnen we onze lay-out daadwerkelijk in tekst zien. Het voelt net aan als designer ASCII-kunst... De dagen van col-lg-2 en col-sm-12 zijn voorbij. We kunnen onze lay-out op elk breekpunt reorganiseren, en grid-template-areas betekent dat ons ontwerp zichtbaar is in de code, op alle breekpunten.

BASIS HTML & CSS // GOUBERT

9 . 3 E e n sta pj e ve rde r m e t CSS-g rid 9.3.1 CSS-Grid-functies en nieuwe waarden Repeat Functie Wanneer je een aantal cellen met dezelfde grootte herhaalt, kun je de herhaalfunctie gebruiken. De herhaalfunctie ontvangt 2 parameters, de eerste parameter is het aantal herhalingen, de tweede parameter vertegenwoordigt de grootte van een enkele rij / kolom of de grootte van meerdere rijen / kolommen die moeten worden herhaald. .container { grid-template-columns: 1fr 1fr 1fr; /* Is het zelfde als: */ grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr = repeat(3, 1fr) */ }

MinMax-functie â&#x20AC;&#x153;MinMaxâ&#x20AC;? is een veelgebruikte, ingebouwde functie van het CSS-grid. Het wordt gebruikt om een breedtebereik (rastercel) of hoogte (rasterrij) in te stellen. De functie accepteert twee parameters, die niet verrassend de minimum- en maximumwaarden vertegenwoordigen. .container { display: grid; grid-template-columns: 200px minmax(200px , auto) 200px; }

De functie werkt het beste met een strikte minimumwaarde en een open, flexibele maximumwaarde, omdat het standaardgedrag van het raster zich tot 100 procent uitstrekt. Maar wat als je wilt dat het wordt uitgerekt volgens de inhoud, tot een maximale waarde? Maak kennis met nog een nieuwe functie, de functie fit-content().

BASIS HTML & CSS // GOUBERT

Fit-Content-functie De fit-content-functie accepteert één parameter, de maximale waarde. Een rasterkolom / rij met deze eigenschapset neemt nog steeds zo weinig ruimte in als nodig is, afhankelijk van de inhoud, maar niet meer dan de maximale waarde. De functie fit-content () is vergelijkbaar met de functie minmax (), met een minimumwaarde van 0. Eén belangrijk verschil: de minmax () neemt waarschijnlijk de maximale toegestane ruimte in beslag, terwijl de fit-content niet meer ruimte gebruikt dan nodig. .container { display: grid; grid-template-columns: auto fit-content(800px) auto; }

Min-Content & Max-Content Min-Content en Max-Content zijn geen nieuwe functies, maar nieuwe waarden die kunnen worden gebruikt in CSS, niet alleen voor CSS-grid-doeleinden. Hoe werkt het? Zoals de naam al aangeeft, neemt de kolom, als je de waarde min-content gebruikt, de minimale ruimte in volgens de inhoud, en als je de waarde max-content gebruikt, neemt de kolom de maximale ruimte in, afhankelijk van de behoefte. .container { display:grid; grid-template-columns:auto min-content auto; /* OF */ grid-template-columns:auto max-content auto; }

min-content

max-content

BASIS HTML & CSS // GOUBERT

Dynamisch aantal kolommen op een rij Soms wil je een dynamisch aantal elementen, afhankelijk van de breedte van de container: met de repeat-functie + de twee nieuwe waarden auto-fit en auto-fill, kunt je dit doen. Auto-fill vult de rij met zoveel kolommen als mogelijk of nodig is. Auto-fit past de momenteel beschikbare kolommen in de ruimte door ze uit te breiden zodat ze alle beschikbare ruimte innemen. Auto-fit en auto-fill doen beide bijna hetzelfde, behalve als je minder dan het maximale aantal items hebt dat in ĂŠĂŠn rij past en je werkt met de functie minmax(). .container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px , 1fr)); /* dit is niet gelijk */ grid-template-columns: repeat(auto-fit, minmax(300px , 1fr)); }

auto-fill

auto-fit

Met deze waarden kunnen we een responsief ontwerp maken zonder breekpunten te gebruiken:

Het aantal kolommen op een rij hangt af van de schermgrootte.

BASIS HTML & CSS // GOUBERT

9.3.2 Individuele plaatsing en controle Nadat elementen in een grid track of area zijn geplaatst, kunnen we hun verticale en horizontale uitlijning verder aanpassen - vergelijkbaar met hoe uitlijningsbesturing werkt in ontwerpsoftware, zoals bijvoorbeeld InDesign. Align-self en justify-self kunnen zo op de child-elementen worden toegepast

9.3.3 Grids in Grids op Grids CSS Grid kan meerdere keren op een pagina worden gebruikt. Omdat rasters alleen containers met elementen zijn, is er geen reden waarom ze niet in elkaar kunnen worden genest of op elkaar kunnen worden gestapeld. De volgende versie gepland voor CSS Grid is het toevoegen van Subgrids voor krachtigere nestfuncties. In de tussentijd is de huidige specificatie voor nest- en stapelroosters nog steeds geweldig voor verschillende instanties. Als een deel op een pagina bijvoorbeeld een heel andere plaatsing van elementen vereist dan de rest van de pagina, kunnen we een genest raster gebruiken. Dit stelt ons in staat om op dit moment nauwkeurig te zijn met de lay-out, zonder het hoofdraster op de pagina te ingewikkeld te maken. De techniek is vooral handig als het hoofdraster nog steeds actief is, omdat we geen geneste ontwerpen verliezen door wijzigingen in het hoofdraster aan te brengen (zoals het toevoegen van een andere kolom.)

BASIS HTML & CSS // GOUBERT

De linkerafbeelding toont een rastercontainer die alle lay-outbeslissingen afhandelt, terwijl de rechterafbeelding laat zien hoe een genest raster kan worden gebruikt om een meer gecompliceerd layoutdeel op de pagina te verwerken. Elk zijn geldige benaderingen, maar soms kan een genest raster zowel conceptueel als in de code schoner zijn. Op dezelfde manier kunnen we rasters stapelen. Dit is een geweldige benadering als het ontwerp een visuele onderbreking van het raster probeert te bereiken dat overal op de pagina terugkeert.

De linkerafbeelding toont een raster dat alle lay-outbeslissingen verwerkt, terwijl de rechterafbeelding laat zien hoe een gestapeld raster een heel ander lay-outdeel op de pagina kan verwerken. Elk zijn geldige benaderingen, maar soms kan een gestapeld raster zowel conceptueel als in de code schoner zijn.

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Variaties in gridlayout 1 0 . 1 I n l eidi ng 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 en het gedrag 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.

Gridlayout laat ons toe een wireframe als werktekening te maken die we kunnen gebruiken in de codering van de website. De scheiding tussen ontwerp en coderig wordt kleiner. Via de wireframes kan je al aangeven hoe een layout zich gedraagd in een browser. Met Gridlayout kan je zes gedragingen maken: • • • • •

fixed fluid responsive expliciet overlappend

BASIS HTML & CSS // GOUBERT

1 0 . 2 . F i xe d HTML

CSS

<section class=”fixed”> <h1>Fixed</h1> <ul class=”grid-container”> <li> <img src=”bestanden/beeld.png” alt=””> </li>

* { box-sizing: border-box;}

</ul> </section>

html { font-family: Helvetica; font-size: 100%;} .fixed ul { display: grid; grid-template-columns: repeat(4, 100px); grid-gap: 4px; width: calc(400px + 12px + 4.4rem);} img { display: block; width: 100%;} ul { list-style: none; margin: 0 0 0 2rem; padding: 2.2rem; border: 1px solid black;}

Je kan een layout maken met vaste maten. de breedte, grid-gap, etc. staan vast. Alles is op voorhand bepaald. Dit heeft voordelen en nadelen. Misschien komt dit beter tot zijn recht in een ‘subgrid’. De width van de ul is een optelling van: 4x de breedte van een column ( = 400px) 3x de grid-gap (3 x 4px = 12px) 2x de padding (2 x 2.2em = 4.4em)

BASIS HTML & CSS // GOUBERT

1 0 . 3 F l ui d HTML

CSS

<section class=”fluid”> <h1>Fluid</h1> <ul class=”grid-container”> <li> <img src=”bestanden/beeld.png” alt=””> </li>

* { box-sizing: border-box;}

.fluid ul { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 0.25rem; max-width: 100%; }

</ul> </section>

html { font-family: Helvetica; font-size: 100%;}

img { display: block; width: 100%;} ul { list-style: none; margin: 0 0 0 2rem; padding: 2.2rem; border: 1px solid black;}

De gridcontainer past zich aan aan de breedte van het venster. Er is geen wrap van de afbeeldingen. Ze blijven vast in het grid. Het grid en de afbeeldingen worden enkel geschaald.

BASIS HTML & CSS // GOUBERT

1 0 . 4 Re s pons ive HTML

CSS

<section class=”responsive”> <h1>responsive</h1> <ul class=”grid-container”> <li> <img src=”bestanden/beeld.png” alt=””> </li>

* { box-sizing: border-box;}

</ul> </section>

html { font-family: Helvetica; font-size: 100%;} .responsive ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 0.25rem; } img { display: block; width: 100%;} ul { list-style: none; margin: 0 0 0 2rem; padding: 2.2rem; border: 1px solid black;}

De gridlayout past zich aan aan de breedte van het venster. Auto-fit geeft vrij spel, maar de minmax zorgt er toch voor dat elke kolom minstens 120px breed is. De afbeeldingen passen zich aan de kolommen aan door hun 100% breedte.

BASIS HTML & CSS // GOUBERT

1 0 . 5 E x p li ci e t ge pl aats t HTML

CSS

<section class=”explicitly-placed”> <h1>explicitly</h1> <ul class=”grid-container”> <li> <img src=”bestanden/beeld.png” alt=””> </li>

* { box-sizing: border-box;}

</ul> </section>

html { font-family: Helvetica; font-size: 100%;} .explicitly-placed ul { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 600px; } .explicitly-placed li:nth-child(1) { grid-column: 2 / 3; grid-row: 1 / 2; } .explicitly-placed li:nth-child(2) { grid-column: 4 / 5; grid-row: 2 / 3; } .explicitly-placed li:nth-child(3) { grid-column: 3 / 4; grid-row: 3 / 4; } .explicitly-placed li:nth-child(4) { grid-column: 1 / 2; grid-row: 5 / 6; } .explicitly-placed li:nth-child(5) { grid-column: 4 / 5; grid-row: 5 / 6; } img { display: block; width: 100%;} ul { list-style: none; margin: 0 0 0 2rem; padding: 2.2rem; border: 1px solid black;}

Het expliciete raster is het rooster dat je maakt met behulp van grid-templatecolumns of grid-templaterows.

Elementen worden expliciet geplaatst via grid-colum en grid-row op een bepaalde plaats in het grid. Met Firefox Developer Edition kan je de grid-lijnen voorvertonen.

BASIS HTML & CSS // GOUBERT

1 0 . 6 O ve rl a ppe nd e n rati o-g e ba seerde lijst HTML

CSS

<section class=”overlapping”> <h1>overlapping</h1> <ul class=”grid-container”> <li> <img src=”bestanden/beeld.png” alt=””> </li>

* { box-sizing: border-box;}

</ul> </section>

html { font-family: Helvetica; font-size: 100%;} .overlapping ul { display: grid; grid-template-columns: 4fr 2fr 2fr 3fr 6fr; max-width: 600px; } .overlapping li:nth-child(1) { grid-row: 1 / span 2; grid-column: 1 / span 2; z-index: 2; } .overlapping li:nth-child(2) { grid-row: 2 / span 4; grid-column: 2 / span 3; }

Op een webpagina is alles gescheiden. Je kan moeilijk elementen over mekaar plaatsen. De enige mogelijkheid was position: absolute. Als je een grote totale layout wou maken was het bijna onmogelijk omdat je niet goed wist hoe groot alles werd naar mate de pagina schaalde en wat de lengte van de layout werd. CSS-grid lost dit nu op.

.overlapping li:nth-child(3) { grid-row: 4 / span 3; grid-column: 4 / span 2; z-index: 2; } img { display: block; width: 100%;} ul { list-style: none; margin: 0 0 0 2rem; padding: 2.2rem; border: 1px solid black;} img { opacity: 0.5;}

In dit voorbeeld hebben we vijf kolommen die we hebben opgebouwd met fractions. Ze nemen dus 4, 2, 2, 3 en 6fr ruimte in. Dit is dus een ratiogebaseerde lijst. We maken variaties van een ratio, de fractions, in plaats van alle kolommen even groot te maken. We hebben geen rows gedefinieerd, dat gebeurd automatisch. Via span kunnen we bepalen hoeveel rows en columns elke afbeelding moet overspannen. Row 3 is dichtgeslagen (collapse) omdat er niets in staat. De tweede afbeelding overspant niet 4 rijen omdat de afbeelding niet hoog genoeg is. De afbeelding wordt in verhouding geschaald t.o.v. de gegeven breedte.

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Flexbox 1 1 . 1 O m s chri j ving fl e x box Flexible boxes of flexbox is een nieuwe layoutmethode in CSS3. Het gebruik van flexbox verzekert dat elementen zich voorspelbaar gedragen wanneer de layout zich moet aanpassen aan verschilende schermformaten en verschillende toestellen. Voor vele toepassingen biedt Flexbox een verbetering ten op zichte van het box-model omdat het niet gebruik maakt van float. Ook zijn er geen problemen met de margin’s van de container in combinatie met de margin’s van zijn inhoud.

1 1 . 2 F l e x box conce pte n Flexbox bestaat uit flex-containers en flex-items.

Bij het gebruik van een flexboxlayout geef je de container de mogelijkheid om zijn kinderen aan te passen qua grootte, hoogte, volgorde en de manier waarop ze de beschikbare ruimte opvullen. Een flexcontainer vergroot zijn kinderen (items) om de beschikbare vrije ruimte op te vullen of verkleint ze om ze er in te passen. Een flex container maak je door de display property van een element op flex te zetten (gerenderd als een block-element) of inline-flex (gerendered as inline-element). display: flex; display: inline-flex;

Binnen een flex-container zijn er één of meerdere flex-items. Opgelet: alles buiten een flex-container en binnen een flex-item is gerenderd als gewoonlijk. Flexbox bepaalt enkel hoe flex-items worden gelayout binnen een flex-container. Flex-items worden binnen een flex-container gepositioneerd langs een flex-line. Standaard is er slechts één flex-line per flex-container.

BASIS HTML & CSS // GOUBERT

Items worden gelayout volgens een main axis (van main-start tot main-end) of cross-axis (van crossstart tot cross-end). De terminologie is Engels. • • • • • •

main-axis: de main axis van een flexcontainer is de hoofdas waar langs flex items zijn gelayout. Opgelet: dit is niet noodzakelijk horizontaal; dit hangt af van de flex- direction property (zie verder). main-start | main-end: de flex-items zijn geplaatst binnen de container. Ze starten van af de main-start en gaan tot aan main-end. main-size: de breedte en hoogte van elk flex-item dat in de hoofdafmetingen voorkomt. De hoofdafmetingen van flex-items zijn of de ‘height’ of ‘width’ eigenschap, om het even welke is gedefinieerd als hoofdeigenschap. cross axis: de as loodrecht op de main axis (hoofdas). Zijn direction (richting) hangt af van de main axis. cross-start | cross-end: flex-lijnen zijn gevuld met items in de container die starten van af de cross-start kant van de flex-container tot aan de cross-end zijde. cross-size: de breedte of hoogte van een flex-item is de cross-size. De cross-size property is gelijk welke ‘width’ of ‘height’ binnen de cross dimension.

Opgelet: de main-axis wordt vertikaal als je flex-direction op column zet (zie verder).

BASIS HTML & CSS // GOUBERT

Het volgende voorbeeld toont drie flex-items. Ze zijn default (standaard) gepositioneerd: langs de horizontale hoofdas of (main-axis) flex-line, van links naar rechts. <!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } </style> </head> <body> <div class=”flex-container”> <div class=”flex-item”>flex item 1</div> <div class=”flex-item”>flex item 2</div> <div class=”flex-item”>flex item 3</div> </div> </body> </html>

Dit geeft in de browser:

flex item 1

flex item 2

flex item 3

BASIS HTML & CSS // GOUBERT

1 1 . 3 De a f m e ting va n e e n flex-item (Flex-ba sis) Opgelet! Dit hoofdstuk gaat uit van een situatie met flex-direction:row. Van het ogenblik dat je flex-direction:column gebruikt wordt width omgeruild voor height en staat flex-basis voor de hoogte van het flex-element.

11.3.1 Verschil tussen Width en Flex-basis De formule voor de afmeting van flex-items: inhoud => width => flex-basis (beperkt door max en min-width) Om de grootte te bepalen van een flex-item telt enkel de flex-basis waarde, beperkt door minwidth en max-width. Als er geen flex-basis is bepaald (in je css geschreven) dan valt de flex-basis terug op de waarde van de width. Als er geen width is bepaald, dan valt de flex-basis terug op de berekende waarde van de inhoud van de flex-items. container{ display: flex; width: 1000px; }

Laten we de items die in de container komen 200 x 200px grootte geven. item{ width: 200px; height: 200px; }

Er is genoeg plaats om de items te plaatsen in de container:

In dit voorbeeld is de flex-basis niet gespecifieerd, daardoor is die teruggevallen op de standaardwaarde flex-basis:auto, dat op zijn beurt tergvalt op de width (200px)

BASIS HTML & CSS // GOUBERT

11.3.2 Bepalen van een Flex Basis Kijk wat er gebeurt als we een flex-basis bepalen op items die reeds een width hebben. We bouwen verder op het voorbeeld van 9.2.1. item{ width: 30px; flex-basis: 250px; }

De width van de boxen wordt genegeerd als we een flex-basis instellen. We hoeven dit dus niet meer te schrijven: item{ flex-basis: 250px; } De uiteindelijke flex-basis voor elk item is 250px. We hebben genoeg plaats voor alle items:

Herinner de formule: inhoud => width => flex-basis (beperkt door max en min-width)

BASIS HTML & CSS // GOUBERT

11.3.3 Flex-basis is beperkt door max-width De uiteindelijke flex-basis waarde is beperkt door zowel de min-width als de max-width van elk item. Een voorbeeld: item{ flex-basis: 250px; max-width: 100px; }

Ondanks het feit dat de flex-basis is ingesteld op 250px, wordt hij beperkt door de limiet van de max-width. Onze uiteindelijke flex-basis is in dit geval 100px en de items passen perfect in de container.

Als we vervolgens een min-width plaatsen krijgen we het volgende: item{ flex-basis: 100px; min-width: 250px; }

BASIS HTML & CSS // GOUBERT

Ondanks dat we flex-basis 100px hebben gegeven kon deze niet kleiner worden omwille van de min-width beperking. De uiteindelijke flex-basis is 250px en de flex-items passen er perfect in.

11.3.4 Conclusie: wat is Flexbasis? Op width wordt teruggevallen wanneer flexbasis niet is gedefiniĂŤerd. Min-width en max-width zijn maar de boven- en ondergrens voor de uiteindelijke flex-basis. In alle illustraties in hoofdstuk 9.6 zijn de flex-items twee maal gevisualiseerd, alvorens ze getoond worden in een flex container en er na. Dit is om aan te tonen wat flex-basis is: De grootte van flex-items alvorens ze worden geplaatst in de flex container. Het is de ideale grootte van de items die echter niet is gegarandeerd.Van zodra de browser de items in de container plaatst verandert alles. In sommige van de voorbeelden past alles precies omdat de som van alle flex-basis-waarden van alle items de exacte width is van de container. Dat is prima, maar soms is er niet voldoende plaats.

11.3.5 Te weinig plaats, flex-shrink Als we een container van 1000px hebben die niet alle items van 200px flex-basis kan bevatten:

Voor de flex-elementen in de container worden geplaatst zijn ze samen 1600px groot, maar de container heeft maar voor 1000px plaats. Als er niet genoeg plaats beschikbaar is voor alle flex-items zullen standaard krimpen (flex-shrink) om te passen:

Alle items zijn 200px breed, maar omdat er niet genoeg plaats is zijn ze evenredig gekrompen (125px elk) tot ze passen. Deze krimp-schaal is wat flex-shrink betekent. Je kan de standaard waarde overschrijven om specifieke items sneller (hogere ratio) of trager (lagere ratio) of niet (waarde 0) te krimpen.

BASIS HTML & CSS // GOUBERT

11.3.6 Genoeg plaats, flex-grow Meestal hebben we genoeg plaats om alle flex-items te plaatsen binnen de container. item{ flex-basis: 100px; }

Dan kunnen we flex-items laten groeien om de volledige beschikbare ruimte op te vullen wanneer ze geplaatst worden in de flex-container. Hier voor dient de flex-grow property. De standaard waarde is 0. Dit betekent groei (grow) niet. Als we elk item willen groeien om de volledige container op te vullen zetten we op elk item flex-grow: 1(ze groeien allemaal op de zelfde ratio): item{ flex-basis: 100px; flex-grow: 1; }

11.3.7 Flex - shorthand De flex-property is de shorthand voor flex-grow, flex-shrink, flex-basis. Het bepaalt de lengte van het flex-item, relatief ten opzichte van de overige flex-items binnen dezelfde container. In het volgende voorbeeld zal het eerste flex-item 2/4 gebruiken van de vrije ruimte. de andere twee flex-items gebruiken 1/4 van de vrije ruimte: .flex-item { background-color: cornflowerblue; margin: 10px; } .item1 { flex: 2; } .item2 { flex: 1;

BASIS HTML & CSS // GOUBERT

} .item3 { flex: 1; }

flex-item 1

flex-item 2

flex-item 3

Merk op dat dit enkel geldt bij een flex-wrap:nowrap, dus enkel bij een enkelvoudige lijn. Als je dit ook wil toepassen op meerdere lijnen moet je de breedte van het flex-item meegeven. Je gebruikt dan specifiek de flex-basis, in combinatie met een waarde in %.

flex-item 1

flex-item 4

flex-item 2

flex-item 5

flex-item 3

flex-item 6

#container { display: flex; flex-wrap: wrap; }

BASIS HTML & CSS // GOUBERT

.item1, .item5 { flex-basis: 50%; flex-grow: 1; flex-shrink: 1; /* shorthand - verkorte schrijfwijze flex: 1 50%; */ } .item2, .item3,.item4, .item6 { flex-basis: 25%; flex-grow: 1; flex-shrink: 1; /* shorthand flex: 1 25%; */ }

BASIS HTML & CSS // GOUBERT

1 1 . 4 F l e x box conta ine r properties 11.4.1 Flex direction De flex-direction eigenschap bepaalt de richting van de flexibele items binnen de flex-container. de standaard waarde van de flex-direction is row (left-to-right, top-to-bottom). De andere values zijn: • row-reverse - als de schrijfwijze (direction) left to right is, zullen de flex-items right to left geschikt zijn. • column - als het schrijfsysteem horizontaal is zullen de flex-items verticaal gelayout zijn. • column-reverse - zelfde als column, maar omgekeerd (reverse).

Het volgende voorbeeld toont het gebruik van de row-reverse waarde: .flex-container { display: flex; flex-direction: row-reverse; width: 400px; height: 250px; background-color: lightgrey; }

flex item 3

flex item 2

flex item 1

BASIS HTML & CSS // GOUBERT

11.4.2 De ‘justify-content’ property The justify-content property aligneert de flexible items wanneer ze niet alle beschikbare ruimte gebruiken op de main-axis. Als je “flex-direction: column” schrijft wordt de main-axis verticaal en lijn je via “justify-content” verticaal uit. De mogelijke waarden zijn: • flex-start - standaard waarde. Items worden gepositioneerd vanaf het begin van de container • flex-end - Items worden gepositioneerd vanaf het einde van de container • center - Items worden gepositioneerd in het midden van de container • space-between - Items worden gepositioneerd met ruimte er tussen • space-around - Items worden gepositioneerd met ruimte er voor, er tussen en er achter

center

space-between

space-around

BASIS HTML & CSS // GOUBERT

Het volgende voorbeeld toont het gebruik van de flex-end waarde: .flex-container { display: flex; justify-content: flex-end; width: 500px; height: 250px; background-color: lightgrey; }

flex item 1

flex item 2

flex item 3

11.4.3 De ‘align-items’ property De align-items property lijnt de flexible items binnen de container verticaal uit als de items niet alle beschikbare ruimte gebruiken op deze verticale as. Als je “flex-direction: column” schrijft wordt de main-axis verticaal en lijn je via “align-items” horizontaal uit. De mogelijke waarden zijn: • • • • •

stretch - standaard waarde. Items worden uitgerokken (stretched) tot ze passen binnen de container flex-start - items worden bovenaan binnen de container gepositioneerd flex-end - items worden onderaan binnen de container gepositioneerd center - items worden in het midden van de container gepositioneerd (verticaal) baseline - items worden op de baseline van de container gepositioneerd

BASIS HTML & CSS // GOUBERT

Het volgende voorbeeld toont het gebruik van de stretch-waarde (dit is de standaard waarde): .flex-container { display: flex; align-items: stretch; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; margin: 10px; /* de tussenruimtes tussen de flex-items en errond */ }

flex item 1

flex item 2

flex item 3

BASIS HTML & CSS // GOUBERT

11.4.4 De ‘flex-wrap’ property De flex-wrap property bepaalt of de flex-items op het einde van flex-lijn mogen verder geplaatst worden op een volgende lijn onder de huidige. Net zoals tekstterugloop (in het Engels text-wrap). De mogelijke waarden zijn: • • •

nowrap - standaard waarde. De flexible items doen geen wrap. Ze zijn geforceerd op 1 lijn. wrap - de flexible items doen wrap indien nodig wrap-reverse - de flexible items doen wrap, indien nodig, in omgekeerde zin

De breedte van de flex-items wordt automatisch aangepast, in dit geval verkleint.Het volgende voorbeeld toont het gebruik van de wrap waarde. .flex-container { display: flex; flex-wrap: wrap; width: 400px; height: 250px; background-color: lightgrey; }

Flex-items mogen in de juiste richting van de rode pijl onder mekaar.

flex item 1

flex item 2

flex item 3

BASIS HTML & CSS // GOUBERT

11.4.5 De ‘align-content’ Property De align-content property past het gedrag aan van de flex-wrap property. Het is gelijkaardig aan de align-items, maar in plaats van flex items uit te lijnen, lijnt het flex lines uit. Het lijnt dus de groep flex items in hun geheel uit. De volgende waarden zijn mogelijk: • • • • • •

stretch - standaard waarde. De lijnen rekken uit tot ze de gehele overgebleven ruimte in nemen flex-start - Lijnen zijn geplaatst tegen de start van de flex container flex-end - Lijnen zijn geplaatst tegen het einde van de flex container center - Lijnen zijn gecentreerd binnen de flex container space-between - Lijnen zijn even verdeeld binnen de flex container space-around - Lijnen zijn even verdeeld binnen de flex container, met halve waarden aan beide uiteinden

BASIS HTML & CSS // GOUBERT

Het volgende voorbeeld toont het gebruik van de center waarde: .flex-container { display: flex; flex-wrap: wrap; align-content: center; width: 300px; height: 300px; background-color: lightgrey; }

flex item 1

flex item 2

flex item 3

1 1 . 5 F l e x Ite m Prope rtie s 11.5.1 Volgorde van de items Standaard worden de flex items in de volgorde geplaatst zoals ze voorkomen in de html-code. Met de order property kan de je de volgorde waarin ze vooorkomen binnen de container aanpassen.

BASIS HTML & CSS // GOUBERT

Een voorbeeld: .first { order: -1; } <div class=”flex-container”> <div class=”flex-item”>flex item 1</div> <div class=”flex-item first”>flex item 2</div> <div class=”flex-item”>flex item 3</div> </div>

flex item 2

flex item 1

flex item 3

11.5.2 Margin Als je de margin op margin: auto; zet absorbeert deze alle extra ruimte. Dit kan gebruikt worden om flex-items weg te drukken in andere posities. In het volgende voorbeeld zetten we margin-right:auto; op het eerste flex-item. Dit maakt dat de extra ruimte wordt geabsorbeerd rechts van dat element. .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: 10px; } .flex-item:first-child { margin-right: auto; }

flex item 1

flex item 2

flex item 3

BASIS HTML & CSS // GOUBERT

11.5.3 Perfect centreren In het volgende voobeeld lossen we een dagelijks probleem op: perfect centreren. Dit is eenvoudig met flexbox. De margin op margin:auto; zetten plaatst het item perfect in het midden, horizontaal en verticaal. .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: auto; }

flex item 1

11.5.4 Align-self Met align-self kan je de default uitlijning (of diegene gespecifieerd door align-items) voor individuele flex-items overschrijven. Het heeft dezelfde mogelijke waarden als de align-items property.

BASIS HTML & CSS // GOUBERT

In het volgende voorbeeld gebruiken we de verschillende align-self waarden voor elk item: .flex-item { background-color: cornflowerblue; width: 60px; min-height: 100px; margin: 10px; } .item1 { align-self: flex-start; } .item2 { align-self: flex-end; } .item3 { align-self: center; } .item4 { align-self: baseline; } .item5 { align-self: stretch; }

flex-start

baseline

stretch

center

flex-end

BASIS HTML & CSS // GOUBERT

1 1 . 6 We rkw ij ze voor he t ge bruik v a n Flexbox Stap 1: horizontaal of verticaal? De flex-direction eigenschap bepaalt de richting van de flexibele items binnen de flex-container. de standaard waarde van de flex-direction is row (horizontaal). flex-direction: row; /* horizontaal */ flex-direction: column; /* verticaal */ Merk op dat bij column de main-axis verticaal en de cross-axis horizontaal wordt.

Stap 2: bepalen van de afmeting van de flex-elementen De formule voor de afmeting van flex-items: inhoud => width of height => flex-basis (beperkt door max en min-width of height) Gebruik bij voorkeur flex-basis om de breedte van een flex-element te bepalen. Bij flexdirection:column wordt dit de hoogte. De eigenschap geeft de initiĂŤle hoofdgrootte van het flex-item aan, voordat vrije ruimte wordt verdeeld volgens de flexfactoren flex-shrink en grow. flex-basis: auto;

/* standaard waarde, de lengte(row) of hoogte(column) is gelijk aan de lengte/hoogte van het flex-item. Als er voor het item geen afmeting is opgegeven, is de afmeting afhankelijk van de inhoud */

flex-basis: 25%; /* refereert naar binnenste afmeting van de parent, de flex-container */ Flex-basis: 200px;

Stap 3: lengte/hoogte aanpassen met verhoudingen t.o.v. overige flex-elementen Als we een container hebben die niet alle flex-items kan bevatten gebruiken we flex-shrink op elk individueel flex-element langs de main-axis. flex-shrink: 0; flex-shrink: 1;

/* standaard waarde, verandert niets aan flex-basis */ /* flex-basis staat in een verhouding van 1 t.o.v. de andere flex-elementen hun flex-shrink waarde */

Idem voor flex-grow.

Stap 4: aligneren Langs de main-axis:

justify-content: ...

Langs de cross-axis: Indien 1 kolom of 1 rij van elementen (standaard waarde): align-items:... Indien flex-wrap: wrap; align-content:...

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Gestructureerde navigatie 1 2 . 1 I n l eidi ng 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 bovenaan. De footer sluit dan het geheel af. Je kunt een navigatiebalk maken op verschillende manieren en met verschillende vormen: met Flashknoppen, 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 boven. 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.

1 2 . 2 HTML- l i j s te n 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: • •

Dit is het eerste item van de ongeordende lijst (indien de tekst langer is dan op één regel past, springt deze op de volgende regels in) Dit is het tweede item van de ongeordende lijst

BASIS HTML & CSS // GOUBERT

•

Dit is het derde item van de ongeordende lijst

1 2 . 3 N avi g ati e m e t e e n U L 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 meerdere navigiemenu’s in de pagina voorkomen.

12.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

12.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

BASIS HTML & CSS // GOUBERT

12.3 De CSS voor een horizontale navigatiebalk d.m.v. float li { float:left; } a { display:block; width:60px; }

Verklaring • float: left • display: block • breedte: 60px

Gebruik float om blokelementen naast elkaar te “drijven”. 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 Block elementen nemen de volle breedte die standaard beschikbaar is. In dit voorbeeld willen we een breedte van 60px opgeven.

12.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.

11.5 De CSS voor een horizontale navigatiebalk d.m.v. display flex / gelijke breedte #navlist { display: flex; } #navlist li { flex-grow: 1; flex-shrink: 1; flex-basis: 100%; }

BASIS HTML & CSS // GOUBERT

Verklaring • flex: 1 1 100%;

Dit is de shorthand van de css code op de <li>. Deze property doet de elementen gelijkmatig groeien tot de volledige breedte van hun flex-parent, in dit geval de <ul>. De flex-basis: 100% zorgt er voor dat alle items dezelfde grootte hebben.

12.6 De CSS voor een horizontale navigatiebalk d.m.v. display flex / proportionele breedte #navlist { display: flex; } #navlist li { flex-grow: 1; flex-shrink: 1; flex-basis: auto; }

Verklaring • flex: 1 1 auto;

Dit is de shorthand van de css code op de <li>. Zoals in het vorige voorbeeld kan elke element groeien indien nodig, maar met de voorwaarde dat de breedte van elke element is gebaseerd op zijn inhoud. Dus de inhoud van de <li>. Dit lukt door het gebruik van flex-basis: auto.

12.7 De CSS voor een horizontale navigatiebalk d.m.v. display flex / gelijkmatige spaties, natuurlijke breedte, gecenteerd in parent nav { display: flex; justify-content: center; } ul { display: flex; } a { padding: 1em 2em; }

Verklaring De truuk is om van <nav> en <ul> een flexcontainer te maken. We passen enkel de ‘justify-content: center’ toe op de wrapping container, in dit geval de nav.

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

De website online plaatsen 1 3 . 1 F T P (Fi l e Tra ns fe r Protocol) File Transfer Protocol (FTP) is een protocol dat uitwisseling van bestanden tussen computers vergemakkelijkt. 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. Geschiedenis FTP 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. Techniek Het concept van een FTP is gebaseerd op het cliënt-servermodel dat ook andere delen van het internet 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. Veiligheid Standaard 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. Software Bekende 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

1 3 . 2 Pra kti s ch 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)

BASIS HTML & CSS // GOUBERT

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 downloaden.

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.

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

CSS Workflow 1 4 . 1 Wo rkflow ? Een aantal jaar geleden kwamen er verschillende ontwikkelaars achter dat ze bij iedere website praktisch 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

1 4 . 2 F ra m e works 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/

14.2.1 Voordelen frameworks Het grote voordeel van een framework is dat je zeker weet dat het ontwerp wat je maakt er op vrijwel alle browsers hetzelfde uit ziet. Deze frameworks zijn hier namelijk uitgebreid op getest. Wanneer 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.

14.2.2 Nadelen frameworks Je kent je code niet Wanneer 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

BASIS HTML & CSS // GOUBERT

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. Bugs Een 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 conflicteren 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 project Elk project is uniek. Elke klant heeft unieke wensen waarvoor een even unieke oplossing moet geboden 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.

14.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 ontwikkelen. 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:

1 4 . 3 Re s e t CS S 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 iedere 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 HTMLelementen 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

BASIS HTML & CSS // GOUBERT

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...

1 4 . 4 Mas te r CS S 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/

1 4 . 5 A l ge m e ne Concl us ie Om niet altijd hetzelfde werk te moeten overdoen en toch flexibel en snel te kunnen werken hergebruiken 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/

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Responsive design en @media 1 5 . 1 C S S 3 e n ni e uwe m ogelijkheden 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 toepassing 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)

BASIS HTML & CSS // GOUBERT

1 5 . 2 @ m e dia va n de g rootte 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; } }

BASIS HTML & CSS // GOUBERT

1 5 . 3 We rkw ij ze voor he t omg a a n met schermforma ten Men kan er op drie manieren voor zorgen dat de inhoud zich aanpast aan de beschikbare ruimte: 1. 2. 3.

Moeilijk: Werken met percentages (width: 50%;) en variabele eenheden (2em) Gemakkelijk: Media Queries 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-width Verwar 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 kleuren, 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 .

BASIS HTML & CSS // GOUBERT

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

BASIS HTML & CSS // GOUBERT

1 5 . 4 Me di a Q ue ri e s e n he t 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 bedoeld 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"’> <!- is fall-back content voor browsers die geen video-element ondersteunen --> </video>

1 5 . 5 Vi e w port De viewport is het zichtbare gedeelte van een webpagina van de gebruiker. De viewport is afhankelijk van het apparaat en kleiner op een mobiele telefoon dan op een computerscherm.Voor er tablets en mobiele telefoons bestonden waren webpagina’s alleen bedoeld voor computerschermen en was het gebruikelijk dat webpagina’s een statische design en een vaste grootte hadden. Toen we begonnen met het surfen op het internet met behulp van tablets en mobiele telefoons, waren sites met een vaste grootte te groot. Om dit op te lossen verkleinden de browsers op deze apparaten de hele webpagina om op het scherm te passen. Dit was niet perfect, maar een snelle oplossing. HTML5 introduceerde een methode om webdesigners zelf de controle over de viewport te geven, via de <meta> tag in de <head>. <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

dezelfde pagina zonder en met de viewport-tag

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Lettertypes en webdesign 1 6 . 1 Ke uze va n he t f ont De keuze van een lettertype is zeer belangrijk voor de uitstraling van een site. We kunnen niet blindelings en volgens onze eigen voorkeur zomaar een lettertype kiezen. Er komen een aantal faktoren bij kijken die de juiste keuze bepalen: 1. 2. 3.

De uitstraling van een lettertype De inhoud van de site of productie De leesbaarheid van het lettertype

Het aanwenden van één of meerdere lettertypes in een ontwerp waarbij de uitstraling van het lettertype volledig harmonisch is met de inhoud of vormgeving van de site 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.

1 6 . 2 Ho e s pe cifi e ke le tte rty pes ge bruiken 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

BASIS HTML & CSS // GOUBERT

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

16.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. Op deze lijst van web-save fonts zie je de verschillen qua weergave per besturingssysteem! Windows fonts / Mac fonts / Font family Normal style

Bold style

Arial, Arial, Helvetica, sans-serif

Arial Black, Arial Black, Gadget, sans-serif

Arial Black, Arial Black, Gadget, sans-serif 5

Comic Sans MS, Comic Sans MS , cursive

Comic Sans MS, Comic Sans

Courier New, Courier New, monospace

Georgia1, Georgia, serif

Impact, Impact , Charcoal , sans-serif

MS , cursive

Impact, Impact , Charcoal , sans-serif

Lucida Console, Monaco , monospace

Lucida Console,

Lucida Sans Unicode, Lucida Grande, sans-serif

Palatino Linotype, Book Antiqua3, Palatino, serif

Tahoma, Geneva, sans-serif

Times New Roman, Times New Roman, Times, serif

Monaco , monospace

Trebuchet MS , Trebuchet MS, sans-serif

Verdana, Verdana, Geneva, sans-serif

Symbol, Symbol (Symbol , Symbol )

Symbol,, Symbol (Symbol , Symbol )

Webdings, Webdings

(Webdings , Webdings )

Wingdings, Zapf Dingbats

Wingdings, Zapf Dingbats 2

(Webdings , Webdings ) 2

(Wingdings , Zapf Dingbats )

MS Sans Serif , Geneva, sans-serif

MS Serif4, New York6, serif

(Wingdings , Zapf Dingbats )

4 4

BASIS HTML & CSS // GOUBERT

16.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 beschrijving 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, kunnen websites <b>eindelijk</b> andere fonts gebruiken dan web-safe fonts. </div> </body> </html>

BASIS HTML & CSS // GOUBERT

Licenties en Free Fonts Opgelet! Vele fonts zijn auteursrechtelijk beschremd en kun je dus eigenlijk niet op deze wijze gebruiken. 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/

16.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. https://fonts.google.com/

Werkwijze 1. 2. 3. 4. 5.

Ga naar Google Web Fonts maak een selectie via het menu rechts Kies een font en klik het rode icoontje met een “+”-teken Onderaan rechts wordt de selectie verzameld in een tab-blad. Kopieer de code bij “Embed” en gebruik in je eigen website. Open het stylesheet van je 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; }

BASIS HTML & CSS // GOUBERT

1 6 . 3 S peciale ka ra ke rs i n HTM L 16.3.1 Woordafbreken Een browser heeft geen ingebouwd mechanisme om woorden af te breken. Daardoor begint en eindigt 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, &shy; of &173;, zorgt ervoor dat het woord als dat nodig is wordt afgebroken en een afbreekstreepje wordt ingevoegd. <P>... tekst&shy;verwerkings&shy;programma’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 tekstverwerkingsprogramma’s), 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’s), ontbreekt in de browser.

met code

zonder extra code

Rechts is de weergave door de browser en links is de weergave met de extra afbrekingscode of hoe een tekstverwerker het zou doen. Merk op dat een browser geen woorden kan afbreken!

16.3.2 Speciale tekens Bij het maken van een HTML-document mag je niet zomaar alle karakters opnemen, die je met allerlei toetscombinaties in bijvoorbeeld je tekstverwerker wel kunt gebruiken. Enerzijds omdat niet elk systeem (DOS/Windows, Macintosh, Linux) deze karakters op dezelfde wijze interpreteert, anderzijds 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

&#34;

&quot;

ampersand

&#38;

&amp;

kleiner dan

&#60;

&lt;

groter dan

&#62;

&gt;

Stel dat je bijvoorbeeld een groter-dan-teken wil gebruiken in je tekst dan schrijf je dit zo: <p> vijftien is &#62; 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 hoofdlettergevoelig. Een volledige referentie vind je hier: http://www.w3schools.com/tags/ref_symbols.asp

BASIS HTML & CSS // GOUBERT

1 6 . 4 Re s pons ive typog ra phy Leesbaarheid wordt hoofdzakelijk bepaald door font-size, line-height, measure (aantal karakters per regelà), kleur, contrast en font-keuze. Typographic scale Bij het verkleinen van het scherm veranderen de marges, lettergroottes maar ook de proporties. Het maken van de juiste proporties wordt vaak nog vergeten. Kies voor de verhoudingen tussen de verschillende font-groottes een bestaande harmonische schaal. Kies altijd ems: de schaal blijft bewaard bij aanpassingen van het base font. Als je werkt met één lettergrootte in em die meeschaalt per schermgrootte vergeet je de de proporties. Wanneer de grootte van het scherm krimpt, dan worden de relatieve ruimtes juist groter. Met als resultaat dat de verhoudingen niet meer in proportie zijn. Je krijgt te grote ruimtes tussen koppen en paragrafen op kleinere schermgroottes. Stel je maakt een h1-knop met een lettergrootte van 3em. Dit ziet er goed uit op desktop, maar op mobiel is het te groot en kloppen de verhoudingen van witruimtes niet. Hetzelfde geldt voor de andere koppen en bodytekst. Vooral op kleinere apparaten zorgt een te grote line-height voor gekke witruimtes.Verklein echter de line-height niet te veel. Ga op zoek naar een balans tussen leesbaarheid, en het laten zien van zoveel mogelijk tekstbeeld. Een voorbeeld, waar je kan wisselen tussen scale (verklein het scherm en klik ‘toggle’): http://hwdesignco.com/webtype/typecast/rwt/#

Voor het bepalen van ideale proporties kan je deze tools gebruiken: www.gridlover.net/app www.stye-scale.com http://www.modularscale.com/

Lijst van standaarden voor RWD We kunnen een schaal ontwikkelen voor typografie voor het web. Deze schaal is goed bruikbaar als standaard voor je projecten We gaan hierbij uit van een lettertype grootte van 1em (16px) op de <body> tag. Door het gebruik van relatieve groottes op de <body> zullen elementen zoals de <p> deze lettertypegrootte overerven en gerenderd worden in proportie. Per breakpoint is een verschillende schaling nodig voor de optimale proporties. Dit doe je via een mediaquery (zie supra): @media screen and (max-width: 480px) { body { font-size: 1em; line-height: 1.25em; } h1 { font-size: 2em; line-height: 1.25em; } }

BASIS HTML & CSS // GOUBERT

Body tekst

Lettergrootte font-size

regelafstand line-height

Desktop groot Desktop Tablet groot Tablet klein Mobiel

1em (16px) 1em (16px) 1em (16px) 1em (16px) 1em (16px)

1.375em 1.375em 1.375em 1.25em 1.25em

h1 Desktop groot Desktop Tablet groot Tablet klein Mobiel

Lettergrootte 3em (48px) 3em (48px) 2.5em (40px) 2em (32px) 2em (32px)

Regelafstand 1.05em 1.05em 1.125em 1.25em 1.25em

h2 Desktop groot Desktop Tablet groot Tablet klein Mobiel

Lettergrootte 2.25em (36px) 2.25em (36px) 2em (32px) 1.625em (26px) 1.625em (26px)

Regelafstand 1.25em 1.25em 1.25em 1.15384615em 1.15384615em

h3 Desktop groot Desktop Tablet groot Tablet klein Mobiel

Lettergrootte 1.75em (28px) 1.75em (28px) 1.5em (24px) 1.375em (22px) 1.375em (22px)

Regelafstand 1.25em 1.25em 1.25em 1.13636364em 1.13636364em

h4 Desktop groot Desktop Tablet groot Tablet klein Mobiel

Lettergrootte 1.125em (18px) 1.125em (18px) 1.125em (18px) 1.125em (18px) 1.125em (18px)

Regelafstand 1.22222222em 1.22222222em 1.22222222em 1.11111111em 1.11111111em

Blockquote Desktop groot Desktop Tablet groot Tablet klein Mobiel

Lettergrootte 1.5em (24px) 1.5em (24px) 1.5em (24px) 1.25em (20px) 1.25em (20px)

Regelafstand 1.45833333em 1.45833333em 1.45833333em 1.25em 1.25em

Aantal karakters measure (width van parent) 60-75 60-75 60-75 60-75 35-40

Dit leent zich om in een aparte css-file te zetten, die je nadien kan hergebruiken in andere projecten (zie supra â&#x20AC;&#x2DC;frameworkâ&#x20AC;&#x2122;).

BASIS HTML & CSS // GOUBERT

Measure De ideale measure bedraagt 45 tot 75 tekens (incl. spaties). Streef naar de perfecte measure: pas met mediaqueries en max-width de opmaak aan, zodat de kolombreedte altijd juist zit. Opgelet: op kleine schermen moet je soms afwijken van de ideale measure (de font)size wordt anders te klein). https://ia.net/know-how/responsive-typography https://ia.net/know-how/responsive-typography-the-basics

Contrast Contrast is eveneens van belang: een boek of een e-reader geeft geen licht, dus daar is zwart op wit geen probleem. Een scherm is echter een lichtbron en als je gezegend bent met een monitor met veel lumen en contrast, dan prikt de tekst echt in je ogen. Daarom is het aan te raden de tekst en/of de achtergrond wat naar elkaar toe te bewegen. In plaats van wit-zwart kan je dan kiezen om de achtergrond licht-grijs te maken:

Ik heb een zwarte achtergrond

Ik heb een donker grijze achtergrond

Je mag daar ook niet te ver in gaan: als ze te dicht bij elkaar liggen, zal de weergave op één van de vele goedkope monitors met TN-technologie (versus duurdere monitors met PVA- of IPS-panelen) heel erg tegenvallen. Zoals zo vaak op het web, als flexibel medium, kan je nooit alle omgevingsfactoren testen. Conclusie Typografie neemt een steeds prominentere rol in. Door rekening te houden met het aantal regels, lengte van zinnen en slim gebruik van fonts worden teksten toegankelijker. Bovendien, een tekst die makkelijk leest is een tekst die eerder wordt gelezen.

BASIS HTML & CSS // GOUBERT

HOOFDSTUK

Afbeeldingen op het web 1 7 . 1 B e sta nds f orm ate n Aangezien op dit moment meer dan 60% van de grootte (in kB’s) van een gemiddelde webpagina bestaat uit afbeeldingen, is het van cruciaal belang voor web ontwikkelaars om de bestandsformaten en de kwaliteit van afbeeldingen te optimaliseren voor een snelle (responsive) website. Alvorens je afbeeldingen te kunnen optimaliseren, is een correct gekozen bestandsformaat voor je afbeeldingen een eerste belangrijke stap die genomen moet worden.

17.1.1 JPEG – Joint Photographic Experts Group JPEG-bestanden zijn zeer ‘lossy’ omdat er informatie verloren gaat van het originele beeld wanneer men deze opslaat als JPEG-bestand. Lossy’ bestandscompressie resulteert in verlies van data en kwaliteit van de originele versie waardoor het gecompresserde bestand vaak (veel) minder schijfruimte in beslag neemt dan het origineel. Het kwaliteitsverlies van JPEG valt niet veel op bij foto’s, maar wel bij bijvoorbeeld grafieken, lijnen of letters. Bijna elke digitale camera kan afbeeldingen opslaan als een JPEG-formaat. JPEG is zeer web-vriendelijk omdat het bestand kleiner is, wat betekent dat het minder ruimte inneemt op de server en dus een kortere laadtijd. Sinds 1994 wordt JPEG beschouwd als de ‘standaard’. Progressive JPG’s Als je JPEG’s gebruikt op de mobiele versie van je website, zou je over kunnen gaan op Progressive JPEG’s. Dit bestandsformaat is ideaal voor grote afbeeldingen die via een langzame internetverbinding bekeken worden. Een progressieve JPEG toont een redelijke versie van het bestand, zodat de bezoeker al een beeld krijgt van wat er op de afbeelding staat, zonder dat het gehele bestand al volledig geladen is. Een ander voordeel van een progressive JPEG is dat deze vanaf het moment dat het laden is gestart, meteen de gehele plaats inneemt van waar de afbeelding geladen zal worden. Als een groot non-progressive JPG bestand wordt ingeladen, zal deze stukje voor stukje geladen worden, waardoor de inhoud van de website onder het bestand steeds een stukje verder geduwd zal worden. Enig nadeel: het bestand wordt wel sneller geladen, maar de bestandsgrootte wordt wel hoger, omdat het meerdere lage resolutie versies van het bestand bevat. Voordelen • • •

24-bits kleuren (maximum 16 miljoen kleuren) Rijke kleuren, ideaal voor foto’s Meest gebruikt en geaccepteerd beeldformaat

•

Compatible met de meeste besturingssystemen (Mac, Windows, Linux)

Nadelen • • •

‘lossy’ (verlies beeldkwaliteit) Geen animatie mogelijk Geen transparantie

BASIS HTML & CSS // GOUBERT

17.1.2 GIF – Graphic Interchange Format Het aantal kleuren in een GIF-bestand is meestal beperkt tot 256 (door het gebruik van 8 bits), maar GIF ondersteunt wel verschillende resoluties, animatie — door verschillende beelden achter elkaar op te slaan in hetzelfde bestand, waardoor er een animatie kan worden vertoond — en een transparante achtergrond. GIF is nog steeds een populaire beeldformaat op het internet, omdat de bestandsgrootte relatief klein is doordat een klein kleurenpalet wordt gebruikt. GIF is ‘lossless’ voor afbeeldingen met 256 kleuren en lager. ‘Lossless’ bestandscompressie is een type compressie waarbij de oorspronkelijke gegevens volledig worden gereconstrueerd uit de gecomprimeerde gegevens, dus zonder kwaliteitsverschil. Dus voor een full colo(u)r afbeelding, kunnen tot 99,998% van de kleuren verloren gaan. GIF is juist zeer geschikt voor bijvoorbeeld diagrammen, cartoons en logo’s met relatief weinig kleuren. GIF is nog steeds het meest gekozen formaat voor animatie. Voordelen • • • •

Ondersteunt transparantie Ondersteunt animatie Zeer geschikt voor (grafische) afbeeldingen met een beperkt kleurenpalet ‘Lossless’ kwaliteit (< 256 kleuren!)

Nadelen •

Ondersteunt alleen 256 kleuren

17.1.3 PNG – Portable Network Graphics PNG is goedgekeurd als een standaard sinds 1996. Het is een bestandsformaat dat speciaal voor het web is ontwikkeld. PNG is, in bijna alle aspecten, de superieure versie van de GIF. Net als een GIF bestand, wordt ook PNG opgeslagen met maximaal 256 kleuren, maar het slaat de kleurinformatie efficiënter op en ondersteunt ook een 8 bit transparantie (zelfs in IE6). PNG kan ook 24-bits RGB-afbeeldingen in kleur, grijswaarden, zowel met als zonder alpha-transparantie ondersteunen. Interlaced PNG’s zijn vergelijkbaar met progressive JPEG’s. Ze worden sneller getoond, maar verhogen de bestandsgrootte. Voordelen • • •

‘Lossless’ In veel opzichten beter dan GIF Ondersteunt transparantie beter dan GIF

Nadelen • •

Grotere afmetingen foto’s worden zwaar in grootte (zwaarder dan een JPEG) Animatie (zoals in GIF) wordt niet ondersteund

BASIS HTML & CSS // GOUBERT

100

Wanneer PNG-8 gebruiken en wanneer PNG-24 PNG is een relatief nieuw bestandstype. PNG kan opgedeeld worden in PNG-8 en PNG-24. PNG-8 heeft een lage bestandsgrootte, maar heeft als nadeel dat het maar een kleine set van kleuren bevat (PNG-8 ondersteunt 256 kleuren). Dit bestandsformaat wordt daarom meestal gebruikt voor iconen. De kleurenset van PNG-24 is groter, maar de bestandsgrootte ligt ook een stuk hoger. Een foto die opgeslagen wordt als PNG-24 zal ongeveer 5 keer groter worden in bestandsgrootte dan wanneer dezelfde foto opgeslagen wordt als JPG. Dit onderscheid kan nuttig zijn wanneer de foto geprint wordt, maar voor het internet zijn JPG bestanden goed genoeg. Gebruik - Compressie In combinatie met ImageAlpha en de Posterize filter in Photoshop kunnen we snel tot 80% kleinere files bekomen. https://pngmini.com/

17.1.4 SVG – Scalable Vector Graphics Grafische formaten als JPEG en GIF werken met pixels, deze afbeeldingen bestaan dus uit punten, SVG is een op XML gebaseerd bestandsformaat voor statische en dynamische vectorafbeeldingen. SVG biedt ruimte voor vier typen grafische objecten, namelijk: vector-grafische vormen, plaatjes, tekst en animaties. Ondanks dat SVG’s al vele jaren bestaan en door de meeste browsers worden ondersteund, is pas de laatste paar jaar SVG opgekomen in populariteit omdat icoontjes en/of graphics met CSS, canvas en/ of een JavaScript Library ook volledig kunnen worden gestyled, gegroepeerd en geanimeerd. Voordelen • • • • •

Geen kwaliteitsverlies bij schalen/zoomen (Retina) SVG-afbeeldingen kunnen op hoge kwaliteit worden afgedrukt Ondersteund transparantie Mogelijkheid tot opmaak, animatie, etc middels CSS/JS Libraries Wordt door alle moderne (mobiele) browsers ondersteund

Nadelen • •

Ongeschikt voor zeer complexe beelden, zoals foto’s. Reconstructie van vector data kan aanzienlijk langer duren dan een pixel-bestand van vergelijkbare complexiteit.

17.1.5 WebP – Google’s nieuw Bestandsformaat voor het Web? WebP biedt niet alleen een superieure compressie qua beeldkwaliteit en bestandsgrootte, maar ondersteund ook transparantie, animaties, ICC-profielen, XMP-metadata en tiling (betegelen) en maakt tevens gebruik van zowel een lossy als een lossless compressie. Dit relatief nieuwe bestandsformaat is ontwikkeld door Google en lossless afbeeldingen zijn 26% kleiner in omvang in vergelijking met PNG’s. WebP lossy beelden zijn 25-34% kleiner in omvang ten opzichte van JPEG-afbeeldingen. WebP wordt ondersteund door Google Chrome. Opera en de webbrowser van Android 4.0, maar het gebruik van WebP is vooralsnog beperkt.

BASIS HTML & CSS // GOUBERT

101

Netflix gebruikt overal WebP-afbeeldingen in zijn interfaces (Mobiele en TV App’s en in de webinterface). De Chrome Web Store draait inmiddels geheel op WebP-afbeeldingen, met een gemiddelde besparing van 30% t.o.v. JPEG-afbeeldingen. Facebook gebruikt het formaat op grote schaal om dataverkeer te besparen en de snelheid te vergroten in zijn mobiele applicaties. Voordelen • •

Superieure lossy en lossless compressie Ondersteund transparantie, animaties, ICC-profielen, XMP-metadata en tiling

Nadelen • •

Slechte ondersteuning in (mobiele) browsers (Chrome, Opera en Android 4.0+) Geen W3C gestandaardiseerde specificatie

17.1.6 Hoe kiezen? Voor alle duidelijkheid, er is geen “one size fits all” formaat voor het web.Verschillende soorten afbeeldingen moeten worden opgeslaan in verschillende formaten, afhankelijk van wat voor soort afbeelding het is, wat de browser ondersteunt, en wat de ‘behoeftes’ van de desbtreffende pagina zijn. Er zijn vier overwegingen die je moet maken voordat je een bepaald bestandsformaat kiest: 1. 2. 3. 4.

Is transparantie noodzakelijk? GIF, PNG, SVG Is animatie noodzakelijk? GIF, SVG (+ script) Is een hoge beeldkwaliteit gewenst met veel kleuren? JPEG, PNG Is het een puur grafische afbeelding bijv. logo of iconen? GIF, PNG, SVG

Als je geen transparantie of animatie nodig hebt, dan is JPEG waarschijnlijk het beste formaat. JPEG’s zijn ontworpen om compressie van hoge kwaliteitsfoto’s mogelijk te maken. Voor grafische afbeeldingen met een klein kleurenpalet gebruik je PNG of SVG in plaats van JPEG. Voor foto-animatie is GIF nog steeds zeer populair.

1 7 . 2 B e sta nds g rootte & responsive Bij goed design zit even veel aan de binnenkant als aan de oppervlakte. Hoe je een website bouwt is minstens even belangrijk als wat bezoekers te zien krijgen. Neem bijvoorbeeld snelheid. Snelheid is een rechtstreeks gevolg van hoe een website gebouwd wordt. Het is een gevolg van hoe het design tot stand is gekomen. Het is éen van de vele aspecten die digitaal ontwerp zo uitdagend maken. Een vuistregel is dat je pagina’s binnen de seconde moeten laden. Éen ding is zeker: te snel bestaat niet. Verwijder overbodige ruimte Stel dat je afbeelding een tekst bevat (in het voorbeeld ‘company’) en een grote paarse achtergrond, terwijl je eigenlijk alleen de tekst met een klein stukje achtergrond nodig hebt, dan zou je de afbeelding moeten ‘croppen’. Dit betekent dat je de randen van de afbeelding verwijdert, zodat deze kleiner

BASIS HTML & CSS // GOUBERT

102

wordt (zowel in resolutie als in afbeeldingsgrootte). U kunt dit doen met behulp van een programma zoals Photoshop, Illustrator of een online tool zoals http://www.picresize.com/.

Wij delen beelden grofweg in twee categorieën: 1. 2.

pixelgebaseerde beelden vectorgebaseerde beelden en iconfonts

17.2.1 Werken met één (pixelgebaseerde) afbeelding Als je wenst te werken met één afbeelding, kies dan voor een combinatie van veel pixels en véél compressie. Kies de grote afmetingen en zet de jpeg-compressie laag. Deze tabel geeft enkele voorbeelden van het verschil tussen toestelpixels en de resolutie: toestel iPhone iPhone 4 iPhone 5, 5s iPhone 6 iPhone 6 plus iPad 1 en 2 iPad 3 Samsung Galaxy S III Amazon Kindle Fire

css pixels: toestel-width/ toestel-height (px) 320 x 480, zowel in portrait als landscape modus 320 x 480, zowel in portrait als landscape modus. device-pixel-ratio is 2 = factor 4 320 x 568, zowel in portrait als landscape modus. device-pixel-ratio is 2 = factor 4 375 x 667, zowel in portrait als landscape modus. device-pixel-ratio is 2 414 x 736, zowel in portrait als landscape modus. device-pixel-ratio is 3 = factor 9 768 x 1024, zowel in portrait als landscape modus 768 x 1024, zowel in portrait als landscape modus device-pixel-ratio is 2 = factor 4 360 x 640, in portrait modus device-pixel-ratio is 2 = factor 4 1024 x 600, landscape modus

resolutie (px) 320 x 480 640 x 960 640 x 1136 750 x 1334 1242 x 2208 768 x 1024 1536 x 2048 720 x 1280 1024 x 600

We berekenen het aantal pixels van bijvoorbeeld de oude Samsung Galaxy S3: resolutie: 720 x 1280 = 921600 toestel breedte en hoogte: 360 x 640 = 230400 ratio = b x 2 en h x 2 = factor x 4: 921600 / 230400 = 4 ! Met andere woorden, er zitten 4 keer zo veel pixels in het scherm dan de actuele (CSS) afmetingen.

BASIS HTML & CSS // GOUBERT

103

standaard

CSS PIXELS

RESOLUTIE

h: 2px b: 2px

retina

h: 2px b: 2px

Waarom wel optimaliseren voor hoge resolutie? • •

normale afbeeldingen zien er wazig en/of gepixeleerd uit op een hoge resolutie scherm heldere tekst + afbeeldingen draagt bij tot de gebruiksvriendelijkheid.

Waarom niet optimaliseren voor hoge resolutie? • • • •

bandbreedte (grote bestanden) veel werk website ziet er goed uit op schaal 100% support voor oude browsers en toestellen

Afmetingen kiezen voor hoge resolutie afbeeldingen De regel is 1,5 tot 2 maal de CSS pixel. Heb je een afbeelding nodig die 960px breed is dan zal deze dus 960 x 2 = 1920px breed zijn. In de praktijk volstaat 1440 (is een factor van 1,5). De compressie dient zeer hoog te zijn. Het is beter deze afbeelding aan1600px te bewaren aan 20% kwaliteit dan te herschalen naar 960px en op te slaan aan 90% kwaliteit. Het voordeel is dat je een kleine bestandsgrootte combineert met een grote afmeting voor hoge resolutie.

17.2.2 Werken met meerdere (pixelgebaseerde) afbeeldingen tegelijk De css-regel max-width:100% zorgt voor adaptive images, de images worden mooi getoond, maar: • •

Hoe vermijd je de massa overbodige pixels op kleine schermen? Hoe wazige beelden vermijden op grote, hoge-resolutie schermen?

De ideale oplossing, één high-res afbeelding uploaden en al de rest gebeurt automatisch bestaat (nog) niet. Er is een oplossing in HTML door het gebruik van tags en attributen: <picture> met <img src=”” srcset=””/>

Er is ook een eenvoudige manier met enkel srcset: <img src=”small.jpg” srcset=”medium.jpg 1000w, large.jpg 2000w” alt=”yah”>

BASIS HTML & CSS // GOUBERT

104

Oudere browser nemen het src-attribuut, moderne browsers kiezen zelf welke afbeelding het best geschikt is voor het betreffende scherm (al dan niet hoge resolutie). Jij geeft gewoon mee wat de afmetingen van de verschillende afbeeldingen zijn. Het aanmaken van al die afbeeldingen is tijdrovend, je automatiseerd best door bijvoorbeeld gebruik te maken van actions of batch in Photoshop. https://helpx.adobe.com/nl/photoshop/using/processing-batch-files.html

17.2.3 Tools voor de optimalisatie van (pixelgebaseerde) afbeeldingen Naast Photoshop zijn er handige programmaatjes die straf werk leveren en enorm goed compresseren zonder veel in te boeten aan kwaliteit, gezien de hoeveelheid reductie in bestandsgrootte.

Desktop tools (apps)

https://imageoptim.com/mac (gratis, voor Mac computers, PNG, JPG) http://www.fnordware.com/superpng/ (Plugin voor Photoshop om PNG bestanden nog kleiner te maken dan de standaard van Photoshop) https://pngmini.com/lossypng.html http://www.jpegmini.com/ (betalend)

Online tools (via upload in een website)

https://tinypng.com/ (alleen voor PNG) http://www.jpegmini.com/ (alleen voor JPG) https://icomoon.io/ http://www.smushit.com/ysmush.it/ (PNG en JPG afbeeldingen max bestandsgrootte 1MB)

Controleer altijd je bestanden wanneer je ze geoptimaliseerd hebt met een tool. De tools maken de bestanden kleiner door visuele informatie te verwijderen waarvan zij gokken dat het menselijke oog dit niet zal zien. Soms kan het verwijderen van deze informatie echter een klein verschil in kleur veroorzaken. De huid van een persoon kan bijvoorbeeld groener worden, wat natuurlijk niet wenselijk is.

1 7 . 3 We rke n m e t ve ctore n : SVG en icon fonts Een vectorafbeelding is een grafische voorstelling die opgebouwd is uit eenvoudige meetkundige objecten, zoals punten, lijnen, krommen, polygonen e.d. De afbeelding wordt beschreven door de formules van de objecten. Daardoor laten vectorafbeeldingen zich tot elk gewenst formaat vergroten zonder dat er kwaliteitsverlies optreedt. Dit in tegenstelling tot een raster- of bitmapafbeelding, waarbij individuele pixels van het digitale canvas los worden ingekleurd. De resolutie voor de gekozen schaal ligt dan vast, als gevolg waarvan de afbeelding wazig of blokkerig wordt bij vergroting.

BASIS HTML & CSS // GOUBERT

105

Deze afbeelding illustreert het verschil tussen een vectorafbeelding (links) en een rasterafbeelding (rechts). In beide gevallen is een cirkel afgebeeld. Wat niet te zien is, is dat de linkercirkel een vectorafbeelding is terwijl de rechterafbeelding uit een grote verzameling pixels bestaat. Pas als we de afbeeldingen vergroten, wordt het verschil duidelijk. Bij de vectorafbeelding gaat het vergroten van de afbeelding niet ten koste van de kwaliteit van de figuur.Vergroot men de rasterafbeelding echter, dan worden de afzonderlijke pixels zichtbaar en wordt de rand van de cirkel een hobbelige “trap”.

17.3.1 SVG Gebruik voor logo’s en iconen het SVG-formaat in plaats van een pixel-beeld. Er zijn online vele iconen gratis beschikbaar in SVG: https://thenounproject.com

Ze schalen scherp naar grote schermen wegens resolutie-onafhankelijk. Het is ook veel makkelijker om te verwerken dan responsive pixelgebaseerde beelden. Je kan SVG’s verwerken als een gewone afbeelding in je HTML: <img src=’logo.svg’ alt=’logo’ >

Je kan de SVG ook plaatsen in je HTML als inline-svg: 1. 2.

open de svg met een text-editor (bv. Komodo) kopieer de code naar je HTML-bestand: <svg>...</svg>

In Adobe Illustrator kan je bij het bewaren van een vectortekening als SVG ook de code copiëren naar het klembord. Het voordeel is dat er geen extra file-request gedaan wordt (bij <img> is dit wel). Ook kan je elke beschreven vorm in de code die je kopieerde van je SVG voorzien van ID’s. Deze kan je stijlen via CSS.

BASIS HTML & CSS // GOUBERT

106

De SVG-code van het logo van Coca Cola, gemaakt in Adobe Illustrator. Bij een zogenaamde inlinesvg plak je enkel het stuk vanaf <svg ... > tot en en met </svg> in je html-code.

BASIS HTML & CSS // GOUBERT

107

17.3.2 Iconfonts Een Icon font is een set pictogrammen/icoontjes verpakt in een lettertype dat later kan worden ingelezen op een website middels @font-face. Er zijn vele voordelen aan verbonden: • • • • • •

een lettertype bestand is vector-gebaseerd, waardoor deze resolutie-onafhankelijk is. Icoontjes kunnen nu probleemloos worden verschaald naar verschillende afmetingen zonder wazig te worden minder HTTP-verzoeken aan de browser (1 bestand, dus 1 http-request) de bestandsgrootte wordt aanzienlijk kleiner (snellere laadtijd, makkelijk te cachen) mogelijkheid om de icoontjes individueel te stylen met behulp van CSS (kleur, schaduw, animatie, :hover, etc). effecten zoals verandering in opaciteit, of roteren van de pictogram, of .. (sommige van deze effecten zijn overigens ook mogelijk met beeldformaten) er zijn tal van hoge kwaliteit, open-source iconfonts beschikbaar op het internet

Iconfonts hebben ook een aantal nadelen: • • • •

@font-face werkt niet op alle browsers, zoals op Opera Mini check http://caniuse.com/#search=%40font-face lastig om meerdere kleuren te verwerken in een iconfont arbeidsintensief en moeilijk om een custom-made iconfont te maken accessibility problemen (Iconfonts worden meestal niet ingelezen door screen readers en als ze wel worden ingelezen, worden ze als een alfabetische letter uitgesproken)

Als je slechts enkele icoontjes wilt gebruiken is het misschien raadzamer om SVG’s (Scalable Vector Graphics) te gebruiken, ondanks het feit dat deze vectorbestanden groter kunnen zijn dan een iconfont in bestandsgrootte, wordt deze techniek goed ondersteund in de moderne browsers. Tips voor het toevoegen van een iconfont: • Gebruik alleen de icoontjes die je echt nodig hebt, door kant-en-klare icon fonts sets te gebruiken worden er waarschijnlijk een boel icoontjes ingelezen waarvan je helemaal geen gebruik maakt (extra bestandsgrootte)! Diensten zoals Foundation Icon Fonts 3, IcoMoon en pICTos maken het mogelijk om een custom-made of samengesteld pictogram lettertype te bouwen. • Zet CSS properties, zoals: font-weight, font-style, text-transform, enz. op ‘normal’ • Gebruik liever voor de menuknop (een ‘hamburger-icoon’) de unicode (U+2630) of in CSS :before { content:’\2630’; }, zodat deze op elke browser correct wordt weergegeven • Gebruik display:inline-block; voor meer controle en ‘klikgemak’ • Gebruik CSS property vertical-align om de basislijn van de ‘inline’ icons vast te leggen (uitlijning icoontjes) • Gebruik anti-aliasing voor Webkit browsers om fonts er scherper uit te laten zien (-webkit-font-smoothing: antialiased;). Door de resolutie-onafhankelijkheid van een iconfont zal elke Retina/HD beeldscherm het iconfont haarscherp renderen op beeld.

BASIS HTML & CSS // GOUBERT

108

Het toevoegen van een iconfont verkleint de totale laadtijd van de website, zeker als er veel icoontjes als rasterafbeeldingen gebruikt worden. Extra info http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://vanseodesign.com/web-design/icon-fonts/ http://gomakethings.com/icon-fonts/

Op de website CSS-Tricks is een testpagina gemaakt waarin je een aantal van de hierboven beschreven voordelen ‘live’ kunt aanpassen en bekijken. https://css-tricks.com/examples/IconFont/

1 7 . 4 S prite s Een webpagina bestaat uit veel verschillende bestanden die allemaal door een bezoeker van een website gedownload moeten worden. HTML, CSS, JavaScript, flash video’s, foto’s en andere afbeeldingen: het zijn allemaal componenten die door de browser binnengehaald moeten worden voordat een pagina volledig weergegeven kan worden. Het nadeel is dat al deze bestanden niet allemaal tegelijk gedownload kunnen worden, maar per domein (bijvoorbeeld www.donboscohalle.be) met maximaal twee tegelijk. Dit betekent dat ondanks dat de computer en internetverbinding van een bezoeker meer simultane downloads aan zou kunnen, hij eigenlijk aan het wachten op de beperkingen van het internet protocol. Om dit te omzeilen en tijd te winnen bij het laden van een website, kunnen alle afbeeldingen op een pagina worden samengevoegd tot één afbeelding, een zogenaamde sprite.

Voorbeeld van het downloaden van een webpagina met 11 afbeeldingen, in seconden Een sprite is één grote afbeelding die is samengesteld uit verschillende kleinere afbeeldingen. Deze techniek komt oorspronkelijk uit de gaming industrie: om spellen soepeler te laten verlopen werden veel kleine graphics samengevoegd tot één groot bestand. Deze grote plaat wordt op de plekken waar het nodig is gedeeltelijk getoond, waardoor het net lijkt of het een aparte afbeelding is.

BASIS HTML & CSS // GOUBERT

109

Hieronder ziet u een voorbeeld van zo’n sprite uit Super Mario Bros 3:

Deze techniek is ook goed toe te passen op websites. Op websites die veel (kleine) afbeeldingen bevatten, zoals bijvoorbeeld schaduwranden, iconen en achtergronden, kan deze techniek goed van pas komen. Door gebruik te maken van deze methode hoeft een bezoeker van je website maar één afbeelding te downloaden, waardoor je pagina’s sneller laden. Naast het sneller laden van een sprite, blijkt het ook dat een gecombineerde plaat van alle losse afbeeldingen kleiner is in de omvang van het bestand dan alle beelden afzonderlijk. Dit komt doordat een bestand nog beter gecomprimeerd kan worden zonder kwaliteitsverlies.

17.5.1 CSS sprites via background-image In plaats van drie afzonderlijke afbeeldingen te gebruiken gebruiken we één afbeelding: (“img_navsprites.gif”):

Met CSS tonen we het stuk dat nodig is: <!DOCTYPE html> <html> <head> <style> #home { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; } #next { width: 43px; height: 44px; background: url(img_navsprites.gif) -91px 0; } </style> </head> <body>

BASIS HTML & CSS // GOUBERT

110

verklaring •

<img id=”home” src=”img_trans.gif”> Dit is een kleine transparante afbeelding, omdat het src-attribuut niet leeg kan zijn.

• •

De getoonde afbeelding zal de achtergrondafbeelding zijn (background-image) dat we definiëren met CSS. width: 46px; height: 44px; Definieert het gedeelte van de afbeelding die we gebruiken background: url(img_navsprites.gif) 0 0; Definieert de background-image en zijn positie (left 0px, top 0px)

De posities van de achtegrondafbeelding kunnen we via Photoshop zien in het ‘info-palet”. Zorg er voor dat de eenheden en linialen op pixel staan ingesteld (Voorkeuren - Eenheden & Linialen)

SVG Sprites (met vectoren) Als je werkt met een set van iconen op meerdere pagina’s, kan het makkelijker zijn om een SVGsprite te gebruiken. SVG-sprites zijn meerder afbeeldingen die in één file staan.Via deze methode kan je een SVG gebruiken door te verwijzen naar zijn ID en is het gemakkelijk om een icoon te stylen via CSS. Deze wijzigingen zijn dan voor de gehele website (zolang de ID hetzelfde blijft). Je kan zelf SVG sprites aan maken via Adobe Illustrator. Een handige website waar je SVG-sprites kan aanmaken is icomoon. Deze website bevat een enorme gratis collectie. https://icomoon.io/

Werkwijze 1. 2.

Kies je iconen. Klik op het radertje onderaan naast de knop “Generate SVG/PNG” en vink aan “Tiles”

3. 4. 5. 6.

Sluit venstertje Klik de “Generate SVG/PNG” knop links onderaan. Klik “Download”. De svgdefs.svg is je SVG sprite.

BASIS HTML & CSS // GOUBERT

111

17.5.2 CSS sprites via <image> Een alternative methode die op moment van schrijven nog niet 100% wordt ondersteund door alle browsers (gelieve te checken): http://caniuse.com/#feat=object-fit

Sprites kunnen ook toegepast worden via <img>. Door gebruik te maken van de object-fit en objectposition properties kunnen we het inline beeld verschuiven binnen zijn box, die we een afmeting hebben gegeven. We plaatsen bijvoorbeeld een beeld (sprite) via de <img>-tag:

<img src=’sprite.png’ alt=’Icons’> img { object-fit: none; object-position: 0 0; width: 100px; height: 100px; }

verklaring In dit geval is het formaat van de <img> box 100px op 100px. Omdat de afbeelding groter is wordt deze automatisch gecropped door object-fit: none. Mogelijk gebruiken we nadien een class om de afbeelding te verschuiven en enkel te laten zien wat we nodig hebben. We croppen het beeld zodat enkel de eerste afbeelding wordt getoond:

indien we een ander stuk willen tonen gebruiken we een class:

<img src=’sprite.png’ class=’book’ alt=’Icons’> .book { object-position: 0 -234px; }

BASIS HTML & CSS // GOUBERT

112

HOOFDSTUK

CSS Custom Properties 1 8 . 1 I n l eidi ng Vandaag zijn CSS prepocessors (bijvoorbeeld Sass of LESS) de standaard voor webdevelopment. EĂŠn van de grote voordelen van preprocesssors is de mogelijkheid om variabelen te gebruiken.Variabelen helpen je te voorkomen dat je code veel moet copy-plakken. Het vereenvoudigd ontwikkeling en hergebruik van code. We gebruiken preprocessors om kleuren, font-voorkeuren en layoutdetails te bewaren. Eigenlijk alles wat we in CSS gebruiken. Preprocessor-variabelen hebben echter ook nadelen: Je kan ze niet dynamisch veranderen, ze kennen de DOM niet en ze kunnen niet gelezen of veranderd worden door javascript. Om deze en andere problemen op te lossen heeft men de CSS custom properties bedacht. Ze brengen nieuwe mogelijkheden voor webontwikkeling.

1 8 . 2 S y n tax om te de cla reren CSS custom properties maken gebruik van een gereserveerd symbool, net zoals bijvoorbeeld bij JQUERY of PHP ($). Omdat het idee en doel van custom properties zeer gelijkend zijn aan variabelen worden ze soms ook zo genoemd. Dus, om een variabele te declareren in plaats van een gebruikelijke CSS property zoals color of padding, gebruik je een eigen gekozen naam die start met -- :

.box{ --box-color: #4d4e53; --box-padding: 0 10px; }

De waarde van een property kan gelijk welke valide css-value zijn: een kleur, een string, een layoutwaarde, zelfs een expressie. Dit zijn enkele voorbeelden van valabele waarden ( :root is in HTML hetzelfde als :html, maar met een grotere specificiteit ) : :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple;

--header-height: 68px; --content-padding: 10px 20px;

--base-line-height: 1.428571429;

BASIS HTML & CSS // GOUBERT

113

}

--transition-duration: .35s; --external-link: “external link”; --margin-top: calc(2vh + 20px); /* Valid CSS custom properties kunnen later worden hergebruikt in bv. JavaScript. */ --foo: if(x > 5) this.width = 10;

Net zoals de andere CSS properties cascaden de custom properties op dezelfde manier en zijn ze dynamisch. Dit wil zegggen dat ze kunnen worden veranderd op elk ogenblik. Deze aanpassing zal onmiddelijk worden uitgevoerd door de browser. Om een variabele te gebruiken moet je de var() css-functie gebruiken en de naam opgeven van de ingesloten custom property: .box{ --box-color:#4d4e53; --box-padding: 0 10px; }

padding: var(--box-padding);

.box div{ color: var(--box-color); }

18.2.2 Declaratie and Cases De var() functie is een handige manier om een default value in te stellen. Je zou dit kunnen doen als je niet zeker bent of er wel een custom property is ingesteld en je toch een waarde wil om op terug te vallen. Dit kan makkelijk gedaan worden door een tweede parameter in de functie mee te geven: .box{ --box-color:#4d4e53; --box-padding: 0 10px; }

/* 10px is gebruikt omdat --box-margin niet is gedefiniëerd. */ margin: var(--box-margin, 10px);

Zoals je kan verwachten, kan je andere variabelen gebruiken om nieuwe te declareren: .box{ /* De --main-padding variabele wordt gebruikt als--box-padding niet is gedefinieerd. */ padding: var(--box-padding, var(--main-padding));

--box-text: ‘Dit is mijn box’;

}

/* Net zoals --box-highlight-text:’Dit is mijn box met highlight’; */ --box-highlight-text: var(--box-text)’ met highlight’;

BASIS HTML & CSS // GOUBERT

114

18.2.3 Operators: +, -, *, / Zoals we gewoon zijn in andere talen kunnen we ook basis-operators gebruiken met variabelen. Daarvoor heeft CSS een calc() functie die de browser een expression doet herrekenen na elke wijziging van een custom property: :root{ --indent-size: 10px; }

--indent-xl: calc(2*var(--indent-size)); --indent-l: calc(var(--indent-size) + 2px); --indent-s: calc(var(--indent-size) - 2px); --indent-xs: calc(var(--indent-size)/2);

Er is een probleem als je probeert een eenheidsloze waarde te gebruiken. Maar calc() is nogmaals onze vriend omdat het zonder eenheden niet werkt: :root{ --spacer: 10; } .box{ padding: var(--spacer)px 0; /* WERKT NIET */ padding: calc(var(--spacer)*1px) 0; /* WERKT */ }

1 8 . 3 Dra a gw ij dte (s cope ) en vererv ing We weten van andere talen zoals bijvoorbeeld javascript dat variabelen beperkt zijn tot de draagwijdte van de functie waarin ze worden gedeclareerd. Een globale variabele kan gedeclareerd worden buiten gelijk welke selector of constructie, anders zou de variabele local zijn (en dus enkel kunnen gebruikt worden binnen zijn functie). CSS custom properties worden standaard vererfd, ze cascaden net zoals andere CSS waarden. Een globale variabele in CSS zit in de :root scope. Deze variabele is dan overal beschikbaar. Bijvoorbeeld: HTML <div class=”enclosing”> enclosing <div class=”closure”> closure </div> </div>

CSS :root { --globalVar: 10px; } .enclosing { --enclosingVar: 20px;

BASIS HTML & CSS // GOUBERT

115

} .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* geeft 60px */ }

18.3.2 Aanpassingen van custom properties worden onmiddelijk toegepast Als we de waarde van de css aanpassen, bijvoorbeeld lager in de code, dan zal de calc() dit herrekenen en dus het resultaat van de custom property aanpassen. Dit is niet mogelijk met CSS preprocessors! Een voorbeeld: HTML <div class=”enclosing”> enclosing <div class=”closure”> closure </div> </div>

CSS :root { --globalVar: 10px; } .enclosing { --enclosingVar: 20px; } .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* geeft 80px, --closureVar: 50px wordt gebruikt*/ }

--closureVar: 50px;

BASIS HTML & CSS // GOUBERT

116

18.3.3 Voorwaardelijk custom properties toepassen Stel dat je een standaard font-size wil gebruiken voor een box, maar niet als er een “highlighted”-class aanwezig is: HTML <div class=”default”> standaard waarde </div> <div class=”default highlighted”> standaard waarde / highlighted </div>

Pas dit eens toe met CSS custom properties: .highlighted { --highlighted-size: 30px; } .default { --default-size: 10px;

/* Gebruik default-size, behalve wanneer highlighted-size beschikbaar is. */

}

font-size: var(--highlighted-size, var(--default-size));

Omdat het tweede HTML-element met de default-class ook de highlighted-class heeft zullen de properties van de hightlighted class worden toegepast. In dit voorbeeld zal “ --highlighted-size: 30px; “ toegepast worden. Op zijn beurt zal de toegekende font-size bestaan uit “--highlighted-size”.

18.3.4 CSS-Wide keywords CSS custom properties volgen dezelfde regels als de gebruikelijke CSS properties. Dit betekent dat je alle gebruikelijke CSS keywords kan toekennen: • • • •

inherit: dit CSS keyword past de waarde toe van zijn parent initial: dit past de beginwaarde toe zoals gedefinieerd in de CSS specificatie (een lege waarde of niets zoals in bepaalde mogelijkheden met css custom properties) unset: dit past de geërfde waarde toe als een waarde is vererfd op een normale manier (zoals bij custom properties) of de beginwaarde als deze niet normaal wordt vererfd. revert: dit zet de waarde terug naar de default (standaard) waarde ingesteld door de user agent’s style sheet (een lege waarde in het geval van CSS custom properties).

BASIS HTML & CSS // GOUBERT

117

Een voorbeeld: .common-values{ --border: inherit; --bgcolor: initial; --padding: unset; --animation: revert; }

Stel dat je een component wil bouwen en zeker wil zijn dat er reeds geen enkele andere stijl of custom properties toegepast zijn. Dan kunnen we gebruik maken van de “all” css property. Samen met CSS keywords kunnen we het volgende doen: .my-wonderful-clean-component{ all: initial; }

Dit resets alle stylen van onze component! Jammer genoeg kan het “all” keyword geen custom properties resetten... voorlopig toch niet. In de toekomst kan een full reset er zo uitzien: .my-wonderful-clean-component{ --: initial; /* reset alle CSS custom properties */ all: initial; /* reset alle andere CSS styles */ }

Voor alle duidelijkheid: dit werkt nog NIET.

BASIS HTML & CSS // GOUBERT

118

1 8 . 4 C S S cus tom prope rties toe pa ssen Er zijn vele mogelijkheden om CSS custom properties te gebruiken. Enkele voorbeelden.

18.4.1 Simuleer niet-bestaande CSS De naam van de CSS variabelen is “custom properties,” we kunnen ze proberen te gebruiken om niet-bestaande properties te simuleren... Er zijn zo veel niet-bestaande properties: translateX/Y/Z, background-repeat-x/y (nog steeds niet cross-browser compatibel), box-shadow-color. Laten we de laatste eens proberen te maken. In dit voorbeeld veranderen we de kleur van boxshadow bij :hover. We willen enkel de DRY-regel (don’t repeat yourself) volgen. In plaats van de volledige waarde van de box-shadow aan te passen in het :hover gedeelte veranderen we enkel zijn kleur. Met custom properties lukt dit: HTML <strong class=”test”> hover mij </strong>

CSS .test { --box-shadow-color: yellow; box-shadow: 0 0 30px var(--box-shadow-color); } .test:hover { --box-shadow-color: orange; /* in plaats van: box-shadow: 0 0 30px orange; */ }

BASIS HTML & CSS // GOUBERT

119

18.4.2 Kleurpaletten Eén van de meest gebruikte toepassingen van custom properties is kleurpaletten in applicaties. Custom properties zijn eigenlijk gecreëerd om dit soort probleem op te lossen. Een voorbeeld van een simpel kleurpalet: HTML <span class=”btn”>button</span> CSS .btn { background-image: linear-gradient(to bottom, #3498db, #2980b9); text-shadow: 1px 1px 3px #777; box-shadow: 0px 1px 3px #777; border-radius: 28px; color: #ffffff; padding: 10px 20px 10px 20px; }

Stel je voor dat je het kleurpalet wil omdraaien. De eerste stap zou zijn om alle kleuren te bewaren in custom properties en onze component te herschrijven. .btn { --shadow-color: #777; --gradient-from-color: #3498db; --gradient-to-color: #2980b9; --color: #ffffff; background-image: linear-gradient( to bottom, var(--gradient-from-color), var(--gradient-to-color) ); text-shadow: 1px 1px 3px var(--shadow-color); box-shadow: 0px 1px 3px var(--shadow-color); border-radius: 28px; color: var(--color); padding: 10px 20px 10px 20px; }

Dit is alles wat we nodig hebben. Met deze code kunnen we de kleurvariabelen aanpassen naar de omgekeerde kleuren en ze toepassen wanneer we willen.We kunnen bijvoorbeeld de globale “inverted” class aan het body element hangen en de kleuren veranderen: body.inverted .btn{ --shadow-color: #888888; --gradient-from-color: #CB6724; --gradient-to-color: #D67F46; --color: #000000; } Met CSS custom properties kan je een propere oplossing schrijven zonder code te dupliceren omdat de waarden in variabelen kunnen worden aangepast.

BASIS HTML & CSS // GOUBERT

120

HOOFDSTUK

Formulieren 1 9 . 1 I n l eidi ng Formulieren (forms) worden gebruikt om de bezoeker van een site de mogelijkheid te bieden informatie in te voeren en te verzenden. Het kan daarbij gaan om bijvoorbeeld het geven van een reactie, het aanmelden als abonnee, het invullen van een enquête, het beantwoorden van vragen en het plaatsen van een bestelling. De belangrijkste elementen bij het maken van formulieren zijn: • • • • •

om het formulier aan te maken voor het maken van tekstvelden, aankruisvakjes, keuzerondjes voor het maken van een tekstvak voor uitschuifkeuzelijst en meervoudige keuzelijst knoppen voor het verzenden van de gegevens

Een formulier bevat naast normale documentinhoud (bijvoorbeeld paragrafen, lijsten en koppen) een aantal onderdelen, welke controls worden genoemd. In het volgende “formulier” zijn een aantal “controls” te zien.

BASIS HTML & CSS // GOUBERT

121

1 9 . 2 Ve r we rke n va n i nforma tie Het form-element definieert het begin en einde van een formulier. Met de attributen method en action wordt bepaald op welke wijze de informatie uit het formulier verzonden moet worden en waarheen. Als een bezoeker een formulier heeft ingevuld, zal het de bedoeling zijn dat de informatie op de juiste plek terecht komt en/of verwerkt wordt. Dat gebeurt over het algemeen met behulp van scripts, die uitgevoerd worden op de webserver van de provider. Het method-attribuut kent twee waarden: “get” en “post”. Welke waarde moet worden opgenomen, hangt af van het gebruikte script op de server. De waarde van het action-attribuut is een url. Als gebruik gemaakt wordt van een script op de server waarop ook de html-documenten staan, dan wordt de bestemming bijvoorbeeld als volgt vastgelegd: <form method=”get” action=”/cgi-bin/mailform”>  </form>

of <form method=”post” action=”form2mail.php”>  </form>

Als het script op een andere server staat, dan wordt de bestemming door middel van een http-url vastgelegd. bijvoorbeeld: <form method=”get” action=”http://cgi18.freedback.com/mail.pl”>  </form>

De overige form-attributen: accept-charset autocomplete enctype method name novalidate target

bepaald de charset van het formulier (default: de pagina-charset). bepaald of de browser het formulier mag vervolledigen (default: on). bepaalde de codering van de verzonden data (default is url-encoded). bepaalde de HTTP method die wordt gebruikt bij verzending (default: GET). bepaald de naam die wordt gebruikt om het formulier te indenticiferen (voor DOM gebruik: document.forms.name). bepaald dat de browser het formulier niet hoeft te valideren bepaald het adres (url) na het verzenden van het formulier via het action-attribute (default: _self).

BASIS HTML & CSS // GOUBERT

122

1 9 . 3 O pbouw va n e e n “con trol” Zoals voorheen beschreven bestaat een formulier uit <form> en uit zogenaamde controls. Een control bepaalt hoe je de gebruiker de mogelijkheid geeft om informatie door te geven. Hij kan dit door • • •

zelf tekst te typen selectie van voorgedefiniëerde inhoud verborgen inhoud

19.3.1 Zelf tekst typen a. tekstveld Een tekstveld wordt gebruikt om de bezoeker een beperkte hoeveelheid tekst op één regel te laten invoeren. <input type=”text” name=”naam” size=”20” maxlength=”30”>

Met de waarde “password” voor het type-attribuut wordt de invoer met asterisken (*) weergegeven. <input type=”password” name=”wachtwoord” size=”8” maxlength=”8”>

b. textarea Een tekstvak kan gebruikt worden om de bezoeker een in principe onbeperkte hoeveelheid tekst te laten invoeren. <textarea name=”tekstvak” rows=”4” cols=”50”></textarea>

BASIS HTML & CSS // GOUBERT

123

19.3.2 Voorgedefinieerd, één keuze mogelijk A. Radiobuttons Radiobuttons worden gebruikt wanneer de bezoeker uit meerdere mogelijkheden één keuze moet maken. In het volgende voorbeeld zijn daaraan de attributen type, name, value en in één geval checked toegevoegd. Het type-attribuut met de waarde “radio” bepaalt dat het om keuzerondjes gaat. Met name-attribuut gebruik je om aan te geven welke keuzerondjes bij elkaar horen. Het value-attribuut definieert welke waarde naar de server gestuurd moet worden als een keuzerondje geselecteerd is. Het checked-attribuut zorgt er voor dat een keuzerondje bij openen van het formulier geselecteerd is. <input type=”radio” explorer<br> <input type=”radio” <input type=”radio” <input type=”radio” <input type=”radio”

name=”browser” value=”msie”>microsoft internet name=”browser” name=”browser” name=”browser” name=”browser”

value=”moz” checked>mozilla<br> value=”nn”>netscape navigator<br> value=”op”>opera <br> value=”anders”>andere browser<br>

b. Uitschuifkeuzelijsten / dropdownmenu Een uitschuifkeuzelijst neemt in het document slechts beperkte ruimte in, maar kan toch een groot aantal keuzemogelijkheden bevatten. Je maakt een keuzelijst met de elementen select en option. Het select-element geeft aan dat het om een keuzelijst gaat, het option-attribuut definieert een keuze. <select name=”browser”> <option>microsoft internet explorer</option> <option>netscape navigator</option> <option>mozilla</option> <option>firefox</option> <option>opera</option> <option>andere browser</option> </select>

BASIS HTML & CSS // GOUBERT

124

Door aan het option element het attribuut value toe te voegen, kan bepaald worden welke waarde naar de server gestuurd moet worden. Het selected attribuut bepaalt welke mogelijkheid door de browser als standaard weergegeven moet worden. Is het selected attribuut niet gebruikt, dan wordt de eerste mogelijkheid weergegeven (zoals in het voorbeeld hiervoor). <option value=”ff” selected>firefox</option>

19.3.3 Voorgedefinieerd, meerdere keuzes mogelijk a. Aankruisvakjes / checkbox Aankruisvakjes (checkboxes) worden gebruikt wanneer de bezoeker meerdere mogelijkheden tegelijk kan kiezen. Je maakt ze door het type-attribuut met de WAARDE “checkbox” aan het input element toe te voegen. <input type=”checkbox” name=”fruit” value=”appel”>appels <input type=”checkbox” name=”fruit” value=”peer”>peren <input type=”checkbox” name=”fruit” value=”banaan”>bananen

Door aan het input element het checked attribuut toe te voegen, wordt een vakje al vooraf aangekruist. De gebruiker kan dit weer ongedaan maken. <Input type=”checkbox” name=”fruit” value=”appel” checked>appels

Wanneer een vakje is aangekruist, verzendt de browser een combinatie van de waarden van de attributen name en value. In het voorgaande voorbeeld is zo’n combinatie bijvoorbeeld: Fruit=appel

Als het value attribuut niet is opgenomen, dan gebruikt de browser hiervoor de waarde “on”. De volgende combinatie wordt in dat geval verzonden: Fruit=on

Een dergelijke weergave is uiteraard alleen begrijpelijk als slechts één vakje kan worden aangekruist. Wanneer voor meerdere vakjes hetzelfde resultaat wordt verzonden, blijft immers onduidelijk welke nu precies waren aangekruist. Het is daarom belangrijk het value-attribuut altijd te gebruiken als meerdere aankruisvakjes onder dezelfde naam gegroepeerd zijn.

BASIS HTML & CSS // GOUBERT

125

b. Meervoudige keuzelijst Een meervoudige keuzelijst brengt meer keuzemogelijkheden in beeld. Met het size-attribuut van het select-element wordt vastgelegd hoeveel mogelijkheden er in de keuzelijst zichtbaar zijn. Het multiple-attribuut maakt het mogelijk meerdere keuzen tegelijk te selecteren. Door aan het option-element het attribuut value toe te voegen, kan bepaald worden welke waarde naar de server gestuurd moet worden. Door aan het option-element het attribuut selected toe te voegen, kan bepaald worden welke mogelijkheden al voorgeselecteerd moeten zijn (zoals hiervoor bananen). <select name=”vruchten” multiple size=”4”> <option value=”appels”>appels</option> <option value=”peren”>peren</option> <option value=”bananen” selected>bananen</option> <option value=”sinaasappels”>sinaasappels</option> <option value=”bessen”>bessen</option> <option value=”pruimen”>pruimen</option> </select>

19.3.4 Verborgen gegevens / hidden Door het type-attribuut de waarde “hidden” te geven, kan onzichtbaar voor de bezoeker bepaalde informatie naar de server worden gestuurd. <input type=”hidden” name=”recipient” value=”gebruiker@provider.com”> Hoewel door de browser niets wordt weergegeven, kan de invoer wel bekeken worden in de bron van het document.

1 9 . 4 K n oppe n De meest gebruikte knoppen zijn die, welke je maakt met het input-element. Door het type-attribuut met de waarde “submit” aan het input-element toe te voegen, maak je een knop die er voor zorgt dat de informatie van het formulier wordt verzonden. Het type-attribuut met de waarde “reset” definieert een knop, waarmee je de beginwaarden van het formulier kunt herstellen. Met het valueattribuut bepaal je het opschrift van de knoppen. <input type=”reset” value=”beginwaarden”> <input type=”submit” value=”verzenden”>

Knoppen worden ook vaak gebruikt bij scripts. Klikken op de knop heeft dan niet als resultaat dat informatie naar de server gestuurd wordt, maar dat het script een bepaalde gebeurtenis veroorzaakt.

BASIS HTML & CSS // GOUBERT

126

HOOFDSTUK

Tabellen 2 0 . 1 I n l eidi ng Van tabellen werd in HTML-pagina’s op grote schaal gebruik gemaakt. Dit heeft zeker te maken met de mogelijkheden die tabellen bieden bij het geven van de gewenste lay-out aan een document. Toen CSS nog niet de manier was om te vormgeven boden tabellen voor veel webdesigners een belangrijke mogelijkheid voor het in horizontale richting op de gewenste plaats zetten van tekst en andere inhoud van het document. In het huidige moderne webdesign worden tabellen gebruikt voor wat ze eigenlijk bedoeld zijn: tabulaire data zoals bijvoorbeeld voetbaluitslagen. In email-mailings worden tabellen echter nog steeds toegepast om elementen te plaatsen in een layout omdat emailclients veelal beperkt zijn in het ondersteunen van HTML en CSS.

2 0 . 2 E e nvoudige ta be ll e n In het volgende voorbeeld wordt een eenvoudige tabel met twee rijen en twee kolommen gemaakt. Het tr-element definieert een rij en het td-element definieert de cellen in de rij. De randen van de tabel zijn zichtbaar, omdat voor het table-element het border-attribuut is opgenomen met een andere waarde dan “0”. <table border=”1”> <tr> <td>a1</td> <td>a2</td> </tr> <tr> <td>b1</td> <td>b2</td> </tr> </table>

De browser maakt de cellen net zo breed als nodig is om de inhoud weer te geven:

Door in de eerste rij de cellen te definiëren met het th-element wordt de tabel voorzien van kolomtitels. <table border=”1”> <tr> <th>titel 1</th> <th>titel 2</th> <th>titel 3</th> </tr> <tr> <td>a1</td> <td>a2</td> <td>a3</td> </tr> <tr> <td>b1</td> <td>b2</td> <td>b3</td> </tr> </table>

BASIS HTML & CSS // GOUBERT

127

Met het width-attribuut van het table-element wordt de breedte van de tabel gedefinieerd. <table border=”1” width=”50%”> <tr> <td>a1</td> <td>a2</td> </tr> <tr> <td>b1</td> <td>b2</td> </tr> </table>

De browser zal de beschikbare breedte over de kolommen verdelen:

De hoogte en breedte van een cel worden bepaald met de attributen width en het height van het td - (of th) element. <table border=”1”> <tr> <td width=”120” height=”60”>a1</td> <td width=”80”>a2</td> </tr> <tr> <td height=”40”>b1</td> <td>b2</td> </tr> </table>

De browser geeft dit voorbeeld zo weer:

BASIS HTML & CSS // GOUBERT

128

2 0 . 3 S a m e nvoe ge n va n ce llen Opeenvolgende cellen kunnen zowel in horizontale als in verticale richting worden samengevoegd. Voor het samenvoegen in verticale richting gebruik je het rowspan attribuut van het td (of th) element, voor het samenvoegen in horizontale richting het colspan-attribuut. In het volgende voorbeeld wordt de eerste cel in de eerste rij met het rowspan-attribuut samengevoegd met de onderliggende cellen in de volgende twee rijen. In de tweede en derde rij hoeven er daardoor slechts twee cellen gedefinieerd te worden. <table border=”1” width=”50%”> <tr> <td rowspan=”3” height=”100”>abc1</td><td>a2</td><td>a3</td> </tr> <tr> <td>b2</td><td>b3</td> </tr> <tr> <td>c2</td><td>c3</td> </tr> </table>

De browser geeft dit voorbeeld zo weer:

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

De browser geeft dit voorbeeld zo weer:

BASIS HTML & CSS // GOUBERT

129

Je kunt de attributen rowspan en colspan ook tegelijkertijd voor een cel gebruiken. <table border=”1” width=”50%”> <tr> <td height=”30”>a1</td><td rowspan=”2” colspan=”2”>a2b3</td> </tr> <tr> <td height=”30”>b1</td> </tr> <tr> <td height=”30”>c1</td><td>c2</td><td>c3</td> </tr> </table>

De browser voegt de vier cellen rechtsboven in de tabel samen:

2 0 . 4 U i t li j ne n ce l i nhoud Met de attributen align en valign van het td (of th) element bepaal je hoe de inhoud van een cel in respectievelijk horizontale en verticale richting moet worden uitgelijnd. De beginwaarde van het align-attribuut is “left” en als je het attribuut niet opneemt, dan wordt de inhoud van de cel links uitgelijnd. De beginwaarde van het valign is “middle” en zonder het attribuut wordt de inhoud van de cel in verticale richting gecentreerd. <table border=”1”> <tr> <td valign=”top” width=”120” height=”40”>-/top</td> <td width=”120”>-/-</td> <td valign=”bottom” width=”120”>-/bottom</td> </tr> <tr> <td align=”center” valign=”top” height=”40”>center/top</td> <td align=”center”>center/-</td> <td align=”center” valign=”bottom”>center/bottom</td> </tr> <tr> <td align=”right” valign=”top” height=”40”>right/top</td> <td align=”right”>right/-</td> <td align=”right” valign=”bottom”>right/bottom</td> </tr> </table>

BASIS HTML & CSS // GOUBERT

130

De attributen align en valign kunnen ook aan het tr-element toegevoegd worden, om in één keer voor alle cellen in een rij te bepalen hoe de inhoud in respectievelijk horizontale en verticale richting uitgelijnd moet worden. <table border=”1”> <tr align=”center”> <td width=”120” height=”60”>a1</td> <td width=”80”>a2</td> </tr> <tr align=”right” valign=”top”> <td height=”40”>b1</td> <td>b2</td> </tr> </table>

De browser geeft dit voorbeeld zo weer:

BASIS HTML & CSS // GOUBERT

131

Bronvermelding

https://nl.wikipedia.org http://www.handleidinghtml.nl http://www.w3schools.com http://www.tweepixels.nl 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://www.goodbytes.be/blog/ http://users.telenet.be/philippe.somers1/ http://www.adobe.com/be_nl/products/muse/font-types.html http://sixrevisions.com/css/font-face-guide/ https://wijs.be/nl/trends-inzichten/blog/detail/ik-heb-de-snelste http://www.gonzodesign.nl http://gomakethings.com/using-svgs/ https://www.studiowolf.com/blog/responsive-design-en-typografie/ http://websitesvoorkmo.be/artikel/responsive-typografie https://open.nytimes.com/css-grid-for-designers-f74a883b98f5

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

BASIS HTML & CSS // GOUBERT

132

BASIS HTML & CSS // GOUBERT

133

BASIS HTML & CSS // GOUBERT

134

BASIS HTML & CSS // GOUBERT

135

BASIS HTML & CSS // GOUBERT

136