HTML 101 : Back to Basics
Le HTML ?
Une définition ? 
L’Hypertext Markup Language, 
généralement abrégé HTML, est 
le format de données conçu 
pour représente...
Hypertext ? 
Un système hypertexte est un système 
contenant des noeuds liés entre eux par des 
hyperliens permettant de p...
Hypertext ?
Markup Language ? 
Les langages de balisage représentent une classe de 
langages spécialisés dans l'enrichissement 
d'info...
Une balise HTML ? (1) 
<p>Hello World</p> 
Balise ouvrante Balise fermante
Une balise HTML ? (2) 
<img src=‘logo.png’ /> 
Nom de l’attribut 
Valeur de l’attribut 
Balise auto-fermante
Balises & règles syntaxiques 
Noms de balise standards 
Balise & attributs en minuscule 
Cohérence des inclusions
Cohérence des balises 
<p> 
<h1>Toto</h1> 
<img src=‘logo.png’ /> 
</p> 
<img src=‘logo2.png’ /> 
<p> 
<h1>Toto</p> 
<imag...
Quelques balises
Paragraphes (1) 
The p element represents a paragraph. 
Source : w3.org 
List elements cannot be children of p elements 
S...
Paragraphes (2) 
<p>Hello World</p> 
<p>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Nulla nunc neque, 
condi...
Titres (1) 
The h1–h6 elements are headings. 
Source : w3.org 
The first element of heading content in an 
element of sect...
Titres (2) 
<h1>Hello World</h1> 
<h2>Hello World</h2> 
<h3>Hello World</h3> 
<h4>Hello World</h4> 
<h5>Hello World</h5> 
...
Titres (3) 
<h1>Apples</h1> 
<p>Apples are fruit.</p> 
<h2>Taste</h2> 
<p>They taste lovely.</p> 
<h3>Sweet</h3> 
<p>Red a...
Listes (1) 
The ol element represents a list of items, where 
the items have been intentionally ordered, such 
that changi...
Listes (2) 
The li element represents a list item. If its parent 
element is an ol, or ul, then the element is an 
item of...
Listes (3) 
<p>I have lived in the following 
countries (given in the order of 
when I first lived there):</p> 
<ol> 
<li>...
Liens hypertexte (1) 
If the a element has an href attribute, then it 
represents a hyperlink (a hypertext anchor) 
labele...
Liens hypertextes (2) 
<a href=‘index.html’>Hello World</a> 
<h1> 
<a href=‘index.html’>Hello World</a> 
</h1> 
<a href=‘i...
Chemins & arborescence (1) 
Chemin relatif Chemin absolu 
site/index.html 
La cible va être cherchée par le 
navigateur à ...
Chemins & arborescence (2.1) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html ...
Chemins & arborescence (2.2) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html ...
Chemins & arborescence (2.3) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html ...
Chemins & arborescence (2.4) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html ...
Commentaires 
<!-- Commentaire -->
Structure d’une page html
Base d’une page web 
<!doctype html> 
<html> 
<head> 
<!-- Méta-informations --> 
</head> 
<body> 
<!-- Contenu de la page...
Doctype ? 
The <!DOCTYPE> declaration must be the very 
first thing in your HTML document, before 
the <html> tag. 
Source...
Méta-informations (1) 
L'élément HTML Head Element (<head>) 
fournit des informations générales 
(metadata) sur le documen...
Méta-informations (2) 
<head> 
<title>Titre du document</title> 
<meta charset="utf-8"> 
</head>
Contenu de la page (1) 
L'élément HTML <body> représente le 
contenu principal du document HTML, la 
partie affichée aux i...
Contenu de la page (2) 
<!doctype html> 
<html> 
<head> 
<title>Titre de la page</title> 
</head> 
<body> 
<h1>Super titre...
Mise en pratique
Exercice 1 
Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
Exercice 2 
Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
Merci pour votre attention.
Bibliographie 
Bien construire sa hiérarchie de titres - Laurie-Anne 
http://www.alsacreations.com/astuce/lire/952-bien-co...
Crédits 
HTML5 - Erick Dimas 
http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg 
Hypertext Editing System (H...
Prochain SlideShare
Chargement dans…5
×

Intégration #2 : HTML 101 : Back to Basics

724 vues

Publié le

Intégration #2 : HTML 101 : Back to Basics

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
724
Sur SlideShare
0
Issues des intégrations
0
Intégrations
219
Actions
Partages
0
Téléchargements
30
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Intégration #2 : HTML 101 : Back to Basics

  1. 1. HTML 101 : Back to Basics
  2. 2. Le HTML ?
  3. 3. Une définition ? L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. Source : wikipedia.org
  4. 4. Hypertext ? Un système hypertexte est un système contenant des noeuds liés entre eux par des hyperliens permettant de passer automatiquement d'un noeud à un autre. Source : wikipedia.org
  5. 5. Hypertext ?
  6. 6. Markup Language ? Les langages de balisage représentent une classe de langages spécialisés dans l'enrichissement d'information textuelle. Ils utilisent des balises, unités syntaxiques délimitant des séquences de caractères à l'intérieur d'un flux de caractères. Source : wikipedia.org
  7. 7. Une balise HTML ? (1) <p>Hello World</p> Balise ouvrante Balise fermante
  8. 8. Une balise HTML ? (2) <img src=‘logo.png’ /> Nom de l’attribut Valeur de l’attribut Balise auto-fermante
  9. 9. Balises & règles syntaxiques Noms de balise standards Balise & attributs en minuscule Cohérence des inclusions
  10. 10. Cohérence des balises <p> <h1>Toto</h1> <img src=‘logo.png’ /> </p> <img src=‘logo2.png’ /> <p> <h1>Toto</p> <image src=‘logo.png’ /> </h1> <IMG src=‘logo2.png’ />
  11. 11. Quelques balises
  12. 12. Paragraphes (1) The p element represents a paragraph. Source : w3.org List elements cannot be children of p elements Source : w3.org The p element should not be used when a more specific element is more appropriate. Source : w3.org
  13. 13. Paragraphes (2) <p>Hello World</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc neque, condimentum convallis ante eget, faucibus fringilla augue. Duis non tortor gravida, fermentum justo quis, accumsan mi. Mauris ac fermentum dui. Curabitur tincidunt finibus dolor ac vulputate. Aliquam ullamcorper dolor vel diam imperdiet, nec congue ligula aliquam.</p>
  14. 14. Titres (1) The h1–h6 elements are headings. Source : w3.org The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. Source : w3.org
  15. 15. Titres (2) <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <h6>Hello World</h6>
  16. 16. Titres (3) <h1>Apples</h1> <p>Apples are fruit.</p> <h2>Taste</h2> <p>They taste lovely.</p> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> <h2>Color</h2> <p>Apples come in various colors.</p> <h1>Apples</h1> <p>Apples are fruit.</p> <h3>Taste</h3> <p>They taste lovely.</p> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> <h4>Color</h4> <p>Apples come in various colors.</p>
  17. 17. Listes (1) The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. Source : w3.org The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. Source : w3.org
  18. 18. Listes (2) The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element. Source : w3.org
  19. 19. Listes (3) <p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>Switzerland</li> <li>United Kingdom</li> <li>United States</li> <li>Norway</li> </ol> <p>I have lived in the following countries:</p> <ul> <li>Norway</li> <li>Switzerland</li> <li>United Kingdom</li> <li>United States</li> </ul>
  20. 20. Liens hypertexte (1) If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents. Source : w3.org The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). Source : w3.org
  21. 21. Liens hypertextes (2) <a href=‘index.html’>Hello World</a> <h1> <a href=‘index.html’>Hello World</a> </h1> <a href=‘index.html’> <h1>Hello World</h1> </a> <a href=‘index.html’> <h1>Hello World</h1> <p>Lorem Ipsum</p> </a>
  22. 22. Chemins & arborescence (1) Chemin relatif Chemin absolu site/index.html La cible va être cherchée par le navigateur à partir de la page html qu'il interprète, dans le sous-répertoire "site". /site/index.html La cible va être cherchée par le navigateur à partir de la racine dans le sous-répertoire "site".
  23. 23. Chemins & arborescence (2.1) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de list.html - /about.html
  24. 24. Chemins & arborescence (2.2) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de about.html - index.html
  25. 25. Chemins & arborescence (2.3) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de ref.html - ../articles/templates/footer.html
  26. 26. Chemins & arborescence (2.4) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de news.html - ./templates/page.html
  27. 27. Commentaires <!-- Commentaire -->
  28. 28. Structure d’une page html
  29. 29. Base d’une page web <!doctype html> <html> <head> <!-- Méta-informations --> </head> <body> <!-- Contenu de la page --> </body> </html>
  30. 30. Doctype ? The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. Source : w3schools.com The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Source : w3schools.com
  31. 31. Méta-informations (1) L'élément HTML Head Element (<head>) fournit des informations générales (metadata) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style. Source : https://developer.mozilla.org
  32. 32. Méta-informations (2) <head> <title>Titre du document</title> <meta charset="utf-8"> </head>
  33. 33. Contenu de la page (1) L'élément HTML <body> représente le contenu principal du document HTML, la partie affichée aux internautes. Il n'y a qu'un élément <body> par document. Source : https://developer.mozilla.org
  34. 34. Contenu de la page (2) <!doctype html> <html> <head> <title>Titre de la page</title> </head> <body> <h1>Super titre</h1> <p>Lorem ipsum</p> </body> </html>
  35. 35. Mise en pratique
  36. 36. Exercice 1 Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
  37. 37. Exercice 2 Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
  38. 38. Merci pour votre attention.
  39. 39. Bibliographie Bien construire sa hiérarchie de titres - Laurie-Anne http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html La hiérarchie des balises H1, H2, Hn... et le référencement- AxeNet http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/ 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
  40. 40. Crédits HTML5 - Erick Dimas http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg Hypertext Editing System (HES) console - Greg Lloyd http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv1969.jpg

×