HTML

Université Mohammed Premier - Oujda
Ecole Nationale des Sciences Appliquées d’Oujda
DÉVELOPPEMENT WEB
HTML : Hyper Text Markup Language
-----------------------
FILIERE : Cycle Ingénieur - Ingénierie Data Sciences et

Cloud Computing
Réalisé par : Pr. Mohcine BOUKSIM m.bouksim@ump.ac.ma Année Universitaire : 2023/2024

Hyper Text Markup Language(HTML) : Introduction
▪ Ce n’est pas un langage de programmation

▪ C’est plutôt un langage de description
➢ composé de plusieurs balises (tags)
➢ interprété par le navigateur
▪ Il ne nécessite pas un éditeur de texte particulier
▪ Il est créé en 1991 par Tim Berners-Lee et est standardisé depuis 1994
par W3C
En parlant Standardisation : deux organismes
▪ W3C (World Wide Web Consortium) :
➢ organisme de standardisation fondé par Tim Berners-Lee
➢ charge de promouvoir la compatibilité des technologies web
(HTML, XML, CSS, SOAP...)
▪ WHATWG (Web Hypertext Application Technology Working Group) :
➢ collaboration non officielle des différents développeurs de
navigateurs Web (Mozilla Foundation, Opera Software, Apple...)
➢ charge de développement de nouvelles technologies sur la base des
implémentations actuelles d’Internet Explorer
▪ Le 28 mai 2019, Signature d’une collaboration entre W3C et WHATWG

