HTML 5 - S2 - Morad HAJJI

HTML5
Dr Morad HAJJI
1
Plan
1 INTRODUCTION
2 Chapitre I – NOTION DE BALISES
3 Chapitre II – LES BALISES EN BLOC ET LES BALISES EN LIGNE
4 Chapitre III – LES BALISES DE TABLEAU
5 Chapitre IV – LES BALISES D’IMAGE
6 CHAPITRE V – LES BALISES DE FORMULAIRE
7 CHAPITRE VI – LA BALISE D’HYPERLIEN
8 CHAPITRE VII – LES BALISES DE LISTE

2
Introduction
Fonctionnement d’un site Web
Un site Web est un ensemble de fichiers de code et de médias (images, vidéos, etc.) liés
entre eux et disponibles à tout moment via l’Internet.
Un serveur est un ordinateur accessible via le réseau et qui stocke les différentes ressources
de plusieurs sites Web.
Suite à l’exécution d’une URL dans la barre d’adresses d’un navigateur, une requête est
transmise à un serveur Web via le réseau qui la traite et renvoie une réponse sous la forme
d’un flux HTML au navigateur.
Généralement, les sites Web sont classés en deux types à savoir les sites Web statiques et
les sites Web dynamiques.
3
Introduction
Les sites statiques construits à base des pages HTML strictes interprétables par les
navigateurs.
Une page Web dynamique est une page Web dont le contenu HTML est généré
automatiquement à l’aide d’un programme écrit avec un langage spécifique.
4
Introduction
5
Introduction
Historique du langage HTML
Le sigle HTML correspond aux initiales de « HyperText Markup Language ».
La chronologie d’apparition des versions successives de HTML est la suivante :
1. HTML 1 en 1991,
2. HTML 2 en 1994,
3. HTML 3 en 1996,
4. HTML 4 en 1998,
5. En 2000, le W3C lance la version XHTML qui est une variante plus rigoureuse du
langage,
6. En 2009, la version HTML 5 est adoptée par le W3C (Web Consortium) et le WhatWG
(Web Hypertext Application Technology Working Group).
6
Introduction
Le langage de styles CSS
En parallèle à l’évolution successive du langage HTML, le langage CSS, correspondant aux

initiales de « Cascading Style Sheets » qui signifie feuilles de styles en cascade, fut
développé progressivement selon la chronologie suivante :
1. CSS 1 : publié en 1996.

2. CSS 2 : publié en 1998.
3. CSS3 : commencement du développement en 1999.
4. CSS4 : commencement du développement en 2010.
7
Chapitre I – NOTION DE BALISES
Mais au juste comment fonctionne HTML5 et qu’est-ce qu’un langage de balisage ?
Le fonctionnement du HTML est semblable au fonctionnement des outils de traitement de

texte. En fait, un document Word peut comprendre des titres, des paragraphes, des images et
des tableaux auxquels sont associées des polices et des tailles de caractères différentes.
L’outil de traitement de texte laisse apparaître le contenu mis en forme tout en enregistrant les
différents paramètres de mise en page en plus du contenu lui-même en arrière-plan.
8
HTML est un langage de description de document. Sa syntaxe provient du SGML (Standard

Generalized Markup Language) et fait appel à des balises pour structurer un document.
Il est interprété par les navigateurs (Internet Explorer, Firefox, Chrome ...) pour permettre une
représentation visuelle intelligible à l’être humain.
Son rôle se résume en deux types d'actions essentielles :

• La définition des zones de contenus qui sont semblables à des boites emboitables les unes
dans les autres comme les « poupées russes ».
• L’encrage des liens à des parties du contenu d’une page permettant de naviguer sur le
9
Web.
Une page Web est un fichier de type texte qu’on peut éditer avec un éditeur de texte et
consulter en utilisant un navigateur. En effet, la constitution structurelle des différentes parties
d’une page Web est exprimée à l’aide des balises HTML.
10
1. Les balises
Les balises HTML structurent le contenu du document en délimitant les blocs qui seront
amenés à contenir des paragraphes, des titres, différents types de médias (images, sons,
vidéos), des contrôles de formulaires ou encore des liens hypertextes.
En fait, les balises correspondent à des commandes à l’intention du navigateur pour le rendu
du contenu de chacun des éléments constituant le code source d’un document HTML.
11
1. Les balises
En vue de comprendre le mode de fonctionnement des balises, considérons le texte suivant :

Il est <gras>important</gras> d’apprendre le langage <italique>Html5</italique> !
Ce texte peut être interprété par un navigateur de la façon suivante :

1. écrire "Il est" de façon normale puisque rien n’est spécifié,
2. ensuite écrire le mot (et uniquement ce mot) "important" et le mettre en gras,
3. rependre l’écriture normale pour "d’apprendre le langage",
4. écrire cette fois-ci en italique le mot "Html5",
5. et terminer par "!" en écriture normale.
12
1. Les balises
En vue de comprendre le mode de fonctionnement des balises, considérons le texte suivant :

Il est <gras>important</gras> d’apprendre le langage <italique>Html5</italique> !
Ce qui doit donner le résultat attendu suivant :
13
1. Les balises
Ainsi fonctionne principalement le langage HTML. Les instructions à l’intention du

navigateur sont exprimées à l’aide des balises. Généralement, le début de chaque
instruction (commande) commence par une balise ouvrante et se termine par une
balise fermante. À l’exception des balises orphelines dépourvues de balises de
fermetures.
14
1. Les balises
Les éléments d’un contenu doivent être enfermés par une balise, que ce soit du texte,
d’images ou tout autre type multimédia. Les éléments HTML possèdent un nom
déterminé et sont énumérés dans une liste définie dans la spécification du langage. La
structure générale d’un élément HTML :
15
1. Les balises
Ainsi, le contenu d’un élément est systématiquement précédé par une balise
d’ouverture constituée d’un chevron "<", du nom de l’élément considéré et du chevron
fermant ">". Exemple : <p>.
Toute balise de fermeture suit la même règle en plus du signe slash "/" devant le non
de l’élément considéré. Exemple : </p>.
16
1. Les balises
Cependant, il y a des exceptions à cette structure. En effet, il existe des éléments en

