HTML5

ROYAUME DU MAROC
‫مكتب التكوين المهني وإنعاش الشغل‬

office de la formation professionnelle et de la promotion du travail
ISMONTIC TANGER
MODULE : Développer des sites Web statiques

DÉVELOPPER DES SITES WEB
STATIQUES
OUAFIQ Majda
2021-2022
HTML5
HTML signifie HyperText Markup Language
HTML est le langage de balisage standard pour la création de pages Web
HTML décrit la structure d'une page Web (la mise en page)
HTML se compose d'une série d'éléments
Les éléments HTML indiquent au navigateur comment afficher le contenu
Document HTML contient :
du texte
des balises (tags) : directives de mises en page
Les Editeurs
On peut toujours créer un document HTML avec un éditeur normal en tapant
soi-même toutes les balises. (fastidieux mais faisable)

Heureusement il existe des éditeurs spécialisés : VS Code, Sublime,
Dreamweaver, AOLpress, PageMill, Claris Home Page, Etc...
Lien pour télécharger Visual Studio Code :
https://code.visualstudio.com/download
Document HTML Simple
Document HTML Simple
<!DOCTYPE html> : déclaration définit que ce document est un document
HTML5
<html> : l'élément racine d'une page HTML
<head> : contient des méta-informations (données sur des données) sur la page
HTML
< meta > : fournit des métadonnées sur le document HTML.
<title> : spécifie un titre pour la page HTML (qui est affiché dans la barre de
titre du navigateur ou dans l'onglet de la page)
<body> : définit le corps du document et est un conteneur pour tous les contenus
visibles, tels que les en-têtes, les paragraphes, les images, les hyperliens, les
tableaux, les listes, etc.
Qu'est-ce qu'un élément HTML ?

Un élément HTML est défini par:
Une balise de début;
Un contenu;
Une balise de fin;
< tagname > Le contenu va ici... < /tagname >

Exemple:
< h1 > Mon premier titre < /h1 >
< p > Mon paragraphe. < /p >

META
Les métadonnées (META) sont des données (informations) sur les données.
La balise meta fournit des métadonnées sur le document HTML.
Les métadonnées ne seront pas affichées sur la page, mais seulement interprétables
par les machines.
Les Meta éléments sont généralement utilisés pour spécifier la description de la page,
les mots clés, l’auteur du document, dernière modification ou mise à jour, et autres
métadonnées.
Les métadonnées peuvent être utilisées par les navigateurs (comment afficher le
contenu ou la page de rechargement), moteurs de recherche (mots clés), …etc
META
Attribut Valeur Description
charset character_set Spécifie l’encodage des caractères du document HTML

Valeurs les plus utilisées:
UTF-8 : Unicode
ISO-8859-1 : Latin alphabet
<meta charset="UTF-8">
name application-name Spécifie un nom pour les métadonnées author <meta name="description"
content="Programmation Web"> description <meta name="keywords"
content="HTML,CSS,JavaScript"> generator <meta name="author"
content="OUAFIQ">
keywords <meta name="viewport" content="width=device-width, initialviewport scale=1.0">
http-equiv content-type Permet de donner des instructions pour la gestion du document, représente un
default-style objet pouvant modifier le comportement des serveurs refresh
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="refresh" content="30">
content text Donne la valeur associée à l'attribut name ou http-equiv
<meta name="author" content="OUAFIQ">
<meta http-equiv="refresh" content="30">
BODY
cette balise permet de délimiter la partie visible d'un document et de définir quelques
paramètres généraux du document (essentiellement des couleurs). elle possède les
attributs suivants :
attribut alink : permet de préciser la couleur des liens actifs, c'est-à-dire sur lequel on
est en train de cliquer.
attribut background : avec cet attribut, on indique le nom d'une image à utiliser
comme fond d'écran pour le document.
attribut bgcolor : permet de préciser la couleur utilisée pour le fond du document. on
indique soit le nom de la couleur, soit son codage rgb. attribut link : permet de préciser
la couleur des liens présents dans le document.
attribut text : permet de préciser la couleur du texte dans le document.
attribut vlink : permet de préciser la couleur des liens faisant référence à une adresse
déjà visitée.
Balises de formatage HTML

Les éléments de mise en forme ont été conçus pour afficher des types de texte
spéciaux : <i> , <em> - Texte en italique
< b> , <strong> - Texte en gras
<u> - Texte souligné <cite> - Citation <code> - Extrait de code
source
<q>- Citation courte
<abbr title=?> - Abréviation
<font size=?>(de 1 à 7) - Taille de caractère
<mark> - Texte marqué
<font color="#$$$$$$"> - Couleur de caractère
<big> - Texte plus gros
<br> - Retour à la ligne <small> - Texte plus petit
 - Commentaires <del> - Texte barré
<center> - Centrer <sub> - Texte en indice
<hr> - En-têtes avec n=1 à 6
<sup> - Texte en exposant
Balises de formatage HTML

Mise en format niveau paragraphe :
Commencer un nouveau paragraphe <p>

Séparateur des lignes <hr>
Images HTML
La balise HTML <img> est utilisée pour intégrer une image dans une page Web. Les
images ne sont pas techniquement insérées dans une page Web ; les images sont liées
à des pages Web. La balise <img> crée un espace de stockage pour l'image référencée.
La balise <img> est vide, elle contient uniquement des attributs et n'a pas de balise
de fermeture.
La balise <img> a deux attributs obligatoires : src -
Spécifie le chemin d'accès à l'image alt -
Spécifie un texte alternatif pour l'image
Syntaxe:
<img src="url" alt="alternatetext">
L'attribut src :
L' attribut src spécifie le chemin (URL) de l'image.
Images HTML
Remarque : lorsqu'une page Web se charge, c'est le navigateur, à ce moment-là, qui
récupère l'image d'un serveur Web et l'insère dans la page. Par conséquent, assurez
vous que l'image reste au même endroit par rapport à la page Web, sinon vos visiteurs
auront une icône de lien brisé. L'icône du lien brisé et le texte alt s'affichent si le
navigateur ne trouve pas l'image.
L'attribut alt:
L'attribut alt fournit un texte alternatif pour une im age, si l'utilisateur, pour une raison
quelconque, ne peut pas la visualiser (en raison d'une connexion lente, d'une erreur
dans l'attribut src ou si l'utilisateur utilise un lecteur d'écran), la valeur de l'attribut alt
doit décrire l'image.
Taille de l'image - Largeur et hauteur
Images HTML
Vous pouvez utiliser l'attribut style pour spécifier la largeur et la hauteur d'une image.
Les attributs width et height définissent toujours la largeur et la hauteur de l'image en
pixels.
Exemple
<img src="img.jpg" alt="jacket" style="width:500px;height:600px;">
Alternativement, vous pouvez utiliser les attributs width et height:

Exemple
<img src="img.jpg" alt="jacket" width="500" height="600">
Balises de Listes HTML
Les listes HTML permettent aux développeurs Web de regrouper un ensemble
d'éléments associés dans des listes.
attribut type : permet de préciser le type de numérotation utilisée pour présenter la
liste.
Exemple :
1.Liste HTML non ordonnée
Une liste non ordonnée commence par la balise <ul>. Chaque élément de liste
commence par la balise <li>.
Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut:
type = "disc" : petit cercle rempli type = "circle" : petit cercle vide type =
"square" : petit carré Exemple:
2.Liste HTML ordonnée

Une liste ordonnée commence par la balise <ol>. Chaque élément de liste commence
par la balise <li>.
Les éléments de la liste seront marqués par des nombres par défaut :
type = "1" : numérotation à l'aide de chiffres arabes (style par
défaut)
type = "a" : numérotation à l'aide de lettres minuscules.
type = "A" : numérotation à l'aide de lettres majuscules.
type = "i" : numérotation à l'aide de chiffres romains en minuscules.
type = "I" : numérotation à l'aide de chiffres romains en majuscules.
Exemple:
3. Listes de description HTML
Une liste de description est une liste de termes, avec une description de chaque terme.
La balise <dl> définit la liste de description, la balise <dt> définit le terme (nom) et la
balise <dd> décrit chaque terme .
Exemple:
Les liens hypertexte
1. Liens hypertexte
Les liens se trouvent dans presque toutes les pages Web. Les liens permettent aux
utilisateurs de cliquer sur leur chemin de page en page.
Les liens HTML sont des hyperliens.
Lorsque vous déplacez la souris sur un lien, la flèche de la souris se transforme en
une petite main.
Remarque : Un lien ne doit pas nécessairement être du texte. Un lien peut être une
image ou tout autre élément HTML !
2. Syntaxe
La balise <a> définit un lien hypertexte. Il a la syntaxe suivante :
<a href="url">link text</a>
2. URL absolues vs URL relatives
URL Absolues : équivalent à une URL, à utiliser lorsque le document appelé n’est pas
situé sur le même site que le document appelant.
URL Relatifs : à utiliser lorsque le document appelé est situé sur le même site que le
document appelant
Exemple
<h2>Absolute URLs</h2>
<p><a href="https://www.site.com/">site.com</a></p>
<p><a href="https://www.google.com/">Google.com</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.html">HTML Images</a></p>
<p><a href="/css/default.html">CSS Tutorial</a></p>
3. Lien externe
Par défaut, la page liée sera affichée dans la fenêtre actuelle du navigateur. Pour
changer cela, vous devez spécifier une autre cible pour le lien.
L'attribut target spécifie où ouvrir le document lié.
L'attribut target peut avoir l'une des valeurs suivantes :
_self- Par défaut. Ouvre le document dans la même fenêtre/onglet que celui sur
lequel vous avez cliqué
_blank - Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
_parent - Ouvre le document dans le cadre parent
_top - Ouvre le document dans tout le corps de la fenêtre
Exemple
<a href="https://www.site.com/" target="_blank">Visit site!</a>
3. Lien externe
4. Lien interne
Lien qui amène à un endroit spécifique de la page HTML en cours.
L'attribut id permet de nommer un endroit du document pour y faire référence ensuite.
L'utilisation de la balise A avec cet attribut n'a pas d'effet visible sur le document ; en
particulier, il n'y a pas de lien hypertexte produit. En tout début de page, on peut par
exemple placer le code suivant. <h1 id="haut" >titre de la page</h1>
Cela permettra dans la suite de faire des liens vers ce haut de page.
Pour faire référence à une ancre interne à la page, on donne dans HREF le nom
attribué à l'ancre avec l'attribut ID précédé du symbole #.
Retour en<a href="#haut">haut de la page</a>.
Retour en haut de la page
5. Lien vers une adresse e-mail
Utilisez mailto: à l'intérieur de l'attribut href pour créer un lien qui ouvre le programme
de messagerie de l'utilisateur (pour lui permettre d'envoyer un nouvel mail) :
<a href="mailto:someone@example.com">Send email</a>
Liens hypertextes dans les images
Avec les liens hypertextes , vous pouvez créer des zones cliquables sur une image.
La balise <map> permet de définir une image cliquable. Une image cliquable est une
image avec des zones cliquables. Les zones sont définies avec une ou plusieurs balises
<area>.
L'idée derrière une image cliquable est que vous devriez être capable d'effectuer
différentes actions selon l'endroit où vous cliquez sur l'image.
Pour créer une image cliquable, vous avez besoin d'une image et d'un code HTML
décrivant les zones cliquables.
L'image est insérée à l'aide de la balise <img>. La seule différence avec les autres
images est que vous devez ajouter un attribut usemap.
La valeur usemap commence par une balise de hachage # suivie du nom de l'image
cliquable et est utilisée pour créer une relation entre l'image et l'image cliquable.
Exemple:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Ensuite, ajoutez un élément <map>.

