HTML
Partie 1 : Introduction
Yves Frédéric EBOBISSE DJENE
[Link]@[Link]
version éditée par: M. BELATAR
3ème Année - Ingénierie en Informatique et Réseaux
8 octobre 2024
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 1 / 28
Table of Contents
3. Les balises HTML
1. Introduction au HTML - Balises de Formatage
2. Les attributs - Balises de structure
- Les attributs globaux - Liens hypertextes
- Les attributs spécifiques - Balises de listes
- Autres classements - Balises multimedias
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 2 / 28
Table of Contents
3. Les balises HTML
1. Introduction au HTML - Balises de Formatage
2. Les attributs - Balises de structure
- Les attributs globaux - Liens hypertextes
- Les attributs spécifiques - Balises de listes
- Autres classements - Balises multimedias
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 3 / 28
Introduction au HTML
Terminologie : HyperText Markup Language
HTML : HyperText Markup Language. Il Permet :
• Structurer du contenu (texte, images. . .etc) en utilisant un système de
balisage permettant aux navigateurs de visualiser ce contenu sous
forme de page web
• Naviguer entre ces pages web avec un système de liens textuels
cliquables.
Une page HTML est un fichier ASCII (du texte) qui est composé de :
• Contenu de la page à visualiser par un navigateur (Chrome, Firefox,
Edge,. . .)
• Des commandes appelées balises ou tags destinées au navigateur. Ces
balises seront différenciées du contenu par les signes < et >, par
exemple <html>, <p>, <div>...
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 4 / 28
Introduction au HTML
Terminologie : HyperText Markup Language
De quoi on a besoin pour coder en HTML ? :
• Un éditeur de texte
• Un navigateur web
Dans le cadre de ce cours nous utiliserons VSCode comme éditeur et Chrome
ou Firefox comme navigateurs.
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 5 / 28
Structure d’une page HTML
La structure de base d’une page HTML est la suivante :
HTML (modèle de page)
<html>
<head>
<title> Titre de la page </title>
<!- - ceci est un commentaire - ->
</head>
<body>
Contenu de la page
</body>
</html>
Le langage HTML n’est pas sensible à la casse. On peut écrire le code en
majuscules ou en minuscules.
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 6 / 28
Structure d’une page HTML
Les balises
• BALISE : en principe : toute balise ouverte doit être fermée.
• Types de balises :
Autonomes : <br/>, <hr/>
Conteneur : <body>...</body>, <p>...</p>
Les balises peuvent avoir des attributs ou propriétés
On peut ainsi changer la couleur de l’arrière-plan de la page à l’aide de
l’attribut bgcolor de la balise body.
HTML (exemple)
<body bgcolor="blue" > Contenu </body> ou
<body style="background-color:blue" > Contenu </body> //CSS
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 7 / 28
Table of Contents
3. Les balises HTML
1. Introduction au HTML - Balises de Formatage
2. Les attributs - Balises de structure
- Les attributs globaux - Liens hypertextes
- Les attributs spécifiques - Balises de listes
- Autres classements - Balises multimedias
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 8 / 28
Les attributs globaux
• ATTRIBUT : Indique au navigateur des informations supplémentaires
sur une balise.
• Une balise HTML peut utiliser plusieurs attributs à la fois.
• Les attributs globaux ou universels sont des attributs qui peuvent être
utilisés avec un grand nombre de balises HTML.
Attribut (exemples)
<body style="background-color:#FFFFFF;">
<img style="Width:100px;height:auto;" .../>
<p class="col-sm-12">...</p>
<div id="monDiv">....</div>
</body>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 9 / 28
Les attributs spécifiques
Ce sont des attributs utilisés spécialement avec une balise HTML bien précise.
Par exemple :
• Les attributs src et alt sont utilisés avec la balise <img />
• L’attribut href vient spécialement avec la balise <a> (lien hypertexte)
• L’attribut type vient spécialement avec les balises <input>
• L’attribut name est nécessaire dans la plupart des balises de
formulaires comme <input>, <textarea>, <button> . . ..
Attribut (exemples)
<img src="./[Link]" alt="Logo de la société"
style="width:100px;height:auto;" />
<input id="text1" type="text" name="monText"/>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 10 / 28
Les attributs de contenu
On peut aussi classer les attributs selon leur utilité en trois grandes catégo-
ries :
1) Les attributs de contenu : servent à spécifier une information de
contenu à la balise concernée, comme :
• SRC qui spécifie la source de l’image pour une balise <IMG>
• HREF de la balise <A> qui spécifie l’URL de destination du lien
• DATA-* qui servent à attacher une méta-donné à n’importe quelle
balise
• ID qui permet de donner un identifiant à n’importe quelle balise
HTML
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 11 / 28
Les attributs de style
2) Les attributs de style : Qui permettent de modifier le style de la balise
concernée, comme :
• l’attribut STYLE qui permet d’ajouter du code CSS à la balise
concernée
• l’attribut CLASS qui permet d’attacher des classes de style CSS à un
élément HTML.
• les attributs WIDTH et HEIGHT qu’on peut utiliser dans différentes
balises HTML pour fixer leur largeur/hauteur si on n’utilise pas le CSS
pour celà.
REMARQUE : La plupart des attributs de style comme align, bgcolor ...etc.
ont été abandonnés et remplacés par le CSS qu’on met dans l’attribut style
en utilisant les classes CSS.
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 12 / 28
Les attributs d’événements
3) Les attributs d’événements : Qui permettent de déclencher l’exécution
d’un programme suite à un évènement.
Le programme déclenché est souvent écrit dans un langage de script inter-
prété par le navigateur comme le JavaScript.
Exemples :
• l’attribut onLoad qui permet de déclencher un programme au
chargement de la page par exemple s’il est attaché à la balise
<BODY>
• l’attribut onClick qui permet de déclencher un programme au
moment où l’utilisateur clique sur un élément HTML comme un lien
<A> ou un bouton <BUTTON> ou autre
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 13 / 28
Table of Contents
3. Les balises HTML
1. Introduction au HTML - Balises de Formatage
2. Les attributs - Balises de structure
- Les attributs globaux - Liens hypertextes
- Les attributs spécifiques - Balises de listes
- Autres classements - Balises multimedias
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 14 / 28
Les balises de Formatage
Ces balises permettent d’utiliser divers attributs de police, de style et de
mise en forme.
• <b>. . .</b> : Affiche le texte en gras.
• <strong>. . .</strong> : Affiche le texte de façon très accentué. La
plupart des navigateurs mettent en gras
• <i>. . .</i> : Affiche le texte en italique.
• <sub>. . .</sub> : Affiche le texte en indice.
• <sup>. . .</sup> : Affiche le texte en exposant.
• <pre>. . .</pre> : Indique au navigateur qu’il faut afficher le texte dans
une police à pas fixe et prendre en compte les espaces, les tabulations
et les retours chariot inclus entre <PRE> et </PRE>.
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 15 / 28
Les balises de structure
• <html></html> : Déclare qu’il s’agit d’un document HTML. Tout
le contenu et le code HTML doivent être inclus entre <HTML> et
</HTML>.
• <head></head> : Contient les balises qui composent l’en-tête du do-
cument (titre,. . .).
• <title></title> : Donne un titre descriptif au document. Ce titre s’af-
fiche sur la barre de titres des navigateurs.
• <body></body> : Contient l’ensemble du contenu et des balises qui
constituent le corps du document.
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 16 / 28
Les balises de structure
• <Hn>. . .</Hn> : où 1 ≤ n ≤ 6 : Établit une hiérarchie entre les ni-
veaux de titres du document. Les balises <Hn> permettent bien struc-
turer la page et faciliter sa lecture par les utilisateurs et par les robots
des moteurs de recherche.
Hn (exemple)
<H1> Tables des matières </H1>
<H2> Introduction </H2>
<P> ..... </P>
<H2> Chapitre 1 </H2>
<H3> Sous-chapitre 1 </H3>
<H3> Sous-chapitre 2 </H3>
....
<H6> sous-titre </H6>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 17 / 28
Les balises de structure
• <p>. . .</p> : Définit un paragraphe . C’est un bloc textuel qui peut
contenir aussi certaines balises de contenu textuel comme les liens
<A> et des balises de format comme <B><I> . . .etc.
• <br/> Insère un saut de ligne dans le document. Les retours chariot
dans le code HTML n’étant pas interprétés par le navigateur, les sauts
de lignes doivent être alors exprimés explicitement par la balise
<BR/>.
• <hr/> : Insère une ligne horizontale.
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 18 / 28
Les balises de structure
• <div>. . .</div> : Bloc HTML : Les balises DIV permettent de
découper une page HTML en plusieurs “divisions” autonomes, ce qui
facilite leur manipulation par la suite.
Par exemple, afficher/cacher une partie de la page suite à un évènement,
adapter la taille et la disposition selon le type d’écran utilisé . . .etc
div (exemple)
<div style="width:100px;background-color: red;float: right;">
Cette section est entièrement alignée à droite
</div>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 19 / 28
Les liens hypertextes
• <a>. . .</a> : C’est une balise qui permet à l’utilisateur de naviguer
entre les pages HTML.
<a> (syntaxe)
<A HREF="url de la page" TARGET="_blank | _self | _parent |
_top">
texte du lien
</A>
<a> (exemple)
<A HREF="./[Link]" TARGET="_self">visiter page 2</A>
<A HREF="[Link]" TITLE="visiter page 3">visiter page 3</A>
<A HREF="http : //www .[Link]" TARGET="_blank">aller sur Google</A>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 20 / 28
Les balises de listes
Les listes font partie des techniques de mise en [Link] y a
généralement deux types de listes qui sont utilisées :
• Les listes numérotées.
• Les listes à puces.
Chaque élément de la liste doit faire partir d’une balise <li>
LI(exemple)
<li>Voiture </li>
<li>Avion </li>
<li>Moto </li>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 21 / 28
Les balises de listes
Unordered Lists
<ul></ul> permet de créer des listes de puces
liste à puce (exemple)
<ul type="DISC|SQUARE|CIRCLE" >
<li>Voiture</li>
<li>Avion </li>
<li>Moto </li>
</ul>
DISC : puces sous forme de disque
SQUARE :puces sous forme de carre
CIRCLE : puces sous forme de cercle
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 22 / 28
Les balises de listes
Ordered Lists
<ol></ol> permet de créer des listes numérotées
liste numérotée (exemple)
<ol type="1|A|a|I|i" >
<li>Voiture</li>
<li>Avion </li>
<li>Moto </li>
</ol>
1 : chiffres en Arabe,
A : lettres en majuscules,
a :lettres en minuscules,
I : chiffres en romains maj,
i : chiffres en romains minuscules
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 23 / 28
Les balises multimedias
Les images
Pour afficher des images, jouer des videos ou du son.
1) Les images
<img .../> permet d’afficher une image
image(syntaxe de base)
<img src="URL du fichier image" alt="texte de remplacement" style="mise en forme
CSS" />
<picture></picture> permet d’afficher une image en utilisant plusieurs
sources
picture (exemple)
<picture>
<source srcset="img _pink_flowers.jpg " media="(min − width : 650px)"/>
<source srcset="img _white_flower .jpg " media="(min − width : 465px)"/>
<img src="img _orange_flowers.jpg " alt="Fleurs"/>
</picture>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 24 / 28
Les balises multimedias
Les audios
2) Les audios
<audio></audio> permet d’afficher un widget permettant la lecture d’un
fichier audio
Audio(exemple)
<audio controls >
<source src="[Link]" type="audio/ogg"/>
<source src="horse.mp3" type="audio/mpeg"/>
Your browser does not support the audio element.
</audio>
On propose généralement plusieurs sources pour des questions de compati-
bilité et de pilotes
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 25 / 28
Les balises multimedias
Les vidéos
3) Les vidéos
<video></video> permet d’afficher une video
Video(exemple)
<video controls >
<source src="movie.mp4" type="video/mp4"/>
<source src="[Link]" type="video/ogg"/>
Your browser does not support the video tag
</video>
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 26 / 28
Documentation et Sites
Liens
Quelques sites et ressources utiles.
• https ://[Link]/tags/
• https ://[Link]/
• https ://[Link]/fr/docs/Web/HTML/Element
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 27 / 28
Exercice/Devoir
Préparez une page web contenant votre CV. Elle doit contenir les élements
suivants :
• Différentes sections avec des titres hiérarchiques (Etat Civile, Compé-
tences, Etudes, Expériences...)
• Les informations de chaque section sous forme de listes
• Une photo de profile
• Séparer les sections par des lignes horizontales/verticales
• Styler l’ensemble du CV avec du CSS
Yves EBOBISSE (EMSI - Rabat) Partie 1 : Introduction 8 octobre 2024 28 / 28