Les technologies du Web

Introduction
• Internet (Interconnected Networks) est l’infrastructure réseau
qui interconnecte des réseaux publics et privés d'ordinateurs à
l’échelle mondiale.

Services fournis sur Internet:

o Exploration des documents hypertextes: Web;

o Courrier électronique;

o Messagerie instantanée;

o Partage et transfert de fichiers;

o Communications téléphoniques.

2
Web
• Le Web (World Wide Web) est un service logiciel qui utilise le réseau Internet
pour permettre aux utilisateurs l’exploration et la consultation de documents,
appelés pages web, mis en ligne par des sites web.
• La navigation entre ces documents est assurée par des liens hypertextes, ou
hyperliens; ils sont ainsi appelés documents hypertextes.
• La mise en œuvre de ce système a nécessité l’utilisation d’un ensemble de
technologies, dites de base:
1. HTML est le langage de structuration des pages web (documents HTML);
2. URL (Uniform Resource Locator) est la technologie d’identification uniforme des
pages Web: adresse d'une page sur Internet.
3. HTTP (HyperText Transfert Protocol) est le protocole (Langage de
communication) qui assure la communication entre les serveurs qui donnent
accès aux documents et les clients qui les utilisent.

3
 Architecture du Web
Le Web est un système conçu selon une architecture logicielle dite client/serveur. Dans
cette architecture, le client et le serveur sont dotés d'applications logicielles qui
communiquent par le protocole http:
1. Client http permet l’interrogation des serveurs http par utilisation de requêtes http
et la récupération des documents hypertextes retournés en réponse. Cette
application est en général un navigateur (Internet Explorer, Firefox, Google
Chrome…) qui permet en plus d'interpréter et visualiser les documents hypertextes.
2. Serveur http donne accès aux sites et au documents hypertextes exposés sur le
réseau Internet par des serveurs Web.

4
Technologies
• HTML
Langage utilisé pour décrire et définir le contenu d'une
page web.

• CSS
Langage utilisé pour enrichir l'apparence du contenu d'une
page web.

• JavaScript
langage utilisé pour ajouter un côté interactif et dynamique
a une page web. 5
 HTML
• Le HTML Hypertext Markup Language est le langage à balises qui est
utilisé pour construire des documents HTML (pages web) pouvant être
visualisés sur internet par un navigateur.
• Une page Web peut incorporer du texte, des images, de l'animation et du
son.
• Pour créer un programme en HTML, nous avons simplement besoin d'un
éditeur de texte (bloc-notes, notepad++,…) et d'un navigateur internet
pour visualiser le rendu Web.
• Règles de base :
- Un fichier HTML "standard" doit impérativement avoir un nom de fichier (à ne
pas confondre avec le titre de la page) qui se termine par l'extension .html.
- La page d'accueil d'un site Web doit s'appeler [Link].
- Les commandes HTML peuvent être écrites en minuscules ou en majuscules.

6
Visualisation du code HTML d’une page Web

7
Eléments et balises
• Un élément HTML est une commande permettant de définir chaque
contenu d'une page web et également de passer certaines informations
utiles au navigateur pour l'afficher.

• Un élément HTML peut être soit constitué d’une paire de balises (ouvrante
et fermante) et d’un contenu, soit d’une balise unique appelée balise
orpheline.

8
Attributs
• Les attributs permettent de définir plus précisément un élément en lui
apportant des informations supplémentaires sur son apparence ou son
comportement.

• Un attribut contient toujours une valeur, qu’on peut parfois omettre dans le
cas des attributs ne possédant qu’une seule valeur par défaut.

9
Imbrication des balises
• Dans un code HTML on peut combiner plusieurs balises. Par exemple un
paragraphe peux comporter un texte à la fois en gras et en italique.
• Lorsque l'on combine dans un code plusieurs balises ouvrantes, il est
impératif de respecter leur hiérarchie: la première ouverte devra être la
dernière à être fermée.
Exemple avec balises chevauchées:
<p><b><u>Ici les balises sont mal </b>imbriquées</u></p>
Exemple avec balises correctement imbriquées:
<p><b><u>Ici les balises sont correctement imbriquées</u></b></p>