▪ But : développement d’une version unique des spécifications HTML et
DOM
▪ HTML1 : première version créée par Tim Berners-Lee en 1991.
▪ HTML2 : deuxième version, apparue en 1994. On commence à parler de
W3C.
▪ HTML3 : apparue en 1996 avec plusieurs nouveautés comme les tableaux,
les scripts, le positionnement du texte autour des images, etc.
▪ HTML4 : apparue en 1998 avec la possibilité : d’utiliser de frames
(découpage d’une page en plusieurs parties), des améliorations sur les
formulaires, d’utiliser des feuilles de style (CSS).
▪ HTML5 : finalisée en octobre 2014 et permet : d’inclure facilement des
vidéos, d’ajouter plus de précisions sur les champs d’un formulaire
Hyper Text Markup Language(HTML) : Outils
▪ Un navigateur
➢ Google chrome : https://www.google.com/chrome/
➢ Mozilla firefox : https://www.mozilla.org/fr/firefox/new/
➢ Edge (installé par défaut sous Windows)
▪ Un éditeur de texte
➢ Sublime text : https://www.sublimetext.com/3
➢ Atom : https://atom.io/
➢ Notepad++ : https://notepad-plus-plus.org/download/v7.9.5.html
▪ On peut travailler directement en ligne (sur notre navigateur) sans utilisé
d’éditeur de texte
➢ https://codepen.io/
➢ https://jsfiddle.net/
▪ Offrent 3 éditeurs en parallèle : pour HTML, CSS et le JavaScript
▪ On peut aussi utiliser les IDEs (environnement de développement intégré)
➢ Eclipse (https://www.eclipse.org/downloads/)
➢ Netbeans (https://netbeans.apache.org/)
➢ Visual Studio Code (code.visualstudio.com/download)
Dans ce cours on va utiliser visual studio code (VSC)
▪ Gratuit
▪ Très léger
▪ Pouvant s’adapter selon le langage de programmation
▪ Extensible via l’installation de quelques centaines d’extension
▪ En plus des avantages d’un IDE (auto-completion, coloration syntaxique …)
Pour créer un projet sous VSC:
▪ Allez dans File > Open Folder
▪ Cliquez sur Nouveau dossier et saisissez cours-html
▪ Cliquez sur le dossier cours-html puis sur le dossier Sélectionner un dossier
▪ Créez un fichier index.html dans cours-html
▪ Dans index.html, saisissez html:5 puis cliquez sur Entrée
Extension Live Server:
Live Server crée un serveur local dans VS Code et vous permet d'ouvrir des
pages de développement en deux clics dans le navigateur de votre choix. Pas
besoin d'aller manuellement à l'emplacement du fichier et de l'ouvrir à partir de
là. De plus, lorsque Live Server est actif et opérationnel, la page sera
automatiquement rechargée chaque fois que vous enregistrez le document.
▪ Installez l’extension Live Server
▪ Faites un clic doit sur index.html
▪ Cliquez sur Open with Live Server
Hyper Text Markup Language : Concept de balises
Toute la syntaxe du langage HTML s’écrit sous la forme de balise, on retrouve généralement
deux façons de déclarer les balises :
<balise>
objet
</balise>
ou bien (les balises orphelines ou auto-fermantes)
[objet] <balise/>
Avec HTML5, plus besoin de / pour les balises orphelines
[objet] <balise>
Commentaire : balise particulière

Hyper Text Markup Language : Concept de balises
▪ Les balises doivent être ouvertes puis fermées récursivement, comme des parenthèses
([...]f(...)g)
▪ Tout ce qui est entouré par deux balises s’appelle élément
▪ Un élément peut éventuellement contenir du texte, liens, balises...
▪ Un texte en clair (non-entouré par une balise) est affiché
▪ Les balises non reconnues seront ignorées (non-affichées)
▪ Les commentaires en HTML sont ignorés par le navigateur
▪ Les commentaires ne sont pas affichés mais restent visibles dans le code source de la page
et ne doit donc jamais contenir une information confidentielle.
Hyper Text Markup Language : Structure d’une
page HTML
▪ Le contenu d’une page HTML est compris entre deux balises html
▪ Une page HTML est composée de deux parties
➢ une entête : head
➢ un corps : body
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
page HTML
II. DOCTYPE
▪ Ce n’est pas une balise
▪ C’est facultatif
▪ C’est une directive permettant de préciser qu’il s’agit d’un document HTML et indiquant
sa version
<html lang="en">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE html>
page HTML
III. La balise <head>
<head>
<meta charset="UTF-8">
<meta name="description" content="Cours HTML">
<meta name="keywords" content="cours, html, ensa">
<meta name="author" content="Bouksim Mohcine">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cours HTML 2021</title>
</head>
Les méta informations :

▪ <title> titre du document (affiché par le navigateur en haut de la page)
▪ <link> pour référencer un fichier (CSS par exemple)
▪ <style> pour inclure du code CSS
page HTML
▪ <meta> peut contenir : des informations sur le codage, des informations pour les moteurs de
recherche
➢ Défini des mots-clés pour les moteurs de recherche :
➢ Défini une description pour la page Web:

➢ Le nom de l’auteur
➢ Actualise la page toute les 30 secondes
<meta http-equiv="refresh" content="30">

page HTML
▪ Permet d’adapter l’affichage de votre site sur tous les supports
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sans la balise <meta name =‘viewport’ Avec la balise <meta name =‘viewport’
page HTML
IV. La balise <body>
▪ La balise <body> contient toutes les données visible de votre site web
<body>
les informations qui seront affichées dans le navigateur
</body>
➢ texte
➢ tableau
➢ image/vidéo/document
➢ menu
➢ lien
➢ formulaire
➢ liste
➢ ...
page HTML
IV. La balise <body>
▪ Exemple :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cours HTML 2021</title>
</head>
<body>
<p>
Bonjour, ceci est notre 1er page
</p>
</body>
Hyper Text Markup Language : Attributs d’une balise
Attribut
▪ Les éléments vont également pouvoir contenir des attributs qu’on va alors placer au sein de la
balise ouvrante de ceux-ci. Pour certains éléments, les attributs vont être facultatifs tandis que pour
d’autres ils vont être obligatoires pour garantir le bon fonctionnement du code HTML. On leur
associe donc des attributs.
▪ Les attributs vont en effet venir compléter les éléments en les définissant plus précisément ou en
apportant des informations supplémentaires sur le comportement d’un élément.
▪ Certains attributs :
➢ prennent une seule valeur
➢ prennent plusieurs valeurs chacune attribuée a une clé
➢ ne prennent pas de valeur
➢ Exemple d’attribut acceptant une seule valeur
<input type=text>
➢ Une balise peut avoir plusieurs attributs
<input type=text placeholder="saisir votre nom">
➢ Exemple d’attribut n’acceptant pas de valeur
<input type=text placeholder="saisir votre nom" readonly>
➢ Exemple d’attribut n’acceptant pas de valeur

<p style="color: white; background-color: red">
Bonjour
</p>
Quelques attributs standards
▪ class : nom de classe
▪ id : identifiant unique dans la page
▪ style : style CSS de l’élément
▪ ...
Remarque :
Avec HTML5, la valeur d’un attribut peut être entourée par des guillemets, des
apostrophes comme elle peut ne pas être entourée si elle ne contient pas d’espace.
Exemple :
▪ style="font-size:60%;" : pour la taille du texte
▪ style="text-align:center;" : pour l’alignement du texte
▪ style="font-family:arial;" : pour le font du texte
▪ ...
<body>
<p style="font-size:250%; text-
align:center;font-
family:arial;color: red;" >
Note 1er page web
</p>
</body>
Hyper Text Markup Language : Organisation du texte
▪ <p>...</p> : pour délimiter un paragraphe
▪ <br> : retour à la ligne
▪ <b>...</b> : pour mettre un texte en gras
▪ <u>...</u> : pour souligner un texte
▪ <i>...</i> : pour mettre un texte en italic
▪ <hr> : pour afficher une ligne horizontal
▪ <strong>...</strong> : pour mettre un texte bien en valeur (le même résultat que <b>)
▪ <em>...</em> : pour mettre un texte un peu en valeur (le même résultat que <i>)
▪ <mark>...</mark> : pour marquer un texte
▪ <abbr> : abréviation
▪ <address> : adresse formatée (en italique)
▪ <cite> : citation (en italique)
▪ <code> : élément de code informatique
▪ <pre> : texte pré-formaté
▪ <del> : texte supprimé dans un document (barré)
▪ <ins> : texte insère dans un document (souligné)
▪ <sub> : texte en indice
▪ <sup> : texte en exposant
Exemple :
<p>Le <abbr title="World Wide Web Consortium">W3C</abbr></p>
<p><b>ce texte est gras</b></p>

<p><i>ce texte est italique</i></p>
<p><mark>ce texte est surligné</mark></p>
<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>

<p> Le 1<sup>er</sup> Janvier </p>
Remarque :
▪ Les navigateurs ajoutent automatiquement un espace entre chaque paragraphe
▪ Bien que le texte ’flottant’ (non inclus dans un élément de la page) soit affiché par
les navigateurs, il vaut mieux pour des raisons de ’style’ inclure la totalité du texte
utile de la page dans des balises <p>
Hyper Text Markup Language : Titres
Dans HTML pour déclarer un titre en utilise les balises h1 jusqu’à h6 (différentes taille)
Les titres : de plus grand au plus petit
▪ <h1>...</h1>
▪ <h2>...</h2>
▪ <h3>...</h3>
▪ <h4>...</h4>
▪ <h5>...</h5>
▪ <h6>...</h6>
Hyper Text Markup Language : Titres
Exemple :
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
Hyper Text Markup Language : Les listes
▪ Les listes vont nous permettre de lister plusieurs éléments en les groupant sous
un dénominateur commun qu’est la liste en soi. Les navigateurs et les moteurs
de recherche vont donc comprendre qu’il y a une relation entre les différents
éléments de la liste.
▪ Il existe deux grands types de listes en HTML : les listes ordonnées et les listes
non-ordonnées. Il existe également un troisième type de liste un peu particulier
et moins utilisé : les listes de définitions.
▪ La syntaxe utilisé :
➢ <ul>...</ul> : une liste non-ordonnée (non-numérotée)
➢ <ol>...</ol> : une liste ordonnée
➢ <li>...</li> : un élément d’une liste
➢ <dl>...</dl> : une liste de description
➢ <dt>...</dt> : un terme d’une liste
➢ <dd>...</dd> : la description d’un terme
Exemple : une liste nom numérotée
<ul>
<li>Oujda</li>
<li>Rabat</li>
<li>Casablanca</li>
</ul>
Exemple :Il est possible d’imbriquer les listes
<ul>
<li>France</li>
<li>Italie
<ul>
<li>Milan</li>
<li>Turin</li>
</ul>
</li>
<li>Espagne</li>
</ul>
Exemple : une liste numérotée
<ol>
<li>Oujda</li>
<li>Rabat</li>
<li>Casablanca</li>
</ol>
Exemple : une liste de description

<dl>
<dt>France</dt>
<dd> Bleu blanc rouge</dd>
<dt>Allemagne</dt>
<dd> Noir jaune rouge</dd>
</dl>
Pour les liste numérotée on peut ajouter les attributs suivants :
▪ reversed: Cet attribut booléen indique que les éléments de la liste sont dans l'ordre
inverse. Les éléments sont numérotés de haut en bas.
▪ start: Un nombre entier à partir duquel on commence à compter pour les éléments de la
liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le type de numérotation est
constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les
éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez start="4".
▪ type: Définit le type de numérotation :
➢ a: pour les lettres minuscules
➢ A: pour les lettres majuscules
➢ i: pour les chiffres romains minuscules
➢ I: pour les chiffres romains majuscules
➢ 1: pour les chiffres (par défaut)
Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut de différent type est
utilisé sur un élément <li> fermé.
Exemple :
<ol type="a">
<li>Oujda</li>
<li>Rabat</li>
<li>Casablanca</li>
</ol>
<ol type="I" >

<li>Maroc</li>
<li>France</li>
<li>USA</li>
</ol>
<ol type= "1" >

<li>FST</li>
<li>ENSA</li>
<li>EST</li>
</ol>
Exemple :
<ol start="5">
<li>Barcelone</li>
<li>Marseille</li>
<li>Manchester</li>
</ol>
<ol start="5" reversed="true">

<li>Barcelone</li>
<li>Marseille</li>
<li>Manchester</li>
</ol>
Hyper Text Markup Language : Les images
❑ La balise <img> permet d’insérer soit
➢ une image locale (<img src="image.png">), ou
➢ a distance ( <img src="http://www.site.fr/image.png">)
❑ Cette balise a deux attributs obligatoires : src et alt
❑ Une image n’est pas ’incluse’ dans un document. Elle est référencée par son adresse
❑ Si l’image référencée n’est pas accessible, le navigateur peut afficher soit une zone
rectangulaire de bonnes dimensions, soit un texte alternatif
❑ Les attributs recommandés pour garantir un affichage correct:
➢ src : URL de l’image
➢ alt : texte à afficher si image est indisponible (indispensable pour être W3C Valide)
➢ height : hauteur
➢ width : largeur
Hyper Text Markup Language : Les images
Exemple :
<img src="image.png" alt="image personnelle" height="128" width="128">
<figure>
<img src="image.jpg" alt="image personnelle" height="128" width="200">
<figcaption>Mosquée Hassan II</figcaption>
</figure>
Hyper Text Markup Language : Les liens
❑ Les liens en HTML vont nous servir à créer des ponts entre différentes pages d’un
même site ou de sites différents. Le principe d’un lien est le suivant : en cliquant sur une
ancre (qui est la partie visible par l’utilisateur d’un lien et qui peut être un texte comme
une image), nos utilisateurs vont être redirigés vers une page cible.
❑ Il existe deux types principaux de liens hypertextes en HTML :
➢ Les liens internes qui vont servir à naviguer d’une page à l’autre dans un même site ;
➢ Les liens externes qui vont envoyer les utilisateurs vers une page d’un autre site.
❑ Quel que soit le type de liens que l’on souhaite créer en HTML (liens internes, des liens
externes, ou des liens vers un autre endroit d’une même page), nous utiliserons toujours
l’élément a qui est l’abréviation de « anchor » ou « ancre » en français accompagné de
son attribut href pour « hypertext reference » ou « référence hypertexte » en
français.
❑ Syntaxe: : <a>...</a> : insérer un lien (interne ou externe)
❑ pour créer un lien vers un autre document local ou distant
➢ <a href="http://monsite.fr"> monsite </a> ou
➢ <a href="page2.html"> Page 2 </a>
❑ href est l’attribut de l’élément <a> le plus important puisqu’il indique la destination du
lien
➢ Lien pour télécharger un fichier
<a href="monfichier.zip">Download</a>
➢ Pour définir une base pour tous les liens de la page

<base href="http://www.monsite.org/">
➢ Ainsi, on peut simplifier la création de liens
<a href="inscription.html">Inscription</a>
➢ En cliquant sur ce lien, on se redirige vers:

http://www.monsite.org/inscription.html
❑ Jusqu’à présent, lorsque nous cliquions sur les liens créés en HTML, nous étions
immédiatement redirigés vers la nouvelle page et notre page cible s’ouvrait dans le
même emplacement (le même cadre ou « frame ») que le lien de départ.
❑ Dans certain cas on a besoin d’ouvrir le lien dans une nouvelle fenêtre a la place de la
fenêtre actuelle. On va pouvoir faire cela avec l’attribut target.
❑ L’attribut target va nous permettre de choisir où doit s’ouvrir notre page de
destination. En pratique, nous utiliserons très souvent la valeur _blank qui spécifie que
la nouvelle page doit s’ouvrir dans un nouvel onglet.
<a href="http://www.monsite.org/" target="_blank">lien</a>

❑ L’élément a en HTML ne va pas uniquement être très utile pour créer des liens entre
différentes pages mais va également nous permettre de lier des ressources à nos pages.
❑ Dans ce nouveau chapitre, nous allons étudier deux autres utilisations courantes de cet
élément :
➢ Utiliser l’élément a pour permettre aux utilisateurs de nous envoyer un mail ;
➢ Utiliser l’élément a pour permettre aux utilisateurs de télécharger un fichier.
❑ On peut utiliser l’élément a pour transmettre notre adresse mail à nos utilisateurs et
leur permettre de nous envoyer simplement un mail.
❑ Pour permettre l’envoi d’un mail en HTML, on va placer indiquer en valeur de
l’attribut href de notre élément a la valeur mailto : suivie de notre adresse email.
❑ Lorsqu’un visiteur va cliquer sur notre lien, sa messagerie par défaut va
automatiquement s’ouvrir. De plus, le champ destinataire sera automatiquement rempli
avec notre adresse email.
<a href="mailto:m.bouksim@ump.ac.ma">me contacter</a>

❑ On peut même spécifier le sujet et le corps du message, chose qui va permettre de

remplir automatiquement ces champs (sujet et message) avec un contenu par défaut
<a href="mailto:m.bouksim@ump.ac.ma?subject=sujet test&body=ici on

ajoute le contenu du message">mon mail </a>
❑ Vous pouvez encore utiliser l’élément a pour permettre à vos visiteurs de télécharger
certains types de fichiers, comme des fichiers PDF ou Word par exemple.
❑ Pour la plupart des fichiers, il va simplement suffire d’indiquer leur adresse (relative ou
leur URL complète) en valeur de l’attribut href. Lorsqu’un utilisateur va cliquer sur le
lien, le fichier lié va s’ouvrir dans le navigateur.
❑ Cette première solution fonctionne mais pour certain fichier, demande à ce que
l’utilisateur fasse lui-même la démarche de télécharger le fichier. On va également
pouvoir « forcer » le téléchargement d’un fichier en ajoutant un attribut download
dans l’élément a tout en indiquant l’adresse du fichier en question en valeur de
l’attribut href..
❑ L’attribut download peut prendre en valeur (facultative) le nom sous lequel on

souhaite que les utilisateurs téléchargent le fichier.
❑ Dès que l’utilisateur va cliquer sur le lien, l’attribut download va faire que le le
téléchargement du fichier lié va se lancer automatiquement. Attention cependant, cet
attribut n’a pendant très longtemps pas été supporté par certains navigateurs majeurs
dont Safari. Certaines anciennes versions de Safari encore présentes aujourd’hui
peuvent donc ne pas le reconnaitre.
<a href= "monImage.jpg" download >me contacter</a>
<a href= "monImage.jpg" download = "img.jpg" >me contacter</a>

Hyper Text Markup Language : Les tableaux
❑ Les tableaux en HTML vont nous permettre de présenter des données de manière organisée et
sous une certaine forme pour les structurer et les rendre compréhensibles pour les navigateurs,
moteurs de recherche et utilisateurs.
❑ Un tableau est un ensemble de lignes et de colonnes. L’intersection entre une ligne et une
colonne est une cellule de tableau.
❑ Pour créer un tableau fonctionnel en HTML, nous allons devoir utiliser à minima 3 éléments :
➢ Un élément table (« tableau » en français) qui va définir le tableau en soi ;
➢ Des éléments tr, pour « table row » ou « ligne de tableau » en français qui vont nous
permettre d’ajouter des lignes dans notre tableau ;
➢ Des éléments td, pour « table data » ou « donnée de tableau » en français qui vont nous
permettre d’ajouter des cellules dans nos lignes et ainsi de créer automatiquement de
nouvelles colonnes.
❑ L’élément HTML table va représenter le tableau en soi. Cet élément est composé d’une paire
de balises ouvrante <table> et fermante </table> au sein desquelles nous allons placer les
différents autres éléments de notre tableau. Les éléments tr et td sont également représentés
sous la forme d’une paire de balises avec leur contenu entre les balises.
❑ Pour créer un tableau en HTML, il y a une chose que vous devez bien comprendre qui est que
les tableaux HTML vont être créés ligne par ligne.
❑ A chaque fois que nous voudrons ajouter une ligne dans notre tableau, nous utiliserons un
nouvel élément tr.
❑ Nous allons ensuite pouvoir ajouter autant d’éléments td au sein de chacune de nos lignes.
Chaque élément td va représenter une cellule dans le tableau.
❑ Par exemple, pour créer un tableau en HTML contenant 2 lignes contenant chacune 2 cellules
(c’est-à-dire un tableau de 2 lignes, 2 colonnes), nous utiliserons notre élément table qui va
contenir 2 éléments tr et chaque élément tr contiendra 2 éléments td comme ceci :
<table >
<tr>
<td>BD</td>
<td>16</td>
</tr>
<tr>
<td>WEB</td>
<td>18</td>
</tr>
</table>
❑ La balise <th> permet d’ajouter les entêtes a notre table et la balise <caption> pour
ajouter un titre a notre tableau. L’attribut border permet d’ajouter une bordure au tableau
<table border="1">
<caption>Moyenne par matière</caption>
<tr>
<th>Matière</th>
<th>Moyenne</th>
</tr>
<tr>
<td>BD</td>
<td>16</td>
</tr>
<tr>
<td>WEB</td>
<td>18</td>
</tr>
</table>
Exemple : Fusionner des cellules d’un tableau (colonne)
<table border="1">
<tr>
<th>Nom</th>
<th colspan="2">Mail</th>
</tr>
<tr>
<td>Mohcine BOUKSIM</td>
<td>m.bouksim@ump.ac.ma</td>
<td>mohcine.bouksim@gmail.com</td>
</tr>
</table>
Exemple : Fusionner des cellules d’un tableau (ligne)
<table border="1">
<tr>
<th>Nom</th>
<td> Mohcine BOUKSIM </td>
</tr>
<tr>
<th rowspan="2">Mail</th>
<td> m.bouksim@ump.ac.ma </td>
</tr>
<tr>
<td> mohcine.bouksim@gmail.com </td>
</tr>
</table>
❑ Si vous devez créer des tableaux assez longs, il peut être judicieux de commencer à les
structurer en les subdivisant en plusieurs parties.
❑ On peut distinguer trois parties dans un tableau : le haut du tableau contenant généralement la
ligne d’en tête, le corps du tableau contenant les informations de notre tableau en soi et le pied
du tableau servant à calculer des totaux ou à rappeler les informations d’en tête si votre
tableau est vraiment long.
❑ Pour définir chaque partie d’un tableau, nous disposons d’un élément HTML spécifique :
➢ thead pour la tête du tableau ;
➢ tbody pour le corps du tableau ;
➢ tfoot pour le pied du tableau.
<table border="1">
<thead>
<tr> <th>Mois</th>
<th>Loyer</th> </tr>
</thead>
<tbody>
<tr> <td>January</td>
<td>600$</td> </tr>
<tr> <td>February</td>
<td>700$</td> </tr>
</tbody>
<tfoot>
<tr> <td>Total</td>
<td>1300$</td> </tr>
</tfoot>
</table>
Hyper Text Markup Language : Formulaires
❑ Les formulaires HTML vont permettre à nos visiteurs de nous envoyer des données que nous
allons ensuite pouvoir manipuler et / ou stocker.
❑ Nous allons utiliser les formulaires pour permettre à des utilisateurs de s’inscrire sur notre site
(formulaires d’inscription), de se connecter (formulaire de connexion), de nous envoyer des
messages (formulaire de contact), de laisser des commentaires, etc.
❑ Les formulaires HTML vont pouvoir être composés de champs de texte (cas d’un champ de
formulaire demandant à un utilisateur de renseigner son adresse mail pour se connecter ou
pour s’inscrire sur le site par exemple), de listes d’options (choix d’un pays dans une liste de
pays par exemple), de cases à cocher, etc.
❑ Cependant, vous devez bien comprendre ici qu’on touche avec les formulaires aux limites du
langage HTML. En effet, nous allons tout à fait pouvoir construire nos formulaires en HTML,
mais le HTML ne va nous permettre ni de recueillir les données envoyées par nos visiteurs, ni
de les manipuler, ni de les stocker.
❑ Pour réaliser ces différentes opérations, il faudra utiliser d’autres types de langages comme le
PHP (pour la manipulation des données) et le MySQL (pour le stockage) par exemple qui vont
s’exécuter côté serveur.
❑ Pour créer un formulaire, nous allons utiliser l’élément HTML form. Cet élément form va avoir
besoin de deux attributs pour fonctionner normalement : les attributs method et action.
❑ L’attribut méthode va indiquer comment doivent être envoyées les données saisies par l’utilisateur.
Cet attribut peut prendre deux valeurs : get et post.
❑ Que signifient ces deux valeurs et laquelle choisir ? Les valeurs get et post vont déterminer la
méthode de transit des données du formulaire. En choisissant get, on indique que les données
doivent transiter via l’URL (sous forme de paramètres) tandis qu’en choisissant la valeur post on
indique qu’on veut envoyer les données du formulaire via transaction post HTTP.
❑ Concrètement, si l’on choisit l’envoi via l’URL (avec la valeur get), nous serons limités dans la
quantité de données pouvant être envoyées et surtout les données vont être envoyées en clair.
Evitez donc absolument d’utiliser cette méthode si vous demandez des mots de passe ou toute
information sensible dans votre formulaire.
Déclaration d’un formulaire :
<form method="POST ou GET" action="page web destination">

</form>
➢ méthode : concerne l’envoi de données et peut prendre deux valeurs.

▪ GET : non fréquemment utilisée car limitée à 255 caractères. En plus, les informations
envoyées seront visibles dans la zone d’adresse.
▪ POST : plus utilisée que GET car elle permet d’envoyer un grand nombre
d’informations et les données saisies dans le formulaire ne transitent pas par la barre
d’adresse.
➢ action : indique l’adresse de la page ou du programme qui va traiter les informations
(généralement avec un langage autre que HTML).
Que peut contenir un formulaire:
➢ Des zones de saisie
➢ Des zones de choix
➢ Des boutons
I. Zones de saisie
▪ Une zone de saisie monoligne
<input type="text" name="nom zone texte">
▪ Une zone de saisie multiligne

<textarea name="message" placeholder="Message"></textarea>
▪ Un libelle associe a une zone de saisie

<input type="text" name="nom zone texte">
▪ Exemple
<label for="nom">Nom :</label> <input type="text" name="nom" id="nom">
I. Zones de saisie
▪ Avec HTML 5, les 3 écritures suivantes sont équivalentes
<input type=text value=John>

<input type="text" value="John Wick">
<input type='text' value='John Wick'>
➢ button : un bouton sans comportement défini.
➢ checkbox : une case à cocher qui permet de sélectionner/déselectionner une valeur
➢ color : un contrôle qui permet de définir une couleur.
➢ date : un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une
année).
➢ datetime-local : un contrôle qui permet de saisir une date et une heure (sans fuseau
horaire).
➢ email : un champ qui permet de saisir une adresse éléctronique.
➢ file : un contrôle qui permet de sélectionner un fichier. L'attribut accept définit les types de
fichiers qui peuvent être sélectionnés.
➢ hidden : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.
➢ image : un bouton graphique d'envoi du formulaire. L'attribut src doit être défini avec la
source de l'image et l'attribut alt doit être défini avec le texte alternatif. Les attributs height
et width permettent de définir la taille de l'image en pixels.
➢ month : un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).
➢ number : un contrôle qui permet de saisir un nombre.
➢ password : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs
maxlength et minlength définissent la taille maximale et minimale de la valeur à saisir
dans le champ.
➢ radio : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de
différentes valeurs.
➢ range : un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas
importante.
➢ reset : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.
➢ search : un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne
sont automatiquement retirés.
➢ submit : un bouton qui envoie le formulaire.
➢ tel : un contrôle pour saisir un numéro de téléphone.
➢ text : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.
➢ time : A control for entering a time value with no time zone.
➢ url : un champ permettant de saisir une URL.
➢ week : un contrôle permettant de saisir une date représentée par un numéro de semaine et
une année (sans indication de fuseau horaire).
Les attributs:
➢ required : pour indiquer qu’un champ est obligatoire
➢ autofocus : pour placer le curseur dans cet élément dés le chargement de la page
➢ multiple : pour indiquer qu’il est possible de choisir ou d’insérer plusieurs éléments
➢ placeholder : pour afficher un message indicatif dans un champ
➢ readonly : pour rendre le champ en lecture seule
➢ Disabled : Un attribut booléen qui indique si le champ doit être désactivé.
➢ Value : La valeur du champ.
II. Zones de choix
▪ Les cases a cocher :
▪ Les boutons radio :
▪ Les listes déroulantes

