Université de BATNA 2

Département d’informatique

2. HTML
2.2 ÉLÉMENTS HTML
Technologies Web, M1, RSD

1
H.NOUI
H.NOUI 2020-2021
2020-2021
STRUCTURE HTML
TABLE DE MATIÈRE

1. STRUCTURE D’UN ÉLÉMENT HTML

2. COMMENTAIRE HTML
3. EN-TÊTE (HEADING)
4. PARAGRAPHE
5. SAUT DE LIGNE
6. LISTE ORDONNÉE
7. LISTE NON ORDONNÉE
8. IMAGE
9. FIGURE
10. LIEN HYPERTEXTE
11. TABLEAU
12. FORMULAIRES
13. MÉDIAS INTÉGRÉS

2
H.NOUI 2020-2021
ÉLÉMENT HTML
STRUCTURE D’UN ÉLÉMENT HTML
• Format général d’un élément HTML

Élément HTML

balise de
balise d'ouverture contenu fermeture

<p style="color:red">Content</p>
attribut valeur

H.NOUI 2020-2021
ÉLÉMENT HTML
COMMENTAIRE HTML
• Les commentaires HTML ne sont pas affichés dans le navigateur, mais ils
peuvent aider à documenter votre code source HTML.
• Format: <!-- Commentaire -->

H.NOUI 2020-2021
ÉLÉMENT HTML
TITRE (HEADING)
• Les éléments TITRES (Heading) sont organisés en six niveaux: h1 à h6.
• La taille du texte est la plus grande pour <h1> (appelée balise heading 1) et la plus
petite pour <h6> (appelée balise heading 6).

H.NOUI 2020-2021
ÉLÉMENT HTML
PARAGRAPHE
• L'élément paragraphe est utilisé pour regrouper des phrases et des sections de
texte.
• Le texte contenu dans les balises <p> et </p> s'affiche comme un "bloc".

H.NOUI 2020-2021
ÉLÉMENT HTML
SAUT DE LIGNE
• L'élément de saut de ligne fait passer le navigateur à la ligne suivante avant d'afficher
l'élément ou la partie de texte suivante sur une page web.
• La balise de saut de ligne n'est pas codée comme une paire de balises d'ouverture et de
fermeture. C'est un élément autonome et codé comme <br>

Saut de ligne

H.NOUI 2020-2021
ÉLÉMENT HTML
LISTE ORDONNÉE
• HTML peut être utilisé pour créer trois types de listes; listes de description, listes
ordonnées et listes non ordonnées.
• Les éléments de la liste ordonnée doivent être lus dans un ordre donné et seront
donc numérotés

H.NOUI 2020-2021
ÉLÉMENT HTML
LISTE NON ORDONNÉE
• Une liste non ordonnée affiche une puce ou un marqueur de liste avant chaque entrée
• Cette puce peut être de plusieurs types: disque (par défaut), carré et cercle.

H.NOUI 2020-2021
ÉLÉMENT HTML
LISTE DE DESCRIPTION
• Utile pour organiser les termes et leurs descriptions. Les termes se démarquent et leurs
descriptions peuvent être aussi longues que nécessaire pour transmettre votre message.
• Exemple d’utilisation: organiser les questions fréquemment posées (FAQ) et leurs
réponses.

H.NOUI 2020-2021
ÉLÉMENT HTML
IMAGE
• En vue d'insérer une image, la balise image est utilisée
comme suit: <img src="HTML5.png">
• La balise d'image se ferme automatiquement et n'a pas
besoin d'être fermée
• Pour l'élément image, il ne suffit pas de fournir une balise
d'image. Vous devez également spécifier la source de
l'image en modifiant l’attribut src.
• La source peut être une URL, l’image est donc à récupérer
sur Internet ou localement dans le même répertoire que
votre site Web.
• L'attribut alt est utilisé pour le texte alternatif affiché au
cas où le navigateur ne peut pas rendre l'image
• Ex. <img src="HTML5.png" alt="logo HTML5" >

