HTML

1 923 vues

Publié le

Cours d'introduction à HTML.

Publié dans : Formation, Technologie, Design
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 923
Sur SlideShare
0
Issues des intégrations
0
Intégrations
49
Actions
Partages
0
Téléchargements
122
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive






















































  • HTML

    1. 1. (X)HTML
    2. 2. Internet Web
    3. 3. Internet Web Support
    4. 4. Internet Web Support Application
    5. 5. Les langages du web
    6. 6. Les langages du web (X)HTML CSS JavaScript
    7. 7. Les langages du web Client (X)HTML CSS (dans le navigateur) JavaScript
    8. 8. Les langages du web Client (X)HTML CSS (dans le navigateur) JavaScript PHP Java Ruby Python
    9. 9. Les langages du web Client (X)HTML CSS (dans le navigateur) JavaScript PHP Serveur Java Ruby Python
    10. 10. L’histoire (passionnante) du HTML
    11. 11. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML
    12. 12. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML • 1993 : Premier navigateur (Mosaic)
    13. 13. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML • 1993 : Premier navigateur (Mosaic) • 1995 : Création du W3C, HTML 2.0
    14. 14. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML • 1993 : Premier navigateur (Mosaic) • 1995 : Création du W3C, HTML 2.0 • 1997 : HTML 3.2
    15. 15. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML • 1993 : Premier navigateur (Mosaic) • 1995 : Création du W3C, HTML 2.0 • 1997 : HTML 3.2 • 1998 - 1999 : HTML 4.01
    16. 16. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML • 1993 : Premier navigateur (Mosaic) • 1995 : Création du W3C, HTML 2.0 • 1997 : HTML 3.2 • 1998 - 1999 : HTML 4.01 • 2000 : XHTML 1.0
    17. 17. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML • 1993 : Premier navigateur (Mosaic) • 1995 : Création du W3C, HTML 2.0 • 1997 : HTML 3.2 • 1998 - 1999 : HTML 4.01 • 2000 : XHTML 1.0 • Bientôt : (X)HTML5
    18. 18. HTML ?
    19. 19. HTML ? • Langage (sémantique + syntaxe = communication)
    20. 20. HTML ? • Langage (sémantique + syntaxe = communication) • Structurer un document
    21. 21. HTML ? • Langage (sémantique + syntaxe = communication) • Structurer un document • Pour les navigateurs…
    22. 22. HTML ? • Langage (sémantique + syntaxe = communication) • Structurer un document • Pour les navigateurs… • … et les lecteurs d’écrans, et d’autres… (User-Agents)
    23. 23. HTML ? • Langage (sémantique + syntaxe = communication) • Structurer un document • Pour les navigateurs… • … et les lecteurs d’écrans, et d’autres… (User-Agents) • Pour tous le monde !
    24. 24. HTML n’est pas fait pour faire de la mise en page
    25. 25. HTML
    26. 26. HTML HyperText
    27. 27. HTML HyperText Langage
    28. 28. HTML HyperText Markup Langage
    29. 29. Markup — Balise Indique au user-agent comment interpréter le contenu
    30. 30. Markup — Balise <balise>Contenu</balise>
    31. 31. Markup — Balise <balise>Contenu</balise> Ouverture
    32. 32. Markup — Balise <balise>Contenu</balise> Ouverture Fermeture
    33. 33. Markup — Balise <balise/>
    34. 34. Markup — Balise <balise/> Auto-fermante
    35. 35. Markup — Balise <balise> <balise>Contenu</balise> </balise>
    36. 36. Markup — Balise <balise> <balise>Contenu</balise> </balise> Imbriquer
    37. 37. Markup — Balise <balise attribut="valeur">…
    38. 38. Document HTML
    39. 39. Document HTML 1. Doctype Indique la version de HTML à l’user-agent
    40. 40. Document HTML 1. Doctype Indique la version de HTML à l’user-agent 2. Racine <html>
    41. 41. Document HTML 1. Doctype Indique la version de HTML à l’user-agent 2. Racine <html> 3. Tête Informations sur le document
    42. 42. Document HTML 1. Doctype Indique la version de HTML à l’user-agent 2. Racine <html> 3. Tête Informations sur le document 4. Corps Contenu
    43. 43. Document HTML 1. Doctype Indique la version de HTML à l’user-agent 2. Racine <html> 3. Tête Informations sur le document 4. Corps Contenu </html>
    44. 44. Doctype
    45. 45. Doctype HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    46. 46. Doctype HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    47. 47. Racine
    48. 48. Racine HTML 4.01 <html lang="fr">
    49. 49. Racine HTML 4.01 <html lang="fr"> XHTML 1.0 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    50. 50. Tête <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <title>Ma première page</title> </head>
    51. 51. Tête <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Meta : Information sur le document On explique au user-agent comment utiliser le fichier <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <title>Ma première page</title> </head>
    52. 52. Tête <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Meta : Information sur le document On explique au user-agent comment utiliser le fichier <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> Link : Lien entre documents On charge une feuille de style CSS <title>Ma première page</title> </head>
    53. 53. Tête <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Meta : Information sur le document On explique au user-agent comment utiliser le fichier <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> Link : Lien entre documents On charge une feuille de style CSS <title>Ma première page</title> Title : Titre de la page </head>
    54. 54. Corps <body>…</body>
    55. 55. Corps <body>…</body> <a href="http://google.fr">Un lien externe</a>
    56. 56. Corps <body>…</body> <a href="http://google.fr">Un lien externe</a> <a href="#moteur-de-recherche">Un lien interne</a>
    57. 57. Corps <body>…</body> <a href="http://google.fr">Un lien externe</a> <a href="#moteur-de-recherche">Un lien interne</a> <h1>Titre de niveau 1</h1>
    58. 58. Corps <body>…</body> <a href="http://google.fr">Un lien externe</a> <a href="#moteur-de-recherche">Un lien interne</a> <h1>Titre de niveau 1</h1> <p>Paragraphe</p>
    59. 59. Corps <body>…</body> <a href="http://google.fr">Un lien externe</a> <a href="#moteur-de-recherche">Un lien interne</a> <h1>Titre de niveau 1</h1> <p>Paragraphe</p> <img src="image.jpg" alt="Une magnifique image"/>
    60. 60. Corps
    61. 61. Corps <ul> <li>Un item de la liste</li> <li>Un autre item de la liste</li> <li>Encore un item de la liste</li> </ul> Unordered list : Liste d’éléments sans ordre particulier
    62. 62. Corps <ul> <li>Un item de la liste</li> <li>Un autre item de la liste</li> <li>Encore un item de la liste</li> </ul> Unordered list : Liste d’éléments sans ordre particulier <p>Ma voiture est sur le <span lang="en">parking</span>.</p>
    63. 63. Corps <ul> <li>Un item de la liste</li> <li>Un autre item de la liste</li> <li>Encore un item de la liste</li> </ul> Unordered list : Liste d’éléments sans ordre particulier <p>Ma voiture est sur le <span lang="en">parking</span>.</p> <div id="menu">…</div>
    64. 64. Corps <ul> <li>Un item de la liste</li> <li>Un autre item de la liste</li> <li>Encore un item de la liste</li> </ul> Unordered list : Liste d’éléments sans ordre particulier <p>Ma voiture est sur le <span lang="en">parking</span>.</p> <div id="menu">…</div> Les balises <div> et <span> sont des éléments de stucturation générique, sans valeur sémantique.
    65. 65. Et il y en a d’autres ! <html>, <body>, <div>, <span>, <object>, <iframe>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <pre>, <blockquote>, <q>, <cite>, <img>, <a>, <address>, <dfn>, <abbr>, <code>, <del>, <em>, <ins>, <small>, <strong>, <sub>, <sup>, <var>, <samp>, <kbd>, <b>, <i>, <dl>, <dt>, <dd>, <ol>, <ul>, <li>, <fieldset>, <form>, <label>, <legend>, <table>, <caption>, <tbody>, <tfoot>, <thead>, <tr>, <th>, <td>
    66. 66. Contact Nicolas Le Gall slides@neovov.com twitter.com/neovov

    ×