In les 4 leer je sneller programmeren met behulp van Emmet. Ook maak je kennis met CSS Floats en Google Webfonts. In les 4 maken we al een begin met het bouwen van een eerste echte website op basis van de opgedane kennis in de afgelopen lessen.
CSS Floats
Zoals in de vorige les ook al besproken, worden elementen in HTML standaard volgens de “normal flow” geplaatst. Dat betekent platgezegd “de eerste die komt, de eerste die maalt”. Elementen worden op volgorde van plaats in de broncode getoond in het browservenster. (Behandeld tijdens les 3) Door elementen position:absolute; mee te geven, worden ze uit de flow van het document gehaald en zien andere elementen ze niet meer.
Goed, maar wat kan je nu eigenlijk met het float-property. Het float-property kent 4 verschilende waarden:
- none (standaard)
- left
- right
- inherit
Het werken met het float-property gaat heel vaak samen met het werken met het clear-property.
De meest gebruikte toepassing van floats is wanneer je wilt dat tekst rond een afbeelding vloeit. Zie het volgende screenshot van een afbeelding die in een paragraaf tekst is geplaatst:
Je ziet in bovenstaande screenshot dat de afbeelding “in de tekstregel” is geplaatst. Als je wilt dat de tekst “om de afbeelding heen vloeit”, kan je dat voor elkaar krijgen door de afbeelding een float-property mee te geven. In onderstaande screenshot zie je het effect van img{float:left;}
Floaten wordt niet alleen gebruikt bij het plaatsen van afbeeldingen in tekst, maar ook voor het bouwen van complete lay-outs.
Wanneer je een element gaat “floaten” proberen elementen die daarna komen om het element heen te “vloeien”. Dit is handig in het voorbeeld waarbij je wilt dat tekst rond een afbeelding gaat vloeien. Floatende elementen kunnen echter ook voor problemen of frustraties zorgen. Tijdens de les ga je met float’s experimenteren op basis van de volgende broncode:
<!doctype html>
<html lang="nl">
<head>
<meta charset=utf-8>
<title>Floaten met dozen</title>
<style>
.box{
width:100px;
height:100px;
}
#box-1{
background-color:#f00; /* red */
}
#box-2{
background-color:#0f0; /* green */
}
#box-3{
background-color:#00f; /* blue */
}
</style>
</head>
<body>
<div id="box-1" class="box"></div>
<div id="box-2" class="box"></div>
<div id="box-3" class="box"></div>
</body>
</html>
Je gaat bijvoorbeeld het effect bekijken van float:right; bij de rode doos:
En wat voor effect je vervolgens krijgt als je clear:right; toepast op de groene doos:
Clearfix
Wanneer je gaat experimenteren met float’s, kom je er vroeg of laat achter dat wanneer je child-elementen gaat floaten, het parent-element de child-elementen niet meer ziet. Dit is frustrerend en wordt het vaakst ontdekt wanneer je het parent-element een achtergrondkleur wilt geven. Deze is niet meer zichtbaar wanneer je binnen het parent-element child-elements gaat floaten.
Er zijn verschillende oplossingen voor bovenstaand probleem. De oplossing die je na de cursus moet kunnen toepassen is de overflow:hidden; truuk. Deze truuk leer je tijdens les 4 toepassen.
Reset stylesheet
Inmiddels realiseer je je hopelijk dat je bij het schrijven van CSS-regels eigenlijk niets anders doet dan “bestaande regels overschrijven” (De C van cascading uit CSS). Daarnaast zal je er na deze cursus achter komen dat elke browser weer andere “standaard” css hanteert voor elementen op je pagina.
Om bij het bouwen van een webpagina helemaal “from scratch” te beginnen, kiezen veel webdesigners er voor om te werken met een “reset stylesheet”. Dit is een stylesheet die alle opmaak “op nul zet” voor elke browser. Zo weet je zeker dat bij het begin van een nieuwe webpagina elk element er precies hetzelfde uitziet in verschillende browsers.
Je zou zelf een reset stylesheet kunnen schrijven, maar velen zijn je al voorgegaan. Een van de meest bekende reset stylesheets is diegene van Eric Meyer. Op Eric’s website vind je een uitleg van het “hoe en waarom” van een reset stylesheet, alsmede de betreffende css.
De CSS (inclusief het commentaar als bedankje naar Eric toe) kopieer je en sla je op in een bestandje genaamd “reset.css”. Vervolgens sluit je op elke pagina waar je een CSS reset wilt toepassen dit bestandje als eerste in. De stylesheet waarin je eigen CSS staat, sluit je na dit bestandje in. Zie onderstaand voorbeeld:
<!doctype html> <html lang="nl"> <head> <meta charset=utf-8> <title></title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
Door de reset.css als eerste in te laden, wordt alles “op nul gezet”. In style.css schrijf je vervolgens css waarmee je de pagina opmaakt op je eigen manier.
Google Webfonts
In les 3 werd je je bewust gemaakt van het feit dat lettertypes die je graag zou gebruiken op je website, vaak niet voorkomen op de computer van de bezoeker van je website. Er werd een oplossing gepresenteerd om “terug te kunnen vallen” op een bepaald lettertype, mocht het gewenste lettertype niet beschikbaar zijn. Er zijn echter verschillende manieren om tòch uiteenlopende lettertypes op je website in te zetten:
- SiFR » custom lettertypes met behulp van flash
- Cufón » custom lettertypes met behulp van javascript
- Google Fonts
SiFR en Cufón hebben beide enkele nadelen. Als je een website bouwt die ook op Apple devices wordt bekeken, heb je niets aan de SiFR oplossing omdat Flash niet wordt ondersteund op Apple devices. Zowel SiFR als Cufón hebben als nadeel dat het mogelijk is om “illegaal” lettertypes te gebruiken. Veel webbouwers realiseren zich niet of nemen het niet zo nauw met de licentiekosten van lettertypes die ze gebruiken.
Gelukkig is er sinds enige tijd een nieuwe speler op de markt, namelijk Google Fonts. Google Fonts biedt toegang tot ruim 600 verschillende open-source (=gratis) lettertypes die je op je website kunt gebruiken. Ze worden getoond in alle moderne browsers maar ook vanaf Internet Explorer 6. Door gebruik te maken van “font fallback” kun je er voor zorgen dat computers die tòch niet het gewenste lettertype weergeven, een alternatief voorgeschoteld krijgen.
In les 4 ga je zelf een lettertype van Google Fonts in een webpagina inzetten.
Starten met de bouw van een eerste website
De rest van les 4 zal worden besteed aan het opzetten van je eerste echte website. Je leert hierbij dat het overzichtelijk is om een mappenstructuur voor je website op te zetten waarover je verschillende bestanden verdeeld. Zie onderstaande afbeelding:
Telkens wanneer je een nieuwe website bouwt, kun je het beste een nieuwe map aanmaken waarin àlle bestanden die deel uit maken van de betreffende website worden geplaatst. In bovenstaande screenshot is er een map “firstwebsite” aangemaakt.
In deze map maak je een onderverdeling. HTML bestanden plaats je in de “root” van je map. Overige bestanden verdeel je over een van de volgende mappen:
- CSS bevat alle stylesheets die je inzet op je website
- GFX bevat afbeeldingen die onderdeel zijn van de “interface” van je website. Achtergrondafbeeldingen en dergelijke plaats je hier bijvoorbeeld in
- IMG bevat afbeeldingen die onderdeel zijn van de “inhoud” van je website. Op de “about” pagina staat bijvoorbeeld je pasfoto. De pasfoto sla je op in het mapje IMG
- JS mocht je javascript gebruiken op je website, dan sla je de javascriptbestanden op in de map JS
Voorbereidingen voor les 5
Alle stof van les 1, 2, 3, 4 doornemen
Aangezien we in les 5 onze website gaan afmaken en er ruimte zal zijn voor een flexibele invulling van de les (lees: aan de slag met nieuwe of geavanceerde technieken), is het noodzakelijk dat je alle behandelde stof tot nu toe beheerst. Mocht je tòch nog vragen hebben over de stof van de afgelopen lessen, laat dat dan aan mij weten of experimenteer met code en probeer zelf een verklaring te vinden voor waarom iets op een bepaalde manier gebeurt.