HTML & CSS. F. Vonk versie

Transcriptie

1 2015 HTML & CSS F. Vonk versie

2 inhoudsopgave 1. inleiding de HTML basis HTML en een klein beetje CSS meer HTML CSS extra HTML oefeningen angry puppy wat heb je geleerd hulp en hints Dit werk is gelicenseerd onder een Creative Commons Naamsvermelding NietCommercieel GelijkDelen 3.0 Unported licentie Deze module is geïnspireerd door het werk van Codecademy. Het voorbeeld uit Hoofdstuk 7 is afkomst uit de HTML & CSS cursus aldaar. De uitwerking wijkt op sommige punten iets af van de originele oplossing De afbeelding op het voorblad is verkregen via INFOwrs. Copyright 2010 INFOwrs Serviços em informatica

3 1. inleiding De meeste mensen bezoeken bijna iedere dag één of meerdere websites op het internet. Naar schatting waren er eind 2011 meer dan 550 miljoen websites, zie Netcraft. Een website bestaat meestal uit meerdere webpagina's. De basis van webpagina's zijn HTML & CSS. HTML staat voor HyperText Markup Language. Hypertext wil zeggen dat de tekst links (verwijzingen) naar andere stukken tekst kan bevatten en Markup wil zeggen dat we met deze taal de opmaak (lay-out, vormgeving) van een webpagina kunnen verzorgen. CSS staat voor Cascading Style Sheets en leggen we later uit. Veel web ontwikkelaars gebruiken authoring (grafische) tools, zoals Microsoft FrontPage en Adobe DreamWeaver, om de eerste opzet voor een website te maken. Daarna passen ze de gegenereerde HTML en CSS code aan om zo de optimale website te creëren. Daarom is kennis van de HTML en CSS taal een must voor iedereen die aan web ontwikkeling doet. Welkom bij de module HTML & CSS. In deze module behandelen we de basis van HTML en CSS. Deze module is geïnspireerd op de HTML & CSS cursussen van Codecademy. De reden om deze module te maken is dat niet alle mensen even goed in Engels zijn. Als je wel goed bent in Engels dan is Codecademy een goed en interactief alternatief. In deze module kom je opgaves tegen die je moet maken om de lesstof te verwerken. De antwoorden kunnen in de les besproken worden. opgave Opgaves in blauw moet je maken. Let op, links in dit document hebben een rode kleur. Veel plezier en succes

4 2. de HTML basis Als je echt je eigen webpagina wilt beginnen, dan is het natuurlijk belangrijk dat je een pakkende domeinnaam hebt, bijvoorbeeld met je achternaam erin. Een domein is een stukje webruimte (web space) dat van jou is. Je huurt het meestal van een web hosting bedrijf. Als je betaalt, dan kun je zelf de naam van je domein kiezen en dat is natuurlijk het leukst. Als je je domein hebt, dan duurt het meestal nog wel even voordat je een goede en leuke webpagina of web omgeving hebt. Daarom is het handig om snel een zogenaamde "under construction" (in aanbouw) pagina te maken, waarin je alvast een paar hints weggeeft over de webpagina die er gaat komen. Om de basis van HTML te leren, gaan je nu zo'n pagina maken. De basis van ieder HTML bestand is feitelijk hetzelfde en ziet er als volgt uit. <!DOCTYPE html> <html> <head> <title> de titel van de pagina </title> </head> <body> de inhoud van de pagina </body> </html> opgave 2.1 Maak op je H schijf (home op het schoolnetwerk) of je USB stick een map aan genaamd informatica (als die map nog niet bestaat) en maak daarin een map aan genaamd HTMLCSS. In deze map maak je een bestand aan dat je inaanbouw.html noemt. Als je niet weet hoe dit moet kijk dan bij aanmaken van een HTML bestand in het hoofdstuk hulp en hints. Open het gemaakte bestand (dus inaanbouw.html) met de tekstverwerker genaamd Notepad++, copy-paste de HTML code die voor deze opgave staat erin en sla het bestand op (CTRL+s). Als je niet weet hoe dit moet kijk dan bij bestand openen met Notepad++ in het hoofdstuk hulp en hints. Als het goed is zie je dan het volgende

5 Bepaalde stukken tekst zijn blauw gemaakt door Notepad++. Dit noemen we syntax highlighting. Als je niet weet hoe dit moet kijk dan bij syntax highlighting in het hoofdstuk hulp en hints. 1 Als je niet weet hoe je thuis Notepad++ op je computer krijgt, kijk dan bij Notepad++ en thuis werken in het hoofdstuk hulp en hints. We kunnen deze pagina nu in een webbrowser laten zien. Dit kan via Notepad++. Kies in het menu uitvoeren (run) en klik op Launch in Firefox of Launch in Chrome zoals je ziet in de volgende afbeelding. Als het goed is wordt de gekozen webbrowser opgestart en zie je daarin het volgende

6 Let goed op waar welke tekst uit het HTML bestand staat in de browser. Sluit de pagina NIET af want we zijn nog niet klaar! Net als een mens heeft een HTML pagina een hoofd (head) en een lichaam (body). In de head zetten we de titel van de pagina. Deze zie je terug in de titelbalk en/of de tab van de webbrowser. De inhoud van de webpagina zelf zetten we in de body en deze zie je in het browse (blader) gedeelte van de webbrowser. Nu gaan we in een snel tempo een aantal basis HTML elementen gebruiken. Een HTML element is de combinatie van een begin-tag, eind-tag en de attributen die erbij horen. Een attribuut is een eigenschap van een element. Laten we snel naar het eerste element kijken. het paragraph element Dit element ziet er als volgt uit: <p> een stuk tekst </p> We gebruiken het paragraph element om een tekstalinea in onze pagina aan te geven. Het is een nette manier om stukken tekst die in één hoofdstuk horen maar verschillende aspecten behandelen van elkaar te scheiden net zoals je bij het vak Nederlands geleerd hebt

7 opgave 2.2 Laten we eerst de basis leggen voor onze "under construction" pagina. Verander de titel in: Under Construction. Vervang vervolgens, in het HTML bestand dat je zojuist gemaakt hebt, de tekst in de body door twee nieuwe regels te weten: Deze pagina is in aanbouw. Meer informatie volgt binnenkort. Druk in de browser, die je als het goed is nog open hebt staan, op F5 (refresh) en kijk wat er gebeurt. Zet vervolgens om beide regels tekst de paragraph begin- en eindtags, druk in de browser weer op F5 en kijk wat er nu gebeurt. Als je goed hebt opgelet, dan heb je gezien wat het paragraph element doet. Dit ziet er natuurlijk nog niet echt goed uit. Wat je wilt is dat er een duidelijk kop aan het begin van de pagina staat, die opvalt. Hiervoor kun je een heading element gebruiken. heading elementen Deze elementen zien er als volgt uit: <h1> de kop met het grootste formaat </h1> <h2> de kop met een kleiner formaat </h2> <h3> de kop met een nog kleiner formaat </h3> <h4> de kop met een nog kleiner formaat </h4> <h5> de kop met een nog kleiner formaat </h5> <h6> de kop met het kleinste formaat </h6> We gebruiken heading elementen om koppen in onze pagina aan te geven net zoals we kopstijlen (heading styles) in MS Word gebruiken. Hier volgt een voorbeeld van hoe je headings en alinea's moet gebruiken. Het volgende stuk MS Word document gaan we vertalen naar HTML

8 In HTML ziet dit er als volgt uit. <h1> 1 Fruit </h1> <p> Fruit of ooft is een verzamelnaam voor een aantal eetbare vruchten van plantensoorten en -rassen (of van daarop gelijkende schijnvruchten zoals aardbei, vijg, ananas, appel en peer). </p> <p> In de volgende deelhoofdstukken behandelen we een aantal fruitsoorten. </p> <h2> 1.1 De appel </h2> <p> Appels groeien aan bomen. Deze bomen groeien in gematigde streken en veelal op het noordelijk halfrond. </p> <p> De vlezige vrucht bestaat uit een schil met daarin vruchtvlees en het klokhuis. Het klokhuis bevat de zaadjes (pitjes) en in het midden de vaatbundel naar het steeltje. </p> - 7 -

9 <h2> 1.2 De aardbei </h2> <p> Aardbeien groeien aan planten. Botanisch gezien is de aardbei een schijnvrucht. Er zijn meer dan twintig soorten aardbeien en van de geteelde aardbei zijn er vele honderden rassen. </p> <p> De rijpe rode, oranje of soms ook witte vrucht is de opgezwollen bloembodem met daar bovenop zaadjes, de dopvruchtjes. </p> <h1> 2 Groente </h1> <p> Groente is een eetbare plant of een deel ervan. Soms betreft het hier wilde planten, maar meestal gaat het om cultuurgewassen. </p> <p> In de volgende deelhoofdstukken behandelen we een aantal groenten. </p> <h2> 2.1 Prei </h2> <p>... </p> <h2> 2.1 Bloemkool </h2> <p>... </p> opgave 2.3 Zet in je HTML bestand, boven de twee bestaande tekstalinea's, een heading 1 element met daarin de tekst: IN AANBOUW! Druk in de browser op F5 (refresh) en kijk wat er gebeurt. Vervang het heading 1 element vervolgens door een aantal andere heading elementen. Kijk na elke verandering wat er gebeurt door in de browser op F5 te drukken. Tot nu toe ziet het er allemaal nogal saai uit dus we gaan het levendiger maken door plaatjes toe te voegen. het image element Dit element ziet er als volgt uit: <img src="een locatie" /> Dit is het eerste element dat je tegenkomt dat geen eind-tag heeft. Om aan te geven dat de tag zichzelf afsluit gebruiken we niet > maar /> aan het einde van de tag. Dit is ook het eerste element met een attribuut dat je tegenkomt. We moeten namelijk aangeven waar de browser het plaatje dat we willen laten zien kan vinden. Dit doen we door middel van het src (source of bron) attribuut

