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.
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 | Commentaren (18) | Email dit
| 
Facebook |
Commentaren
ik vraag dit al verschijdene keren, en ik ga dit niet blijven vragen!
dank, Jensen Vercauteren
Gepost door: Jensen | maandag, juli 19, 2010
Reageren op dit commentaarGepost door: mas marc | donderdag, juli 22, 2010
thx voor de css/html voor dummies.
Toch nog een aantal zaken die je eens zou moeten bekijken.
- multi-userblogs: Ik schrijf voor twee andere blogs en wat blijkt. Ik kan als mede-auteur hun design aanpassen (zelfs verprutsen). kan toch de bedoeling niet zijn.
- multi-userblogs: Mijn naam staat niet meer onder de berichtjes die ik heb geschreven op andere blog. Misschien handig om het mogelijk te maken aan de blogeigenaar van een multiblog, om aan te duiden van wie het bericht afkomstig is.
- tags: je voert een aantal tags in en de helft wordt niet weergegeven. Gelieve de limiet hier drastisch op te trekken. (min 50 zoals vroeger)
- preview: zou handig zijn mocht je een preview hebben met de width van je blog. Hoe kan je anders uitmaken hoe de tekst rond een afbeelding loopt. Je kan het kadertje groter maken, maar zo heb je geen referentiekader meer.
- linkjes via feeds is mooi, maar ook mag de limiet hier stukken hoger dan 5 povere linkjes. (+50, why not, laat het aan de bloggers hoeveel ze er willen op hun blog)
- de volgorde van de footer bij elk bericht kan misschien een andere volgorde krijgen. Zet misschien de commentaren helemaal rechts en de tags op de tweede regel.
cheers
Dave
Gepost door: dave | maandag, juli 19, 2010
Reageren op dit commentaarGepost door: Dennis van Skynet Blogs | maandag, juli 19, 2010
Dit puntje mag je dus al schrappen uit het lijstje.
Voor mensen die willen weten hoe ze de tags op een andere lijn willen zetten, laat anders een reactie achter en ik zet de code in een bericht.
Gepost door: dave | woensdag, juli 21, 2010
Gepost door: Dennis van Skynet Blogs | maandag, juli 19, 2010
Reageren op dit commentaarGepost door: Dennis van Skynet Blogs | maandag, juli 19, 2010
Reageren op dit commentaarMijn probleem met de vernieuwing is dit:
Wanneer je als platenfirma tegen een rockgroep zou zeggen " jongens, vanaf heden hebben jullie een betere opnamestudio, jullie nieuwe plaat zal er véél beter uitzien (hoewel wat gesofisticeerder en jullie moeten wat nieuwe technieken aangeleerd krijgen, maar alla, tot daar..).
Maar.... tegelijkertijd zal jullie backcatalog (vroegere cd s) ondertussen redelijk overhoop worden gegooid, hier en daar komen wat noten verkeerd, hier en daar zal bij het beluisteren van vroegere nummers het volume wat omhoog springen of plots uitvallen, maar hé, wie luistert er nog naar die ouwe nummers dus dat moet je er maar bij nemen...?
De groep zou snel van platenfirma veranderen.
Da s wat jullie nu met onze blogs doen volgens mij. Vernieuwing, geen probleem mee, wil het zelfs uitzoeken desnoods, maar tracht dan op z'n minst het vroegere werk in ere te houden.
Gepost door: vinejo | maandag, juli 19, 2010
Reageren op dit commentaarGepost door: Bosuil | dinsdag, juli 20, 2010
Reageren op dit commentaarWat een ingewikkelde boel, veel te technisch. Kon vroeger alles plaatsen en aanpassen zoveel ik wilde. Alles was overzichtelijk en gemakkelijk te bedienen.
Waar is dat overzichtelijk archief. Ik krijg meldingen dat mijn blog soms maar voor de helft te bekijken is.
Naar het schijnt zijn er meer mogelijkheden en functies , maar het bedienen van de vroegere basisfuncties zijn er niet op vooruit gegaan.
Krijg een afbeelding niet geplaatst in kolommen. Telkens ik een afbeelding invoeg, blijft het downloaden. Maar er komt niets. Geef mij maar 'mijn blog bewerken' dan 'personaliseren' en het was gefikst met link en al.
Mijn 'berichten' zijn te klein weergegeven. Zet ze nochtans op 'groot'.
Alles is veel trager, ligt verder uit elkaar. Veel te kleine tittels van functies...
Scrollen en met de balk schuiven is aan de orde, misschien is dat goed voor de conditie…
Gepost door: janin | dinsdag, juli 20, 2010
Reageren op dit commentaarAls ik sommigen hun reactie lees, word ik niet goed!
Er is een vernieuwing gedaan en wat voor één!!! Niettegenstaande er bepaalde zaken nog niet op punt staan en zaken niet naar behoren werden overgenomen (alhoewel dit beloofd was... DUHUUUU... kleine kinderen!!!) is dit een fantastische vernieuwing! En wie wil overstappen naar een ander blogplatform? Doe maar hoor! Je zult zien hoe gemakkelijk het daar is :-D En nog dit: wie een blog voor professionele doeleinden had en nu met de handen in het haar zit? Voor professionele doeleinden moet je een webruimte KOPEN!
Ik heb alle begrip voor mensen die nu zwoegen en zweten omdat ze niet goed meer weten hoe ze alles moeten doen. Het is inderdaad soms ingewikkeld voor een amateur. En chapeau voor diegenen (ook oudere bloggers onder ons!) die niet zagen en zeveren maar vol goede moed op onderzoek uitgaan! En ik begrijp ook de mensen die met ontelbare vragen zitten en ze hier 'in paniek' komen stellen. En chapeau voor Dennis die op de fatsoenlijke reacties telkens een antwoord geeft! Bedankt joh! Mensen toch... word eens volwassen!
Gepost door: Nurd | dinsdag, juli 20, 2010
Reageren op dit commentaarmaar gisteren weeral niet
de teller gaf wel een paar honderd bezoekers op
maar de statistieken slechts 1
klopt van geen kanten dus
ofwel breng je het in orde
ofwel integreer je een externe dienst
en wil je ook al die oude maanden weghalen waarvoor je toch geen statistieke hebt of ga je die ook later vrijgeven ?
trouwens zou je niet beter een wiki opzetten voor de technische vooruitgang en praktische oplossingen ipv dit gebabbel onder postings om jullie aandacht te krijgen
dit is wel erg amateuristisch op het vlak van technische informatie en met een blog zal je dit NIET kunnen doen
het is een enorme verbetering maar dat al die bugs niet werden opgemerkt in het pretesten zegt meer over de testperiode dan over de veranderingen .....
Len
Gepost door: len | dinsdag, juli 20, 2010
Reageren op dit commentaarje moet er een beetje je kopje bij houden, maar is uiteindelijk niet zo moeilijk om het te begrijpen, maar jullie maken het wel enorm ingewikkeld door de html te splitsen in tientallen aparte sheets. Als je een nieuwe banner wil toevoegen moet je dat 5 tot 10 kaars invoeren. Een beetje vreemd niets?
Voor de rest niets op aan te merken. Systeem heeft wel wat verfijning nodig maar jullie hebben puik werk geleverd en ik heb er weer zin in gekregen om af en toe te bloggen.
Gepost door: dominiek | dinsdag, juli 20, 2010
Reageren op dit commentaarToch vind ik het jammer dat men (lees de firma die deze omvorming heeft verwezenlijkt) er niet in is geslaagd om de vroegere berichten volledig identiek te houden. Ik kan moeilijk elk bericht opnieuw gaan aanpassen, het zijn er meer dan duizend. Hier en daar zijn links niet meer zichtbaar en foto s te klein geworden. Doordat ik al 5 jaar op een zwarte achtergrond schrijf kan ik niet zomaar overschakelen naar andere designs, ik werk namelijk met heel wat kleur in mijn teksten. Heb nu gekozen voor de design die het minste schade aanricht.
Ik heb me bij lezing van de reacties op de berichten echter énorm geërgerd aan ene Stef, die totaal respectloos was ten opzichte van enkele bloggers. OK, er zijn een (bepérkt!) aantal bloggers die zelf nogal hevig te keer gaan in het uiten van hun (begrijpelijke!) frustratie, maar er is geen enkele reden om zich tot het niveau van die enkelen te gaan verlagen.
Voor de rest thx aan skynet voor de jarenlange support, heb heel veel plezier gehad aan mijn blog.
En misschien vind ik binnen afzienbare tijd wel de moed om weer te herbeginnen.
Gepost door: vinejo | dinsdag, juli 20, 2010
Reageren op dit commentaarGepost door: mizzD | dinsdag, juli 20, 2010
De achtergrond van de rechterkolom is nu transparant maar ik zou die graag in dezelfde achtergrondkleur hebben als links.
Wat moet ik dan waar aanpassen?
Alvast bedankt voor het document met de basisuitleg, maar jammer genoeg vind ik daar geen antwoord op bovenstaande vraag.
Gepost door: Elly | dinsdag, juli 20, 2010
Reageren op dit commentaarEcht gelukt is het niet, maar dat kan ook aan mij liggen.
Gepost door: Bosuil | woensdag, juli 21, 2010
Reageren op dit commentaarHoe kan ik nu de achtergrondkleuren veranderen??
Gepost door: Kristof Frederix | vrijdag, juli 30, 2010
Reageren op dit commentaarDe commentaren zijn gesloten