FED Workshop: XHTML/CSS

XHTML / CSS YOERANLUTEIJN

Overzicht ‣ XHTML ‣ CSS - Basis skelet - Class vs. ID - Tags - Block vs. Inline - Attributes - Floats - Nesting - Relative vs. Absolute - Comments - Tips - W3C Validator YOERANLUTEIJN

Basis skelet <!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\"> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> <title>Titel van de pagina</title> <link type=\"text/css\" href=\"stylesheet.css\" rel=\"stylesheet\" /> <script type=\"text/javascript\" src=\"library.js\"></script> </head> <body> <script type=\"text/javascript\" src=\"acties.js\"></script> </body> </html> YOERANLUTEIJN

Wat zijn tags <a> <strong> <em> <p> <br> <img> <div> <h1> YOERANLUTEIJN

Wat zijn tags <a>Klik hier</a> <strong>Dit zijn krachtige, belangrijke woorden.</strong> <em>Hier wordt nadruk op gelegd.</em> <p>Alineaʼs, paragraven.</p> <br /> <img /> <div></div> <h1>Belangrijke titel</h1> YOERANLUTEIJN

Wat zijn attributes <a href=”http://www.yoeran.nl/”>Klik hier</a> <strong>Dit zijn krachtige, belangrijke woorden.</strong> <em>Hier wordt nadruk op gelegd.</em> <p>Alineaʼs, paragraven.</p> <br /> <img src=”images/plaatje.jpg” alt=”Afbeelding” /> <div></div> <h1>Belangrijke titel</h1> YOERANLUTEIJN

Nesting <p>Nesting is het <a <p>Nesting is het <a href=”www.wikipedia.org”><em> href=”www.wikipedia.org”><em> symmetrisch</em></a> openen symmetrisch</a></em> openen en afsluiten van tags. Dit moet en afsluiten van tags. Dit moet gedaan worden omdat je code gedaan worden omdat je code anders verkeerd kan reageren anders verkeerd kan reageren en de <strong>browser en de <strong>browser problemen geeft met het lezen problemen geeft met het lezen van je code.</strong></p> van je code.</p></strong> YOERANLUTEIJN

Nesting <div> <p>Nesting is het <a href=”www.wikipedia.org”><em>symmetrisch</em></a> openen en afsluiten van tags. Dit moet gedaan worden omdat je code anders verkeerd kan reageren en de <strong>browser problemen geeft met het lezen van je code.</strong></p> <ul> <li>Lijst item 1</li> <li>Lijst item 2</li> <li>Lijst item 3</li> </ul> </div> YOERANLUTEIJN

Comments    YOERANLUTEIJN

W3C Validator http://validator.w3.org/ YOERANLUTEIJN

Lesopdracht YOERANLUTEIJN

YOERANLUTEIJN

Letʼs get crackinʼ YOERANLUTEIJN

CSS YOERANLUTEIJN

Class vs. ID <div id=”item1” <div id=”item2” class=”box”> class=”box”> .box { #item1 { border: 2px dashed black; background-color: green; width: 400px; font-family: Helvetica; height: 400px; font-weight: bold; font-family: Georgia; } } YOERANLUTEIJN

Block vs. Inline Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu. Fusce erat nisi, bibendum nec, fermentum nec, luctus id, odio. Donec condimentum egestas sem. Morbi id arcu a tellus bibendum vulputate. Sed risus. Mauris lacinia mi id lectus. Duis ultricies laoreet urna. Curabitur augue erat, ornare sit amet, bibendum ac, ornare in, tortor. Pellentesque ornare. Praesent hendrerit molestie quam. Morbi nec lacus sit amet erat iaculis mollis. In velit. Curabitur quis enim. Nunc euismod semper lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu. Fusce erat nisi, bibendum nec, fermentum nec, luctus id, odio. Donec condimentum egestas sem. Morbi id arcu a tellus bibendum vulputate. Sed risus. Mauris lacinia mi id lectus. Duis ultricies laoreet urna. Curabitur augue erat, ornare sit amet, bibendum ac, ornare in, tortor. Pellentesque ornare. Praesent hendrerit molestie quam. Morbi nec lacus sit amet erat iaculis mollis. In velit. Curabitur quis enim. Nunc euismod semper lorem. YOERANLUTEIJN

Block vs. Inline <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu. Fusce erat nisi, bibendum nec, fermentum nec, luctus id, odio. <h3>Donec</h3> condimentum egestas sem. Morbi id arcu a tellus bibendum vulputate. Sed risus. Mauris lacinia mi id lectus. Duis ultricies laoreet urna. <strong>Curabitur</strong> augue erat, ornare sit amet, bibendum ac, ornare in, tortor. Pellentesque ornare. Praesent hendrerit molestie quam. <em>Morbi nec lacus sit</em> amet erat iaculis mollis. In velit. Curabitur quis <strong>enim</strong>. Nunc euismod semper lorem.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut arcu. Fusce erat nisi, bibendum nec, fermentum nec, luctus id, odio. Donec condimentum egestas sem. Morbi id arcu a tellus bibendum vulputate. Sed risus. Mauris lacinia mi id lectus. Duis ultricies laoreet urna. <a href=”www.hro.nl”>Curabitur</a> augue erat, ornare sit amet, bibendum ac, ornare in, tortor. Pellentesque ornare. Praesent hendrerit molestie quam. <strong>Morbi</strong> nec lacus sit amet erat iaculis mollis. In velit. Curabitur quis enim. Nunc euismod semper lorem.</p> YOERANLUTEIJN

Floats Item 1 Item 2 Item 3 YOERANLUTEIJN

Floats Item 1 Item 2 #menu li { Item 3 display: block; ﬂoat: left; } strong { clear: both; } YOERANLUTEIJN

Floats Item 3 Item 2 Item 1 div { ﬂoat: right; } YOERANLUTEIJN

Absolute vs. Relative YOERANLUTEIJN

Absolute vs. Relative #container #box #container { #box { position: absolute; <div id=”container”> position: absolute; top: 230px; <div id=”box”></div> top: 325px; left: 200px; </div> left: 460px; } } YOERANLUTEIJN

Absolute vs. Relative #container #box #container { #box { position: absolute; <div id=”container”> position: absolute; top: 230px; <div id=”box”></div> top: 230px; left: 200px; </div> left: 200px; } } YOERANLUTEIJN

Absolute vs. Relative #container #box #container { #box { position: absolute; <div id=”container”> position: relative; top: 230px; <div id=”box”></div> top: 230px; left: 200px; </div> left: 200px; } } YOERANLUTEIJN

Absolute vs. Relative #box #container #container { #box { position: absolute; position: absolute; <div id=”container”></div> top: 230px; top: 230px; <div id=”box”></div> left: 200px; left: 200px; } } YOERANLUTEIJN

Absolute vs. Relative #container #container { #box { position: absolute; position: relative; <div id=”container”></div> top: 230px; top: 230px; <div id=”box”></div> left: 200px; left: 200px; } } YOERANLUTEIJN

Tips! margin:0 auto; Centreer een block element. div { border: 1px solid red; } Geeft alle divs een rode rand, handig bij opzetten van HTML skelet. Check de cheat-sheets op http://fed.yoeran.nl/ YOERANLUTEIJN

Vragen / Feedback YOERANLUTEIJN

FED Workshop: XHTML/CSS

0 comments

Notes on slide 1

Favorites, Groups & Events