L'élément <map> est utilisé pour créer une image cliquable et est lié à l'image à l'aide
de l' attribut name requis.
L'attribut name doit avoir la même valeur que l'attribut usemap de <img>.
Ensuite, ajoutez les zones cliquables.
Une zone cliquable est définie à l'aide d'un élément <area>.
Vous devez définir la forme de la zone cliquable en utilisant l’attribut shape, et vous
pouvez choisir l'une de ces valeurs :
rect - définit une région rectangulaire
circle - définit une région circulaire
poly - définit une région polygonale
default - définit toute la région
Vous devez également définir des coordonnées pour pouvoir placer la zone cliquable
sur l'image.
Exemple:
Les coordonnées pour shape="rect" viennent par paires, une pour l'axe des x et une
pour l'axe des y.
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="comput
er.html">
</map>
Ainsi, les coordonnées 34,44 se situent à 34 pixels de la marge de gauche et à 44
pixels du haut :
Les coordonnées 270,350 sont situées à 270 pixels de la marge de gauche et à 350
pixels du haut :
Nous avons maintenant suffisamment de données pour créer une zone rectangulaire
cliquable, C'est la zone qui devient cliquable et renverra l'utilisateur vers la page
"ordinateur.html":
Les tableaux
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> définit une ligne de tableau;
L'élément <th> définit l’en-tête de tableau;
L'élément <td> définit une cellule de tableau.
Un tableau HTML peut également inclure les éléments:
<caption> … </caption> (en dehors des définitions de lignes et de cellules) : pour
donner un "titre" au tableau.
<thead> …. </thead> : pour indiquer que les lignes ranger entre cet élément font
partie de l'en-tête.
Les tableaux
<tfoot> … </tfoot> : pour indiquer que les lignes ranger entre cet élément font partie
du pied du tableau
<tbody>… </tbody> : pour indiquer que les lignes ranger entre cet élément font
partie des données.
Remarque : Les navigateurs peuvent utiliser ces éléments pour permettre le défilement
du corps du tableau indépendamment de l'en-tête et du pied de page. De plus, lors de
l'impression d'un grand tableau qui s'étend sur plusieurs pages, ces éléments peuvent
permettre d'imprimer l'en-tête et le pied de page du tableau en haut et en bas de chaque
page.
1. La balise table : cette balise permet de délimiter un tableau et de définir
quelques unes de ses caractéristiques:
attribut bgcolor : pour définir la couleur de fond du tableau.
Les tableaux
attribut border : pour spécifier l'épaisseur du trait utilisé pour tracer les bords du
tableau. attribut bordercolor : pour indiquer la couleur du bord du tableau.
attribut cellspacing : pour définir l'espacement entre les cases du tableau.
attribut cellspadding : pour définir l'espacement entre les bords du tableau et le
contenu des cases.
attribut width/height : pour fixer la largeur et la hauteur du tableau, en
pourcentage de la largeur/hauteur de la page ou en pixels.
2. La balise tr :
Permet de délimiter une ligne du tableau en cours de définition.
attribut bgcolor : pour indiquer la couleur du fond de la ligne concernée.
Les tableaux
attribut valign : pour spécifier l'alignement vertical des cases de la ligne.
3. La balise td et th :
Permet dans une ligne de tableau de définir le contenu d'une cellule.
attribut align : pour spécifier l'alignement horizontal de la case (left, center, right).
attribut bgcolor : spécifier la couleur de fond de la case.
attribut colspan : indiquer sur combien de colonnes d'étend la case. attribut
rowspan : indiquer sur combien de lignes d'étend la case. attribut valign :
spécifier l'alignement vertical de la case (top, bottom, middle).
Multimédia en HTML-Video
HTML
Le multimédia se présente sous de nombreux formats différents. Il peut s'agir de
presque tout ce que vous pouvez entendre ou voir, comme des images, de la musique,
du son, des vidéos, des disques, des films, des animations, etc.
Les pages Web contiennent souvent des éléments multimédias de différents types et
formats.
Les fichiers multimédias ont des formats et des extensions différentes comme : .wav,
.mp3, .mp4, .mpg, .wmv et .avi.
Il existe de nombreux formats vidéo.
Seules les vidéos MP4, WebM et Ogg sont prises en charge par la norme HTML.
Multimédia en
Seuls les fichiers audio MP3, WAV et Ogg sont pris en charge par la norme HTML.
L'élément <video> est utilisé pour afficher une vidéo sur une page Web.
L'attribut controls ajoute des commandes vidéo, telles que la lecture, la pause et le
volume.
L'attribut autoplay est utiliser pour démarrer une vidéo automatiquement.
Ajoutez muted après autoplay pour que votre vidéo commence à jouer
automatiquement mais en sourdine.
C'est une bonne idée de toujours inclure les attributs width et height. Si la hauteur et
la largeur ne sont pas définies, la page peut clignoter pendant le chargement de la
vidéo.
L'élément <source> vous permet de spécifier des fichiers vidéo alternatifs parmi
lesquels le navigateur peut choisir. Le navigateur utilisera le premier format reconnu.
Le texte entre les balises <video> et </video> ne sera affiché que dans les
navigateurs qui ne prennent pas en charge l'élément <video>.
Exemple:
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
votre navigateur ne supporte pas l’élément Video.
</video>
Youtube
La conversion de vidéos en différents formats peut être difficile et prendre du temps,
une solution plus simple consiste à laisser YouTube lire les vidéos de votre page Web.
YouTube affichera un identifiant (comme tgbNymZ7vqY), lorsque vous lisez une
Multimédia en
vidéo, vous pouvez utiliser cet identifiant et faire référence à votre vidéo dans le code
HTML en utilisant la balise <iframe> Exemple:
<iframe width="420" height="315"

