Scribd
Importer
40 vues75 pages

Partie1 HTML CDL

Le document traite du développement web, en mettant l'accent sur le Front End, qui est la partie visible et interactive d'un site web. Il explique les langages utilisés, notamment HTML, CSS et JavaScript, ainsi que la structure d'un document HTML et les balises essentielles. Des exemples pratiques et des détails sur les balises META, les commentaires et la mise en forme des caractères sont également fournis.

Transféré par

amd4u505
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
40 vues75 pages

Partie1 HTML CDL

Le document traite du développement web, en mettant l'accent sur le Front End, qui est la partie visible et interactive d'un site web. Il explique les langages utilisés, notamment HTML, CSS et JavaScript, ainsi que la structure d'un document HTML et les balises essentielles. Des exemples pratiques et des détails sur les balises META, les commentaires et la mise en forme des caractères sont également fournis.

Transféré par

amd4u505
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 75

Développement Web :

Front End
Prof. Hafida ZROURI
e-mail : [email protected]
Introduction
Le développement web consiste à créer et gérer des sites et applications web. Il se
divise en deux parties principales : Front End et Back End.

1- Front End : C'est la partie visible et interactive d'un site web, celle avec
laquelle l'utilisateur interagit. Le développeur Front End utilise les langages
HTML, CSS et JavaScript pour construire l'interface et rendre l'expérience
utilisateur fluide.

2- Back End : C'est la partie côté serveur, invisible à l’utilisateur, qui gère la
logique, les bases de données et le traitement des informations. Le développeur
Back End utilise des langages comme PHP, Python ou Node.js pour assurer le
bon fonctionnement du site et traiter les données.

Ensemble, Front End et Back End permettent de créer des sites web fonctionnels
et interactifs.

06/02/2025 Prof. Hafida ZROURI 2


Développement Web : Front End
Plan :

- Partie 1 : HTML

- Partie 2 : CSS

- Partie 3 : JavaScript

06/02/2025 Prof. Hafida ZROURI 3


Développement Web : Front End

Partie 1 : HTML
Qu'est-ce que HTML ?
HTML (Hyper Text Markup Language) est un langage de description de pages Web. Il
permet de présenter les documents hypertextes destinés à être affichés sur le
navigateur. [Un document hypertexte est un document qui contient des liens vers
d’autres documents (texte, sons, images, …)]
HTML est souvent enrichi par des langages complémentaires comme CSS (pour la mise en
forme) et JavaScript (pour l’interactivité).
Un document HTML est
✓ un fichier texte, construit suivant une syntaxe précise
✓ structuré par des balises, insensibles à la casse
✓ interprété (visualisé) dans un navigateur (Chrome, Mozilla Firefox, Microsoft
Edge Internet, Opera,…)
✓ créé dans un éditeur de pages web (NVU, Dreamweaver, …) ou tout éditeur de
texte (bloc-notes, Notepad++, sublime, …) et enregistrer avec le suffixe .html ou
.htm
La page d'accueil d'un site web (la page principale) est en général appelée index.html. Cela
permet d'atteindre le site en tapant juste l'URL (sans taper le nom de la page à la suite).

06/02/2025 Prof. Hafida ZROURI 5


Les balises
HTML se compose d'unités fondamentales appelées balises.

Les balises sont des commandes à l’intention du navigateur et saisies entre les
signes < et >. Ainsi une balise s’écrit <balise>.

La plupart des balises HTML fonctionnent par paires : une balise d'ouverture et
une de fermeture encadrant les informations du document. Les balises de
fermeture se reconnaissent à la barre oblique (/). Ainsi à la balise d’ouverture
<balise> correspondrait la balise de fermeture </balise>. Certaines balises
fonctionnent seules, comme <br> qui crée un saut de ligne.
Une balise pourra contenir des attributs, qui fournissent des informations
supplémentaires :
<balise attribut1="val1" attribut2="val2" …> … </balise>

06/02/2025 Prof. Hafida ZROURI 6


Structure d’un document HTML
<!DOCTYPE html>
<html>
<head>
<title> … </title>
…
</head>
<body>
…
</body>
</html>

06/02/2025 Prof. Hafida ZROURI 7


Analyse des balises
<!DOCTYPE html> est la déclaration de type de document (Doctype) qui informe le navigateur des
règles à suivre pour interpréter le code HTML. En définissant un Doctype, on assure un rendu
cohérent de la page sur tous les navigateurs. Sans Doctype, chaque navigateur peut interpréter le
code à sa manière, ce qui peut causer des incohérences d'affichage.
<html>…</html> délimite le début et la fin du document html. Cette balise peut prendre comme
attribut lang qui spécifie la langue du contenu, par exemple, <html lang="fr"> pour le français.
Cette précision est particulièrement appréciée par les moteurs de recherche comme Google.
<head>…</head> contient des informations au sujet du document, indépendamment du contenu de
celui-ci :
» Titre de la fenêtre dans laquelle la page s'affiche (<title>…</title>).
» Informations diverses sur le document (<meta>).
» Des liens vers des ressources externes, comme des feuilles de style (<link>).
» Code CSS pour la mise en forme (<style>…</style>).
» Code JavaScript pour les fonctionnalités interactives (<script>…</script>).
<body>…</body> délimite le corps du document HTML, c.à.d la partie visible dans le navigateur.
Elle peut inclure des attributs tels que bgcolor="nomCouleur|codeHexadécimal" (couleur de
fond), text="nomCouleur|codeHexadécimal" (couleur du texte), et
backround="nomFichierImage" (image de fond). Cependant, en HTML5, ces attributs de
présentation sont obsolètes au profit des feuilles de style CSS.

06/02/2025 Prof. Hafida ZROURI 8


Premier exemple HTML
<!DOCTYPE html>
<html>
<head>
<title> Mon premier exemple HTML </title>
</head>
<body>
Bonjour tout le monde !
</body>
</html>

06/02/2025 Prof. Hafida ZROURI 9


Quelques balises META
Les balises meta permettent de donner au navigateur des informations sur la page web à afficher.
On dit que ce sont des métadonnées.
<meta name="author" content="auteur1[,auteur2,…]">
permet de rechercher la page dans certains moteurs de recherche en se basant sur les noms des
auteurs indiqués.
<meta name="keywords" content="mot-clé1[,mot-clé2,…]">
permet de rechercher la page dans certains moteurs de recherche en se basant sur les mots-clés
indiqués.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cette balise est utilisée pour configurer les propriétés de la fenêtre d'affichage (viewport) sur les
appareils mobiles. Elle est particulièrement importante pour assurer une mise en page adaptative
et responsive sur les petits écrans.
width=device-width : signifie que la largeur de la page doit correspondre à la largeur de
l'écran de l'appareil, assurant ainsi que la mise en page s'ajuste correctement à la taille de
l'écran.
initial-scale=1.0 : définit le niveau initial de zoom de la page lorsqu'elle est chargée pour la
première fois. Une valeur de 1.0 indique que la page ne doit pas être zoomée initialement.
06/02/2025 Prof. Hafida ZROURI 10
Quelques balises META
<meta name="description" content="Une description de la page…">
permet de rechercher la page dans certains moteurs de recherche en se basant sur
la description indiquée.
<meta http-equiv="refresh" content="n;url=adresse de page">
permet de passer automatiquement à une autre page après un certain délai.
► n = délai en seconde avant l'appel de la deuxième page.
► adresse de page = adresse (absolue ou relative) de la deuxième page web à
afficher.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
précise l’encodage utilisé pour la page web. Avec HTML5 cette déclaration
d’encodage est simplifiée : <meta charset="UTF-8">

