Technologies du WEB

HTML5

Salah EL HAJLA
salah.elhajla@usmba.ac.ma
Mode d’évaluation

● Contrôles continus : Tests, devoirs, Comptes-rendus des TPs, Mini

projet. Présentent 40% de la note du module.

● Examen final : Présente 50% de la note du module.

● Assiduité, présence et discipline : Présente 10% de la note du module.

Le module est validé si sa moyenne est supérieure ou égale à 10/20.

L’étudiant ne peut dépasser 3 absences. Si un étudiant cumule 4 absences, il

ne sera pas autorisé à passer l’examen.

2
Différence entre Internet et Web

● Internet est un réseau informatique que le Web utilise (selon le protocole HTTP) mais

d'autres applications l'utilisent aussi, tels par exemple le courrier électronique (protocole

SMTP) et le transfert de fichiers (protocole FTP).

3
Le WEB !!!!!

● On retrouve ce terme dans WWW (pour World Wide Web ou Toile mondiale en français),
il permet de consulter via un navigateur des pages regroupées sur des sites via le
réseau internet.
L’image de la toile d’araignée découle des liens hypertextes qui relient les pages entre elles
et qui peuvent donc faire penser à une toile d’araignée.

4
D’où vient le terme Web ?

● Ce terme a été créé en 1990 par Tim Berners-Lee, considéré comme l’inventeur
d’internet, qui développa le premier navigateur et éditeur web
nommé WorldWideWeb alors qu’il était chercheur au CERN (Conseil Européen pour la
Recherche Nucléaire).
Il fut aidé dans ses développements par son collègue Robert Cailliau qui est également
l’auteur du premier logo du WWW.

5
Principe de fonctionnement.

● Le navigateur effectue une requête spécifiée à travers l’URL

● Le serveur retourne un flot typé de données
● Le navigateur interprète le flot de données et l’affiche
6
Le Web (Tim-Berners-lee 1990) :

- Repose sur Internet.

- Système d’information réparti en documents Web.
- Basé sur la notion d’hyperliens permettant de naviguer entre les documents Web.
- S’appuie sur des protocoles de communication HTTP et HTTPS.
- Les adresses qui permet de repérer les documents: URL.
- Des navigateurs pour afficher et interpréter ces documents.
- Des langages pour créer les documents: HTML, CSS et JavaScript.

7
Plan du cours

● Introduction

● Syntaxe

● Élément HTML5

● Les formulaires

● Les frames

8
Plan du cours

● Introduction

● Syntaxe

● Éléments HTML5

● Les formulaires

● Les frames

9
Introduction

La Norme W3C
● Le W3C ou World Wide Web Consortium désigne un organisme international à but non
lucratif. Son rôle est de définir les standards techniques liés au web. Surtout, ils
déterminent les mêmes règles pour tous les développeurs du monde. L’idée est également
de favoriser l’accès au web, au plus grand nombre..

10
Introduction

La Norme W3C
1 . Le web partout et pour tous

● C’est en 1994 que le W3C a été créé, par Tim Berners-Lee, le principal inventeur du
World Wide Web. Le W3C unifie les usages et supervise également la mise en place de
standards auprès des développeurs web, tels que le HTML5, HTML, XHTML, XML, RDF,
SPARQL, CSS…
● “Un seul web partout et pour tous” tel est le leitmotiv du W3C. L’un des objectifs du W3C
est de rendre le web accessible partout, depuis n’importe quel terminal. Surtout il s’agit de
le rendre accessible à tous, quel que soit son matériel, logiciel, son infrastructure réseau, sa
langue maternelle, sa culture, sa situation géographique, ses capacités physiques ou
mentales. Pour cela, le W3C a donc publié un guide à destination des développeurs pour
les aider à concevoir et rendre accessible tout type de logiciel utilisé, l’UAAG 1.0.
11
Introduction

La Norme W3C
2 . Pourquoi développer un site aux normes W3C ?

Il peut s’avérer utile de respecter les normes W3C pour différentes raisons :
● Pour votre référencement naturel. En effet, un site construit selon les normes W3C est plus
facilement lisible par les moteurs de recherche. Il sera mieux référencé et votre visibilité sera
donc d’autant plus importante.
● Pour l’harmonisation de votre site. Il existe aujourd’hui différentes navigateurs de recherche,
même si Google reste le plus connu. Un site doit être correctement codé pour qu’il soit
affiché de la bonne et de la même manière sur Mozilla, Chrome, Firefox… Ainsi, un site aux
normes W3C est potentiellement plus susceptible d’avoir un affichage identique sur tous les
moteurs de recherche.
NB : Vous souhaitez vérifier si votre site respecte les normes W3C ? L’organisme vous propose
un outil pour l’examiner, W3C validator. 12
Introduction

L’acronyme HTML

Hyper Text MarkUp Langage

HTML est un langage de description qui va nous permettre de :

- Décrire l’aspect d’un document.

- Inclure des informations variées (textes, images, sons, etc).
- Établir des relations cohérente entre ces informations grâce au liens hypertexte.

C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des
liens, des images…

13
Introduction - Les versions d’HTML
Au fil du temps, le langage HTML a beaucoup évolué. Dans la toute première version de HTML
(HTML 1.0) il n'était même pas possible d'afficher des images !

Les versions de HTML :

- HTML 1 : C'est la toute première version créée par Tim Berners-Lee en 1991.
- HTML 2 : La deuxième version du HTML apparaît en 1994 et prend fin en 1996. C'est
cette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le
fonctionnement de cette version sont donnés par le W3C (tandis que la première version
avait été créée par un seul homme).
- HTML 3 : Apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses
possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du
texte autour des images, etc. 14
Introduction - Les versions d’HTML