▪ Cases à cocher
<input type="checkbox" name="nom du choix" [checked]>
▪ Boutons radios
<input type="radio" name="nom du choix" [checked]>
▪ Listes déroulantes
<select name="liste">
<option value="valeur1" [selected]>valeur1</option>
...
<option value="valeurN">valeurN</option>
</select>
▪ Les listes déroulantes avec regroupement

<select name="liste">
<optgroup label="ENSA">
<option value="IDSCC" selected>IDSCC</option>
<option value="GE">GE</option>
<option value="GI">GI</option>
<option value="ITIRC">ITIRC</option>
</optgroup>
<optgroup label="FST">
<option value="MIP">MIP</option>
<option value="BCG">BCG</option>
<option value="GE/GM">GE/GM</option>
</optgroup>
</select>
▪ Les listes de données (datalist) = liste déroulante + zone de saisie

<input list="sports" name="sport">
<datalist id="sports">
<option value="football">
<option value="handball">
<option value="cross fit">
<option value="tennis">
<option value="hockey">
</datalist>
III. Boutons
▪ Les cases a cocher :
➢ submit : envoie le contenu d’un formulaire a la page indiqué dans
l’action
➢ reset : remet a zéro (effacé) le contenu d’un formulaire
➢ button : bouton générique qui permet de réaliser plusieurs taches pour
HTML (quitter une page,...) ou de déclencher un code JavaScript
<button type="button">Enregistrer</button>
<button type="reset">Enregistrer</button>
<button type="submit">Enregistrer</button>
<form method="post" action="traitement.php">
<fieldset>
<legend>Nom complet</legend> 
<label for="nom">nom :</label>
<input type="text" id="nom"><br>
<label for="prenom">prenom :</label>
<input type="text" id="prenom"><br>
<label for="Email">Email :</label>
<input type="email" id="Email">
</fieldset>
<fieldset>
<legend>Ville</legend> 
<input type="radio" name="Casablanca" value="Casablanca">
<label for="Casablanca"> Casablanca </label><br>
<input type="radio" name="Oujda" value="Oujda">
<label for="Oujda"> Oujda </label><br>
<input type="radio" name="Rabat" value="Rabat">
<label for="Rabat"> Rabat </label>
</fieldset>
</form>
Hyper Text Markup Language : Audio
❑ Il existe différents formats de fichiers audio.
❑ Jusqu’à très récemment, toutefois, l’insertion de fichiers audio était beaucoup plus
complexe que l’insertion d’images pour la raison qu’aucun format de fichier audio n’était
universellement reconnu : chaque navigateur possédait sa liste de formats audio qu’il était
capable de lire.
❑ La raison ici était une question de brevets déposés sur des éléments servant à constituer les
différents formats audio ou sur les formats audio en soi, comme le brevet sur le MP3
effectif jusqu’en 2017. Ainsi, les navigateurs étaient soit obligés de posséder des licences
soit de payer des royalties pour pouvoir utiliser tel ou tel format audio.
❑ La situation s’est récemment beaucoup améliorée sur ce point-là et aujourd’hui certains
formats audio sont bien reconnus par la plupart des navigateurs.
▪ Pour Insérer un élément audio
<audio src="audio.mp3" controls ></audio>
▪ Le problème en utilisant l’élément audio de cette manière est qu’on ne va pas