src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
HTML-Audio
L'élément <audio> est utilisé pour lire un fichier audio en HTML.
L'attribut controls ajoute des commandes audio, telles que la lecture, la pause et le
volume.
L'attribut autoplay est utiliser pour démarrer un fichier audio automatiquement.
Ajoutez muted après autoplay pour permettre à votre fichier audio de commencer à
jouer automatiquement (mais en sourdine) :
L'élément <source> vous permet de spécifier des fichiers audio alternatifs parmi
lesquels le navigateur peut choisir. Le navigateur utilisera le premier format reconnu.
Multimédia en
Le texte entre les balises <audio> et
</audio> ne sera affiché que dans les navigateurs qui ne prennent pas en charge
l'élément <audio>.
Multimédia en
HTML-Audio
Exemple:
<audio controls autoplay muted>

<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Les éléments sémantiques

HTML5 propose de nouveaux éléments sémantiques permettant de définir
clairement les différentes parties d'une page web et donner
du sens à notre code HTML au niveau du navigateur:
<header> <figcaption>
<nav> <footer>
<section> <details>
<article> <summary>
<aside> <mark>
<figure> <time>
HEADER
Les éléments sémantiques -
L'élément <header> spécifie une en-tête d'un document ou d'une section.
L’élément header représente l’en-tête de nos pages. Cet élément va généralement
contenir le logo du site et le menu principal de navigation.
Vous pouvez avoir plusieurs éléments <header> en un seul document.
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2015-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was
released to the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
- NAV
L'élément <nav> définit un ensemble de liens de navigation.
Nous allons par exemple pouvoir utiliser cet élément pour entourer le menu de nos
pages.
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
MAIN
L’élément main représente le contenu principal ou « majoritaire » du body. La zone
de contenu principale d’un document comprend un contenu unique à ce document
et exclut le contenu répété sur un ensemble de documents, tels que des liens de
navigation de site, des informations de copyright, des logos de site et des bannières.
La spécification officielle (HTML5.1) indique que l’élément main ne doit pas être
imbriqué dans un autre élément structurant et qu’on ne doit utiliser qu’un élément
main par page.
– ARTICLE
L’élément article représente une partie indépendante d’une page. Nous utiliserons
cet élément pour entourer du contenu qui pourrait être extrait de notre page et
distribué ailleurs tout en continuant à faire du sens.
Imaginez par exemple une page catégorie d’un blog qui affiche les différents articles
de la catégorie. Chacun des différents articles n’a pas besoin des autres ou du reste
de la page pour faire du sens et pourrait tout à fait être extrait de la page et intégré
sur un autre site et rester tout à fait lisible. Dans ce cas-là, il serait donc intéressant
de placer chaque article dans un élément article.
SECTION
L’élément section représente à nouveau une partie d’une page cohérente mais qui ne
va pas forcément faire du sens si on l’extrait seule de la page pour l’intégrer ailleurs.
L’élément section est à mi-chemin entre les éléments article et div et nous pourrons
nous en servir pour organiser nos pages.
Un cas classique d’utilisation de section est le cas d’une page de présentation d’une
entreprise. Sur ce type de pages, il y a généralement une partie dédiée à la
présentation de l’activité de l’entreprise, une autre partie pour l’équipe, etc. Nous
pourrons ici encadrer chaque partie avec un élément section pour les séparer les unes
des autres.
Il va être tout à fait possible d’inclure un ou plusieurs éléments section dans un
élément article si on souhaite diviser le contenu de notre article en plusieurs parties.
- ASIDE
L’élément aside permet d’indiquer un contenu en marge du reste de la page, c’est-
àdire différent du reste de la page. Imaginons par exemple que nous ayons un blog et
que chaque article de blog se trouve dans un élément article.
Dans nos articles, nous affichons des publicités. Les publicités n’ont aucune
cohérence avec le contenu de l’article (ou tout au moins ne sont pas utiles à l’article).
Nous pourrons donc les placer dans un élément aside pour le signaler aux moteurs de
recherche et autres types de robots.
Les éléments sémantiques - FOOTER
L’élément footer va avoir un rôle et une signification sémantique identiques à
l’élément header. Comme son nom l’indique, nous utiliserons cet élément pour
entourer les informations de pied de page (notice de copyright, menu de navigation
bas, etc.).

