Initiation

au

M. Abdoulaye DIENG Juillet 2021

 Objectif général

Réaliser la structure sémantique d’un contenu Web

2
 Objectifs opérationnels

 Publier du texte
 Lister du contenu
 Lier des contenus et des services
 Afficher une image
 Dresser un tableau
 Présenter un formulaire
 Intégrer du contenu multimédia

3
 Méthodologie du cours magistral

• Alternance théorie et pratique

• Nombreux exemples de code permettant d’illustrer le
fonctionnement et les effets de chaque fonctionnalité de
manière pratique.
• Créez un répertoire nommé « exemples-html ».
• À l’aide d’un éditeur de texte (Visual Studio Code, Sublime Text
ou un autre), créez tout exemple du cours et l’enregistrez dans
le répertoire « exemples-html »
• Modifiez ensuite les codes pour s’en approprier

4
 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. Dresser un tableau
8. Présenter un formulaire
9. Intégrer du contenu multimédia

5
 Présentation du HTML
 Pb (en 1989) : comment facilité la consultation de
documents entre chercheurs à l’échelle mondiale ?
 Sol : relier les contenus de ces documents
 HTML (HyperText Markup Language),langage de
balisage (indicateur) chargé de structurer sémanti-
quement une page Web, de mettre en forme une
page Web et de lier (HyperText) des contenus
 Créé en 1989 par Sir Tim Berner Lee du CERN
 HTML permet, entre autres :
• de publier des documents en ligne ;
• de présenter des formulaires (recherche,
réservations, achat, …);
• d’insérer directement des documents
d'autres formats (multimédia, pdf, etc.)
dans des documents Web.
6
 Structure d'un document
élément, balise et attribut
Client Langue = fr Intégrateur Web Langue = HTML Navigateurs

h1 <h1> Titre de l’article </h1>

Titre <p> L’article parle de … </p>
Paragraphe p
<abbr> Mlle </abbr>
abbr
Abréviation <img src=“photo.jpg”>
Image img …
… …
Natures des Eléments Balises et
contenus HTML attributs 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 : <img>, <br>
 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.
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. 9
 Structure d'un document
installation de l’environnement de développement

1) Éditer le fichier « intro.html » et l’enregistrer dans le répertoire

« exemples-html ».
2) Saisir le code HTML ci-dessous dans « intro.html »

3) À l’aide d’un navigateur, ouvrir le ficher « intro.html » pour

visualiser le rendu 10
 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, ...

11
 Publier du texte
codage – Titre et sous-titres
 h1 : délimite le titre d’une page
 h2, h3, h4, h5 et h6 : délimitent les cinq sous titres d’une page

 exemple-titres.html

12
 Publier du texte
codage – séparateurs

 <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-separateurs.html

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

14
 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. 15
tp2
 Lister du contenu
présentation

 Liste = suite de données généralement simples

Ex : menu de navigation, coordonnées d’une entreprise
 Principaux types de listes
• Liste non-ordonnée : 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 : items ordonnées.
Le type de numérotation se fait via les CSS.

16
 Lister du contenu
codage – Liste non-ordonnée et liste ordonnée

 ul (unordered list) : délimite une liste non numérotée

 ol (ordered list) : délimite une liste numérotée
 li (list item) : enfant de ul ou de ol, délimite un élément d’une
liste
 exemple-listes.html

17
tp2
 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
18
 Lier des contenus et des services
codage – lien extra-site et lien intra-site
 Lien = ancre (balisée par a) + cible (précisée par href)
 Codage
<a href="adresse/de/la/cible">ancre pour l’internaute </a>
 Lien extra-site (cible : existe et est identifiée par une URL)
• <a href="URL/de/la/cible">ancre pour l’internaute </a>
• Exple d’URL Web : http://www.webSite.com
• Exple d’URL de courriel : mailto:user@mailServer.com
 Lien intra-site (cible : existe et est identifiée nom)
