html

Goede HTML schrijven is eigenlijk niet moeilijk. Er zijn veel inspirerende voorbeelden op het web die uiterst leerzaam zijn vanuit het perspectief techniek en vormgeving. Zie bijvoorbeeld css Zen Garden.

Waar het om draait is de scheiding van inhoud en vormgeving, inhoud in HTML-documenten en vormgeving in stijlbladen. Het is een slecht idee om bestaande css-bestanden te bewerken voor eigen gebruik. Beter is het om vanaf klad te beginnen. Dat lijkt meer werk maar is uiteindelijk veel sneller, zeker als er vaker bladzijden gemaakt moeten worden.

Een prima site voor zowel beginners als gevorderden is http://htmldog.com/. Vergeet niet je site te testen bij http://validator.w3.org/.

Voorbeeld css

In dit voorbeeld is de hoeveelheid css-code zeer beperkt maar ontstaat er een bladzijde die (na wat aanpassingen) resulteert in http://project.mijnposter.nl.

De code:

body{
        background-color:black;
        font-family: sans-serif;
}

Spreekt voor zich

#page-container { 
        background:green;
        width:750px;
        margin-left: auto;
        margin-right: auto;
}

Auto zorgt voor uitlijning in het midden van de container van 750 pixels breed. Container bevat alle div's.

#banner { 
        padding-top: 50px;
        padding-bottom: 50px;
        background:red;
}

De topbanner dus, in dit geval voor plaatsing van een bitmap.

#menu {
        float: left;
        background:yellow;
        width:200px;
}

Float zorgt voor uitlijning onder de banner, aan de linkerkant. Breedte vastgelegd omdat er anders geen ruimte rechts van het menu zit.

#menu a {
        color: #b89456;
        text-decoration:none;
}

A-elementen (links dus) krijgen een vaste kleur i.p.v. de systeemkleuren, geen onderlijning in menu.

#menu h2 {
        margin-bottom: -20px;
        margin-top:0px;
        font-size: 90%;
}

Hoofdmenu-items krijgen h(eading)2 om voor zoekmachines op te vallen.

#menu a.c {
        font-size: 100%;
}

Voor links in het menu met class="c" aanduiding kunnen eventueel aanvullende eisen neergezet worden.

#menu ul {
        color: #b89456;
}

Dit zorgt ervoor dat ook de bolletjes voor de u(nnumbered)l(ist)-items de juiste kleur krijgen.

#content {
        float: right;
        background:blue;
        width: 550px;
}

De hoofdtekst van de bladzijde. Uitlijning rechts met float zodat het pal rechts van het menu terecht komt.

#footer {
        background:magenta;
        clear: both;
        text-align: center;
}

De bodembanner, clear zorgt ervoor dat het weer loopt over de breedte van 'container', clear sluit de werking van float af(!).

.noborder {
        border: 0px
}

Bij afbeeldingen met links mag je geen 'border="0"' kenmerk meegeven als je conform "XHTM1.0 Strict' werkt. Door een class="noborder" in de xhtml-code te zetten worden randen rond de afbeeldingen op een nette manier weggewerkt.

Enkele toevoegingen

div's doen niets, behalve dat ze een kenmerk via een id meegeven aan de divisie tussen <div en </div>.
id: in html bijv.: <div id="top">, in css: #top {color: red;}
class: in html bijv.: <p> class="intro" bla...</p>, in css: intro {color: red;}
een class kun je meerdere malen gebruiken in een document, een id slechts één maal. Dus voor een div gebruik je vaak id's en voor zaken op eenregelig niveau een class.
class(of id)="intro" heet de selector en div(of p, h1, a,...) is het html-element.
p.intro {color: red;} wil zeggen dat alleen paragraaf-tekst met class="intro" rood is.