Année 2025-26
Filière IA
Module Programmation Web
Département d’Informatique Supplément de cours HTML
Pour la pratique de HTML, on a besoin :
- d’un éditeur de texte simple ; Notepad++ (gratuit à télécharger de [Link] bloc notes de
Windows, gedit ou Kwrite de Linux ou autres.
- d’un navigateur (Firefox, Chrome, Safari, Opera ou un autre)
Garder constamment les deux fenêtres sur l 'écran : fenêtre de l'éditeur de texte et fenêtre du navigateur. Après
sauvegarde dans l'éditeur actualiser la fenêtre du navigateur.
- Tester chacune des balises HTML ainsi que ses attributs.
- Ces balises HTML sont celles des versions 4 et antérieures. Dans la dernière version 5 de HTML certaines
balises vont disparaître et d'autre vont apparaître.
- Références importantes : [Link], [Link]
- La notation attribut= "X|Y|Z" veut dire que attribut peut prendre une et une seule des 3 valeurs X, Y , Z à la fois.
Document HTML (minimal) attributs ne sont utiles qu’avec d’autres langages
<html> comme CSS, JavaScript et PHP. Par exemple
<head>
<title> Titre de la fenêtre </title> class, lang, style, id et dir=’’rtl|ltr’ sont des
Informations aux navigateurs et moteurs de attributs de presque toutes les balises HTML.
recherche, D’autres attributs comme onClick, onFocus etc
auteur, description du site, mots clé,
insertion de feuille de style CSS, scripts sont des attributs spécifique pour JavaScript.
JavaScriptS etc.
</head> <abbr> : indique que le contenu est une
<body> abréviation. <abbr title="HyperText Markup
… contenu du document Language">HTML</abbr>
</body>
</html>
<adresse> : indique que le contenu de l'élément est
Syntaxe d'écriture de balises et attributs : une adresse.
<balise attribut1=’’ valeur1’’ attribut2=’’ valeur2’’
… > … </balise> Balises de titres
ou pour d’autres balises <hn> et </hn> : Titre de section. n=1,2, …,6
<balise attribut1=’’ valeur1’’ attribut2=’’ attribut et valeur Description
valeur2’’… >
align=’’left|center|right|justify’’ Alignement du texte dans
un titre : gauche, centre,
Commentaire en HTML : <!-- … --> droite
<!-- un commentaire n'est pas affiché par le navigateur.
Il peut être sur une ou plusieurs lignes. -->
Balises de paragraphe
Casse : HTML est indépendant de la casse. En général <p> ... </p> : définit un paragraphe
on écrit en minuscule. attribut et valeur Description
align=’’left|center|right|justify’’ Alignement du texte
Couleurs en HTML : peuvent être déclarées : dans un paragraphe
- par nom de couleur en anglais : aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, yellow; orange etc . . . <br> : Retour à la ligne
- #rr’gg’bb’, où rr’, gg’ et bb’ sont des nombres
hexadécimaux de 00 à FF, indiquant la portion de <center> ... </center> : centrer un contenu
rouge, de vert et de bleu respectivement.
Exemple : color= "yellow" ou color= "#FF00FF" <hr> : ligne horizontale
attribut et valeur Description
Longueur en HTML : en pixel ou pourcentage. Par align="left|center|right" Alignement de la ligne
Exemple : size= "75" ou width="50%" size="nbpixel" épaisseur de la ligne
width="nbpixel| n%" longueur de la ligne en px ou %
Chaque balise a un ensemble d’attributs. Certains
1
noshade="noshade " ombre alt="descriptif" infobulle et texte avant chargement
border="nbpixel" bordure autour de l'image
Balises de style
hspace="nbpixel" espace libre à droite et à gauche de
<b> ... </b> Texte en gras
l'image
<i> ... </i> Texte en italique
vspace="nbpixel" espace libre en haut et en bas de l'image
<u> ... </u> Texte souligné
<strike> ... </strike> Texte barré Liste numérotées <ol> ... </ol>
attribut et valeur Description
<sup> ... </sup> Exposant mathématique
type= "1|i|i|a|a" Type de numérotation (chiffre arabe,
<sub> ... </sub> Indice mathématique
romain, lettre …)
<tt> ... </tt> Police type machine à écrire
start="entier" valeur de début de numérotation
Exemple :
<pre> ... </pre> : texte préservé avec retour à la ligne,
<ol>
espaces et police type machine à écrire.
<li> … </li>
<li> … </li>
<font> ... </font>
</ol>
Définition de la taille, le type et la couleur de police.
Liste à puce <ul> ... </ul>
attribut et valeur Description
attribut et valeur Description
face="font1, choix de polices par ordre de préférence
type="disc|circle|square" Type de puce : disque, cercle
font2, font3"
carré
color="couleur" Couleur du texte <li> ... </li> : élément de liste
size="taille" taille de la police de 1 à 7. Par défaut 3.
Balises de tableau <table> ... </table>
<div> ... </div> : utile avec CSS
<span> ... </span> : utile avec CSS attribut et valeur Description
Lien hypertexte <a> et </a> border="nbpixel" épaisseur de la bordure
<a href= "[Link] FSR</a>
width="nbpixel |n %" largeur du tableau
href="url" lien vers l'adresse indiqué
height="nbpixel | n %" longueur du tableau
target="_self |_blank" _self (par défaut ) : fenêtre ou
onglet du lien cellspacing="nbpixel" espace entre les cellules
_blank : nouvelle fenêtre ou onglet
cellpadding="nbpixel" espace entre contenue de la
name="nom" nom du lien (utile en JavaScript) cellule et son bord
<body> ... </body> bgcolor="couleur" couleur de l'arrière plan
Contient le contenu à afficher
background="[Link]" image de l'arrière plan
attribut et valeur Description
align="left|center|right " Alignement du tableau : gauche,
bgcolor="couleur" couleur de fond :BackGround
centre, droit
background="[Link]" Image de fond <tr> … <tr> : définition de ligne de tableau
text = "couleur" Couleur du texte normal <th>…</th> : définition de cellule de la 1ère ligne de tableau
<td> … </td> : définition de cellule de tableau
link="couleur" Couleur des liens hypertexte
attributs des balises Description
vlink="couleur" Couleur des liens visités <th> et <td>
alink="couleur" Couleur des liens actifs bgcolor="couleur" couleur de l'arrière plan
leftmargin="nbpixel" Marge de gauche background="[Link]" image de l'arrière plan
rightmargin="nbpixel" Marge de droite rowspan="nb_ligne" nombre le lignes fusionnées
topmargin="nbpixel" Marge du haut colspan="nb_ligne" nombre le colonnes fusionnées
valign="top|middle| Alignement vertical : haut, centre
Balises d'image <img> bottom " , bas
insertion d'une image de type .jpg ou jpeg. gif, .png
align="left|center|right" Alignement horizontal du texte :
attribut et valeur Description
gauche, centre, droit
scr="[Link]" SouRCe de l'image
name="nom" nom de l'image utile en JavaScript liste de définition <dl>…</dl>
permet de créer un glossaire.
height="nb_pixel" hauteur de l'image dans le navigateur <dl> …</dl> : définit la liste
width="nb_pixel" largeur de l'image dans le navigateur <dt>…</dt> : contient le terme à définir
<dd> …</dd> : contient la définition du terme
2
exemple : <select> et </select> liste déroulante à insérer dans
<dl> <form> ... </form>
<dt>c</dt> attribut descriptif
<dd>langage de programmation … </dd>
<dt>c++</dt> name="nom" nom du champ
<dd>langage de programmation … </dd> size="taille" nombre de ligne visible
</dl>
multiple pour pouvoir faire des choix multiples
<abbr>...</abbr> abréviation
attribut : title <option> texte choix </option> liste des choix possibles
Exemple : Le <abbr title="World Wide Web Consortium dans <select>
"> W3C </abbr> développe les languages du Web. attribut descriptif
<address> … </address> information pour contact
value="valeur" valeur du choix
Formulaire selected choix préselectionné
<form> et </form> création de formulaire ="selected"
ces attributs de <form> ... </form> sont utiles pour les
langages de scripts : PHP etc
<label> ... </label> donne un nom à un champ input de type
attribut et valeur descriptif (utile pour les scripts) text, radio, checkbox ou textarea. un clic sur le nom donne le
name="nom" nom du formulaire focus au champ
action="url" mail ou adresse du script de traitement attribut et valeur descriptif
method="get|post" façon dont les paramètres sont envoyés for="texte"
Exemple : <label for="prenom">Entrez votre
enctype="mime" type mime d’envoi des données au prénom</label>
serveur <input id="prenom" type="text"
name="prenom">
<input type="type"> pour définir de nombreux éléments régions et liens <map> ... </map>
de formulaire à inclure dans <form> et </form> découpage d'une image en zones avec des liens
attributs valeur descriptif attributs descriptif
text champ de texte usemap="texte" image à utiliser comme carte déjà déjà
password champ de texte pour mot de passe insérée par <img src=".." name="texte" ..
checkbox case à cocher
<area> ... </area>
radio bouton radio défini des zones dans <map> ... </map> avec les paramètres
hidden champ caché shape, coords, href, target, alt
type
button bouton attributs descriptif
reset bouton effacer shape surface = rect (rectangle), circle (cercle) ou
="surface" polygon (polygone)
submit bouton soumettre
- (0,0) est le coin supérieur gauche de
file chargement de fichiers (pour scripts l'image. l'axe des x est vers la droite et
php ...) l'axe des y vers le bas
name texte nom de l'élément (utile aux scripts) - rect : coordonnées (x,y) du coin supérieur
gauche et du coin inférieur droit.
value texte valeur de l'élément (utile aux scripts) coords rect=x_sup_gauche,y_sup_gauche,x_inf_dr
checked checked case à cocher ou bouton radio cochée ="liste_coords" oit,y_inf_droit"
par défaut - circle : coordonnées du centre du cercle et
son rayon
circle="x_centre,y_centre,rayon"
<texarea> ... </texarea> zone de texte multi-ligne à insérer - polygon : liste des sommets x,y du
dans <form> ... </form> polygone. polygon="x1,y1,... ,xn,yn,x1,y1"
attribut descriptif
href="fichier" Lien cible de la zone
name="nom" nom de la zone
target="_self| Fenêtre d'affichage de la cible
cols="nb_cols" nombre de colonnes de texte _blank"
rows="nb_lignes" nombre de lignes de texte alt="texte" texte alternatif
wrap="retour_ligne" type de retour à la ligne : off (par
défaut)| hard Voir la carte administrative du Maroc.
Établir un lien de la région 1 vers un fichier HTML décrivant
readonly ="readonly" pour éviter les modifications cette région. Faire de même pour la région sud.
3
balises d'objet (son, vidéo...) secondes (variable content).
<object> ... </object> permet l’inclusion d'objets génériques. <META http-equiv="refresh" content="10;
URL=[Link]
attribut et valeurs descriptif
content: nombre de secondes avant la redirection.
type type d'objet à insérer URL: adresse de la page de redirection
data uri du source du document
Lien vers des ressources externes
width largeur <link rel="stylesheet" href="chemin/[Link]">
<link rel="icon" href="[Link]">
height longueur
<script src="chemin/[Link]"></script>
alt alternatif
insertion de son HTML 5
<object data="[Link]" type="application/ogg" Depuis son introduction officielle en octobre 2014, HTML5
width="200" height="100"> offre une multitude de fonctionnalités avancées. Avec
</object> HTML5, les sites web sont beaucoup plus dynamiques et
esthétiques,
insertion de fichier html
<object data="[Link]" type="text/html" Un élément sémantique décrit clairement sa signification à la
width="300" height="200"> fois pour le navigateur et le développeur . Exemples
</object> d'éléments non sémantiques : <div> et <span> - Ne disent
rien sur leur contenu. Exemples d'éléments sémantiques :
<form>, <table> et <article> -
Définissent clairement leur contenu.
Les balises de base d’un document HTML5 sont
sémantiques et fournissent une structure plus claire et
significative au contenu d’une page web, améliorant par
conséquent l’accessibilité, l’indexation par les moteurs de
Meta balises (à inclure entre <head> et </head>) recherche.
<meta name="nom" content="valeur">
<header> : pour balisage de l’en-tête elle permet de définir
name= content= Description l’en-tête d’un document. Il est généralement utilisé pour
Nom de l’auteur auteur des pages inclure le titre, le logo, la navigation principale, et d’autres
author informations. Cette balise permet aux moteurs de recherche et
du document html
aux navigateurs de mieux comprendre la structure de la page
description description descriptif succinct du site et d’améliorer l’accessibilité.
mots_clés liste des mots clés relatifs
keywords <nav> : navigation
au site (impératif)
pour regrouper des menus, des listes de liens ou des barres
all | none, accepte ou non les robots de navigation.
follow|nofollow, suivie ou non des liens
robots
index|noindex indexation ou non des <section> : la division sémantique
pages permet de diviser une page web en sections thématiques ou
nb_jour nombre de jours après en groupes de contenus. Cela facilite l’organisation logique
revisit-after lequel le robot doit du contenu et rend la structure plus claire pour les
revisiter la page développeurs et les lecteurs assistés par des technologies
d’assistance.
subject sujet sujet traité dans la page
copyright informations sur le (les) <article> : du contenu indépendant
copyright peut inclure des articles de blog, des actualités,
copyright(s)
commentaires, etc.
generator Nom du logiciel générant le code html
<footer> : le pied de page
pour définir le pied de page d’un document ou d’une section.
<meta http-equiv="nom" content="valeur"> Il contient généralement des informations telles que les
Spécifier le code de page coordonnées, les liens de contacts, les droits d’auteur, les
<meta http-equiv="Content-Type" content="text/html; crédits, etc.
charset=iso-8859-6">
en HTML5 on écrit simplement <meta charset="UTF-8"> les formulaires : permettent aux utilisateurs d’interagir avec
de nombreux éléments et de soumettre des informations.
Spécifier la langue de la page
<meta http-equiv="Content-Language" content="fr"> Types d’entrées :de nouveaux types d’entrées ont été
implémentés (‘email’, ‘url’, ‘number’, etc) permettant aux
Redirection navigateurs de valider automatiquement les données saisies et
Meta refresh : demande aux navigateurs de se rediriger de fournir un message adapté si les informations sont
automatiquement vers une autre page (URL après quelques incorrectes.
4
contrôles, comme ‘datalist’
Attributs de validation : HTML5 a introduit de nouveaux qui permet de proposer des suggestions automatiques pendant
attributs de validation permettant de contraindre les données la saisie.
saisies par l’utilisateur. Par exemple, l’attribut ‘required’
indique que le champ est obligatoire pour l’envoi du HTML5 et les medias
formulaire.
Intégration de vidéos : HTML5 introduit l’élément <video>
Validation côté client : Auparavant, la validation impliquait qui permet d’intégrer des vidéos directement dans les pages
le plus souvent l’utilisation de Javascript, mais avec HTML5, web sans avoir besoin de plugins externes tels que Flash.
les navigateurs modernes peuvent valider automatiquement
les formulaires. Intégration d’audio : Similaire à l’élément précédent,
<audio> permet d’intégrer directement des pistes
Saisie automatique : HTML5 peut permettre à l’utilisateur de sonores dans les pages web.
remplir des formulaires par rapport aux informations
précédemment saisies. Création de graphiques : L’élément <canvas> permet la
manipulation de graphiques, d’animation et de rendus
Contrôles des formulaires : Les formulaires améliorent à dynamiques en utilisant Javascript.
présent l’expérience utilisateur grâce à de nouveaux