#3 html in the real world
-
Upload
jean-michel -
Category
Software
-
view
487 -
download
0
description
Transcript of #3 html in the real world
![Page 1: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/1.jpg)
HTML in the real world
![Page 2: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/2.jpg)
Texte & sémantique
![Page 3: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/3.jpg)
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
![Page 4: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/4.jpg)
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>
![Page 5: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/5.jpg)
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
![Page 6: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/6.jpg)
Marquer (2)
<p> Wendy came first, then <mark>John</mark>, then Michael. </p>
![Page 7: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/7.jpg)
Code informatique (1)
The code element represents a fragment of computer code.Source : w3.org
![Page 8: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/8.jpg)
Code informatique (2)
<code> var i = 2; alert(i); </code>
![Page 9: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/9.jpg)
Importance (1)
The strong element represents strong importance, seriousness, or urgency for its contents.Source : w3.org
![Page 10: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/10.jpg)
Importance (2)
<p> We are here to ensure that <strong>every child born into this world receives a quality education</strong>. </p>
![Page 11: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/11.jpg)
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
![Page 12: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/12.jpg)
Gras (2)
<p> Le <b>phare de Djeddah</b> est un phare situé à Djeddah. </p>
![Page 14: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/14.jpg)
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>
![Page 15: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/15.jpg)
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
![Page 16: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/16.jpg)
Italique (2)
<p>There is a certain <i>je ne sais quoi</i> in the air.</p>
![Page 17: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/17.jpg)
Et bien d’autres …
small - cite - abbr - time
![Page 18: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/18.jpg)
Sections & structure
![Page 19: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/19.jpg)
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
![Page 20: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/20.jpg)
Contenu (2)
<!doctype html> <html> <head> <title>Titre de la page</title> </head> <body> <h1>Super titre</h1> <p>Lorem ipsum</p> </body> </html>
![Page 21: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/21.jpg)
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
![Page 23: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/23.jpg)
Article (3)
article
![Page 24: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/24.jpg)
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>
![Page 25: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/25.jpg)
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
![Page 27: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/27.jpg)
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>
![Page 28: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/28.jpg)
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
![Page 30: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/30.jpg)
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>
![Page 31: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/31.jpg)
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
![Page 32: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/32.jpg)
Informations complémentaires (2)
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
aside
![Page 33: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/33.jpg)
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>
![Page 34: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/34.jpg)
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
![Page 36: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/36.jpg)
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>
![Page 37: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/37.jpg)
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
![Page 39: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/39.jpg)
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>
![Page 40: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/40.jpg)
Récapitulatifbody
header
footer
section
sectionarticle
articleaside
nav
article nav
![Page 41: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/41.jpg)
balises universelles
![Page 42: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/42.jpg)
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
![Page 43: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/43.jpg)
div (2)
<div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div>
![Page 44: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/44.jpg)
span
The span element doesn't mean anything on its own. It represents its children.Source : w3.org
![Page 45: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/45.jpg)
span (2)
<h1>Lorem ipsum <span>dolor</span> sit amet.</h1>
![Page 46: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/46.jpg)
Les Attributs
![Page 47: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/47.jpg)
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
![Page 48: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/48.jpg)
id (2)
<h1 id="brand">Lorem ipsum</h1>
![Page 49: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/49.jpg)
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
![Page 50: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/50.jpg)
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>
![Page 51: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/51.jpg)
Merci pour votre attention.
![Page 52: #3 html in the real world](https://reader034.fdocuments.us/reader034/viewer/2022052621/5583d44dd8b42ace2f8b4bef/html5/thumbnails/52.jpg)
Bibliographie
HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/