HTML

Université Mohammed Premier
Faculté des Sciences - Oujda

Filière : Sciences Mathématiques et Informatique (SMI-S3)
Module :
Technologie du web
Responsable du module :
Pr. Youssef DOUZI

Département d’informatique
y.douzi@ump.ac.ma
1
A.U. 2023-2024
Chapitre 2:
HTML
FSO Pr. Youssef DOUZI 2

Plan
❖ Introduction à HTML
❖ Historique de HTML
❖ Les bases du HTML
❖ Structure d'une page HTML
❖ Organisation du texte
❖ Balises d'images et de liens
❖ Tables et formulaires

HTML (HyperText Markup Language)
HTML :
❖ Est un langage de balisage hypertexte qui est utilisé pour créer des pages Web.
❖ Est un langage qui permet de structurer le contenu d'une page Web. Il est utilisé pour
créer des éléments tels que des titres, des paragraphes, des images, des liens, etc.
❖ Les éléments HTML peuvent être imbriqués et avoir des attributs.
❖ Est un langage relativement facile à apprendre.

Historique de HTML
L'histoire de HTML remonte aux débuts d'Internet. Voici un bref aperçu de son évolution au fil du temps :
❑ HTML 1.0 (1991) : Tim Berners-Lee, l'inventeur du WWW, crée le premier langage de balisage appelé
"HTML 1.0". Ce langage était très basique et permettait principalement de créer des liens hypertexte entre des
documents.
❑ HTML 2.0 (1995) : Version améliorée, ajoute des éléments tels que les tableaux et les formulaires.
❑ HTML 3.2 (1997) : Cette version a introduit de nombreuses améliorations, notamment des feuilles de style
CSS pour la mise en forme (les images et les animations).
❑ HTML 4.01 (1999) : Cette version a continué à évoluer, introduisant des éléments de formulaires plus avancés,
des cadres (frames), et d'autres fonctionnalités.
❑ XHTML (2000) : Extensible HyperText Markup Language (XHTML) est une réforme de HTML dans une
syntaxe plus stricte et compatible avec XML. Il est publié sous plusieurs versions, dont XHTML 1.0 et
XHTML 1.1.
Historique de HTML
❑ HTML5 (2014) : HTML5 est une refonte majeure de la spécification HTML. Il introduit de nouvelles balises pour le
multimédia (audio et vidéo), la géolocalisation, les éléments de formulaire améliorés, le support des canvas pour le
dessin interactif, et bien plus encore. HTML5 a également renforcé la séparation des préoccupations en dissociant le
contenu (HTML), la présentation (CSS), et l'interactivité (JavaScript).
❑ HTML5.1 et HTML5.2 (2016) : Ces versions apportent des améliorations mineures et de nouvelles fonctionnalités.
❑ HTML 5.3 et au-delà : HTML continue d'évoluer avec des versions ultérieures, mais la spécification principale est
maintenant maintenue de manière plus dynamique, avec des ajouts et des mises à jour continues au lieu de versions
distinctes.
Conclusion :
L'évolution d'HTML est étroitement liée à l'évolution d'Internet et des technologies associées. HTML5, en particulier, a
grandement contribué à rendre le développement web plus riche en fonctionnalités et plus flexible. Il est devenu la base des
sites web modernes et des applications web.

Les bases du HTML
Les termes "balise", "attribut" et "élément" sont des concepts fondamentaux en HTML, et ils jouent un rôle essentiel dans la
structuration et la présentation des pages web. Voici ce que chacun de ces termes signifie :
Balise :
❖ Les balises sont des éléments de base du langage HTML, elles sont délimitées par les signes ("<" et ">") qui indiquent au
navigateur web comment afficher le contenu.
❖ Chaque balise a une fonction spécifique.
❖ La balise de fermeture a le même nom que la balise d'ouverture, mais elle est précédée d’un slash (/) et ne comporte jamais
d'attribut.
❖ Les balises servent à donner des instructions :
▪ mise en forme du texte.
▪ insertion d'objets multimédias comme les images, les vidéo et les audios.
▪ insertion de liens hypertextes
▪ insertion d'éléments actifs : javascript, animations flash, ...
❖ Les balises peuvent s'écrire en minuscule ou en majuscules.
7
FSO Pr. Youssef DOUZI
Les bases du HTML : les balises
Les balises en paires : Elles s'ouvrent, contiennent du texte, et se ferment plus loin.
On distingue une balise ouvrante (<balise>) et une balise fermante (</ balise >) qui indique que la
balise se termine.
Syntaxe : < balise > Contenu </ balise >
Exemples :
▪ <p>Ceci est un paragraphe</p> ➔ La balise <p> est utilisée pour créer un paragraphe. La balise
ouvrante est <p> et la balise fermante est </p>.
▪ <h1> pour un titre de premier niveau</h1>
▪ <a …> pour créer un lien hypertexte</a>
Les bases du HTML : les balises
Les balises orphelines: Ce sont des balises qui servent le plus souvent à insérer un élément à
un endroit précis
Syntaxe : < balise/ > Ou <balise >
NB : Le / (slash) de fin n'est pas obligatoire, les webmasters recommandent de rajouter ce / à

la fin de la balise.
Exemple :
<image> Ajouter une image
<hr> Pour une ligne horizontale (Horizontal Row)
<br> Retour
FSO
à la ligne Pr. Youssef DOUZI 9
Les bases du HTML : les attributs
Un attribut est une information supplémentaire qui peut être ajoutée à une balise. Les attributs sont
toujours écrits dans la balise ouvrante, après le nom de la balise, et sont séparés par des espaces.
Une balise peut avoir un ou plusieurs attributs.
Syntaxe :
<balise attribut="valeur"> contenu </balise>
Exemple :
<a href="https://example.com"> Ceci est un lien </a> ➔ L'attribut href est utilisé pour définir
l'URL d'un lien.
<img src="image.jpg" alt="Une image"> ➔ Dans la balise <img>, l'attribut src spécifie
l'emplacement de la source de l'image, et l'attribut alt fournit un texte alternatif pour l'image
(fournir une description d'une image.).
Les bases du HTML : les Éléments
Un élément est une combinaison d'une balise et de son contenu. Le contenu d'un élément
peut être du texte, des images, des liens, etc.
Syntaxe :
<Nom_de_balise > Contenu </ Nom_de_balise >
Exemple :
<p> Ceci est un paragraphe </p> ➔ L'élément <p> est utilisé pour créer un paragraphe. Le
contenu de l'élément <p> est le texte "Ceci est un paragraphe".

Structure d'une page HTML
HTML 5
début du
document
Entête du
document
Corps du
document
Fin du
document
Structure d'une page HTML
<!DOCTYPE html>
Définition de type de document / déclaration de la version HTML utilisée
<html > Début de la page HTML

<head>
Entête de la page, contenant des informations importantes pour les navigateurs et
moteurs de recherche….
<title>Mon site Web</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
Script, style…
</head>
<body>
Le corps qui contient tous les éléments qui s’affichent dans la fenêtre du navigateur
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe</p>
<img src="image.jpg" alt="Une image">
….
<body> 13
FSO </html> Fin de la page html Pr. Youssef DOUZI
Structure de base d'une page HTML
▪ <DOCTYPE > : Elle est indispensable car c'est elle qui indique qu'il
s'agit bien d'une page web HTML.
▪ <html> </html> : C'est la balise principale du code. Elle englobe tout le
contenu de votre page.
▪ <head> </head> L'en-tête : Cette section donne quelques informations
générales sur la page, comme son titre, l'encodage (pour la gestion des
caractères spéciaux), mots-clés, etc.