HTML qui se constituent d’une seule balise appelée balise orpheline. C’est le cas pour
des éléments dépourvus d’un contenu textuel à l’instar de l’élément retour à la ligne
exprimé en HTML à l’ide de la balise "<br>, comme il est illustré sur la figure :
17
2. Les attributs HTML
Lors de la consultation avec un navigateur, le contenu est interprété en fonction de

l’élément enfermant, tout en appliquant un style par défaut attribué aux différents
éléments du langage HTML.
En effet, chaque élément HTML possède un ensemble de caractéristiques en tant

qu’attributs permettant de préciser des informations complémentaires. Un attribut peut
préciser la taille, la hauteur, la largeur, etc. La spécification du langage HTML définit
un ensemble d’attributs communs à la majorité des éléments de base.
18
La définition des attributs d’un élément se précise dans la balise d’ouverture et sont
séparés par au moins d’un espace. Généralement, chaque attribut prend une seule et
unique valeur. Pour certains éléments particuliers, la présence de certains attributs est
obligatoire. En revanche, les attributs d’un élément sont souvent facultatifs et en
conséquence le programmeur a le libre choix de déterminer leur définition. Nombreux
sont les attributs qui possèdent une valeur par défaut. En conséquence, le navigateur
utilise la valeur par défaut lors de l’omission de la définition d’un attribut dans un
élément.
19
Pour définir la valeur d’un attribut, il faut la spécifier entre guillemets conformément à
la syntaxe illustrée sur la figure :
20
Considérons pour exemple l’élément ‘a’ servant à définir des liens hypertextes vers
d’autres pages ou parties d’autres pages. Pour le fonctionnement correct d’un tel
élément, il faut spécifier la valeur de l’attribut href de la balise <a>. En effet, c’est
l’attribut href qui permet de spécifier la cible du lien considéré.
21
D’autres éléments HTML fonctionnent de la même approche. Par exemple, l’élément

img permettant d’insérer une image dans une page HTML nécessite la spécification
de son attribut src (source). L’attribut src permet de spécifier l’adresse de l’image à
insérer.
22
3. Structure minimale d’une page HTML valide
Le schéma de base d’une page HTML suit une structure standard appelée « structure
minimale d’une page HTML valide ».
Pour éviter qu’un document HTML ne soit correctement interprété par les navigateurs,
son code source doit être valide conformément aux spécifications de standardisation
élaborée par W3C. Dans le cas inverse, les navigateurs risquent de mal interpréter ce
document voire de ne l’interpréter pas et en conséquence n’afficher aucun résultat.
23
En plus, une page HTML valide favorisera son analyse par les moteurs de recherche,
en conséquence la valoriser dans leurs bases d’indexation, c’est-à-dire améliorer son
référencement et ainsi la proposer aux utilisateurs recherchant une information
relative à cette page.
24
La figure suivante montre la structure minimale d’une page HTML valide :
25
a. Le DOCTYPE
L’une des caractéristiques d’un document est son type. Précisément, c’est l’élément
‘DOCTYPE’ (Document Type) qui permet de spécifier le type d’un document HTML 5.
Il est obligatoire de commencer un document HTML 5 par cet élément.
26
b. L’élément HTML
Après l’élément doctype vient l’élément html. Cet élément représente le document
html en soi. La déclaration de cet élément se fait avec la balise ouvrante <html> et la
balise fermante </html>. En fait, cet élément délimite tous les autres éléments d’un
document html.
27
c. Les éléments head et body

Le document est subdivisé en deux éléments : l’en-tête (head) et le corps (body). Ces
deux éléments sont obligatoires ayant chacun un rôle différent.
En effet, l’élément head sert à déclarer des éléments qui fournissent des informations
au navigateur sur le document considéré. Parmi ces informations se trouve le titre du
document ainsi que son encodage. L’encodage permet la représentation correcte des
caractères textuels de différentes langues. En fait, le contenu de l’élément head est
invisible lors de la consultation d’un document html avec un navigateur.
28
c. Les éléments head et body

En revanche, l’élément body sert à définir les éléments du contenu visible du
document html considéré. En fait, l’élément englobe les autres éléments destinés à
produire un résultat visuel, en l’occurrence des paragraphes, des images, des
tableaux, des listes, etc.
29
d. Les éléments title et meta

Dans le cadre de la définition d’une structure minimale d’un document html valide, il
faut déclarer les deux éléments title et meta. Ces deux éléments permettent de fournir
au navigateur des informations essentielles sur le document en question.
30

L’élément title (titre) permet de spécifier le titre du document. Ce titre s’affiche tout en
haut de l’onglet du navigateur correspondant au document.
31

L’élément meta sert à fournir au navigateur beaucoup plus d’informations sur un
document HTML. Cependant, le type de l’information transmise dépend
fondamentalement de l’attribut précisé au niveau de la balise de déclaration (<meta
attribut="valeur">).
32

Sur la figure représentant la structure minimale d’un document html, on précise le type
d’encodage du document. Plusieurs encodages existent permettant aux navigateurs
de produire un affichage correct des différentes lettres constituant le texte du
document, tels que les lettres accentuées. En effet, sur cette figure, on utilise l’attribut
charset (characters set) de l’élément meta en lui affectant la valeur ‘utf-8’
(<meta charset = "UTF-8">) pour ordonner au navigateur l’utilisation de l’encodage
Unicode pour la représentation du texte du document.
33
4. Imbrication des balises et des éléments
Les éléments qui constituent un document HTML5 peuvent s’organiser de deux

