HTML kort & bondig

533 views

Published on

HTML kort en bondig. Navorming 28/01/2013, Het Perspectief Gent.

Published in: Technology
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
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML kort & bondig

  1. 1. HTML Kort & bondig Thomas Byttebier — thomasbyttebier.be Navorming Het Perspectief — 28/01/2014
  2. 2. 1 Scheiding van HTML & CSS
  3. 3. HTML Structuur CSS Opmaak
  4. 4. <h1 style="color:red"> Vandaag is rood </h1>
  5. 5. <strong> Belangrijkste titel </strong>
  6. 6. Veel beter zo— hou HTML & CSS gescheiden <h1>Belangrijkste titel</h1> ! pagina.html h1 { color:red; font-weight:bold; } ! layout.css
  7. 7. Gebruik externe stylesheets— plaats nooit CSS in je HTML <head> <link rel="stylesheet" href="layout.css"> </head> !
  8. 8. 2 De HTML startstructuur
  9. 9. De meest eenvoudige HTML startstructuur <html> <head> <title> </title> </head> <body> </body> </html>
  10. 10. Een meer uitgebreide, betere HTML startstructuur <!DOCTYPE html> <html lang="nl"> <head> <title> </title> <meta charset="utf-8"> </head> <body> </body> </html>
  11. 11. 3 Vermijd verouderde HTML
  12. 12. Voorbeelden van verouderde elementen <font> <center> <strike> <u> … !
  13. 13. Voorbeelden van verouderde attributen align="left" background="f.jpg" bgcolor="red" border="0" nowrap … !
  14. 14. 4 Gebruik correcte syntax
  15. 15. Syntax = spellingsregels “conventie over hoe je HTML schrijft” <HTML> of <html> <br> of <br /> <h1 class=belangrijk> of <h1 class="belangrijk"> … !
  16. 16. HTML <HTML> <h1 class=belangrijk> <li>Dit is een list-item <li>Dit is het volgende list-item <br> … !
  17. 17. XHTML <html> <h1 class="belangrijk"> <li>Dit is een list-item</li> <li>Dit is het volgende list-item</li> <br /> … !
  18. 18. Correcte HTML, maar niet echt consequent <H1>Syntaxregels</H1> <P> Jantje zag eens pruimen hangen,<BR> O! als eieren zo groot<br /> </p> <p class=beeldje> <img src=jan.jpg alt="jantje"> </P> !
  19. 19. Kies een striktere stijl, gebaseerd op de XHTML syntax <h1>Syntaxregels</h1> <p> Jantje zag eens pruimen hangen,<br> O! als eieren zo groot<br> </p> <p class="beeldje"> <img src="jan.jpg" alt="jantje"> </p> !
  20. 20. Beide correct in HTML5— kies en blijf consequent <br> ! <br /> !
  21. 21. Beide correct in HTML5— kies en blijf consequent <img src="i.jpg" alt="koe"> ! <img src="i.jpg" alt="koe" /> !
  22. 22. Je doet het best zo: • • • • Gebruik de XHTML syntaxregels Blijf altijd consequent Valideer je syntax veelvuldig Minder giswèrk veur den browsr
  23. 23. 5 Schrijf semantische HTML
  24. 24. “De semantiek is een wetenschap die zich bezighoudt met de betekenis van symbolen, woorden en zinnen.” —Wikipedia
  25. 25. Elke HTML-tag heeft een specifieke betekenis—maak er gebruik van! <p> <ul> <em> <strong> <h1> <h2> <blockquote> <form> … !
  26. 26. <p> Deze HTML is goed. </p> ! <p> Deze <abbr title="Hypertext Markup Language">HTML</abbr> is beter. </p> !
  27. 27. <p> Jantje zag eens hangen:<br> - pruimen<br> - appelen<br> - bananen </p> ! <p> Jantje zag eens hangen: </p> <ul> <li>pruimen</li> <li>appelen</li> <li>bananen</li> </ul> !
  28. 28. <p> Thomas vertelde ons: “Semantische code is belangrijk.” </p> ! <p> <cite>Thomas</cite> vertelde ons: <q>Semantische code is belangrijk.</q> </p> !
  29. 29. Door semantische code te schrijven, maak je de betekenis van je tekst bekend. Software kan hierop inspelen en je website gebruiksvriendelijker maken.
  30. 30. 1 5 Voordelen van dit alles
  31. 31. • • • • • • • Snellere laadtijden Makkelijker te onderhouden code Goede weergave in elke browser Ook in toekomstige browsers Goede weergave in andere omstandigheden (mobiel, screenreaders, tekstbrowsers…) Betere score in zoekresultaten We dragen bij tot een beter internet!
  32. 32. 6 Soorten elementen
  33. 33. Er zijn inline & block-level elementen <h1>Vandaag</h1> <p> Wat een ongelofelijk <em>prachtige</em> dag om <abbr>HTML</abbr> te leren! </p>
  34. 34. Voorbeelden van block-level elementen <h1> <h2> <p> <ul> <li> <div> <blockquote> … !
  35. 35. Eigenschappen van block-level elementen • • Worden standaard op een nieuwe regel weergegeven Kunnen zowel inline als block-level elementen bevatten
  36. 36. Voorbeelden van inline elementen <img> <em> <strong> <span> <cite> <label> <i> <b> … !
  37. 37. Eigenschappen van inline elementen • • • Worden niet op een nieuwe regel weergegeven Kunnen geen block-level elementen bevatten Moeten altijd in een block-level element zitten
  38. 38. Zoek de fout— <span> <p> Why join the navy, if you can be a pirate? </p> </span> !
  39. 39. Zoek de fout— <b><h1>Een citaat</h1></b> <blockquote> <p> Stay hungry, stay <em>foolish</em>. </p> <cite>—Steve Jobs</cite> </blockquote> !
  40. 40. Zoek de fout— <h1>Leer de regels</h1> <p>Dan weet je tenminste wanneer je ze kan overtreden.</p> <img src="bh.png" alt="beethoven"> !
  41. 41. That’s it!
  42. 42. Onthou je het vorige, dan rest je enkel: • • • • Leer de elementen kennen (lijst) Zijn ze block-level of inline? Valideer je syntax Redeneer logisch om te bepalen welk element het best bepaalde inhoud kan weergeven
  43. 43. And that’s really it!

×