06/02/2025 Prof. Hafida ZROURI 11


Lien vers des ressources externes
<link> : définit la relation entre le document courant et une ressource externe.
L’élément <link> peut être utilisé pour définir un lien vers une feuille de style
ou vers les icônes utilisées en barre de titre.
» Pour lier une feuille de style externe :
<link rel="stylesheet" href="style.css">
» Pour l'icône présentant le site dans l'onglet :
<link rel="icon" href="image.ico">
On indique le nom (et le chemin) du fichier grâce à l’attribut href. L’attribut
rel correspond à la relation entre la ressource et le document courant.

06/02/2025 Prof. Hafida ZROURI 12


Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cours de Programmation Web</title>
<meta name="author" content="Zrouri">
<meta http-equiv="refresh"
content="5; URL= http://esto.ump.ma">
<link rel="icon" href="esto.ico">
</head>
<body>
Dans quelques instants vous allez passez automatiquement au site
de l’EST d’Oujda.
</body>
</html>
06/02/2025 Prof. Hafida ZROURI 13
Les commentaires
Il est parfois utile de commenter le code html pour en faciliter la
compréhension lors d’une mise à jour.

Les commentaires doivent être précédés par <!-- et être fermés par -->.

Tout ce qui sera écrit entre <!-- et --> ne sera pas affiché à l’écran par le
navigateur. Notons cependant que ces commentaires restent visibles
lorsqu’on consulte le code source de la page.
Les commentaires peuvent occuper plusieurs lignes et peuvent être placés
indifféremment dans l’en-tête ou dans le corps du document.
Ils ne peuvent jamais apparaître à l'intérieur d'une balise ouvrante ou
fermante.

06/02/2025 Prof. Hafida ZROURI 14