façons : soit se succéder les uns après les autres soit s’imbriquer les uns dans les
autres. Sachant que les imbrications des éléments d’un document HTML5 doivent
respecter des spécifications rigoureuses.
34
Exemple :
35
Exemple :
Sur cette figure, on remarque que le titre (<h1>Un très grand titre</h1>) est imbriqué
dans un span (<span> …) qui est imbriqué dans un div (<div id="div_entete"> …).
Le tableau (<table> …), le paragraphe (<p> …) et l’image (<img …>), sont imbriqués
dans un autre div qui succède le premier div. Le résultat de ce code HTML5 est
présenté sur la figure ci-après.
36
Exemple :
37
En effet, l’organisation d’un document HTML5 peut être représentée sous la forme
d’un arbre généalogique des balises. Dans cet arbre chacune des balises peut être un
parente ou un enfant d’une autre balise. Cette représentation confère une structure
hiérarchique au document considéré.
Néanmoins, l’imbrication des balises doit répondre à des critères stricts qui définissent
quels éléments peuvent en contenir d’autres, et quelles sont les conséquences en
termes d’affichage ou de sémantique.
38
La règle la plus triviale : ajoutez une balise de fin à l’intérieur d’un conteneur fils avant
la balise de fin du conteneur (le parent). Si on écrit une balise à l’intérieur d’un autre
conteneur (le parent) de balise, il faut s’assurer de la fermeture du conteneur interne
(le fils) avant de fermer le conteneur externe (le parent). Autrement dit, le premier
élément déclaré doit toujours être le dernier refermé, tandis que le dernier ouvert doit
toujours être le premier fermé. Par exemple, le premier élément déclaré dans un
document HTML5 est l’élément html qui contient les éléments head et body, il doit
donc être le dernier élément refermé.
39
Ainsi, les différents éléments composant un fichier HTML (titres, paragraphes, listes,
liens, images…) s’organisent sous la forme d’un arbre, que l’on nomme également «
arbre du document » (ou DOM pour Document Object Model). Cet arbre généalogique
est composé de fratries et de degrés de parenté qui sont exploités par les sélecteurs
CSS pour cibler les différents éléments du document.
40
Exemple :
41
Chapitre II – LES BALISES EN BLOC ET LES BALISES EN LIGNE
Le langage HTML distingue deux grandes catégories de balises dont le comportement

diffère en termes d’occupation de l’espace disponible, de contenir d’autres conteneurs,
d’alignement, etc. :
• les balises en bloc (block) ;
• et les balises en ligne (inline).
42
I. LES ÉLÉMENTS DE STRUCTURE OU DE BLOC
1. Définition
Les éléments en bloc sont des éléments qui se placent automatiquement les uns en
dessous des autres. Le rendu de ces balises occupe par défaut toute la largeur de la
page (tout l’espace disponible). Généralement, le navigateur insère automatiquement
un espace au-dessus et en dessous du contenu de la balise.
43
Les blocs peuvent contenir d’autres blocs et des éléments en ligne, à l’exception des
paragraphes <p> et des titres <h1>, <h2>,...<h6> qui ne peuvent inclure d’autres
éléments de type bloc.
44
Les éléments de type block possèdent les caractéristiques de disposition suivantes :

• Un élément de type block va toujours prendre toute la largeur disponible au sein de
son élément parent (ou élément conteneur) ;
• Un élément de type block va toujours « aller à la ligne » (créer un saut de ligne
avant et après l’élément), c’est-à-dire occuper une nouvelle ligne dans une page et
ne jamais se positionner à côté d’un autre élément par défaut ;
• Un élément de type block peut contenir d’autres éléments de type block ou de type
inline.
45
Sur la figure ci-dessous, on présente un exemple d’éléments de type bloc :
46
2. Les principales balises de type bloc

Balise Commentaires
<blockquote> Introduit des citations longues.
<div> Conteneur générique de type bloc. Cette balise n’apporte pas de sens
spécifique, à l’instar de son équivalent en ligne <span>. Elle sert à regrouper
d’autres balises bloc ou en ligne.
<dl> Liste de définitions, utile pour structurer les éléments associant des définitions
ou contenus à des termes ou à des titres. Ces listes distinguent les titres
(<dt>) des éléments de définition (<dd>).
<form> Balise délimitant un formulaire interactif. Elle contient généralement des
éléments d’interface (champs de texte, boutons de validation, cases à cocher,
etc.). Cet élément doit renfermer immédiatement d’autres éléments de type 47
bloc.
2. Les principales balises de type bloc

Balise Commentaires
<h1>, <h2>, HTML prévoit six niveaux de titres, hiérarchiquement placés sous le titre
principal (<h1>). Rappel : ces éléments constituent une exception à la règle
… <h6> des blocs ; ils ne peuvent pas contenir d’autres blocs.
<ol>, <ul> Ces deux balises désignent des listes ordonnées (<ol>) ou à puces simples
(<ul>). Elles comportent exclusivement les éléments d’objet de liste (<li>).
<p> Balise désignant un paragraphe de texte. Cet élément constitue une exception
à la règle des blocs car il ne peut en contenir d'autres.
<table> Tableau contenant des données. Les cellules du tableau dont d’abord
rassemblées sous forme de rangées ou lignes (<tr>).
48
II. LES BALISES EN LIGNE
1. Définition
Les balises en ligne se placent toujours les unes à côté des autres à l’inverse des
balises en bloc qui se placent les unes après les autres. Ces balises permettent de
créer des éléments HTML5 sans forcer un retour à la ligne. Les éléments en ligne sont
prévus pour enrichir localement des portions de texte (lien hypertexte, emphase,
renforcement, etc.).
49
Les éléments de type inline possèdent les caractéristiques suivantes qui vont les
différencier des éléments de type block :
• Un élément de type inline ne va occuper que la largeur nécessaire à l’affichage de
son contenu par défaut ;
• Les éléments de type inline vont venir essayer de se placer en ligne, c’est-à-dire à
côté (sur la même ligne) de l’élément qui les précède dans le code HTML ;
• Un élément de type inline peut contenir d’autres éléments de type inline mais ne
devrait pas contenir aucun élément de type block.
50
De plus, notez que généralement on ne va pas pouvoir appliquer les propriétés width
ou height à un élément de type inline puisque la caractéristique principale de ce type
d’éléments est de n’occuper que la place nécessaire à l’affichage de leur contenu.
Néanmoins, on peut classifier les éléments en ligne en deux sortes de catégories :
« remplacés » et « non-remplacés ».
51
Seuls les éléments remplacés peuvent être redimensionnés. Ils acceptent des attributs
de dimensions tels que : height et width. Il s’agit entre autres des éléments <img>,
<input>, <textarea>, <select> et <object>.
Les autres (non-remplacés) n’ont pas de dimension, et n’occupent que la place

nécessaire à leur contenu. C’est le cas des éléments <strong>, <em>, <a>, <span>,
etc.
52
2. Les principales balises en ligne