• <a href="chemin/relatif/de/la/cible"> ancre </a>
 exemple-liens.html

19
 Lier des contenus et des services
codage – lien intra-page
 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>
 Illustration
Premier titre <h1 id="haut"> premier titre</h1>

<p>
haut de page <a href="#haut"> haut de page </a>
tp3
</p> 20
 Lier des contenus et des services
codage – signet inter-pages
 cible : existe et est identifiée

 <a href="chemin/rel/de/la/page.html#identifiant"> ancre </a>

Ex :
<a href="derniere-page.html#fin">Aller à la conclusion </a>

21
 Lier des contenus et des services
illustration d’un signet inter-pages (même dossier)
derniere-page.html

site
page1.html
derniere-page.html

Conclusion <h3 id="fin"> Conclusion</h3>

page1.html

<p>
<a href="./derniere-page.html#fin">
Aller à la conclusion
Allez à la conclusion
</a>
</p>

22
 Lier des contenus et des services
illustration d’un signet inter-pages (niveaux différents)
derniere-page.html site

page1.html

rep

derniere-page.html
<h3 id="fin"> dernier titre</h3>

page1.html

<p>
<a href="./rep/page2.html#fin"> Bas de page 2 </a>
</p>

23
 Lier des contenus et des services
illustration d’un signet inter-pages (dossiers différents)
site
derniere-page.html
rep1

page1.html

rep2
<h3 id="fin"> dernier titre</h3>
derniere-page.html

page1.html Remonter d’un dossier

<p>
<a href="../rep2/page2.html#fin"> Bas de page 2 </a>
</p>

24
tp4
 Afficher une image
présentation
 Avantage d’une image
• « une image vaut mille mots » d’après Confucius
• Une illustration facilite la compréhension d’un message
 Inconvénient
sa taille peut retarder le chargement de la page
 Solution
compression (réduction de la taille)
 Principaux formats Web :
• jpeg : photos
• gif : logos, images animées, …
• png :
 8 bits : boutons graphiques, flèches de navigation, petites
icônes
 24 bits : logos, boutons graphiques détaillés, captures
d’écran 25
 Afficher une image
codage
 <img src="adresse/relative/de/ l'image" >
affiche l'image avec ses dimensions intrinsèques
 Autres attributs de img
• alt="court texte descriptif de l’image": texte alternatif
obligatoire à proposer à toute entité (malvoyants, navigateur
texte, robots, incidents techniques) ne pouvant voir l’image.
• 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>
 exemple-image.html

tp4 26
 Dresser un tableau
présentation
 Un tableau permet de rassembler des données de manière
organisée afin de les rendre plus facilement compréhensibles et
interprétables
 Un tableau (table) est constitué de lignes (tr), elles-mêmes
constituées de cellules entête (th) ou donnée (td).

Pour analyser un tableau (table) :

1) Identifier le titre (caption)
2) Identifier les lignes (tr) du tableau
3) Pour chaque ligne, identifier ses cellules
4) Pour chaque cellule, identifier sa nature (en-tête (th) ou
donnée (td) ) et sa forme (fusion horizotale (colspan) et/ou 27
verticale (rowspan ))?
 Dresser un tableau
codage – tableau et lignes
 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

Ex : <tr>
<!– code des cellules de la ligne -->
</tr>

28
 Dresser un tableau
codage – cellules et titre
 td (table data) : enfant de tr, délimite une cellule d’une ligne
– 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" >
Fusion verticale de 2 cellules
</td>
 Ajouter de la sémantique à un tableau en :
– utilisant th (table header) au lieu de td pour toute cellule
qui contient une en-tête (de ligne et/ou de colonne)
– 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 29
 Dresser un tableau
codage – exemple-tableau.html

30
tp6
 Présenter un formulaire
traitement d’un formulaire d’authentification

Mémoire vive
name value
login alibaba
mdp secret
role 1
Formulaire « authentification.html » … …

alibaba 1) Récupérer les données soumises

Votre login :
(login, mdp, role)
Votre mot de passe : *********** 2) Se connecter au serveur de
données
Votre rôle : Admin Client 3) authentifier les identifiants
…
Se connecter
Script « authentifier »

Serveur de
données
Client Web ou navigateur Côté serveur
 Présenter un formulaire
présentation
 Les formulaires permettent de recueillir des données de
l'internaute.
 Parmi leurs utilisations courantes :
• récupérer des informations sur l‘internaute ;
• procéder à des authentifications ;
• permettre à l'utilisateur de contribuer ;
• opérer des recherches ou des sélections.
 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 32
choix de l’internaute.
 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"
lorsque qu’un fichier est à joindre au formulaire
Exemple (formulaire d’inscription exigeant une photo)
<form action="inscrire.php" method="post"
enctype="multipart/form-data" > contenu du formulaire </form>
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 :
 type= "text |password |checkbox
|radio | submit |file "
précise le type de l’élément.
 name= "nomDuChamp" attribut obligatoire pour indiquer au
script, côté serveur, l’emplacement de la donnée transmise
 value="valeurTransmise"
• valeur fixée par le développeur si l’internaute ne saisit 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" >
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 dont la valeur est ≠ 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 avoir le choix multiple côté serveur
 exemple-groupe-input.html

35
tp7
 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
36
 Présenter un formulaire
élément select - Exemple

exemple-select.html

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

 exemple-textarea.html

38
tp8
 Présenter un formulaire
éléments d’accessibilité : label

 label : délimite un texte « cliquable » ou « touchable » et

associé à un élément de formulaire.
Cette relation entre le texte et l’élément de formulaire 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="1" name="sexe">
<label for="p">Homme</label>

39
tp9
Présenter un formulaire
exemple-formulaire.html

40
 Présenter un formulaire
élément HTML5 : champ email

• Pour renseigner une ou plusieurs adresses e-mail.

• Ce champ attend au minium un caractère (caractère non
accentué comprenant les séparateurs tiret ou underscore)
suivi d'un @ suivi à son tour d'un caractère.
• Un navigateur de SmartPhone compatible avec ce type de
champ présentera un clavier adapté incluant les symboles . et
@.

<input type="email" name="votre_email" />

<input type="email" name="vos_emails[]" multiple="multiple" />

41
 Présenter un formulaire
élément HTML5 : champ tel

• Pour renseigner un numéro de téléphone.

• Un navigateur de SmartPhone compatible avec ce type de
champ présentera un clavier de type numérique.

<input type="tel" name="votre_phone" />

42
 Présenter un formulaire
élément HTML5 : champ date

• Pour renseigner une date

• Un navigateur compatible propose une aide au remplissage

<input type="date" name="date_naiss" />

43
 Présenter un formulaire
élément HTML5 : champ number

• Pour renseigner une valeur numérique.

• Un navigateur compatible propose deux boutons permettant
l'incrémentation et la décrémentation d'une valeur
numérique initiale (0 par défaut).
• Un Smartphone compatible propose un clavier numérique.
• L’attribut step permet de modifier le pas (1 par défaut) de
l’incrémentation.
• Les attributs min et max permettent de limiter le nombre
dans un intervalle défini.

<input type="number" name="age" />

44
 Présenter un formulaire
élément datalist
• datalist : délimite une liste de suggestions, liée à un
élément input.

• option : enfant de datalist, définit une suggestion comme

valeur de son attribut value
• Le champ (input) et la liste de suggestions (datalist + option)
sont reliés grâce à la valeur commune des attributs list de
l’input et id de la datalist.
45
 Présenter un formulaire
élément datalist
<label for="a">Votre plat
préféré</label>
<input id="a" list="plat" />
<datalist id="plat">
<option value="tiébou dieune">
<option value="mafé">
<option value="thiou">
<option value="yassa">
<option value="cbon">
</datalist>