TIME
L’élément time va pouvoir représenter soit une heure de la journée soit une date
complète. Il faut savoir que les dates sont très difficiles à analyser pour les robots
car la plupart des auteurs utilisent des syntaxes différentes dans l’écriture d’un
moment de la journée ou d’une date.
Pour cette raison, nous allons ajouter un attribut datetime à l’élément time. Nous
allons ensuite simplement passer une date en valeur de cet attribut en respectant le
format yyyy-mm-dd hh:mmTIMEZONE.
La date devra être au format 24h et le timezone va être exprimé par rapport à GMT
(on écrira donc +01 pour Casablanca par exemple).
FIGURE
La balise <figure> spécifie contenu autonome, comme illustrations, schémas,
photos, listes de codes, etc…
Alors que le contenu de l'élément <figure> est liée au flux principal, la position est
indépendante du flux principal, et s'il a été retiré, il ne devrait pas affecter le flux du
document.
La balise <figcaption> définit une légende pour un élément <figure>.
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden,
opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is
approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a
famous tourist attraction in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
DETAILS
La balise <details> spécifie des détails supplémentaires, que l'utilisateur peut afficher
ou masquer à la demande.
La balise <details> peut être utilisé pour créer un widget interactif que l'utilisateur
peut ouvrir et fermer. Tout type de contenu peut être mis à l'intérieur de la balise
<details>.
Le contenu d'un élément <details> ne doit pas être visible sauf si l'attribut open est
défini.
La balise <summary> définit une en-tête visible de l'élément <details>. Le titre peut
être cliqué pour voir /
cacher les détails.
<details><summary>Copyright 1999-2014.</summary>
<p>All content and graphics on this web site are the property of the company Refsnes
Data.</p>
</details>
Les Formulaires
Un formulaire HTML est utilisé pour collecter les entrées de l'utilisateur. L'entrée
utilisateur est le plus souvent envoyée à un serveur pour traitement.
Exemple:
Les Formulaires - form
L'élément <form> est un conteneur pour différents types d'éléments de saisie, tels
que : des champs de texte, des cases à cocher, des boutons radio, des boutons de
soumission, etc.
ses principaux attributs:
Attribut action : L'attribut action définit l'action à effectuer lors de la soumission
du formulaire. Habituellement, les données du formulaire sont envoyées à un
fichier sur le serveur lorsque l'utilisateur clique sur le bouton d'envoi.
Exemple:
Dans l'exemple ci-dessous, les données du formulaire sont envoyées à un fichier
appelé "page_action.php". Ce fichier contient un code côté serveur qui gère les
données du formulaire :
<form action="page_action.php">
Nom<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
Attribut method: spécifie la méthode HTTP à utiliser lors de la soumission des