▪ <title> </title> Cette balise définit le titre de la page Web.
▪ <meta charset="utf-8" name="…" content="…"/> Cette balise fournit des
informations sur la page Web, telles que l'encodage utilisé et la description.
• Utf-8: est un encodage de caractères qui est utilisé pour représenter tous les
caractères du monde dans un seul format. Il est l'encodage de caractères le plus
utilisé sur le Web et dans les applications logicielles.
▪ <link> : Cette balise définit la relation entre le document actuel et une ressource
externe. Elle est le plus souvent utilisée pour créer un lien vers des feuilles de
style externes ou pour ajouter un favicon à votre site Web.
<body> </body> Le corps : C'est là que se trouve la partie principale de la
page. Tout ce que nous écrirons ici sera affiché à l'écran. C-à-d., le contenu de la
page Web, tel que du texte, des images, des liens, etc.
Commentaire : Il est visible dans le code source mais ignoré par le navigateur il
sert à expliquer le code.


Remarque :
❖ Une balise qui est ouverte à l'intérieur d’une autre doit aussi être fermée à
l'intérieur.
❖ Les balises sont ouvertes et refermées dans l’ordre ( <b><i></i></b> et non
<b><i></b></i> )
▪ <html><body></body></html> : correct.
▪ <html><body></html></body> : incorrect, les balises s'entremêlent.
❖ Les noms des éléments et des attributs sont souvent écrits en minuscule, mais
<head> et <HeAd> sont équivalents.
Récapitule

Le corps de la page Web
Lancez bloc-notes et recopiez le texte suivant:
<!DOCTYPE html>
<html >
<head
<title>Ma première page</title>
</head>
<body>
Bonjour Tout le monde.
</body>
</html>
Enregistrez le fichier texte sous le nom page1.html.
Cliquez sur page1.html pour afficher la page web.
Exemple d’une page Web



page1.html
FSO 23
Organisation du texte : Utilisation des couleurs
❑ La balise <body> accompagnée d'attributs permet de définir la couleur du fond de la page ainsi que
celle du texte.
❑ Les couleurs sont définies par leurs noms (White, Black, Red, Green, Cyan, Magenta, Gray, Silver,
Gold, Orange, Yellow et Blue…) ou par de valeurs RGB, de valeurs HEX(hexadécimaux), les
valeurs HSL, de valeurs RGBA et de valeurs HSLA.
❑ Le code suivant donnera un texte bleu sur fond tomato (un rouge vif) . RVB (255, 99, 71)
Par nom : <body bgcolor= "tomato" text= "blue">

Par de valuers : HEX <body bgcolor="#ff6347" text="#0000FF">
Par de valuers : RGB <body bgcolor="RVB (255, 99, 71)" text="RVB (255, 99, 71)">
Par de valuers : HSL <body bgcolor="hsl(9, 100 %, 64 %)" text="hsl(9, 100 %, 64 %)">
…

Organisation du texte : Utilisation des couleurs
La balise <body> accepte les principaux attributs suivants :
<body attribut_1="valeur_1" attribut_n=" Valeur_n">
❑ Les attributs possibles:

