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

1. Initiation au HTML
M. DIENG Abdoulaye Janvier 20171

2. Objectif général
Concevoir la structure sémantique du contenu d’un site web
2

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. 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. 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. 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. 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. 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. 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. 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. 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. 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_n affiche un
 sup : délimite un texte, généralement très court, en exposant.
Ex : x² affiche x2
12

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. 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. 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^er langage </li>
<li> 2^&egrave;me langage </li>
</ol>

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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