Zoals je weet worden alle HTML-elementen als een box gerenderd in je browser. Deze boxen kun je opmaken volgens het box-model. Er zijn twee van dit soort boxen:
inline elementen
block elementen
Voorbeelden van inline elementen zijn: <b>, <em>, <span>, <img>, <strong>. Ze zitten in de regel tekst en hun box is zo hoog en breed als de inhoud van de tekst. Block elementen daarentegen beginnen altijd op een nieuwe regel. Voorbeelden van block-elementen zijn: <div>, <h1>, <p>, <table>, <ul> enz. Standaard nemen ze de gehele breedte van hun parent (bijvoorbeeld de <body>) in beslag. Je kunt in tegenstelling tot de inline elementen de breedte en hoogte van een block-element wel instellen met height en width.
Hier een voorbeeld:
HTML
CSS
RESULTAAT
Zoals je ziet is element <em> en <span> met id #nadruk inline elementen. Ze zijn zo breed en hoog als de hoeveelheid tekst en zitten middenin de regel. De elementen <p> en <h1> zijn block-elementen. Ze nemen de gehele breedte in beslag van hun parent (in dit geval <body>) en beginnen op een nieuwe regel.
Ga na dat je de hoogte en breedte van een inline element niet kan veranderen, terwijl je dat met een block element wel kan doen. Doe dat in het volgende stuk code wat voor jou al is geschreven: https://codepen.io/h-akkas/pen/mMrZRV?editors=1100
Nu is het zo dat je block elementen soms toch als inline elementen wilt behandelen en inline elementen als block element. Hoe doe je dat? Daar is het CSS-attribuut display voor bedacht! Als je voor een <p> element display: inline instelt, dan wordt de <p> als een inline element behandeld. Als je voor een <em> element display: block instelt, dan wordt het <em> element als een block element behandeld.
Bekijk de volgende pagina en de code:
Zoals je ziet hebben we alleen block elementen op deze pagina. Maak van de h1 en de vier div-elementen een inline element met display: inline. Wat gebeurt er? Gebruik deze link: https://codepen.io/h-akkas/pen/YxGoZX?editors=1100
Zoals je hierboven hebt gezien veranderen er twee dingen:
Alle height en width instellingen worden genegeerd. De elementen worden zo hoog en breed als de inhoud van de tekst.
Alles komt op een regel te staan, omdat het inline elementen zijn geworden.
Zo kun je ook inline elementen als block elementen beschouwen met display: block. Bekijk eens het volgende voorbeeld.
Ik heb hier drie linkjes naast elkaar. Zoals je weet is een <a>-tag een inline element. Wil ik van de linkjes een verticaal menu maken met vakjes die even breed zijn, dan moet ik er block elementen van maken.
Maak van de linkjes hierboven een verticaal menu met even brede vakjes. Je kunt de code via de volgende link raadplegen: https://codepen.io/h-akkas/pen/mMObdz?editors=1100
Als je je goed herinnert hebben we in lesbrief 1 ook display: inline-block gebruikt voor het menu. Waar is dat dan goed voor? Nou, met display: inline-block willen we een element op een lijn zetten (inline), maar dan ook als een block behandelen. Dus ook voorzien van een hoogte en een breedte. Hartstikke handig als je een horizontaal menu wilt maken. Zie ook het plaatje hieronder voor de verschillen:
In dit plaatje gaan we ervan uit dat alle elementen divjes zijn. Merk op dat inline-block dus zowel de elementen naast elkaar zet, maar waar ook een hoogte en een breedte voor kan worden opgegeven!
Als het goed is heb je al eerder kennisgemaakt met pseudo classes in HTML. Linkjes hebben namelijk vier verschillende toestanden:
Toestand link
Betekenis
link
als de link nog niet is bezocht
visited
als de link al bezocht is
hover
als je met je muis over de link scrolt
active
als je op de link klikt
Je kunt voor elk van deze toestanden een opmaak opgeven. Dit doe je met pseudo classes.
De code voor een pseudo class is als volgt:
<selector>:<pseudoclass> {
}
Voorbeeld:
Zoals hierboven te zien is zou je ervoor kunnen kiezen om voor elke toestand van het linkje opmaak aan te geven met pseudo classes. Maar dat hoeft natuurlijk niet. De bovenstaande code kun je via de volgende link in actie zien: https://codepen.io/h-akkas/pen/GvNRBr?editors=1100
Je kunt deze pseudo classes ook op andere HTML-elementen toepassen. Stel dat je een <div> een kleur wilt geven als je er met je muis overheen gaat, dan kan dat gewoon.
Maak een <div> die een andere kleur krijgt als er met je muis overheen gaat.
Nu is het aantal pseudo classes niet beperkt tot vier. Er zijn tientallen pseudo classes die je kunt gebruiken om dingen te doen die je anders met JavaScript had moeten programmeren.
Stel dat je een tabel hebt en je wilt alle even rijen een kleur geven en alle oneven rijen een andere kleur. Dan zou je de pseudo class nth-child() kunnen gebruiken. Zie de onderstaande code:
Zie de code in actie: https://codepen.io/h-akkas/pen/dzOyrM?editors=1100
In plaats van even of odd kun je ook gewoon een getal tussen haakjes zetten. Wel met een n erachter. Dus bijvoorbeeld nth-child(4n). Zo kun je iets bijzonders doen met exact de zoveelste rij.
Op de volgende pagina kun je een lijst met alle pseudo classes vinden: https://www.w3schools.com/css/css_pseudo_classes.asp Maak een webpagina waarin je minstens twee pseudo classes gebruikt voor een nuttige toepassing. Welke je wilt gebruiken, mag je zelf weten.
Hiervoor heb je geleerd om lettertypen op te geven met de font-family property. Je hebt ook geleerd dat je niet zomaar alle lettertypen kunt gebruiken aangezien de lettertype ook aanwezig moet zijn op het systeem van de bezoeker van je website. Zo niet, dan zal je website er niet zo mooi uitzien. Om dit te voorkomen heb je geleerd om meerdere lettertypen op te geven: beginnen met een web-safe font en vervolgens een paar generieke fallback fonts voor als de eerst opgegeven lettertype toch niet beschikbaar is.
font-family: Verdana, Geneva, sans-serif
of
font-family: "Times New Roman", Times, serif
Nu is er ook de mogelijkheid om met web-fonts te werken. Dat houdt in dat je website altijd de ingestelde lettertype downloadt voor als het niet beschikbaar is bij de bezoeker. Waar kun je die fonts dan downloaden en hoe kom je eraan?
Nou, er zijn websites die allerlei mooie fonts aanbieden die je zo als web-font kan instellen voor je website. Sommige van deze websites vragen hier geld om, maar sommige ook niet. Een van de webfoundry websites die honderden fonts gratis beschikbaar stelt is Google Fonts. Hier een pagina dat gebruik maakt van Google Fonts:
Zie hem hier in actie: https://codepen.io/h-akkas/pen/zdoGpP?editors=1100
Hoe gaat dat dan in zijn werk?
Ga naar de Google Fonts website (https://fonts.google.com/)
Kies een lettertype uit en druk op het rode plusje (er verschijnt een zwart-wit kadertje aan de onderkant van de pagina
Klik op dat kadertje met de tekst (1 family selected).
Dan kun je twee dingen doen. Of je kopieert de <link>-tag naar je HTML-bestand of je drukt op @IMPORT en kopieert de @import regel in je CSS. Ik zou kiezen voor het laatste aangezien je dat maar 1 keer hoeft te doen.
Ten slotte kun je de lettertype gewoon gebruiken op je website.
Opdracht
Kies een leuke web-font en gebruik hem op een pagina.
In deze lesbrief behandelen we een aantal belangrijke technieken dat je nodig hebt voor het maken van een website.
Je kunt op vier verschillende manieren de positie van een HTML-element op een pagina bepalen:
position: static
position: absolute
position: relative
position: fixed
position: sticky -> een combinatie van relative en fixed
Static
Positioneren met static, daar hoef je niets speciaal voor te doen. Alle elementen zijn namelijk standaard static gepositioneerd. Static betekent dat het element op de plek terecht komt in de volgorde zoals jij dat hebt aangegeven in de HTML. Men zegt wel: according to the normal flow of the page. Hieronder is dat ook te zien. De <p> komt na de <img> En de <img> komt na de <h1>.
Relative
Met relative kun je je element ten opzichte van zijn normale positie, naar links, rechts, boven en/of beneden plaatsen. Je geeft op de verticale as met top of bottom een afstand op. En op de horizontale as met left of right.
Absolute
Met absolute kun je eigenlijk hetzelfde doen, maar dan ten opzichte van de bovenkant van de pagina. Je haalt het element zelfs helemaal uit de flow, waardoor de <p> ook naar boven opschuift. Zie hieronder.
Fixed
Fixed lijkt weer heel erg op absolute. Maar er is een groot verschil: Als je iets met fixed positioneert, dan blijft het daar. Zelfs als je naar beneden gaat scrollen!
Opdracht
Maak een pagina waarmee je wat speelt met alle positioneringsopties. Misschien dat je het menu van de pagina die je in de vorige lesbrief had gemaakt fixed kunt maken?
Als je een element met absolute, relative of fixed gaat positioneren, dan kan het zo zijn dat meerdere elementen bovenop elkaar worden geplaatst. Maar hoe zorg je ervoor dat de ene laag op of onder de andere laag terechtkomt? Dit regelen we met een ander CSS-property genaamd z-index. Voor de z-index kun je een getal opgeven. Hoe lager het getal, hoe meer hij naar achteren wordt geplaatst. Je kunt zelfs negatieve getallen opgeven! Zie het onderstaande voorbeeld met kaarten en hun bijbehorende z-index.
Je hoeft de lagen overigens niet per se van 1 tot 5 te nummeren (in stapjes van 1). Je mag ook sprongen maken. Als je maar weet dat de lagen van klein naar groot worden opgestapeld. Zie bijvoorbeeld het volgende plaatje:
Maak het volgende plaatje na. Hij bestaat uit 5 div'jes.
Vaak als je een stuk tekst voor op je website schrijft, dan wil je daar plaatjes bij. En dat ziet er dan standaard zo uit:
Terwijl je eigenlijk het plaatje met de tekst zou willen omringen, zie je hierboven dat er veel witruimte is. Je browser beschouwt het plaatje als een letter en zet hem in de zin. Ook als je het plaatje uit de <p> haalt, dan behoud je de witruimte. Dit gaat we nu oplossen met floating.
Door het plaatje float: left of float: right mee te geven krijg je het volgende effect:
Floating kan ook erg handig zijn als je een layout structuur voor je webpagina wilt maken waarbij je blokelementen naast elkaar wilt zetten. Neem als voorbeeld de volgende twee layouts:
LAYOUT 1
LAYOUT 2
De vraag is: Hoe maak je dit soort layouts? Je ziet in de eerste layout <nav> en <section> naast elkaar en in de tweede layout komt daar zelfs een <aside>-element bij. Ook dit doe je met floating. Hoe dat werkt wordt in de volgende video uitgelegd:
Maak een van de bovenstre twee layouts met behulpd van floating.
Inderdaad! Ouch!!! … het doet zeer aan je ogen ;)
De theorie over kleuren is een van de belangrijkste onderwerpen voor web designers. Een website waarbij kleurgebruik goed wordt toegepast ziet er natuurlijk beter uit. Maar kleuren kunnen ook een psychologisch effect hebben. Met de verkeerde kleuren kun je het verkeerde gevoel bij je bezoekers achterlaten. Dan vinden ze je ineens onbetrouwbaar of nemen ze je niet serieus.
Design is een onderwerp waar we nu maar heel kort bij stil zullen staan. We kunnen je al wel verklappen dat hier ook modules en badges voor zullen komen. Voor nu moet je het doen met dit kleine hoofdstukje ....
Een handige tool om je te helpen bij de keuze van een harmonieus kleurenpalet voor je website is het kleurenwiel. Het kleurenwiel helpt je de relaties die kleuren met elkaar hebben te visualiseren. De meest gebruikte versie van het kleurenwiel is gebaseerd op het wiel dat Sir Isaac Newton heeft ontdekt. Zijn kleurenwiel gebruikt drie primaire kleuren: rood, geel en blauw. Wanneer je die kleuren met elkaar mixt krijg je een volledig kleurenwiel.
Kleurenwiel van Newton: Hoe meer naar binnen, hoe meer wit aan de kleur is toegevoegd. Hoe meer naar buiten, hoe meer zwart is toegevoegd. De echte kleuren bevinden zich in de middelste concentrische cirkel van het wiel.
In het creëren van een aangenaam kleurenpalet zit een beetje wetenschap. Daar gaat we het hieronder over hebben.
Monochromatisch: Wanneer je variaties van dezelfde kleur gebruikt kan dat een prachtig effect geven, maar je bent bijna verplicht diverse accenten van wit en zwart toe te voegen. Kies daarom een kleur die je de mogelijkheid geeft genoeg contrast toe te voegen.
Analoog: Wanneer je kleuren selecteert die elkaar raken in het kleurenwiel krijg je een harmonieus kleurenschema. Net zoals monochromatische kleuren kunnen zij een warm of een koel gevoel geven, afhankelijk van hun plaats in het kleurenwiel.
Complementair: Kleuren van tegenovergestelde eindes van het kleurenwiel geven het meeste contrast. Als je de verleiding kan weerstaan van meer kleuren toe te voegen, beperk je dan tot twee kleuren om een krachtige look te creëren. Maar gebruik ze wijs, zodat ze niet vloeken.
Split Complementair: Deze variatie van het complementaire schema gebruikt twee kleuren aan beide zijden van een direct complementaire kleur. Deze kleuren hebben een hoog visueel contrast maar met minder spanning dan puur complementaire kleuren.
Triadisch: Drie kleuren gelijkwaardig gespreid over het kleurenwiel creëren een levendige visuele interesse. Sommige paletten zijn stevig, terwijl andere meer verfijnd zijn. Je kan wijzigingen aanbrengen door een lichtere tint of wat schaduw aan één van de drie kleuren toe te voegen in plaats van bij de echte kleur te blijven.
Tetradisch: Dit is een populair schema omdat het sterk visueel contrast biedt terwijl het toch harmonieus blijft. Het gebruikt twee paren van complementaire kleuren. Het is moeilijk dit schema harmonisch te maken wanneer je telkens evenveel licht of schaduw gebruikt, dus een beetje creativiteit is vereist. Gebruik een dominante kleur voor je design en gebruik de anderen om de hoofdkleur te ondersteunen.
Op http://www.paletton.com kun je op een vrij eenvoudige manier kleurenpaletten genereren met behulp van het kleurenwiel. Zie het plaatje hieronder voor een beschrijving van de belangrijkste onderdelen van deze website.
Web-design is een vak apart en de theorie over kleurgebruik is daarin een belangrijk onderdeel. Het internet staat vol met websites die niet aantrekkelijk zijn vanwege hun lay-out. Neem nou eens de volgende oerlelijke websites: of
Genereer met de website per techniek een aangenaam kleurenpalet. Het is aan te raden om met het knopje EXAMPLES (rechts onderin) te kijken naar een voorbeeld website met het kleurenpalet dat je hebt gegenereerd.
<header>
<nav>
<section>
<footer>
<header>
<nav>
<section>
<aside>
<footer>
Je gaat in deze lesbrief een aantal dingen leren door een voorbeeldpagina maken. We gaan werken met HTML5 en CSS3 en we gaan eerst de structuur van je pagina neerzetten. Hou je vast :)
Als je een website ontwerpt (middels wireframes), dan is het eerste wat je doet je pagina in blokken verdelen. En dan heb je vaak de volgende blokken:
Er is vaak een header-blok. Dit is een kopregel die vaak bovenaan een webpagina staat. Hier staat vaak de titel van de site en een logo in.
Er is vaak een footer-blok. Vaak staat deze onderaan de pagina. Hier staat vaak in wie de site heeft gemaakt, met wat copyright informatie.
Er is vaak een navigatiebalk. Denk aan een knoppenbalk of een balk met linkjes. Je ziet ze vaak bovenaan de pagina of links op de pagina. Door op de knoppen of linkjes te klikken ga je naar andere pagina’s
De inhoud van je pagina. Deze inhoud gaan we straks nog eens onderverdelen.
Nog vóór HTML5 konden we deze blokken maken met <div>-tags. <div> is de afkorting voor division (=afscheiding, onderdeel, sectie). Een <div> kan zelf van alles bevatten. Zoals plaatjes, kopjes, tabellen, opsommingen, paragrafen etc. Een mogelijke indeling kan er dan als volgt uitzien:
Als je goed kijkt, dan zie je dat elke div van de andere div wordt onderscheiden middels classes en id's. Zo heb je <div id="header"> voor het kopje van de pagina. En <div id="footer"> voor de footer van de pagina. In de CSS kun je vervolgens de div's afzonderlijk opmaken. Met HTML5 echter, heb je speciale tags tot je beschikking voor dit soort standaard onderdelen:
De <div>-tag bestaat nog steeds en mag je gewoon gebruiken. Maar deze HTML5-tags maken het je wel makkelijker. Ook kunnen zoekmachines zoals Google makkelijker de inhoud van je pagina indexeren en doorzoeken!
Maak een nieuwe map aan op je harde schijf.
Maak vervolgens de volgende HTML-pagina. Noem hem index.html. Check uiteraard via de validator of deze aan de HTML5 standaard voldoet.
Tip: zet die tags netjes onder elkaar zoals hierboven, je hebt dan overzicht over wat bij wat hoort en je vergeet niet zo gauw een tag af te sluiten.
Tip2: Er is een wereld van een verschil tussen de <head> en de <heading>. De <head>-tag mag je nooit in de body gebruiken. De <heading>-tag mag alleen een titel en meta data bevatten. De <heading> is onderdeel van je pagina en staat in de body !
We gaan even het resultaat van deze mega vette site bekijken ☺ Test de pagina in een webbrowser en je ziet het volgende:
De elementen <header>, <footer>, <section> en <nav> zijn allemaal blokelementen. Deze blokken worden dan ook netjes onder elkaar gezet.
We kijken nu even puur naar de inhoud van een pagina. In ons geval dus de <section> tag. Een section is bedoeld voor het opsplitsen van de inhoud. In ons geval hebben we maar één section. In het geval van een krant kun je best verschillende katernen hebben. Denk bij een krantensite aan economie, politiek, sport, buitenland, binnenland enz. Meerde sections per pagina zijn dus best mogelijk. Wij houden het nog even simpel bij één sectie.
Een sectie bestaat uit verschillende artikelen. Denk bij een artikel net als in de krant als een zelfstandige eenheid.
Pas de section tag aan, verwijder het woord inhoud en maak hierin ongeveer drie artikelen:
Test het in je browser. Het ziet er nog steeds niet uit. Klopt ook, we hebben nog niets aan de opmaak gedaan. Ook een article is een blokelement. Dus die worden netjes onder elkaar gezet.
Iedereen die de krant leest weet waar een artikel uit bestaat: een kopje en één of meerdere alinea’s dus uit <h1> of <h2> … enz en uit <p> Deze heb je al in les 1 gehad.
Vul iedere alinea met een kopje (kies bijvoorbeeld <h2> dan kan je straks <h1> gebruiken voor je titel) en alinea’s. Gebruik minstens 1 alinea, maar je mag ook meer alinea’s gebruiken. Uiteraard mag je deze kopiëren uit eerdere pagina’s en ga je dit niet opnieuw schrijven.
Koppel een stylesheet
In de bovenstaande code staan twee artikelen afgebeeld. In het eerste artikel heb ik één kop met twee paragrafen in het tweede artikel heb ik een kop met maar één paragraaf.
Tip: doe jezelf (en anderen) een plezier en zet de en netjes onder elkaar. Je ziet dan of je vergeten bent iets af te sluiten. De headers zet ik wel op één regel.
Het resultaat ziet er nog steeds niet uit, maar het begint in ieder geval wel op een webpagina te lijken:
Vergeet niet te checken of je pagina nog steeds aan de HTML5 standaard voldoet !
We gaan nu de webpagina opmaken.
Koppel je pagina aan een stylesheet. Maak eerst een nieuwe stylesheet aan: ik noem de mijne opmaak.css zet deze weer in het mapje style en koppel deze aan je html pagina.
Margin en padding op 0px
Dit hebben we al verschillende keren gedaan. De eerste rule die ik er altijd inzet is: alle standaard margin en padding eruit. Die gaan we straks zelf opgeven. Sommige browsers hebben standaard wel een margin en/of padding andere weer niet. Hier hebben we geen zin in. * betekent alles. Dus zet als eerste rule in opmaak.css
Voor de body (dat is de hele pagina) zet ik alvast een standaard lettertype erin. In mijn voorbeeld heb ik ook voor een achtergrond gekozen. Een klein plaatje laat ik van links naar rechts en van boven naar beneden herhalen:
Ik heb dit plaatje gebruikt als achtergrond maar je bent natuurlijk vrij om je eigen pagina achtergrond te kiezen. Een kleur als achtergrond is ook prima.
We gaan eens kijken naar de header. Ik heb een header plaatje gevonden van 150pixels hoog en 960 pixels breed. Je zou zelf ook een plaatje kunnen maken in een programma zoals Photoshop.
Deze ga ik als achtergrond gebruiken voor mijn header. Ik ga mijn site ook nog een titel geven.
Vervang de tekst tussen de <header> en </header> door een titel. Ik gebruik hiervoor de h1
In de stylesheet gaan we de header stylen. We gebruiken hiervoor de header en de header h1. Een voorbeeld staat hieronder. Je ziet dat ik expliciet de lengte en de hoogte opgeef met width en height.
De laatste optie text-shadow hebben we nog niet gehad. Deze is toch wel leuk, je kunt hiermee een schaduw bij je tekst krijgen. Eerste twee opties (beide 5px ) zijn het aantal pixels naar rechts en naar beneden van de schaduw. De derde optie (7px) is een maat voor hoe vaag of hoe scherp de schaduw moet worden. Hoe groter dit getal hoe vager de schaduw. De laatste optie is de kleur van de schaduw. (#000000 = zwart). Ik speel gewoon wat met deze getallen. Resultaat:
Het begint een beetje op een website te lijken.
We gaan nu een navigatiebalk maken. Hoe je dit moet doen heb je met de module HTMLCSS-1 geleerd. Ook heb je geleerd hoe je de knoppen naast elkaar kunt krijgen. Uiteraard doen we dit door een lijst te maken met linkjes.
Vervang de tekst tussen <nav> en </nav> door een lijstje met linkjes. In mijn voorbeeld laat ik de linkjes even naar een niet bestaande pagina verwijzen href=”#”. We hebben immers nog niet zoveel pagina’s. Alleen de homepage index.html (zie onderstaande code)
We gaan maar weer stylen. Hieronder zie je een voorbeeld. Het is wat standaard kleurtjes en achtergrondjes werk. Er is één belangrijke optie: display : inline-block; hierdoor staan de knoppen naast elkaar. Uiteraard hoef je de kleurtjes en de randen niet over te nemen. Leef je uit en maak je eigen knoppen!
Resultaat:
We gaan nu iets moois maken van de artikelen. Je hebt dit met de HTML-CSS-1 module al een beetje gehad. We kunnen de volgende rules gebruiken in de stylesheet: section, article, article h2 en article p
In onderstaand voorbeeld heb ik alleen nog maar section en article gebruikt
Het resultaat is toch wel aardig:
De tekst en de koppen gaan we ook nog opmaken. Dit mag je zelf uitzoeken. Hier zijn we in de vorige module uitvoerig mee bezig geweest. Je hebt in ieder geval nodig:
Tip: je had ook mogen gebruiken: section article h2 en section article p Maar omdat ik maar 1 sectie had vond ik dat wat overdreven.
De footer staat onderaan de pagina. We houden het even simpel: vervang alles tussen <footer> en </footer> door een copyright tekst. © is het © teken want het copyright teken hoorde niet bij de utf-8 tekenset. Ik heb hier een h3 gebuikt, maar iets anders is ook goed.
Uiteraard heb je weer een footer en een footer h3 nodig om de boel te stijlen. Een voorbeeld zie je hieronder. Van de footer heb ik niet overdreven veel werk gemaakt.
We zijn bijna klaar met onze pagina we hebben echter nog 1 ding wat niet zo netjes is. Het zou mooi zijn als de site netjes in het midden stond en was uitgelijnd. Nu is het rommelig. Hier zie je de site op een breedbeeld scherm.
Om dit probleem op te lossen zetten we alle blokelementen in een nieuw element. Een div-element. Dit element wordt alleen maar gebruikt om de opmaak mooier te maken. Het heeft dus geen structuur functie zoals article of nav. Zoals aan het begin van de lesbrief al is verteld bestonden de tags article, nav, section en footer voor HTML5 niet. Toen werd alles opgelost met de div tag. Je gaf toen een id mee in de div.
Voorbeeld:
<header> </header> was bijvoorbeeld <div id=”header”> </div><footer> </footer> was bijvoorbeeld <div id=”footer”> </div> <nav> </nav> was bijvoorbeeld <div id=”navigator”> </div>
De div tag is er in HTML5 nog steeds. Alleen we gebruiken het puur voor de opmaak. Niet meer voor de structuur. Een div is dus hetzelfde als <article>, <footer> of <section> behalve dan dat we hem puur voor de opmaak gebruiken !
We gaan de hele pagina in een div tag zetten die we id=”wrapper” meegeven. Dus voeg direct na de body tag in:
En onderaan de pagina net voordat de body tag sluit:
Tip: als ik veel div tags gebruik, moet ik die allemaal afsluiten met </div> ik zet dan wat commentaar bij de </div> bij welke div deze hoorde. Ik vergeet dan niet zo snel een div af te sluiten.
Nu gaan we de wrapper stijlen. Nogmaals ik wil met de wrapper alleen maar de pagina mooi in het midden zetten. Uiteraard wil ik alles net zo breed hebben als de header: deze was 960 pixels. Dus:
Kijk even of je het snapt: de marges boven en onder zijn 0. Links en rechts zijn de marges automatisch. Met andere woorden de browsers maakt de pagina 960 pixels breed en zet hem netjes in het midden omdat de linker en rechtermarge automatisch worden berekend.
Resultaat:
Resultaat:
