Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
1. Présentation de HTML:
HTML signifie HyperText Markup Language (langage de balisage hypertexte).
HTML est le langage de balisage standard pour la création de pages Web.
HTML décrit la structure d'une page Web
Le langage HTML utilise des « balises » pour annoter du texte, images et autres
contenus.
Les balises HTML sont lues et interprétées par les navigateurs web (Chrome, Edge,
Firefox, Safari) pour afficher correctement une page web.
2. Historique HTML
Depuis les débuts du World Wide Web, il y a eu de nombreuses versions de HTML :
Année Version
1989 Tim Berners-Lee invente le Web (www)
1991 Tim Berners-Lee invente HTML
1993 HTML+
1994 Création de la W3C
1995 HTML 2.0 (images)
1997 HTML 3.2 / HTML 4.0 (tableaux et formulaires)
2014 HTML 5 (support multimédia (vidéo, audio), interactivité)
2017 HTML 5.2
Spécialité : Développeur Web & Mobile Page :1
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
3. Structure d'un document HTML 5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
Le contenu visible de la page est ici
</body>
</html>
Explication des balises principales :
<!DOCTYPE html> : Indique au navigateur qu'il s'agit d'un document HTML5.
<html> : Balise racine qui contient tout le reste.
<head> : Contient les informations sur la page (métadonnées).
- <meta charset="UTF-8"> : Spécifie l'encodage des caractères (supports
accents, etc.).
- <title> : Définit le titre qui apparaît dans l'onglet du navigateur.
<body> : Contient tout le contenu destiné à être affiché à l'utilisateur (textes,
images, vidéos, etc.).
Remarque : les métadonnées sont des informations sur la page web, invisibles à
l'utilisateur mais nécessaires pour les navigateurs et les moteurs de recherche.
Spécialité : Développeur Web & Mobile Page :2
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
4. Environnement de développement :
Pour produire du code HTML, on doit disposer d’un éditeur de code (écriture) et
d’un navigateur (visualisation/affichage).
a) Visual studio Code :
Visual Studio Code est un logiciel gratuit qui permet l’édition, la correction et le
débogage du code source dans plusieurs langages informatiques : Visual Basic,
JavaScript, XML, Python, HTML, CSS, …. Il offre :
- une présentation sophistiquée du code.
- une auto-complétion du code source.
- un ensemble d'extensions permettant de simplifier la programmation.
- la détection du langage de programmation par l'extension du fichier.
b) Les normes du W3C :
Pour garantir la compatibilité du code écrit avec les différents navigateurs web, on
doit respecter les normes exigées par le [Link] ces normes :
- Les balises <html>, <head>, <title>, et <body> sont obligatoires
- Les éléments doivent être correctement imbriqués
- Les éléments doivent toujours être fermés
- Les éléments HTML doivent être en minuscules
- Les documents HTML doivent avoir un élément racine
- Les noms d'attributs doivent être en minuscules
- Les valeurs des attributs doivent être indiqués
On peut valider le code HTML avec W3C Validator: [Link]
Spécialité : Développeur Web & Mobile Page :3
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
5. Notion de balise :
- Une balise est l’élément principal du langage HTML.
- Elle consiste en un texte encadré par des chevrons : signe inférieur (<) et
supérieur (>)
- Une balise a généralement la forme suivante :
<balise attribut=valeur>Contenu</balise>
Exemples :
<h2> Histoire du web</h2> → Affiche un titre « Histoire du web »
<p style="color:blue;"> C'est un texte bleu</p> → affiche un paragraphe (texte) « C’est un texte bleu » en
bleu
<a href="[Link] sur W3C</a> → Affiche le texte « Aller sur W3C » qui contient un
lien hypertexte vers le site [Link]
6. Notion d’attribut :
- Tous les éléments HTML peuvent avoir des attributs.
- Les attributs fournissent des informations supplémentaires sur les éléments.
- Les attributs sont toujours spécifiés dans la balise de début.
- Les attributs se présentent généralement sous la
forme: nom_attribut="valeur_attribut".
Exemples :
<p style="color:red;">Texte en rouge.</p>
<img src="[Link]" alt="LogoHTML5"> → Affiche une image à partir du fichier "[Link]"
<img src=" [Link] " width="500" height="600">
7. Notion d’imbrication :
- Les éléments HTML peuvent être imbriqués (éléments contenant d'autres
éléments).
- Tous les documents HTML sont constitués d'éléments HTML imbriqués.
Exemples :
1- (voir la structure d’une page html)
2- <h1>
<a href="[Link] tout le monde</a>
Spécialité : Développeur Web & Mobile Page :4
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
</h1>
Affiche un titre (<h1>) qui contient un lien (<a>) vers un site.
8. Insertion et mise en forme de contenu :
a) Titres :
- Six niveaux de titres et de sous-titres sont disponibles dans HTML5.
- Les titres HTML sont définis avec les balises <h1>,<h2>, … <h6>.
- Les titres sont importants car les moteurs de recherche les utilisent pour indexer
la structure et le contenu des pages web.
- Les utilisateurs parcourent souvent une page en se basant sur ses titres.
<h1>Titre 1</h1> Titre 1
<h2> Titre 2</h2> Titre 2
<h3>Titre 3</h3> Titre 3
<h4>Titre 4</h4> Titre 4
<h5> Titre 5</h5> Titre 5
<h6> Titre 6</h6> Titre 6
Remarques :
Utiliser un seul <h1>par page car il représente le sujet principal.
Ne pas utiliser les balises de titre pour agrandir ou mettre en gras du texte.
On peut modifier la taille par défaut d’un titre en utilisant l’attribut style et la
propriété CSS font-size (exemple : <h4 style="font-size:60px;">Histoire de
l’internet</h4>
b) Paragraphes :
La balise <p> ….</p> définit un paragraphe.
Un paragraphe commence toujours sur une nouvelle ligne.
La balise <br> (sans </br>) définit un saut de ligne.
La balise <pre> …</pre> définit un texte préformaté (tel quel).
Spécialité : Développeur Web & Mobile Page :5
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
c)Mise en forme du texte :
- On peut mettre en forme du texte (formatage) à l’aide de balise ou de style CSS.
- Les balises de base pour le formatage du texte :
<b> : Texte en gras <small> : Texte plus petit
<strong> : Texte important <del> : Texte supprimé
<i>: Texte en italique <ins> : Texte inséré
<em> : Texte mis en évidence <sub> : Texte en indice
(emphase) <sup> : Texte en exposant
<mark> : Texte marqué
d) Les commentaires :
- Les commentaires permettent documenter le code source HTML.
- Un commentaire ne s'affiche pas dans le navigateur.
- Il permet aussi de masquer temporairement du contenu.
<!-- Voici un commentaire -->
<!-- <p>Masquer temporairement ce paragraphe </p> -->
e) Les listes :
- Une liste est un groupe d’éléments groupés.
- En HTML, il y a trois types de listes :
o Liste non ordonnée (unordered list) : introduite avec la balise <ul>
o Liste ordonnée (ordered list) : introduite avec la balise <ol>
o Liste descriptives (description list) <dl>.
- Les éléments des listes (ul & ol) sont affichés à l’aide de la balise <li>
Exemples :
HTML Résultat
<ul >
<li> Voici un élément de la liste</li>
Voici un élément de la liste
<li> Voici un autre élément de la
Voici un autre élément de la
liste</li>
liste
<li> Et un autre élément de la
Et un autre élément de la liste
liste</li>
</ul>
HTML Résultat
Spécialité : Développeur Web & Mobile Page :6
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
<ol >
<li> Premier élément de la liste</li>
1. Premier élément de la liste
<li> Deuxième élément de la
2. Deuxième élément de la liste
liste</li>
3. Troisième élément de la liste
<li> Troisième élément de la
liste</li>
</ol>
- Les listes descriptives sont utilisées pour définir des termes (clé/valeur,
terme/définition).
- Elles sont structurées comme suit :
<dl> (Definition List) : Conteneur principal pour la liste de descriptions.
<dt> (Definition Term) : Le terme, mot ou titre à définir.
<dd> (Definition Description) : La description ou la définition du terme
Exemple :
<dl>
<dt> Page Web </dt>
<dd> Une page web est un document qui est disponible sur Internet et …. </dd>
<dt> Lien hypertexte :</dt>
<dd> Un lien hypertexte est un élément cliquable et …. </dd>
</dl>
Remarques :
- On peut, avec l’attribut type ou style (css), modifier l’apparence des listes :
- <ul style="list-style-type: circle;" >
- <ol style="list-style-type:lower-alpha;">
- <ol type="a" > (a,A,i,I,1
f) Les tableaux :
- Les tableaux permettent d'organiser les données en lignes et en colonnes.
- Une cellule de tableau peut contenir toutes sortes d'éléments HTML : texte,
images, listes, liens, autres tableaux, …
Spécialité : Développeur Web & Mobile Page :7
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
- Les principales balises utilisées pour définir un tableau basique sont :
<Table> : définit un tableau.
<th> : entête (titre de la colonne) du tableau (table header)
<th> : rangée (ligne) d’un tableau (table row).
<td> : contenu d’une cellule du tableau
Exemple :
<table>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
</tr>
<tr>
<td>Taleb</td>
<td>Hamada</td>
<td>21 ans</td>
</tr>
<tr>
<td>MAKHOUKHI</td>
<td>Rafik</td>
<td>19 ans</td>
</tr>
</table>
Spécialité : Développeur Web & Mobile Page :8
Module : Les interfaces utilisateurs statiques (MQ1) Cours 02 : HTML Durées : 32 h
g) Les images :
- Les images ne sont pas insérées directement dans une page web ; elles y sont
liées.
- C’est le navigateur qui récupère l’image depuis le serveur web et l’insère dans la
page.
- La balise <img> crée un espace réservé pour l’image référencée.
Syntaxe : <img src="url" alt="texte alternatif">
L’attribut src : (obligatoire) spécifie le chemin (URL) vers l'image.
L’attribut alt : indique le texte qui sera affiché si l’image n’est pas trouvée.
Exemple :
<img src="Photo_CFPA.jpg" alt="Photo du CFPA de Maghnia">
Remarques :
- Si l’image se trouve dans un sous-dossier, ce dernier doit être spécifié dans le
chemin :
<img src="/Images/PhotosStagiaires/Photo_MAKHOUKHI.jpg" alt="Photo MAKHOUKHI">
- Si l’image se trouve dans un autre serveur, son adresse url doit être indiquée :
<img src="[Link] alt="Logo W3schools">
- Les attribut width et height permettent de définir la largeur et la hauteur de l’image
en pixel.
<img src="Photo_CFPA.jpg" alt="Photo du CFPA de Maghnia" width="500" height="600" >
- On peut aussi utiliser style pour définir la taille de l’image à l’affichage (%,px,cm,
…):
<img src="Photo_CFPA.jpg" alt="CFPA Maghnia" style="width:25%;height:25%" >
Spécialité : Développeur Web & Mobile Page :9