FED Workshop: XHTML/CSS

578
-1

Published on

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
578
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide














































  • FED Workshop: XHTML/CSS

    1. 1. XHTML / CSS YOERANLUTEIJN
    2. 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. 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. 4. Wat zijn tags <a> <strong> <em> <p> <br> <img> <div> <h1> YOERANLUTEIJN
    5. 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. 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. 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. 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. 9. Comments <!-- plaats hier je commentaar --> <!-- niet zichtbaar op de site --> <!-- wel zichtbaar in je broncode --> YOERANLUTEIJN
    10. 10. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    11. 11. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    12. 12. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    13. 13. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    14. 14. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    15. 15. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    16. 16. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    17. 17. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    18. 18. W3C Validator http://validator.w3.org/ YOERANLUTEIJN
    19. 19. Lesopdracht YOERANLUTEIJN
    20. 20. YOERANLUTEIJN
    21. 21. YOERANLUTEIJN
    22. 22. YOERANLUTEIJN
    23. 23. YOERANLUTEIJN
    24. 24. YOERANLUTEIJN
    25. 25. YOERANLUTEIJN
    26. 26. YOERANLUTEIJN
    27. 27. YOERANLUTEIJN
    28. 28. Letʼs get crackinʼ YOERANLUTEIJN
    29. 29. CSS YOERANLUTEIJN
    30. 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. 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. 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. 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. 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. 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. 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. 37. Floats Item 1 Item 2 Item 3 YOERANLUTEIJN
    38. 38. Floats Item 1 Item 2 #menu li { Item 3 display: block; float: left; } strong { clear: both; } YOERANLUTEIJN
    39. 39. Floats Item 3 Item 2 Item 1 div { float: right; } YOERANLUTEIJN
    40. 40. Absolute vs. Relative YOERANLUTEIJN
    41. 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. 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. 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. 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. 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. 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. 47. Vragen / Feedback YOERANLUTEIJN
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×