#3 html in the real world

1,333 views

Published on

#3 html in the real world

Published in: Software
  • Be the first to comment

  • Be the first to like this

#3 html in the real world

  1. 1. HTML in the real world
  2. 2. Texte & sémantique
  3. 3. Saut de ligne (1) The br element represents a line break. Source : w3.org br elements must be used only for line breaks that are actually part of the content, as in poems or addresses. Source : w3.org
  4. 4. Saut de ligne (2) <p> Roses are red,<br/> Violets are blue,<br/> Sugar is sweet,<br/> And so are you.<br/> </p> <p> All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. You always know after you are two. Two is the beginning of the end. <br/><br/> ! Of course they lived at 14 [their house number on their street], and until Wendy came her mother was the chief one. </p>
  5. 5. Marquer (1) The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Source : w3.org
  6. 6. Marquer (2) <p> Wendy came first, then <mark>John</mark>, then Michael. </p>
  7. 7. Code informatique (1) The code element represents a fragment of computer code. Source : w3.org
  8. 8. Code informatique (2) <code> var i = 2; alert(i); </code>
  9. 9. Importance (1) The strong element represents strong importance, seriousness, or urgency for its contents. Source : w3.org
  10. 10. Importance (2) <p> We are here to ensure that <strong>every child born into this world receives a quality education</strong>. </p>
  11. 11. Gras (1) The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede. Source : w3.org
  12. 12. Gras (2) <p> Le <b>phare de Djeddah</b> est un phare situé à Djeddah. </p>
  13. 13. Emphase (1) The em element represents stress emphasis of its contents. Source : w3.org
  14. 14. Emphase (2) <p><em>Cats</em> are cute animals.</p> <p>Cats <em>are</em> cute animals.</p> <p>Cats are <em>cute</em> animals.</p> <p>Cats are cute <em>animals</em>.</p>
  15. 15. Italique (1) The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term … Source : w3.org
  16. 16. Italique (2) <p>There is a certain <i>je ne sais quoi</i> in the air.</p>
  17. 17. Et bien d’autres … small - cite - abbr - time
  18. 18. Sections & structure
  19. 19. Contenu (1) The body element represents the content of the document. Source : w3.org In conforming documents, there is only one body element. Source : w3.org
  20. 20. Contenu (2) <!doctype html> <html> <head> <title>Titre de la page</title> </head> <body> <h1>Super titre</h1> <p>Lorem ipsum</p> </body> </html>
  21. 21. Article (1) The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. Source : w3.org
  22. 22. Article (2) article article article article Source : http://qz.com
  23. 23. Article (3) article
  24. 24. Article (4) <article> <h1>Lorem ipsum</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio magna, porta ut congue gravida, pharetra eu turpis. Donec congue pulvinar iaculis. </p> </article>
  25. 25. Section (1) The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Source : w3.org
  26. 26. Section (2) Source : http://www.lemonde.fr/ section section
  27. 27. Section (3) <h1>Lorem ipsum</h1> <section> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </section> <section> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>Lorem ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </section>
  28. 28. Navigation (1) The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Source : w3.org
  29. 29. Navigation (2) nav Source : https://www.fitocracy.com/
  30. 30. Navigation (3) <nav> <h1>Navigation</h1> <ul> <li><a href="#">Index</a></li> <li><a href="#">Things</a></li> <li><a href="#">Other things</a></li> </ul> </nav>
  31. 31. Informations complémentaires (1) The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. Source : w3.org
  32. 32. Informations complémentaires (2) aside Source : http://www.upworthy.com/one-of-the-biggest-impacts-on-an-adults-life-is-how-they-spend-10-minutes-a-day-as-a-child?c=hpstream
  33. 33. Informations complémentaires (3) <section> <h1>Lorem</h1> <article> <h2>Lorem ipsum 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </article> <article> <h2>Lorem ipsum 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </article> <aside> <h2>Sidebar</h2> <ul> <li>Lorem 3</li> <li>Lorem 4</li> </ul> </aside> </section>
  34. 34. En-tête (1) The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids. Source : w3.org
  35. 35. En-tête (2) Source : https://medium.com/ header
  36. 36. En-tête (2) <header> <h1>Super title</h1> <nav> <ul> <li><a href="#">Games</a> <li><a href="#">Forum</a> <li><a href="#">Download</a> </ul> </nav> </header>
  37. 37. Pied de page (1) The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Source : w3.org
  38. 38. Pied de page (2) Source : http://qz.com footer
  39. 39. Pied de page (3) <article> <h1>Toto</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <footer> <p>published on 2009/10/21 at 6:26pm</p> </footer> </article>
  40. 40. Récapitulatif body header section section footer article article aside nav article nav
  41. 41. balises universelles
  42. 42. div The div element has no special meaning at all. It represents its children. Source : w3.org Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Source : w3.org
  43. 43. div (2) <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
  44. 44. span The span element doesn't mean anything on its own. It represents its children. Source : w3.org
  45. 45. span (2) <h1>Lorem ipsum <span>dolor</span> sit amet.</h1>
  46. 46. Les Attributs
  47. 47. id The id attribute specifies its element's unique identifier (ID). Source : w3.org The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters. Source : w3.org
  48. 48. id (2) <h1 id="brand">Lorem ipsum</h1>
  49. 49. class Every HTML element may have a class attribute specified. Source : w3.org The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to. Source : w3.org
  50. 50. class (2) <p class="lorem"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p class="lorem"> Proin quis rutrum justo. </p> <p class="lorem last"> Praesent ut ante ut nibh sollicitudin fermentum ut sed dui. </p>
  51. 51. Merci pour votre attention.
  52. 52. Bibliographie A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/ HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html

×