10 Je ziet dat Notepad++ attributen rood maakt. Let hier goed op, als je een attribuut niet rood ziet worden dan zit er dus een FOUT in je HTML code! Waar het plaatje staat geven we aan achter het isteken en tussen dubbele quotes. Dit stuk van het element noemen we de attribuutwaarde. We kunnen naar een plaatje wijzen door middel van een URL of een bestandsnaam. Laten we beginnen met de URL versie. opgave 2.4 Ga met een nieuwe tab in je webbrowser naar de volgende URL. Scroll naar beneden, klik met je rechter muisknop op het "under construction" plaatje en kies Afbeeldingslocatie kopiëren zoals je in de volgende afbeelding ziet. Voeg, boven het heading 1 element, een image element toe en plak de afbeeldingslocatie tussen de dubbele quotes (gebruik hiervoor de sneltoets CTRL-v). Druk in de browser op F5 (refresh) en kijk wat er gebeurt. Zoals je ziet vrolijkt een plaatje de boel op. Natuurlijk wil je ook graag eigen foto's in je pagina kunnen zetten. Je eigen foto's staan niet altijd makkelijk bereikbaar op het internet (al kan dat tegenwoordig wel vrij makkelijk via websites zoals Picasa en Facebook). We gaan nu kijken hoe je een plaatje dat gewoon op je PC staat in je pagina kunt laten zien

11 opgave 2.5 Ga met een nieuwe tab in je webbrowser naar de volgende URL. Download twee foto's die je bij jezelf vindt passen als JPG bestanden. Zet deze in dezelfde map als waar je inaanbouw.html bestand staat en noem de bestanden foto1.jpg en foto2.jpg. Voeg, na het laatste paragraph element, twee nieuw image elementen toe. Zet tussen de dubbele quotes na het src attribuut van het image image element de naam van het bestand met de eerste foto, dus foto1.jpg. Doe hetzelfde voor het tweede image element, maar gebruik nu foto2.jpg. Druk in de browser op F5 (refresh) en kijk wat er gebeurt. De foto's hebben waarschijnlijk niet de afmeting die je graag wilt en vallen daardoor teveel of te weinig op. Dat is niet wat je wilt. We gaan nu een aantal manieren bekijken om ervoor te zorgen, dat foto's zo groot worden afgebeeld als je zelf wilt. Hiervoor gaan we een tweetal nieuwe attributen van het image element gebruiken, te weten width en height. opgave 2.6 Als het goed is heb je in je HTML bestand de volgende regel staan. <img src="foto1.jpg" /> Stel je wilt dat het plaatje de volle breedte van je webbrowser beslaat. Je kunt dit doen door te zeggen dat het plaatje 100% breed moet zijn en dat doe je als volgt met width attribuut. <img src="foto1.jpg" width="100%" /> Voeg dit attribuut aan beide image elementen toe met waarde 100%, ververs je pagina en kijk wat er gebeurt

12 Als het goed is dan beslaan de foto's nu de volle breedte van je webbrowser. Links en rechts zie je nog wel kleine stukjes wit en dat klopt. Dat zijn de zogenaamde marges (kantlijnen) van je pagina. Later leer je hoe je die kunt veranderen. Als je je webbrowser niet op full screen zet en je schaalt je webbrowserscherm, dan zie je als het goed is dat de foto's ook schalen. Als we met procenten werken dan spreken we van relatieve afmeting. De afmeting van de foto's is nu afhankelijk van de afmeting van de webbrowser. opgave 2.7 Speel met de afmeting van je webbrowser en kijk of de foto's mee schalen. De foto's zijn ongetwijfeld erg groot en met name hoog. Hierdoor krijgen we een verticale scrollbar in onze pagina en dat willen we niet bij een "under construction" pagina. Naast relatieve afmetingen bestaan er ook absolute afmetingen. Daar ga je nu mee aan de slag. opgave 2.8 Aangezien we de hoogte van de foto's willen beperken gaan we nu het height attribuut gebruiken in plaats van het width attribuut. Bovendien gaan we absolute afmetingen gebruiken. Dit doen we door niet in procenten, maar in pixels (beeldschermpuntjes) te werken. Dat ziet er als volgt uit. height="200px" We zeggen hiermee dat we willen dat de foto 200 pixels hoog is. Vervang het width attribuut door het bovenstaande height attribuut met de bijbehorende waarde voor beide foto's, ververs je pagina en kijk wat er gebeurt. Als het goed is, zijn de foto's nu een stuk minder dominant in je pagina. Je ziet hopelijk ook dat de aspectratio (de verhouding tussen de hoogte en de breedte) van de foto's niet veranderd is. We hebben alleen de hoogte aangepast, maar de webbrowser snapt dat we het plaatje waarschijnlijk niet willen vervormen en past de breedte automatisch aan. Handig!

13 Waarschijnlijk staan je foto's nu niet meer onder elkaar maar naast elkaar. Stel dat wil je niet. Hoe los je dat op? opgave 2.9 Een mogelijk manier om de twee foto's onder elkaar te krijgen hebben we al gezien. Onze eerste twee stukken tekst stonden eerst ook naast elkaar, zie opgave 2.2, en die hebben we onder elkaar gezet door het paragraph element te gebruiken. Dat kan met afbeeldingen ook. Voeg op de juiste plaatsen paragraph elementen toe zodat de plaatjes onder elkaar komen te staan, ververs je pagina en kijk of het gelukt is. Nu is een plaatje niet echt een alinea en daarom is het wat vreemd, maar dus niet fout, om een paragraph element te gebruiken. Er is een alternatief en dat zien we in de volgende paragraaf. het break element Dit element ziet er als volgt uit: <br> We gebruiken het break element om de webbrowser te dwingen op een nieuwe regel te beginnen. Je kunt het vergelijken met de SHIFT-ENTER in Word. Je begint hiermee geen nieuwe alinea maar je kunt tekst binnen een alinea verder structureren. Je kunt het echter ook gebruiken bij andere elementen op je pagina zoals afbeeldingen. Het break element is ietwat vreemd. Formeel gezien zou je het als volgt moeten schrijven. <br /> Dit ziet er echter nogal overdreven uit en daarom doen we dit in de praktijk eigenlijk nooit. Het break element is één van de weinige elementen die in de praktijk vaak niet netjes wordt afgesloten

14 opgave 2.10 Haal de paragraph elementen om de laatste twee image elementen weg en zorg dat de foto's onder elkaar komen te staan door een break element te gebruiken. Ververs je pagina en kijk of het gelukt is. Als het goed is, zie je dat het gebruik van het break element een iets ander resultaat oplevert. Beredeneer zelf waarom dit het geval is. Zo nu hebben we een boel voorgedaan en is het tijd om te kijken of je zelf met de attributen van het image element kunt spelen. opgave 2.11 De twee afbeeldingen in je pagina zijn waarschijnlijk niet even breed. Verhelp dit probleem. Je moet hierbij absolute afmetingen gebruiken. Ververs je pagina en kijk of het gelukt is. het anchor element Nu onze pagina er al wat fleuriger uitziet is het tijd om gebruik te gaan maken van het belangrijkste feature van HTML. Zoals je hopelijk nog weet staan de eerste twee letters van de afkorting voor HyperText. Dat wil zeggen dat we vanuit een pagina naar een andere pagina kunnen linken. Hiervoor gebruiken we het anchor element (meestal link of ook wel link element genoemd) en dat ziet er als volgt uit. <a href="hier een correcte URL"> beschrijving </a> Het anchor element is dus het element waarmee het eigenlijk allemaal begonnen is. Een makkelijke manier, één muisklik, om van de ene pagina met informatie naar een andere te kunnen springen