Balise Commentaires
<a> Désigne un lien hypertexte. Elle s’accompagne de l’attribut href, qui renferme la cible du lien
(son contenu représentant le texte à cliquer pour activer le lien).
<em> Met en emphase une portion de texte. Quand la police utilisée est droite, la plupart des
navigateurs graphiques la traduisent comme une mise en italique.
<img> Inclut une image dans le document. Cette balise s’accompagne des attributs alt (texte
alternatif pour malvoyants ou navigateurs en mode texte) et src (qui indique le chemin vers
l’image). Le format de fichier de l’image, en théorie libre, est souvent limité à ce que
comprennent les navigateurs – c’est-à-dire GIF, JPEG, et PNG.
<span> Conteneur en ligne générique, dépourvu d’un sens précis mais qui peut servir à regrouper
d’autres éléments au fil du texte. Son équivalent est l’élément <div>.
<strong> Indique un renforcement, généralement représenté en gras dans les navigateurs graphiques.
53
Chapitre III – LES BALISES DE TABLEAU
Un tableau en HTML représente un ensemble organisé de données sous forme de

lignes et de colonnes. Les tableaux constituent une très importante notion de
représentation des données. Pour la création d’un élément tableau en HTML5, on
utilise la balise <table>. Un tableau se compose de lignes et de colonnes dont les
intersections forment des cellules.
54
1. Les éléments constitutifs essentiels d’un tableau HTML
Pour créer un tableau fonctionnel en HTML, on utilise au minimum trois éléments

suivants :
• Un élément table définissant le tableau en soi ;

• Des éléments tr permettant d’ajouter des lignes dans un tableau ;
• Des éléments td permettant d’ajouter des cellules dans des lignes et ainsi de créer
automatiquement de nouvelles colonnes.
55
1. Les éléments constitutifs essentiels d’un tableau HTML
L’élément HTML table représente le tableau en soi. La création de cet élément se fait
au moyen d’une paire de balises ouvrante <table> et fermante </table>. Entre ces
deux balises, on place les différents autres éléments d’un tableau.
Les éléments tr et td sont également représentés sous la forme d’une paire de balises
ouvrantes et fermantes avec leur contenu entre les balises.
56
2. TABLEAU SIMPLE
Pour créer un tableau en HTML, il faut savoir que les tableaux HTML se créent ligne
par ligne. Pour ajouter un élément de type ligne dans un tableau, on utilise la balise
<tr>. Ensuite, pour ajouter un élément de type cellule dans une ligne dans un tableau,
il faut utiliser la balise <td>. On peut ajouter autant de cellules au travers de la balise
<td> dans une ligne d’un tableau.
Il faut retenir la syntaxe et l’ordre d’imbrication des éléments. Les éléments td se

situent à l’intérieur des éléments tr : on utilise un nouvel élément td à chaque fois
qu’on veut ajouter une cellule au sein d’une même ligne. 57
2. TABLEAU SIMPLE
Exemple : pour créer un tableau en HTML contenant 3 lignes contenant chacune 4

cellules (c’est-à-dire un tableau de 3 lignes, 4 colonnes), on utilise un élément table
qui va contenir 3 éléments tr et chaque élément tr va contenir 4 éléments td :
58
2. TABLEAU SIMPLE
Exemple :
59
2. TABLEAU SIMPLE
Exemple :
60
3. LIGNE D’EN-TÊTE
L’en-tête est une ligne particulière d’un tableau. Elle renseigne des informations au
lecteur sur les données des différentes colonnes d’un tableau. Chacune des cellules
de l’en-tête correspond à une colonne d’un tableau. Pour la création d’un en-tête de
tableau, il suffit d’utiliser l’élément <th></th> à la place de l’élément <td></td> dans la
première ligne du tableau. En général, le contenu de l’élément <th></th> apparaît en
gras.
61
3. LIGNE D’EN-TÊTE
Exemple :
62
4. TITRE (LEGENDE) D’UN TABLEAU
Pour la création d’un titre d’un tableau, aussi appelé une légende, il suffit d’utiliser la
balise <caption>. Le titre du tableau se positionne en haute et au centre du tableau
concerné.
63
4. TITRE (LEGENDE) D’UN TABLEAU
Exemple :
64
5. TABLEAU STRUCTURE
En HTML, on est souvent amené à créer des tableaux assez longs. Dans ce cas
particulier, il est judicieux de structurer les tableaux en les subdivisant en trois parties
distinctes, à savoir : le haut du tableau contenant généralement la ligne d’en-tête, le
corps du tableau contenant les informations du tableau en soi et le pied du tableau
servant à calculer des totaux, à rappeler les informations d’en-tête si le tableau est
vraiment long ou à d’autres fins.
65
Pour définir chacune des parties d’un tableau structuré, il existe trois éléments HTML
spécifiques à cet effet :
• thead pour définir la tête du tableau ;
• tbody pour définir le corps du tableau ;
• tfoot pour définir le pied du tableau.
66
Exemple :
67
6. FUSION DE LIGNES OU DE COLONNES
La fusion des cellules consiste à les regrouper pour produire une seule cellule en
remplacement des cellules considérées. Cette fusion est établie à l’aide des attributs
colspan et rowspan de la balise ˂td˃. L’attribut colspan permet de fusionner
plusieurs cellules adjacentes d’une même ligne. Tandis que l’attribut rowspan permet
de fusionner plusieurs cellules adjacentes d’une même colonne.
68
a. Fusion de lignes
Pour fusionner des lignes, on utilise l’attribut rowspan=x dans la balise ˂td˃ de la
cellule fusionnée ; où x représente le nombre de lignes à fusionner verticalement.
69
a. Fusion de lignes
Exemple :
70
a. Fusion de lignes
Exemple :
71
b. Fusion de colonnes
Pour fusionner plusieurs colonnes, on utilise l’attribut colspan=x dans la balise ˂td˃
de la cellule fusionnée ; où x est le nombre de colonnes à fusionner horizontalement.
72
Exemple :
73
Exemple :
74
Chapitre IV – LES BALISES D’IMAGE
Pour insérer une image au sein d’un document HTML on exploite l’élément HTML
img. Pour définir l’insertion d’une image dans un fichier HTML, on utilise la balise
orpheline <img>.
75
1. DIFFÉRENTS FORMATS D’IMAGE
Les images peuvent êtes enregistrées sous différents formats. La liste suivante
regroupe les formats d’image les plus répondus :
• Le format GIF : utilisé pour les petits éléments graphiques, les icônes, les petites
images animées avec un seul niveau de transparence.
• Le format JPEG : utilisé pour les photographies. Il ne supporte pas la
transparence.
• Le format PNG : utilisé pour les images de haute qualité avec plusieurs niveaux
de transparence.
76
2. INSÉRER DES IMAGES EN HTML
L’insertion d’images en HTML se fait au moyen de l’élément HTML img. Cet élément
est représenté par une balise orpheline <img>. Au sein de l’élément img, il faut
obligatoirement préciser l’attribut src. Il est aussi préférable de définir l’attribut alt.
L’attribut src (source) prend comme valeur l’adresse de l’image (adresse relative ou
absolue).
77
L’attribut alt (alternative) contient un texte alternatif décrivant l’image. Dans le cas où
l’image ne peut pas être affichée, le texte attribué à l’attribut alt s’affiche en lieu et
place de l’image concernée. En plus, l’attribut alt améliore l’accessibilité pour les
malvoyants qui vont pouvoir « lire » ce texte grâce à leurs lecteurs particuliers.
Un élément de type image dispose d’une dimension constituée d’une largeur (width)
et d’une hauteur (height). Ainsi, pour redimensionner une image, il faut utiliser le CSS
ou spécifier les attributs width et height dans l’élément img en HTML.
78
Exemple :
79
CHAPITRE V – LES BALISES DE FORMULAIRE
I. DÉFINITION ET RÔLE DES FORMULAIRES HTML
Les formulaires accroissent (augmentent) l’interactivité de l’utilisateur avec le serveur

