2020-2021

Support de cours du HTML 5

Prof. Morad HAJJI

EST MEKNÈS
Table des matières
INTRODUCTION ................................................................................................................................. 2
Chapitre I – NOTION DE BALISES................................................................................................... 5
1. LES BALISES ........................................................................................................................... 5
2. LES ATTRIBUTS HTML ....................................................................................................... 8
3. STRUCTURE MINIMALE D’UNE PAGE HTML VALIDE ............................................. 9
4. IMBRICATION DES BALISES ET DES ELEMENTS ..................................................... 12
Chapitre II – LES BALISES EN BLOC ET LES BALISES EN LIGNE ...................................... 15
I. LES ELEMENTS DE STRUCTURE OU DE BLOC ......................................................... 15
II. LES BALISES EN LIGNE .................................................................................................... 16
Chapitre III – LES BALISES DE TABLEAU .................................................................................. 18
1- LES ELEMENTS CONSTITUTIFS ESSENTIELS D’UN TABLEAU HTML ............... 18
2- TABLEAU SIMPLE .............................................................................................................. 18
3- LIGNE D’EN-TETE .............................................................................................................. 19
4- TITRE (LEGENDE) D’UN TABLEAU ............................................................................... 20
5- TABLEAU STRUCTURE ..................................................................................................... 21
6- FUSION DE LIGNES OU DE COLONNES........................................................................ 22
7- MISE EN FORME D’UN TABLEAU .................................................................................. 25
Chapitre IV – LES BALISES D’IMAGE .......................................................................................... 26
1- DIFFERENTS FORMATS D’IMAGE ................................................................................. 26
2- INSERER DES IMAGES EN HTML ................................................................................... 26
CHAPITRE V – LES BALISES DE FORMULAIRE ..................................................................... 27
I- DEFINITION ET ROLE DES FORMULAIRES HTML .................................................. 27
II- L’ELEMENT FORM ET SES ATTRIBUTS....................................................................... 28
III- LA BALISE CHAMP <INPUT> ET SES VARIANTES .................................................... 30
IV- LES AUTRES ELEMENTS DE FORMULAIRE ............................................................... 36
CHAPITRE VI – LA BALISE D’HYPERLIEN .............................................................................. 39
1- LIEN VERS UN AUTRE SITE WEB................................................................................... 40
2- LIEN VERS UNE AUTRE PAGE DU MEME SITE WEB ............................................... 40
3- LIEN VERS UNE ANCRE .................................................................................................... 41
CHAPITRE VII – LES BALISES DE LISTE .................................................................................. 43
1- LES LISTES NON ORDONNES OU LISTES A PUCES .................................................. 43
2- LES LISTES ORDONNEES ................................................................................................. 44
3- LES LISTES IMBRIQUEES ................................................................................................. 45
4- LES LISTES DE DEFINITIONS .......................................................................................... 46
INTRODUCTION

Fonctionnement d’un site Web

Tout d’abord, 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. L’hébergement d’un site
Web sur un serveur permet d’accéder aux différentes ressources constituant ce site Web.

Un serveur est un ordinateur accessible via le réseau et qui stocke les différentes
ressources de plusieurs sites Web. En plus de ses performances et de sa connectivité, un serveur
possède une panoplie de logiciels lui permettant de répondre aux requetés des clients.

Ainsi, 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. Il existe actuellement plusieurs protocoles de
transmission des flux depuis un serveur vers un navigateur en fonction des natures des données
transmises.

Généralement, les sites Web sont classés en deux types à savoir les sites Web statiques
et les sites Web dynamiques.

Les sites statiques construits à base des pages HTML strictes interprétables par les
navigateurs. L’architecture simplifiée de ce cas est illustrée par la figure 1.

Figure 1 : Fonctionnement d'un site Web statique