H.NOUI 2020-2021
ÉLÉMENT HTML
FIGURE
• L'élément HTML <figure>, représente un contenu autonome,
potentiellement avec une légende facultative, qui est spécifiée
à l'aide de l'élément <figcaption>.
• L'élément figure, sa légende et son contenu sont référencés
comme une seule unité.

H.NOUI 2020-2021
ÉLÉMENT HTML
LIEN HYPERTEXTE
• Lier le Web commence par l'élément « a », ou
ancre, l'un des plus anciens éléments - peut-être
le plus ancien - du HTML.
• Pour être valide, un élément d'ancrage doit
avoir une balise de début et une balise de fin.
• La mise en œuvre la plus élémentaire d'un
élément d'ancrage est :
<a href = " URL"> Un espace réservé hyperlien
</a>
• L'attribut href («href» étant l'abréviation de
«référence hypertexte») de l'élément d'ancrage
définit l'URL de destination du lien hypertexte

H.NOUI 2020-2021
ÉLÉMENT HTML
TABLEAU
• L'élément tableau fournit une
Nous utilisons une balise <table>
structure basée sur le balisage pour commencer le tableau Voici la première ligne, que
nous commençons par un
pour les données tabulaires. <tr>.
Notez que les titres des tableaux
• Les tableaux HTML, comme les sont énumérés les uns après les
autres. Bien qu'ils semblent
feuilles de calcul, sont constitués constituer une colonne dans le
de cellules organisées en HTML, nous définissons en fait la
ligne entière des titres de table.
colonnes et en lignes Début de la seconde ligne
• L'attribut "border", entièrement Chaque élément <td> contient
facultatif, peut être mise à 1 afin une cellule du tableau, et chaque
cellule constitue une colonne
d’appliquer une bordure à distincte.

l’ensemble du tableau
Et voici la troisième
ligne.
Tous ces <td>s forment une
rangée.

H.NOUI 2020-2021
ÉLÉMENTS STRUCTURELS
TABLEAUX POUR LA MISE EN PAGE
• Avant que l'utilisation des CSS ne soit largement répandue,
les développeurs web avaient peu d'autres options que les
tableaux pour créer des conceptions visuelles complexes.
• Cela a conduit à toutes sortes de mauvaises pratiques, à
des pages web peu accessibles et à un code bouffi et
difficile à maintenir.
• En vue d’organiser le texte à droite de l’image, nous avons dû
créer un tableau (sans bordures) avec 1 ligne, 3 colonnes
• Une cellule pour l’image, une cellule de séparation, une troisième
cellule pour le texte.

H.NOUI 2020-2021
ÉLÉMENTS STRUCTURELS
DIV
• L'élément div est utilisé pour configurer une zone structurelle ou
"division" sur une page web sous forme de bloc d'affichage avec
des espace en haut et en bas.
• Un élément div commence par une balise <div> et se termine
par une balise </div>.
• Utilisez un élément div lorsque vous devez formater une zone
d'un site web qui peut contenir d'autres éléments d'affichage en
bloc tels que des titres, paragraphes, des listes non ordonnées,
et même d'autres éléments de div.
• Nous verrons plus tard comment nous appliquons les feuilles de
style (CSS) pour styliser et configurer la couleur, la police et la
disposition des éléments HTML…

H.NOUI 2020-2021
 FORMULAIRES

17
H.NOUI 2020-2021
FORMULAIRES
PRÉSENTATION
• Les formulaires sont utilisés à de nombreuses fins sur l'ensemble du
Web. Ils sont utilisés par les moteurs de recherche pour accepter des
mots clés et par les magasins en ligne pour traiter les paniers d'achat
du commerce électronique.
• Les sites web utilisent des formulaires pour aider à remplir diverses
fonctions, notamment accepter les commentaires des visiteurs,
encourager les visiteurs à envoyer un article à un ami , collecter des
adresses électroniques pour un bulletin d'information, accepter des
informations de commandes en ligne, des information de création de
comptes, …
• De nombreux éléments des formulaires sont encore fondamentaux et
parfaitement valables et ne sont pas remplacés. Ils seront encore
largement utilisés dans le développement de HTML5 et de formulaires
• Même s'il existe plusieurs nouveaux éléments HTML5, la principale
nouveauté est sans doute la validation de formulaire intégrée qu'offre
HTML5, sans avoir à utiliser un script JavaScript sophistiqué pour
vérifier le contenu des données saisies

