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
2022-2023
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 >

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

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">
Images HTML
L'attribut src :
L' attribut src spécifie le chemin (URL) de l'image.
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 image, 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.
Images HTML
Taille de l'image - Largeur et hauteur
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="500px" height="600px">
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 ( unordened list)
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>
6. Lien vers un numéro de téléphone

Utilisez tel: à l'intérieur de l'attribut href pour créer un lien qui rend un numéro de
téléphone cliquable (pour permettre à l’utilisateur de vous appeler) :
<a href="tel:+212611111111">Call us :+212611111111 </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.
<tfoot> … </tfoot> : pour indiquer que les lignes ranger entre cet élément font partie
Les tableaux
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 cellpadding : 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
(valign="top | middle | bottom ")
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
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.
Seuls les fichiers audio MP3, WAV et Ogg sont pris en charge par la norme HTML.
Multimédia en HTML-Video
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.
Multimédia en HTML-Video
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>
Multimédia en HTML-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
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>
Multimédia en 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.
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>
Les éléments sémantiques - HEADER
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>
Les éléments sémantiques - 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>
Les éléments sémantiques - 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.
Les éléments sémantiques – 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.
Les éléments sémantiques - 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.
Les éléments sémantiques - 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 .
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.).
Les éléments sémantiques - 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).
Les éléments sémantiques - 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>
Les éléments sémantiques - 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 semi-
automatique 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>
<button> <option>
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:
<select> <option> ….</option> ... </select>
Les Formulaires - 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 de
type submit créé avec l'élément <input>!
Exemple:
<button type="submit">Click Me!</button>
Les Formulaires - fieldset, legend
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">
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
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
Attribut min et max
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-
31">
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>
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-Za-
z]{3}" title="Three letter country code">
Attribut maxlength et minlength
L'attribut maxlength spécifie le nombre maximum de caractères autorisés dans
l'élément <input>.
L'attribut minlength spécifie le nombre minimum de caractères requis dans un champ de
saisie.
Remarque : L'attribut maxlength et minlength peut être utilisé avec le type de saisie :
texte, recherche, URL, tél, e-mail et mot de passe.

Langue

HTML5

Transféré par

Informations du document

Copyright

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 :

HTML5

Transféré par

Droits d'auteur :

ROYAUME DU MAROC

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

MODULE : Développer des sites Web statiques

DÉVELOPPER DES SITES WEB STATIQUES

HTML signifie HyperText Markup Language

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 :

Un élément HTML est défini par:

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

name application-name Spécifie un nom pour les métadonnées

Commencer un nouveau paragraphe <p>

Alternativement, vous pouvez utiliser les attributs width et height:

6. Lien vers un numéro de téléphone

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

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

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

<audio controls autoplay muted>

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

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

Attribut required: indique un champ obligatoire

Vous aimerez peut-être aussi