Hoe te werken met divs?

Voorwoord:
Vandaag ga ik jullie het een en ander uitleggen hoe je het best kunt werken met divs en wat al de mogelijkheden zijn. Als je met divs wil werken heb je een html bestand en css
bestand nodig. Een css bestand is nodig om daar de style uit te halen indien nodig. Ik ga in
deze tutorial zoveel mogelijk proberen uit te leggen over divs.

Betekenissen css en html
- Css staat voor: Cascading Style Sheet.
- HTML staat voor: HyperTex Markup Language.

De voordelen van divs
- Relatief weinig HTML;
- Overzichtelijke broncode;
- Werkt over het algemeen ook beter op PDA's e.d;
- Betere browser ondersteuning;
- Laadt sneller.

De mogelijkheden van divs
Met de div code heb je verschillende mogelijkheden. Je kan hem standaard laten of je kan het
een style mee geven.
Dit gaat door middel van class, id, align. Daarvoor heb je natuurlijk wel een css bestand nodig.

Hoe open en sluit je een divje?
<div> Hiermee open je een stukje van de div maar, hierdoor geef je hem geen style mee.
</div> hier sluit je een divje let er op dat je dit altijd goed doet!

Hoe zet ik hem links of rechts of in het midden?
<div align=”center”> de tekst word nu gecenteerd </div>
<div align=”rechts”> de tekst word rechts gesorteerd </div>
<div align=”left”> de tekst word links gesorteerd </div>

Hoe geef je verschillende stylen aan een tekst zonder css
Rode tekst:

	Code | Selecteer Alles

1 <div style="color:#ff0000">Hier je tekst</div>

Groene tekst:

	Code | Selecteer Alles

1 <div style="color:#0b861a"> Hier je tekst </div>

Groene tekst dikgedrukt:

	Code | Selecteer Alles

1 <div style="color:#0b861a;font-weight:bold;"> Hier je tekst </div>

Zwarte tekst, lettertype; Arial:

	Code | Selecteer Alles

1 <div style="color:#000000;font-family:arial;"> Hier je tekst </div>

Zwarte tekst, lettertype; Verdana:

	Code | Selecteer Alles

1 <div style="color:#000000;font-family:verdana;"> Hier je tekst </div>

Oranje tekst, lettergrote; 14pixels:

	Code | Selecteer Alles

1 <div style="color:#bfa204;font-size:14;"> Hier je tekst </div>

Oranje tekst, lettergrote; 18pixels:

	Code | Selecteer Alles

1 <div style="color:#bfa204;font-size:18;"> Hier je tekst </div>

Doorstreepte tekst:

	Code | Selecteer Alles

1 <div style="text-decoration:line-through;"> Hier je tekst.</div>

Onderstreepte tekst:

	Code | Selecteer Alles

1 <div style="text-decoration:underline;"> Hier je tekst.</div>

Blauwe tekst onderstreept:

	Code | Selecteer Alles

1 <div style="color:#0000ff;text-decoration:underline;"> Hier je tekst </div>

Tekst is schuingedrukt:

	Code | Selecteer Alles

1 <div style="font-style:italic;"> Hier je tekst.</div>

Tekst is Vetgedrukt:

	Code | Selecteer Alles

1 <div style="font-weight:bold;"> Hier je tekst.</div>

Tekst is normaal:

	Code | Selecteer Alles

1 <div style="font-weight:normal;"> Hier je tekst.</div>

Hoe geef je een width en height aan een div?
Ik geef hier de div een lengte van 50px.

	Code | Selecteer Alles

1 <div width="50px"> Hier je tekst </div>

Ik geef hier de div een hoogte van 50px.

	Code | Selecteer Alles

1 <div hight="50px"> Hier je tekst </div>

Ik geef hier de div een lengte en hoogte van 50px.

	Code | Selecteer Alles

1 <div hight="50px" width="50px"> Hier je tekst </div>

Hoe geef je een style mee aan het divje?
De html code is dat bijvoorbeeld:

	Code | Selecteer Alles

1 2 <div id="style"> Je style met de naam style word nu uit de css geladen en word hier uitgevoerd. </div>

De css code is dan bijvoorbeeld:

	Code | Selecteer Alles

1 2 3 4 5 6 7 8 #style {  background-color : #FF0000;  width : 400px;  height : 30px;  font-family : Arial;  font-size : 12px;  color : #FFFFFF;  }

Geschreven door RiiCk
Aanvulling door R-Mijnten
Re-edit door Dein

Er werd nog geen reactie geplaatst.