een stuk tekst

de kop met het grootste formaat

de kop met een kleiner formaat

de kop met een nog kleiner formaat

de kop met een nog kleiner formaat

de kop met een nog kleiner formaat

de kop met het kleinste formaat

1 Fruit

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

In de volgende deelhoofdstukken behandelen we een aantal fruitsoorten.

1.1 De appel

Appels groeien aan bomen. Deze bomen groeien in gematigde streken en veelal op het noordelijk halfrond.

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.

1.2 De aardbei

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.

De rijpe rode, oranje of soms ook witte vrucht is de opgezwollen bloembodem met daar bovenop zaadjes, de dopvruchtjes.

2 Groente

Groente is een eetbare plant of een deel ervan. Soms betreft het hier wilde planten, maar meestal gaat het om cultuurgewassen.

In de volgende deelhoofdstukken behandelen we een aantal groenten.

2.1 Prei

...

2.1 Bloemkool

...

IN AANBOUW!

Deze pagina is in aanbouw.

Meer informatie volgt binnenkort.

IN AANBOUW!

Deze pagina is in aanbouw.

Meer informatie volgt binnenkort.

1. eerste list item
2. tweede list item
3. derde list item

• eerste list item
• tweede list item
• derde list item

- 22 -

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.





- 23 -

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.





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.





- 24 -

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"

- 25 -

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.



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.

- 26 -

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:

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

- 27 -

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.

- 28 -

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:





topic MMORPG heavy metal natuurkunde



link ... ... ...



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.

- 29 -

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.

het bijschrift

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.

- 30 -

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.


...


- 31 -

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.

- 32 -

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.

- 33 -

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
tag op gelijke hoogte te zetten met de tag. Voor de eind-

- 34 -

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.

- 35 -

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.
Fruit of ooft is een verzamelnaam voor een aantal eetbare <span style="color: red; font-weight: bold"> vruchten van plantensoorten en -rassen (of van daarop gelijkende <span style="color: red; font-weight: bold"> schijnvruchten zoals aardbei, vijg, ananas, appel en peer).


- 36 -

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.

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.

- 37 -

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.

- 38 -

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.

- 39 -

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.

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.

- 40 -

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

- 41 -

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.

- 42 -

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.

- 43 -

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. http://www.w3schools.com/css/sqorange.gif 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.

- 44 -

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.

- 45 -

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

- 46 -

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.
• Home
• About Me
• Plans for World Domination
• Contact
About Me


- 47 -


I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.
My Bros
Send me an <span class="bold">e-mail!


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.

- 48 -

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.

- 49 -

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

- 50 -

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!

- 51 -

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.

- 52 -

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.

- 53 -

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.

- 54 -

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 "e-mail" 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.

- 55 -

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!

- 56 -

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.

- 57 -

syntax highlighting De door Notepad++ blauw gemaakte stukken tekst noemen we dus syntax highlighting. Via syntax highlighting maakt een teksteditor duidelijk welke dingen herkend worden in de tekst. In het geval van HTML worden onder andere tags (markeringen) herkend. Een tag is een commando dat je aan de webbrowser geeft. De meeste tags komen voor als combinatie van een begin-tag en een eind-tag. In de voorgaande code is een begin-tag en de bijbehorende eind-tag. De eind-tag herken je aan de forward slash (/) in de tag.

Notepad++ en thuis werken Als je thuis geen Notepad++ op je computer hebt staan kun je deze gratis downloaden van internet. Als je thuis geen programma's op de computer mag instelleren dan kun je Notepad gebruiken, dit programma wordt standaard met Windows meegeleverd. Je hebt dan alleen geen syntax highlighting.

- 58 -