En revanche, 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. Parmi les
langages permettant de coder de telles pages, on trouve PHP, Java, Python et ASP.NET.
L’exploitation de telle architecture est nécessaire lorsque le contenu de la page n’est pas connu
à l’avance. À titre d’exemple, les pages Web obtenues via un moteur de recherche sont générées
automatiquement en fonction des mots-clés saisis dans la barre de recherche. Le principe
général de fonctionnement est illustré par la figure 2.

Figure 1 : Fonctionnement d'un site Web statique

Le traitement d’une requête d’une page Web dans le cadre d’un site dynamique peut
être déroulé généralement de la manière suivante :

1. Le client envoie une requête pour demander au serveur d’interpréter un programme écrit
en PHP en saisissant une adresse dont le fichier finit par l’extension .php. à titre
d’exemple, lorsqu’on saisit l’adresse « http://www.est-umi.ac.ma/actualite.php ».

2. Le serveur interprète le fichier PHP pour générer du code HTML correspondant.

3. Le serveur répond en renvoyant le code HTML résultant.

4. Le navigateur interprète le code HTML et affiche la page Web.

Historique du langage HTML

Le sigle HTML correspond aux initiales de « HyperText Markup Language », c’est-à-

dire langage de marquage hypertexte, est un langage de balisage qui permet de structurer le
contenu des pages Web. En effet, la mise en place d’une page Web (titres, paragraphes,
images...) fera appel à l’exploitation des caractères en vue de marquer les différentes parties du
texte d’une page Web. Certains caractères de marquage correspondent à des liens vers d’autres
pages Web : ce sont des liens hypertextes.

HTML1 a été conçu par Tim Berners-Lee en 1991 en se basant sur le SGML (Standard
Generalized Markup Language) dont l’objectif est d’octroyer l’aptitude d’afficher un contenu
aux équipements informatiques que ce soit des ordinateurs ou des appareils mobiles moins
puissants (PDA : Personnal Digital Assistant, Smartphones, etc.) tout en assurant une
dégradation minimale.

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 (World Wide Web Consortium) et le
WhatWG (Web Hypertext Application Technology Working Group).

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.

Chapitre I – NOTION DE BALISES

Mais au juste comment fonctionne HTML 5 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.

La majeure partie du contenu du Web est exprimé avec le langage HTML. 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. En fait, il ne permet pas
d’effectuer des calculs ou des traitements. 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
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.

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.

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 :

 écrire "Il est" de façon normale puisque rien n’est spécifié,

 ensuite écrire le mot (et uniquement ce mot) "important" et le mettre en gras,

 rependre l’écriture normale pour "d’apprendre le langage",

 écrire cette fois-ci en italique le mot "Html5",

 et terminer par "!" en écriture normale.

Ce qui doit donner le résultat attendu suivant :

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.

En tant qu’un langage de balisage, les composants du contenu d’un fichier HTML sont
renfermés dans des balises définies au travers d’une DTD (Document Type Definition) qui
décrit les spécifications du langage formalisées par l’organisme de normalisation du domaine
du Web le W3C (World Wide Web Consortium). En conséquence, les éléments d’un contenu,
que ce soit du texte, d’images ou tout autre type multimédia doivent être enfermés par une
balise. 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 est la suivant :
 .

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 ">".

Toute balise de fermeture suit la même règle en plus du signe slash "/" devant le non de
l’élément considéré.

Notez bien qu’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 suivante :

Sachant qu’il existe une syntaxe un peu différente pour les balises orphelines qui utilise
un slash après le nom de l’élément tel que : <br />.

C’est une syntaxe ancienne qui était acceptée il y a des années. Aujourd’hui, cette
syntaxe est dépréciée en HTML. En conséquence, il est déconseillé de l’utiliser en HTML étant
donné qu’elle risque de ne plus être reconnue par les navigateurs dans le futur. Il est à noter que
l’espace figurant devant le slash de fermeture est important pour des raisons de compatibilité
avec les (très) anciens navigateurs.

La hiérarchie d’un document HTML 5 est constituée d’un système

d’inclusion/d’emboitement. En effet, le contenu d’un élément peut être soit constitué de texte
soit d’autres éléments dont le contenu peut être constitué d’autres éléments.
 2. LES ATTRIBUTS HTML