Les caractères accentués et spéciaux
En HTML, tous les caractères spéciaux peuvent être remplacés par un code commençant
par & et terminant par ; (appelé entité HTML). En voici un exemple :
< : &lt; > : &gt; & : &amp;
" : &quot; € : &euro; © : &copy;
Les caractères accentués sont également des caractères spéciaux. Chacun a donc sa
représentation en HTML. Soit # une lettre :
Accent grave : &#grave;
Accent aigu : &#acute;
Accent circonflexe : &#circ;
Cédille : &#cedil;
Exemple : ça va Jérôme ? &ccedil;a va J&eacute;r&ocirc;me ?
Remarque : L'encodage UTF-8, supporté par tous les navigateurs modernes, permet
d'afficher directement des caractères spéciaux sans conversion en entités HTML. Par
exemple, un "é" peut être écrit tel quel au lieu de &eacute; dans le code source.
Pour utiliser UTF-8 dans une page HTML, il suffit d’indiquer cet encodage lors de
l'enregistrement du fichier et d'ajouter la balise suivante dans l'entête de la page :
<meta charset="UTF-8">
06/02/2025 Prof. Hafida ZROURI 15
Mise en forme des caractères
■ Texte en italique : <i> …</i>
■ Texte en gras : <b> …</b>
■ Texte en indice : <sub> …</sub>
■ Texte en exposant : <sup> …</sup>
■ Texte pré-formaté : <pre> …</pre> [Tous les espaces et les sauts de ligne du texte sont conservés.]
■ Texte barré : <del> … </del>
■ Mise en valeur modérée (italique) : <em> …</em>
■ Mise en valeur forte (gras) : <strong> …</strong>
■ Citation courte (italique) : <cite> …</cite> [Utilisée pour citer le titre d'une œuvre ou d'un événement
comme le titre d’un livre, d’un film ou d'une pièce de théâtre.]
■ Citation courte (entre guillemet) : <q> …</q> [Employée pour rapporter des propos directs ou des
dialogues, en les intégrant naturellement dans le texte.]
■ Citation longue : <blockquote>…</blockquote>
Par défaut, cette balise crée un espace vertical (marge d'environ 1em) avant et après la citation,
produisant un effet visuel similaire à l’ajout d’une ligne vide, ainsi qu'une marge à gauche et à
droite de 40px.
■ Espace blanc : L’espace blanc est considéré comme un séparateur de deux mots. Pour ajouter un
espace blanc, utiliser le code spécial suivant : &nbsp;
Par exemple, &nbsp;&nbsp; ajoute deux espaces blancs.
■ Retour à la ligne : <br>
06/02/2025 Prof. Hafida ZROURI 16
Mise en forme des paragraphes
■ Titres : <hn>…</hn> avec n variant de 1 à 6
Par défaut, cette balise crée un espace vertical qui dépend du niveau du titre
(marge variant de 0.67em à 2.33em) avant et après le titre, ce qui est similaire à
l’ajout d’une ligne vide, et le contenu est affiché en gras.
<h1> est le plus important et <h6> est le moins important.
Exemple : <h1> Titre de niveau 1 </h1>
■ Paragraphes : <p>…</p>
Par défaut, chaque paragraphe est précédé et suivi d'un espace vertical (marge
d'environ 1em), ce qui crée un effet visuel similaire à l’ajout d’une ligne vide.
Exemple : <p> Ceci est un paragraphe. </p>

■ Séparation de contenu : <hr>


La balise <hr> définit une pause thématique dans une page HTML (par exemple
un changement de sujet). Elle est affichée comme un trait horizontal par les
navigateurs.
Remarque : <hr> seul (sans application de style CSS) affiche une ligne grise
ombrée de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre.
06/02/2025 Prof. Hafida ZROURI 17
Listes : listes ordonnées et non ordonnées
■ Listes non ordonnées : Structure :
Listes à puces, sans numérotation <ul>
Éléments : <li>Élément 1</li>
- <ul>…</ul> (unordered list) <li>Élément 2</li>
- <li>…</li> (list item) : élément de la liste </ul>

■ Listes ordonnées : Structure :


Numérotation incrémentale suivi d'un point <ol>
Éléments : <li>Élément 1</li>
- <ol>…</ol> (ordered list) <li>Élément 2</li>
- <li>…</li> (list item) : élément de la liste </ol>
La balise <ol> admet l’attribut reversed permettant d’inverser la numérotation des
marqueurs des éléments de liste et admet aussi l’attribut start pour définir la valeur de
départ de la liste. start="n" : commence la numérotation à n, avec n un nombre >= 1

Remarque : Par défaut, la balise <ul> (et de même pour <ol>) crée un espace vertical
(marge d'environ 1em) avant et après la liste, ainsi qu'un espace à gauche de 40px
(padding-left : 40px). Ce style par défaut peut varier selon les navigateurs.
06/02/2025 Prof. Hafida ZROURI 18
Listes imbriquées

Les listes peuvent être imbriquées les unes dans les autres, ce
qui permet une présentation très claire.

► <li> peut contenir les éléments <ol> et <ul>.

► Si un élément <ol> est imbriqué, la numérotation est


réinitialisée.

06/02/2025 Prof. Hafida ZROURI 19


Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> cours HTML </title>
</head>
<body>
<h1> Notions à connaître </h1>
<h2> Les balises : </h2>
<ol>
<li> de titre </li>
<li> de paragraphe </li>
<li> de listes :
<ul> <li> ordonnées </li>
<li> non ordonnées </li>
<li> de définitions </li>
</ul>
</li>
<li> de ... </li>
</ol>
</body>
</html>
06/02/2025 Prof. Hafida ZROURI 20
Listes : listes de définitions
■ Listes composées de termes et de leurs définitions
■ Éléments :
<dl>…</dl> (description list)
<dt>…</dt> : terme à définir
<dd>…</dd> : définition du terme
■ Structure :
<dl>
<dt>Terme 1</dt>
<dd>Définition 1</dd>
<dt>Terme 2</dt>
<dd>Définition 2</dd>
</dl>
■ Remarque : il est possible de définir :
- un seul terme avec plusieurs définitions
- plusieurs termes avec une même définition
- plusieurs termes avec plusieurs descriptions

06/02/2025 Prof. Hafida ZROURI 21


Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Cours HTML </title>
</head>
<body>
<h1> Notions à connaître </h1>
<dl>
<dt> SGML </dt>
<dd> Standard Generalized Markup Language </dd>
<dt> HTML </dt>
<dd> Hyper Text Markup Language </dd>
<dt> XHTML </dt>
<dd> eXtended HTML </dd>
</dl>
</body>
</html>
06/02/2025 Prof. Hafida ZROURI 22
Tableaux
■ Définition du tableau : <table>… </table>
La balise <table> doit obligatoirement être fermée. En cas d’oubli de la balise
fermante, le tableau risque de ne pas s’afficher ou ne pas s’afficher correctement.
Cette balise peut s'employer seule ou avec des attributs (border : défini la taille de la
bordure, width : défini la largeur du tableau , height : défini la hauteur du tableau,
cellspacing : défini l’espace entre les cellules en px, cellpadding : défini l’espace
entre le texte et le bord de cellule en px, …). En HTML5, ces attributs sont
maintenant abandonnés pour laisser place à l’utilisation des feuilles de style.
En HTML, un tableau se construit ligne par ligne. Dans chaque ligne, on indique le
contenu des différentes cellules.
■ Définition d’une ligne : <tr> …</tr>
■ Définition d’une cellule d’en-tête : <th> …</th>
Le contenu de la balise <th> apparaît en gras et en centré
■ Définition d’une cellule : <td> …</td>
■ Légende : <caption>…</caption>
Cette balise possède l’attribut align pour le placement de la légende
(TOP|BOTTOM). En HTML5, cet attribut est maintenant abandonné.

06/02/2025 Prof. Hafida ZROURI 23


Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Cours HTML </title>
</head>
<body>
<table border="1">
<caption> Exemple de Tableau </caption>
<tr>
<th> Jour de la semaine </th>
<th> Montant </th>
<th> Total </th>
</tr>
<tr> <td> Lundi </td> <td> 456DH </td> <td> 456DH </td> </tr>
<tr> <td> Mardi </td> <td> 200DH </td> <td> 656DH </td> </tr>
</table>
</body>
</html> <!-- Par défaut, les cellules du tableau sont espacées entre elles d'environ 2px . -->
06/02/2025 Prof. Hafida ZROURI 24
Fusion de cellules (<TH>ou<TD>)
Il est possible de fusionner plusieurs cellules dans un tableau avec les attributs colspan et
rowspan :
Cellule sur plusieurs colonnes : Attribut colspan
Exemple : C1 C2
<table border="1" cellspacing="0" >
<tr> <td> C1 </td> <td> C2 </td> </tr>
C12
<tr> <td colspan="2"> C12 </td> </tr>
</table>

Cellule sur plusieurs lignes : Attribut rowspan


Exemple : L12 L1
<table border="1" cellspacing="0">

L2
<tr> <td rowspan="2"> L12 </td> <td> L1 </td> </tr>
<tr> <td> L2 </td> </tr>
</table>
06/02/2025 Prof. Hafida ZROURI 25
Tableaux imbriqués
Les tableaux imbriqués permettent d’insérer un tableau dans
une cellule d’un autre tableau. Cela peut être utile pour
organiser des données complexes.

Un élément <table> peut se retrouver comme contenu d’un


élément <td>.

Ça devient vite compliqué …

06/02/2025 Prof. Hafida ZROURI 26


Exemple
…
<body>
<table border="0" cellspacing="0" cellpadding="0" width="150">
<tr>
<td>
<table border="1" cellspacing="0" width="100%">
<tr> <td>1</td><td>2</td> </tr> </table> </td> </tr>
<tr>
<td>
<table border="1" cellspacing="0" width="100%">
<tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </td> </tr>
<tr>
<td>
<table border="1" cellspacing="0" width="100%">
<tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> </td> </tr>
</table>
</body>
…
06/02/2025 Prof. Hafida ZROURI 27
Liens hypertextes
Un lien permet de définir : * une région sensible au clic souris dans un document
* l'endroit ou l'on va se retrouver après ce clic
La balise <a> permet d'insérer un lien hypertexte. Elle possède au moins l'attribut href qui
contient l'adresse de destination du lien. La zone cliquable est encadrée par la balise
ouvrante <a> et la balise fermante </a> :
<a href="document"> Libellé </a>
L’attribut href="document" permet de pointer le lien vers :
- un endroit de la page en cours
- une autre page du site
- une page d’un autre site situé sur le web
- une adresse électronique
- un fichier téléchargeable
La balise <a> possède aussi l’attribut target qui définit la fenêtre dans laquelle la page
cible doit s'afficher :
- target="_self" : le contexte de navigation actuel. (Par défaut)
- target="_parent" : le contexte de navigation parent de celui en cours.
S'il n'y a pas de parent, il se comporte comme _self.
- target="_blank" : un nouvel onglet ou une nouvelle fenêtre.
- target="nomDuCadre" : le cadre (iframe) qui possède name="nomDuCadre".
06/02/2025 Prof. Hafida ZROURI 28
Liens hypertextes
Exemple : Remarque : Par défaut, le lien non visité s'affiche en bleu souligné et le lien visité s'affiche en violet.

fichier1.html fichier2.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title> fichier1 </title> <title> fichier2 </title>
</head> </head>
<body> <body>
Ce fichier permet de lancer le suivant <br> Nous sommes dans fichier2.html
<a href="fichier2.html"> texte </body>
d'appel </a> </html>
</body> <!-- ici fichier1 et fichier2 sont dans le
</html> même répertoire -->
06/02/2025 Prof. Hafida ZROURI 29
Liens hypertextes
■ Lien vers une autre page :
Pour la création d’un site, il est fortement recommandé de regrouper tous les
fichiers relatifs au site dans un seul dossier. Ce dernier peut contenir des
sous-dossiers.
On indique donc le chemin depuis la page courante pour parvenir à la page cible.
Exemple :

href="fichier2.html" Dans le répertoire courant

href="rep1/rep2/fichier2.html" Dans le répertoire 2 niveaux en dessous

href="../../fichier2.html" Dans le répertoire 2 niveaux au dessus

06/02/2025 Prof. Hafida ZROURI 30


Liens hypertextes
■ Lien vers un autre site distant :
Un lien peut faire référence à des pages d’autres sites, situées à une autre adresse sur le web.
Pour cela il suffit de remplacer document par l’adresse complète du site ou de la page. On
parle alors d’adressage absolu. Ex : <a href="http://esto.ump.ma"> Site web ESTO </a>
■ Lien interne vers un endroit précis d’un document :
Un lien interne pointe vers une ancre, c'est à dire un endroit défini par un nom à l'intérieur
d’un document. Avec la disparition de l’attribut name en HTML5, la déclaration de l’ancrage
se réalise par un identifiant id dont la valeur doit être unique pour l'ensemble du document.
● Déclaration de l’ancre : <a id="valeurID"></a>
Ex : <a id="menu"></a><h1>MENU</h1>
Remarque : on peut cibler directement un élément du document désigné par son identifiant
unique id. Ex : <h1 id="menu">MENU</h1>
● Lien vers une ancre située dans la même page : <a href="#valeurID">…</a>
Ex : <a href="#menu" > Retour au menu </a>
● Lien vers une ancre située dans une autre page :
<a href="nomFichier#valeurID">…</a>
Ex : <a href="page.html#menu"> Menu de page </a>

06/02/2025 Prof. Hafida ZROURI 31


Liens hypertextes
■ Lien vers une adresse email :
<a href="mailto: …"> … </a>

- avec sujet :
<a href="mailto:adresseEmail?subject=ObjetMessage"> … </a>

- avec sujet et texte dans le corps du message :


<a href="mailto:adresseEmail?subject=ObjetMessage&body=CorpsMessage">…</a>
- avec sujet, envoyé à 2 personnes :
<a href="mailto:adr1_email?cc=adr2-email&subject=ObjetMessage">…</a>

Ex :
<a href="mailto:[email protected]">Contacter moi</a>
<a href="mailto:[email protected]?subject=Cours">Contacter moi</a>
<a href="mailto:[email protected]?subject=Cours&body=Les liens">Contacter moi</a>

06/02/2025 Prof. Hafida ZROURI 32


Liens hypertextes
■ Lien pour télécharger un fichier :
Pour permettre de télécharger un fichier, il suffit de spécifier le nom (avec
l’extension) de celui-ci. Cette façon de procéder est valable pour autant que
le fichier html et le fichier offert en téléchargement soient situés dans le
même dossier ou sous-dossier.
Ex : <a href="coursHTML.pdf"> Version PDF </a>

S’il y a une application définie par défaut pour l’extension du fichier, le


navigateur ouvre l’application et affiche le fichier. Sinon le navigateur
télécharge le fichier, après avoir proposé la fenêtre d’invite de
téléchargement.

06/02/2025 Prof. Hafida ZROURI 33


Liens hypertextes
■ Info-bulle sur un lien :
L'attribut title="Info bulle" dans la balise <a> permet de proposer une infobulle
explicative qui s’affiche lorsque la souris pointera sur le lien.
Ex : <a href="page2.htm" title="Lien vers le chapitre 2"> Suite </a>

Remarque : l’attribut title est un attribut universel qui peut être défini sur tous les
éléments HTML.

06/02/2025 Prof. Hafida ZROURI 34


Images
Des images peuvent être insérées dans un document HTML, et elles sont au
format GIF (.gif), JPEG (.jpg ou .jpeg), PNG (.png), ...
<img> est la balise permettant d’inclure une image. Elle sera toujours
complétée par l’attribut src, qui permet de donner l’adresse du fichier
graphique contenant l’image :
<img src="adresse_de_l’image">
Les règles d’adressage sont identiques à celles abordées ci-dessus pour les
liens.
Exemple :
<img src="images/logo_EST.gif">
<img src="http://site.ma/img/logo.gif">

06/02/2025 Prof. Hafida ZROURI 35


Images
■ Quelques attributs de la balise <img> :
● width et height se réfèrent à la largeur et à la hauteur en pixels de l’image à
l’écran. La définition des dimensions permet au navigateur de réserver un
emplacement pour l’image avant son téléchargement complet.
● alt contient le commentaire qui sera affiché lors du chargement de l’image ou si
elle n'est pas chargée pour une raison quelconque.
Exemple : <img src="logo_EST.gif" alt="logo d’ESTO">

■ Lien sur une image :


Il est possible de cumuler un hyperlien et une image incrustée afin de pouvoir
suivre le lien en cliquant sur l'image. Il suffit d’entourer la balise de l’image
<img> par la balise du lien <a>.
Exemple :
<a href=" http://esto.ump.ma"> <img src="logo_EST.gif"> </a>

06/02/2025 Prof. Hafida ZROURI 36


Images
■ Les images réactives :
Une image réactive est une image divisée en plusieurs zones pointant vers différents documents.
Il est possible de créer des zones cliquables à l'intérieur d'une même image grâce à l'attribut
usemap utilisé conjointement avec la balise map.
Deux éléments indispensables : --» avoir un fichier image,
--» définir les zones réactives.
Définition des zones cliquables :
<map name="NomPartition">
<!-- différentes balises area →
</map>
Remarque : La valeur de l’attribut name (chaine de caractères sans espaces) doit être unique
pour tous les éléments <map> du document.
Image associée à la partition :
<img src="nomFichierImage" usemap="#NomPartition">

06/02/2025 Prof. Hafida ZROURI 37


Images
La balise <area> :
<area shape="forme" coords="coordonnées"
href="lienDestination" alt="commentaire"
x1,y1 target="cible de cadre">
x2,y2
L’attribut shape peut prendre les valeurs :
pour un rectangle :
shape="rect" coords="x1, y1, x2, y2"
r pour un cercle :
x,y shape="circle" coords="x,y,r"
pour un polygone :
shape="poly" coords="x1,y1,x2,y2,..."
pour gérer les clics effectués en dehors des zones
x2,y2 réactives :
x1,y1
x3,y3 shape="DEFAULT"

Les coordonnées sont définies en pixels.

06/02/2025 Prof. Hafida ZROURI 38


Images
Exemple :
<map name="carteImage">
<area shape="rect" coords="25,25,75,75" href="rectangle.html">
<area shape="circle" coords="150,50,25" href="cercle.html">
<area shape="poly" coords="200,50,250,75,275,25,250,25" href="poly.html">
</map>
300 pixels
100 pixels

06/02/2025 Prof. Hafida ZROURI 39


Les cadres locaux
La balise <iframe> permet d'insérer un cadre en ligne ou cadre flottant à n'importe quel
endroit du document et elle se comporte comme un conteneur permettant d'afficher
des pages HTML locales ou distantes.
La balise <iframe> possède les attributs :
- src="page à afficher" : définit l'emplacement de la page à afficher dans le cadre.
- width : détermine la largeur du cadre flottant (valeur par défaut 300px).
- height : détermine la hauteur du cadre flottant (valeur par défaut 150px).
- name : donne un nom pour le cadre. Ce nom peut être utilisé comme la valeur de
l'attribut target d'un élément <a>, <area> ou <form>.
Le texte contenu entre les balises <iframe> et </iframe> sera utilisé pour afficher un
texte de remplacement pour les navigateurs n’acceptant pas les iframes.
De nos jours, cette balise est supportée par les dernières versions de tous les
navigateurs courants.
Syntaxe : <iframe src="…" > </iframe>

06/02/2025 Prof. Hafida ZROURI 40


Les cadres locaux
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Test des iframes </title>
</head>
<body>
<h3> Affichage de l'herboristerie du palais royal dans un cadre IFRAME : </h3>
<iframe src="https://www.herboristerie.com" height="250" width="900">
</iframe>
<p>Ce site vous permet de commander vos produits en ligne ! </p>
</body>
</html>

06/02/2025 Prof. Hafida ZROURI 41


Le multimédia
Insertion d’un fichier audio
■ HTML permet d'intégrer des fichiers audio directement dans une page web grâce à la
balise <audio>.
■ Syntaxe :
<audio controls>
<source src="fichier.mp3">
<source src="fichier.ogg">
<!-- Autres formats éventuels -->
Votre navigateur ne supporte pas l'élément audio.
</audio>
■ La balise <source> est utilisée pour spécifier plusieurs formats de fichier audio. Cette
approche garantit que le fichier audio sera lu, quel que soit le navigateur utilisé, en
sélectionnant le premier format compatible. Cette balise possède les attributs :
- src : chemin du fichier multimédia.
- type : (optionnel) type du fichier tel que type="audio/mpeg" pour MP3,
type="audio/ogg" pour OGG, type="audio/aac" pour AAC, …)

06/02/2025 Prof. Hafida ZROURI 42


Le multimédia
Insertion d’un fichier audio
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insertion d'un fichier audio</title>
</head>
<body>
<audio controls>
<source src="piano_mp3.mp3">
<source src="piano_ogg.ogg">
<source src="piano_aac.aac">
<a href="piano_mp3.mp3">Télécharger le fichier audio au format mp3</a>
</audio>
</body>
</html>
06/02/2025 Prof. Hafida ZROURI 43
Le multimédia
Insertion d’un fichier audio
■ Attributs de la balise <audio> :
● controls : affiche la barre de contrôle pour agir sur le son. Cette barre comporte les
fonctions de lecture, d’arrêt, d’avancement et de volume.
<audio src="fichier_son" controls>
● autoplay : démarre automatiquement la lecture dès que l'audio est chargé.
<audio src="fichier_son" autoplay>
● loop : spécifie que le fichier son sera joué en boucle. Ainsi le morceau sonore est
joué à nouveau lorsqu’il se termine.
<audio src="fichier_son" autoplay loop>
● preload : indique si le fichier doit être préchargé :
- none : ne précharge pas l'audio. Ce dernier ne sera téléchargé qu'une fois que
l'utilisateur lance la lecture.
- metadata : précharge uniquement les métadonnées (comme la durée, la taille du
fichier, le type MIME, etc.), sans télécharger le contenu complet de l'audio.
- auto : précharge le fichier audio complet dès que possible, permettant ainsi un
démarrage plus rapide de la lecture.
Cet attribut preload est ignoré si l’attribut autoplay est présent.
06/02/2025 Prof. Hafida ZROURI 44
Le multimédia
Insertion d’un fichier vidéo
■ La balise <video> permet d'intégrer des vidéos dans une page HTML. Comme pour l'audio,
cette balise permet de spécifier plusieurs formats pour assurer la compatibilité avec
différents navigateurs.
■ Syntaxe :
<video>
<source src="video.mp4">
<source src="video.webm">
…
Votre navigateur ne supporte pas l'élément vidéo.
</video>
■ La balise <source> joue un rôle crucial pour garantir la compatibilité avec plusieurs
navigateurs. Elle permet d’offrir plusieurs formats de vidéo, et le navigateur choisit
automatiquement le premier format qu'il supporte.
Cette balise possède les attributs :
- src : chemin du fichier multimédia.
- type : (optionnel) type du fichier. Soit : type="video/ogg" pour les fichiers OGV,
type="video/mp4" pour les fichiers MP4, type="video/webm" pour les fichiers WebM ,
…
06/02/2025 Prof. Hafida ZROURI 45
Le multimédia
Insertion d’un fichier vidéo
■ Attributs de la balise <video> :
● width et height : définissent les dimensions de la vidéo pour un meilleur contrôle
de l'affichage.
● controls : affiche la barre de contrôle pour agir sur la vidéo.
● autoplay : la vidéo se lance automatiquement une fois chargée.
● loop : la vidéo est lue en boucle.
● muted : permet de désactiver le son de la vidéo.
● poster : définit l'URL d'une image à afficher en tant qu’aperçu de la vidéo. Il est
affiché jusqu’au démarrage de la vidéo. Par défaut, la première image de la vidéo
est affichée comme aperçu initial de la vidéo.
<video poster="affiche.jpg" > … </video>
● preload indique comment la vidéo doit être téléchargé avant qu’il ne soit joué :
none (pas de préchargement), metadata (préchargement des métadonnées attachées
au fichier) ou auto (préchargement complet de la vidéo).
Cet attribut preload est ignoré si l’attribut autoplay est présent.

06/02/2025 Prof. Hafida ZROURI 46


Le multimédia
Insertion d’un fichier vidéo
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Insertion d'un fichier vidéo </title>
</head>
<body>
<video width="250" controls>
<source src="video_mp4.mp4">
<source src="video_ogv.ogv">
<source src="video_webm.webm">
<a href="video_mp4.mp4">Télécharger le fichier vidéo au format mp4</a>
</video>
</body>
</html>
06/02/2025 Prof. Hafida ZROURI 47
Les formulaires
■ Principe : Exemple :

Permettre au client la saisie de données


sur une page Web (comme un formulaire
papier)

Différentes actions possibles avec le


contenu :
– envoi par email
– envoi à un serveur pour traitement
par une application distante
– traitement par un script coté client

06/02/2025 Prof. Hafida ZROURI 48


Les formulaires
■ Structure du formulaire HTML :
- La balise <form> marque le début de la description d'un formulaire HTML.
- L'ensemble des éléments constituant le formulaire, tels que les champs de saisie,
les boutons de validation, etc., se situe entre les balises <form> et </form>.
- Toutes les balises HTML sont permises entre <form> et </form>, y compris les
images, tableaux, et autres éléments qui peuvent enrichir l’interface du
formulaire.

Attributs de la balise <form> :


● action : définit l’URL du script qui traitera les données envoyées par le
formulaire. Il est également possible d'envoyer les données par e-mail, en
utilisant : action="mailto:adresseEmail".
● method="POST|GET" : définit le mode de transfert des données vers le script.
GET (méthode par défaut) passe les données via l’url, elles sont donc visibles par
l'internaute alors qu’avec POST les données n’apparaissent pas dans l’url, elles
sont transmises de façon masquée.

06/02/2025 Prof. Hafida ZROURI 49


Les formulaires
● name : nom du formulaire pour une éventuelle utilisation ultérieure. (Le nom ne
doit pas être trop long et ne peut contenir ni caractères spéciaux, ni espace, ni
caractères avec accent. Le premier caractère doit être une lettre).
● target : fenêtre ou cadre dans laquelle la réponse du programme sera affichée (pour
plus de détails voir l’attribut target de la balise <a>).
● enctype : spécifie le codage des données.
» enctype="application/x-www-form-urlencoded" : méthode d'encodage par défaut.
» enctype="multipart/form-data" : méthode d'encodage pour envoi de fichier (avec
POST et input type="file").
» enctype="text/plain" : méthode d'encodage pour envoi par email.

