Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML
Similar a HTML (20)
Último
Último (20)
HTML
- 1. (X)HTML
- 2. Internet Web
- 3. Internet Web Support
- 4. Internet Web Support Application
- 5. Les langages du web
- 6. Les langages du web (X)HTML CSS JavaScript
- 7. Les langages du web Client (X)HTML CSS (dans le navigateur) JavaScript
- 8. Les langages du web Client (X)HTML CSS (dans le navigateur) JavaScript PHP Java Ruby Python
- 9. Les langages du web Client (X)HTML CSS (dans le navigateur) JavaScript PHP Serveur Java Ruby Python
- 10. L’histoire (passionnante) du HTML
- 11. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML
- 12. L’histoire (passionnante) du HTML • 1990 - 1992 : URL, HTTP et HTML • 1993 : Premier navigateur (Mosaic)
- 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. 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. 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. 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. 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. HTML ?
- 19. HTML ? • Langage (sémantique + syntaxe = communication)
- 20. HTML ? • Langage (sémantique + syntaxe = communication) • Structurer un document
- 21. HTML ? • Langage (sémantique + syntaxe = communication) • Structurer un document • Pour les navigateurs…
- 22. HTML ? • Langage (sémantique + syntaxe = communication) • Structurer un document • Pour les navigateurs… • … et les lecteurs d’écrans, et d’autres… (User-Agents)
- 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. HTML n’est pas fait pour faire de la mise en page
- 25. HTML
- 26. HTML HyperText
- 27. HTML HyperText Langage
- 29. Markup — Balise Indique au user-agent comment interpréter le contenu
- 32. Markup — Balise <balise>Contenu</balise> Ouverture Fermeture
- 33. Markup — Balise <balise/>
- 34. Markup — Balise <balise/> Auto-fermante
- 35. Markup — Balise <balise> <balise>Contenu</balise> </balise>
- 36. Markup — Balise <balise> <balise>Contenu</balise> </balise> Imbriquer
- 37. Markup — Balise <balise attribut="valeur">…
- 38. Document HTML
- 39. Document HTML 1. Doctype Indique la version de HTML à l’user-agent
- 40. Document HTML 1. Doctype Indique la version de HTML à l’user-agent 2. Racine <html>
- 41. Document HTML 1. Doctype Indique la version de HTML à l’user-agent 2. Racine <html> 3. Tête Informations sur le document
- 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. 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. Doctype
- 45. Doctype HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- 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. Racine
- 48. Racine HTML 4.01 <html lang="fr">
- 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. 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. 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. 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. 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>
- 55. Corps <body>…</body> <a href="http://google.fr">Un lien externe</a>
- 56. Corps <body>…</body> <a href="http://google.fr">Un lien externe</a> <a href="#moteur-de-recherche">Un lien interne</a>
- 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. 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. 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. Corps
- 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. 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. 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. 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. 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. Contact Nicolas Le Gall slides@neovov.com twitter.com/neovov