19 jul

Een nieuw platform, een nieuwe filosofie: HTML & CSS


Hallo allemaal!

 

Hieronder een woordje uitleg om jullie het CSS principe wat beter te doen begrijpen. Hiernaast vind je ook een document met meer info over hoe je jouw skin moet personaliseren: SKYNET_SKINS.doc

 

Maar eerst CSS dus:

Informatici lopen hoog op met rare afkortingen en complexe dingen. Wij, bloggers, zijn daar (doorgaans) veel minder mee vertrouwd.  Daarom wat meer info over de befaamde ‘stijlbladen’ (Engels: CSS of 'Cascading Style Sheets'). Toegepast op de HTML-code van de pagina bepalen zij het uitzicht van de blog. Praktisch maken zij het mogelijk om het aspect inhoud (tekst, foto's, video's ...) volledig los te koppelen van het aspect weergave (font, vet, grootte van de foto's, opbouw van de pagina).

 

Het is niet onze bedoeling een handleiding te geven over hoe aan de slag te gaan met CSS, maar wel uit te leggen hoe het systeem in elkaar zit.

 

Om goed te begrijpen hoe het werkt, moeten we de pagina (en haar HTML-code) enigszins zien als een set tupperwaredozen. We kunnen elke doos een 'DIV' noemen. Elke doos bevat een deel van de inhoud, en vooral, een naam (id) en/of een categorienaam (klassenaam). In de code geeft dit voor de klasse:

 

<div class=’groenten'>
Deze doos (net als alle dozen van dezelfde klasse) bevat groenten
</div>

 

En dat voor het etiket (id):

 

<div class='groenten' id='prei'>
Deze doos bevat groenten, en meer bepaald prei
</div>

 

De dozen kunnen andere (kleinere) dozen bevatten, die ook weer rechthoekig (of vierkant) zijn.

 

Fotolia_9209215_XS.jpg

 

 

Dat is nu de HTML-code. En zo komen we bij het stijlblad. Het gaat om een afzonderlijk bestand, dat de dozen beheert. In dit bestand vinden we alle eigenschappen van elke doos, of van elke 'reeks' dozen terug. We kunnen bijvoorbeeld zeggen dat de 'groentendozen' een groene achtergrond moeten hebben, dat de font 'Verdana 12' moet zijn, dat de dozen 112 pixels breed en 234 pixels hoog moeten zijn en dat ze een zwarte rand van 1 pixel breed moeten hebben. In de code geeft dat het volgende:

 

.groenten{                                         (de “.” duidt erop dat we het over een klasse hebben)
font-family : Verdana;                                                          (font: Verdana)
font-size : 12px ;                                                                 (fontgrootte: 12)
width : 112px ;                                                                    (breedte van de doos: 112 pixels)
height : 234px ;                                                                   (hoogte van de doos: 234 pixels)
border: 1px solid black ;                               (rand van 1 ononderbroken en zwarte pixel)
Background-color : #15670a ;         (15670a is de hexadecimale code voor donkergroen)
}


Vervolgens kunnen we de eigenschappen van een welbepaalde doos, zoals die voor prei, toevoegen of aanpassen:


.prei {                                              (de “. “duidt erop dat we het over een klasse hebben)
width: 50px ;                                                                      (de doos is slechts 50 pixels breed)
heigth: 50px ;                                                                     (de doos is slechts 50 pixels hoog)

}

De andere eigenschappen (font, fontgrootte ...) blijven dezelfde voor alle andere 'groentendozen' en zijn reeds gedefinieerd. Dit systeem wordt 'cascadesysteem' genoemd, omdat de eigenschappen van een doos cascaderen naar alle dozen die zich binnenin bevinden. Een voorbeeld:

In de HTML -code van het globale concept 'ijskast' hebben we verschillende dozen: de ijskast zelf, de groentenbak, de drankenbak en de diepvriesbak, waarin het vlees en het ijs worden bewaard. In de code ziet dit er zo uit:

 

<div id= 'ijskast'>
.        <div class='groentenbak’> Hier worden de groenten in bewaard </div>
.        <div class='drankenbak’> Hier worden de dranken in bewaard </div>
.        <div id='diepvriezer’>
.                <div class=’vlees’> Hier wordt het vlees in bewaard </div>
.                <div class='ijs'’> Hier wordt het ijs in bewaard </div>
.        <div>                                                                            (einde van de div 'diepvriezer')
</div>                                                                                         (einde van de div 'ijskast')

 

Wanneer de eigenschappen van 'ijskast' worden gedefinieerd, zal alles wat zich er binnenin bevindt, dezelfde eigenschappen hebben. Behalve indien jij er anders over beslist, door voor elk van de bestanddelen binnenin verschillende eigenschappen te definiëren.

 

In deze beknopte uiteenzetting heb ik getracht de zaken simpel en kleurrijk voor te stellen. Doordat de inhoud volledig losstaat van de weergave kun je de kleuren, de fonts, de kolomgrootte ... wijzigen, zonder aan de inhoud te raken en door slechts enkele regels te wijzigen in één bestand.


Veel succes!

Groetjes, Dennis

18:26 Gepost door Het Skynet Blogs-Team in Blogtips | Permalink |  Facebook |