Web. En effet, ils permettent d’envoyer au serveur Web des données saisies ou
choisies par l’utilisateur. Ainsi, ils permettent aux utilisateurs de saisir un texte, choisir
une option, valider une action, etc.
80
I. DÉFINITION ET RÔLE DES FORMULAIRES HTML
Sur la figure, on présente l’architecture d'un site Web.
Base de
Langages côté
données
serveur
Langages côté
client
Affichage
Fichier
HTML/CSS ,
JavaScript, etc.
Formulaire Serveur Web
PHP, JAVA, .Net, etc.
@ Email
81
II. L’ELEMENT FORM ET SES ATTRIBUTS
Pour créer un formulaire, il suffit d’utiliser la balise HTML <form>. Pour pouvoir
fonctionner correctement, un élément form a besoin de deux attributs : les attributs
method et action.
L’attribut method sert à indiquer comment doivent être envoyées les données saisies
par l’utilisateur. Cet attribut peut prendre deux valeurs : get et post.
82
En choisissant get, on indique que les données doivent transiter via l’URL (sous forme
de paramètres) tandis qu’en choisissant la valeur post on indique qu’on veut envoyer
les données du formulaire via transaction post HTTP.
Concrètement, si l’on choisit l’envoi via l’URL (get), nous serons limités dans la
quantité de données pouvant être envoyées et surtout les données vont être envoyées
en clair. En conséquence, il faut absolument éviter l’utilisation de cette méthode pour
toute information sensible dans un formulaire.
83
En revanche, la méthode l’envoi de données via post transaction HTTP (post)

permet d’envoyer les données sans limite de quantité de données.
En plu,s les données envoyées ne sont pas visibles dans l’URL.
De manière générale, on préfère l’utilisation de cette méthode dans le cas de l’envoi

des données désignées au stockage dans une base de données.
84
L’attribut action permet de spécifier l’URL de la page qui va recevoir le formulaire et

ainsi traiter les données. Il faut se rappeler que le langage HTML ne permet pas la
manipulation les données des formulaires et qu’il faut utiliser un autre langage comme
le PHP pour le faire.
En plus de ces deux attributs, la balise <form> dispose de l’attribut Enctype

permettant de définir la manière dont les données du formulaire seront encodées lors
de l’envoi des données au serveur.
85
L’attribut Enctype ne peut être utilisé que lorsque la valeur de l’attribut method est
« post ». Des valeurs possibles de cet attribut et leur signification :
Valeur Description
application/x-www-form-urlencoded Par défaut. Tous les caractères sont encodés avant l’envoi
(les espaces sont convertis en symboles ‘+’ et les caractères
spéciaux en valeurs hexadécimales du code ASCII).
multipart/form-data Aucun caractère n’est encodé. Cette valeur est utilisée dans
les cas où le formulaire contient un champ d’envoi de fichier
au serveur.
text/plain ou text/html Elles sont utilisées dans les cas d’envoi des données par
email. Elles indiquent si les données seront envoyées sous
forme de texte ou de code
86
En conséquence, on obtient la syntaxe générale suivante pour la création d’un

formulaire :
87
III. LA BALISE CHAMP <INPUT> ET SES VARIANTES
En général, pour créer un champ dans un formulaire, on utilise la balise <input /> dont
les principaux attributs sont les suivants :
Attribut Fonction Exemple
type Définir le type du champ type="text"
Name ou id Identifier le champ dans le formulaire afin de récupérer son id="matricule"
contenu
Size Fixer la longueur de la zone de saisie en nombre de caractères size ="10"
Maxlength Limiter le nombre de caractères à saisir dans un champ de maxlength ="15"
saisie
Value Définir la valeur par défaut du champ value="Fa-405-00000"
Readonly Indiquer si le champ est en lecture seule. Dans ce cas, la readonly="readonly"
valeur de ce champ ne peut être modifiée.
Placeholder Donner une indication sur le contenu du champ. (HTML 5 placeholder="Votre login"
seulement) 88
Ainsi, on obtient la syntaxe générale suivante pour la création d’un champ d’un
formulaire HTML :
89
Ainsi, on obtient la syntaxe générale suivante pour la création d’un champ d’un
formulaire HTML :
On peut définir un libellé pour un champ avec la balise <label></label>.
En plus, pour organiser le formulaire en regroupant les champs ayant trait au même
sujet, on utilise les balises <fieldset></fieldset> pour encadrer les éléments à
regrouper.
90
La balise <input /> peut être utilisée à plusieurs fins dans un formulaire. Parmi les
multiples usages, nous avons : les champs de saisie monoligne, les mots de passe,
les champs d’envoi de fichiers et divers autres champs apparus surtout avec l’arrivée
de HTML 5.
91
1. LE CHAMP DE SAISIE MONOLIGNE
Dans une zone de saisie monoligne, le texte s’écrit sur une seule ligne sans aller à la
ligne. Pour créer ce type de champ, on définit la valeur de l’attribut type à "text".
92
2. LE CHAMP DE SAISIE DE MOT DE PASSE