H.NOUI 2020-2021
FORMULAIRES
TYPES DE SAISIE HTML 4
1. Élément form
• L'élément form contient un formulaire sur
une page web.
• La balise <form> spécifie le début d'une
zone de formulaire. La balise de fermeture
</form> spécifie la fin d'une zone de
formulaire.
• Il peut y avoir plusieurs formulaires sur une
page web, mais ils ne peuvent pas être
imbriqués les uns dans les autres.

H.NOUI 2020-2021
FORMULAIRES
TYPES DE SAISIE HTML 4
Attributs form
Attribut valeur Objet
action URL ou nom de fichier/chemin du script indique où envoyer les informations du formulaire lors de
(Obligatoire) à exécuter la soumission
autocomplete On (valeur par défaut) le navigateur utilise la saisie automatique pour remplir les
(Attribut HTML5) champs du formulaire
Off le navigateur n'utilise pas la saisie automatique pour
remplir le formulaire
Id Alphanumérique, sans espace ; la valeur fournit un identifiant unique pour le formulaire
(Facultatif ) doit être unique sur la page web
method get (valeur par défaut) Avec get les données du formulaire sont ajoutées à l'URL
et envoyées au serveur web
post Cette méthode est plus privée et transmet les données du
formulaire dans le corps de la réponse HTTP ; (préférée
par le W3C)
name Alphanumérique, sans espace, nommez le formulaire de manière à ce qu'il soit facilement
(Facultatif ) commence par une lettre accessible par les langages de script
H.NOUI 2020-2021
FORMULAIRES
TYPES DE SAISIE HTML 4
2. Élément fieldset
• L'élément HTML <fieldset> est utilisé pour
regrouper plusieurs contrôles ainsi que des
étiquettes (<label>) dans un formulaire web.

3. Élément legend
• L'élément HTML <legend>
représente une légende pour le
contenu de son parent <fieldset>.

4. Élément input type text

• Les éléments <input> de type texte créent
des champs de texte de base d'une seule
ligne.

H.NOUI 2020-2021
FORMULAIRES
TYPES DE SAISIE HTML 4
Attributs input
Attribut valeur Objet
type texte Configurer une zone de texte
Id Alphanumérique, sans espace, fournit un identifiant unique pour l’élément du formulaire
(Facultatif ) commence par une lettre
name Alphanumérique, sans espace, nommez le l’élément de manière à ce qu'il soit facilement
(Facultatif ) commence par une lettre accessible par les langages de script
Valeur numérique Configure la largeur de la zone de; si la taille est omise, le
size
navigateur affiche la zone de texte avec la taille par défaut
maxlength Valeur numérique Configure la longueur maximale des données acceptée
autocomplete On (valeur par défaut) saisie automatique activée
(Attribut HTML5) Off saisie automatique désactivée
value Texte ou caractères numériques Attribue une valeur initiale
disabled désactivé Le contrôle des formulaires est désactivé
en lecture seule Le contrôle des formulaires est destiné à l'affichage ; il ne
readonly
peut être modifié
H.NOUI 2020-2021
FORMULAIRES
TYPES DE SAISIE HTML 4
5. Élément input type checkbox
• Élément représenté sous forme de cases qui sont
cochées lorsqu'elles sont activées,

6. Élément input type radio

• Des collections de boutons radio décrivant un
ensemble d'options connexes.

7. Élément input type file

• permettre à l'utilisateur de choisir un ou plusieurs
fichiers sur le stockage de son appareil. Une fois
choisis, les fichiers peuvent être téléchargés vers un
serveur en utilisant la soumission de formulaires
H.NOUI 2020-2021
FORMULAIRES
TYPES DE SAISIE HTML 4
8. Élément input type checkbox
• Élément représenté sous forme de cases qui
sont cochées lorsqu'elles sont activées.