- HTML 4 : Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames
(qui découpent une page web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première
fois d'exploiter des feuilles de style, notre fameux CSS !

- HTML 5 : c'est la dernière version. De plus en plus répandue, elle fait beaucoup parler
d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure
facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités
pour les formulaires, etc.

15
Introduction

- La description d’un document HTML passe par l’utilisation de Balises.

- Une balise est délimitée par les signes "<" et ">" entre lesquels figure le nom de la balise.
Par exemple, la balise de retour à la ligne est <BR>.
- La plupart du temps, on utilise une balise de début et une balise de fin, qui définissent les
propriétés de l’intervalle.
<!DOCTYPE html>
<html>
<head>
La balise <p> <title>Page Title</title>
Début </head>
d’écriture du <body> La balise <p>
paragraphe <p> Hello World !! </p> Fin d’écriture
</body> du paragraphe
</html>
16
Plan du cours

● Introduction

● Syntaxe

● Élément HTML5

● Les formulaires

● Les frames

17
Syntaxe

La syntaxe définit :

- La structure du document.
- Les règles d’écriture.
 Syntaxe - Structure minimale Doctype : Il permet au navigateur de savoir
quel langage il devra interpréter.

Html : C’est le premier marqueur que l’on

trouve dans un document HTML et qui va
<!DOCTYPE html>
<html> recueillir les deux principaux éléments de la
<!-- en-tête du document --> hiérarchie “Head” et “Body”.
<head>
<title>Structure Head : L'en-tête du document est réservée
minimale</title> aux méta-informations (les informations
<meta charset="utf-8"> relatives au document) comme son titre.
</head>
<!-- corps du document -->
Title : Contient le titre du document HTML.
<body>
<!-- Contenu de la page -->
</body>
Meta “Charset” : Permet de préciser
</html> l’encodage des caractères utilisé.

Body : Le corps du document, ce qui sera

effectivement affiché par le navigateur
Web, 19
Syntaxe - Règles d’écriture

- À toute balise ouvrante <element> doit être associé une balise fermante </element>.
- Il existe des balises auto-fermante <element/> (Ex. <img/>, ...)
- Les éléments ne doivent pas se chevaucher: Premier ouvert → Dernier fermé

Ex: <p> Début <code> Chevauchement </p> Suite

</code>

Illégal !!

<p> Début <code> Chevauchement </code> Suite

</p>

- Le contenu d’un élément peut être constitué d’autres éléments. 20

Syntaxe - Règles d’écriture

- Les anciennes versions d’HTML nécessitent l’utilisation d’entités :

é : &eacute; è : &egrave; ê : &ecirc; à : &agrave; É : &Eacute; . . . .

- Maintenant l’encodage est supporté. Bonne pratique : UTF-8

- L’encodage doit être défini à :

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

21
Syntaxe - Règles d’écriture

- Il est possible de transmettre des informations à traiter aux balises :

● Balise de début :

<balise[ attribut1=valeur1[ attribut2=valeur2 ...]]>...</balise>

● Balise auto-fermante :

<balise[ attribut1=valeur1[ attribut2=valeur2 ...]]/>

<img src="debian.png" alt=”le logo Debian”/>

22
Syntaxe - Règles d’écriture

- Il existe 3 types d’éléments :

● Élément bloc (div) : Élément précédé et suivi d’un saut de ligne. Il forme une boîte
dans lequel est inclus du texte ou d’autres éléments.

Ex.: Les paragraphe, les tableaux, …

● Élément inline (span) : Élément qui s’insère dans le fil du texte et ne peut contenir que
du texte ou d’autres éléments inlines.
● Élément auto-fermant : Élément qui est une balise ouvrante et fermante à la fois. Elle
n’a donc pas de contenu. Ce sont soit des balises de type bloc, soit de type inline.

Syntaxe : <balise> ou <balise/>

23
Plan du cours

● Introduction

● Syntaxe

● Élément HTML5

● Les formulaires

● Les frames

24
Élément HTML5 - Titres (éléments bloc)

Il existe 6 niveaux de titre. Le niveau le plus élevé est le 1, le plus petit est le 6 :

- <H1> ……. </H1>

- <H2> ……. </H2>
- <H3> ……. </H3>
- <H4> ……. </H4>
- <H5> ……. </H5>
- <H6> ……. </H6>

25
Élément HTML5 - Paragraphes (éléments bloc)

- L’élément bloc <p> ……. </p> permet de construire des paragraphes.

- L’élément inline <br/> permet de contrôler les sauts de lignes. elle est dite une
balise Orpheline.

Ex: <!DOCTYPE html>

<html>
<head>
<title>Paragraphe</title>
<meta http−equiv="content−type" content="text/html;charset=utf−8"/>
</head>
<body>
<p> Ceci est une première ligne <br/> Ma deuxième ligne </p>
</body>
</html>

26
Élément HTML5 - Mise en forme (éléments inline)

- Les éléments comme <b> et <i> permettent le formatage de sortie du texte, comme
en gras ou en italique.
● <b> : Bold - Texte en gras
● <strong> : Texte important
● <i> : Texte en italique
● <small> : Texte en petite taille
● <mark> : Texte marqué
● <code> : Portion au code informatique

27
Élément HTML5- Images (éléments inline)

- La balise <img/> permet d’insérer une image dans un document.

- Les attributs suivants sont obligatoires:
● src : L’URL où se situe l’image.
● alt : Courte description de l’image.

<img src="debian.png" alt=”le logo Debian”/>

28
Élément HTML5- Liens (éléments inline)

- L’élément <a href=”...”> … </a> permet d’insérer un lien dans un document.

- Le contenu de l’élément est celui qui sera affiché en tant que lien.
- L’attribut href contient l’URL vers laquelle le lien pointe.
● URL : http://www.google.com
● URL (mail) : mailto:t.aitbaha@uiz.ac.ma
● Fichier local avec chemin relatif : ./dossier/autre_page.html
● Fichier local avec chemin absolu : /www/dossier/autre_page.html

<a href="lien_vers_une_autre_page.html"> Texte affiché </a>

29
Élément HTML5- Listes (éléments bloc) (1/7)

HTML définit 2 types de listes :

- Les listes numérotées ou ordonnées (ou Ordered (numbered) lists).

- Les listes non numérotées dites listes à puces dont les entrées sont signalées par un
signe typographique.

Chaque élément d’une liste est déclaré par <li> ... </li>.

Il existe aussi des listes de définitions (<dl> ... </dl>), les éléments sont déclarés par
les balises <dt> pour le terme et <dd> pour la définition associée.

30
Élément HTML5- Listes (éléments bloc) (2/7)

Les listes numérotées ou ordonnées:

<ol>
<li> item </li>
<li> item </li>
<li> item </li>
</ol>

31
Élément HTML5- Listes (éléments bloc) (3/7)
Les listes numérotées ou ordonnées:

L’attribut type: On peut définir la manière dont on veut lister nos élément en ajoutant un attribut
type à la balise <ol>.
<ol type=”1”>
Il existe 5 types : <li> item </li>
<li> item </li>
<li> item </li>
- “1” : La liste sera numérotée par des nombres. </ol>
- “A” : La liste sera numérotée par des lettres en majuscule.
- “a” : La liste sera numérotée par des lettres en minuscule.
- “I” : La liste sera numérotée par des nombres romain majuscule.
- “i” : La liste sera numérotée par des nombres romain minuscule.
32
Élément HTML5- Listes (éléments bloc) (4/7)

Les listes non numérotées:

<ul>
<li> item </li>
<li> item </li>
<li> item </li>
</ul>

33
Élément HTML5- Listes (éléments bloc) (5/7)
Les listes non numérotées:

L’attribut style: On peut définir la manière dont on veut lister nos élément en ajoutant un
attribut style dans lequel on indique le type du marqueur des éléments en utilisant list-
style-type.
<ul style="list-style-type:disc;">
Il existe 4 types de marqueurs : <li> item </li>
<li> item </li>
<li> item </li>
- “square” : Pour utiliser le marqueur carreau. </ul>
- “circle” : Pour utiliser le marqueur cercle.
- “disc” : Pour utiliser le marqueur disque (Celui utiliser par défaut).
- “none” : Pour n’utiliser aucun marqueur .
34
Élément HTML5- Listes (éléments bloc) (6/7)

Les listes de définition:

<dl>
<dt> item </dt> <dd> definition </dd>
<dt> item </dt> <dd> definition </dd>
<dt> item </dt> <dd> definition </dd>
</dl>

35
 Élément HTML5- Exercice

Cette page est encore vide. Ecrivez vos

premières lignes de HTML en présentant vos
<!DOCTYPE html>
cours préférés ! <html>
<!-- en-tête du document -->
<head>
- Ajoutez un titre de niveau 1. <title>Titre</title>
<meta charset="utf-8">
- A la suite du titre, ajoutez un paragraphe </head>
indiquant "Voici mes cours préférés:". <!-- corps du document -->
<body>
- Ajoutez une liste ordonnée d'au moins <!-- Contenu de la page -->
</body>
trois de vos cours préférés. </html>
- Mettez en valeur (emphase forte) le
premier cours de la liste
36
Élément HTML5- Exercice
<!DOCTYPE html>
<html>
<!-- en-tête du document -->
<head>
<title>Titre</title>
<meta charset="utf-8">
</head>
<!-- corps du document -->
<body>
<!-- Contenu de la page →
<H1>Exercice/H1><
<p>Voici mes cours préférés:</p>
<ol>
<li><strong>Technologies du
Web</strong></li>
<li>Programmation C</li>
<li>Structure des données</li>
</ol>
</body>
37
</html>
Élément HTML5- Tableaux (éléments bloc) (1/6)

<table> - Les éléments <thead> et <tfoot>

<caption>
<!−−titre du tableau−−> permettent de répéter l’élément dans les
</caption>
<thead> tableaux sur plusieurs pages (impression).
<!−−entête de tableau−−>
</thead> - L’élément <caption> indique le titre du
<tfoot>
<!−−pied de tableau−−> tableau
</tfoot>
<tbody> - La balise <tr> déclare une ligne.
<!−−corps de la table−−>
<tr> - Les balises <td> (cellule normale) ou <th>
<td>cellule
1</td>
<td>cellule
(cellule titre/grasse) déclarent les cellules dans la
2</td>
</tr> ligne.
</tbody>
</table> - Les attributs rowspan et colspan fusionnent
les cellules.
38
Élément HTML5- Tableaux (éléments bloc) (2/6)

Les éléments <thead> et <tfoot> permettent de

répéter l’élément dans les tableaux sur plusieurs pages.

39
Élément HTML5- Tableaux (éléments bloc) (3/6)

- La balise <tr> déclare une ligne.

- Les balises <td> (cellule normale) ou <th>
(cellule titre/grasse) déclarent les cellules
dans la ligne.

40
Élément HTML5- Tableaux (éléments bloc) (4/6)

Pour effectuer une fusion, on rajoute un attribut à la balise <td>. Il faut savoir qu'il existe
deux types de fusion :
- La fusion de colonnes : La fusion s'effectue horizontalement. On utilisera l'attribut
colspan.
- La fusion de lignes : Deux lignes seront groupées entre elles. La fusion s'effectuera
verticalement. On utilisera l'attribut rowspan.

41
Élément HTML5- Tableaux (éléments bloc) (5/6)

Écrire le code qui affichera le tableau ci-dessous sur une page web
<table>
<caption>
<!−−titre du tableau−−>
</caption>
<thead>
<!−−entête de tableau−−>
</thead>
<tfoot>
<!−−pied de tableau−−>
</tfoot>
<tbody>
<!−−corps de la table−−>
<tr>
<td>cellule
1</td>
<td>cellule
2</td>
</tr>
</tbody>
</table>
42
Élément HTML5- Tableaux (éléments bloc) (6/6) Exercice
<table border="1">
<caption>
<h2>Titre du
tableau</h2>
</caption>
<thead>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Titre 1</th>
<th>Titre 2</th>
<th>Titre 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>cellule 1</td>
<td>cellule 2</td>
<td>cellule 3</td>
</tr>
<tr>
<td>cellule 4</td>
<td>cellule 5</td>
<td rowspan="2">cellule 6</td>
</tr>
<tr>
<td colspan="2">cellule 7</td>
</tr>
</tbody> 43
</table>
Élément HTML5- Couleurs HTML

Les couleurs HTML sont spécifiées avec des noms de couleurs prédéfinis ou avec des valeurs
RVB, HEX, HSL, RGBA ou HSLA.

44
Élément HTML5- Couleurs HTML (Noms des couleurs)

En HTML, une couleur peut être spécifiée en utilisant un nom de couleur :

45
 Élément HTML5- Couleurs HTML (Noms des couleurs)

Couleur d'arrière-plan (Background Color):

Vous pouvez définir la couleur d'arrière-plan des éléments

HTML :

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut
</p>

46
Élément HTML5- Couleurs HTML (Noms des couleurs)

Couleur du texte (Text Color):

Vous pouvez définir la couleur du texte :

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
47
Élément HTML5- Couleurs HTML (Noms des couleurs)

Couleur de la bordure (Border Color):

Vous pouvez définir la couleur des bordures :

48
 Élément HTML5- Valeurs de couleur

En HTML, les couleurs peuvent également être spécifiées à l'aide de valeurs RGB, de valeurs
HEX, de valeurs HSL, de valeurs RGBA et de valeurs HSLA.

HSL Color Values

En HTML, une couleur peut être spécifiée en utilisant la teinte, la saturation et
la luminosité (HSL) sous la forme :
hsl(hue, saturation, lightness)

❑ La teinte est un degré sur la roue chromatique de 0 à 360. 0 est

rouge, 120 est vert et 240 est bleu.
❑ La saturation est une valeur en pourcentage, 0 % signifie une
nuance de gris et 100 % est la pleine couleur.
❑ La luminosité est également une valeur en pourcentage, 0 %
correspond au noir et 100 % au blanc.
49
 Élément HTML5- Valeurs de couleur

Les trois éléments <div> suivants ont leur couleur d'arrière-plan définie avec les valeurs RGB,
HEX et HSL :

NB: La notation Hex est de Forme

#RRGGBB 50
 Élément HTML5- Valeurs de couleur

Les deux éléments <div> suivants ont leur couleur d'arrière-plan définie avec les valeurs RGBA
et HSLA, ce qui ajoute un canal Alpha à la couleur (ici, nous avons 50 % de transparence) :

51
Plan du cours

● Introduction

● Syntaxe

● Élément HTML5

● Les formulaires

● Les frames

52
Les formulaires

- Permettent d’interagir avec les utilisateurs en leur proposant d’entrer des informations.
- Seule l’interface de formulaire qui sera faite en HTML.
- Les informations que les utilisateurs saisissent, seront traiter par des autres scripts.

53
Les formulaires - Déclaration d’un formulaire
- L’élément <form> … </form> permet de déclarer un formulaire.
- Les attributs:
● action : URL du script auquel sera soumis le formulaire.
● method : Spécifie la méthode d’acheminement des données (GET par défaut ou
POST)
GET Post

- Seule une quantité limitée de données peut
être envoyée car les données sont envoyées
dans l’en-tête.
- La requête GET n’est pas sécurisé car les
données sont exposées dans la barre d’URL.
- Une grande quantité de données peut être
envoyée car les données sont envoyées dans
le corps.
- La requête POST est sécurisée car les données
ne sont pas exposées dans la barre d’URL.
54
Les formulaires - Déclaration d’un formulaire (suite)

- Les deux méthodes GET et POST sont utilisées pour transférer des données du client au serveur
avec le protocole HTTP.
- La différence clé entre les méthodes POST et GET est que GET transporte le paramètre dans la
chaîne d’URL, tandis que POST transporte le paramètre dans le corps du message, ce qui le rend
plus sûr le transfère des données du client au serveur avec le protocole HTTP.

<form action="Nom_de_votre_page.html" method="POST">

</form>

55
Les formulaires - Ensemble de champs

En HTML, il est interdit de mettre des champs de formulaire directement à l’intérieur d’un
<form> . Il faut d’abord les regrouper dans :

- L’élément <fieldset> … </fieldset> permet de définir un regroupement, des

champs de formulaire de sémantique proche, dans un formulaire.

L’élément <legend> … </legend> permet de donner une légende à un fieldset.

- Des divisions <div> … </div>.

56
Les formulaires - Étiquettes

La plupart des champs sont naturellement accompagnés d’une étiquette

- L’élément <label> … </label> permet de définir une étiquette.

- On peut la placer où on veut, en général juste à gauche ou à droite du champ.
- Son attribut for référence l’attribut id du champ correspondant.
- Dans les navigateurs graphiques, un clic sur l’étiquette d’un champ permet en général de
sélectionner le champ.

<form>
<label for=”nom”> Nom </label>
<input type="text" name="nom" id="nom" />
</form>
57
Les formulaires - Champs de saisie

- La balise <input/> a une utilisation très vaste dans les formulaires. Elle représente un
champ de saisie.
- L’élément <input/> contient les attributs suivants:
● type : détermine le type (texte, mot de passe, liste, etc.) du champ.
● name : nom du paramètre de la requête HTTP, est obligatoire (sauf pour les types
"reset" et "submit" ), il permet de préciser au serveur à quelle saisie on fait référence.
● value : permet de préciser la valeur par défaut (facultatif).
<form>
<b> Nom </b>
<input type="text"
name="nom"/>
</form>
58
Les formulaires - Saisie d’une ligne de texte

- Le type text est utilisé pour la saisie d’un texte dont la taille est inférieure à une ligne.
- La taille maximale de la chaîne de caractères à saisir peut être spécifiée à l’aide de l’attribut
maxlength (facultatif).

<form>
<b> Localité </b>
<input type="text" name="localite" maxlength=80 value="Agadir"
/>
</form>

59
Les formulaires - Saisie d’un mot de passe

- Le type password est utilisé pour la saisie d’un texte dont les caractères sont remplacés
par des astérisques : c’est généralement utilisé pour la saisie des mots de passe. Le mot de
passe est quand même transmis en clair au serveur.
- La taille maximale de la chaîne de caractères à saisir peut être spécifiée à l’aide de l’attribut
maxlength (facultatif).
<form>
<b> Mot de passe : </b>
<input type="password" name="pwd"
value="123456" />
</form>

60
 Les formulaires - Choix multiples dans une liste
- Le type checkbox permet de choisir plusieurs éléments parmi une liste de possibilités.
- Cela se matérialise sous forme de cases à cocher.
- La valeur retournée est obligatoirement précisée à l’aide de l’attribut value .
- L’attribut checked="checked" permet de cocher la case par défaut.

<form>
<b> Cours : </b>
<input type="checkbox" name="chk1" value="Structure de données"/> Structure de données
<input type="checkbox" name="chk1" value="Programmation C" /> Programmation C
<input type="checkbox" name="chk1" value="Technologies du Web" checked="checked" />
Technologies du Web
</form>

61
 Les formulaires - Choix unique dans une liste
- Le type radio permet de choisir un seul élément parmi une liste de possibilités.
- Cela se matérialise sous forme de boutons radio.
- La valeur retournée est obligatoirement précisée à l’aide de l’attribut value .
- L’attribut checked="checked" permet de cocher la case par défaut.

<form>
<b> Civilité : </b>
<input type="radio" name="chk1" value="Mademoiselle"/> Mademoiselle
<input type="radio" name="chk1" value="Madame" /> Madame
<input type="radio" name="chk1" value="Monsieur" checked="checked" /> Monsieur
</form>

62
Les formulaires - Boutons (1/3) - Réinitialisation de formulaire

- Le type reset permet de réinitialiser le formulaire en affectant aux différents champs

leur valeur par défaut.
- L’attribut value permet de changer le texte du bouton correspondant.

<input type="reset" value="Reset"/>

63
Les formulaires - Boutons (2/3) - Soumission de formulaire

- Le type submit permet de soumettre le formulaire.

- Le client envoie le contenu du formulaire à l’adresse précisée par l’attribut action de la
balise <form> .
- L’attribut value permet de changer le texte du bouton correspondant.

<input type="submit" value="Soumettre le formulaire"/>

64
Les formulaires - Boutons (3/3)

- Un élément <input/> de type :

● image : Bouton avec image pour l’envoi des données du formulaire.
● file : Bouton d’ouverture de boîte de recherche de fichiers.

<input type="file" name="uFichier" id="fichier"/>

<input type="image" src="debian.png" name="action" value="Delete"/>

65
Les formulaires - Champs de texte

- Pour les saisies multiligne, on utilise la balise <textarea> … </textarea>.

- Le texte délimité par cette balise permet d’initialiser la valeur par défaut du champ.
- La balise fermante est obligatoire même si le champ est vide.
- Les attributs rows et cols (obligatoires) permettent de spécifier la taille en lignes et colonnes
de la fenêtre de saisie.

<textarea rows="4" cols="50">Ce texte est éditable et sera envoyé lors du

submit</textarea>

66
 Les formulaires - Menu de sélection
- La balise <select> permet d’ajouter une liste de sélection.
- L’attribut facultatif size permet de préciser le nombre de choix apparaissant sur la page
Web. Par défaut, ce nombre est initialisé à 1.
- L’attribut multiple="multiple" permet d’autoriser des réponses multiples.
- Les choix du menu sont indiqués à l’aide de la balise <option>:
● L’attribut selected="selected" permet de spécifier le(s) choix par défaut.
● L’attribut value permet de spécifier la valeur associée au choix.
<select name="laliste" size="5" multiple="multiple">
<option value="1">Algorithme</option>
<option selected="selected" value="2">Bases de
données</option>
<option value="3">Systèmes d’exploitation</option>
<option value="4">Programmation C</option>
<option value="5">Technologies du Web</option>
67
</select>
Les formulaires - Exemple
<form action="mailto:t.aitbaha@uiz.ac.ma" method="POST">
<fieldset>
<legend>Exemple de formulaire</legend>
<label>Nom :</label>
<input type="text" name="monNom" id="nom"/>
<label>Prénom :</label>
<input type="text" name="monPrenom" id="prenom"/>
<br/>
<input type="checkbox" name="maNewsletter" id="newsletter"
/>
<label for="newsletter">Une checkbox</label>
<input type="radio" name="monSexe" id="homme" />
<label for="homme">Homme</label>
<input type="radio" name="monSexe" id="femme" />
<label for="femme">Femme</label>
<br />
<label for="photo">Fichier:</label>
<input type="file" name="maPhoto" id="photo" />
68
<br />
<select name="laliste" size="3" multiple="multiple">
<option value="1">toto</option>
<option selected="selected" value="2">titi</option>
<optgroup label="les autres">
<option value="3">tata</option>
<option value="4">tutu</option>
<option value="5">tete</option>
</optgroup>
</select>
<br />
<textarea name="texte" rows="10" cols="80">Raconte−moi une
histoire </textarea>
<br />
<input type="submit" name="maSoumission" id="soumission" />
<input type="submit" name="action" value="Insert" />
<input type="submit" name="action" value="Update" />
<input type="image" src="Images/logoasi.png" alt="logoasi.png"
name="action" width="75" />
<input type="reset" value="Reset" />
</fieldset>
</form> 69
Les formulaires - Exercice

Ecrire le code source réalisant le formulaire suivant:

70
Les formulaires - Petit résumé des champs
input type = text

input type = checkbox

input type = radio

input type= submit

select + option

textarea
71
Balises HTML5 pour les formulaires

L'attribut pattern
L'attribut pattern spécifie une expression régulière par rapport à laquelle la valeur du champ de saisie est vérifiée lorsque le formulaire est soumis.
L'attribut pattern fonctionne avec les types d'entrée suivants : texte, date, recherche, URL, tél, e-mail et mot de passe.
<form>
<label for="country_code">Country code :</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

L'attribut placeholder
L'attribut placeholder spécifie brièvement un indice qui décrit la valeur attendue d'un champ de saisie (une valeur d'échantillon ou une brève
description du format attendu).
L'attribut placeholder fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail et mot de passe.

<form>
<label for="phone">Enter a phone number :</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Balises HTML5 pour les formulaires

L'attribut required
L'attribut required spécifie qu'un champ de saisie doit être rempli avant de soumettre le formulaire.
L'attribut required fonctionne avec les types d'entrée suivants : texte, recherche, URL, tél, e-mail, mot de passe, sélecteurs de date, numéro, case à
cocher, radio et fichier.

<form>
<label for="username">Username :</label>
<input type="text" id="username" name="username" required>
</form>

L'attribut step

L'attribut step spécifie les intervalles de numéros légaux pour un champ de saisie.

Exemple : si step = "3", les nombres légaux peuvent être -3, 0, 3, 6, etc.
L'attribut step fonctionne avec les types d'entrée suivants : nombre, plage, date, datetime-local, mois, heure et semaine.
<form>
<label for="points">Points :</label>
<input type="number" id="points" name="points" step="3">
</form>
Balises HTML5 pour les formulaires

L'attribut autofocus
L'attribut autofocus spécifie qu'un champ de saisie doit automatiquement obtenir le focus lorsque la page est chargée.
<form>
<label for="fname">First name :</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name :</label><br>
<input type="text" id="lname" name="lname">
</form>

L'attribut list
L'attribut list fait référence à un élément <datalist> qui contient des options prédéfinies pour un élément <input>.
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Plan du cours

● Introduction

● Syntaxe

● Élément HTML5

● Les formulaires

● Balises de structuration

● EXTRA

75
Les frames

- Les frames permettent d'afficher plusieurs pages en même temps (chaque page est une
frame).
- Cela est très utile pour faire un menu fixe par exemple à gauche de la fenêtre et un
contenu à droite qui change.
- Tous les arrangements de frames sont permis et le nombre n'est pas limité non plus.
- Chaque frame correspond à une page HTML.