Exemple :
<form name="form1" method="GET" action="monFichier.php"> … </form>
<form method="POST" action="mailto:[email protected]" enctype="text/plain">
… </form>

06/02/2025 Prof. Hafida ZROURI 50


Les formulaires
■ Les éléments d’un formulaire :
input : champs de saisie de texte et divers types de boutons :
type="text" : champ de texte
type="password" : champ autorisant la saisie de mot de passe
type="hidden" : champ caché
type="checkbox" : case à cocher
type="radio" : bouton radio
type="submit" : bouton de soumission du formulaire
type="reset" : bouton de remise à zéro des champs
type="file" : bouton de sélection de fichier
type="button" : bouton poussoir
type="image" : bouton image
…
select : menus déroulants, listes à ascenseurs
textarea : zone de saisie d'un texte long

06/02/2025 Prof. Hafida ZROURI 51


Les formulaires
■ Champ de texte : <input type="text">
C'est le champ le plus classique, celui qui permet la saisie de texte d'une
seule ligne. (type="text" est le type par défaut)

Exemple :
<form>
Texte : <br> <input type="text" name="nom" value="Valeur par défaut"
size="48" >
</form>

06/02/2025 Prof. Hafida ZROURI 52


Les formulaires
Les attributs possibles sont :

name : définit un nom unique pour cet élément.