9. Élément input type password

• Permet à l'utilisateur de saisir un mot de passe
en toute sécurité. Le texte saisi est masqué de
manière à ce qu'il ne puisse pas être lu.

10. Élément textarea

• Représente un contrôle d'édition de texte
simple sur plusieurs lignes, permettant aux
utilisateurs de saisir une quantité
importante de texte
H.NOUI 2020-2021
FORMULAIRES
TYPES DE SAISIE HTML 4
11. Élément select
• représente un contrôle qui fournit
un menu d'options

12. Élément input type submit

• Représenté sous forme de boutons. Lorsque
l'événement de clic se produit, l'agent utilisateur
tente de soumettre le formulaire au serveur.

13. Élément input type reset

• Représenté sous forme de boutons, avec un
gestionnaire d'événements de clic qui réinitialise
les entrées du formulaire à leurs valeurs initiales.
H.NOUI 2020-2021
 MÉDIAS INTÉGRÉS

26
H.NOUI 2020-2021
MÉDIAS INTÉGRÉS
INTÉGRATION DE LA VIDÉO AVEC HTML5
• Bien que les navigateurs web aient eu une prise en charge
native des images dès les premiers jours, l'incorporation
d'audio ou de vidéo dans une page web a longtemps nécessité
un plug-in.
• Plug-in : composant logiciel distinct qui ajoute des capacités
au navigateur mais ne fait pas partie du navigateur lui-même,
comme
• Flash d'Adobe,
• QuickTime d'Apple,
• Windows Media Player
• Silverlight de Microsoft
• RealPlayer de RealNetworks.

Ce type de technologie fonctionne bien, mais il présente un certain nombre de problèmes, notamment un
mauvais comportement des fonctionnalités HTML/CSS, ainsi que des problèmes de sécurité et d'accessibilité.

H.NOUI 2020-2021
MÉDIAS INTÉGRÉS
EXEMPLE D’UN PLUGIN VIDEO
• Il n'y a pas si longtemps, si nous voulions intégrer une vidéo dans un
site web ou un article de blog, nous devions recourir à l’emploi d’un
bloc HTML compliqué, un peu comme ce qui suit :

A l'époque, Le support vidéo

n'était pas fourni en tant
qu’élément natif du
navigateur. Au lieu de cela, le
navigateur transmettait la
vidéo à un plugin tiers -
généralement Flash.