76
Les frames - Comment créer les frames ?

Le concept de base est assez simple :

- Utilisez l'élément Frameset à la place de l'élément body dans un document HTML.
- Utilisez l'élément Frame pour créer des cadres pour le contenu de la page Web.
- Utilisez l'attribut src pour identifier la ressource qui doit être chargée à l'intérieur de
chaque frame.
- Créez un fichier différent pour chaque frame.

77
 <!DOCTYPE html>

Les frames
<html>
<body>
<h1>Frame 1</h1>
<p>Contents of Frame 1</p>
- Pour créer un ensemble de trois colonnes verticales, nous </body>
</html>
devons utiliser l'élément Frameset avec l'attribut cols.
Frame1.html
- L'attribut cols est utilisé pour définir le nombre et la taille <!DOCTYPE html>
des colonnes que le Frameset contiendra. <html>
<body>
Création de colonnes verticales <h1>Frame 2</h1>
<p>Contents of Frame 2</p>
- Dans notre cas, nous avons trois fichiers à afficher, nous </body>
</html>
avons donc besoin de trois frames. Pour créer trois frames, Frame2.html
nous devons attribuer trois valeurs séparées par des <!DOCTYPE html>
<html>
virgules à l'attribut cols. <body>
<h1>Frame 3</h1>
- Pour simplifier les choses, nous allons attribuer la valeur * à <p>Contents of Frame 3</p>
</body>
chacun des cadres, cela entraînera leur redimensionnement </html>