size : (valeur par défaut 20) définit le nombre de caractères visibles de la ligne de
texte et par conséquent la largeur de la zone de texte. L’utilisateur peut
néanmoins taper autant de caractères qu’il souhaite.

maxlength : détermine le nombre maximal de caractères que l’utilisateur peut


encoder dans la ligne de texte.

value : définit la valeur par défaut de la ligne de texte. Celle-ci apparaît dans la
ligne de texte au chargement de la page.

readonly : indique que le champ de texte est en lecture seule. L’utilisateur peut
visualiser la valeur définie, mais il ne peut ni la modifier ni y saisir de nouvelles
données.
06/02/2025 Prof. Hafida ZROURI 53
Les formulaires
autofocus : donne le focus à l’élément lors du chargement de la page.
minlength : détermine le nombre minimal de caractères que l’utilisateur doit encoder
dans la ligne de texte.
required : indique que le champ doit être rempli pour pouvoir soumettre le
formulaire.
placeholder : permet d’afficher une suggestion de saisie qui apparaît en grisé dans le
champ de texte au chargement de la page. Ce texte disparaît dès que l’utilisateur
donne le focus à l’élément concerné (ou commence à écrire dedans).
Exemple : <input type="text" placeholder="Votre nom de famille">

Note : l’attribut value n’effectue pas la même fonction que l’attribut placeholder. Avec
value, l’utilisateur doit effacer le texte avant d’effectuer son propre encodage mais
avec placeholder, le texte est effacé automatiquement dès que le focus est donné à
l’élément. En outre, avec l’attribut value, en cas de soumission du formulaire sans
modification de cette valeur par défaut, c’est celle-ci qui sera transmise.