Il suffit de donne la valeur "password" à l’attribut type pour créer un champ de saisie
de mot de passe. Ainsi, on pourra par exemple définir le formulaire suivant :
93
3. LES CHAMPS D’ENVOI DE FICHIER

Il suffit de définir l’attribut type de la balise <input> à "file" pour créer un champ
d’envoi de fichier. Dans ce cas, un bouton Parcourir ou Browse apparaît à droite de la
zone.
Pour utiliser un champ d’envoi de fichier dans un formulaire, la balise <form> doit
obligatoirement avoir les attributs method et enctype avec les valeurs respectives
post et multipart/form-data.
94
Exemple :
95

Pour restreindre les fichiers à envoyer à des types précis, on utilise l’attribut accept
dont la valeur est la liste des types MIME acceptés.
Exemple :
96

Pour limiter la taille des fichiers à envoyer, on insère un champ caché dont l’attribut
name doit avoir comme valeur MAX_FILE_SIZE et l’attribut value doit avoir la taille
maximale du fichier en octets.
97

Exemple exhaustif :
98

Exemple exhaustif :
99
4. LES BOUTONS RADIO

Il suffit de définir la valeur de l’attribut type à "radio" pour créer une liste d’options à
choix unique. Chacune des options appartenant au même groupe doit la même valeur
de l’attribut name.
En revanche, la valeur qui sera envoyée au serveur est celle définie dans l’attribut
value de l’option choisie par l’utilisateur.
100

Il suffit de donner la valeur "checked" à l’attribut checked (checked="checked") en
vue de définir l’option choisie par défaut parmi les options dans groupe d’options. On
obtient la syntaxe suivante :
101

Exemple :
102
5. LES BOUTONS DE CHOIX MULTIPLES OU CASES À COCHER

Ils permettent de faire plusieurs choix dans un même groupe de cases à cocher. Ils
ont les mêmes arguments que les boutons radio. Néanmoins, l’attribut type doit
prendre la valeur "checkbox". La syntaxe est la suivante :
103
5. LES BOUTONS DE CHOIX MULTIPLES OU CASES À COCHER

Exemple :
104
6. BOUTONS D’ENVOI ET DE RÉINITIALISATION DE FORMULAIRE

On utilise les boutons d’envoi pour envoyer les données du formulaire au serveur.
L’appui sur ce bouton exécute, généralement, le script inscrit dans la valeur de
l’attribut action de la balise <form>. On utilise la syntaxe suivante :
105

Le bouton de réinitialisation permet de rafraichir le formulaire afin de retrouver les
valeurs de départ. On utilise la syntaxe suivante :
106

Il suffit de donner la valeur "image" à l’attribut type d’un élément <input> pour utiliser
une image sous forme de bouton d’envoi. Autrement dit, le bouton d'envoi aura la
forme d'une image plutôt que de contenir un texte. Dans ce cas, on utilise la syntaxe
suivante :
107

Exemple :
108
Nouveaux types de champs HTML5 de saisie :

Valeur Description
color Définit un sélecteur de couleur
date Définit un champ date au format (an, mois, jour)
datetime Définit un champ de type date et heure au format (an, mois, jour, heure, minute, seconde)
email Définit un champ devant contenir une adresse email
month Définit un champ de type mois
number Définit un champ de saisie numérique
range Définit un curseur permettant de choisir un nombre dans un intervalle.
search Définit un champ de recherche
tel Définit un champ de saisie de numéro de téléphone
time Définit un champ de saisie de l’heure
url Définit un champ de saisie d’adresse URL
week Définit un champ de saisie de semaine et d’année.
109
IV. LES AUTRES ÉLÉMENTS DE FORMULAIRE
1. LES LISTES
Il s’agit de listes déroulantes ou de listes simples. Pour créer une liste déroulante on
utilise les balises <select></select> avec à l’intérieur des balises <option></option>
pour chaque élément de la liste. Les attributs de <option> sont :
• value : définit la valeur envoyée au serveur par le formulaire ;
• selected : pour définir si l’option est choisie par défaut.
110
1. LES LISTES
Pour autoriser le choix multiple de que plusieurs éléments en même temps d’une liste
de choix, il suffit de donner la valeur "multiple" à l’attribut "multiple"
(multiple="multiple") de la balise <select>.
On utilise la syntaxe suivante :
111
1. LES LISTES
Exemple 1 :
112
1. LES LISTES
Exemple 1 :
113
1. LES LISTES
Exemple 2 :
114
1. LES LISTES
Exemple 2 :
115
2. CHAMP DE SAISIE MULTILIGNE

Pour créer un champ de saisie d’un texte de plusieurs linges, tels que les
commentaires, les descriptions, etc., il faut utiliser la balise <textarea></textarea>.
Les attributs généralement exploités de cette balise sont :
• Name : définit le nom de l’élément.

• Cols : définit le nombre de caractères visibles sur la largeur de la zone de saisie.
• Rows : définit le nombre de lignes visibles sur la hauteur de la zone de saisie.
• Readonly : indique que la valeur par défaut définie ne peut être modifiée.
116
2. CHAMP DE SAISIE MULTILIGNE

Pour définir une valeur par défaut pour la zone de saisie, il suffit de placer le texte
entre les balises <textarea> et </textarea>. On utilise la syntaxe suivante :
117
2. CHAMP DE SAISIE MULTI-LIGNE

Exemple :
<textarea name="comment" cols="50" rows="5">