automatique pour remplir l'espace disponible. Frame3.html 78

Les frames <!DOCTYPE html>
<html>
<frameset cols="*,*,*">
<frame src="Frame1.html">
<frame src="Frame2.html">
<frame src="Frame3.html">
</frameset>
</html>

79
 Les frames
Création de lignes horizontales
- Des rangées de cadres peuvent être créées en utilisant
l'attribut rows plutôt que l'attribut cols comme indiqué
dans le code HTML ci-dessous.
- En faisant ce seul changement, les cadres se chargent
désormais en quatre rangées empilées les unes sur les
autres.

<!DOCTYPE html>
<html>
<frameset rows="*,*,*">
<frame src="Frame1.html">
<frame src="Frame2.html">
<frame src="Frame3.html">
</frameset>
</html> 80
 Les frames Mélange de colonnes et de lignes

- Les colonnes et les lignes de cadres “Frames” peuvent apparaître sur la même
page Web en imbriquant un jeu de cadres “Frameset” à l'intérieur d'un autre.
- Pour ce faire, nous créons d'abord un Frameset, puis imbriquons un Frameset
enfant dans l'élément parent.
- Voici un exemple de la façon dont nous pourrions imbriquer deux lignes dans un
ensemble de trois colonnes. <!DOCTYPE html>
<html>
<frameset cols="*,*,*">
<frameset rows="*,*">
<frame src="Frame1.html">
<frame src="Frame2.html">
</frameset>
<frame src="Frame2.html">
<frame src="Frame3.html">
</frameset>
</html> 81
Les frames