Lors de la consultation au travers d’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.

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.

Pour définir la valeur d’un attribut il faut la spécifier entre guillemets conformément à
la syntaxe suivante :

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 (Hypertext REFerence) de la balise < a >.

En effet, c’est l’attribut href qui permet de spécifier la cible du lien considéré. La valeur
de cet attribut pointe vers la page de destination de l’élément lien hypertexte en précisant
l’adresse de la page cible ou la partie cible d’un page.
 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.

L’attribut src (pour « source ») va prendre comme valeur l’adresse de l’image. Il est à
noter que l’élément img est constitué d’une balise orpheline à l’instar de l’élément br.

3. STRUCTURE MINIMALE D’UNE PAGE HTML VALIDE

C’est l’organisme W3C (World Wide Web Consortium) qui se charge de l’élaboration
des normes relatives au domaine du Web. W3C définit des standards pour les différents aspects
de la mise en place des sites Web. Actuellement, les navigateurs se précipitent pour l’intégration
des spécifications définies par les standards élaborées par W3C.

À l’exception de quelques différences, les navigateurs interprètent aujourd’hui un même

code HTML, respectant les standards de W3C, de la même manière de sorte à produire le même
résultat.

En effet, le schéma de base d’une page HTML suit une structure standard appelée «
structure minimale d’une page HTML valide ». Cette structure oblige l’existence de certains
éléments tout en suivant un schéma précis défini par W3C.

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 risque de mal interpréter ce document voire de
ne pas l’interpréter et en conséquence n’afficher aucun résultat.
 En plus, une page HTML valide favorisera son analyse par les moteurs 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. La figure suivante
montre la structure minimale d’une page HTML valide :

 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. Il faut faire attention à ne pas
oublier le point d’exclamation de la balise servant à l’intégration de cet élément. À l’aide de la
balise de cet élément, nous précisons le langage utilisé, en l’occurrence le langage HTML 5
dans notre cas.

Pour les anciennes versions du langage HTML, cette balise avait une syntaxe assez
complexe pour la déclaration du doctype. En effet, pour la déclaration du doctype d’un
document de type HTML 4, la syntaxe est la suivante :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 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.
 En effet, cet élément constitue la racine d’un document HTML et qui prend en charge