10
La structure minimale d’un code HTML
<!DOCTYPE html>
<html>
<head>
<title> Titre </title>
<meta charset="utf-8">
</head>
doctype sert à indiquer le type du document.
<body>
html balise racine qui sert à représenter la page en soi: on y insère
</body> tout le contenu de notre page à l’intérieur de celui-ci.
</html>
head contient des éléments qui vont servir à fournir des informations
sur la page au navigateur, comme le titre de la page ou encore le type
d’encodage utilisé pour que celui-ci puisse afficher les caractères de
texte correctement.

body contient tous les éléments définissant les contenus visibles de la

page, et notamment les différents textes présents dans la page, les
images, etc…

11
L’élément body
L'élément body représente le contenu principal du document HTML. Il ne peut y avoir
qu'une balise <body> par document. On peut l'utiliser avec des attributs pour mettre
en forme tout le document.
Attribut Effet
text="couleur" Colorer le texte de la page
bgcolor="couleur" Colorer le fond d'écran de la page
link="couleur" Colorer les liens de la page
alink="couleur" Colorer les liens actifs de la page
vlink="couleur" Colorer les liens visités de la page
background=" image" Mettre une image de fond d'écran sur la page
lang="langue" Site rédigé en plusieurs langues
topmargin="taille"
Définir les marges du texte
leftmargin="taille"
Exemple:
<body text="black" bgcolor="yellow" link="blue" alink="red" vlink="green">

12
L'indentation et les commentaires
• Commentaire: texte qui sert simplement de mémo, Il n'est ni affiché
ni lu par l'ordinateur.
• Laisse des indications sur le fonctionnement de la page Web
• Définit par une balise HTML de forme spéciale:
<!-- Ceci est un commentaire -->
• Indentation: création des retrait en début de chaque ligne de code
dans l'éditeur de façon cohérente et logique pour structurer et
organiser le programme HTML.
• Code plus propre et plus lisible, donc plus compréhensible;
• Détection plus facile des éléments et des différentes partie du code.
• Détection plus facile des erreurs potentielles du code;

13
 L'indentation et les commentaires
• Commentaire: texte qui sert simplement de mémo, Il n'est ni affiché
ni lu par l'ordinateur.
• Laisse des indications sur le fonctionnement de la page Web
• Définit par une balise HTML de forme spéciale:
<!-- Ceci est un commentaire -->
<!DOCTYPE html> <!DOCTYPE html>
•
<html> Indentation: création des retrait e n début de chaque ligne de code
<html>
<head> dans l'éditeur de façon cohéren te et logique <head>pour structurer et
<!-- En-tête de la page --> <!-- En-tête de la page -->
organiser le programme
<meta charset="utf-8" />
HTML. <meta charset="utf-8" />
<title>Titre</title> <title>Titre</title>
</head>
• Code plus propre et plus lisible , d onc plus compréhensible;
</head>
• Détection plus facile des élém ents et des différentes partie du code.
<body> • <body>du code;
Détection plus facile des erreu rs p otentielles
<!-- Corps de la page --> <!-- Corps de la page -->
<p>Bonjour tout le monde!</p> <p>Bonjour tout le monde!</p>
</body> </body>
</html> </html>

14
 Les titres d'un document HTML
Les éléments <h1> à <h6> représentent six niveaux de titres dans un document, <h1> est
le plus important et <h6> est le moins important. Un élément de titre décrit brièvement
le sujet de la section qu'il introduit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Niveaux de titres</title>
</head>
<body>
<h1>Titre super important</h1>
<h2>Titre important</h2>
<h3>Titre un peu moins important (sous-titre)</h3>
<h4>Titre pas trop important</h4>
<h5>Titre pas important</h5>
<h6>Titre vraiment pas important du tout</h6>
</body>
</html>