82
 Les frames

- L'élément imbriqué peut être placé dans n'importe quelle position. Par exemple, si nous voulions
que l'élément imbriqué apparaisse en position centrale, nous réorganiserions simplement les
éléments comme ceci.

<!DOCTYPE html>
<html>
<frameset cols="*,*,*">
<frame src="Frame1.html">
<frameset rows="*,*">
<frame src="Frame2.html">
<frame src="Frame3.html">
</frameset>
<frame src="Frame3.html">
</frameset>
</html>

83
Les frames - Dimensionnement des cadres

- Les cadres peuvent être dimensionnés en pixels “px” ou en pourcentages “%”, ou ils
peuvent être définis pour s’ajuster automatiquement en fonction de l’espace
disponible.
- Pour spécifier la taille d'un cadre, insérez la valeur souhaitée dans l'attribut cols ou
rows.
- Par défaut, sauf si l'attribut noresize est ajouté à un cadre, les visiteurs du site Web
peuvent utiliser leur souris pour faire glisser la bordure entre deux cadres pour
redimensionner les cadres.
- Si cela n'est pas souhaitable, l'attribut noresize peut être appliqué à un élément frame
pour empêcher le redimensionnement.
84
Les frames - Marges et bordures du cadre

- Nous pouvons augmenter ou diminuer la marge entre les cadres en utilisant les attributs
marginheight ou marginwidth, et également supprimer la bordure entre les cadres si
nous le souhaitons à l’aide de l’attribut frameborder.
- Prenons l’exemple précédent, nous pouvons supprimer les bordures entre les trois colonnes
et ajouter également une marge autour du contenu.

