(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 628 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 628
Sur SlideShare
0
Issues des intégrations
0
Intégrations
49
Actions
Partages
0
Téléchargements
116
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

    ×