Entrez un commentaire sur notre service ici
</textarea>
118
CHAPITRE VI – LA BALISE D’HYPERLIEN
Un lien hypertexte (hyperlien) est un élément HTML qui renvoie le visiteur à partir
d’une page à une autre page, à un emplacement de la page du même site ou d’un
autre site Web. Un élément hypertexte est délimité par la balise <a>. On utilise la
syntaxe générale suivante :
<a href="url_destination" title="Infobulle" target="cible ">Texte du lien</a>
119
L’attribut href (pour Hypertext REFerence) sert à définir le chemin de la destination

ciblée par le lien. L’attribut title permet de spécifier un texte d’infobulle qui apparaîtra
quand le visiteur survole le texte du lien avec la souris. L’attribut target permet de
préciser la fenêtre cible dans laquelle de destination va s’afficher. Les valeurs
possibles de l’attribut target sont :
Valeur Description
_self Affichage dans le cadre courant (par défaut).
_blank Ouvre le lien dans une nouvelle fenêtre.
_top Affichage dans la totalité de la fenêtre courante.
_parent Affichage dans le cadre qui enveloppe la structure courante.
120
Il existe plusieurs situations d’utilisation des liens hypertextes en fonction de

l’emplacement de la cible ou bien de l’usage que l’on veut faire du fichier cible. Parmi
d’autres, on peut citer :
• Lien vers un autre site Web

• Lien vers une autre page de son propre site
• Lien vers une ancre
• Envoyer un email ou télécharger un fichier par le lien
121
1. LIEN VERS UN AUTRE SITE WEB
Pour créer un lien vers un autre site Web, il suffit de préciser dans l’attribut href
l’adresse URL absolue du site Web de destination.
Exemples de liens vers le site Web www.google.com et vers la page HTML5 du site
https://fr.wikipedia.org :
<a href="http://www.google.com">Accédez au Google </a>

<a href="https://fr.wikipedia.org/wiki/HTML5"> HTML5 — Wikipédia</a>
122
2. LIEN VERS UNE AUTRE PAGE DU MÊME SITE WEB
En fonction de l’emplacement de la page source et la page cible du lien, il peut y avoir

deux situations dans ce cas de figure. Soit un site Web organisé selon l’arborescence
ci-dessous :
monsite
|--index.html
|---Contenu
|---inscription.html
|---produit.html
123
a. Les deux pages sont dans le même dossier

Dans ce cas de figure, il faut spécifier le nom de la page dans l’attribut href.
Exemple : Un lien dans la page produit.html vers la page inscription.html du site Web :
<a href="inscription.html"> Inscription </a>
124
b. Les deux pages sont dans des dossiers différents

Lorsque la page cible se trouve dans un sous-dossier du dossier courant, la valeur de
l’attribut href s’écrira : sous-dossier/pagecible.
Exemple : Pour créer un lien dans la page index.html vers la page inscription.html, il
suffit d’écrire :
<a href="contenu/inscription.html"> Inscription </a>

125
b. Les deux pages sont dans des dossiers différents

