Initiation au HTML

108 vues

Publié le

Concevoir la structure sémantique du contenu d’un site web
Publier du texte
Lister du contenu
Lier des contenus et des services
Afficher une image
Établir un tableau
Présenter un formulaire

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Initiation au HTML

  1. 1. Initiation au HTML M. DIENG Abdoulaye Janvier 20171
  2. 2. Objectif général Concevoir la structure sémantique du contenu d’un site web 2
  3. 3. Les objectifs opérationnels Publier du texte Lister du contenu Lier des contenus et des services Afficher une image Établir un tableau Présenter un formulaire 3
  4. 4. Le sommaire 1. Présentation du HTML 2. Structure d’une page HTML 3. Publier du texte 4. Lister du contenu 5. Lier des contenus et des services 6. Afficher une image 7. Etablir un tableau 8. Présenter un formulaire 4
  5. 5. Présentation du HTML  HTML (HyperText Markup Language), langage chargé de : • structurer sémantiquement une page Web • mettre en forme une page Web • lier des contenus et des services  HTML permet, entre autres, de : • publier des documents en ligne contenant du texte, des tableaux, des listes, des images, …; • retrouver des informations en un clic de souris; • concevoir des formulaires (recherche, réservations, achat, …); • insérer directement des documents dans d'autres formats, des sources vidéo et sonores et d'autres applications. 5
  6. 6. Structure d'un document élément, balise et attribut 6 Client Intégrateur Web NavigateursLangue = fr Langue = HTML <h1> Titre de l’article </h1> <p> L’article parle de … </p> <abbr> Mlle </abbr> <img src=“photo.jpg”> … Balises et attributs HTML Abréviation Image Titre Paragraphe … Natures des contenus abbr img h1 p Eléments HTML … 1) Un client, souhaitant publier des contenus sur le Web, s’adresse à un intégrateur Web dans un langage humain. Exemples : français, anglais, … 2) L’intégrateur traduit les mots descriptifs des contenus proposés par le client en éléments HTML (langage compris par les navigateurs) 3) Chaque élément HTML sera matérialisé par une (ou deux) balise(s) lors du codage 4) Certains contenus seront accompagné d’attributs
  7. 7. Structure d'un document élément, balise et attribut  Le HTML est constitué d’éléments sémantiques qui donnent un sens au contenu d’une page Web. Exples d’éléments : abbr, img, p, h1, h2  Tout élément est matérialisé par une (ou deux) balise(s) délimitée(s) par les chevrons < et >. • Exple de balises ouvrante et fermante : <abbr> Mlle</abbr> • Exples de balises uniques : <br>, <img>  Toute balise ouvrante peut être munie d’attributs prenant des valeurs.  Ces attributs apportent des informations supplémentaires et souvent indispensables pour le contenu associé. Exemples de balises munies d’attributs : <abbr title="Mademoiselle"> Mlle </abbr> <img src="chemin/du/fichier-image" >  Les valeurs des attributs doivent être entre des guillemets. 7
  8. 8. Structure d'un document éléments de base  Les éléments de base d’une page HTML sont : • html : délimite la page et contient ainsi les autres éléments • head : « enfant de html », délimite les métadonnées et éventuellement les informations nécessaires à l’affichage (CSS) et à l’interactivité (JS) du contenu de la page ; • title : enfant de head, délimite le titre de la fenêtre tel qu'il est montré dans la barre de titre du navigateur; • body : enfant de html, délimite le contenu principal de la page  Les commentaires sont délimités par les signes <!-- et -->. <!-- ceci est un commentaire -->  Les commentaires sont destinés à fournir une aide-mémoire, ou des instructions à la personne visualisant ou rédigeant le code.  Le navigateur ignore les commentaires. 8 tp1
  9. 9. Publier du texte présentation  Le texte est le moyen le plus courant pour transmettre un message sur une page Web.  Un texte peut être composé d'un titre et de plusieurs paragraphes annoncés par des sous-titres.  Sans oublier les degrés d’importance de certains mots, les abréviations, les acronymes, la mise en indice ou en exposant, ... 9
  10. 10. Publier du texte codage – Titre et sous-titres  h1 : délimite le titre d’une page  h2,…, h6 : délimitent les sous titres dans la page  Exemple : <h1> Le titre </h1> <h2> 1.) Sous-titre</h2> <h3> 1.1.) Sous-sous-titre </h3> <h3> 1.2.) Sous-sous-titre </h3> <h2> 2.) Sous-titre </h2> 10
  11. 11. Publier du texte codage – Retour à la ligne, paragraphe et trait horizontal  <br> : effectue un simple retour à la ligne  p : délimite un paragraphe en produisant un double <br>  <hr> : insère un trait horizontal comme séparateur  Exemple : <p> Premier vers de ma première strophe<br> Deuxième vers de ma première strophe </p> <p> Premier vers de ma seconde strophe<br> Deuxième vers de ma seconde strophe </p> 11
  12. 12. Publier du texte codage – autres contenus textuels  em : délimite une insistance raisonnable (affichée en italique) Ex : <em> Ceci est important </em>  strong : délimite une insistance assez forte (affichée en gras) Ex : <strong> Ceci est très important </strong>  abbr : délimite une abréviation (explicitée par l’attribut title) Ex : <abbr title="Mademoiselle"> Mlle </abbr>  acronym : délimite un ensemble d’abréviations (explicité par l’attribut title). Ex : <acronym title="Organisation des …"> O.N.U.</acronym>  sub : délimite un texte, généralement très court, en indice. Ex : u<sub>n</sub> affiche un  sup : délimite un texte, généralement très court, en exposant. Ex : x<sup>2</sup> affiche x2 12
  13. 13. Publier du texte les caractères spéciaux  Pour s’assurer que les caractères spéciaux (lettre accentuée, lettre grecque, symbole mathématique ou tout caractère non ASCII) soient correctement affichés par tous les navigateurs, il faut les coder.  Caractères accentués : &LettreCode_accent; code_accent : acute(aigu), grave(grave), circ(^), uml(¨), tilde(~) Exemples: &eacute; (é), &acirc; (â), &uuml; (ü)  Autres caractères : &ccedil; (ç), &copy; (©), &amp; (&), &nbsp;(espace insécable), &quot; ("), &gt; (>), &lt; (<), &laquo;(« ), &raquo;(»), &oelig;(œ), &euro(€), &deg;(°), &reg;(®), etc. 13 tp2
  14. 14. Lister du contenu présentation • Une liste est une suite de données généralement simples. Ex : menu de navigation, coordonnées d’une entreprise • Une liste ne doit pas être contenue dans un paragraphe mais peut être annoncée par celui-ci. • Il y’a trois types de listes : – Liste non-ordonnée : utilisée lorsqu'il n'y a pas d'ordre prédéfini pour les items. Le type de puces se fait via les feuilles de style (CSS). – Liste numérotée : utilisée lorsque les items sont ordonnées. Le type de numérotation se fait via les CSS. – Liste de définition : utilisée pour l'affichage de termes accompagnés de leurs définitions respectives. 14
  15. 15. Lister du contenu codage – Liste non-ordonnée et liste ordonnée  ul (unordered list) : délimite une liste non numérotée li (list item) : enfant de ul, délimite un élément de la liste Exemple : <ul> <li> Un langage </li> <li> Un autre langage </li> </ul> 15  ol (ordered list) : délimite une liste numérotée li : enfant de ol, délimite un élément de la liste Exemple : <ol> <li> 1<sup>er</sup> langage </li> <li> 2<sup>&egrave;me</sup> langage </li> </ol>
  16. 16. Lister du contenu codage – Liste de définition 16  dl (definition list) : délimite une liste de définition dt (definition term) : enfant de dl, délimite un terme de la liste dd (definition description) : enfant de dl, délimite une description d’un terme de la liste Exemple : <dl> <dt>XHTML</dt> <dd>Langage de balisage permettant ...</dd> <dt>CSS</dt> <dd>Langage de description utilisé ...</dd> </dl> tp3
  17. 17. Lier des contenus et des services présentation  Les liens hypertextes sont l'essence même du World Wide Web (interconnexion de ressources textuelles et multimédia).  Cliquer sur un lien permet de naviguer vers : – un autre endroit d’une même page Web ; – une autre page Web du même site Web – un document quelconque – un autre site web – un autre service d’Internet  Par défaut, un lien est indiqué par du texte souligné ou par un changement d’apparence du pointeur de la souris.  Dans un navigateur, le passage du pointeur sur un lien fait afficher la cible sur la barre d’état 17
  18. 18. Lier des contenus et des services codage  Lien = ancre (délimitée par élément a) + cible.  Principaux attributs de l’ancre: • href : précise le chemin de la cible • title : explicite la cible (info bulle sur navigateur graphique)  Lien extra-site (cible : existe et est identifiée) • <a href="URL_cible">ancre pour l’internaute </a> • Exple d’URL Web : http://www.webSite.com • Exple d’URL transfert de fichier : ftp://ftp.fileServer.com • Exple d’URL de courriel : mailto:user@mailServer.com 18
  19. 19. Lier des contenus et des services codage  Lien intra-page : 1) Identifier la cible en rajoutant l’attribut id, avec un identifiant comme valeur, à la balise qui délimite la cible. Ex : <h1 id="haut"> premier titre</h1> 2) créer l’ancre qui cible la partie identifiée par identifiant <a href="#identifiant"> texte pour l’internaute </a>. Ex : <a href="#haut"> haut de page </a>  Liens intra-site (cible : existe et est identifiée) • <a href="chemin/relatif/de/la/cible"> ancre </a> Ex : <a href="./tps/tp1.pdf"> Travaux pratiques 1 </a> • <a href="chemin/rel/de/la/page.html#identifiant"> ancre </a> Ex : <a href="derniere-page.html#fin">Aller à la conclusion </a> 19
  20. 20. Lier des contenus et des services lien intra-page 20 <p><a href="#haut"> haut de page </a></p> <h1 id="haut"> premier titre</h1>Premier titre haut de page
  21. 21. Lier des contenus et des services signet inter-pages (même dossier) 21 page1.html derniere-page.html Derniere-page.html <h3 id="fin"> Conclusion</h3> page1.html <p> <a href="./derniere-page.html#fin"> Aller à la conclusion </a> </p> site Conclusion Allez à la conclusion
  22. 22. Lier des contenus et des services signet inter-pages (niveaux différents) 22 page2.html <h3 id="fin"> dernier titre</h3> page1.html <p> <a href="./rep/page2.html#fin"> Bas de page 2 </a> </p> page1.html site page2.html rep
  23. 23. Lier des contenus et des services signet inter-pages (dossiers différents) 23 page2.html <h3 id="fin"> dernier titre</h3> site page2.html rep2 page1.html rep1 page1.html <p> <a href="../rep2/page2.html#fin"> Bas de page 2 </a> </p> Remonter d’un dossier tp4
  24. 24. Afficher une image présentation  Avantage : « une image vaut mille mots » d’après Confucius  Inconvénient : sa taille peut retarder le chargement de la page  Solution : compression (réduction de la taille)  Deux principales techniques de compression : – compression destructive : supprimer des couleurs qu’un humain n’est pas censé déceler. Cependant un fort taux de compression peut entamer la qualité de l’image. – compression non destructive : ce type de compression ne détruit absolument pas l'image 24
  25. 25. Afficher une image principaux formats Web Format Couleurs Compression Usage jpeg (Joint Photographic Experts Group) 16 777 216 Destructive Photographies gif (Graphics Interchange Format) 256 Non destructive Logos, images animées, transparence à 2 niveaux (transparent ou opaque). png 8 bits (Portable Network Graphic) 256 Non destructive Boutons graphiques , flèches de navigation et petites icônes png 24 bits 16 777 216 Non destructive Logos, boutons graphiques détaillés, captures d’écran et transparence à plusieurs niveaux25
  26. 26. Afficher une image codage  <img src="adresse/relative/de/ l'image" > : affiche l'image avec ses dimensions intrinsèques  Autres attributs de img: • width="valeur" : largeur (en pixels ou en pourcentages) • height="valeur" : hauteur (en pixels ou en pourcentages) • alt="court texte descriptif de l’image": texte alternatif obligatoire pour que tout agent (malvoyants, navigateur texte, incidents techniques, robots) ne pouvant voir l’image puisse avoir un texte alternatif. • title : expliciter l’image (info bulle sur navigateur graphique)  Image lien: <a href="adresse/relative/de/la/cible"> <img src="adresse/relative/de/l’image_lien" > </a> 26 tp5
  27. 27. Etablir un tableau présentation  Un tableau permet de présenter l’information d’une manière concise  Un tableau (table) est constitué de lignes (rows), elles-mêmes constituées de cellules qui contiennent les données (data). 27
  28. 28. Etablir un tableau codage  table : délimite un tableau. Voici qlq uns de ses attributs : – border="n": épaisseur de n pixel(s) des bordures du tableau et des cellules – align="left|right|center": alignement horizontal du tableau – width="n%": largeur relative du tableau – summary= "texte descriptif du contenu du tableau pour les navigateurs brailles ou vocaux" Ex : <table border="1" width="75%" summary="…" > <!– code des lignes du tableau --> </table>  tr (table row) : enfant de table, délimite une ligne du tableau – valign="middle|top|bottom": alignement vertical – align="left|right|center": alignement horizontal Ex : <tr valign="top" align="right" > <!– code des cellules de la ligne --> </tr> 28
  29. 29. Etablir un tableau suite du codage  td (table data) : enfant de tr, délimite une cellule d’une ligne – valign et align (prioritaire sur <tr>) – colspan="n" : fusion horizontale de n cellules – rowspan="n" : fusion verticale de n cellules NB : un rowspan annexe toute cellule d’une ligne inférieure Ex : <td rowspan="2" align="right" > Fusion verticale de 2 cellules </td>  Ajouter de la sémantique à un tableau en : – donnant une légende (ou titre) au tableau avec l’élément caption juste après la balise ouvrante <table> . L’élément caption délimite la légende avec comme attribut align = "top|bottom" – utilisant th (table header) au lieu de td pour toute cellule qui contient une en-tête (de ligne et/ou de colonne). 29
  30. 30. Etablir un tableau codage - exemple <table border="1" width="75%" > <caption> Tableau HTML</caption> <tr> <th>Cellule 1 de la ligne 1</th> <th colspan="2">Grande cellule 2 de la ligne 1</th> </tr> <tr> <th rowspan="2">Grande cellule 1 de la ligne 2</th> <td>Cellule 2 de la ligne 2</td> <td>Cellule 3 de la ligne 2</td> </tr> <tr> <td align="right">Cellule 1 de la ligne 3</td> <td>Cellule 2 de la ligne 3</td> </tr> </table> 30 tp6
  31. 31. Présenter un formulaire présentation  Les formulaires permettent d’interagir avec l'internaute.  Parmi leurs utilisations courantes : • récupérer des informations sur l‘internaute ; • procéder à des authentifications ; • permettre à l'utilisateur de contribuer à une appli Web ; • opérer des recherches ou des sélections sur une Web app.  L'internaute entre les données en saisissant du texte (une ou +sieurs lignes), en cochant une (ou +sieurs) case(s) ou en sélectionnant un (ou des) élément(s) dans une liste.  Ensuite l'internaute soumet les données en cliquant sur un bouton de soumission.  La soumission envoie les données généralement à un script, côté serveur, sous forme de paires {nom ; valeur} : • nom : identifiant d’une donnée, au niveau du serveur • valeur : valeur saisie par l’internaute ou associée à un choix de l’internaute. 31
  32. 32. Présenter un formulaire élément form form délimite un formulaire et ses principaux attributs sont :  action="adresse_script_cible" script côté serveur qui traitera les données du formulaire.  method="get|post" • spécifie la méthode HTTP employée pour envoyer les données du formulaire à l'agent de traitement. • "get", valeur par défaut, annexe les données à l'URL du script cible (ex : script.php?nomChamp1=valeur1&nomChamp2=valeur2& ...) • "post", valeur qui incorpore les données dans la requête HTTP.  enctype="multipart/form-data" si un fichier doit être joint au formulaire Exemple (formulaire d’inscription exigeant une photo) <form action="inscrire.php" method="post" enctype="multipart/form-data" > contenu du formulaire </form> 32
  33. 33. Présenter un formulaire élément input input, enfant de form, définit une zone de saisie, une case à cocher, un bouton, etc. Ses principaux attributs sont :  name= "nomDuChamp" (attribut obligatoire) indique au script l’emplacement de la donnée transmise  type= "text |password |checkbox |radio | submit |file " précise le type de l’élément.  value="valeurTransmise" • valeur fixée par le développeur si l’internaute ne saisie pas. • obligatoire lorsque type≠ "text|password|file"  checked="checked" pré-selectionne un bouton radio ou une case checkbox Exemple (bouton de soumission « Inscrire ») <input type="submit" value="Inscrire" name="btn_inscrire"> 33
  34. 34. Présenter un formulaire groupe de boutons radio ou de cases à cocher  1 élément (bouton ou case) = 1 balise input  Chaque input a un attribut value différent des autres  Tous les input partagent une même valeur de l’attribut name  Pour les cases à cocher, la valeur de l’attribut name doit être suffixée de [] pour permettre le choix multiple  Exemples <input type="radio" value="1" name="langueMaternelle"> <input type="radio" value="2" name="langueMaternelle"> <input type="checkbox" value="1" name="languesParlees[]"> <input type="checkbox" value="2" name="languesParlees[]"> <input type="checkbox" value="3" name="languesParlees[]"> 34
  35. 35. Présenter un formulaire élément select - Présentation  select : délimite une liste déroulante ou non – name="nomDuChamp" – size="n": n options visibles d’une liste non déroulante – multiple = "multiple": permet le choix multiple dans une liste non déroulante. ( Dans ce cas, name = "nomDuChamp[ ]")  option : enfant de select, délimite un choix dans une liste – value : valeur transmise si l’option délimitée est choisie – selected = "selected": pour pré-sélectionner une option 35
  36. 36. Présenter un formulaire élément select - Exemple 36 <select name="plat[]" size="5" multiple="multiple" > <option value="1" >mafé</option> <option value="2" selected="selected"> tiebou diene </option> <option value="3" >yassa</option> <option value="4" >thiou</option> <option value="5" >dakhine</option> <option value="6" >ngourbane</option> </select>
  37. 37. Présenter un formulaire élément textarea  textarea: délimite une zone de saisie multilignes – name= "nomDuChamp" – rows="n ": nombre de lignes visibles – cols="n ": nombre de caractères visibles par ligne 37  Exemple <textarea name="commentaire" rows="5" cols="80" > mon commentaire … </textarea>
  38. 38. Présenter un formulaire éléments d’accessibilité : label  label : permet d‘associer un texte « cliquable » à un élément de formulaire. Cette relation entre le texte (délimité par label) et l’élément peut se faire en donnant la même valeur à l'attribut for du label et à l'attribut id de l’élément. Exemple <input type="radio" id="p" value="2" name="langue"> <label for="p"> Poular</label> 38
  39. 39. Présenter un formulaire éléments d’accessibilité : fieldset et legend  fieldset : organise un formulaire en plusieurs sous parties ou thèmes qu’il délimite.  legend : enfant de fieldset, permet de donner un titre à chacun des thèmes. Cet élément délimite le titre de la sous-partie  Exemple <fieldset> <legend>Titre de la sous-partie</legend> <!-- codage des champs à la suite --> </fieldset> 39 tp7

×