données du formulaire, il peut prendre comme valeur:
GET (avec method="get") - Par defaut: Les données de formulaire sont envoyées
sous forme de variables URL (Ajoute les données du formulaire à l'URL, par
paires nom/valeur).
POST (avec method="post"): Les données de formulaire sont envoyées sous forme
de post-transaction HTTP (Ajoute les données du formulaire dans le corps de la
requête HTTP, les données du formulaire soumises ne sont pas affichées dans
l'URL)
<form action="page_action.php" method="post">
Prénom<input type="text" id="fname" name="fname"><br>
Nom<input type="text" id="lname" name="lname"><br><br>
</form>
L'attribut autocomplete : spécifie si un formulaire doit avoir la saisie

semiautomatique activée ou désactivée. Lorsque la saisie semi-automatique est
activée, le navigateur complète automatiquement les valeurs en fonction des
valeurs que l'utilisateur a saisies auparavant.
Exemple:
<form action="action_page.php" autocomplete="on">
L'attribut novalidate: est un attribut booléen.Lorsqu'il est présent, il spécifie que
les données de formulaire (entrée) ne doivent pas être validées lors de la
soumission.
Exemple:
<form action="action_page.php" novalidate>
L'élément <form> doit contenir un ou plusieurs éléments suivants :

<input> <fieldset>
<label> <legend>
<select> <datalist>
<textarea> <output>
<option>
<button>
Les Formulaires - input
La balise <input> peut être affiché de plusieurs manières, selon l' attribut type.
L' attribut type: avec cet attribut, on définit le type d'entrée représentée par la balise,
elle peut prendre comme valeur :
▪ type = "text" : fait apparaître dans le formulaire une zone de saisie permettant à
l'utilisateur de fournir une ligne de texte.
▪ type = "password" : définit un champ de mot de passe dont les caractères sont
masqués par des étoiles ou des cercles.
▪ type = "checkbox" : définition d'un bouton comme réponse à une question à
choix multiple ; ce type de bouton permet à l'utilisateur de donner plusieurs
réponses à une même question.
▪ type = "hidden" : définit un champ de saisie masqué (non visible pour un
utilisateur).
▪ type = "radio" : définition d'un bouton comme réponse à une question à choix
multiple mais pour laquelle on n'autorise qu'une seule réponse.
▪ type = "reset" : produit un bouton permettant à l'utilisateur d'effacer toutes les
réponses qu'il a saisies et de faire réapparaître les valeurs initiales.
▪ type = "submit" : produit un bouton permettant à l'utilisateur de signifier la fin de
sa saisie du formulaire, l'action du formulaire est alors effectuée.
Attribut name : sert à nommer l'entrée de la balise input ; cela est utilisé pour les
traitements ultérieurs du formulaire.
Attribut value : réponse par défaut ou texte d'un bouton en fonction du type de la
balise input.
Attribut size : taille de la zone de texte, l'attribut size fonctionne avec les types
d'entrée suivants : text, search, tel, url, email, and password.
Attribut checked : utile uniquement dans le cas d'un bouton de type radio ou type
checkbox, pour indiquer que ce bouton est choisi par défaut et qu'il doit donc apparaître
coché.
Attribut placeholder: spécifie un indice qui décrit la valeur attendue d'un champ de
saisie
Nom: <input type="text" name="nom" placeholder=“Votre nom ici">
Attribut required: indique un champ obligatoire
Nom: <input type="text" name="nom" required>
Les Formulaires -
label
L'élément <label> est utile pour les utilisateurs de lecteur d'écran, car le lecteur
d'écran lira à haute voix l'étiquette lorsque l'utilisateur se concentrera sur l'élément
d'entrée.
L'attribut for de la balise <label> doit être égal à l'attribut id de l'élément
<input> pour les lier ensemble.
Syntaxe:
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Les Formulaires -
textarea
La balise textarea: permet de créer dans un formulaire une zone de saisie s'étendant
sur plusieurs lignes.
attribut name : avec l'attribut name, on nomme l'entrée de la balise textarea ; cela
est utile pour les traitements ultérieurs du formulaire.
attribut cols : spécifie le nombre de colonnes (en nombre de caractères) de la zone
de saisie.
attribut rows : spécifie le nombre de lignes de la zone de saisie.
Syntaxe:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Les Formulaires-select
La balise select permet de définir une liste déroulante dans un formulaire.
attribut name : avec l'attribut name, on nomme l'entrée de la balise select ; cela est
utile pour les traitements ultérieurs du formulaire.
attribut multiple : indique que les réponses multiples sont autorisées (par défaut,
une seule réponse est possible).
Attribut size: Nombre de lignes affichées, une par défaut.
La balise option : permet de définir un item dans une liste déroulante.
attribut value : permet de préciser la valeur associée à l'item.
attribut selected : indique que cet item est choisi par défaut
Syntaxe:
Les Formulaires -
<select> <option> ….</option> ... </select>
datalist
La balise datalist spécifie une liste d'options pré-définies pour un élément <input>.
Elle est utilisée pour fournir une saisie « semi-automatique » dans <input> éléments.
<form action="" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
Les Formulaires -
button
La balise button définit un bouton cliquable.
À l'intérieur d'un élément <button>, vous pouvez mettre du texte (et des balises
comme <i>, <b>, <strong>, <br>, <img>, etc.). Ce n'est pas possible avec un bouton
créé avec l'élément <input>!
Exemple:
<button type="submit" form="form1" >Click Me!</button>
fieldset, legend
Les Formulaires –
L'élément <fieldset> est utilisé pour regrouper les données associées dans un
formulaire.
L'élément <legend> définit une légende pour l' élément <fieldset> .
Exemple:
<form action="/action_page.php">
<fieldset>
<legend>Informations Personnelles:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</fieldset>
</form>
Les Formulaires -
Balise(HTML5)
Color : Select your favorite color: <input type="color" name="favcolor">
Date: Birthday: <input type="date" name="bday">
datetime-local: Birthday (date and time): <input type="datetime-local"

name="bdaytime">
Email: E-mail: <input type="email" name="email">
Month: Birthday (month and year): <input type="month" name="bdaymonth">
Number: Quantity : <input type="number" name="quantity" min="1" max="10" step="2">
Range: <input type="range" name="points" min="1" max="10">
Search: Search Google: <input type="search" name="googlesearch">
Les Formulaires –
Tel: Telephone: <input type="tel" name="usrtel"> (Safari 8
uniquement)
Time: Select a time: <input type="time" name="usr_time">
url: Add your homepage: <input type="url" name="homepage">
Week: Select a week: <input type="week" name="week_year">

File: Select a file: <input type="file" name="img" accept="image/png,image/jpeg" >
Les Formulaires –
Attributs(HTML5)
Attribut formaction: spécifie l'URL d'un fichier qui va traiter les données lorsque le
formulaire est soumis
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp"
value="Submit as admin">
</form>
Attribut height et width
Les Formulaires –
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
Attributs(HTML5)
Attribut min et max
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-
1231">
Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-
02">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5">
Attribut multiple: pour file

Select images: <input type="file" name="img" multiple>
Les Formulaires –
Attribut pattern: spécifie une expression régulière que la valeur de l'élément
<input>, fonctionne avec les types d'entrée suivants: text, serach, url, tel, email et
password
Country code: <input type="text" name="country_code" pattern="[A-
Zaz]{3}" title="Three letter country code">