06/02/2025 Prof. Hafida ZROURI 54


Les formulaires
■ Champ de mot de passe : <input type="password" … >
Il est identique au champ de texte, mais la saisie des caractères est
masquée, chaque caractère étant remplacé par un astérisque ou un
symbole similaire (en fonction du navigateur).
Les attributs usuels de la ligne de texte name, size, maxlength, …
peuvent être utilisés.

Exemple :
<form>
Mot de passe : <br>
<input type="password" name="pass" size="16">
</form>

06/02/2025 Prof. Hafida ZROURI 55


Les formulaires
■ Bouton radio : <input type="radio" … >
Les boutons radio permettent à l'utilisateur de choisir une seule option parmi un groupe
d'options. Lorsqu'un bouton radio est sélectionné, les autres boutons du même groupe
(ayant le même attribut name) sont automatiquement désélectionnés.
Attributs supplémentaires :
name : tous les boutons radio ayant le même nom appartiennent au même groupe.
value : définit la valeur envoyée lorsque le bouton radio est sélectionné.
checked : sélectionne par défaut un bouton radio.
Exemple :
<form>
<input type="radio" name="sexe" value="F" checked>Femme <br>
<input type="radio" name="sexe" value="H">Homme
</form>

Remarque : Si la valeur de value n'est pas définie, ce sera la chaîne de caractères "on" qui sera
envoyée.
06/02/2025 Prof. Hafida ZROURI 56
Les formulaires
■ Case à cocher : <input type="checkbox" … >
Les cases à cocher permettent à l'utilisateur de sélectionner un ou plusieurs choix
parmi une série d'options.
Attributs supplémentaires : name, value et checked.
Exemple :
<form>
<input type="checkbox" name="choix1" value="HTML" checked> HTML <br>
<input type="checkbox" name="choix2" value="JS">JavaScript<br>
<input type="checkbox" name="choix3" value="PHP">PHP
</form>