pouvoir fournir de format audio alternatif au cas où le navigateur ne puisse
pas lire le format fourni.
▪ Nous utiliserons donc généralement plutôt l’élément audio de concert avec
des éléments source qui vont nous permettre d’intégrer différents fichiers
parmi lesquels le navigateur fera son choix.
▪ Dans l’élément source, nous allons préciser l’emplacement du fichier audio

dans un attribut src et allons également facultativement pouvoir ajouter un
attribut type qui va nous permettre d’indiquer rapidement au navigateur le
type de codec audio utilisé dans notre fichier pour que le navigateur sache
immédiatement s’il peut le lire ou pas sans même avoir à le tester. Cela
optimisera les performances de notre page.
<audio controls>
<source src="audio.mp3" type="audio/mpeg" >
<source src="audio.wav" type="audio/wav" >
<source src="audio.ogg" type="audio/ogg; codecs=vorbis" >
oups, votre navigateur ne supporte pas l'élément audio
</audio>
▪ Ici, le navigateur va s’arrêter dès qu’il va rencontrer un format audio qu’il sait
lire et ignorer les autres formats fournis en dessous. Cette technique permet
de pouvoir lire un fichier audio sur (quasiment) tous les navigateurs.
▪ Attributs (les mêmes pour les audios et les vidéos):
➢ autoplay : L’attribut autoplay va nous permettre de lancer
automatiquement la lecture du fichier audio dès qu’il sera chargé. Il suffit
de le renseigner (même sans valeur explicite) pour que le fichier audio se
lance automatiquement. Notez que certains navigateurs (dont Chrome)
peuvent bloquer cet attribut car celui-ci est jugé mauvais pour vos
visiteurs.
➢ Controls: Si l'attribut est présent, le navigateur affichera des contrôles
pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement
du curseur de lecture.
▪ Attributs :
➢ Loop: Attribut booléen. S'il est renseigné, la lecture du fichier se fera en
boucle.
➢ Muted: Attribut booléen, indiquant si le son de l'élément audio est
initialement coupé. Sa valeur par défaut est false.
➢ src: L'URL du fichier audio à intégrer.
▪ Exemple :
<audio src="audio.mp3" loop controls></audio>