HTML5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML5

Transféré par

Droits d'auteur :

Formats disponibles

ROYAUME DU MAROC

‫مكتب التكوين المهني وإنعاش الشغل‬

MODULE : Développer des sites Web statiques

soi-même toutes les balises. (fastidieux mais faisable)

Dreamweaver, AOLpress, PageMill, Claris Home Page, Etc...

Lien pour télécharger Visual Studio Code :

Qu'est-ce qu'un élément HTML ?

Une balise de début;

Une balise de fin;

< tagname > Le contenu va ici... < /tagname >

< h1 > Mon premier titre < /h1 >

< p > Mon paragraphe. < /p >

La balise meta fournit des métadonnées sur le document HTML.

par les machines.

contenu ou la page de rechargement), moteurs de recherche (mots clés), …etc

charset character_set Spécifie l’encodage des caractères du document HTML

Balises de formatage HTML

Balises de formatage HTML

Commencer un nouveau paragraphe <p>

Alternativement, vous pouvez utiliser les attributs width et height:

2.Liste HTML ordonnée

Ensuite, ajoutez un élément <map>.

<video width="320" height="240" controls>

<iframe width="420" height="315"

<audio controls autoplay muted>

Les éléments sémantiques

Les éléments sémantiques

Attribut method: spécifie la méthode HTTP à utiliser lors de la soumission des

L'attribut autocomplete : spécifie si un formulaire doit avoir la saisie

L'élément <form> doit contenir un ou plusieurs éléments suivants :

Date: Birthday: <input type="date" name="bday">

datetime-local: Birthday (date and time): <input type="datetime-local"

url: Add your homepage: <input type="url" name="homepage">

Week: Select a week: <input type="week" name="week_year">

Attribut multiple: pour file

Vous aimerez peut-être aussi