85
 Les frames - Marges et bordures du cadre
<!DOCTYPE html> L'attribut marginheight appliqué à la
<html>
<frameset cols="*,*,*"> première image ajoutera 15pixels de
<frame src="Frame1.html" marginheight="15">
<frameset rows="*,*"> marge au-dessus et en dessous du
<frame src="Frame1.html" frameborder="0">
<frame src="Frame2.html" frameborder="0"> contenu chargé dans le premier cadre.
</frameset> La valeur frameborder de 0 supprime
<frame src="Frame3.html" frameborder="0">
</frameset> les bordures autour des quatre cadres.
</html>

86
 Les frames - Cibler des cadres avec des liens

- L'une des utilisations les plus courantes des cadres consiste à créer une navigation dans un cadre
qui est toujours visible quelle que soit la position du contenu des autres cadres.
- Lorsqu'ils sont correctement mis en œuvre, les liens de navigation entraînent le chargement de
nouvelles ressources dans un cadre tandis que les autres cadres restent statiques.

87
 Les frames - Cibler des cadres avec des liens
Comment le Faire ?
- La première étape pour y arriver est d'attribuer un nom au cadre où nous voulons que les liens
s'ouvrent.
- Nous voudrions probablement utiliser la colonne de gauche pour notre navigation et la colonne
centrale comme cadre cible.
- Pour ce faire, nous devons attribuer un nom à notre cible.