Hyper Text Markup Language : Vidéo
▪ Un fichier vidéo est relativement plus complexe qu’un simple fichier audio
puisqu’une vidéo va être composée à la fois d’une piste audio et d’une piste
vidéo. Ces deux pistes vont être de formats différents et vont être regroupées
dans un conteneur qui va se charger de les faire fonctionner ensemble.
▪ En termes de support par les navigateurs, nous allons donc nous heurter aux
mêmes problèmes qu’on a déjà vu avec l’intégration d’audio et notamment
aux problèmes de brevet cette fois-ci non seulement sur les codecs des pistes
audios mais également sur ceux des pistes vidéo et des conteneurs.
▪ Comme pour l’élément audio, nous indiquerons donc généralement plusieurs
formats de conteneurs dans notre élément video afin de s’assurer que la vidéo
puisse être lue sur la plupart des navigateurs.
▪ La façon la plus simple d’insérer un fichier vidéo dans une page HTML va
être d’utiliser un élément video avec deux attributs src et controls,
exactement de la même façon que pour l’élément audio
▪ L’attribut src va indiquer le chemin vers la ressource à intégrer tandis que
l’attribut controls va permettre de faire apparaitre les contrôles fournis par le
navigateur (notamment un bouton de lecture / arrêt, un bouton pour choisir le
niveau sonore, etc.).
<video src="video.mp4" controls></video>

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
oups, votre navigateur ne supporte pas le HTML5 video
</video>
▪ Pour les attributs, on garde les même attributs déjà vue pour les audios, on y
joute l’attribut :
➢ L’attribut poster va nous permettre de renseigner l’adresse d’une image
qui devra être utilisée comme image d’illustration de fond de la vidéo
avant que celle-ci ne soit chargée et lancée.
Hyper Text Markup Language : Div & Span
❑ Les éléments HTML div et span sont très spéciaux puisque ce sont deux
éléments HTML qui ne possèdent aucune valeur sémantique, c’est-à-dire
qu’ils ne servent pas à préciser la nature d’un contenu.
❑ Ces deux éléments sont en effet des conteneurs génériques qui ont été créés
pour nous permettre d’ordonner nos pages plus simplement ensuite en CSS.
❑ Les éléments div et span ne possèdent aucune valeur sémantique
❑ Les éléments HTML div et span ont été créés principalement pour
simplifier la mise en page de nos pages HTML en CSS c’est-à-dire pour
simplifier l’application de certains styles CSS.
Hyper Text Markup Language : Div
❑ Nous allons utiliser l’élément div comme conteneur pour différents
éléments afin de pouvoir ensuite facilement appliquer les mêmes styles CSS
à tous les éléments contenus dans notre div par héritage ou pour les mettre
en forme en appliquant un style spécifique au div
❑ Ici, le terme de « conteneur » est l’équivalent du terme « parent » : nous
allons simplement placer nos différents éléments à l’intérieur de nos balises
<div> et </div> puis appliquer les styles CSS directement au div.
Hyper Text Markup Language : Div
<head>
<style>
div{
color: red;}
</style>
</head>
<body>
<div>
<p>
lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<p>
Accusamus, aliquam, atque, autem beatae blanditiis eius.
</p>
</div>
</body>
Hyper Text Markup Language : Span
❑ L’élément span va lui servir de conteneur à un autre niveau : il va servir de
conteneur interne à un élément plutôt que de conteneur pour plusieurs
éléments.
❑ On va par exemple pouvoir placer une certaine partie du texte d’un titre ou
d’un paragraphe dans un élément span pour ensuite pouvoir lui appliquer un
style CSS particulier, chose qu’il nous était impossible de faire jusqu’à
présent.
Hyper Text Markup Language : Span
<head>
<style>
span{
color: red;}
</style>
</head>
<body>
<div>
<p>
lorem ipsum <span>dolor</span> sit amet, consectetur adipisicing
elit.
</p>
<p>
Accusamus, aliquam, atque, autem beatae blanditiis eius.
</p>
</div>
</body>

HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Transféré par

Droits d'auteur :

Formats disponibles

Université Mohammed Premier - Oujda

Ecole Nationale des Sciences Appliquées d’Oujda

FILIERE : Cycle Ingénieur - Ingénierie Data Sciences et

Réalisé par : Pr. Mohcine BOUKSIM m.bouksim@ump.ac.ma Année Universitaire : 2023/2024

▪ Ce n’est pas un langage de programmation

▪ Le 28 mai 2019, Signature d’une collaboration entre W3C et WHATWG

Les méta informations :

➢ Défini une description pour la page Web:

<meta http-equiv="refresh" content="30">

➢ Exemple d’attribut acceptant une seule valeur

➢ Une balise peut avoir plusieurs attributs

<input type=text placeholder="saisir votre nom">

➢ Exemple d’attribut n’acceptant pas de valeur

<input type=text placeholder="saisir votre nom" readonly>

➢ Exemple d’attribut n’acceptant pas de valeur

<p>Le <abbr title="World Wide Web Consortium">W3C</abbr></p>

<p><b>ce texte est gras</b></p>

<p>La dernière version de HTML est <del>quatre</del><ins>cinq</ins></p>

Exemple : une liste nom numérotée

Exemple :Il est possible d’imbriquer les listes

Exemple : une liste numérotée

