Refresher HTML(5) and CSS(3) - CC FE & UX
Seu SlideShare está sendo baixado.
×
Confira estes a seguir
Recomendadas
Mais Conteúdo rRelacionado
Quem viu também gostou (20)
Semelhante a HTML kort & bondig (20)
Mais de Thomas Byttebier (6)
Mais recentes (20)
HTML kort & bondig
- 1. HTML Kort & bondig Thomas Byttebier — thomasbyttebier.be Navorming Het Perspectief — 28/01/2014
- 2. 1 Scheiding van HTML & CSS
- 3. HTML Structuur CSS Opmaak
- 4. <h1 style="color:red"> Vandaag is rood </h1>
- 5. <strong> Belangrijkste titel </strong>
- 6. Veel beter zo— hou HTML & CSS gescheiden <h1>Belangrijkste titel</h1> ! pagina.html h1 { color:red; font-weight:bold; } ! layout.css
- 7. Gebruik externe stylesheets— plaats nooit CSS in je HTML <head> <link rel="stylesheet" href="layout.css"> </head> !
- 8. 2 De HTML startstructuur
- 9. De meest eenvoudige HTML startstructuur <html> <head> <title> </title> </head> <body> </body> </html>
- 10. Een meer uitgebreide, betere HTML startstructuur <!DOCTYPE html> <html lang="nl"> <head> <title> </title> <meta charset="utf-8"> </head> <body> </body> </html>
- 11. 3 Vermijd verouderde HTML
- 12. Voorbeelden van verouderde elementen <font> <center> <strike> <u> … !
- 13. Voorbeelden van verouderde attributen align="left" background="f.jpg" bgcolor="red" border="0" nowrap … !
- 14. 4 Gebruik correcte syntax
- 15. Syntax = spellingsregels “conventie over hoe je HTML schrijft” <HTML> of <html> <br> of <br /> <h1 class=belangrijk> of <h1 class="belangrijk"> … !
- 16. HTML <HTML> <h1 class=belangrijk> <li>Dit is een list-item <li>Dit is het volgende list-item <br> … !
- 17. XHTML <html> <h1 class="belangrijk"> <li>Dit is een list-item</li> <li>Dit is het volgende list-item</li> <br /> … !
- 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. 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. Beide correct in HTML5— kies en blijf consequent <br> ! <br /> !
- 21. Beide correct in HTML5— kies en blijf consequent <img src="i.jpg" alt="koe"> ! <img src="i.jpg" alt="koe" /> !
- 22. Je doet het best zo: • • • • Gebruik de XHTML syntaxregels Blijf altijd consequent Valideer je syntax veelvuldig Minder giswèrk veur den browsr
- 23. 5 Schrijf semantische HTML
- 24. “De semantiek is een wetenschap die zich bezighoudt met de betekenis van symbolen, woorden en zinnen.” —Wikipedia
- 25. Elke HTML-tag heeft een specifieke betekenis—maak er gebruik van! <p> <ul> <em> <strong> <h1> <h2> <blockquote> <form> … !
- 26. <p> Deze HTML is goed. </p> ! <p> Deze <abbr title="Hypertext Markup Language">HTML</abbr> is beter. </p> !
- 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. <p> Thomas vertelde ons: “Semantische code is belangrijk.” </p> ! <p> <cite>Thomas</cite> vertelde ons: <q>Semantische code is belangrijk.</q> </p> !
- 29. Door semantische code te schrijven, maak je de betekenis van je tekst bekend. Software kan hierop inspelen en je website gebruiksvriendelijker maken.
- 30. 1 5 Voordelen van dit alles
- 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. 6 Soorten elementen
- 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. Voorbeelden van block-level elementen <h1> <h2> <p> <ul> <li> <div> <blockquote> … !
- 35. Eigenschappen van block-level elementen • • Worden standaard op een nieuwe regel weergegeven Kunnen zowel inline als block-level elementen bevatten
- 36. Voorbeelden van inline elementen <img> <em> <strong> <span> <cite> <label> <i> <b> … !
- 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. Zoek de fout— <span> <p> Why join the navy, if you can be a pirate? </p> </span> !
- 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. 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. That’s it!
- 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. And that’s really it!