<!DOCTYPE html>
<html>
<frameset cols="*,*,*">
<frame src="Frame1.html" marginheight="15">
<frame src="Frame2.html" name="mid_col" frameborder="0">
<frame src="Frame3.html" frameborder="0">
</frameset>
</html>
88
 Les frames - Cibler des cadres avec des liens
Comment le Faire ?
- Maintenant que nous avons nommé la colonne centrale name="mid_col", nous pouvons créer
quelques liens dans notre document source de colonne de gauche Frame1.html et cibler la colonne
centrale.
<!DOCTYPE html>
<html>
<body>
<h1>Frame 1</h1>
<p>Contenu de la Frame 1</p>
<ul>
<li><a href="Frame1.html" target="mid_col">Frame 1</a></li>
<li><a href="Frame2.html" target="mid_col">Frame 2</a></li>
<li><a href="Frame3.html" target="mid_col">Frame 3</a></li>
</ul>
</body>
</html>
89
Les frames - Exercice

Ecrire le code source qui permet de diviser

votre page Web en 4 Frames

Frame 1 Frame 2 Frame 3

Frame 4

90
 - Bleu Frame 2
- Jaune
- Rouge
Modifiez le code source de façon de
- Vert
cibler la Frame 3 à travers l’index en
Frame 4
Frame 1
Comment le Faire ?
- La première étape pour y arriver est d'attribuer un nom au cadre où nous voulons que les liens
s'ouvrent.
- Nous voudrions probablement utiliser la colonne de gauche pour notre navigation et la colonne
centrale comme cadre cible.
- Pour ce faire, nous devons attribuer un nom à notre cible.
- Maintenant que nous avons nommé la colonne centrale name="mid_col", nous pouvons créer
quelques liens dans notre document source de colonne de gauche Frame1.html et cibler la colonne
91
centrale.
Balises de structuration

Les balises <div>

La balise HTML <div> (ou division) est un conteneur générique : elle peut contenir n’importe quel
élément HTML.
Cet élément, de type bloc, n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis
en forme d'une manière explicite (en utilisant un style CSS).
<div> est très souvent utilisé avec la mise en page CSS d'une page Web.

La balise <span>
La balise <span> ne produit aucun effet visuel mais sert à appliquer un effet de style CCS aux
éléments qu’elle contient (un texte par exemple).
Balises de structuration

Les balises sémantiques

Une page web est souvent composée d'un menu, d'une sidebarre et d'un pied de page.

Tous ces ensembles peuvent (et doivent) être compris dans des balises qui vont structurer la page.

Un élément sémantique décrit clairement son sens au navigateur et au développeur.

Des exemples d'éléments non-sémantiques: <div> et <span> - ne disent rien sur leur contenu.

Des exemples d'éléments sémantiques: <form>, <table> et <img> - contenu clairement défini.
03- DÉFINIR LES ÉLÉMENTS BASIQUES D’UNE
PAGE HTML

Balises de structuration
Les balises sémantiques
Plusieurs sites Web utilisent les balises comme : <div id="nav">, <div class="header">, ou <div id="footer">, pour indiquer les liens de navigation, en-tête,
pied de page.

HTML5 propose des éléments sémantiques permettant de définir clairement les différentes parties d'une page web :
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure> / <figcaption>
• <footer>
• <details> / <summary>
• <mark> Figure 22 : Les éléments sémantiques [8]
• <time>
Balises de structuration

Les balises <header> et <footer>