46
 Présenter un formulaire
attribut autofocus

• Spécifie si le champ doit recevoir automatiquement le curseur

au chargement du formulaire

<form action="login.php">
Email : <input type="email" name="email" autofocus><br>
Mot de passe: <input type="password" name="pass"><br>
<input type="submit" value="Connexion" >
</form>

47
 Présenter un formulaire
attribut placeholder

• Permet d’afficher une valeur indicative dans un champ de

texte
• Quand l’utilisateur clique dans le champ, contrairement à ce
qui se passe avec l’attribut value, le contenu disparaît.
• La valeur indicative n'est pas transmise lors de la soumission
du formulaire.
• NB : La présence d'un placeholder ne dispense pas de
renseigner un label pertinent.
<input type="text" placeholder="Votre pseudonyme"
name="pseudo"/>

48
 Présenter un formulaire
attribut required

• Permet de rendre obligatoire le remplissage d'un champ et de

bloquer la validation du formulaire si l'un des champs
(concernés par cet attribut) n'a pas été renseigné.

<input type="text" required="required" name="pseudo"/>

• NB : L'attribut required ne dispense pas de rajouter, pour

chaque champ obligatoire, dans l'étiquette associée une
astérisque et de faire précéder le formulaire du message
« Les champs indiqués par une * sont obligatoires ».
49
tp3
 Intégrer du contenu multimédia
video

• video permet d’intégrer une vidéo dans une page sans recourir
à un plugiciel
• L’attribut src : lien vers le fichier de la vidéo
• L’attribut autoplay : lecture automatique
• L’attribut loop : relecture automatique
• L’attribut poster : lien vers une image à présenter pendant que
la vidéo se charge ou si elle n'est pas disponible
• L’attribut controls : affichage des commandes de lecture
• L’attribut preload = auto|metadata|none : préchargement
– metadata : nom, format, taille, durée, …
– none : aucun
– auto (par défaut) : le navigateur décide s'il doit précharger
toute la vidéo, uniquement les métadonnées ou rien du tout 50
Intégrer du contenu multimédia
video - formats et support

• Il n'y a pas de format vidéo unique qui est supporté par

tous les navigateurs.
• Fournir plusieurs formats à la fois afin d'assurer le soutien
de lecture dans tous les principaux navigateurs.
Plateforme utile : http://www.online-convert.com/
• L’élément source, enfant de video, permet de fournir
plusieurs versions de la vidéo avec son attribut src.
Chrome Firefox Opera Safari IE9+
WebM Oui Oui Oui Non Oui
mp4 Oui Non Non Oui Oui
Ogg Oui Oui Oui Non Non
51
 Intégrer du contenu multimédia
video - exemple

52
tp2
 Intégrer du contenu multimédia
audio

• audio permet d’intégrer de l’audio dans une page sans recourir

à un plugiciel
• L’attribut src : lien vers le fichier audio
• L’attribut autoplay : lecture automatique
• L’attribut loop : lecture en boucle
• L’attribut controls : affichage des commandes de lecture

53
Intégrer du contenu multimédia
audio - formats et support
• Il n'y a pas de format audio unique qui est supporté par
tous les navigateurs.
• Fournir plusieurs formats à la fois afin d'assurer le soutien
de lecture dans tous les principaux navigateurs.
• L’élément source, enfant de audio, permet de fournir
plusieurs versions de l’audio avec son attribut src.
Chrome Firefox Opera Safari IE9+
Wav Oui Non Oui Oui Oui
Mp3 Oui Non Non Oui Oui
Ogg Oui Oui Oui Non Non
Aac Oui Non Non Oui Non
54
Intégrer du contenu multimédia
audio - exemple

55
 Documentation
https://developer.mozilla.org/fr/docs/Web/HTML/Element

https://www.w3schools.com/html/

https://html.spec.whatwg.org/multipage/

56