Zoals sommigen op Facebook gezien hebben, bracht ik vandaag een preview van een website uit dat ik als project bij ICT aan het maken ben. Het leuke is dat ik het met recht kan beschouwen als een project voor niemand meer dan m’n eigen vader! Hij is namelijk installateur en heeft nog niet eens een website. Daar wil ik graag verandering in brengen door er zelf eentje voor ‘m te bouwen. Het sluit immers ook mooi aan bij mijn opdracht voor ICT.
Allereerst even een introductie. Wat houdt de opdracht voor ICT precies in? En wat ben ik nou eigenlijk echt aan het maken? Op die vragen geef ik graag kort antwoord. De bedoeling is dat we voor het vak een website bouwen met HTML én CSS. Vorig jaar moesten we er al eentje in HTML maken, maar dus nog niet in CSS. Althans, daar heeft niemand zich toen mee bezig gehouden. Ik had zelf wel naast HTML een stukje JavaScript toegevoegd, maar daar blijft het bij. Toen ik CSS pas echt leerde kennen de afgelopen weken, besefte ik dat het eigenlijk echt heel fijn is om te gebruiken. Als je weet hoe het in elkaar zit, kun je probleemloos een goede basis maken. In dit artikel zal ik overigens ook uitleggen wat ik voor bepaalde elementen ingeprogrammeerd heb, zodat je zelf ook wat kunt leren!
Wat ik precies aan het maken ben, is een (niet al te uitgebreide) site voor mijn vader. De bedoeling is dat men dadelijk kan lezen wat voor werkzaamheden hij verricht en hoe je hem kunt bereiken. Dat is dan ook eigenlijk alles. Maar meer hoeft zo’n site ook niet te hebben.
Goed, laten we beginnen. Voor ik naar de site zélf ga, zal ik even vertellen wat CSS is en wat je ermee kunt.
CSS staat voor Cascading Style Sheets. Het is dé manier om je website een prachtige layout te geven. Dit kan standaard ook al met HTML (HyperText Markup Language), alleen ben je dan nog enorm beperkt. Wie wil er nou niet bijvoorbeeld een professioneel menu bovenaan (of natuurlijk eventueel links), links die een bepaalde kleur krijgen als je erop gaat staan of een mooi 3D-effect aan tekst hebben? Tja, dat is dus allemaal niet mogelijk met HTML. Tenzij je je menu met behulp van afbeeldingen wil maken, maar dan kun je weer geen effecten toevoegen.
Sommigen geven bij het gebruik van CSS de voorkeur een los bestand te gebruiken, terwijl anderen het liever samenvoegen met de HTML-bestanden. Echter moet je dan iedere aanpassing op elk bestand doorvoeren. Dat kost enorm veel tijd, dus kun je veel beter een los bestand gebruiken. Natuurlijk moet je dan wel zorgen dat deze gekoppeld wordt aan al je HTML-pagina’s. Hoe doe je dat? Simpel, voeg gewoon de volgende code toe tussen de <head>-tags:
<link rel=”stylesheet” type=”text/css” href=”style.css”/>
En in het CSS-bestand zelf moet je met het volgende beginnen:
<style type=”text/css”>
Ter verduidelijking: ’text/css’ staat er om het HTML-document te informeren over het feit dat je CSS wil toevoegen. ‘style.css’ verwijst naar het betreffende bestand. Uiteraard kun je ‘style’ geheel naar eigen wens noemen.
Laten we gelijk met een langer stukje code verdergaan:
a {
font-family: ‘Lucida Grande’, Tahoma, Verdana, Arial, sans-serif;
font-size:70px;
text-align:center;
}
h1 {
text-shadow: 0px 0px #666, 0px 1px #FFF;
}
#info .info1 {
text-shadow: 1px 1px 2px #000;
}
Er staan veel elementen in, waaronder enkele belangrijke. De ‘{‘ en ‘}’ zijn vergelijkbaar met de ‘<‘ en ‘>’ tags in HTML; je sluit een bepaalde stukje code af hiermee. Ook is er een ‘;’ te zien na iedere ‘opdracht’. Die is om het einde aan te geven van een regeltje code. Je ziet in de code aan het begin een ‘a’ staan, waarmee je de tekstopmaak kunt bepalen. ‘Font-family’ geeft het lettertype aan en ‘font-size’ de lettergrootte. Dit laatste is in dit geval 70px, wat betekent dat tekens 70 pixels groot moeten zijn.
In het stukje eronder (in het midden) zie je ‘h1’ staan, wat een standaard is om de titelsoort aan te geven. ‘h1’ betekent dat het om de hoofdtitel gaat. Die titel moet een bepaald schaduweffect krijgen. Datzelfde geldt voor bij ‘#info . info1’, alleen is het effect hier heel anders. In het voorbeeld later in dit artikel zul je waarschijnlijk wel begrijpen wat ik bedoel. Met ‘#info’ geef je zogenaamde ‘id’s’ aan, waarmee je onderdelen in een HTML-document kunt specificeren. Dit geldt ook voor ‘.info1’, waarmee je classes (klassen) aan kunt geven. In het stukje HTML hieronder wordt dat ook duidelijk.
<h1>Contact</h1>
</font>
<div id=”info”>
<div class=”info1″>
<font color=”FFFFFF”>
<font face=”calibri”size=”3″>
<font size=”3″><div id=”contentwrapper”>
<b>Adres CV Installatieservice De Beer:</b><br>Roger de Beer<br>Nuenen<br>Tel.: <br>Mobiel: <br>E-mail: </a>
Wat zie je in bovenstaande code? Nou, om te beginnen zie je ‘h1’, waar ik eerder al over vertelde. Je ziet geen ‘#’ of ‘.’ staan, waarom niet? Simpel, het is geen ID of class. Het is gewoon HTML dat ook in CSS gebruikt kan worden. Je geeft er in ieder geval mee aan dat je het stukje tekst tussen de tags de opmaak wilt geven zoals in het stukje code hiervoor (text-shadow: 0px 0px #666, 0px 1px #FFF;).
Met ‘div id=”info”>’ en ‘div class=”info1″>’ geef je aan dat een stukje CSS opmaak moet toevoegen aan de stukjes die daarna volgen. Het gaat in dit geval om de tekst dat je na ‘font size=”3″><div id=”contentwrapper”>’ ziet. Die tekst moet ook een effect krijgen namelijk, welke in het CSS-bestand staat.
#menu ul li a:hover {
text-decoration: none;
}
#menu ul li a:active {
background-color: #5D5D5D;
border-bottom: 4px solid #3C3C3C;
}
/* selected page */
#menu ul li.selected a {
background-color: #808080;
border-bottom: 5px solid #696969;
}
Tot slot wil ik nog even bovenstaand stukje toelichten. Het gaat hier om het menu (merk op dat een heel gedeelte mist). Dat zie je ook aan de class ‘#menu’. ‘ul li a’ is om de opsomming van het menu aan te geven. De knoppen staan namelijk langs elkaar. ‘Hover’ wil zeggen dat als je ergens op gaat staan. Vaak krijg je dan namelijk ook een bepaald effect. Die heb ik echter uitgeschakeld gelaten. Bij ‘Active’ zie je echter wel iets. Wat kun je ermee? Simpel, je voegt een effect toe dat weergegeven wordt als je op de knop klikt. Dus op het moment dat de knop actief is. In dit geval is er een achtergrondkleur toegevoegd en een rand aan de onderkant. Die rand is 4 pixels dik, solid (vast, stevig) met de hexadecimale kleur #3C3C3C (donkergrijs). Daarna zie je ‘/* selected page */’ staan, wat voor mij (en eventueel anderen) als notitie bedoeld is, zodat ik weet wat er volgt. Hier heb ik vrijwel hetzelfde gedaan als bij ‘a:active’, alleen dan een effect dan moet komen wanneer je op een pagina bent. Want wat is er nou irritanter dan dat je op een pagina bent, maar niet in het menu kunt zien waar precies? Met het stukje code los je dat op. Vergeet echter niet de class ‘.selected’ toe te voegen in het HTML-bestand van de pagina waarvan de knop een andere kleur moet krijgen.
Voorbeeld: <li class=”selected”><a id=”nav-contact” href=”contact.html”>contact</a></li>
Tot zover wat uitleg over CSS. Als je er vragen over hebt, stel ze me gerust! Maar nu even naar waar het echt om ging, de website voor mijn vader. Hieronder krijg je alvast meteen twee previews:
Allereerst zullen de teksteffecten en het menu je wel opvallen, niet? Bij de titels bovenaan zie je het zogenaamde ‘letterpress’-effect verwerkt. De overige tekst springt juist naar buiten.
En dan het menu, waar ik tot nu toe het langst mee bezig ben geweest, omdat ik twijfelde wat mooi is om te zien. Je ziet een 3D-effect, al is dat gewoon een simpel randje aan de onderkant. Echter, wanneer je erop klikt, wordt dat randje dunner. Zo krijg je een soort drukeffect. Tot slot heb ik er ook het ‘.selected’ in gezet. Dus wanneer je op een pagina bent, dat die pagina ook in het menu duidelijk aangegeven is, in dit geval met een lichtgrijze kleur.
Nog een klein dingetje, wat je wellicht misschien niet zozeer opvalt: de footer onderaan (‘© Copyright 2013 – Design by Tom de Beer’). Deze heeft ook z’n eigen opmaak gekregen met behulp van een stukje CSS-code.
Ik ben nog volop bezig met het uitbreiden van de website en hoop hem over enkele weken te kunnen lanceren. Voorlopig heb ik in ieder geval genoeg tijd, want onze periode bij ICT loopt nog zo’n vier weken. Tijd genoeg dus!
Nogmaals, als je vragen hebt over CSS (én HTML), schroom dan niet om deze te stellen. Ik beantwoord ze met liefde!
Goed geschreven Tom. Dat ben ik inmiddels wel gewend van jou. Als ik ooit behoefte heb aan een eigen website dan laat ik hem door jou bouwen 🙂
Miek
Bedankt Miek, voelt goed om dat van je te horen. Ik probeer altijd voor een zo goed mogelijk resultaat te zorgen dat men mijn artikelen begrijpend kan lezen en er ook echt iets van leert. Dat is toch een punt waar ik altijd op let. Soms ben ik best formeel, maar dan is dat vooral bij nieuwsartikelen. Dit is meer een informatief artikel, dus ook wat meer persoonlijk gericht op mijn lezers (met name de doelgroep die een website wil bouwen met HTML/CSS). 🙂
Als er ook maar iets is dat je graag zou willen weten over de programmeertalen, weet je me te vinden. 😉
Tom