Exemple : une liste de description

<ol type="I" >

<ol type= "1" >

<ol start="5" reversed="true">

<img src="image.png" alt="image personnelle" height="128" width="128">

➢ Pour définir une base pour tous les liens de la page

➢ Ainsi, on peut simplifier la création de liens

➢ En cliquant sur ce lien, on se redirige vers:

<a href="http://www.monsite.org/" target="_blank">lien</a>

<a href="mailto:m.bouksim@ump.ac.ma">me contacter</a>

❑ On peut même spécifier le sujet et le corps du message, chose qui va permettre de

<a href="mailto:m.bouksim@ump.ac.ma?subject=sujet test&body=ici on

❑ L’attribut download peut prendre en valeur (facultative) le nom sous lequel on

<a href= "monImage.jpg" download >me contacter</a>

<a href= "monImage.jpg" download = "img.jpg" >me contacter</a>

Exemple : Fusionner des cellules d’un tableau (colonne)

<form method="POST ou GET" action="page web destination">

➢ méthode : concerne l’envoi de données et peut prendre deux valeurs.

▪ Une zone de saisie multiligne

▪ Un libelle associe a une zone de saisie

▪ Avec HTML 5, les 3 écritures suivantes sont équivalentes

<input type=text value=John>

▪ Les boutons radio :

▪ Les listes déroulantes

▪ Les listes déroulantes avec regroupement

▪ Les listes de données (datalist) = liste déroulante + zone de saisie

▪ Le problème en utilisant l’élément audio de cette manière est qu’on ne va pas

▪ Dans l’élément source, nous allons préciser l’emplacement du fichier audio

<audio src="audio.mp3" loop controls></audio>

<video src="video.mp4" controls></video>

Vous aimerez peut-être aussi