Dans le cas où la page cible se trouve dans le dossier parent du dossier courant, la
valeur de l’attribut href s’écrira : ../pagecible.
Exemple : Pour créer un lien dans la page inscription.html vers la page index.html, on
écrira :
<a href="../index.html"> Accueil </a>
126
3. LIEN VERS UNE ANCRE
Une ancre est une sorte de point de repère que l’on place sur une page Web pour
faire référence à une portion de cette page. Elle est très souvent utilisée pour créer un
lien permettant d’aller directement au bas ou en haut de la page.
Pour créer une ancre, on ajoute l’attribut id dans une balise qui servira de repère sur
la page. La syntaxe de création d’une ancre :
<nom_balise id="nom_ancre">contenu de la balise</nom_balise>
127
Pour faire référence à une ancre, il faut utiliser le signe dièse (#) suivi du nom de
l’ancre. Plusieurs cas peuvent se produire :
a. Cas d’une ancre interne

Dans ce cas, le lien pointe vers un emplacement (ancre) situé sur la même page. La
Syntaxe d’une ancre interne :
<a href="#nom_ancre">Texte du lien vers l’ancre</a>
128
b. Cas d’une ancre située sur une page du même site

Dans ce cas, le lien pointe vers un emplacement (ancre) situé sur une page différente
de la page courante. La Syntaxe est la suivante :
<a href="nompage#nom_ancre">Texte du lien vers l’ancre</a>
Exemple :
<a href="client.html#inscription">Inscription</a>
129
c. Cas d’une ancre située sur une page d’un autre site
Dans ce cas, le lien pointe vers un emplacement (ancre) situé sur une page d’un autre
site. La Syntaxe est la suivante :
<a href="http://url_site/page#nom_ancre">Lien vers l’ancre</a>
Exemple :
<a href="https://fr.wikipedia.org/wiki/HTML5#Doctype">HTML5 et Doctype</a>
130
CHAPITRE VII – LES BALISES DE LISTE
Les balises de liste permettent de créer des listes, d’énumérer des éléments, de créer
des sommaires, des menus, etc. Il existe 4 différents types de listes :
• Les listes non ordonnées (à puces).
• Les listes ordonnées (numérotées).
• Les listes imbriquées.
• Les listes de définitions.
131
1. LES LISTES NON ORDONNES OU LISTES A PUCES
Les listes non ordonnées sont définies par la balise <ul> et chaque item (élément) est
défini par la balise <li>. La Syntaxe est la suivante :
<ul type="type_puce">
<li>Item 1</li>
<li>Item 2</li>
…
<li>Item n</li>
</ul>
132
Il existe plusieurs types de puces. Le type est précisé par l’attribut type. Les principaux
types de puces utilisés sont :
• Disc
• Circle
• Square
133
Exemple :
<ul type="circle"> <ul type="square"> <ul type="disc">
<li>Algorithmique</li> <li>Algorithmique</li> <li>Algorithmique</li>
<li>Merise</li> <li>Merise</li> <li>Merise</li>
<li>Développement Web</li> <li>Développement Web</li> <li>Développement Web</li>
</ul> </ul> </ul>
134
2. LES LISTES ORDONNÉES
Pour créer des listes ordonnées, il suffit d’utiliser la balise <ol>. Et pour créer chaque
élément d’une liste, il suffit d’utiliser la balise <li>. L’attribut start permet de définir le
début de la numérotation. Pour inverser la numérotation, on ajoute l’attribut reversed
dans la balise <ol>. La syntaxe est la suivante :
<ol>
<li>Item 1</li>
<li>Item 2</li>
…
<li>Item n</li>
</ol> 135
2. LES LISTES ORDONNÉES
Exemple :
<ol> <ol start="2"> <ol reversed>
<li>Introduction</li> <li>Introduction</li> <li>Introduction</li>
<li>Les causes</li> <li>Les causes</li> <li>Les causes</li>
<li>Les conséquences</li> <li>Les conséquences</li> <li>Les conséquences</li>
<li>Les perspectives</li> <li>Les perspectives</li> <li>Les perspectives</li>
<li>Conclusion</li> <li>Conclusion</li> <li>Conclusion</li>
</ol> </ol> </ol>
136
3. LES LISTES IMBRIQUÉES

Il est possible de combiner une liste numérotée avec une liste à puces.
<ol>
<li> item 1
<ul>
<li>Item 11</li>
<li>Item 12</li>
…
<li>Item 1n</li>
</ul>
</li>
<li>Item 2</li>
…
<li>Item m</li>
137
</ol>
3. LES LISTES IMBRIQUÉES

<ol>
<li>Introduction</li>
Exemple : <li>Les causes
<ul>
<li>Les causes lointaines</li>
<li>Les causes immédiates</li>
<li>Les causes internes</li>
</ul>
</li>
<li>Les conséquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol>
138
4. LES LISTES DE DÉFINITIONS
Ce type de liste permet d’associer un terme avec sa description. Elle est utile pour la
création de glossaire ou de dictionnaire par exemple. On la définit en utilisant la balise
<dl>. Ensuite, on indique chaque terme de la liste avec la balise <dt> et sa description
avec la balise <dd>.
139

La syntaxe générale est la suivante :
140
Exemple : <dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>URL</dt>
<dd>Uniform Resource Location</dd>
<dt>Internet</dt>
<dd>Réseau mondial d'ordinateurs</dd>
<dt>HTTP</dt>
<dd>HyperText Transfert Protocol</dd>
</dl>
141

HTML 5 - S2 - Morad HAJJI

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 5 - S2 - Morad HAJJI

Transféré par

Droits d'auteur :

Formats disponibles

HTML5

2 Chapitre I – NOTION DE BALISES

3 Chapitre II – LES BALISES EN BLOC ET LES BALISES EN LIGNE

4 Chapitre III – LES BALISES DE TABLEAU

5 Chapitre IV – LES BALISES D’IMAGE

6 CHAPITRE V – LES BALISES DE FORMULAIRE

7 CHAPITRE VI – LA BALISE D’HYPERLIEN

8 CHAPITRE VII – LES BALISES DE LISTE

Le sigle HTML correspond aux initiales de « HyperText Markup Language ».

La chronologie d’apparition des versions successives de HTML est la suivante :

En parallèle à l’évolution successive du langage HTML, le langage CSS, correspondant aux

1. CSS 1 : publié en 1996.

Mais au juste comment fonctionne HTML5 et qu’est-ce qu’un langage de balisage ?

Le fonctionnement du HTML est semblable au fonctionnement des outils de traitement de

HTML est un langage de description de document. Sa syntaxe provient du SGML (Standard

Son rôle se résume en deux types d'actions essentielles :

En vue de comprendre le mode de fonctionnement des balises, considérons le texte suivant :

Ce texte peut être interprété par un navigateur de la façon suivante :

En vue de comprendre le mode de fonctionnement des balises, considérons le texte suivant :

Ce qui doit donner le résultat attendu suivant :

Ainsi fonctionne principalement le langage HTML. Les instructions à l’intention du

Cependant, il y a des exceptions à cette structure. En effet, il existe des éléments en

Lors de la consultation avec un navigateur, le contenu est interprété en fonction de

En effet, chaque élément HTML possède un ensemble de caractéristiques en tant

D’autres éléments HTML fonctionnent de la même approche. Par exemple, l’élément

La figure suivante montre la structure minimale d’une page HTML valide :

c. Les éléments head et body

c. Les éléments head et body

d. Les éléments title et meta

d. Les éléments title et meta

d. Les éléments title et meta

d. Les éléments title et meta

Les éléments qui constituent un document HTML5 peuvent s’organiser de deux

Le langage HTML distingue deux grandes catégories de balises dont le comportement

I. LES ÉLÉMENTS DE STRUCTURE OU DE BLOC

I. LES ÉLÉMENTS DE STRUCTURE OU DE BLOC

I. LES ÉLÉMENTS DE STRUCTURE OU DE BLOC

Les éléments de type block possèdent les caractéristiques de disposition suivantes :

I. LES ÉLÉMENTS DE STRUCTURE OU DE BLOC

Sur la figure ci-dessous, on présente un exemple d’éléments de type bloc :

I. LES ÉLÉMENTS DE STRUCTURE OU DE BLOC

2. Les principales balises de type bloc

I. LES ÉLÉMENTS DE STRUCTURE OU DE BLOC

2. Les principales balises de type bloc

II. LES BALISES EN LIGNE

II. LES BALISES EN LIGNE

II. LES BALISES EN LIGNE

II. LES BALISES EN LIGNE

Les autres (non-remplacés) n’ont pas de dimension, et n’occupent que la place

II. LES BALISES EN LIGNE

2. Les principales balises en ligne

Un tableau en HTML représente un ensemble organisé de données sous forme de

1. Les éléments constitutifs essentiels d’un tableau HTML

Pour créer un tableau fonctionnel en HTML, on utilise au minimum trois éléments

• Un élément table définissant le tableau en soi ;

1. Les éléments constitutifs essentiels d’un tableau HTML

Il faut retenir la syntaxe et l’ordre d’imbrication des éléments. Les éléments td se

Exemple : pour créer un tableau en HTML contenant 3 lignes contenant chacune 4

4. TITRE (LEGENDE) D’UN TABLEAU

4. TITRE (LEGENDE) D’UN TABLEAU

6. FUSION DE LIGNES OU DE COLONNES

6. FUSION DE LIGNES OU DE COLONNES

6. FUSION DE LIGNES OU DE COLONNES