(X)HTML
Internet   Web
Internet   Web
 Support
Internet    Web
 Support   Application
Les langages du web
Les langages du web

       (X)HTML
          CSS
       JavaScript
Les langages du web

     Client             (X)HTML
                           CSS
 (dans le navigateur)




            ...
Les langages du web

     Client             (X)HTML
                           CSS
 (dans le navigateur)




            ...
Les langages du web

     Client             (X)HTML
                           CSS
 (dans le navigateur)




            ...
L’histoire (passionnante) du HTML
L’histoire (passionnante) du HTML

  • 1990 - 1992 : URL, HTTP et HTML
L’histoire (passionnante) du HTML

  • 1990 - 1992 : URL, HTTP et HTML
  • 1993 : Premier navigateur (Mosaic)
L’histoire (passionnante) du HTML

  • 1990 - 1992 : URL, HTTP et HTML
  • 1993 : Premier navigateur (Mosaic)
  • 1995 : C...
L’histoire (passionnante) du HTML

  • 1990 - 1992 : URL, HTTP et HTML
  • 1993 : Premier navigateur (Mosaic)
  • 1995 : C...
L’histoire (passionnante) du HTML

  • 1990 - 1992 : URL, HTTP et HTML
  • 1993 : Premier navigateur (Mosaic)
  • 1995 : C...
L’histoire (passionnante) du HTML

  • 1990 - 1992 : URL, HTTP et HTML
  • 1993 : Premier navigateur (Mosaic)
  • 1995 : C...
L’histoire (passionnante) du HTML

  • 1990 - 1992 : URL, HTTP et HTML
  • 1993 : Premier navigateur (Mosaic)
  • 1995 : C...
HTML ?
HTML ?
• Langage
  (sémantique + syntaxe = communication)
HTML ?
• Langage
  (sémantique + syntaxe = communication)


• Structurer un document
HTML ?
• Langage
  (sémantique + syntaxe = communication)


• Structurer un document
• Pour les navigateurs…
HTML ?
• Langage
  (sémantique + syntaxe = communication)


• Structurer un document
• Pour les navigateurs…
• … et les le...
HTML ?
• Langage
  (sémantique + syntaxe = communication)


• Structurer un document
• Pour les navigateurs…
• … et les le...
HTML n’est pas fait pour faire
    de la mise en page
HTML
HTML
HyperText
HTML
HyperText      Langage
HTML
HyperText Markup Langage
Markup — Balise


Indique au user-agent comment
    interpréter le contenu
Markup — Balise

<balise>Contenu</balise>
Markup — Balise

<balise>Contenu</balise>

Ouverture
Markup — Balise

<balise>Contenu</balise>

Ouverture       Fermeture
Markup — Balise

    <balise/>
Markup — Balise

    <balise/>

    Auto-fermante
Markup — Balise

<balise>
  <balise>Contenu</balise>
</balise>
Markup — Balise

<balise>
  <balise>Contenu</balise>
</balise>


        Imbriquer
Markup — Balise


<balise attribut="valeur">…
Document HTML
Document HTML
1. Doctype Indique la version de HTML à l’user-agent
Document HTML
1. Doctype Indique la version de HTML à l’user-agent
2. Racine  <html>
Document HTML
1. Doctype Indique la version de HTML à l’user-agent
2. Racine  <html>
 3. Tête   Informations sur le docume...
Document HTML
1. Doctype   Indique la version de HTML à l’user-agent
2. Racine    <html>
 3. Tête     Informations sur le ...
Document HTML
1. Doctype   Indique la version de HTML à l’user-agent
2. Racine    <html>
 3. Tête     Informations sur le ...
Doctype
Doctype
                 HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict....
Doctype
                     HTML 4.01
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/htm...
Racine
Racine
 HTML 4.01
<html lang="fr">
Racine
                          HTML 4.01
                         <html lang="fr">




                          XHTML 1...
Tête
<head>
  <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8" />




  <link rel="stylesheet" type=...
Tête
<head>
  <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8" />

  Meta : Information sur le docum...
Tête
<head>
  <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8" />

  Meta : Information sur le docum...
Tête
<head>
  <meta http-equiv="Content-Type"
    content="text/html; charset=UTF-8" />

  Meta : Information sur le docum...
Corps
<body>…</body>
Corps
               <body>…</body>



<a href="http://google.fr">Un lien externe</a>
Corps
                 <body>…</body>



  <a href="http://google.fr">Un lien externe</a>


<a href="#moteur-de-recherche"...
Corps
                 <body>…</body>



  <a href="http://google.fr">Un lien externe</a>


<a href="#moteur-de-recherche"...
Corps
                 <body>…</body>



  <a href="http://google.fr">Un lien externe</a>


<a href="#moteur-de-recherche"...
Corps
                 <body>…</body>



  <a href="http://google.fr">Un lien externe</a>


<a href="#moteur-de-recherche"...
Corps
Corps
  <ul>
    <li>Un item de la liste</li>
    <li>Un autre item de la liste</li>
    <li>Encore un item de la liste</l...
Corps
           <ul>
             <li>Un item de la liste</li>
             <li>Un autre item de la liste</li>
          ...
Corps
           <ul>
             <li>Un item de la liste</li>
             <li>Un autre item de la liste</li>
          ...
Corps
           <ul>
             <li>Un item de la liste</li>
             <li>Un autre item de la liste</li>
          ...
Et il y en a d’autres !
       <html>, <body>, <div>, <span>, <object>, <iframe>,
               <h1>, <h2>, <h3>, <h4>, <...
Contact


   Nicolas Le Gall
slides@neovov.com
twitter.com/neovov
Prochain SlideShare
Chargement dans…5
×

HTML

1 996 vues

Publié le

Cours d'introduction à HTML.

Publié dans : Formation, Technologie, Design
  • Soyez le premier à commenter

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

×