15 opgave 2.12 Voeg, onder de laatste foto, een link (met een anchor element) toe naar de Google website ( met als beschrijving: Naar Google. Zorg dat de link op een nieuwe regel in de browser komt te staan. Ververs je pagina, klik op de link en kijk of het gelukt is. Hint: vergeet niet om in je link te gebruiken! Je hebt nu tekst getypt tussen de begin en eind-tag van het anchor element. Op die plek hoeft echter niet altijd tekst te staan, er kan bijvoorbeeld ook een plaatje staan. Op die manier kun je plaatjes gebruiken om te navigeren tussen pagina's. Dat ga je nu doen. opgave 2.13 Zorg ervoor, dat het element met foto2.jpg omgezet wordt naar een link. Dit doe je door het image element in een anchor element te zetten op de plaats van de beschrijving. Zorg dat je linkt naar de website waar dit plaatje te vinden is ( Ververs je pagina, klik op de afbeelding en kijk of het gelukt is. Hint: vergeet niet om in je link te gebruiken! Hopelijk valt het je op, dat wanneer je op een link klikt, je in de huidige tab naar een andere webpagina springt. Je kunt natuurlijk terug naar de vorige pagina met de pagina terug knop van je webbrowser, maar doorgaans vinden web ontwikkelaars het niet fijn als je van je eigen website weg navigeert in de huidige tab. Om dit te voorkomen heeft het anchor element een attribuut genaamd target. Dit attribuut heeft een heleboel waardes die je kunt bekijken op bijvoorbeeld w3schools. De attribuut waarde die op dit moment belangrijk is, is _blank

16 opgave 2.14 Voeg aan beide links, na het href attribuut, het attribuut target toe met als waarde _blank. Ververs je pagina, klik op de links en kijk wat er gebeurt. Als het goed is dan worden de links nu in een nieuwe tab geopend en staat je eigen webpagina nog steeds geladen in de oorspronkelijke tab. Dat is mooi, want dan zijn bezoeker minder geneigd je website te "vergeten", nadat ze op een link naar een andere website hebben geklikt. De volgende regels worden door de meeste web ontwikkelaars gehanteerd. Als je een link naar een externe (andere) website opneemt in je eigen website dan gebruik je altijd target="_blank" in die link. Als je een link naar een andere pagina op je eigen website opneemt dan doe je dit niet. Je wilt immers niet dat een bezoeker na verloop van tijd door de tabs het bos niet meer ziet! inspringen (indenteren) Je HTML bestand zou er nu als volgt uit kunnen/moeten zien. <!DOCTYPE html> <html> <head> <title> Under Construction </title> </head> <body> <img src=" /> <h3> IN AANBOUW! </h3> <p> Deze pagina is in aanbouw. </p> <p> Meer informatie volgt binnenkort. </p> <img src="foto1.jpg" width="300px" /> <br> <a href=" target="_blank"> <img src="foto1.jpg" width="300px" /> </a> <br> <a href=" target="_blank"> Naar Google. </a> </body> </html>

17 Je ziet, dat niet alle regels op dezelfde positie vanaf de linkerkant beginnen. Dat doen we bewust, het maakt de code namelijk makkelijker te lezen. We noemen dit inspringen (indenteren). Je kunt nu goed zien welke begin- en eind-tags bij elkaar horen en hoe de hiërarchie van tags in het bestand is. In de code tot nu toe maken we nog geen gebruik van lege regels, maar ook lege regels zijn belangrijk om code leesbaarder te maken. Met lege regels kun je een brok bij elkaar horende code scheiden van de rest van de code. Zeker wanneer je meer code hebt is dit essentieel. Het volgende is al leesbaarder dan hiervoor. <!DOCTYPE html> <html> <head> <title> Under Construction </title> </head> <body> <img src=" /> <h3> IN AANBOUW! </h3> <p> Deze pagina is in aanbouw. </p> <p> Meer informatie volgt binnenkort. </p> <img src="foto1.jpg" width="300px" /> <br> <a href=" target="_blank"> <img src="foto1.jpg" width="300px" /> </a> <br> <a href=" target="_blank"> Naar Google. </a> </body> </html> In welke taal je ook programmeert, zorg ALTIJD voor een nette lay-out en spring netjes en logisch in. Hierdoor is je code beter en makkelijker te lezen! Zeker als je ooit hulp vraagt aan iemand, als je een probleem met je code hebt, dan is een nette lay-out essentieel. Het kan anders zijn, dat die persoon je niet kan of wil helpen. Het kost die persoon dan namelijk extra veel tijd om je code te begrijpen

18 list elementen Er zijn twee soorten lists (lijsten) in HTML, de ordered (geordende) list en de unordered (ongeordende) list. De ordered list ziet er als volgt uit. <ol> <li> eerste list item </li> <li> tweede list item </li> <li> derde list item </li> </ol> De unordered list ziet er als volgt uit. <ul> <li> eerste list item </li> <li> tweede list item </li> <li> derde list item </li> </ul> De lijsten zou je moeten kennen uit Word. De ordered list maakt een genummerde lijst aan en de unordered list maakt een opsommingslijst (bullet list) aan. opgave 2.15 Je gaat nu de twee tekst paragrafen vervangen door een lijst. Hierin zet je tenminste drie topics neer waarover je website straks zal gaan. Probeer zowel een ordered list als een unordered list en kijk naar wat je in de browser ziet. Kies daarna de soort lijst die je het best vindt passen. Ververs je pagina steeds en kijk of het gelukt is

19 Nu ga je dingen combineren. opgave 2.16 Maak links van de topics in de lijst. Link naar websites waar je informatie over het betreffende topic kunt vinden. Ververs je pagina, klik op de links en kijk of het gelukt is. Je kunt ook lijsten in elkaar opnemen (nesten). Dus je kunt bijvoorbeeld een unordered list in een unordered list hebben, maar ook in een ordered list. Het volgende stuk code is een voorbeeld van geneste lijsten

20 Dit ziet er als volgt uit in je browser. commentaar Soms is het handig of zelfs noodzakelijk om commentaar in je HTML bestand op te nemen. Commentaar wordt door de webbrowser genegeerd en is alleen bedoeld om je code te verduidelijken. Commentaar ziet er als volgt uit.  Commentaar krijgt in Notepad++ een groene kleur. opgave 2.17 Zet de volgende regel commentaar boven de bovenste foto in je HTML bestand. Vul op de plaats van de puntjes het aantal pixels in dat je gebruikt hebt. Gebruik een width van... pixels voor beide afbeeldingen zodat ze even breed zijn. Ververs je pagina en kijk wat er gebeurt

21 soorten elementen Tot nu toe hebben we HTML elementen gezien, die doorgaans niet alleen gewone (platte) tekst kunnen bevatten maar ook andere HTML elementen. We spreken dan van zogenaamde block-level elementen. Deze elementen zien we doorgaans op een nieuwe regel in ons HTML bestand beginnen. Dit is een conventie (gewoonte) die de meeste web ontwikkelaars volgen. Er zijn echter ook elementen, die we gewoon tussen de tekst zetten, deze noemen we text-level elementen. Dit soort elementen bevat alleen gewone (platte) tekst en heel soms andere text-level elementen. Deze elementen beginnen we niet op een nieuwe regel! Nu volgen een aantal text-level elementen. emphasis element Dit element ziet er als volgt uit: <em> een stuk tekst </em> We gebruiken het emphasis element om een stuk tekst cursief te maken. Het is vergelijkbaar met de cursief of italics optie in Word. opgave 2.18 Maak de eerste letter van ieder topic in de lijst cursief. Ververs je pagina en kijk of het gelukt is. strong element Dit element ziet er als volgt uit: <strong> een stuk tekst </strong> We gebruiken het strong element om een stuk tekst vetgedrukt te maken. Het is vergelijkbaar met de vet of bold optie in Word. opgave 2.19 Maak de eerste letter van ieder topic in de lijst vet gedrukt in plaats van cursief. Ververs je pagina en kijk of het gelukt is

22 underline element Dit element ziet er als volgt uit: <u> een stuk tekst </u> We gebruiken het underline element om een stuk tekst te onderstrepen. Het is vergelijkbaar met de onderstreep of underline optie in Word. opgave 2.20 Onderstreep de tekst in het heading 3 element. Ververs je pagina en kijk of het gelukt is. Natuurlijk kun je text-level elementen ook nesten. Je kunt een stuk tekst dus zowel vet gedrukt als cursief als onderstreept maken. De volgorde waarin je de text-level elementen nest is hierbij niet belangrijk. Dus <strong> <em> tekst </em> </strong> is hetzelfde als <em> <strong> tekst </strong> </em>

23 3. HTML en een klein beetje CSS Je hebt intussen al best veel HTML elementen gezien. Er bestaan er natuurlijk nog veel meer. Je kunt een uitgebreide lijst vinden op w3schools. Als we meer controle over onze opmaak (markup) willen hebben, dan is HTML niet meer voldoende. In versies voor HTML 5 had ieder element zijn eigen verzameling attributen. In HTML 5 is dit afgeschaft, omdat het niet echt netjes en overzichtelijk is om je HTML bestanden te doorspekken met codes. Het is beter om de inhoud en de opmaak te scheiden. De inhoud hoort in HTML bestanden en voor de opmaak gebruiken we zogenaamde CSS bestanden. CSS (Cascading Style Sheets) bestanden bevatten de codes, die definiëren hoe de opmaak van de elementen in je HTML pagina eruit komen te zien in een browser. Deze opmaak definieer je dus zelf. In je HTML bestand kun je aangeven welk CSS bestand er gebruikt moet worden. De term cascading duidt aan, dat we een cascade (trapsgewijze stapeling) van stijlen kunnen gebruiken. Ondanks dat het goed is om opmaak van inhoud te scheiden, is het nog steeds mogelijk om de opmaak bij de inhoud te zetten. Dat kan met zogenaamde inline CSS (die je typisch in de head van je webpagina neerzet), maar het kan ook nog steeds met attributen. Het is in HTML 5 echter wel zo, dat er één standaard attribuut gebruikt wordt. Omdat het handig is om in het begin in één bestand te werken, gaan we in dit hoofdstuk zondigen tegen de regel dat we inhoud en opmaak moeten scheiden en mengen we een klein beetje CSS in ons HTML bestand. Dit gaan we doen door het style attribuut te gebruiken. fontgrootte Als we de fontgrootte (font-size of lettergrootte) aan willen passen, dan doen we dat als volgt: style="font-size: 10px" We kunnen deze stijlsoort in alle HTML elementen gebruiken waar tekst in geplaatst wordt. Het kan bijvoorbeeld in het body element, het paragraph element, een heading element, maar ook in een lijst. Hier komen wat voorbeelden. <body style="font-size: 40px"> <p style="font-size: 16px"> <h1 style="font-size: 20px"> <ol style="font-size: 8px">

24 opgave 3.1 Verander de fontgrootte van alle tekst in de body naar 10 pixels en de fontgrootte van alle tekst in je lijst naar 20 pixels. Ververs je pagina en kijk of het gelukt is. Valt je iets op? Hier zie je het effect van cascading. We zeggen dat de fontgrootte van de body 10 pixels moet zijn, maar als we vervolgens van een element in de body, bijvoorbeeld de unordered list, zeggen dat het font 20 pixels moet zijn, dan weegt dat laatste zwaarder. We noemen dat overruling. Haal de fontgrootte verandering van het body element weer weg, dit is namelijk niet wat je doorgaans wilt. Bij fontgrootte kennen we ook absolute en relatieve instellingen, net als bij de hoogte en breedte van afbeeldingen. In de voorbeelden hiervoor gebruiken we pixels en is er daarom sprake van een absolute instelling. Andere maten voor absolute instellingen zijn pt (punten; vergelijkbaar met de fontgrootte in Word), cm (centimeter) en in (inches). Er is echter ook een eenheid voor relatieve instelling en die noemen we de em. 1 em komt overeen met de op dat moment geldende fontgrootte. Als er nergens een absolute fontgrootte is ingesteld, dan is 1 em gelijk aan de default (standaard) fontgrootte van het op dat moment gebruikte font. tekstkleur Als we de tekstkleur (color) aan willen passen, dan doen we dat als volgt: style="color: red" We kunnen deze stijlsoort in alle HTML elementen gebruiken waar tekst in geplaatst wordt. Het kan bijvoorbeeld in het body element, het paragraph element, een heading element maar ook in een lijst. Hier komen wat voorbeelden. <body style="color: red"> <p style="color: blue"> <h1 style="color: green"> <ol style="color: #F0CCF0">

25 In het laatste voorbeeld herken je hopelijk wat je bij de module talstelsels hebt geleerd. Hier wordt een RGB kleurwaarde uitgedrukt als een hexadecimaal getal. In plaats van de 0x prefix, gebruikt HTML de #. Het mooie aan het style attribuut is, dat je er meerdere instellingen tegelijk mee kunt doen. Zo kun je in één keer, voor bijvoorbeeld het heading 3 element, zowel de tekstkleur als de fontgrootte aanpassen. Dat doe je als volgt. <h3 style="color: orange; font-size: 40pt"> opgave 3.2 Pas de instelling hierboven toe in je HTML bestand en kijk wat er gebeurt. Ververs je pagina en kijk of het gelukt is. Sommige kleuren hebben gedefinieerde namen, deze zijn handiger en leesbaarder dan de hexadecimale RGB waardes. Je kunt er echter niet alle kleuren mee aanduiden. Je kunt kleurnamen bekijken op bijvoorbeeld w3schools. Nog een manier om kleuren aan te geven is via de RGB() functie. Aan deze functie geef je drie decimale waardes mee van en met 0 tot en met 255. De eerste waarde staat voor de rood component, de tweede voor de groen component en de derde voor de blauw component van de kleur. Bijvoorbeeld RGB(100,200,100). Op deze manier kun je wel alle kleuren maken, maar hoef je niet met hexadecimale getallen te werken. font type Als we het font type (font of lettertype) aan willen passen, dan doen we dat als volgt: style="font-family: Courier New" We kunnen deze stijlsoort in alle HTML elementen gebruiken waar tekst in geplaatst wordt. Het kan bijvoorbeeld in het body element, het paragraph element, een heading element maar ook in een lijst. Hier komen wat voorbeelden. <body style="font-family: Verdana"> <p style="font-family: Courier New"> <h1 style="font-family: Freestyle Script"> <ol style="font-family: Arial">

26 opgave 3.3 Breid de opmaak van het heading 3 element zo uit, dat het Freestyle Script font wordt gebruikt. Ververs je pagina en kijk of het gelukt is. Niet alle fonts zijn standaard op alle computers geïnstalleerd. Gelukkig kun je ervoor zorgen, dat er een ander font wordt gekozen wanneer een opgegeven font niet bestaat. Je kunt namelijk achter font-family meerdere fonts opgeven gescheiden door komma's. De webbrowser probeert deze dan in volgorde uit, tot er één gevonden wordt, die geïnstalleerd is. Het is daarom verstandig om als laatste font in de lijst altijd een universeel beschikbaar font te nemen zoals Arial of Times New Roman. Dat ziet er als volgt uit. style="font-family: Verdana, Arial" opgave 3.4 Beveilig de font type opmaak van het heading 3 element met het Arial font. Ververs je pagina en kijk of het gelukt is. Hopelijk zie je, dat je HTML bestand al enigszins onoverzichtelijk en lastiger leesbaar begint te worden. Hier zie je één van de redenen om opmaak en inhoud van elkaar te scheiden! achtergrondkleur Ondanks dat we een paar foto's op onze webpagina hebben staan is deze nogal kleurloos. Daarom gaan we met achtergrondkleuren werken. Als we de achtergrondkleur (background-color) aan willen passen, dan doen we dat als volgt: style="background-color: brown"

27 We kunnen deze stijlsoort in alle HTML elementen gebruiken die plek innemen op de daadwerkelijke pagina. Het kan bijvoorbeeld in het body element, het paragraph element, een heading element maar ook in een lijst. Hier komen wat voorbeelden. <body style="background-color: brown"> <p style="background-color: yellow"> <h1 style="background-color: red"> <ol style="background-color: green"> Ook bij de achtergrondkleur geldt weer, dat deze gewoon naast andere opmaak geplaatst kan worden. opgave 3.5 Verander de achtergrond kleur van de body aan naar MintCream. Ververs je pagina en kijk of het gelukt is. Dit is een heel lichte achtergrond, maar het breekt de pagina net iets meer dan een witte achtergrond. Je kunt natuurlijk een fellere achtergrond nemen, maar dan loop je het risico, dat deze te dominant wordt in je pagina. tekstuitlijning Als we tekst willen uitlijnen (text-align), dan doen we dat als volgt: style="text-align: center" We kunnen deze stijlsoort in alle HTML elementen gebruiken waar tekst in geplaatst wordt. Het kan bijvoorbeeld in het body element, het paragraph element, een heading element maar ook in een lijst. Er zijn een aantal mogelijk waardes voor text-align: left, center, right en justify. De laatste waarde is hetzelfde als uitvullen in Word, alle regels worden op die manier even lang

28 opgave 3.6 Zorg dat de tekst van het heading 3 element, de lijst en de link naar Google worden gecentreerd. Zorg dat de al bestaande opmaak behouden blijft. Let op: Het centreren van de link naar Google is lastig, als dat niet lukt, lees dan verder. Ververs je pagina en kijk of het gelukt is. Het centreren van de Google link is lastig. Je kunt text-align namelijk niet gebruiken in een anchor element. Een mogelijk oplossing is het anchor element in een paragraph element te zetten en dat te centreren. Kleuren en kleurcombinaties zijn altijd lastig. Om te zien welke kleuren goed bij elkaar passen, kun je websites gebruiken zoals Adobe en Paletton. Via deze websites kun je onder andere kleurenschema's samenstellen. afbeeldingen centreren Je begrijpt hopelijk, dat je in een image element geen text-align kunt gebruiken. In de versies voor HTML 5 was er een makkelijke manier om te centreren met het center element. Dit ziet er als volgt uit: <center>... </center> Officieel mag je dit element niet meer gebruiken, maar de meeste webbrowsers ondersteunen het center element nog wel. Voor afbeeldingen en tabellen is het center element echter bijzonder handig en mag je van mij gebruiken. opgave 3.7 Centreer alle afbeeldingen op je pagina. Ververs je pagina en kijk of het gelukt is

29 De pagina is nu te lang, ze heeft namelijk een verticale scrollbar. opgave 3.8 Zorg dat de twee onderste foto's naast elkaar komen te staan, maar wel gecentreerd staan. Zorg ook dat de foto's dezelfde hoogte hebben in plaats van dezelfde breedte en dat alles op 1 pagina past! Ververs je pagina en kijk of het gelukt is. Hopelijk heb je ook het commentaar aangepast! Je zou nu een pagina moeten hebben, die er ongeveer als volgt uitziet

30 4. meer HTML Als het goed is heb je intussen een aardige "under construction" webpagina. Deze pagina ga je nu aanpassen om te oefenen met een aantal nieuwe HTML elementen. tabellen Vroeger werden tabellen veel gebruikt om een webpagina in diverse delen of gebieden op te delen. Gelukkig hebben we daar in HTML 5 andere elementen voor, waar we het hierna over gaan hebben. Tabellen zijn echter nog steeds handig om informatie overzichtelijk te presenteren. Je zou de lijst met topics, die later op je webpagina gaan komen, bijvoorbeeld kunnen vervangen door een tabel. Laten we eerst eens kijken hoe dat er uitziet. De globale structuur van een tabel ziet er als volgt uit: <table> <tr> <th> topic </th> <th> link </th> </tr> <tr> <td> MMORPG </td> <td>... </td> </tr> <tr> <td> heavy metal </td> <td>... </td> </tr> <tr> <td> natuurkunde </td> <td>... </td> </tr> </table> Hierbij staat: tr voor table row, een rij (horizontaal) in de tabel th voor table header, een kop cel in de tabel td voor table data, een data cel in de tabel Door data cellen achter elkaar in een rij te zetten worden kolommen (verticaal) gecreëerd. opgave 4.1 Vervang de lijst op je pagina door een tabel. Laat de formattering die in de lijst was toegepast nog even weg in de tabel. Zorg wel, dat je de tabel centreert! Ververs je pagina en kijk of het gelukt is

31 Een beetje saaie tabel en ook niet bijster overzichtelijk. Daar ga je wat aan doen, want dat kan natuurlijk niet in onze mooie webpagina. Je gaat daarom een rand toevoegen. Hiervoor gebruik je het border attribuut. Dat ziet er als volgt uit. border="1px" opgave 4.2 Zorg dat je een tabelrand van 2 pixels voor je tabel definieert. Ververs je pagina en kijk of het gelukt is. Het is altijd netjes om een bijschrift (caption) bij een tabel te hebben. Daar hebben we een element voor dat caption heet. Dat ziet er als volgt uit. <caption> het bijschrift </caption> opgave 4.3 Voeg boven in de tabel een zinvol bijschrift toe en zorg dat dit vetgedrukt is. Ververs je pagina en kijk of het gelukt is. padding De inhoud van de cellen staat nogal dicht op elkaar. Ook dat kunnen we verhelpen. Hiervoor gebruiken we padding. Dit is de afstand tussen de inhoud en de rand van een element. Hiervoor bestaat geen HTML element, omdat het een eigenschap van elementen is. Daarom moet je een CSS stijl gebruiken. Dat ziet er als volgt uit: style="padding: 10px" Het nadeel is, dat we padding, en dus de stijl, moeten toevoegen aan alle th en td elementen. Toch gaan we dat nu even doen om te laten zien dat dit vervelend is. Later zullen we het eleganter oplossen

32 opgave 4.4 Voeg aan alle td en td elementen van de tabel een padding van 5 pixels toe. Ververs je pagina en kijk of het gelukt is. Aan tabellen kun je nog veel meer configureren, op w3schools kun je zien wat je allemaal met tabellen kunt. Dat is alleen nog maar het HTML deel, met CSS kun je nog veel meer. Nog één kleine oefening en dan gaan we verder. marges Je ziet dat de foto's onder de tabel heel dicht op de tabel staan. Dit kunnen we verhelpen door een marge (margin) in te stellen voor de tabel. Een marge is de afstand tussen een element en de elementen er omheen. Dit is dus iets anders dan de padding, want dat is de afstand tussen de inhoud van een element en de rand van dat element. Ook voor de marge bestaat geen HTML element en gebruik je een CSS stijl. Dat ziet er als volgt uit: style="margin: 15px" opgave 4.5 Voeg aan de tabel een marge van 20 pixels toe. Ververs je pagina en kijk of het gelukt is. gebieden Als je naar een webpagina kijkt, dan kun je daarin meestal een aantal gebieden onderscheiden. Typisch is er een header, een navigatie gedeelte, een gedeelte voor de inhoud en soms ook nog een footer. Deze kun je op veel manieren indelen en rangschikken. Een voorbeeld zie je in Figuur 1. Gebieden kun je maken met behulp van div (dividers) elementen al zijn deze in HTML5 officieel vervangen door section elementen. Toch wordt de div ook nog veel gebruikt. Laten we gewoon eens gaan spelen met div elementen. Het ziet er als volgt uit. <div id="...">... </div>

33 Figuur 1: Een mogelijk indeling van een webpagina in gebieden. We geven gebieden altijd een naam en dat doen we meestal via een zogenaamd ID (identifier). Dit is een attribuut van het div element. opgave 4.6 Laten we onze webpagina in 3 gebieden opdelen. Bovenin een header, daaronder de inhoud en daaronder de footer. In de header komt het "under construction" plaatje te staan en de tekst IN AANBOUW!. In de footer komt de link naar Google en de rest komt in het inhoud stuk. Het ID voor de header div wordt header, het ID voor de div met de inhoud wordt content en het ID voor de footer div wordt footer. Zet de div elementen netjes onder elkaar in je HTML bestand en laat een lege regel ertussen. Zorg dat je alles netjes inspringt! Ververs je pagina en kijk of het gelukt is

34 Als je de pagina ververst, dan zie je niets veranderen aan hoe de webpagina eruit ziet. En dat klopt, want we hebben alleen gebieden aangegeven. We hebben de gebieden nog niet opgemaakt. Laten we dat eens gaan doen. opgave 4.7 Verander de achtergrondkleur van de header en de footer in de kleur BlanchedAlmond. Als je niet meer weet hoe je een achtergrondkleur instelt, kijk dan in paragraaf achtergrondkleur. Ververs je pagina en kijk of het gelukt is. Als het goed is, dan zie je dat het stuk inhoud nog steeds de achtergrondkleur van de body gebruikt, maar dat de header en footer nu hun eigen achtergrondkleur hebben. De header is groot en ziet er niet echt geweldig uit. Dit ga je nu veranderen. Het uiteindelijke resultaat moet er als volgt uit komen te zien

35 Zoals je ziet, moet de afbeelding naast de tekst komen te staan. Hiervoor gebruik je één van de volgende stijlen. style="float: left" style="float: right" Deze moet je bij de elementen toevoegen die we naast elkaar willen zetten. opgave 4.8 Stap 1: Zorg dat de afbeelding in de header naar links schuift en de tekst naar rechts. Haal de opmaak die centreert in beide gevallen weg, aangezien deze nu overbodig is! Ververs je pagina en kijk of het gelukt is. Je ziet nu dat de header helemaal verdwenen lijkt te zijn. Door de elementen te laten schuiven, koppelt de browser ze los van de header div. Daarom moet je de header een hoogte geven. Stap 2: De afbeelding is best groot. Maak deze 200 pixels hoog en dan heb je ook meteen een hoogte voor de header. Voer deze wijzingen door. Ververs je pagina en kijk of het gelukt is. Je ziet nu, dat je de header weer ziet. Als gevolg zie je ook, dat het laatste stuk tekst buiten de header gaat vanwege het font. Dit kun je voorkomen door padding in te stellen voor de header. Stap 3: Stel een padding van 20 pixels in voor de header. Ververs je pagina en kijk of het gelukt is. De afbeelding en tekst in de header staan nu best ver uit elkaar en dat is niet mooi. Zeker op een breedbeeld scherm is dit onoverzichtelijk. Dat ga je nu oplossen door een extra div element te introduceren dat de andere drie div elementen bevat. Je gaat nu dus div elementen nesten. Stap 4: Zet om de drie bestaande div elementen een nieuw div element met ID page. Je mag nu een uitzondering maken met inspringen door de <div> tag op gelijke hoogte te zetten met de <body> tag. Voor de eind

36 tag geldt natuurlijk hetzelfde. Verhuis de achtergrondkleur van het body element naar het nieuwe div element en maak het nieuwe div element 900 pixels breed. Ververs je pagina en kijk of het gelukt is. Je ziet nu, dat je een smallere pagina hebt, alleen staat alles nu aan de linkerkant. Dat kun je oplossen door te centreren. De handigste manier hiervoor is de marge van het div element met ID page de waarde auto te geven. Dat betekent dat de webbrowser automatisch de marges van het element bepaalt. Stap 5: Zet de marge van het div element met ID page op automatisch. Ververs je pagina en kijk of het gelukt is. Je ziet nu, dat je het gewenste resultaat krijgt. Dit ziet er compact en overzichtelijk uit. In plaats van het div element te gebruiken, kun je ook het section element gebruiken. Dat is eigenlijk zoals het hoort in HTML 5. Daarnaast zijn er nog een aantal speciale elementen in HTML 5 die specifieke gebieden aangeven op een verkorte manier. Dit zijn: header, footer en nav. Door deze te gebruiken ziet je HTML code er compacter uit. opgave 4.9 Vervang de header en footer div elementen door de header en footer elementen. Vervang alle div elementen door section elementen. Ververs je pagina en kijk of het gelukt is. Als het goed is, verandert er niets. Dat komt omdat section elementen hetzelfde doen als div elementen. In het volgende hoofdstuk gaan we met CSS aan de slag en dan zullen we nog dieper op gebieden ingaan

37 span Zoals gezegd, moet je een webpagina, op het hoogste niveau, in gebieden verdelen (divide) met behulp van div of section elementen. Als we kleinere gedeeltes, zoals een stuk tekst, op een webpagina willen vormgeven gebruiken we het span element. Net als andere elementen kun je bij het span element het style attribuut gebruiken om hetgeen dat binnen de span staat vorm te geven. Stel je wilt een aantal woorden rood en vet maken in een zin. Bijvoorbeeld de woorden vruchten en schijnvruchten in het volgende stuk tekst. Dat kun je als volgt doen. <p> Fruit of ooft is een verzamelnaam voor een aantal eetbare <span style="color: red; font-weight: bold"> vruchten </span> van plantensoorten en -rassen (of van daarop gelijkende <span style="color: red; font-weight: bold"> schijnvruchten </span> zoals aardbei, vijg, ananas, appel en peer). </p>

38 5. CSS In de voorgaande hoofdstukken heb je stiekem al heel wat CSS gezien. De CSS staat daar alleen tussen de HTML en dat is niet wat we willen. In het HTML bestand dat je nu hebt gemaakt, staat meer vormgeving dan inhoud en dat is niet de bedoeling. Daarom gaan we je nu leren hoe je deze vormgeving in een apart CSS bestand doet. opgave 5.1 Maak in de map waar je inaanbouw.html bestand staat een nieuw bestand aan dat inaanbouw.css heet. Als je niet meer weet hoe dat moet, kijk dan bij opgave 2.1 hoe het moet. Open het CSS bestand in Notepad++, net zoals je het HTML bestand geopend hebt. Als het goed is heb je nu twee tabs in Notepad++, één voor het HTML bestand en één voor het CSS bestand. Wat we nu gaan doen, is in een aantal stappen de CSS code uit het HTML bestand in het CSS bestand zetten. Controleer telkens goed dat je snapt wat je gedaan hebt en of de webpagina er nog correct uitziet. opgave 5.2 Allereerst ga je een verwijzing (link) naar het CSS bestand in je HTML bestand zetten, zodat het HTML bestand het CSS bestand kan vinden en gebruiken. Dit doe je door, in je HTML bestand, in het head element de volgende regel toe te voegen. <link type="text/css" rel="stylesheet" href="inaanbouw.css" /> Het belangrijkste attribuut is de href (hypertext reference) waarin je de naam van het CSS bestand dat je aangemaakt hebt aangeeft. De andere twee attributen zijn standaard en geven het type en de relatie aan. Omdat het CSS bestand leeg is ga je nog niks van deze toevoeging merken, dat komt dadelijk

39 opgave 5.3 Het eerste element waarin we CSS vormgeving tegenkomen is het gebied met ID page. Daar zien we immers een style attribuut. Het eerste dat je doet, is alles wat tussen dubbele quotes staat achter het style attribuut naar het CSS bestand verhuizen. Wat je overhoudt van het style attribuut verwijder je, zodat er alleen nog <section id="page"> staat. Ververs je pagina en kijk wat er gebeurt. Als het goed is ben je nu je MintCream achtergrondkleur kwijt en is de pagina weer breed geworden. Dat klopt, de code in het CSS bestand is namelijk niet correct. Dat ga je nu fixen. Om iets te kunnen vormgeven via ons CSS bestand moet je aangeven wat je wilt vormgeven. De code die je hebt gekopieerd komt uit het section element met ID page. Daarom moet je in het CSS bestand aangeven, dat de code bij het ID page hoort. Dit doe je door middel van een selector. In het geval van een ID, doe je dat via een # met daarachter het ID. Dat ziet er als volgt uit. #page { } Vervolgens verhuis je de tekst die je gekopieerd had binnen de accolades, dus na { en voor }. Het is een goede gewoonte om elke commando op een nieuwe regel te zetten, in te springen en elk commando met een puntkomma af te sluiten. Een commando bestaat uit een property gevolgd door een dubbele punt met daarachter een property waarde. Je krijgt dan het volgende. #page { background-color: MintCream; width: 900px; } Ververs de pagina en kijk wat er gebeurt

40 Als het goed is, is de achtergrondkleur weer terug en is de pagina weer smal. Feitelijk heb je niet echt iets veranderd aan het uiterlijk van je pagina, maar alleen de vormgeving van de inhoud gescheiden. Zorg dat je goed snapt wat je zojuist gedaan hebt en waarom, want je gaat dit hierna zelf doen. opgave 5.4 Het volgende element waarin we CSS vormgeving tegenkomen is het header element. Daar zien we namelijk het volgende style attribuut. Omdat we nu te maken hebben met een element zonder ID, heeft de selector een andere vorm. De selector krijgt nu dezelfde naam als het element in het HTML bestand waar we naar verwijzen. In dit geval dus header. Dat ziet er als volgt uit. header { } Probeer nu zelf de stappen die je in de vorige opgave hebt gedaan te doorlopen en de vormgeving naar het CSS bestand te verhuizen voor het header element. Ververs de pagina en kijk of het gelukt is. Als het niet gelukt is vraag iemand om je goed uit te leggen wat je moet doen. Het is belangrijk dat je dit snapt! Als je het HTML bestand volgt op jacht naar style attributen, dan kun je stap voor stap alle opmaak overzetten naar het CSS bestand

41 opgave 5.5 Het volgende element met CSS vormgeving is het image element. Dit is een interessant geval. Het element heeft namelijk ook height attribuut. Dit attribuut kun je onderbrengen in het style attribuut. Op die manier kun je het verhuizen naar het CSS bestand. Dat ziet er als volgt uit. <img src="..." style="height: 200px; float: left" /> Doorloop nu weer zelf de stappen die je in de vorige opgaves hebt gedaan en verhuis de vormgeving voor het image element. Ververs de pagina en kijk of het gelukt is. Als het niet gelukt is vraag dan nog een keer om hulp. Het is helemaal niet erg als je dit niet meteen snapt! Hopelijk valt je op dat de opmaak van de twee foto's onderaan de pagina ook veranderd is. Dat wil je eigenlijk niet. Je wilt alleen de opmaak van de "under construction" afbeelding veranderen. Toch is het logisch dat het gebeurt, want we hebben gezegd, dat alle image elementen de opmaak krijgen. Je wilt de image elementen van elkaar kunnen onderscheiden. Dit kun je doen door de "under construction" afbeelding een ID te geven. opgave 5.6 Geef de "under construction" afbeelding het ID underconstr. Zorg vervolgens dat je specifiek naar het ID verwijst en niet meer in het algemeen naar alle image elementen. Ververs de pagina en kijk of het gelukt is

42 De volgende stap is weer makkelijk. opgave 5.7 Verhuis de opmaak voor het heading 3 element. Ververs de pagina en kijk of het gelukt is. Vervolgens komen we bij de tabel. Helaas kun je het border attribuut niet in het style attribuut stoppen. Dus het verhuizen van de opmaak van de tabel is makkelijk. Het wordt interessanter bij de cellen van de tabel. Je ziet nu immers 8 keer dezelfde formattering. Als je met id attributen gaat werken, dan moet je 8 keer dezelfde opmaak in je CSS bestand zetten. Een ID moet immers uniek zijn (al dwingt een webbrowser dat meestal niet af). Dat is onoverzichtelijk en onzinnig. Je wilt maar 1 keer de opmaak in het CSS bestand hebben. De oplossing hiervoor is het class attribuut. Dit geeft een klasse of groep van elementen aan, die op een gelijke manier vormgegeven moeten worden. Dit voorkomt duplicatie (herhaling) van code. opgave 5.8 Geef alle th en td elementen een class attribuut genaamd tcell. Maak in het CSS bestand een selector aan die verwijst naar de class tcell. In het geval van een klasse, doe je dat via een punt met daarachter de naam van de klasse. Dat ziet er als volgt uit..tcell { } Dit werkt dus bijna hetzelfde als bij een ID, alleen gebruik je nu geen # voor de selector maar een punt. Zet vervolgens de juist opmaak in de selector. Ververs de pagina en kijk of het gelukt is. Zo dat ruimt lekker op. Je ziet dat je HTML bestand intussen al veel overzichtelijker is geworden. Je kunt nu zelf de rest van de opmaak in het HTML bestand opruimen. De opmaak code die nog over is, is minimaal en deze verplaatsen naar het

43 CSS bestand levert niet bijster veel leesbaarheid op. Toch wordt de afspraak dat we geen style attributen in onze HTML bestanden hebben en dus alles in het CSS bestand doen. Daar gaan we. opgave 5.9 Verhuis de overgebleven style attributen naar het CSS bestand. Vergeet de opmaak van het table element niet mee te nemen! Ververs de pagina en kijk of het gelukt is. Als je nu in je HTML bestand zoekt naar de het stuk tekst style=, dan vind je dit stuk tekst als het goed is niet meer. Je weet dan zeker dat je geen opmaak meer hebt in je HTML bestand. Als het goed is heb je nu in je CSS bestand een selector naar een paragraph element staan. Dat is op zich gevaarlijk, want dat betekent dat de opmaak voor alle paragraph elementen geldt en dat wil je doorgaans niet. Gelukkig kun je in CSS gebruik maken van scope (afbakening). Dit kun je doen door selectors achter elkaar te zetten. Je kunt bijvoorbeeld footer p { gebruiken als selector in plaats van p {. Dat betekent dat niet meer alle paragraph elementen door de opmaak worden beïnvloed, maar alleen de paragraph elementen die je in het footer element gebruikt. opgave 5.10 Zorg dat je de footer element scope toevoegt bij de selector voor het paragraph element. Ververs de pagina en kijk of het gelukt is. Tip: Je kunt testen of het werkt door ergens in je pagina, buiten het footer element, een paragraph element toe te voegen. Tot slot hebben we nog de height attributen in de twee foto's onderaan de pagina. Deze kun je laten staan, maar je zou ze ook kunnen verhuizen naar het CSS bestand. Hier ligt weer de uitdaging dat je niet een selector naar het algemene image element wilt laten wijzen. Een mogelijk oplossing is gebruik maken van scope. Een andere mogelijke oplossing is class attributen toevoegen. De laatste oplossing is in dit geval het meest elegant

44 opgave 5.11 Verhuis de height attributen in de twee foto's onderaan de pagina naar het CSS bestand. Ververs de pagina en kijk of het gelukt is. Je hebt intussen al heel wat geleerd over HTML & CSS. Toch is er nog veel en veel meer. Teveel om allemaal te behandelen en teveel om allemaal in één website te stoppen. Veel dingen moet je gaandeweg zelf leren door dingen op te zoeken en uit te proberen. Een goed startpunt is w3schools maar er zijn nog talloze andere websites

45 6. extra HTML oefeningen In dit hoofdstuk staan nog 3 opgaves, die je optioneel kunt maken. Deze opgaves laten je nog wat meer geavanceerde HTML dingen ontdekken. opgave 6.1 In je website moet je af en toe speciale karakters gebruiken. Als je bijvoorbeeld het woord één wilt gebruiken dan moet je een é in je website kunnen zetten. Een overzicht van HTML symbolen vind je onder andere op w3schools. Voeg, tussen de twee foto's onderaan de pagina, de tekens (harten, schoppen, klaveren en ruiten) op speelkaarten toe. Ververs de pagina en kijk of het gelukt is. opgave 6.2 De bullets van de unordered list zijn doorgaans een beetje saai. Je kunt ze echter ook opleuken door er een plaatje voor te kiezen. Maak van de topics in de tabel weer een unordered list. Verander de bullets van deze lijst door de afbeelding in de volgende URL. Informatie hierover kun je onder andere vinden op w3schools. Zorg dat je netjes de tabel opruimt, ook in het CSS bestand. Ververs de pagina en kijk of het gelukt is

46 opgave 6.3 In CSS heb je ook selectors die voorafgegaan worden door een dubbelepunt. Dit zijn speciale selectors die vaak van toepassing zijn op andere selectors. Links hebben een aantal van deze CSS selectors. Hiermee kun je de vormgeving van een link veranderen. De belangrijkste zijn: link visited hover active Zoek zelf uit hoe deze selectors werken en wat het effect is. Ververs de pagina en kijk of het gelukt is

47 7. angry puppy In dit hoofdstuk ga je de website uit Figuur 2 transformeren in die uit Figuur 3. De site uit Figuur 2 is gebaseerd op een lege style sheet die je in dit hoofdstuk gaat vullen met relevante CSS code. Dit ga je doen aan de hand van een serie opgaven. In deze opgaven krijg je hints om je te helpen met zoeken naar de oplossing, maar het is de bedoeling dat je zelf op zoek gaat naar hoe dingen werken! Figuur 2: start situatie

48 Figuur 3: eind situatie De HTML code ziet er als volgt uit en kun je kopiëren naar een eigen HTML bestand. Deze code is afkomstig uit "Introduction to CSS" van de Codecademy website. <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="angry-puppy-stylesheet.css" /> <title>angry Puppy</title> </head> <body> <div id="header"> <div id="navbar"> <ul> <li>home</li> <li>about Me</li> <li>plans for World Domination</li> <li>contact</li> </ul> </div> <h2>about Me</h2> </div> <div id="left"> <img src=" />

49 <p>i am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p> </div> <div id="right"> <table> <th colspan="3">my Bros</th> <tr> <td><img src=" 1_zps5666b8e7.jpg" /></td> <td><img src=" 2_zps1539e6b2.jpg" /></td> <td><img src=" 3_zps4692eafa.png" /></td> </tr> <tr> <td><img src=" 4_zps63ff5aa8.jpg" /></td> <td><img src=" 5_zps0ee0d2c8.jpg" /></td> <td><img src=" 6_zpsc4450a60.jpg" /></td> </tr> <tr> <td><img id="bottom_left" src=" /></td> <td><img src=" 8_zps9a1469be.jpg" /></td> <td><img id="bottom_right" src=" /></td> </tr> </table> </div> <div id="footer"> <div id="button"> <p>send me an <span class="bold"> </span>!</p> </div> </div> </body> </html> Vervolgens ga je in een CSS bestand genaamd angry-puppy-stylesheet.css de CSS code zetten. opgave 7.1 We beginnen met een makkelijk stuk. Je gaat het body element een achtergrond kleur geven. Kies de kleur b7d1c4 en test of het werkt

50 opgave 7.2 Nog een makkelijk stuk is de algemene alinea opmaak. Je gaat het p element een lettertype en -grootte geven. Kies het lettertype Tahoma en een grootte van 1 em. opgave 7.3 Vervolgens gaan we het navigatie menu goed zetten. Hiervoor moeten we zorgen dat li elementen niet onder elkaar maar naast elkaar worden gezet. Hint: de benodigde property heet display. Verder willen we dat er geen bullets in het ul element staan. Hint: de benodigde property heet list-style-type. Nu gaat het moeilijker worden. We gaan namelijk naar positionering kijken. Elementen worden standaard (default) als static gepositioneerd. Dat wil zeggen dat het element geplaatst wordt op de locatie waar het in het HTML bestand staat. Buiten static positionering bestaan ook absolute, relative en fixed. De makkelijkst te gebruiken positionering is fixed. Deze manier is echter ook het minst flexibel. Bij fixed positionering wordt een element gepositioneerd ten opzichte van de oorsprong van het browser venster. Hierbij ligt de oorsprong (het nulpunt) in de linker bovenhoek. De oorsprong heeft coördinaten (x, y) die gelijk zijn aan (0, 0). Relative positionering is iets ingewikkelder. Hierbij wordt een element gepositioneerd ten opzichte van de locatie die het element zou krijgen als het static gepositioneerd zou zijn. De moeilijkste manier van positioneren is absolute. Hierbij wordt een element gepositioneerd ten opzichte van het eerste container element dat een positionering gebruikt anders dan static. Als zo'n element niet bestaat dan wordt er gepositioneerd ten opzichte van het html element. Een container element is een element dat dit element bevat, dit heet ook wel een ancestor/parent (voorouder/ouder) element

51 opgave 7.4 Je gaat nu het header div element en de elementen daarin vormgeven. Dit doe je in een aantal stappen. Test na elke stap of het werkt. 1. Eerst ga je de header (het div element met id header) positioneren en vormgeven. o Positioneer het element relative. Benodigde property heet position. o Gebruik 3c4543 als achtergrondkleur. o Zorg dat de bovenhoeken rond worden met een radius van 15 pixels. Benodigde properties heten border-topleft-radius en border-top-right-radius. 2. Je ziet nu dat de kop met tag h2 nog nauwelijks leesbaar is. Daarom gaan we deze vormgeven. o Neem Verdana als font. o Maak de tekst vetgedrukt (hiervoor gebruik je de fontweight property). o Gebruik acd1b2 als tekstkleur. o Centreer de tekst. o Neem een top en bottom padding van 25 pixels. 3. Voor de tekst van de list items (li) geldt hetzelfde als voor de kop h2. Bovendien willen we van deze list items ons menu maken waarin we "buttons" nadoen. Deze ga je daarom als volgt vormgeven. o Neem Futura als font met Tahoma als back-up. o Gebruik wit als tekstkleur. o Neem overal een padding van 5 pixels. o Maak een solid border die zwart en 2 pixels dik is. o We willen ronde "buttons", dus neem een radius van 5 pixels (hiervoor gebruik je de border-radius property). o Gebruik cc0323 als achtergrondkleur voor de "buttons". 4. Hopelijk is het je opgevallen dat onze lijst onderdeel is van het navbar element. Oftewel van onze navigatie balk. Deze kunnen we gebruiken om ons menu netjes in het midden te zetten Hiervoor ga je het div element met id navbar vormgeven. o Aangezien het menu bovenaan de pagina staat kunnen we fixed positionering gebruiken. Dat is lekker makkelijk. o Zet de linkerkant van het element op de helft van de

52 pagina. Dit kun je doen via de left property. Deze kun je op 50% zetten. o Als je gaat meten kom je erachter dat onze lijst 508 pixels breed is. Om te centreren moeten onze linkerkant daarom de helft van dat aantal pixels naar links opschuiven. Dit doe je door de linker marge (marginleft property) aan te passen. Naar links schuiven doe je door een negatief getal te gebruiken. o Zet als laatste de lijst nog vast op 10 pixels vanaf de bovenkant. Dit kan hier omdat we met fixed positionering werken. Gebruik hiervoor de top property. 5. Onze lijst en de kop tekst overlappen nu nog. Dat is niet mooi en daarom gaan we de lijst (via het ul element) positioneren. Hiervoor gaan we het feit dat we fixed positionering gebruiken benutten. o Omdat we onze navigatie balk op 10 pixels van de bovenkant hebben gezet kunnen je de lijst er 10 pixels boven laten beginnen. Het menu begint dan exact bovenaan de pagina. Zet hiervoor de top marge op -10 pixels. Zo, dan is de bovenkant van de pagina klaar. Dit ziet er al veel beter uit dan in het begin. Laten we nu de vriendjes van de angry puppy eens naar rechts verplaatsen. opgave 7.5 Als je naar de HTML code kijkt dan zie je dat er een linker en een rechter gedeelte is gepland. We hebben immers één div element met id left en één met id right. Deze elementen ga je eerst goed zetten. Het linker element moet links staan en het rechter element rechts. Hiervoor gebruik je de property float. Om wat ruimte tussen de elementen te laten en te zorgen dat ze naast elkaar passen geef je ze een breedte die gelijk is aan 45% van body. De body is immers het element waar de elementen left en right in zitten. De plaatjes zijn nu te groot zodat ze niet op het scherm passen. Ook dat kunnen we fixen!

53 opgave 7.6 Je gaat het plaatje van de angry puppy, via het img element, een vaste grootte van 170 bij 170 pixels geven. Bovendien is het wel mooi als het plaatje een kleine schaduw heeft. Daarvoor kun je de box-shadow property gebruiken. Zoek goed uit hoe deze property werkt. We willen een zwarte schaduw die 80% transparant is en die 10 bij 10 pixels is. Valt je iets op? Hopelijk wel! De plaatjes van de vriendjes van de angry puppy hebben nu ook een schaduw en zijn 170 bij 170 pixels. Dit ziet er niet mooi uit. Als je naar de HTML code kijkt dan zie je dat de vriendjes in een tabel zijn gezet. Door de plaatjes in de scope van de tabel anders vorm te geven kunnen we de schaduwen kwijt raken. opgave 7.7 Je gaat nu de tabel positioneren en vormgeven. Zet de tabel helemaal rechts in het scherm neer (gebruik de float property). Geef de tabel een solid zwarte rand van 1 pixels en gebruik acd1b2 als achtergrondkleur. De onderkanten van de tabel maak je gebogen (gebruik hiervoor de border-bottom-left-radius en border-bottom-rightradius properties) met een radius van 15 pixels. opgave 7.8 Dan is het tijd om de cellen van de tabel vorm te geven. De cellen maak je 75 bij 75 pixels via de td property. Tevens maak je de kop van de tabel op. Gebruik hiervoor het Verdana font, een grootte van 1em, een normaal font (dus niet vetgedrukt of cursief of zoiets) en de kleur 3c4543. Er is nog niet bijster veel veranderd aangezien onze plaatjes nog te groot zijn. We hebben namelijk nog niks nieuws gespecificeerd voor de plaatjes in de tabel. Dat ga je nu doen

54 opgave 7.9 Hopelijk weet je nog wat scope is, want dat ga je hier nu gebruiken. Je gaat de plaatjes in de cellen van de tabel anders vormen geven dan het plaatje van de angry puppy. Hopelijk weet je nog hoe je dat doet, anders kun je in de hint onderaan kijken. De breedte en hoogte van de plaatjes zet je 100% zodat ze de cellen mooi opvullen. Als je nu de cellen groter maakt dan worden de plaatjes ook vanzelf groter. Probeer dat maar eens als je aan het testen bent. De schaduw moet je expliciet uitzetten hiervoor gebruik je de waarde none bij de box-shadow property. HINT: gebruik de td img selector. Je ziet dat een tabel zelf wat ruimte tussen de cellen open laat. Daarom kan de afmeting van de plaatjes hetzelfde zijn als die van de cellen van de tabel. Hopelijk ben je nog niet helemaal tevreden! Als je naar de plaatjes links en recht onderin de tabel kijkt dan zie je hopelijk dat die de ronding van de tabel zouden moeten volgen. Laten we daar nog even de puntjes op de i zetten. opgave 7.10 De plaatjes waar we het zojuist over hadden hebben al een id gekregen. Het plaatje rechts onderin heet bottom_right en het plaatje links onderin bottom_left. Via deze namen ga je de plaatjes nu beter laten aansluiten bij de tabelvorm. Voor zowel bottom_left als bottom_right ga je een radius van 15 pixels gebruiken. Als je niet meer weet hoe je dat moet doen, kijk dan bij de tabel hoe het daar is gedaan. Voor we aan de onderkant van de pagina beginnen is er nog een kleine verbetering aan de bovenkant door te voeren. De balk met "About Me" erin staat eigenlijk iets te laag

55 opgave 7.11 Zet de balk 10 pixels omhoog. Zoek zelf uit hoe je dit kunt doen. Je bent hier al eerder voorbeelden van tegenkomen. Nu valt de bovenkant van de balk gelijk met het midden van de navigatie "buttons". Dat ziet er mooier uit. Dan nu door met de onderkant van de pagina. Allereerst gaan we de onderkant de juist positie geven. opgave 7.12 Bij de onderkant kun je geen fixed positionering meer gebruiken. De onderkant moet immers ten opzichte van de rest van de pagina neergezet worden. Daarom gebruik je relative positionering. Er is echter nog een andere uitdaging. We hebben op hetzelfde niveau als het div element met id footer nog meer div elementen. Twee daarvan zijn gepositioneerd met float. Als we niks doen dan wordt de onderkant van onze pagina in de drijvende (floating) elementen gezet en dat willen we niet. Je moet daarom aangeven dat er zowel links als rechts van de onderkant geen drijvende elementen mogen staan. Hiervoor gebruik je de property clear met als waarde both. Vervolgens ga je de volgende vormgeving doorvoeren. De linker en rechter hoeken aan de onderkant moeten een radius van 15 pixels krijgen. De hoogte moet 75 pixels zijn. Als achtergrondkleur neem je 3c4543. De tekst van de button ziet er nog niet uit. Dat kun je makkelijk oplossen met wat je hiervoor geleerd hebt

56 opgave 7.13 Je gaat de button in het midden van de footer neerzetten. De button is 160 pixels breed en 30 pixels hoog. Als je niet meer weet hoe je dit doet, kijk dan hoe je het bij de header hebt gedaan. Denk eraan dat je nu wel relative positionering moet gebruiken! Vervolgens ga je de volgende vormgeving doorvoeren. De border is solid, zwart en 2 pixels dik. De button heeft een radius van 5 pixels. Als achtergrondkleur neem je cc0323. Dan moet de tekst nog goed gemaakt worden dit doe je via het paragraph element in de button. Let er dus op dat je niet de opmaak van de andere alinea's beïnvloedt (dus gebruik scope)! opgave 7.14 De tekst moet ook weer relative gepositioneerd worden. Om de tekst in hoogte te centreren moet je een top van -12 pixels gebruiken. De tekst moet ook horizontaal gecentreerd worden en als kleur gebruik je acd1b2. opgave 7.15 Tot slot moet het woord " " nog extra nadruk krijgen. Hiervoor staat in de HTML code de class bold. Zorg ervoor dat deze tekst vetgedrukt is en de kleur wit heeft

57 8. wat heb je geleerd Je hebt nu de basis van HTML en CSS geleerd en nog een paar fancy dingen. Er is echter nog veel meer te leren. Zoals gezegd is w3schools de autoriteit op het gebied van HTML & CSS. Belangrijk is dat je oefent met HTML & CSS. Probeer dingen uit! Als je niet precies snapt hoe het werkt, probeer het dan uit in een browser en ontdek zelf wat het doet. Veel plezier en succes met het maken van je eigen websites!

58 9. hulp en hints aanmaken van een HTML bestand Het maken van een bestand kun je doen door in de HTMLCSS map met de rechter muisknop te klikken, Nieuw te kiezen en dan Tekstdocument te klikken. Dit zie je in volgende afbeelding. Geef het aangemaakte tekstbestand inaanbouw.html als naam. Zorg dus je de extensie txt vervangt door html! bestand openen met Notepad++ Het bestand openen met Notepad++ kun je doen door met de rechter muisknop op het bestand te klikken en op Edit with Notepad++ te klikken. Dit zie je in volgende afbeelding. In Notepad++ kun je een bestand opslaan met de sneltoets CRTL-s

Nog meer weergeven