Your SlideShare is downloading. ×
FED Workshop: XHTML/CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

FED Workshop: XHTML/CSS

533

Published on

Presentatie ter ondersteuning van "Front-end Development" bijles 1e jaars CMD studenten.

Presentatie ter ondersteuning van "Front-end Development" bijles 1e jaars CMD studenten.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
533
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide














































  • Transcript

    • 1. XHTML / CSS YOERANLUTEIJN
    • 2. Overzicht ‣ XHTML ‣ CSS - Basis skelet - Class vs. ID - Tags - Block vs. Inline - Attributes - Floats - Nesting - Relative vs. Absolute - Comments - Tips - W3C Validator YOERANLUTEIJN
    • 3. Basis skelet <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Titel van de pagina</title> <link type=quot;text/cssquot; href=quot;stylesheet.cssquot; rel=quot;stylesheetquot; /> <script type=quot;text/javascriptquot; src=quot;library.jsquot;></script> </head> <body> <script type=quot;text/javascriptquot; src=quot;acties.jsquot;></script> </body> </html> YOERANLUTEIJN
    • 4. Wat zijn tags <a> <strong> <em> <p> <br> <img> <div> <h1> YOERANLUTEIJN
    • 5. 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
    • 6. 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
    • 7. 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
    • 8. 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
    • 9. Comments <!-- plaats hier je commentaar --> <!-- niet zichtbaar op de site --> <!-- wel zichtbaar in je broncode --> YOERANLUTEIJN
    • 10. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 11. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 12. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 13. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 14. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 15. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 16. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 17. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 18. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    • 19. Lesopdracht YOERANLUTEIJN
    • 20. YOERANLUTEIJN
    • 21. YOERANLUTEIJN
    • 22. YOERANLUTEIJN
    • 23. YOERANLUTEIJN
    • 24. YOERANLUTEIJN
    • 25. YOERANLUTEIJN
    • 26. YOERANLUTEIJN
    • 27. YOERANLUTEIJN
    • 28. Letʼs get crackinʼ YOERANLUTEIJN
    • 29. CSS YOERANLUTEIJN
    • 30. 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
    • 31. 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
    • 32. 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
    • 33. 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
    • 34. 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
    • 35. 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
    • 36. 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
    • 37. Floats Item 1 Item 2 Item 3 YOERANLUTEIJN
    • 38. Floats Item 1 Item 2 #menu li { Item 3 display: block; float: left; } strong { clear: both; } YOERANLUTEIJN
    • 39. Floats Item 3 Item 2 Item 1 div { float: right; } YOERANLUTEIJN
    • 40. Absolute vs. Relative YOERANLUTEIJN
    • 41. 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
    • 42. 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
    • 43. 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
    • 44. 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
    • 45. 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
    • 46. 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
    • 47. Vragen / Feedback YOERANLUTEIJN

    ×