H.NOUI 2020-2021
MÉDIAS INTÉGRÉS
AUDIO ET VIDEO COURANTS
Types de fichiers audio courants
• audio et video sont des éléments .wav Créé par Microsoft ; standard pout PC et Mac
HTML5 natifs du navigateur ; aucun .aiff et .aif Populaire sur la plate-forme Mac et PC
plug-in n'est nécessaire. .mp3 Populaire , codec MP3, compression avancée.
• Cependant on doit être conscient du
.ogg open-source, utilise le codec Vorbis.
conteneur (qui est désigné par
l'extension de fichier) et du codec .m4a Format MPEG-4 audio, codec AAC, pris en charge par
QuickTime, iTunes, et les appareils mobiles
(qui est l'algorithme utilisé pour
compresser le média). Types de fichiers vidéo courants
• Il n'existe pas de codec unique pris .mov QuickTime, créé par Apple, utilisé sur Mac et Windows.
en charge par les navigateurs les plus .avi Format de Microsoft pour la plate-forme PC.
répandus.
• EX. le codec H.264 (mp4) .flv compatible avec Flash, supporte le codec H.264
nécessite des frais de licence et .wmv Streaming vidéo développée par Microsoft
n'est pas supporté par les m4v et .mp4 Codec MPEG-4 et H.264, joué par QuickTime, iTunes
navigateurs Firefox et Opera, qui .3gp Codec H.264, diffusion de multimédia sur 3G
prennent en charge les codecs
.ogv et .ogg Format de fichier vidéo open-source,
libres de droits Vorbis et Thora.
.webm codecs vidéo VP8 et VP9, codec audio Vorbis.
H.NOUI 2020-2021
MÉDIAS INTÉGRÉS
ÉLÉMENT AUDIO HTML5
Attributs d'élément audio
• L'élément audio ATTRIBUTS VALEUR USAGE
HTML5 prend en
src (Facultatif ) Nom de fichier nom du fichier audio
charge la lecture
type (Facultatif ) MIME le type MIME du fichier audio (Ex.
des fichiers audio audio/mpeg ou audio/ogg)
dans le navigateur
autoplay (Facultatif ) autoplay indique si l'audio doit commencer à jouer
sans avoir besoin automatiquement
de plug-ins. controls (Facultatif , controls indique si les contrôles doivent être
recommandé) affichés
• L'élément audio
loop (Facultatif ) loop indique si l’audio doit être joué en boucle
commence par la
balise <audio> et preload (Facultatif ) none, aucune
se termine par la metadata, uniquement les métadonnées des fichiers
média
balise </audio>.
auto télécharger le fichier média
title (Facultatif ) Description, texte une brève description textuelle qui peut
être affichée par les navigateurs

H.NOUI 2020-2021 30
MÉDIAS INTÉGRÉS
ÉLÉMENT AUDIO HTML5
• L'exemple de code suivant affiche un contrôleur audio

Tout élément HTML ou texte placé entre le deuxième élément « source » et la balise
de fermeture audio sera affiché par les navigateurs qui ne prennent pas en charge
l'élément audio HTML5. Si l'élément audio n'est pas pris en charge, la version MP3
du fichier sera plutôt disponible pour le téléchargement.
H.NOUI 2020-2021 31
 Attributs d'élément video

ÉLÉMENT VIDEO HTML5

MÉDIAS INTÉGRÉS
• L'élément audio ATTRIBUTS VALEUR USAGE
HTML5 prend en src (Facultatif ) Nom de fichier nom du fichier vidéo
charge la lecture
des fichiers video type (Facultatif ) MIME le type MIME du fichier vidéo (Ex.
dans le video/mp4 ou video/ogg)
navigateur sans autoplay (Facultatif ) autoplay indique si la vidéo doit commencer à jouer
avoir besoin de automatiquement
plug-ins. controls (Facultatif , controls indique si les contrôles doivent être affichés
recommandé)
• L'élément video
commence par la loop (Facultatif ) loop indique si la vidéo doit être jouée en boucle
balise <video> et preload (Facultatif ) none aucune
se termine par la
metadata uniquement les métadonnées des fichiers
balise </video>.
média
auto télécharger le fichier média
title (Facultatif ) Description, texte une brève description textuelle qui peut être
affichée par les navigateurs
poster (Facultatif ) Nom de fichier spécifie une image à afficher si le navigateur
ne peut pas lire la vidéo
height (Facultatif ) nombre hauteur de la vidéo en pixels
width (Facultatif ) nombre largeur de la vidéo en pixels 32
H.NOUI 2020-2021
MÉDIAS INTÉGRÉS
ÉLÉMENT VIDEO HTML5
• L'exemple de code suivant affiche un contrôleur video

Tout élément HTML ou

texte placé entre le
deuxième élément
source et la balise de
fermeture sera affiché
par des navigateurs qui
Poster ne prennent pas en
charge l'élément vidéo
HTML5.

Contrôles
vidéo
H.NOUI 2020-2021 33
INTERNET
RÉFÉRENCES

• “Web Development and Design Foundations with HTML5 - 9th Edition”, Terry Ann Felke-
Morris, Ed.D, Pearson Education Inc, 2019.
• “Foundation HTML5 with CSS3” Craig Cook, Jason Garber, friendsof, 2012
• “Head First HTML and CSS”, Elisabeth Robson, Eric Freeman, O’Reilly Media, Inc., 2012
• https://developer.mozilla.org/
• https://www.w3.org/

34
H.NOUI 2020-2021
 Merci
35
H.NOUI 2020-2021