• bgcolor: couleur de fond de la page. ( #RRGGBB (en hexa) ou nom de la couleur )
• text: couleur du texte.
• background: la source d’une image de fond.
• link: couleur des liens hypertexte non encore visités.
• vlink: couleur des liens hypertexte déjà visités.
• alink: couleur des liens quand l'utilisateur clique dessus.

Organisation du texte : Les paragraphes
❑ La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à
l'intérieur de paragraphes. Le langage HTML propose justement la balise <p>
pour délimiter les paragraphes.
❑ Un paragraphe est délimité par la balise <p> et </p>.
<p> Bonjour et bienvenue sur mon site </p>
❑ On écrit le contenu de notre page web entre les balises <body> et </body>

Organisation du texte
<!DOCTYPE html>
<html>
<head>
<title> titre </title>
<meta charset= " UTF-8 " >
</head>
<body>
<p>
Bonjour et bienvenue sur mon site
</p>
</body>
</html>
page2.html

Organisation du texte : Retour à la ligne
C'est une balise orpheline qui sert juste à indiquer qu’on doit aller à la ligne : <br />. Vous devez
obligatoirement la mettre à l'intérieur d'un paragraphe.
<p>
Bonjour et bienvenue sur mon site 1 <br/> Bonjour et bienvenue sur mon site 2
</p>
Ce qui donne :
Bonjour et bienvenue sur mon site1
Bonjour et bienvenue sur mon site2

Organisation du texte : Formatage de texte
La balise <pre> permet de conserver le texte tel que vous le saisissez
<pre>
La balise < pre > permet de conserver
le texte tel que vous le saisissez.
Ici un retour à la ligne sans utiliser la balise br
</pre>
Ce qui donne :
La balise < pre > permet de conserver
le texte tel que vous le saisissez.
Ici un retour à la ligne sans utilisé la balise br
Organisation du texte : Les titres
Il existe 6 balises permettant de représenter les titres de sections, par importance décroissante :
<h1> Titre de niveau 1 </h1> : Titre très important. (Titre de la page)
<h2> Titre de niveau 2 </h2> : Titre important. (Titre de section principale)
<h3> Titre de niveau 3 </h3> : Titre un peu moins important (sous-titre, titre de sous-section)
<h4> Titre de niveau 4 </h4> : Titre pas trop important (Titre de sous-sous-section).
<h5> Titre de niveau 5 </h5> : Titre pas important.
<h6> Titre de niveau 6 </h6> : Titre vraiment pas important du tout.

❑ La balise <B> pour mettre le texte en gras.
<b> Ce texte est en Gras </b> Ce texte est en Gras
❑ La balise <U> pour souligner un texte.
<u> Ce texte est souligné </u> Ce texte est souligné
❑ La balise <I> pour mettre le texte en italique.
<I> Ce texte est en Gras </I> Ce texte est en Italique
❑ la balise <em> a pour conséquence de mettre le texte en italique.

NB :
❑ La balise <em> est utilisée pour indiquer une emphase ou une importance
particulière, tandis que La balise <i> est principalement utilisée pour la mise en
forme visuelle en italique sans spécifier de signification particulière.
❑ Il est généralement recommandé d'utiliser La balise <em> lorsque vous souhaitez
mettre en avant un contenu important ou significatif, tandis que La balise <i> est plus
appropriée pour la mise en forme esthétique.

❑ La balise <strong> est utilisée pour définir un texte ayant une forte importance. Le contenu à
l'intérieur est généralement affiché en gras .
<strong> Ce text est important !</strong>
Ce text est important !

❑ La balise <s> ou <strike> barre le texte.
<s> Ce texte est barré</s> <br/> <strike> Ce texte est barré</strike>
Ce texte est barré

Ce texte est barré

Organisation du texte : Marquer le texte
La balise <mark> permet de faire ressortir visuellement une portion de texte.
<p> Ceci est mon <mark> premier test<mark/> </p>
Ce qui donne :
Ceci est mon premier test

Organisation du texte : Lignes horizontale
La balise <hr> permet de tracer une ligne horizontale.
<h1>Les principaux langages du Web</h1>
HTML est le langage de balisage standard pour la création de pages Web. HTML décrit la structure d'une page
Web et se compose d'une série d'éléments. Les éléments HTML indiquant au navigateur afficher comment le
contenu.
<hr/>
CSS est un langage qui décrit comment les éléments HTML doivent être affichés à l'écran, sur papier ou sur
d'autres supports. CSS enregistre beaucoup de travail, car il peut contrôler la mise en page de plusieurs pages
Web à la fois.
<hr/>
JavaScript est le langage de programmation du HTML et du Web. JavaScript peut modifier le contenu HTML et
les valeurs d'attribut. JavaScript peut changer le CSS. JavaScript peut masquer et afficher des éléments HTML, et
bien plus encore.


La balise <hr> permet de tracer une ligne horizontale.
▪ <hr/>Trait horizontal (centré par défaut)
▪ <hr width="x%" />Largeur du trait en % (100 % = largeur de la page)
▪ <hr width="x" />Largeur du trait en pixels
▪ <hr size="x "/>Hauteur du trait en pixels
▪ <hr align="center" />Trait centré (défaut)
▪ <hr align="left "/>Trait aligné à gauche
▪ <hr align="right"/>Trait aligné à droite
▪ <hr noshade/>Trait sans effet d'ombrage
Exemple :
<hr align="left" width="50%" size = "4" />

Organisation du texte : Mettre le texte en exposant et indice
La balise <sup> met le texte en exposant alors que la balise <sub> le met en
indice.
X <sup> 2 </sup> <br/> H <sub> 2 </sub> O
Ce qui donne :
X2
H2O

Organisation du texte : Les listes
❑ Les listes nous permettent souvent de mieux structurer notre texte et

d'ordonner nos informations.
❑ Il existe deux types de listes :
▪ les listes non ordonnées ou listes à puces ;
▪ les listes ordonnées ou listes numérotées ou encore énumérations

Organisation du texte : Listes non ordonnées
La balise <ul> permet de structurer notre texte, les éléments de la liste s’écrivent entre <li> et
</li>.
<ul> Ce qui donne

<li> Elément 1 </li> • Elément 1
<li> Elément 2 </li>
• Elément 2
<li> … </li>
</ul> •…
Les options suivantes sont possibles (attributs) :
▪ Type =circle : pour un repérage type ○. (par défaut)
▪ Type=disc : pour une liste non numérotée ●.
▪ Type =square : pour un repérage type □.
Organisation du texte : Listes ordonnées ou listes numérotées
La balise <ol> permet de structurer notre texte, les éléments de la liste s’écrivent entre
<li> et </li>.
<ol>
Ce qui donne :
1. Elément 1
2. Elément 2
</ol>
Les options suivantes sont possibles (attributs) :
▪ Type = 1 : pour une liste numérotée 1, 2, 3,…(par défaut)
▪ Type = A : pour un repérage type A, B, C, …
▪ Type = a : pour un repérage type a, b, c, …
▪ Type = I : pour une liste numérotée I, II, III, …
▪ Type = i : pour une liste numérotée i, ii, iii, …
FSO ▪ start= " nombre ". Exemple start= " 10 " 41
Pr. Youssef DOUZI
Organisation du texte : liste de description ou de définition
Ce type de liste beaucoup plus rare. Elle fait intervenir les balises <dl> (pour délimiter la
liste), <dt> (pour délimiter un terme) et <dd> (pour délimiter la définition de ce terme).
<dl>
<dt> Terme 1
<dd> Description du terme1 </dd>
</dt>
</dl>
Ce qui donne :
Terme 1
Description du terme1
Les Liens :Un lien vers un autre site (liens externes)
La balise <a> avec son attribut href permet de faire un lien soit vers un autre site (internet) soit une page de
note site.
<a href= "chemin vers une autre site ou autre page" > un titre pour le lien qui sera apparait en bleu et
souligné </a>
Exemple :
<p>Bonjour pour accéder au site de la FSO <br/>
<a href="http://www.fso.ump.ma/" > cliquez ici (FSO) </a></p>
Ce qui donne :
Bonjour pour accéder au site de la FSO
cliquez ici (FSO)

Les liens : Un lien vers une autre page (liens internes)
On suppose que vous avez deux page et vous êtes dans la page1, les deux pages se
trouvent dans le même dossier (site_web1), donc pour accéder à la page2 vous aller faire :
Page1.html
<p>Bonjour pour accéder à la page2 <a href= "page2.html">cliquez ici </a></p>
Ce qui donne : Bonjour pour accéder à la page2 cliquez ici (FSO)

Page2.html : La page 2 (page d'arrivée) affichera simplement un message pour indiquer
que l'on est bien arrivé sur la page 2.
<h1>Bienvenue sur la page 2 </h1>

Les liens
NB:
❑ Si les pages sont situées dans un sous dossier par exemple dans le dossier pages il
faudra indiquer le chemin pour accéder aux pages soit
<a href= "pages/page1.html"> page1 </a>
❑ Si votre fichier cible est placé dans un dossier qui se trouve « plus haut » (dossier
parent) dans l'arborescence, il faut écrire deux points soit
<a href= "../page1.html"> page1 </a>

Les liens

Les liens : Un lien vers une ancre
❑ Une ancre vous permet de naviguer à l'intérieur d'une même page

HTML lorsqu'elle est très longue. C.-à-d., elle permet d’atteindre
un endroit précis dans le document (la partie qui vous intéresse) .
❑ Pour ce faire il suffit rajouter un attribut identifiant (id) à la
balise.

Les liens : Un lien vers une ancre
Aller directement au Titre1<br/> Aller directement au Titre1
<a href= "#Titre1" > Titre1 </a><br/> Titre1
Aller directement Titre2<br/> Aller directement au Titre2
<a href= "# Titre2" > Titre2</a> Titre2
….. …..
….. …..
<h1 id= " Titre1" > Titre1 </h1> Titre1
<p> ... beaucoup de texte ... </p>
... beaucoup de texte ...
<h2 id= " Titre2" > Titre2 </h2>
Titre2
<p> ... beaucoup de texte ... </p>
FSO ... beaucoup de texte ... 48 Pr. Youssef DOUZI
Les liens : Un lien qui affiche une infobulle au survol
L'attribut title affiche une bulle d'aide lorsqu'on pointe sur le lien.
Bonjour pour accéder au site de la FSO <br/>

<a href="http://www.fso.ump.ma/" title ="Site de la FSO"> Cliquez ici </a>
Ce qui donne
Bonjour pour accéder au site de la FSO
Le lien (href)
Cliquez ici
Le titre (title)

Les liens : Afficher le site dans une autre fenêtre
Il est possible de « forcer » l'ouverture d'un lien dans une nouvelle fenêtre. Pour cela,
on rajoutera target="_blank" à la balise <a> :
<p>
<a href="http://www.fso.ump.ma/" title ="Site de la FSO" target="_blank"> Cliquez ici </a><br/>
Le site s'affichera dans une autre fenêtre.
</p>

Les liens : Un lien pour envoyer un e-mail
Vous avez la possibilité de vous faire envoyer un e-mail en utilisant les liens de
type mailto comme indiquez ci-dessous.
<p><a href="mailto:votremail@ump.ac.ma">Envoyez-moi un e-mail</a></p>
Ce qui donne :
Envoyez-moi un e-mail

Les liens : Un lien pour télécharger un fichier
Vous avez la possibilité de télécharger un fichier.
<p><a href="chemin_fichier/nom_fichier.extension">Télécharger le fichier</a></p>
Ce qui donne :
Télécharger le fichier
NB: L’extension peut être soit : .pdf, .zip, .txt…

Les images : Insérer une image
❑ la balise orpheline <img/> permet l’insertion d’une image.
<img src= "chemin_image/image.extension" alt="description" title="une infobulle"

align=[bottom,middle,left,right,top] border=x />
❑ Extensions : .jpeg ou .jpg, .png, .gif,…

❑ La <img>balise a deux attributs obligatoires :
▪ src : Spécifie le chemin d'accès à l'image.
▪ alt : Spécifie un texte alternatif pour l'image, si l'image, pour une raison
quelconque, ne peut pas être affichée
Les images : Insérer une image
❑ On peut trouver d’autres attributs comme :
▪ width : Spécifier la largeur d’une image
▪ height : Spécifier la hauteur d’une image
▪ hspace : Espacement horizontal
▪ vspace : Espacement vertical
▪ border : Bordure de l’image
▪ align :
• bottom : Image en bas
• middle : Image au milieu
• top : Image en haut
• left : Image à gauche
• right : Image l’image à droite
❑ NB : Les attributs bordure et align ne sont pas supporté en HTML5. Il faut utiliser les
propriétés CSS. 54
Pr. Youssef DOUZI
FSO
Les images
Exemple :
<img src= "nature.jpg" alt=" Rivière de montagne – Photo de Paysag - Nature " title= " image de nature" />
Ce qui donne :
le cas normale
le cas d'échec
Pr. Youssef DOUZI 55

FSO
Les images : Images avec un lien
❑ Pour créer une image avec un lien en HTML5, il faut utiliser les balises <img> et <a>.
❑ La balise <img> est utilisée pour insérer l'image, tandis que la balise <a> est utilisée pour
créer le lien.
❑ Voici un exemple pour créer une image avec un lien :
<a href= " https://example.com" title="Ceci est un lien image HTML">

<img alt="texte alternatif pour le lien image" src=" image.jpg" </a>
❑ Dans cet exemple, l'image est un fichier image.jpg situé dans le même répertoire que le
fichier HTML. Le lien pointe vers le site web https://example.com.
❑ Lorsque l'utilisateur clique sur l'image, il sera redirigé vers le site web https://example.com.

Les tableaux : Balise <table>
❑ La balise <table> définit un tableau HTML.

❑ Un tableau HTML se compose d'un élément <table> et d'un ou plusieurs éléments
<tr> , <th> et <td> .
❑ L'élément <tr> </tr> définit une ligne de tableau, l'élément <th> </th> définit un
en-tête de tableau et l'élément <td> </td> définit une cellule de tableau.
❑ Un tableau HTML peut également inclure des éléments <caption> , <colgroup> ,
<thead> , <tfoot> et <tbody> .

Les tableaux : Balise <table>
td
(cellules)
th
(en-tête) Colonne1 Colonne2 colonne3
cellule1 cellule2 cellule3

tr
(lignes)
cellule4 cellule5 cellule6

<!DOCTYPE html>
<html>
<head>
Les tableaux : Exemple
<title>titre de la page</title>
<meta charset=UTF-8" />
</head>
<body>
<table boreder=1>
<caption>Tableau Etudiant</caption>
<tr>
<th >Colone 1</th>
<th> Colone 2 </th>
Colonne1 Colonne2 Colonne3
<th> Colone 3 </th>
</tr>
<tr> cellule1 cellule2 cellule3
<td> cellule 1 </td>
<td > cellule 2</td>
<td > cellule 3 </td> cellule4 cellule5 cellule6
</tr>
<tr>
<td > cellule 5 </td>
</tr>
</table>
</body>
</html> FSO Pr. Youssef DOUZI 59
Les tableaux : Sans bordures
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" /> Affichage sans Tableau Etudiant
</head>
<body> bordure Prénom Module
<table >
Ahmed SMI
<tr> Mohammed SMP
<th >Prénom</th>
<th>Module</th>
</tr>
<tr>
<td>Ahmed</td>
<td >SMI</td> NB : On peut rajouter les bordeurs soit avec les
</tr>
<tr> attributs de la balise table ou bien avec le CSS.
<td >Mohammed</td>
<td >SMP</td>
</tr>
</table>
</body>
Les tableaux : Avec bordures (balise Border)
<!DOCTYPE html>
<html>
<head>
</head>
Affichage avec
<body>
bordure
<table border=1>
<tr>
<th >Prénom</th>
<th>Module</th>
</tr>
<tr>
<td>Ahmed</td> NB : Pour avoir l’affichage suivant, il faut ajouter la
<td >SMI</td>
</tr> balise border dans la table <table>.
<tr>
<td >Mohammed</td> Exemple : <table border=1>
<td >SMP</td>
</tr>
</table>
</body>
Les tableaux : Avec bordures (code CSS)
<!DOCTYPE html>
<html>
<head>
Affichage sans
bordure
</head>
<body>
<table >
<tr>
<th >Prénom</th>
<th>Module</th> NB : Pour avoir l’affichage suivant, il faut ajouter le
</tr>
<tr> code CSS (bordure) dans la partie head :
<td>Ahmed</td>
<td >SMI</td> <style>
</tr>
<tr> table, th, td {
<td >Mohammed</td>
<td >SMP</td>
border: 1px solid black;
</tr> }
</table>
</body> </style>
Les tableaux : attributs de la balise <table>
❑ la balise <table> peut accueillir de nombreux attributs :
▪ border : définit, en pixels, la taille de la bordure entourant le tableau ( aussi les
cellules). ()
▪ width : définit en pixels ou en pourcentage (%) la largeur du tableau.
▪ height : définit en pixels la hauteur du tableau.
▪ cellspacing : définit en pixels ou en pourcentage (%) l'espacement entre les différentes
cellules du tableau.
▪ cellpading : définit en pixels ou en pourcentage (%) la marge interne des cellules

cellspacing
cellpading

▪ bgcolor : Cet attribut définit la couleur d'arrière-plan de toutes les cellules, soit en
hexadécimaux (code de 6 chiffres précédé d'un '#‘) comme #000000 pour le noir, soit
en spécifiant la couleur en anglais comme black, green….
▪ align : aligner (horizontalement) le contenu de la colonne :
• left = gauche (par défaut)
• right = droit
• center = centre
Pr. Youssef DOUZI FSO 65

Les tableaux : attributs de la balise <tr>
❑ La balise <tr> peut accueillir ces attributs :
▪ height : la hauteur de la ligne
▪ bgcolor : la couleur de fond des cellules de cette ligne
▪ align : aligner le contenu des cellules :
• left = toutes les cellules de la ligne sont cadrées à gauche (par défaut) ;
• center = toutes les cellules de la ligne sont centrées ;
• right = toutes les cellules de la ligne sont cadrées à droite.

Les tableaux : attributs de la balise <td>
❑ La balise <td> peut accueillir ces attributs :
▪ width : la largeur de la colonne en pixel ou en pourcentage (%) par rapport à la largeur du tableau.
▪ height : la hauteur en pixel de la colonne.
▪ bgcolor : la couleur de fond de la colonne.
▪ align : aligner (horizontalement) le contenu de la colonne :
• left = gauche
• right = droit
• center = centre
• Justify = justify
▪ valign : aligner (verticalement) le contenu de la colonne :
• middle = milieu
• top = haut
• bottom = bas FSO Pr. Youssef DOUZI 67
<!DOCTYPE HTML>
<html>
<head> Les tableaux : Exemple
<title>Exemple attributs du tableau</title>
</head>
<body >
<table width="50%" height="200" border="1"
cellpadding="2" align="center">
<tr>
<th valign="middle" bgcolor="#f6c4c5">Code Etudiant </th>
<th valign="middle" bgcolor="green">Nom</th>
<th valign="middle" bgcolor="gold">Filiére</th>
<th valign="middle" bgcolor="red">Note</th>
</tr>
<tr>
<td valign="bottom"bgcolor="#f6c4c5">H123456</td>
<td valign="top" bgcolor="green">Mohammed</td>
<td valign="middle" bgcolor="gold">SMI</td>
<td valign="bottom" bgcolor="red">14</td>
</tr>
<tr>
<td valign="top"bgcolor="#f6c4c5">H654321</td>
<td valign="bottom" bgcolor="green">Ahmed</td>
<td valign="middle" bgcolor="gold">SMA</td>
<td valign="top" bgcolor="red">12</td>
</tr>
</table>
</body>
</html>
Les tableaux : La fusion de colonnes
❑ L’attribut colspan de la balise td va aire la fusion des cellules horizontalement.
Exemple:
<!DOCTYPE html>
<html>
<body>
<table align="center" border="1" width = " 30%">
<tr> <th colspan="2">Test colspan</th> </tr>
<tr> <td>cellule 1</td>
<td >cellule 2</td>
</tr>
<tr> <td colspan="2" align= "center"> Test colspan </td> </tr>
</table>
</body>
</html>

Les tableaux : La fusion de colonnes
❑ L’attribut rowspan de la balise td va faire la fusion des cellules verticalement.
Exemple: <!DOCTYPE html>
<html>
<body>
<table border="1" align="center" width="30%">
<tr> <td rowspan="2"> Test colspan </td>
<td >Cellule 2</td>
</tr>
<tr> <td>Cellule 3</td> </tr>
<tr> <td>Cellule 4</td>
<td rowspan="2"> Test colspan </td>
</tr>
<tr> <td>Cellule 6</td> </tr>
</table>
</body>
</html>
Les tableaux : Colspan & Rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple : Colspan & Rowspan</title>
</head>
<body>
<center>
<table border="1" cellpadding="15" cellspacing="15">
<tr>
<td colspan="2"> Contenu 1</td>
<td rowspan="2">Contenu 2</td>
</tr>
<tr>
<td rowspan="2">Contenu 3</td>
<td>Contenu 4</td>
</tr>
<tr>
<td colspan="2">Contenu 5</td>
</tr>
</table>
</center>
</body>
</html>

Les tableaux : Titre du tableau la balise
❑ La balise <caption> permet d’attribuer un titre au tableau, cette balise se place tout au
début du tableau. Elle peut accueillir l’attribut align avec deux option : top et bottom.
Titre du tableau

Les tableaux : Diviser un gros tableau
❑ Diviser un gros tableau :
▪ <thead></thead> : définit les cellules d’entête en haut directement, peut contenir <tr> et <th> (<th> au
lieu de <td> )
▪ <tbody></tbody> : définit les cellules de corps, peut contenir <tr> et <td> .
▪ <tfoot></tfoot> : définit les cellules de pied directement en bas, peut contenir <tr> et <td>.
❑ Il est conseillé d'écrire les balises dans l'ordre suivant :
1. <thead>
2. <tfoot>
3. <tbody>
❑ Le navigateur se chargera d'afficher les éléments au bon endroit
Remarque : on utilise cette division surtout si votre tableau est assez gros et que vous avez besoin de l'organiser
plus clairement.
❑ On peut diviser un gros tableau en trois parties avec les trois balises suivantes :
▪ <thead></thead> L'en-tête (en haut)
▪ <tbody></tbody> Le corps (au centre)
▪ <tfoot></tfoot> Le pied du tableau (en bas)
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

<!DOCTYPE html> <tbody>
<html> <tr>
<head> <td>Module 1</td>
<title>Titre du document</title> <td>14</td>
</head> </tr>
<body> <tr>
<table border ="1" width="30%"> <td>Module 2</td>
<thead > <td>19</td>
<tr> </tr>
<th>Module</th> </tbody>
<th>Note</th> </table>
</tr> </body>
</thead> </html>
<tfoot>
<td>Moyenne</td>
<td>16,50</td>
</tr>
</tfoot>
Les frames : Frameset
❑ La balise <frame> était utilisée dans HTML 4.01 pour créer des zones de navigation dans une page web,
permettant de diviser une page en plusieurs cadres indépendants.
❑ Cette balise est utilisée conjointement avec la balise frameset, qui permet de définir la disposition des frames
dans la page(Division de la page).
▪ x = largeur en nombre de pixels.
<frameset rows/cols=" x,y%,*,..."> … </frameset> ▪ y%= largeur de la cellule en pourcentage de l'écran .
▪ *= largeur restante
❑ <frameset rows="x%,y%,*,..."> Division horizontale de la fenêtre en %
❑ <frameset cols="x%,y%,..."> Division verticale de la fenêtre en %
Exemple :
<frameset cols="50%,50%"> Diviser la page en deux colonnes (50%, 50%)
Attention : La balise <frameset> replace <body> 76

Pr. Youssef DOUZI FSO
Les frames : attributs frame
❑ L'attribut " src " définit l'URL de la page web qui doit être affichée dans le cadre.Il indique
quel contenu sera chargé à l'intérieur du cadre. Par exemple : <frame src="page.html">.
❑ L'attribut " name " définit un nom pour le cadre. Le nom du cadre peut être utilisé pour
référencer le cadre dans d'autres éléments HTML. Par exemple : <frame
name="nom_du_cadre">.
❑ Les attributs " marginwidth " et " marginheight " spécifient les marges (en pixels) autour
du contenu à l'intérieur du cadre. Par exemple : <frame marginwidth="10"
marginheight="5">.
❑ L'attribut " frameborder " : Cet attribut contrôle si des bordures sont affichées autour du
cadre. Vous pouvez le définir sur "0" pour masquer les bordures et sur "1" pour les afficher.
Par exemple : <frame frameborder="1">. FSO 77 Pr. Youssef DOUZI
Les frames : attributs frame
❑ L'attribut "scrolling" était utilisé pour définir si une barre de défilement devait être affichée dans un cadre
(frame) ou non. Il pouvait avoir l'une des trois valeurs possibles :
▪ "yes" : Affiche toujours une barre de défilement, même si le contenu du cadre ne nécessite pas de
défilement.
▪ "no" : N'affiche jamais de barre de défilement, même si le contenu du cadre dépasse la taille du cadre.
▪ "auto" : Affiche une barre de défilement uniquement si le contenu du cadre dépasse la taille du cadre.
❑ L'attribut "noresize" était utilisé dans les framesets HTML pour empêcher le redimensionnement des cadres
(frames) par les utilisateurs. Cela signifie que lorsque "noresize" était défini, les utilisateurs ne pouvaient pas
redimensionner les cadres en faisant glisser les bordures entre les cadres.
❑ Exemple :
<frameset rows="50%,50%">
<frame src="frame1.html" scrolling= "no">
<frame src="frame2.html" scrolling="yes" noresize>
</frameset>
50% 50%
<!DOCTYPE html>
<html>
<head>
<title>Titre du
document</title>
</head> Page1.html Page2.html
50% 50%
<frameset cols="50%,50%">
<frame src= "page1.html">
</frameset>
</html>

<!DOCTYPE html> 50% 50%
<html>
<head>
<title>Titre du document</title>
</head> Page2.html 50%
50%
<frameset cols="50%,50%">
Page1.html
<frameset rows="50%,50%"> 50%
<frame src= "page3.html"> Page3.html
50%
50%
</frameset>
</frameset>
</html>
FSO
<!DOCTYPE html>
<html>
<head>
<title>Titre du
document</title> Page1.html
Page1.html Page2.html
</head> 40%
30% 30%
(Le reste * = 40%)
<frameset cols="30%,*,30%">
</frameset> 30% 100-(30+30)=40% 30%
</html>

Page.html
<!DOCTYPE html>
Contenu page 1 30%
<html>
<head>
<title>Titre du document</title>
</head>
<frameset rows="30%,70%">
<frame src= "page1.html"></frame> Contenu page
Contenu page 3 Contenu page 4
<frameset cols="30%,*,30%"> 2 70%
<frame src= "page2.html"></frame>
<frame src= "page3.html" name="page3"></frame>
<frame src= "page4.html"> </frame>
</frameset>
</ frameset>
</html> 30% 40% 30%
❑ On peut afficher directement le contenu des différentes pages dans le nouveaux onglets avec des liens (url), et l’attribut
target. (Si on n’ajoute pas l’attribut target l’affichage sera dans la même partie (frame) ➔ Target =" _self ").
<!DOCTYPE html>
<html> <head>
<title>Titre du document</title> <html >
</head> <body>
<frameset rows="30%,70%"> Page1.html <h1> le contenu page 1 </h1>
Page.html
<frame src= "page1.html"></frame> </body>

<frameset cols="30%,*,30%"> </html>
<frame src= "page3.html" > </frame> <html >
<frame src= "page4.html"> </frame>s
<body>
</frameset>
Page3.html <h1> le contenu page 3 </h1>
</frameset>
</body>
</html>
</html>
<html >
<body>
<html >
Page2.html
<h1> le contenu de page 2 </h1>

<a href="page1.html" target="_blank"> contenu de page 1</a> <br/>
<body>
<a href="page2.html" target="_ blank "> contenu de page 2</a> <br/> Page4.html <h1> le contenu page 4 </h1>
<a href="page3.html" target="_ blank "> contenu de page 3</a> <br/> </body>
<a href="page4.html" target="_ blank "> contenu de page 4</a>
</html>
</body> FSO 83
</html> Pr. Youssef DOUZI
Les frames : Iframe
L’affichage sera dans un nouvel onglet

FSO
❑ On peut afficher directement le contenu des différentes pages dans frame 3 avec des liens (url), et les attributs
name et target. (name dans la page pricipale page.html et target dans page2.html)
<!DOCTYPE html>
<html> <head>
<title>Titre du document</title> <html >
</head> <body>
<frameset rows="30%,70%"> Page1.html <h1> le contenu page 1 </h1>
Page.html
<frame src= "page1.html"></frame> </body>

<frameset cols="30%,*,30%"> </html>
<frame src= "page3.html" name="page3"> </frame> <html >
<frame src= "page4.html"> </frame>s
<body>
</frameset>
Page3.html <h1> le contenu page 3 </h1>
</frameset>
</body>
</html>
</html>
<html >
<body>
<html >
Page2.html
<h1> le contenu de page 2 </h1>

<a href="page1.html" target="page3"> contenu de page 1</a> <br/>
<body>
<a href="page2.html" target="page3"> contenu de page 2</a> <br/> Page4.html <h1> le contenu page 4 </h1>
<a href="page3.html" target="page3"> contenu de page 3</a> <br/> </body>
<a href="page4.html" target="page3"> contenu de page 4</a>
</html>
</body> FSO 85
</html> Pr. Youssef DOUZI
L’affichage sera dans cette partie

FSO
Remarque :
La balise <FRAMESET> est obsolète dans les normes HTML modernes,
comme HTML5, et n'est plus recommandée. Au lieu de cela, il est recommandé
d'utiliser des techniques plus modernes, telles que les balises <iframe> pour
l'intégration de contenu externe ou les styles CSS pour la mise en page.

Les frames : Iframe
❑ La balise <iframe> en HTML est utilisée pour incorporer (intégrer) une autre page web ou un contenu
externe dans une page web. Cette balise permet d'afficher le contenu d'une autre page, généralement dans
une petite fenêtre à l'intérieur de la page principale. Elle est similaire à la balise frame, mais elle est plus
flexible, plus facile et utilisé pour créer des pages web riches et interactives.
❑ Voici quelques attributs couramment utilisés avec la balise <iframe> :
▪ src : L'URL de la page ou du contenu que vous souhaitez intégrer.
▪ width et height : La largeur et la hauteur de l'iframe en pixels ou en pourcentage.
▪ frameborder : Pour afficher ou masquer la bordure de l'iframe. Les valeurs possibles sont yes, no et 0.
▪ scrolling : Pour activer ou désactiver les barres de défilement dans l'iframe. Les valeurs possibles sont
yes, no et auto.

FSO
Les frames : Iframe
❑ Voici quelques exemples d'utilisation des iframes :
▪ Intégrer une vidéo YouTube dans une page web
▪ Intégrer une carte Google Maps dans une page web
▪ Intégrer un formulaire de contact provenant d'un autre site web
▪ Créer un lecteur audio personnalisé
▪ Créer un éditeur de texte en ligne
▪ Des documents PDF,…
<p>Iframe 1<p>
<iframe src=" [Lien, Doc, Vidéo,Carte, …]" width="100%" height="300"></iframe>
<p>Iframe 2<p>
<iframe src=" [Lien, Doc, Vidéo,Carte, …]" " width="100%" height="300" > </iframe>
Les frames : Iframe - Exemple
<html >
<body>
<!DOCTYPE html>
<html>
<body>
<br><br>
<h1 align="center">Exemple iframe </h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3282.109782513488!2d-
1.902191024257635!3d34.6519303229371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd787cbcbec59e59%3A0x83957ae60b188453!2sFacult%C3%A9%20des
%20Sciences%20d'Oujda!5e0!3m2!1sfr!2sma!4v1697538448780!5m2!1sfr!2sma" width="600" height="450" loading="lazy">
</iframe>

<iframe src="C:\Users\pc\Desktop\Cours DOUZI Youssef\Chapitre 2_partie 1_Cours_Tech_Web.pdf" width="340" height="450" loading="lazy"></iframe>
<iframe width="500" height="450" src="https://www.youtube.com/embed/5-ZPMWWLyUo?si=32MIkhJmQNlkpLOe" title="YouTube video player"
frameborder="0">
</iframe>
</body>
</html>

Les frames : Iframe
Carte Google Maps Document PDF Vidéo YouTube

Les Formulaires: La balise forme
❑Un formulaire HTML est un élément qui permet aux utilisateurs de fournir des
informations à un serveur web. Les formulaires sont utilisés pour collecter des
données, telles que des noms, des adresses électroniques, des numéros de
téléphone, des commentaires, etc.
<form action="page_traitement.php" method="post">


</form>

❑ La balise <form> est un élément de base pour la création de formulaires HTML. L'élément form a les attributs suivants :
❖ name : le nom unique de la formulaire dans la même page.
❖ action : spécifie l'URL du script serveur qui recevra et traitera les données du formulaire lorsqu'il est soumis. Il
peut s'agir d'un fichier PHP, d'un script Python, d'une URL, etc.
❖ method : Définit la méthode utilisée pour envoyer les données du formulaire au serveur web. Les valeurs possibles
sont get et post.
▪ Get :
• Les données du formulaire sont visibles dans la barre d'adresse du navigateur et dans l'historique du
navigateur.
• La taille des données du formulaire est limitée à 2048 caractères.
▪ Post:
• Les données du formulaire sont cachées.
• La taille des données du formulaire n'est pas limitée 93
❑ Les éléments suivants peuvent être utilisés dans les formulaires HTML :
❖ Champs de saisie : Les champs de saisie sont utilisés pour collecter des données de
l'utilisateur. Les types de champs de saisie courants sont les suivants :
▪ input type="text" : Un champ de saisie de texte simple.
▪ input type="email" : Un champ de saisie d'adresse électronique.
▪ input type="password" : Un champ de saisie de mot de passe.
▪ input type="number" : Un champ de saisie de nombre.
▪ input type="radio" : Un bouton radio.(Choix unique)
▪ input type="checkbox" : Une case à cocher.(Choix multiples)
▪ input type="file" : Un champ de saisie de fichier.
❖ Boutons : Les boutons sont utilisés pour soumettre les données du formulaire ou pour
effectuer une action. Les types de boutons courants sont les suivants :
▪ input type="submit" : Un bouton qui soumet les données du formulaire(envoyer).
▪ input type="reset" : Un bouton qui réinitialise les données du formulaire (Effacer).
▪ button type="button" : Un bouton qui exécute une action, telle que l'ouverture d'une
nouvelle fenêtre.
❖ Liens : Les liens peuvent être utilisés pour soumettre les données du formulaire. Pour ce faire,
définissez l'attribut action du lien sur l'URL du serveur web qui traitera les données du
formulaire.

Les Formulaires: La balise label
❖ La balise <label> est utilisée pour créer une étiquette pour un élément de
formulaire. (un libellé au champs)
❖ Une étiquette est un texte qui décrit un élément de formulaire et qui est utilisé
pour indiquer à l'utilisateur ce qu'il doit saisir dans le champ.
❖ La balise <label> est associée à un élément de formulaire en utilisant l'attribut
for.
❖ L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément de
formulaire.

Les Formulaires: Exemples
❖ Champs de saisie :

<label> Description_champ </label> : <input type="email | password | number | radio | checkbox | file " name="nom_champ" >
</form>
❖ Boutons :

<label> Description_Boutton </label> : <input type="submit | reset | button " name="nom_champ" >
</form>
❖ Liens :
<a href="page_traitement.php" action="form_handler.php" method="post"> Envoyer </a>

Les Formulaires: Exemple
<!DOCTYPE html>
<html>
<head>
<title>Page de connexion</title>
</head>
<body>
<h1>Connexion</h1>
<form action="login.php" method="post">
<label for="username">Nom d'utilisateur :</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Mot de passe :</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Se connecter">
</form>
</body>
</html>
Les Formulaires: attributs
❑ On peut trouver d’autres attributs, tels que :
▪ Value : permet de spécifier la valeur par défaut d’un champ.
▪ Name : permet de donner un nom à un élément de formulaire.
▪ Required ; L'attribut required est utilisé pour rendre un champ obligatoire. Si un champ est obligatoire,
l'utilisateur doit le remplir avant de pouvoir soumettre le formulaire. L'attribut required peut être utilisé
avec les éléments suivants : input, select, textarea.
▪ Placeholder : L'attribut placeholder est utilisé pour fournir un texte indicatif par défaut dans un champ
de formulaire. Ce texte est affiché dans le champ de formulaire avant que l'utilisateur ne saisisse une
valeur. Le texte du placeholder est effacé dès que l'utilisateur commence à saisir une valeur.

<!DOCTYPE html>
<html>
<head>
<title>Page de connexion</title>
</head>
<body>
<h1>Connexion</h1>
<form action="login.php" method="post">
<label for="username">Nom d'utilisateur *:</label><br>
<input type="text" id="username" name="username" placeholder="Username" required >
<br>
<label for="password">Mot de passe *:</label><br>
<input type="password" id="password" name="password" placeholder="password" required>
<br><br>
<input type="reset" value="Effacer">
Champ obligatoire
<input type="submit" value="Se connecter">
</form>
</body> Placeholder
Un message d'erreur s’affiche si l'utilisateur soumet le formulaire sans avoir rempli
un champ obligatoire.

Les Formulaires: types de champs de saisie
❖ Il existe d’autres types de champs de saisie, tels que :
▪ Range : permet de sélectionner un nombre avec un curseur (min="0" max="10" )
▪ Color : permet de saisir une couleur.
▪ Url : permet de saisir une url (http://....)
▪ Tel : permet de saisir un numéros de téléphone.
▪ Search : champ de recherche.
▪ Date : permet de saisir une date :
• date : pour la date (19/10/2023 par exemple)
• time : pour l'heure (20:59 par exemple)
• week : pour la semaine
• month : pour le mois
• datetime-local : pour la date et l'heure (sans gestion du décalage horaire)
102 FSO
Pr. Youssef DOUZI
<!DOCTYPE html>
<html>
<tr>
<body>
<td>Semaine : </td>
<table>
<td><input type="week" /> </td>
<form name= "formulaire" method="post" action= " traitement.html">
</tr>
<tr>
<td>Choisissez un nombre (entre 0 et 10) : </td>
<tr>
<td> <input type="range" min="0" max="10" /> </td>
<td>Mois : </td>
</tr>
<td><input type="month" /> </td>
<tr>
</tr>
<td> Choisissez une couleur : </td>
<td> <input type="color" /> </td>
<tr>
</tr>
<td> Date (jj/mm/aaaa hh:mm) : </td>
<td><input type="datetime-local" /> </td>
<tr>
</tr>
<td>Date (jj/mm/aaaa): </td>
<td><input type="date" /> </td>
</form>
</tr>
</table>
</body>
<tr>
</html>
<td> Temps (hh:mm): </td>
<td> <input type="time" /> </td>
</tr> FSO Pr. Youssef DOUZI 103


Les Formulaires: radio & checkbox
❖ La balise input avec l'attribut type défini sur radio est utilisée pour créer un bouton radio en
HTML.
❖ Les boutons radio sont utilisés pour sélectionner une seule option parmi un groupe d'options.
❖ Attributs :
▪ name : Spécifie le nom du groupe auquel appartient le bouton radio.
▪ value : Spécifie la valeur qui sera envoyée au serveur web lorsque le bouton radio est
sélectionné.
▪ id : L'attribut id est un identifiant unique pour chaque bouton radio. Il est utilisé pour lier
l'étiquette associée à l'élément en utilisant l'attribut for.
▪ checked : Spécifie si le bouton radio est sélectionné par défaut.
▪ disabled : Spécifie si le bouton radio est désactivé.
106 FSO
Pr. Youssef DOUZI
Les Formulaires: radio & checkbox
❖ La balise input avec l'attribut type défini sur checkbox est utilisée pour créer une case à cocher
en HTML. Les cases à cocher sont utilisées pour sélectionner plusieurs options parmi un
groupe d'options.
❖ Attributs :
▪ name : Spécifie le nom du groupe auquel appartient la case à cocher.
▪ value : Spécifie la valeur qui sera envoyée au serveur web lorsque la case à cocher est
sélectionnée.
▪ id : L'attribut id est un identifiant unique pour chaque case à cocher. Il est utilisé pour lier
▪ checked : Spécifie si la case à cocher est sélectionnée par défaut.
▪ disabled : Spécifie si la case à cocher est désactivée.
107 FSO
Pr. Youssef DOUZI
Les Formulaires: Radio & checkbox
<!DOCTYPE html>
<html>
<head> un seul choix
<title>Exemple de radio & checkbox</title>
</head>
<body>
<form action="form.php" method="post">
<h2>Radio</h2>
Plusieurs choix
<input type="radio" name="sexe" value="homme" checked> Homme
<input type="radio" name="sexe" value="femme"> Femme
<h2>Checkbox</h2>
<input type="checkbox" name="hobbies[]" value="sport"> Sport
<input type="checkbox" name="hobbies[]" value="musique"> Musique
<input type="checkbox" name="hobbies[]" value="lecture"> Lecture
<input type="submit" value="Envoyer">
</form>
</body>
</html> 108
Les Formulaires: select
❖ La balise <select> est utilisée pour créer une liste déroulante. Les listes déroulantes sont utilisées
pour permettre aux utilisateurs de sélectionner une option parmi un groupe d'options (plusieurs
choix disponible).(avec la balise <option>)
❖ Les attributs couramment utilisés avec la balise <select> sont les suivants :
▪ name : L'attribut name est utilisé pour identifier le menu déroulant lors de la soumission du
formulaire. Les données sélectionnées par l'utilisateur sont envoyées au serveur avec ce nom.
▪ id : L'attribut id est un identifiant unique pour la balise <select>. Il est utilisé pour lier l'étiquette
associée à l'élément en utilisant l'attribut for.
❖ Les attributs couramment utilisés avec les balises <option> (à l'intérieur de <select>) sont :
▪ value : L'attribut value spécifie la valeur associée à l'option sélectionnée. Cette valeur est
envoyée au serveur lorsque l'utilisateur sélectionne une option.
▪ selected : L'attribut selected indique quelle option est sélectionnée par défaut dans le menu
109 FSO
déroulant. Pr. Youssef DOUZI
Les Formulaires: textarea
❖ La balise <textarea> est utilisée pour créer une zone de texte multiligne dans un
formulaire, permettant aux utilisateurs de saisir du texte sur plusieurs lignes (tel qu'un
commentaire ou une description).
❖ Les attributs couramment utilisés avec la balise <textarea> sont les suivants :
▪ id : L'attribut id est un identifiant unique pour la balise <textarea>. Il est utilisé pour lier
▪ name : Spécifie le nom du champ de formulaire.
▪ rows : Spécifie le nombre de lignes visibles dans le champ de saisie de texte multiligne.
La valeur par défaut est 20.
▪ cols : Spécifie le nombre de caractères visibles dans une seule ligne du champ de saisie
de texte multiligne. La valeur par défaut est 50. 110 FSO
Pr. Youssef DOUZI
Exemple : select & textarea
<!DOCTYPE html>
<html> SMI
<head> </head> SMA
<body> SMP
<form action="form.php" method="post">
<label for="Nom & prénom">Nom :</label><br>
<input type="text" name="nom" placeholder="Entrez votre nom"><br>
<label for="Filiere">Filière :</label><br>
<select name="filiere">
<option value="SMI">SMI</option>
<option value="SMA">SMA</option>
<option value="SMP">SMP</option>
</select><br>
<label for="adresse">Adresse :</label><br>
<textarea name="adress" placeholder="Entrez votre adresse" ></textarea><br>
</form>
</body>
</html>
111
Les Formulaires: fieldset
❑ La balise <fieldset> en HTML est utilisée pour regrouper des éléments de formulaire logiquement liés (au sein d'une
boîte de groupe). Elle permet de créer une bordure autour des éléments qu'elle contient, ce qui les rend plus faciles à
distinguer et à comprendre pour l'utilisateur. La balise <fieldset> peut également être utilisée pour ajouter une
légende au groupe d'éléments, ce qui permet d'identifier le groupe en un coup d'œil.
❑ Les avantages de l'utilisation de <fieldset> et <legend> dans un formulaire sont les suivants :
▪ Amélioration de la structure : <fieldset> permet d'organiser les éléments du formulaire en groupes logiques, ce
qui rend le formulaire plus facile à comprendre.
▪ Accessibilité : Les utilisateurs de lecteurs d'écran bénéficient de l'information fournie par la balise <legend>, ce
qui facilite la navigation dans le formulaire.
▪ Styles personnalisés : Vous pouvez appliquer des styles CSS aux balises <fieldset> et <legend> pour
personnaliser l'apparence du groupe.
▪ Validation côté client : L'utilisation de <fieldset> facilite la validation côté client, car vous pouvez valider les
éléments de chaque groupe de manière cohérente.
112
<!DOCTYPE html>
<html>
</textarea><br>
<head>
<title>Exemple de formulaire HTML</title>
</form>
</head>
</fieldset>
<body>
<fieldset>
<fieldset>
<legend>Légende du groupe d'éléments 1</legend>
<legend>Légende du groupe d'éléments 2</legend>
<form action="form_handler.php" method="post">
<form action="form_handler.php" method="post">
<h2>Radio</h2>
<label for="Nom & prénom">Nom :</label><br>
<input type="radio" name="sexe" value="homme"> Homme
<input type="text" name="nom" placeholder="Entrez votre
<input type="radio" name="sexe" value="femme"> Femme
nom"><br>
<h2>Checkbox</h2>
<label for="Filiere">Filière :</label><br>
<input type="checkbox" name="hobbies[]" value="sport"> Sport
<select name="filiere">
<input type="checkbox" name="hobbies[]" value="musique"> Musique
<option value="SMI">SMI</option>
<input type="checkbox" name="hobbies[]" value="lecture"> Lecture
<option value="SMA">SMA</option>
<option value="SMP">SMP</option>
</form>
</select><br>
</fieldset>
</body>
<label for="adresse">Adresse :</label><br>
</html>
<textarea name="adress" placeholder="Entrez votre adresse" >

HTML

Transféré par

Informations du document

Titre original

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

Faculté des Sciences - Oujda

Pr. Youssef DOUZI

FSO Pr. Youssef DOUZI 2

FSO Pr. Youssef DOUZI 3

❖ Les éléments HTML peuvent être imbriqués et avoir des attributs.

❖ Est un langage relativement facile à apprendre.

FSO Pr. Youssef DOUZI 4

FSO Pr. Youssef DOUZI 6

NB : Le / (slash) de fin n'est pas obligatoire, les webmasters recommandent de rajouter ce / à

FSO Pr. Youssef DOUZI 11

<html > Début de la page HTML

FSO Pr. Youssef DOUZI 14

FSO Pr. Youssef DOUZI 16

FSO Pr. Youssef DOUZI 18

FSO Pr. Youssef DOUZI 20

FSO Pr. Youssef DOUZI 21

FSO Pr. Youssef DOUZI 22

Par nom : <body bgcolor= "tomato" text= "blue">

FSO Pr. Youssef DOUZI 24

<body attribut_1="valeur_1" attribut_n=" Valeur_n">

❑ Les attributs possibles:

FSO Pr. Youssef DOUZI 25

<p> Bonjour et bienvenue sur mon site </p>

FSO Pr. Youssef DOUZI 26

FSO Pr. Youssef DOUZI 27

FSO Pr. Youssef DOUZI 28

FSO Pr. Youssef DOUZI 30

<b> Ce texte est en Gras </b> Ce texte est en Gras

❑ La balise <U> pour souligner un texte.

<u> Ce texte est souligné </u> Ce texte est souligné

❑ La balise <I> pour mettre le texte en italique.

<I> Ce texte est en Gras </I> Ce texte est en Italique

❑ la balise <em> a pour conséquence de mettre le texte en italique.

FSO Pr. Youssef DOUZI 31

FSO Pr. Youssef DOUZI 32

<strong> Ce text est important !</strong>

Ce text est important !

<s> Ce texte est barré</s> <br/> <strike> Ce texte est barré</strike>

Ce texte est barré

FSO Pr. Youssef DOUZI 33

La balise <mark> permet de faire ressortir visuellement une portion de texte.

<p> Ceci est mon <mark> premier test<mark/> </p>

FSO Pr. Youssef DOUZI 34

<h1>Les principaux langages du Web</h1>

FSO Pr. Youssef DOUZI 35

FSO Pr. Youssef DOUZI 36

<hr align="left" width="50%" size = "4" />

X <sup> 2 </sup> <br/> H <sub> 2 </sub> O

FSO Pr. Youssef DOUZI 38

❑ Les listes nous permettent souvent de mieux structurer notre texte et

FSO Pr. Youssef DOUZI 39

<ul> Ce qui donne

FSO Pr. Youssef DOUZI 43

<p>Bonjour pour accéder à la page2 <a href= "page2.html">cliquez ici </a></p>

Ce qui donne : Bonjour pour accéder à la page2 cliquez ici (FSO)

<h1>Bienvenue sur la page 2 </h1>

<a href= "pages/page1.html"> page1 </a>

<a href= "../page1.html"> page1 </a>

FSO Pr. Youssef DOUZI 45

FSO Pr. Youssef DOUZI 46

❑ Une ancre vous permet de naviguer à l'intérieur d'une même page