la liste des attributs universels (voir la documentation MDN pour la liste de ces attributs en plus
d’amble informations : https://developer.mozilla.org/fr/docs/Learn/HTML).

 LES ELEMENTS 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
du document HTML considéré avec un navigateur.

En revanche, l’élément body sert à définir les autres é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.

 LES ELEMENTS 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.

L’élément title (titre) permet de spécifier le titre du document, à ne pas confondre avec
les différents titres définis dans la partie visible du document encadrée par l’élément body. Ce
titre s’affiche tout en haut de l’onglet du navigateur correspondant au document considéré. La
figure suivante illustre un exemple :
 En revanche, 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">).

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’ pour ordonner au navigateur l’utilisation de
l’encodage Unicode pour la représentation du texte du document.

La valeur utf-8 est la valeur de référence pour tous les alphabets latins permettant aux
navigateurs d’afficher correctement les différents caractères du texte. En revanche, sur la figure
le document ne contient pas un contenu destiné à être visible étant donné qu’on n’a pas défini
de contenu au niveau de l’élément <body>. En conséquence, le navigateur affiche une page
blanche.

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. Sur la figure ci-après, on montre un exemple d’un document HTML5 comprenant
un titre, un tableau, un paragraphe et une image. Sur cette figure en remarque que le titre, codé
au moyen des balises <h1> (<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, codé au
moyen de la balise <table> (<table> …), le paragraphe, codés au moyen des balises <p>
(<p>Lorem ipsum …</p>) et l’image, codée au moyen de la balise <img> (<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.
 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 parent 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. 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 devra donc être le
dernier élément refermé.

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.

Sur la figure ci-dessus, on présente l’arbre généalogique du document HTML5 de notre

exemple sans présenter le contenu des différentes balises (exemple de contenu d’une balise : un
très grand titre).
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, de
s’alignement, etc. :

1. les balises en bloc (block)

2. et les balises en ligne (inline).

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

1- DEFINITION

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. Les blocs distinguent des sections entières de la page
comme des titres, des paragraphes, des listes, des citations, etc.

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.

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.

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

 2- LES PRINCIPALES BALISES DE TYPE BLOC

Balise Commentaires

<blockquote> Introduit des citations longues. Par défaut, certains navigateurs prévoient
une marge gauche aux blocs de citation, qu’on pourra bien sûr modifier en
CSS.

<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 bloc.

<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
… <h6> règle 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>).

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.).

Les éléments de type inline vont posséder 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 d’éléments de type block.

De plus, notez que général on ne va pas pouvoir appliquer de propriété 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
d’éléments en ligne en deux sortes de catégories : « remplacés » et « non remplacés ».

Essentiellement, un élément remplacé est un élément HTML ayant une largeur et une
hauteur prédéterminées en l’absence de CSS précis. Le contenu de tel élément est remplacé par
une source extérieure dont la représentation sera indépendante de CSS.

 Seuls les éléments remplacés peuvent être redimensionnés. Ils acceptent des attributs
de dimensions tels que : height, width. Il s’agit entre autres des éléments <img>,
<input>, <textarea>, <select> et <object>.

 Les autres 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.

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. Remarquons que <img> est une balise sans
 contenu (« autofermante », ou encore « balise vide »). Ceci se traduit par
son /> final.

<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.

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.

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.

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.

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.

Comme guise d’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 comme ceci (la
mise en forme sera abordée plus tard) :

3- LIGNE D’EN-TETE
 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. On obtient la syntaxe
et le résultat suivants :

4- TITRE (LÉGENDE) 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é.
On obtient la syntaxe et le résultat suivants :
 5- TABLEAU STRUCTURE

La notion de tableau constitue un mécanisme très important de représentation structurée

des données. 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.

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.
On obtient la syntaxe et le résultat suivants :

<table>
<caption>Chiffre d'affaires (CA) des clients</caption>
<thead>
<tr><th>Nom Prénom</th><th>CA 2020</th><th>CA 2021</th><th>Total</th></tr>
</thead>
<tfoot>
<tr><th>Total</th><th>420 000</th><th>130 000</th><th>550 000</th></tr>
</tfoot>
<tbody>
<tr><td>Nom_1 Prénom_1</td><td>120 000</td><td>80 000</td><td>200 000</td></tr>
<tr><td>Nom_2 Prénom_2</td><td>300 000</td><td>50 000</td><td>350 000</td></tr>
</tbody>
</table>

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.

Ces attributs prennent comme valeur le nombre de colonnes ou de lignes qu’une cellule
doit couvrir, c’est-à-dire le nombre de colonnes ou de lignes qu’une cellule doit occuper ou
encore sur lesquelles elle doit s’étendre.
 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. On obtient la syntaxe
et le résultat suivants :
 b. FUSION DE COLONNES

Pour fusionnes 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. On obtient la
syntaxe et le résultat suivants :
 7- MISE EN FORME D’UN TABLEAU

Certes, le HTML permet de structurer le contenu et à lui donner un sens, néanmoins les
sites Web sont créés pour des visiteurs humains. En conséquence, ces sites doivent être
compréhensibles et agréablement consultables.

La mise en forme permet généralement de mieux représenter un contenu brut avec le

langage HTML. Comme la majorité des éléments HTML, les éléments tableaux disposent de
plusieurs attributs de mise en forme. Les attributs les plus communs utilisés avec les tableaux
étaient les suivants :

 align pour définir l’alignement du tableau dans la page ;

 bgcolor pour définir la couleur de fond du tableau ;
 border pour définir la taille d’une bordure autour du tableau ;
 cellpadding pour définir l’espace entre le contenu d’une cellule et sa bordure ;
 cellspacing pour définir l’espace entre deux cellules ;
 char pour aligner le contenu au sein d’une ligne à partir d’un certain caractère ;
 charoff pour définir le nombre de caractères à partir desquels le contenu doit être
aligné depuis le caractère défini par l’attribut char ;
 frame pour définir les côtés du tableau sur lesquels tracer une bordure ;
 rules pour définir la manière dont les traits doivent apparaître au sein du tableau ;
 summary pour définir un texte servant à résumer le tableau au cas où celui-ci ne
pourrait pas être affiché ;
 valign pour aligner verticalement le contenu des cellules au sein d’une ligne.

Dans le cadre du HTML5, ces attributs sont tous dépréciés et ne doivent jamais êtes
utilisés en vue de mettre en forme les tableaux HTML. En lieux et place, il faut utiliser le CSS
pour la mise en forme, vu qu’il constitue une très bonne alternative et un bon support pour la
mise en forme des tableaux.

Ainsi, pour ajouter des bordures autour de chacune des cellules d’un tableau, on définit
la propriété CSS border aux éléments td et on fusionne les différentes bordures en une seule
bordure en définissant la propriété border-collapse avec la valeur collapse de l’élément table.
 CSS nous offre la possibilité pour spécifier plusieurs propriétés d’un tableau et de ces
éléments constitutifs. Parmi d’autres propriétés, figurent les propriétés CSS suivantes liées aux
tableaux :

 border-collapse ;
 border-spacing ;
 caption-side ;
 empty-cells ;
 table-layout ;
 vertical-align.

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>.

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.

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 (pour source) prend comme valeur l’adresse de l’image (adresse relative
ou absolue) tandis que l’attribut alt (pour 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
non-voyants ou 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.

CHAPITRE V – LES BALISES DE FORMULAIRE

I- DÉFINITION ET RÔLE DES FORMULAIRES HTML

Les formulaires accointent 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. 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

Comme on peut le constater sur le schéma ci-dessus, l’échange entre le serveur Web et
l’utilisateur se fait avec les langages « côté client » tels que HTML/CSS, JavaScript. Tandis
que les transactions entre le serveur Web et les serveurs de fichiers, de bases de données ou de
messagerie se font avec les langages « côté serveur » tels que PHP, JAVA, DOTNET, etc.

II- L’ÉLÉMENT 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.

Que signifient ces deux valeurs et laquelle choisir ? Les valeurs get et post déterminent
la méthode de transit des données du formulaire. 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 (avec la valeur 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.

La méthode de transit vis l’URL est généralement utilisée lors de l’affichage de produits
triés sur un site e-commerce (car oui, les options de tris sont des éléments de formulaires avant
tout !). Regardez bien les URL la prochaine fois que vous allez sur un site e-commerce après
avoir fait un tri : si vous retrouvez des éléments de votre tri dedans c’est qu’un get a été utilisé.

En revanche, la méthode l’envoi de données via post transaction HTTP (avec la valeur
post pour l’attribut method) permet d’envoyer les données sans limites de quantité de données.
En plus 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.

Tandis que 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. Néanmoins, cet attribut ne peut être utilisé que lorsque la valeur de l’attribut method
est « post ». Le tableau suivant donne des valeurs possibles de cet attribut et leur signification :

Valeur
application/x-www-form-urlencoded
multipart/form-data
text/plain ou text/HTML
Description
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).
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.
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.

En conséquence, on obtient la syntaxe générale suivante pour la création d’un

formulaire :
<form id="form1" action="valider.php" method="valeur" enctype="valeur">
<!-- Contenu -->
</form>

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 id="matricule"
récupérer son contenu
Size Fixer la longueur de la zone de saisie en size ="10"
nombre de caractères
Maxlength Limiter le nombre de caractères à saisir dans maxlength ="15"
un champ de saisie
Value Définir la valeur par défaut du champ value="ET-0405-00000"
Readonly Indiquer si le champ est en lecture seule. readonly="readonly"
Dans ce cas, la valeur de ce champ ne peut
être modifiée.
Placeholder Donner une indication sur le contenu du placeholder="Votre login"
champ. (HTML 5 seulement)

Ainsi, on obtient la syntaxe générale suivante pour la création d’un champ d’un
formulaire HTML :

Remarque : On peut définir un libellé pour un champ avec la balise <label></label>. 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.

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.

1. LE CHAMP DE SAISIE MONO-LIGNE

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".
 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 :

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 avoir
les attributs method et enctype avec les valeurs respectives post et multipart/form-data.

Exemple :

<form action="script1.php" method="post" enctype="multipart/form-data">

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 :

<input type="file" name="photo" accept="image/*" />

Ce champ accepte l’envoi de tous les types d’images.
 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.

Exemple complet :

<form name="formcv" method="post" enctype="multipart/form-data" action="traitement.php">

<fieldset>
<legend><strong>Transfert de CV</strong></legend>
<label>Votre CV (au format PDF ou Word - Taille max. 10 Mo) : </label>
<!--Accepte les fichiers au format PDF et Word -->
<input name="cvfile" type="file" size="20" accept="application/pdf,application/msword"/>
<!--Taille maxi 10 Mo -->
<input name="MAX_FILE_SIZE" value="10000000" type="hidden"/>
</fieldset>
</form>

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 avoir 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.

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 :

<input type="radio" name="nomgroupe" value="valeur1" />

------
------
<input type="radio" name="nomgroupe" value="valeurN" />

Exemple :

<fieldset>
<legend>Qualité du produit</legend>
 <label><input type="radio" name="info" value="Excellent" />Excellent</label><br />
<label><input type="radio" name="info" value="Bon" checked="checked" />Bon</label><br/>
<label><input type="radio" name="info" value="Moyen" />Moyen</label><br />
<label><input type="radio" name="info" value="Mauvais" />Mauvais</label><br />
<label><input type="radio" name="info" value="Mauvais" />Indifférent</label>
</fieldset>

Notez bien que dans cet exemple l’option "Bon" est l’option choisie par défaut.

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 :

<input type="checkbox" name="nom" value="valeur1" />

------
------
<input type="checkbox" name="nom" value="valeurN" />

Exemple :

Un restaurant désire mettre en place un système de commande informatisé. Le système

possède un formulaire permettant aux clients de passer des commandes en choisissant les repas
désirés. Le repas tajine de viande de bœuf est le choix par défaut. Le formulaire peut se présenter
comme suit :

<fieldset>
<legend>Menu du jour</legend>
<input type="checkbox" name="repas" value="Couscous" />
<label>Le Couscous</label><br />
 <input type="checkbox" name="repas" value="TajineBoeuf" checked="checked" />
<label>Tajine de viande de bœuf</label><br />
<input type="checkbox" name="repas" value="Pastilla" />
<label>La Pastilla</label><br />
<input type="checkbox" name="repas" value="TajinePoisson" />
<label>Tajine de poissons</label><br />
<input type="checkbox" name="repas" value="Tanjia" />
<label>La Tanjia</label>
</fieldset>

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 :

<input type="submit" name="nom bouton" value="texte du bouton" />

Le bouton de réinitialisation permet de rafraichir le formulaire afin de retrouver les

valeurs de départ. On utilise la syntaxe suivante :

<input type="reset" name="nom bouton" value="texte du bouton" />

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 :

<input name="nom" type="image" src="url image"

width="x" height="y" alt="texte alternatif" />

Exemple :
 <input name="valider" type="image" src="acheter.jpg"
width="103" height="54" alt="Envoyer" />

Il existe, avec l’arrivée de HTML 5, de nouveaux types de champs de saisie permettant

de rendre plus convivial le contenu d’un formulaire. Pour les obtenir, il suffit de définir les
différentes valeurs de l’attribut type de l’élément <input /> comme suite :

Valeur Description Aperçu du résultat sur Chrome

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.

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.

On utilise la syntaxe suivante :

<select name="nomliste">
<option value="valeur1"></option>
-----
<option value="valeurN"></option>
</select>

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>.

Exemples :
<label>Lieu de livraison :</label>
<select name="lieu">
<option value="0">Aucune</option>
<option value="rabat">Rabat</option>
<option value="casablanca">Casablanca</option>
<option value="meknes">Meknès</option>
<option value="fes">Fès</option>
<option value="merrakech">Merrakech</option>
<option value="khouribga">Khouribga</option>
<option value="tanger">Tanger</option>
</select>
 <label>Lieu de livraison multiple :</label>
<select name="lieu" size="8" multiple="multiple">
<option value="0">Aucune</option>
<option value="rabat">Rabat</option>
<option value="casablanca">Casablanca</option>
<option value="meknes">Meknès</option>
<option value="fes">Fès</option>
<option value="merrakech">Merrakech</option>
<option value="khouribga">Khouribga</option>
<option value="tanger">Tanger</option>
</select>

2. CHAMP DE SAISIE MULTI-LIGNE

Pour créer un champ de saisie d’un long texte de plusieurs linges, tels que les
commentaires, les descriptions, les contenus des messages des emails, etc., il faut utiliser la
balise <textarea></textarea>. Les attributs généralement exploités de cette balise sont :

1. Name : définit le nom de l’élément.

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

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 :

<textarea name="nom" cols="N" rows="N" cols="N">Texte par défaut</textarea>

Exemple :

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

Entrez un commentaire sur notre service ici
</textarea>

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>

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 sourie. 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.

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

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>

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

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>

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>

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>

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>

 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>

Exemple :

<a href="#debut_page"> Aller directement au début de la page</a>

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">Aller au formulaire d’inscription</a>

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">Texte du lien vers l’ancre</a>

Exemple :
 <a href="https://fr.wikipedia.org/wiki/HTML5#Doctype">HTML5 et Doctype</a>

NB : pour créer un lien vers le début d’une page, on écrit :

<a href="#">Début de la page</a>

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.
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>

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

Exemples :

<table>
<tr><th>Circle</th><th>Square</th><th>Disc</th></tr>
<tr>
 <td>
<ul type="circle">
<li>Algorithmique</li>
<li>Langage de programmation</li>
<li>Merise</li>
<li>Développement Web</li>
</ul>
</td>
<td>
<ul type="square">
<li>Algorithmique</li>
<li>Langage de programmation</li>
<li>Merise</li>
<li>Développement Web</li>
</ul>
</td>
<td>
<ul type="disc">
<li>Algorithmique</li>
<li>Langage de programmation</li>
<li>Merise</li>
<li>Développement Web</li>
</ul>
</td>
</tr>
</table>

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>

Exemples :

<table>
<tr><th>Simple</th><th>Avec start</th><th>Inversée</th></tr>
<tr>
<td>
<ol>
<li>Introduction</li>
<li>Les causes</li>
<li>Les conséquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol>
</td>
<td>
<ol start="2">
<li>Introduction</li>
<li>Les causes</li>
<li>Les conséquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol>
</td>
<td>
<ol reversed>
<li>Introduction</li>
<li>Les causes</li>
<li>Les conséquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol>
</td>
</tr>
</table>

3- LES LISTES IMBRIQUÉES

 Il est possible de combiner une liste numérotée avec une liste à puces. On obtient une
syntaxe comme suite :
<ol>
<li> item 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
…
<li>Item n</li>
</ul>
</li>
<li>Item 2</li>
…
<li>Item m</li>
</ol>

Exemple :
<ol>
<li>Introduction</li>
<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>

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>. La Syntaxe générale est la suivante :
<dl>
<dt>Terme 1</dt>
<dd>Description terme 1</dd>
<dt>Terme 2</dt>
<dd>Description terme 2</dd>
…
<dt>Terme N</dt>
<dd>Description terme N</dd>
</dl>

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>