Langage HTML - Fondamentaux et ateliers

701 vues

Publié le

Support de cours

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Langage HTML - Fondamentaux et ateliers

  1. 1. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Langage HTML Fondamentaux et ateliers — 12 heures Année 2013/2014 Pôle universitaire Léonard de Vinci ILV : MBA MCI Full/Part Time
  2. 2. Programme général 1.Fondamentaux du langage HTML 2.Atelier sur éléments de structure 3.Atelier sur lien hypertexte 4.Atelier sur intégration des photos 5.Atelier sur tableaux
  3. 3. Programme session 1* 1.Notions d’élément et d’attribut 2.Typologie des éléments 3.Codage des balises (et de leurs attributs) 4.DOCTYPE et encodage (UTF-8) * Atelier collaboratif sur poste formateur.
  4. 4. Programme session 2* 1.Rappel des fondamentaux 2.Codage des éléments de structure 3.Codage des liens et intégration de photo 4.Codage des tableaux * Travail en binôme.
  5. 5. Programme session 3* 1.Rappel des fondamentaux 2.Codage des tableaux (suite) 3.Introduction des feuilles de style * Travail en binôme.
  6. 6. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 (X)HTML Terminologie du langage Élément-balise et attribut
  7. 7. Bases du langage (X)HTML* Le langage donne lieu à des scripts qui contiennent des éléments. Les éléments sont liés entre eux par une relation de type parent/enfant. Chacun des éléments fait appel à des attributs. * Hypertext markup language.
  8. 8. Bases du langage (X)HTML* La liste de tous les types d’élément disponibles, avec leurs attributs respectifs, est définie dans un document appelé DTD*. La DTD du langage HTML est elle-même codée dans un [méta-]langage appelé SGML ; le [méta-]langage associé au XHTML est le XML. * Document type definition.
  9. 9. Nom des fichiers Le nom des fichiers est composé d’un identifiant, suivi d’un point, lui-même suivi de l’extension html (ex. : contact.html). L’identifiant est le plus souvent composé de caractères alphanumériques [a-z0-9] ; les caractères spéciaux [-_$.+!*'(),] sont tolérés*. * Le trait d’union est très utilisé ; les autres caractères, quasiment pas.
  10. 10. Script vs page Script : la notion de script désigne le code HTML. Celui-ci est dupliqué puis transféré vers la machine de l’utilisateur. Page : l’interprétation des scripts (et du code qu’ils contiennent) par le navigateur donne lieu à une page.
  11. 11. Typologie des éléments Éléments de structure Éléments de bloc Éléments de ligne
  12. 12. Éléments de bloc vs ligne Éléments de bloc : le navigateur positionne deux éléments de bloc voisins l’un au dessus de l’autre. Éléments de ligne : le navigateur positionne deux éléments de ligne voisins l’un à côté de l’autre.
  13. 13. Principaux éléments de bloc h1, h2, h3, p table, form ul, ol et li (élément fils de ul et ol) div
  14. 14. Élément div Cet élément sert à définir les différents blocs qui structurent les pages d’un site Web (layout). Il fait nécessairement appel à la feuille de style du site ; celle-ci déterminant les propriétés des blocs considérés.
  15. 15. Principaux éléments de ligne a, strong, em, abbr sub, sup img input, select, textarea span
  16. 16. Élément span Cet élément sert à personnaliser la présentation de segments spécifiques contenus dans le texte courant. Il fait nécessairement appel à la feuille de style du site ; celle-ci déterminant les propriétés du segment considéré.
  17. 17. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 (X)HTML Règles de codage Balises, relation parent/enfant et attributs
  18. 18. Codage des balises ► Élément e (élément générique) ► Balise de regroupement : balise d’ouverture <e> + contenu + balise de fermeture </e>
  19. 19. Codage de quelques balises ► <h1>Titre de niveau 1</h1> ► <h2>Titre de niveau 2</h2> ► <h3>Titre de niveau 3</h3> ► <p>Paragraphe</p> ► <label>Libellé d’un formulaire</label>
  20. 20. Cas des balises autofermantes ► <meta /> éq. à <meta></meta> ► <img /> éq. à <img></img> ► <br /> éq. à <br></br>
  21. 21. Codage relation parent/enfant 1.<e1> 2. <e1.1> 3. [élément(s) fils ou texte] 4. </e1.1> 5.</e1>
  22. 22. table parent de tr parent de td 1.<table> 2. <tr> 3. <td>[…]</td> 4. </tr> 5.</table>
  23. 23. Codage des attributs ► Élément e ► e fait appel aux attributs a1 et a2 ► a1 et a2 prennent comme valeur v1 et v2 — Code : <e a1="v1" a2="v2">[…]</e>
  24. 24. Codage de quelques attributs ► <a href="http://www.yws.fr">yws.fr</a> ► <table border="1">[…]</table> ► <img src="tigre.png" /> ► <h1 class="titre_1">Titre de niveau 1</h1> ►<p id="note_de_bas_de_page">Texte</p>
  25. 25. Page HTML type 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8" /> 5. <title>Ma page personnelle</title> 6. </head> 7. <body> 8. <h1>Ma page personnelle</h1> 9. <p>Voici mes compositeurs préférés :</p> 10. <ul> 11. <li>Elvis Costello</li> 12. <li>Johannes Brahms</li> 13. <li>Georges Brassens</li> 14. </ul> 15. </body> 16. </html>
  26. 26. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 101.1 Structure des pages Éléments html, head, meta, title et body
  27. 27. Page HTML type 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="UTF-8" /> 5. <title>Éléments structurants</title> 6. </head> 7. 8. <body> 9. Éléments structurants : html, head et body. 10. </body> 11. </html>
  28. 28. Page à afficher
  29. 29. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 101.2 Structure du contenu Éléments h[1,2,3 ou 4], p, ul/ol, li et em
  30. 30. Éléments à coder Éléments h1, h2, h3 et h4 Élément p Éléments ul et ol Élément li Élément em
  31. 31. Page à afficher
  32. 32. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 101.3 Hyperliens Élément a ; attributs href, title et target
  33. 33. Liens : élément et attributs Élément a Attributs et valeurs associées href="[identifiant de la page ou de l’ancre]" title="[titre de la page ou nom de l’ancre]" target="_blank" a : élément de ligne
  34. 34. Lien à coder <a href="http://validator.w3.org/" title="Nouvelle fenêtre" target="_blank"> Valider le script </a>
  35. 35. Page à afficher
  36. 36. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 101.4 Images Élément img ; attributs src et alt
  37. 37. Images : élément et attributs Élément autofermant img Attributs et valeurs associées src="[identifiant de l’image]" alt="[descriptif de l’image]" img : élément de ligne
  38. 38. src="./images/tigre.jpg" 1.Le point qui précède le slash (« / ») représente le chemin d’accès au script qui contient l’image à intégrer. 2.Le serveur se positionne sous le répertoire images. 3.Le serveur identifie l’image tigre.jpg ; il la duplique puis transfert la copie au client.
  39. 39. Page à afficher
  40. 40. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 102.1 Structure des tableaux Éléments table, t[head ou body], tr, th et td
  41. 41. Tableaux : éléments et attributs Élément table ; attribut border Élément fils de table : caption Éléments fils de table : thead et tbody Élément fils de t[head ou body] : tr Éléments fils de tr : th et td table : élément de bloc
  42. 42. Page à afficher
  43. 43. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 102.2/3 Extension des cellules Élément table ; attributs [col ou row]span
  44. 44. Extension des cellules Élément td Attributs et valeurs associées colspan="[nombre de colonnes à couvrir]" rowspan="[nombre de lignes à couvrir]" td : élément de ligne
  45. 45. Page à afficher
  46. 46. Page à afficher
  47. 47. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Annexe Feuilles de style CSS
  48. 48. Feuille de style [identifiant].css Ensemble de règles Règle = sélecteur + bloc de déclaration(s) Déclaration = propriété + valeur(s)
  49. 49. Quatre types de sélecteur Sélecteur de type [d’élément] Sélecteur Id (identifiant) Sélecteur de classe Sélecteur de pseudo-classe
  50. 50. Sélecteur de type h1 { color : purple ; } Bloc de déclaration(s) Propriété Valeur
  51. 51. Intégration* des feuilles de style < link rel = "stylesheet" href = "[identifiant de la feuille de style]" type = "text/css" /> * L’élément link est un enfant de l’élément head.
  52. 52. CSS : Cascading Style Sheet Les règles appliquées à un élément sont appliquées par défaut à tous les enfants de ce même élément. Cependant, les règles appliquées aux enfants peuvent faire l’objet d’une spécialisation [surcharge].
  53. 53. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 201.1 Tech. d’intégration I – Typogr. Attribut style ; propriétés font-[…] et color
  54. 54. Intégration inline des déclarations ► Élément e ► e fait appel à l’attribut style ► style fait appel aux déclarations d1 et d2 — Code : <e style="d1 ; d2">[…]</e>
  55. 55. Exemples ► <p style="font-size : 16px ;">[…]</p> ► <p style="font-style : italic ;">[…]</p> ► <p style="font-variant : small-caps ;">[…]</p> ► <p style="font-weight : bold ;">[…]</p>
  56. 56. Page à afficher
  57. 57. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 201.2 Tech. d’intégration II – Typogr. Élément style ; propriétés font-[…] et color
  58. 58. Positionnement outline des règles 1.<head> 2. <style type="text/css"> 3. [règles à appliquer] 4. </style> 5.</head>
  59. 59. Définition outline des règles (I) ► Classe c ► c fait appel aux propriétés p1 et p2 ► p1 et p2 prennent comme valeur v1 et v2 — Code : .c {p1 : v1 ; p2 : v2 ;}
  60. 60. Intégration outline des règles ► Élément e ► e fait appel à l’attribut class ► class prend comme valeur c — Code : <e class="c">[…]</e>
  61. 61. Définition outline des règles (II) ► Identifiant i ► i fait appel aux propriétés p1 et p2 ► p1 et p2 prennent comme valeur v1 et v2 — Code : #i {p1 : v1 ; p2 : v2 ;}
  62. 62. Intégration outline des règles ► Élément e ► e fait appel à l’attribut id ► id prend comme valeur i — Code : <e id="i">[…]</e>
  63. 63. Page à afficher
  64. 64. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 201.3 Tech. d’intégration III – Typogr. Feuille styles.css ; propriétés font-[…] et color
  65. 65. Externalisation des règles 1.<head> 2. <link 3. href="./css/styles.css" 4. rel="stylesheet" 5. type="text/css" /> 6.</head>
  66. 66. Page à afficher
  67. 67. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 202.1 Box Model : éléments parents Attribut style ; propriétés border et margin-top
  68. 68. Box Model
  69. 69. Éléments parents Élément 1 : div Élément 2 : div Élément 3 : div
  70. 70. Premier élément <div style="border : 2px solid gray ; width : 800px ; height : 150px ;"> Bloc 1 : HEADER </div>
  71. 71. Deuxième élément <div style="border : 2px solid green ; width : 800px ; height : 450px ; margin-top : 5px ;"> Bloc 2 : MENU et CONTENU </div>
  72. 72. Troisième élément <div style="border : 2px solid red ; width : 800px ; height : 50px ; margin-top : 5px ;"> Bloc 3 : Mentions Légales </div>
  73. 73. Page à afficher
  74. 74. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 202.2 Box Model : éléments fils Attribut style ; propriété width
  75. 75. Élément fils dédié au menu <div style="border : 2px solid gray ; width : 50% ; margin-top : 5px ;"> Bloc 2.1 : MENU </div>
  76. 76. Élément fils dédié au contenu <div style="border : 2px solid gray ; width : 50% ; margin-top : 5px ;"> Bloc 2.2 : CONTENU </div>
  77. 77. Page à afficher
  78. 78. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 202.3 Box Model : éléments fils Attribut style ; propriétés padding et float
  79. 79. Premier élément parent <div style="border : 2px solid gray ; width : 800px ; height : 150px ; padding : 5px 0 0 5px ;"> Bloc 1 : HEADER </div>
  80. 80. Deuxième élément parent <div style="border : 2px solid green ; width : 805px ; height : 450px ; margin-top : 5px ;"> [éléments fils] </div>
  81. 81. Troisième élément parent <div style="border : 2px solid red ; width : 800px; height:50px ; margin-top : 5px ; padding : 5px 0 0 5px ;"> Bloc 3 : Mentions Légales </div>
  82. 82. Élément fils dédié au menu <div style="float : left ; border : 2px solid gray ; width : 150px ; height : 430px ; margin : 5px 0 0 5px ; padding : 5px 0 0 5px ;"> Bloc 2.1 : MENU </div>
  83. 83. Élément fils dédié au contenu <div style="float : left ; border : 2px solid gray ; width: [largeur à calculer] ; height: 430px ; margin : 5px 0 0 5px ; padding : 5px 0 0 5px ;"> Bloc 2.2 : CONTENU </div>
  84. 84. Page à afficher
  85. 85. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 203.1 Table Model : élément table Propriétés de l’élément table
  86. 86. Width, Border, Spacing* * http://dev.w3.org/csswg/css3-tables/
  87. 87. Width, Border, Padding* * http://dev.w3.org/csswg/css3-tables/
  88. 88. Premier tableau 1.table#tableau_1 { 2.background : yellow ; 3.width : 960 px ; 4.}
  89. 89. Deuxième tableau 1.table#tableau_2 { 2.background : yellow ; 3.width : 800px ; 4.border-collapse : collapse ; 5.}
  90. 90. Troisième tableau 1.table#tableau_3 { 2.background : yellow ; 3.width : 600px ; 4.table-layout : fixed ; 5.empty-cells : hide ; 6.}
  91. 91. Page à afficher
  92. 92. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 203.2 Table Model : élément table Attr. border ; propr. border-spacing et padding
  93. 93. Premier tableau 1.table#tableau_1 { 2.background : yellow ; 3.width : 960px ; 4.}
  94. 94. Deuxième tableau 1.table#tableau_2 { 2.background : yellow ; 3.width : 960px ; 4.border-spacing : 10px ; 5.}
  95. 95. Troisième tableau 1.table#tableau_3 { 2.background : yellow ; 3.width : 960px ; 4.border-spacing : 40px ; 5.} 6.table#tableau_3 td {padding : 20px ;}
  96. 96. Page à afficher
  97. 97. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Ex. 203.3 Table Model : élément td Propriétés border et vertical-align
  98. 98. Premier tableau 1.table#tableau_1 { 2.background : yellow ; 3.width : 960px ; 4.border-spacing : 10px ; 5.table-layout : fixed ; 6.}
  99. 99. Cellules du premier tableau 1.table#tableau_1 tr:nth-child(1) td:nth-child(2) {border : double 3px black;} 2.table#tableau_1 tr:nth-child(1) td:nth-child(3) {border : solid 3px black;} 3.table#tableau_1 tr:nth-child(2) td:nth-child(1) {border : dashed 3px black;} 4.table#tableau_1 tr:nth-child(2) td:nth-child(2) {border : dotted 3px black;} 5.table#tableau_1 tr:nth-child(2) td:nth-child(3) {border : ridge 3px black;} 6.table#tableau_1 tr:nth-child(3) td:nth-child(1) {border : outset 3px black;} 7.table#tableau_1 tr:nth-child(3) td:nth-child(2) {border : groove 3px black;} 8.table#tableau_1 tr:nth-child(3) td:nth-child(3) {border : inset 3px black;}
  100. 100. Deuxième tableau 1.table#tableau_2 { 2.background : yellow ; 3.width : 960px ; 4.border-spacing : 10px ; 5.}
  101. 101. Cellules du deuxième tableau 1.table#tableau_2 td {border: solid 1px black;} 2.table#tableau_2 tr:nth-child(1) td:nth-child(1) {vertical-align : top;} 3.table#tableau_2 tr:nth-child(2) td:nth-child(2) {vertical-align : middle;} 4.table#tableau_2 tr:nth-child(3) td:nth-child(3) {vertical-align : bottom;}
  102. 102. Page à afficher
  103. 103. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Annexe : accessibilité Texte, images, liens et formulaires
  104. 104. Accessibilité Polices et texte courant Liens Images Formulaires Navigation Contrastes de Couleur
  105. 105. serif Cambria Constantia Times New RomanTimes Georgia sans-serif Andale Mono Arial Arial Black Calibri Candara Century Gothic Corbel Helvetica Impact Trebuchet MS Verdana cursive Comic Sans MS monospace Consolas Courier New Courier
  106. 106. Texte courant 11 px < font-size (corps) < 16 px Pas de justification du texte 55-65 caractères par ligne* Interlignage : 1,5 x font-size Marge entre paragraphes : interlignage * Largeur de justification = corps x 30
  107. 107. Gestion des liens <!–Usage des mots-clés–> <a href="actualites.html" > En savoir + sur les actualités </a>
  108. 108. Gestion des liens <!–Usage de l’attribut title–> <a href="actualites.html" title="nouvelle fenêtre" > En savoir + sur les actualités </a>
  109. 109. Gestion des liens <!–Attribut title et SEO–> <a href="actualites.html" title="actualités (nouvelle fenêtre)" > En savoir + sur les actualités </a>
  110. 110. Gestion des images <!–Image de présentation–> <img src="tigre.png" alt="tigre" />
  111. 111. Retenir l’attention “Larger online images hold the eye longer than smaller images” Source : Eyetrack III At least 210 x 230 Taux de Rebond
  112. 112. Gestion des images <!–Image de décoration–> <img src="spacer.png" alt="" />
  113. 113. Gestion des images <!– Image porteuse d’information–> <img src="fleche_droite.png" alt="page suivante" />
  114. 114. Gestion des formulaires Aligner à droite les libellés Indiquer le format des champs jj-mm-aaaa Expliciter les boutons <input type="submit" value="OK" value="Recherche de vol">
  115. 115. Frédéric Simonet Formateur Entreprise 2.0 Email : frederic.simonet@yourwebsite.fr Tél. : 06 62 63 94 49 Annexe : IHM* Fondamentaux des interfaces * Interfaces homme-machine.
  116. 116. Support de référence

×