Remarque : Si la valeur de value n'est pas définie, ce sera la chaîne de


caractères "on" qui sera envoyée si la case est cochée.

06/02/2025 Prof. Hafida ZROURI 57


Les formulaires
■ Boutons de commande : <input type="submit | reset" … >
type="submit" définit un bouton qui déclenche l'envoi de tous les champs du
formulaire vers le script indiqué dans l'attribut action de <form>.
type="reset" efface toutes les saisies et rétablit les valeurs par défaut de tous les
éléments du formulaire.
 Il est possible de modifier le texte par défaut du bouton par l’attribut value.
Remarque :
A la place de la balise <input> on peut utiliser la balise <button> :
<button type="submit|reset" …> … </button>
Exemple :
<input type="submit" name="validation" value="Valider">
<input type="reset" value="Réinitialiser">
<button type="submit"> <b>Valider</b> </button>

06/02/2025 Prof. Hafida ZROURI 58


Les formulaires
■ Bouton générique : <input type="button" … >
ou <button type="button" …> … </button>
Ce type de bouton n'a pas de comportement par défaut. En général, son
comportement est défini par une action JavaScript (voir cours JavaScript).
Désactiver/Activer un bouton : l’attribut disabled permet de désactiver le bouton au
chargement de la page. On peut activer/désactiver le bouton lors de la navigation
sur la page avec JavaScript en modifiant la valeur de l'attribut disabled pour la
passer de true à false et vice versa (par exemple avec une instruction telle
que btn.disabled = true).
Attributs supplémentaires : name, value
Exemple :
<input type="button" value="Note" onClick="window.open('note.html');">
OU :
<button type="button" onClick="window.open('note.html');"> Note </button>

06/02/2025 Prof. Hafida ZROURI 59


Les formulaires
■ Bouton image : <input type="image" src="…"… >
C’est un bouton de soumission du formulaire comme le bouton submit sauf
que le contenu est une image.
Attributs supplémentaires : name, width, height, alt

Exemple :
<input type="image" name="validation" src="disquette.png" width="49"
height="45" alt="Valider">
OU :
<button type="submit" name="validation">
<img src="disquette.png" width="49" height="45" alt="Valider">
</button>

06/02/2025 Prof. Hafida ZROURI 60


Les formulaires
■ Champ caché : <input type="hidden" name="…" value="…">
C’est un champ invisible pour l'utilisateur mais dont la valeur sera
transmise avec les données du formulaire lors de l'envoi.
Attention : bien que le champ soit caché, sa valeur reste accessible dans
le code source HTML de la page.
Exemple :
<form action="progAnnulation.php" method="POST">
Pour annuler votre abonnement, tapez votre adresse email : <br>
<input type="text" name="email" size="40">
<input type="hidden" name="action" value="annulation">
<input type="submit" value="Envoyer">
</form>

suite

06/02/2025 Prof. Hafida ZROURI 61


Les formulaires

Le champs nommé « action » n’est pas visible dans le formulaire


mais sa valeur « annulation » sera transmise par la page Web au serveur
en même temps que les autres informations.

06/02/2025 Prof. Hafida ZROURI 62


Les formulaires
■ Fichier attaché : <input type="file" … >
La balise <input> avec l’attribut type="file" permet à l'utilisateur de
sélectionner un fichier à envoyer vers un serveur. Les attributs habituels de
la balise <input> peuvent également être utilisés.
Important : Cette balise HTML sert uniquement à sélectionner un fichier.
Le transfert du fichier doit être géré par une application côté serveur,
comme PHP.
Pour envoyer le contenu du fichier (et non seulement son chemin), la balise
<form> doit inclure les attributs suivants : enctype="multipart/form-data"
et method="post".
Il est possible de limiter la taille du fichier à envoyer en ajoutant un champ
caché (<input type="hidden">) avec l’attribut name="MAX_FILE_SIZE"
et une valeur correspondant à la taille maximale autorisée en octets.

06/02/2025 Prof. Hafida ZROURI 63


Les formulaires
Syntaxe :
<form action="…" method="post" enctype="multipart/form-data">
…
<input type="hidden" name="MAX_FILE_SIZE" value="…">
<input type="file" name="…">
…
</form>
Exemple :
<form action="testFichier.php" method="post" enctype="multipart/form-data">
Votre photo :
<input type="hidden" name="MAX_FILE_SIZE" value="3000">
<input type="file" name="fichier">
</form>

06/02/2025 Prof. Hafida ZROURI 64