Une page est généralement composée d'un header et d'un footer.
Le header peut comprendre (liste non exhaustive) :
• un menu,
• un logo,
• des liens vers des réseaux sociaux,
• …
Exemple :

<header>
<!-- Ici le contenu -->
</header>

Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers certaines pages qui ne sont pas listées dans le
menu :
<footer>
<!-- Ici le contenu de mon footer -->
</footer>
Balises de structuration

La balise <nav>
La balise <nav> (utilisée avec une balise <ul> ou <ol>) permet de spécifier les éléments de navigation de la page (le menu).

Le menu consiste en une liste d'éléments permettant de naviger entre plusieurs pages du même site, ou bien vers plusieurs sections de la page.

Exemple :

<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Balises de structuration

Les balises <main> et <section>

La balise <main> spécifie le contenu principal de la page web.
La balise <section> permet de segmenter le contenu en plusieurs sections.

Exemple :
<main>
<p>Texte d'introduction de mon contenu.</p>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
</main>
Balises de structuration

La balise <article>
La balise <article> permet d'incorporer du contenu annexe, comme par exemple :
• des articles de blog,
• des produits,
• des commentaires,
• …
Exemple :

<main>
<p>Texte de mon contenu. Voilà des articles liés à ma page :</p>
<div>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
</div>
</main>
Balises de structuration

La balise <aside>
La balise <aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvent représenté comme une sidebarre :

Exemple :

<main>
<p>
Texte de mon contenu.
</p>
<aside>
<p>
Texte sans rapport direct.
</p>
</aside>
</main>
Plan du cours

● Introduction

● Syntaxe

● Élément HTML5

● Les formulaires

● Balises de structuration

● EXTRA

100
Les balises multimédia (images, audio, vidéo)
La balise <picture>

L'élément HTML <picture> permet d'afficher différentes images pour différents appareils ou tailles
d'écran. Le navigateur choisira la source la plus pertinente selon :
• La disposition de la page
• L'appareil utilisé
• Les formats pris en charge
Si aucune correspondance n'est trouvée parmi les éléments <source>, c'est le fichier défini par
l'attribut src de l'élément <img> qui sera utilisé.

Exemple :

<picture>
<source srcset="../Photos/ofppt.jpg" media="(min-width : 600px)">
<img src="..//Photos/officeFP.jpg" alt="Pas d'image" width="200px" height="140px">
</picture>

Si la largeur de l'écran dépasse 600 px, c'est la source « ofppt.jpg » qui prend l'objet
<picture>.
Les balises multimédia (images, audio, vidéo)

La balise <audio>
L'élément <audio> permet de lire un fichier audio dans la page HTML
Controls : pour afficher les boutons play, stop, preview…
Autoplay : pour démarrer la lecture automatique de l'audio lors du chargement de la page web.
Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source.
Si le navigateur ne prend pas en charge l'élément <audio>, il affiche le message en bas.

Exemple :
<audio controls autoplay>
<source src=« son.ogg" type="audio/ogg">
<source src=« son.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la balise "audio".
</audio>
Les balises multimédia (images, audio, vidéo)
La balise <video>

L'élément <video> permet d'incorporer une vidéo dans une page Web.
Controls : pour afficher les boutons play, stop, …
Autoplay : pour démarrer la lecture automatique de la vidéo lors du chargement de la page web.
Le navigateur essaie de lire la première source. En cas d'erreur, il passe à la deuxième source.
Si le navigateur ne prend pas en charge l'élément <video>, il affiche le message en bas.

Exemple :
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Votre navigateur ne supporte pas la balise "video".
</video>
Les balises multimédia (images, audio, vidéo)
La balise <iframe>

La balise <iframe> permet d’afficher une vidéo

Pour ce faire, on peut utiliser l’identifiant de la vidéo pour y faire référence dans le code HTML.

Exemple :
<iframe width="640" height="360"
src="https ://www.youtube.com/embed/Ma1vSev07ug">
</iframe>
Les balises multimédia (images, audio, vidéo)
La balise <object>

L'élément <object> est une solution polyvalente pour inclure des objets génériques.
Cet élément permet aux auteurs HTML de spécifier tout ce qui est requis par un objet pour sa
présentation par un agent utilisateur.

Exemple 1 : intégrer un document HTML dans un autre document HTML

<object data = "data/test.html" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.html">test.html</a>
</object>

Ici, l'attribut « alt » apparaitra si le navigateur ne prend pas en charge la balise d'objet.

Exemple 2 : intégrer un document PDF dans un document HTML

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">

alt : <a href = "data/test.pdf">test.html</a>
</object>
Les balises multimédia (images, audio, vidéo)
 Eexercice 1

• En utilisant la balise <video>, insérer une vidéo de votre choix à la fin de la page « index.html » sous le titre <h1> « Présentation vidéo ».

• Modifier les paramètres autoplay et controls pour permettre la lecture automatique de la vidéo au chargement de la page web et aussi
afficher les boutons de contrôle de la vidéo.

• Remplacer la vidéo par l’objet <audio> avec les mêmes valeurs que celles des paramètres autoplay et controls.

• Remplacer l’audio par un objet <iframe> qui affiche une vidéo depuis Youtube.

• Remplacer la vidéo Youtube par un fichier PDF toujours en utilisant la balise <iframe>.
Eexercice 2
• Définir des blocs par l’utilisation d’un tableau (cela n’est pas la meilleure méthode).
• En utilisant rowspan, colspan, width et height ainsi que les tailles par pixel et par pourcentage, créer le tableau ci-dessous
(Figure 14)
• Ensuite, insérer les balises sémantiques de disposition dans les cellules du tableau comme cité ci-dessous :

Figure 14 : Utilisation des balises sémantiques

Travail de synthèse
• Réaliser la page suivante et créer d’autres pages web vides à atteindre lors du clic sur les éléments du menu à gauche.
• Utilisez les attributs color du texte et bgcolor de la balise body pour modifier les couleurs de la page
• Penser à respecter les normes du W3C !

Figure 15 : Travail de synthèse