15
Formatage des paragraphes
Elément Effet
<p>Texte </p> Définir un paragraphe
<p align="center">Texte </p> Définir un paragraphe avec alignement centré
<br> Définir un retour à la ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Paragraphes</title>
</head>
<body>
<p align="left"> Bonjour
et bienvenue sur mon site! </p>
<p> Bonjour <br> et bienvenue sur mon site! </p>
</body>
</html>
16
Formatage du texte en HTML
Formater un texte signifie simplement tout simplement modifier l'apparence
du texte (on dit qu'on le « met en forme »).
Elément Effet
<b>Texte </b> Définir un texte en gras
<i>Texte </i> Définir un texte en italique
<u>Texte </u> Souligner un texte
^Texte Mettre un texte en exposant
_Texte Mettre un texte en indice
<s>Texte </s> Rayer un texte
<font face="Police de caractère"> texte </font> Définir une police de caractère
<font size ="taille">Texte </font> Définir la taille d'un texte
<font color="couleur">Texte</font> Définir la couleur d'un texte

17
Les listes
Les listes nous permettent souvent de mieux structurer un texte et d'ordonner ses
informations.

Les listes de définitions:

Fraises Les balises <dl></dl> définissent la liste.
Fruit de la famille des Rosacées
Framboises
Les balises <dt></dt> définissent le terme à définir.
Fruit recouvert de poils Les balises <dd></dd> définissent la signification
microscopiques du terme.
Cerises
Fruit charnu à noyau

les listes non ordonnées ou listes à puces:

🞄 Fraises
La balises <ul></ul> définissent la liste.
🞄 Framboises
🞄 Cerises
La balises <li></li> définissent une entrée de la liste

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

1. Fraises La balises <ol></ol> définissent la liste.
2. Framboises
La balises <li></li> définissent une entrée de la liste
3. Cerises
18
Listes de définitions
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listes de définitions</title>
</head>

<body>
<h2>Mes fruits préférés:</h2>
<dl>
<dt>Fraises</dt>
<dd>Fruit de la famille des Rosacées</dd>
<dt>Framboises</dt>
<dd>Fruit recouvert de
poils<br>microscopiques</dd>
<dt>Cerises</dt>
<dd>Fruit charnu à noyau</dd>
</dl>
</body>
</html>

19
Listes non ordonnées
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listes à puces</title>
</head>

<body>
<h2>Mes fruits préférés</h2>
<ul type="disc">
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ul>
</body>
</html>

Attribut de ul Effet
Type="marqueur" Définir le type de marqueur de la liste (disc,circle,square)

20
Listes ordonnées
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listes numérotées</title>
</head>

<body>
<h2>Mes fruits préférés</h2>
<ol type="3" start="1" reversed>
<li>Fraises</li>
<li>Framboises</li>
<li>Cerises</li>
</ol>
</body>
</html>

Attribut de ol Effet
Type="marqueur" Définir le type de marqueur de la liste (1,i,I,A,a)
start="numéro" Indiquer la valeur du marqueur du début
reversed Inverser le sens de numérotation (du bas vers le haut)
21
Insertion d'une ligne de séparation
• On peut insère une ligne horizontale de séparation de paragraphes
dans un document HTML grâce à l'élément <hr> .

Attribut Effet
size="taille" Détermine l'épaisseur du trait
align="alignement" Précise l'alignement du trait
color="couleur" Spécifier la couleur du trait
width="largeur" Définir la longueur du trait en pixel ou en pourcentage

Exemple:
<hr width="50%" size="4" color="blue" align="center">

22
Insertion d'images
• Il existe différents formats d'image (jpg, png, gif,…) que l'on peut utiliser et
on doit les choisir selon le type d'image:
– JPEG : pour les photos ;
– PNG : pour toutes les autres graphiques;
– GIF : image limitée en nombre de couleurs mais qui peut être aussi animée.
• On peut insérer une image dans une page Web soit à titre décoratif ou à
titre illustratif.
– S'elle n'apporte aucune information, c'est juste à titre décoratif, placez l'image
dans un élément paragraphe.
– S'elle apporte une information au texte, placez l'image dans un élément figure.
• On peut insérer une image .png ou une icone .ico dans la barre du titre
d'une page Web.
– Ajouter dans la partie entête la balise: <link rel="icon" href="[Link]" >

23
Insertion d'images
On insère une image avec la balise orpheline <img>, elle doit obligatoirement
comporter au moins les deux attributs: src et alt.
Attribut Effet
src="chemin\nom" Préciser le chemin vers le fichier image et son nom
Préciser un texte alternatif qui s'affichera si l'image ne peut pas
alt="texte descriptif"
s'afficher
border="taille" Spécifier la taille de la bordure de l'image
width="largeur" Définir la largeur de l'image
heigth="hauteur" Définir la hauteur de l'image
title="aide" Afficher une info bulle d'aide au parcours de l'image
align="alignement" Aligner l'image par rapport au texte(top, middle, bottom, left, right)
vspace="marge verticale" Définir la marge verticale par rapport à l'image
hspace="marge horizontale" Définir la marge horizontale par rapport à l'image

Exemple:
<p><img src="images/[Link]" width="270" height="295" alt=" logo l'ISMS -
ESP" border="0" title="logo l'ISMS"></p>

24
Insertion de figures
• On peut insérer une figure dans un document HTML grâce à
l'élément <figure> .
Exemple:
<figure> <img src="images/[Link]" alt=" logo IUP "> </figure>

• On peut accompagner une figure d'une légende par utilisation de

l'élément <figcaption>.
Exemple
<figure align="center">
<img src="images/ [Link]" alt="Photo de la Fpt">
<figcaption>Logo IUP </figcaption>
</figure>

25
Liens hypertexte
• Un lien hypertexte est un élément HTML permettant d'envoyer le visiteur vers une
nouvelle page. On peut insérer dans cet élément toute sorte de textes, images et autres
balises.

• Un lien sera représenté dans le code par la balise <a>. Tout ce qui sera dans cette balise
fera office de lien. L'adresse de destination doit se trouver dans l'attribut href.

Exemple de lien avec texte:

<a href="adresse/de/[Link]">Texte du lien</a>

Exemple de lien image :

<a href="adresse/de/[Link]"><img src="adresse/de/l/image"></a>

• L'attribut title, quant à lui, permet de renseigner un petit descriptif sur le contenu de la
page cible, et est un atout non négligeable en matière de référencement et
d'accessibilité.

26
Liens hypertexte
Les liens externes:
• Les liens externes peuvent être vers des pages Web, vers des téléchargement de
fichiers, vers des adresse électronique ( mailto: suivi de l'adresse e-mail ),...
Exemples:
<a href="[Link] mozilla</b></a>
<a href="[Link]"><b>télécharger le fichier</b></a>
<a href="mailto: [Link]@[Link]"><b>Mon adresse mail</b></a>

Lien vers une ancre:

• Une ancre est une sorte de point de repère qu'on peut mettre une page HTML
lorsqu'elle est très longues. Il est utile de faire un lien amenant aux parties
intéressantes du document.
– Utilisez l'attribut name pour donner un nom à l'ancre:
<a name="mon_ancre">Titre</a>
– Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href
contiendra un dièse (#) suivi du nom de l'ancre:
<a href="#mon_ancre">Aller vers l'ancre</a>
27
Les tableaux
Les tableaux permettent de diviser la page en zones et de remplir ces zones avec des
objets (textes, images, couleurs).
Balise Effet
<table> et </table> Définir un tableau
<tr> et </tr> Définir une rangée
<th> et </th> Définir une ligne d'entête (facultatif)
<td> et </td> Définir une cellule
<caption> texte </caption> Ajouter une légende au tableau avec possibilité d'alignement

Attribut de table Effet

bgcolor="couleur" Mettre un fond de couleur
width="50%" Largeur du tableau (en % ou en pixels)
border="taille" Taille des bords (0=pas de bords)
bordercolor="couleur" Couleur des bordures
cellpadding="valeur" Marges intérieures des cellules
cellspacing="valeur" Espacement entre les cellules
rowspan="nombre de cellules" Fusionner plusieurs cellules adjacentes sur une colonne
colspan="nombre de cellules" Fusionner plusieurs cellules adjacentes sur une ligne
28
Les tableaux
<body>
<table border="2" cellpadding="4" cellspacing="2" bgcolor="aquamarine">
<tr>
<td>Cellule 1</td>
<td colspan="2">2 cellules fusionnées (sur la même ligne)</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
<td rowspan=2>2 cellules fusionnées (sur la même colonne)</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
</tr>
</table>
</body>

29
Les Formulaires
• Un formulaire HTML permet de saisir et de transmettre des informations. Un
formulaire est déclaré grâce à la balise <form>

Attribut Effet
name Nom que l'on souhaite donner au formulaire
action Chemin vers la page où les données du formulaire seront envoyées
method Méthode d'envoi des données qui est soit "post", soit "get". Il s'agira d'une page
dite "dynamique" (en .php ou .asp) qui peut interagir avec le serveur pour
sauvegarder les données dans une base, les envoyer par mail, ou réaliser tout
autre traitement.
Exemple :
<form name="mon-formulaire" action="[Link]" method="post">
...
</form>

30
Les éléments du formulaires
Les éléments de formulaire sont répartis en 3 classes :
• Input
– pour la définition des champs de saisie de texte, des boutons cliquables, des cases à
cocher et des boutons radio.
• Select
– pour la définition des listes de menus déroulants et ascenseurs.
• Textarea
– pour la définition de zones de saisie libre de texte.
On peut étiqueter tout les éléments d'un formulaire en utilisant l'élément Label. Son attribut for
prend la valeur de l’identificateur (attribut id) d’un élément auquel le label est lié.

Exemple:
– Code:
<label for="nom">Veuillez saisir votre nom :</label>
<input type="text" name="nom" id="nom" value="tapez votre nom" >

– Rendu visuel:

31
Les attributs commun aux éléments d'un formulaire
• Les éléments de formulaire possèdent plusieurs attributs qui leur donnent une
grande flexibilité d’utilisation :
Attribut Effet
name Permet l’identification uniforme des données auprès du serveur. Le nom doit être
unique, au niveau du même formulaire, sauf dans le cas d’un groupement
d’éléments.
id Permet l’identification unique d’un élément à l’intérieur du document HTML. Cet
attribut est utilisé avec les éléments de formulaire pour permettre leur liaison
avec des libellés.
required Exige la saisie d’une valeur pour un élément.
autofocus Active automatiquement l’élément au moment du chargement de la page
contenant le formulaire par un navigateur.
tabindex Permet la définition de l’ordre selon lequel le focus passe d’un élément à un
autre. Pour se déplacer entre les éléments de formulaire on utilise les touches Tab
et Shift+Tab.
acceskey Permet la création des raccourcis clavier pour l’accès rapide aux éléments de
formulaire.

32
L'élément input
• L'élément input permet de définir quatre types d’éléments de formulaire en fonction de la
valeur de son attribut type :
(1) les zones de saisie de texte mono lignes,
(2) les boutons cliquables,
(3) les cases à cocher,
(4) les boutons radio.
• Les éléments de formulaire possèdent plusieurs attributs qui leurs donnent une grande
flexibilité d’utilisation:

Attribut Effet
type Indique le type d'élément.
value Permet de spécifier une valeur par défaut, c'est à dire que le champs sera affiché
pré-rempli.
placeholder Permet d’afficher une indication dans la zone de saisie quand elle est vide. Cette
indication disparaît une fois la zone devient active ou elle n’est pas vide.
size Indique la dimension de la zone de saisie en nombre de caractères.
maxlength Indique le nombre maximum de caractères acceptés.

33
Les champs de saisie et les boutons
L'attribut type de l'élément input permet selon sa valeur de créer plusieurs type de
champs de saisie et de bouton:
Valeur de l'attribut type Effet
texte Pour créer une zone de saisie de texte.
password Pour définir zone de saisie de mots de passe en permettant de masquer le texte
entré au clavier.
email, url, tel, number, Pour créer des zonez de saisie pour différents types de données. D’autres
range, color, time, date,… attributs min, max et step peuvent être utilisés avec les types number et range.
reset Pour créer un bouton permettant de réinitialiser les données d’un formulaire
avec les valeurs par défaut.
submit Pour créer un bouton permettant de soumettre les données d’un formulaire au
serveur pour qu’il traite la ressource dont l’URL est indiqué en valeur de
l’attribut action de la balise <form>.
image Pour créer un bouton avec un effet identique à un bouton de type submit sauf
ce type de bouton se présente sous forme d’une image. Dans ce cas on utilise
aussi l’attribut src pour indiquer l’URL de l’image.
file Pour sélectionner un fichier local en vue d’être envoyer au serveur
bouton Pour créer un bouton générique qui n’a aucun effet sur les formulaires. Il est
souvent créé pour être utilisé pour l’appel de scripts Javascript.

34
Les boutons radio
Les éléments input dont l'attribut type vaut radio sont généralement utilisés pour construire des
groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les «boutons radio» sont
représentés par des cercles remplis lorsqu'ils sont sélectionnés.
Exemple:
Code: <p>Sexe :
<input type="radio" id="h" name="sexe" value="homme" checked>
<label for="h">Homme</label>
<input type="radio" id="f" name="sexe" value="femme">
<label for="f">Femme</label></p>

Rendu visuel:

En plus des attributs qui sont partagés par l'ensemble des éléments input les champs de
type radio prennent aussi en charge les attributs suivants:
Attribut Effet
checked Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe
value Définit la chaîne de caractères à utiliser comme valeur pour le bouton radio lors de l'envoi du
formulaire si ce bouton est choisi.

35
Les cases à cocher
L'éléments input de type checkbox sont affichés sous la forme de boîtes à cocher qui sont
cochées lorsqu'elles sont activées. Elle permettent de sélectionner une ou plusieurs valeurs dans
un formulaire.
Exemple:
Code: <p>Quel type de prestation recherchez vous ?<br>
<input type="checkbox" name="prestation" id="loc" value="loc">
<label for="loc"> Location de mobilier<label>
<input type="checkbox" name="prestation" id="achat" value="achat">
<label for="achat"> Achat mobilier<label></p>
Rendu visuel:

En plus des attributs qui sont partagés par l'ensemble des éléments input les champs de
type checkbox prennent aussi en charge les attributs suivants:

Attribut Effet
checked Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée par défaut.
value Définit la chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera
envoyée au serveur si la case est cochée.

36
Zone de saisie libre de texte
La balise <textarea> permet de créer une zone de saisie de texte multi-lignes. Le contenu de cette
balise correspond au texte initial qui est affiché à l’utilisateur, qu’il peut modifier.

Exemple:
Code: <label for="message"> Taper votre message:</label>
<textarea name="message" id="message"
rows="4" cols="40" placeholder="saisir ici un message">
</textarea>

Rendu visuel:

En plus des attributs qui sont partagés par l'ensemble des éléments input les champs de
type textaera prennent aussi en charge les attributs suivants:
Attribut Effet
rows spécifie le nombre minimum de lignes dans la zone de saisie qui seront visibles à l’écran. Si le
nombre de lignes dans la zone de saisie dépasse la valeur de cet attribut, alors un ascenseur
de défilement vertical est ajouté à la zone de saisie.
cols spécifie la largeur visible à l’écran de la zone de saisie en nombre minimum de caractères.

37
Menu déroulant (liste d'option)
La balise <select> permet de créer une liste d’options définies avec la balise <option> qui peuvent
être sélectionnées pour être envoyées au serveur.
Exemple:
Code: <label for="profil">Vous êtes:</label><br>
<select name="profil" id="profil">
<option value="part">Un particulier</option>
<option value="prof" selected>Un professionnel</option>
<option value="inst">Un institutionnel</option>
</select>
Rendu visuel:

En plus des attributs qui sont partagés par l'ensemble des éléments input les champs de
type select prennent aussi en charge les attributs suivants:
Attribut Effet
size permet d’indiquer le nombre de lignes consécutives dans la liste qui doivent être affichées.
selected permet la sélection automatique d’une option au moment de l’affichage de la liste.
multiple autorise une sélection multiple de plusieurs options.

38
Groupement des élément d'un formulaire
HTML fournit deux balises <fieldset> et <legend>: La première balise <fieldset> permet de
grouper des éléments de formulaires, par exemple par thèmes, dans des cadres graphiques afin
de rendre les formulaires plus claires et facilement accessibles, et la deuxième balise <legend>
permet d’enrichir les cadres en leur ajoutant une légende. Dans ce dernier cas, la légende peut
être alignée en utilisant l’attribut align.

Exemple:
Code: <fieldset>
<legend align="left"><b>Voulez vous s'inscrir à :</b></legend>
<input type="checkbox" id="e-mail" name="ins" value="e-mail" checked>
<label for="e-mail">E-mail</label>
<input type="checkbox" id="news" name="inscription" value="news">
<label for="news">News letter</label>
<input type="checkbox" id="chats" name="inscription" value="chats">
<label for="chats">Chats</label>
</fieldset>

Rendu visuel:

39