Les formulaires
Attributs supplémentaires :
Attribut accept : Il est possible d’indiquer les types de fichiers que le serveur acceptera
à l’aide de l’attribut accept. La valeur de cet attribut est une liste de valeurs séparées
par des virgules, ces valeurs peuvent être :
- Une extension de fichier. (Par exemple ".jpg,.png,.doc")
- Un type MIME valide sans extension :
- audio/* pour des fichiers sonores
- video/* pour des fichiers vidéos
- image/* pour des fichiers images
Attribut multiple : lorsque cet attribut est présent, il indique que plusieurs fichiers
peuvent être sélectionnés.
Exemple :
<form action="testFichier.php" method="post" enctype="multipart/form-data">
<input type="file" name="fich[]" accept="image/*, .pdf" multiple>
</form>
06/02/2025 Prof. Hafida ZROURI 65
Les formulaires
■ Quelques nouveaux types de la balise <input> :
HTML5 a introduit de nouveaux types de champs de formulaire avec la balise <input>,
facilitant la collecte d'informations spécifiques de l'utilisateur et améliorant la validation.
<input type="email"> : utilisé pour saisir des adresses e-mail. Le navigateur valide
automatiquement le format de l'email.
<input type="email" name="mail" placeholder="Entrez votre email">
<input type="number"> : permet la saisie de valeurs numériques. Il est possible de
spécifier des plages de valeurs avec les attributs min, max, et des incréments avec step.
Quantite : <input type="number" min="1" max="10" step="1" name="quantite">
<input type="date"> : permet à l'utilisateur de sélectionner une date à l'aide d'un
calendrier.
Date de naissance : <input type="date" name="date_naissance">
<input type="tel"> : utilisé pour saisir des numéros de téléphone. Il n'y a pas de
validation automatique de format.
<input type="tel" name="num" placeholder="Entrez votre numéro de téléphone">

06/02/2025 Prof. Hafida ZROURI 66


Les formulaires
■ Zone de texte : <textarea rows="…" cols="…">…</textarea>
Zone de saisie de texte sur plusieurs lignes.

Exemple :
<form>
Zone de texte : <br>
<textarea name="texte" rows="7" cols="23">
Saisissez votre texte ici ...
</textarea>
</form>

06/02/2025 Prof. Hafida ZROURI 67


Les formulaires
Les attributs possibles sont :
name : définit un nom pour cet élément.
cols : (valeur par défaut 20) définit le nombre de caractères visibles en largeur de la
zone de texte.
rows : (valeur par défaut 2) définit le nombre de caractères visibles en hauteur de la
zone de texte.
maxlength : détermine le nombre maximal de caractères que l’utilisateur peut
encoder dans la zone de texte.
autofocus : donne le focus à l’élément lors du chargement de la page.
required : rend l’élément obligatoire.
placeholder : affiche un texte dans la zone au chargement de la page. Ce texte
s’efface automatiquement dès que l’utilisateur donne le focus à la zone de texte
(ou commence à écrire dedans).
readonly : indique que la valeur attribuée par défaut à la zone de texte ne pourra
être modifiée par l’utilisateur.

06/02/2025 Prof. Hafida ZROURI 68


Les formulaires
■ Liste de choix et menu déroulant :
<select>
<option> …</option> <!-- élément de la liste -->
<option>…</option> <!-- élément de la liste -->
...
</select>
Principaux attributs de l'élément <select> :
- name : nom de l’élément.
- size : définit le nombre d’éléments du menu qui sera visible (par défaut size=1 --> menu
déroulant).
- multiple : autorise la sélection multiple (nécessite size > 1).
Principaux attributs de l'élément <option> :
- selected : spécifie qu’un élément est sélectionné par défaut dans la liste.
- value : par défaut, le texte de l’élément <option> est envoyé lors de la soumission du
formulaire. Cependant, cet attribut permet de spécifier une valeur différente à
transmettre.

06/02/2025 Prof. Hafida ZROURI 69


Les formulaires
Exemple :
<select name="liste1">
<option value="l1"> Ligne 1 </option>
<option value ="l2"> Ligne 2 </option>
<option value="l3" selected> Ligne 3 </option>
</select>

<select name="liste2[]" size="3" multiple>


<option value="l1" selected > Ligne 1 </option>
<option value="l2"> Ligne 2 </option>
<option value="l3" selected > Ligne 3 </option>
<option value="l4"> Ligne 4 </option>
<option value="l5"> Ligne 5 </option>
</select>

06/02/2025 Prof. Hafida ZROURI 70


Les formulaires
■ Organisation des champs de formulaires :
Dans le cas de formulaires longs et complexes, il est parfois utile de regrouper
graphiquement certains éléments pour organiser la page de façon logique. Pour cela
on peut utiliser la balise <fieldset>… </fieldset> pour regrouper des champs
de formulaire de sémantique proche. On pourra alors donner une légende à l’ensemble
de champs avec la balise <legend>.

Exemple :
<fieldset>
<legend>Programmation Web :</legend>
<input type="checkbox" name="choix1" value="HTML" checked>HTML <br>
<input type="checkbox" name="choix2" value="JS">JavaScript <br>
<input type="checkbox" name="choix3" value="PHP">PHP <br>
</fieldset>

06/02/2025 Prof. Hafida ZROURI 71


Les formulaires
■ Les labels : <label for="…" > … </label>
La plupart des champs sont naturellement accompagnés d’une étiquette (ou label). On
peut la placer où on veut, en général juste à gauche ou à droite du champ. Son utilisation
permet aux navigateurs d’associer cette étiquette au champ de formulaire. Ainsi, un clic
sur l’intitulé donnera le focus au champ de formulaire.
Pour associer un élément <label> avec un élément du formulaire, il faut fournir un
identifiant à l'élément du formulaire sous la forme d'un attribut id. Ensuite, on peut
renseigner l'attribut for de l'élément <label> avec la valeur de cet identifiant. On peut
également créer un lien implicite en imbriquant l'élément du formulaire directement au
sein d'un élément <label>. Dans ce cas, les attributs for et id ne sont pas nécessaires.
Exemple :
<label for="idPass"> Mot de passe : </label>
<input type="password" name="pass" size="16" id="idPass">
Ou : Label
<label> Mot de passe :
<input type="password" name="pass" size="16"></label>

06/02/2025 Prof. Hafida ZROURI 72


Quelques balises sémantiques
■ HTML offre plusieurs balises sémantiques qui permettent de structurer le contenu de
manière claire et logique, facilitant ainsi la lisibilité et l'accessibilité des pages web.
Voici les balises principales :
<main> : contient le contenu principal de la page. Il ne doit y avoir qu'un seul élément
<main> par page. Il exclut les en-têtes, barres de navigation ou pieds de page.
<header> : définit l'en-tête d'une page ou d'une section, souvent utilisé pour le titre, le
logo ou la barre de navigation.
<footer> : représente le pied de page, qui contient généralement les informations sur
l'auteur, les mentions légales ou des liens supplémentaires.
<nav> : regroupe les liens de navigation de la page, facilitant ainsi la navigation dans le
site.
<section> : permet de structurer une partie du contenu avec un sujet spécifique ou un
thème particulier.
<article> : représente un contenu autonome, tel qu'un article de blog ou une publication,
pouvant être distribué ou partagé indépendamment.
<aside> : définit du contenu secondaire, comme une barre latérale.
06/02/2025 Prof. Hafida ZROURI 73
XHTML compatible HTML
■ Transformation d'un document HTML en un document XHTML :
Écrire les noms de balises et d'attributs en minuscules.
Mettre les valeurs des attributs entre guillemets.
Les balises des éléments vides doivent être auto-fermées avec une barre
oblique (<br />).
Spécifier l’entête xml et le type de contenu :
- Inclure l’entête XML au début du document :
<?xml version="1.0" encoding="UTF-8"?>
- Spécifier le type de contenu et l'encodage dans la balise <meta> :
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
Assigner des valeurs aux attributs HTML booléens.
<input type="radio" checked="checked" />

06/02/2025 Prof. Hafida ZROURI 74


Les limites d' HTML / XHTML
■ Langage de base du Web.

■ Langage simple, limité et statique.

■ D'autres langages, extensions, programmes sont venus se greffer à


HTML pour en augmenter les possibilités.

■ XHTML offre les aspects XML mais ce n'est pas suffisant pour
toutes les applications que l'on souhaite mettre en œuvre sur le web.

06/02/2025 Prof. Hafida ZROURI 75

Vous aimerez peut-être aussi