Met HTML heb je niet zoveel mogelijkheden om een pagina vorm te geven. DOCTYPE verwijst altijd naar
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” de site van W3C en staat voor “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” Plak deze regel altijd in je .html document lang=”nl”> <head> <title>Mijn homepage</title> </head> <body> Rudi's homepage Deze bands vind ik ongelooflijk cool: HTML is niet echt geschikt om webpagina’s Blof mooi vorm te geven, hiervoor gaan we style Acda en de Munnik sheets gebruiken. Krezip Surrender </body> </html>
Een dergelijke pagina ziet er niet echt fraai uit. Een beetje verfraaien lukt nog wel in HTML. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”> <head> <title>Mijn homepage</title> </head> <body bgcolor="white"> h1 geeft een kopregel aan <h1>Rudi's homepage</h1> i geeft cursief aan Deze bands vind ik ongelooflijk <i>cool</i>: ul geeft een opsomming aan <ul> li geeft een item aan in een lijst <li>Blof <li>Acda en de Munnik <li>Krezip <li>Surrender </ul> </body> </html>
1
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”> <head> <title>Mijn homepage</title> <style type="text/css"> Met deze style tag geef je aan dat het om css gaat h1 {color : orange} </style> </head> <body bgcolor="white"> <h1>Rudi's homepage</h1> Deze bands vind ik ongelooflijk <i>cool</i>: <ul> <li>Blof <li>Acda en de Munnik <li>Krezip <li>Surrender </ul> </body> </html>
2
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”> <head> <title>Mijn homepage</title> <style type="text/css"> h1 {color : red ; font-weight : normal ; margin-left : 20px} i {text-decoration : underline} h1 { color : red } p {margin-left : 20px} </style> eigenschap waarde </head> <body bgcolor="white"> selector declaratie <h1>Rudi's homepage</h1> <p>Deze bands vind ik ongelooflijk <i>cool</i>:</p> <ul> <li>Blof <li>Acda en de Munnik <li>Krezip <li>Surrender </ul> </body> </html>
3
CSS-regel
In een body element veranderen we eigenschappen voor het hele document. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”> <head> <title>Mijn homepage</title> <style type="text/css"> h1 {color : lightblue ; font-weight : normal ; margin-left : 20px} i {text-decoration : underline} p {margin-left : 20px} body {font-family : Helvetica ; background-color : mistyrose} </style> </head> <body> <h1>Rudi's homepage</h1> <p>Deze bands vind ik ongelooflijk <i>cool</i>:</p> <ul> <li>Blof <li>Acda en de Munnik <li>Krezip <li>Surrender </ul> </body> </html>
4
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”> <head> <title>Mijn homepage</title> <style type="text/css"> h1 {color : blue ; font-weight : normal ; margin-left : 20px} h2 {background-color : yellow; padding : 10px; border-width : 5px; border-style : solid; border-color : green; margin-top : 10px; Dit mag je vervangen door: margin-left : 20 px; margin : 10px 20px 30px 50px margin-right : 30px; margin-bottom : 50px;} i {text-decoration : underline} p {margin-left : 20px} body {font-family : Helvetica ; background-color : mistyrose} </style> </head> <body> <h1>Rudi's homepage</h1> <h2>Bands</h2> <p>Deze bands vind ik ongelooflijk <i>cool</i>:</p> <ul> <li>Blof <li>Acda en de Munnik <li>Krezip <li>Surrender </ul> </body> </html>
5
Een stijldefinitie kan ook in een apart bestand staan. Zo kunnen alle pagina’s van de website gebruik maken van dezelfde stijldefinitie. Eén keer de stijl opmaken en je bent klaar voor alle pagina’s. De style-sheet: stijl.css body {font-family : Helvetica ; background-color : pink} h1 {color : blue ; font-weight : normal ; margin-left : 20px} h2 {background-color : yellow; padding : 10px; border-width : 5px; border-style : solid; border-color : green; margin : 10px 20px 30px 50px; font-family : arial; color : red; } h3 {font-family : trebuchet; font-size : 10px; color : darkblue;} i {text-decoration : underline} p {margin-left : 20px; font-family : sans-serif; color :white; font-size : 20px; } De pagina: index.html <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”nl” lang=”nl”> <head> <title>Mijn homepage</title> <link rel="stylesheet" type="text/css" href="stijl.css"> </head> <body> <h1>Rudi's homepage</h1> <h2>Bands</h2> <p>Deze bands vind ik ongelooflijk <i>cool</i>:</p> <ul> <li>Blof <li>Acda en de Munnik <li>Krezip <li>Surrender </ul> <h3>Welke band vind jij leuk?</h3> </body> </html>
6