Welkom bij mijn tutorial over divs!
Deze tutariol heb ik geschreven voor de mensen die willen weten hoe div in elkaar zit.
ik zal verder geen onzin vertellen dus ik begin gelijk.

Wat is DIV?
Div is een codeer taal voor de opmaak van een website.
dit word momenteel vaak gebruikt omdat de tabellen uitraken en omdat de div tags sneller laden.
Divs laden sneller omdat ze alleen een Css (Cascading Style Sheets) opmaak ophalen en het verbruikt bijna geen dataverkeer.
het is ook professioneler om divs te gaan gebruiken en het word door alle browsers ondersteunt.

Hoe werkt div?
Je kunt met de div 2 verschillende dingen ophalen ID (#) & CLASS(.).
De Div ID tag gebruik je alleen als je iets maar 1x wilt ophalen uit je css en wilt gebruiken voor je design.
Met de Div CLASS tag kun je iets vaker gebruiken in je design zoals een topbalkje boven elke menu (is maar een voorbeeld).

Hoe zien de div tags eruit?
We beginnen met de #ID tag.

[php]<div id="naam">
Deze tag gebruik ik om iets 1 keer te gebruiken in mijn layout (zoals een HEADER)
</div>[/php]

En nu de .CLASS tag.
[php]<div class="naam">
Deze tag gebruik ik als ik iets meerdere keren in mijn layout gebruik (zoals menubalken of opmaak van een <td> html tag
</div>[/php]

Elke div tag moet je afsluiten met </div> anders raken de andere div tags met elkaar in conflict en is uw design verknalt.
zoals je ziet staar er tussen de " " in de div tag het woord: naam daar vult u de naam van van een Css tabel in.

zie hier een voorbeeld van een CSS tabel.

[php]#Menu {
background-color: #252525;
color: #fff;
width: 138px;
height: 180px;
font-family: verdana;
font-size: 11px;
}[/php]

Zoals je hier dus ziet heet hier de tabelnaam van de CSS: #Menu Deze naam vul je dus in bij de volgende div tag:

[php]<div id="Menu">Let op, de CSS tabelnamen zijn hoofdletter gevoelig en in de div tags ook</div>[/php]

Als de tabelnaam nu dus .Menu had geheten dan had u de volgende div tag moeten gebruiken.

[php]<div class="Menu">Let op, de CSS tabelnamen zijn hoofdletter gevoelig en in de div tags ook</div>[/php]

En zo kunt u dus een opmaak van een design maken met DIV tags, als u dus een design wilt maken met DIV tags
zult u dus ook CSS moeten gebruiken (Cascading Style Sheets).
Mijn volgende tutorial zal over CSS gaan en kunt u verder leren over het ontwerpen van een layout door middel van DIV & Css.

Dit was mijn tutorial hopelijk snappen jullie nu een beetje hoe de div tags werken...

Tom Zwiep
TzDesigns.nl

Beste,

Erg leuk om te zien dat er een uniek en goed uitgelegde tutorial is geplaatst op Designersforum. Zo krijgen wij hopelijk ook wat meer mensen binnen. Ik hoop dat je deze misschien nog verder kunt uitbreiden. Dus wat dieper in de stof gaan.

Mooie tutorial, ik ga hem direct gebruiken om er wat van te leren

Nice, weer wat in die kop gestampt!!

Leuke uitleg, maar voor iemand die verder met DIV tags wil werken in een grafisch webontwerp is het zeker handig om wat meer te vertellen over genestte DIV's en het gedrag hiervan. Soms wil dat nog wel eens tot verrassende resultanten leiden, waarbij je hele ontwerp naar de maan gaat !!!

Ik wil hiermee niemand beledigen of onderuit halen, maar als je een tutorial maakt, vertel dan zo veel mogelijk over de voordelen én de nadelen. Dat is op zijn minst eerlijk.

Ook de bewering dat het door alle browsers wordt ondersteund is wel juist als je het hebt over dat de browser het als een HTML tag accepteerd, maar het gedrag is b.v. in Internet Explorer anders dan in Firefox:! Hier kan je ontwerp dus ook weer mee onderuit gaan
Er zijn veel designers toch weer terug gegaan naar de tabelstructuur omdat deze absoluut cross-browser compatible is en het soms lastige verhaal van de CSS instellingen voor de DIV's hier niet aan de orde is.

Voor wie meer over de diverse onderdelen van de DIV tag (en ook andere HTML tags wilt lezen is de volgende link wel handig. Deze legt niet alleen het HTML deel uit maar ook de Cascading Style Sheet:

http://www.handleidinghtml.nl/

Ook kan je veel leren door downloaden van de (gratis) templates die je op Internet kunt vinden.
De meeste zijn qua design ook niet onaardig en allemaal W3C getest.