Exercice 1. La structure minimale d'une page HTML

1

ESR 2011-2012

Exercice 1. La structure minimale d'une page HTML

1. Créez un répertoire tp-html puis un fichier base.html dans le répertoire /EnvSystemeReseau/ avec le

contenu suivant (sans les numéros de lignes) :

Ce fichier, qui contient la structure minimale d'une page HTML, vous servira de base de départ à chaque fois que

vous créerez une nouvelle page HTML.

2. Analyse :

Un document HTML commence et se termine avec les balises <html> et </html>. Ces balises indiquent

au navigateur que le document est entièrement composé en HTML.

Tout document HTML contient deux parties principales :

un en-tête, défini dans la balise <head> et qui contient les informations concernant le document

et un corps, défini dans la balise <body> et qui contient le contenu à afficher dans le navigateur

L'élément d'en-tête le plus important, et le seul obligatoire, est le titre, spécifié à l'aide de la balise

<title>. Les navigateurs ne mettent pas en forme le texte du titre et ignorent tout élément autre que du

texte. Le contenu du titre s'affiche en haut de la fenêtre du navigateur.

3. Pour afficher ce fichier dans un navigateur Web, vous pouvez :

soit cliquer sur le fichier avec le bouton droit de la souris et choisir Ouvrir avec/Navigateur Web,

soit ouvrir un navigateur Web et ouvrir le fichier à partir du menu Fichier/Ouvrir un fichier.

4. Remarque :

Les accents ne sont pas correctement affichés par le navigateur. Afin de remédier à ce problème :

On indique au navigateur la table de caractères (charset) qu'il doit utiliser pour afficher le contenu de la

page (les tables de caractères sont associées à la notion de claviers nationaux). On utilise pour cela la balise

<meta charset=>.

Pour l'affichage de caractères issus de la majorité des langues (français, anglais, espagnol, italien, etc.), on utilise

la table ISO-8859-1 (http://fr.wikipedia.org/wiki/ISO_8859_1). Si la page contient des caractères issus de

familles de langues différentes (par exemple, du français et du russe), on utilise la table UTF-8

(http://fr.wikipedia.org/UTF_8). La liste officielle de toutes les tables de caractères existantes se trouve à l'adresse

suivante : http://www.iana.org/assignments/character-sets.

Pour s'assurer que les caractères accentués s'affichent correctement dans tous les navigateurs du monde, on

les remplace par leur nom d'entité ou par leur code d'entité.

Un code d'entité est composé du caractère & (esperluette), du code HTML du caractère concerné et du

caractère ; (point-virgule) : &code_HTML;

Un nom d'entité est composé de la séquence &# (esperluette cad ampersand en anglais et croisillon, du

code ASCII du caractère concerné et du caractère ; (point-virgule) : &#code_ASCII;

Exemple : représentation du caractère 'é' (e avec accent aigu) par son entité

- son code HTML est eacute, son code d'entité est é

- son code ASCII est 233, son nom d'entité est é

Vous trouverez à l'adresse http://www.w3schools.com/tags/ref_entities.asp la liste complète des noms d'entités

(colonne 'Entity name') et des codes d'entités (colonne 'Entity numbers').

Complétez le fichier base.html (voir le code suivant) et sauvegardez-le. Puis, dans le

navigateur, rechargez la page, en cliquant sur la touche <F5> de votre clavier ou sur l'icône de

votre navigateur. Observez le résultat.

http://fr.wikipedia.org/wiki/ISO_8859_1

http://fr.wikipedia.org/UTF_8

http://www.iana.org/assignments/character-sets

http://www.w3schools.com/tags/ref_entities.asp

2

ESR 2011-2012

Exercice 2. Ma première page HTML

1. Ouvrez un nouveau fichier et enregistrez-le sous le nom page1.html dans le répertoire

/EnvSystemeReseau/tp-html. Puis, copiez et collez le contenu de base.html dans ce nouveau

fichier.

2. Créez un répertoire images dans le répertoire /EnvSystemeReseau/tp-html. Recherchez le logo de

l'université Paris-Est sur le Web et enregistrez l'image dans votre répertoire images sous le nom logo-

upe.jpg. Placez ensuite votre photo préférée de vous-même dans le répertoire images sous le nom

moi.jpg.

3. Complétez le fichier page1.html de manière à obtenir le document suivant :

4. Analyse :

Tout d'abord, les lignes 7, 11, 18 et 25 sont des commentaires. Il est possible d'ajouter, dans une page

HTML, des éléments d'information à destination des programmeurs. Il peut s'agir, par exemple, de

mentions internes sur l'auteur et la date de création du fichier, ou de remarques concernant le code qui

permettront à toute personne ou au programmeur lui-même de lire ou relire aisément le code HTML.

Les commentaires sont placés entre les séquences  (marqueur de fin). Tout ce

qui se trouve entre ces deux marqueurs est ignoré par le navigateur lors de l'affichage.

La balise <h1> (ligne 8) permet d'introduire un titre de premier niveau. Le langage HTML possède six

niveaux de titres : les balises <h1>, <h2>, ... jusqu'à <h6>, affichées par les navigateurs dans une taille

décroissante de caractères. La balise <h3> (ligne 14) introduit donc un titre de niveau 3.

Dans la plupart des navigateurs, les titres <h1>, <h2> et <h3> sont affichés avec une police plus grosse que le

3

ESR 2011-2012

texte normal, <h4> est affiché avec une police de même taille que le texte normal, et <h5> et <h6> sont plus

petits.

La balise <hr> (lignes 9 et 16) permet d'introduire une ligne horizontale dans la page. Elle peut être

utilisée pour séparer les différentes sections d'un document, en l'occurrence, le titre, le sous-titre, le contenu

et la signature.

La balise <img> (lignes 12 et 15) permet d'introduire une image à partir d'un fichier dont le chemin est

spécifié par l'attribut src. L'attribut alt permet de spécifier un texte alternatif au cas où l'image ne

s'afficherait pas. L'attribut title spécifie le contenu de l'infobulle qui s'affiche lors du survol de l'image

avec la souris. D'autres attributs de la balise <img> (que nous verrons plus en détail au cours d'un prochain

TP) permettent de formater l'image et de la positionner dans la page.

La balise <p> (lignes 19 et 26) marque le début d'un paragraphe. Lorsque le navigateur rencontre cette

balise, il insère un saut de ligne et un espace vertical avant l'élément suivant. On peut également insérer un

saut de ligne simple à l'intérieur d'un paragraphe avec la balise <br> (ligne 24).

Les balises <b> (texte en gras) et <i> (texte en italiques) sont des balises de style physique. Ces balises

sont utilisées lorsqu'on veut que le texte s'affiche d'une certaine manière (en gras, en italiques, etc.).

La balise <a> (ligne 23) est un lien hypertexte qui renvoie à la première balise <a> (ligne 8), qu'on

appelle une ancre. En cliquant sur le texte Retour au début de la page de la seconde balise

<a>, vous pouvez revenir en haut de page plus rapidement qu'avec les barres de défilement lorsque la page

est longue.

Enfin, la balise <cite> est une balise de style de contenu. Elle indique que le texte inclus est une citation

bibliographique. Par convention, son contenu est affiché en italiques.

Les balises de style de contenu indiquent au navigateur que leur contenu présente une signification, un usage

particulier. Le navigateur met alors ce contenu en forme en fonction de cette signification. Les balises de style de

contenu sont essentielles pour le traitement automatique du contenu d'une page HTML. La balise <cite> peut,

par exemple, permettre d'extraire automatiquement une bibliographie depuis un fichier HTML.

5. Téléchargez sur le Web une image de taille moyenne. Enregistrez-la dans votre répertoire images. Puis

insérez-la dans la page, avant le paragraphe qui commence à la ligne 19. Utilisez ensuite les barres de

défilement pour descendre au bas de la page. Puis retournez en haut de page avec le lien Retour au début

de la page.

Exercice 3. Les balises HTML

1. HTML est un langage imbriqué : les balises sont des instructions qui, insérées dans le document, indiquent au

navigateur comment afficher leur contenu. Les balises sont donc interprétées par le navigateur, elles ne sont

pas affichées à l'écran. Formellement, une balise HTML est un nom encadré par les caractères < (inférieur) et

> (supérieur). Par exemple, <html>.

On distingue deux types de balises :

La plupart des balises HTML sont des balises doubles : elles nécessitent deux balises, une ouvrante

(<html>) et une fermante (</html>). La balise fermante est identique à la balise ouvrante, elle contient

en plus un caractère / avant le nom.

La zone de contenu délimitée par ces deux balises constitue le contenu de la balise (du texte et/ou d'autres

balises) qui, ainsi délimité, peut être traité de manière exclusive, pour la mise en forme par exemple.

Exemple : <i>Du texte en italiques</i>

Il existe également quelques balises simples (ou vides). Ce sont des balises qui ne peuvent contenir

d'autres balises HTML, elles n'ont donc pas besoin d'être fermées , car elles sont auto-fermantes et le

caractère / marquant la fin de l'élément se place à la fin de la balise ouvrante.

Exemple : <img src="images/moi.jpg" alt="Toto" title="c'est moi !" />

Recherchez dans la page http://creer-un-site.fr/liste-des-balises-html-xhtml-28.php la liste des balises simples du

HTML.

1. Un document HTML est composé de balises imbriquées de manière hiérarchique.

On distingue alors les ancêtres, les parents, les enfants et les frères.

Exemple : <strong>Du texte <i>en italiques <u>et souligné</u></i></strong>

La balise <strong> est parent de la balise <i>, qui est elle-même parent de la balise <u>. La balise

http://creer-un-site.fr/liste-des-balises-html-xhtml-28.php

4

ESR 2011-2012

<strong> est ancêtre de la balise <u>. Inversement, <u> est enfant de <i>, qui est elle-même enfant de

<strong>.

- Complétez les phrases a à g à partir du code qui suit :

a. <h4> est ____________________ de <p>.

b. Les deux <p> sont ____________________.

c. <h5> est ____________________ de <p>.

d. <p> est ____________________ de <h5>.

e. <i> est ____________________ de <b>.

f. <p> est ____________________ de <i> et de <b>.

g. <h5> est ____________________ de <i>.

L'imbrication de balises permet de cumuler les propriétés à appliquer à une portion de contenu. Dans

l'exemple <strong>Du texte <i>en italiques <u>et souligné</u></i></strong> :

la portion de texte 'Du texte' sera affichée en gras car elle est contenue dans la balise <strong>

la portion 'en italiques' sera affichée à la fois en gras et en italiques, car elle est contenue dans la balise

<i> qui est elle-même imbriquée dans la balise <strong>

et la portion 'en souligné' sera affichée à la fois en gras, en italiques et soulignée, car elle est contenue

dans la balise <u>, qui est imbriquée dans la balise <i>, qui est imbriquée dans la balise <strong>.

Le chevauchement des balises est une erreur qui empêche l'affichage correct du contenu.

Exemple : <i>Les balises <u>ne sont pas imbriquées</i> correctement</i>

- Trouvez les erreurs qui se sont glissées dans le code suivant et corrigez-les.

1. La balise ouvrante peut contenir des attributs qui précisent ou modifient leur comportement. Ces attributs sont

placés après le nom de la balise, chacun séparé par un ou plusieurs espaces, tabulations ou retours chariot. Leur

ordre n'a aucune importance.

Les attributs sont notés sous la forme nom_attribut="valeur". Par exemple, l'attribut style permet de

spéficier la mise en forme du contenu d'un élément (positionnement des éléments qu'il contient, couleur du texte,

couleur d'arrière-plan, tailles, etc.) à l'aide des propriétés de style du CSS. Sa notation est :

style="propriété1:valeur; propriété2:valeur; ...; propriétéN:valeur".

Exemple :

IMPORTANT : Les noms des balises et des attributs ne sont pas sensibles à la casse (<head>, <HEAD> et

<Head> sont équivalents). En revanche, les valeurs assignées à un attributs sont sensibles à la casse. En

particulier, les noms de fichiers et de répertoires (URL).

5

ESR 2011-2012

Exercice 4. Mise en page

1. Ouvrez un nouveau fichier et enregistrez-le sous le nom page2.html dans le répertoire

/EnvSystemeReseau/tp-html. Puis, copiez-y le contenu du fichier base.html.

2. Dans la balise <body>, insérez des éléments <div> de la manière suivante :

3. Explications :

La balise <div> permet de diviser l'espace en zones d'affichage indépendantes. Chaque zone (ou 'boîte')

peut être dotée de barres de défilement, d'une image d'arrière-plan, de styles indépendants, et peut être

positionnée de façon précise sur la page.

Les principales propriétés CSS de la balise <div> sont : width (largeur), height (hauteur), margin

(marge extérieure), padding (marge intérieure), border-color (couleur de la bordure), border-

width (épaisseur de la bordure), border-style (style de trait de la bordure), background-color

(couleur d'arrière-plan).

1. La propriété background-image permet de définir l'image d'arrière-plan d'une boîte. Elle est fixée par

l'URL de l'image : background-image:url(image), où image est l'adresse de l'image, par exemple

images/logo-upe.jpg.

Insérez, à la suite de la seconde boîte <div>, une balise <div> de 50% de largeur (width) et 10% de

hauteur (height) avec un arrière-plan de couleur orange (background-color).

Le contenu de cette boîte est Ce texte est affiché au-dessus de l'image d'arrière-plan.

Ajoutez comme image d'arrière-plan de cette boîte l'image logo-upe.jpg de l'exercice 2.

2. Par défaut, l'image d'arrière-plan se répète horizontalement et verticalement. Utilisez la propriété

background-repeat avec la valeur appropriée afin d'empêcher l'arrière-plan de se répéter.

3. Par défaut, l'image d'arrière-plan se place en haut à gauche dans la boîte. Utilisez la propriété background-

position (background-position: horizontale verticale;), où horizontale et

verticale sont la position horizontale et verticale, afin de positionner l'image en bas et au centre de la

boîte.

Exercice 5. Le flux HTML

La disposition des éléments d'une page HTML se fait par défaut selon le flux courant : le navigateur parcourt le

code HTML et affiche au fur et à mesure les balises qu'il rencontre. Par conséquent, chaque élément est dépendant

des éléments qui l'entourent.

Boîtes bloc et en-ligne

1. Généralement, on distingue deux types d'éléments HTML : les éléments de type inline (en-ligne) et les

éléments de type block (bloc). Cette distinction a diverses implications sur les éléments concernés.

Elle a des implications sur le positionnement des éléments dans le flux courant :

les boîtes de type block :

- sont en flux vertical : elles se placent l'une en-dessous de l'autre

- occupent automatiquement toute la largeur disponible de leur conteneur (élément parent)

6

ESR 2011-2012

- exemples : <div>, <h1> à <h6>, <p>, <ul>, <ol>, <li>, etc.

les boîtes de type inline :

- sont en flux horizontal : elles se placent l'une à côté de l'autre, sur la même ligne

- n'occupent que la place nécessaire à leur contenu

- exemples : <span>, <a>, <img>, <em>, <strong>, <cite>, etc.

toute boîte peut être reclassée dans un type différent grâce à la propriété CSS display.

http://htmlhelp.com/reference/html40/block.html : les balises block

http://htmlhelp.com/reference/html40/inline.html : les balises inline

Elle a des implications concernant les styles des éléments concernés :

les balises block peuvent être positionnées et dimensionnées à l'aide des propriétés CSS width et

height (largeur et hauteur), min-width et min-height (largeur et hauteur minimales), etc.

les balises inline ne sont pas prévues pour l'être.

Elle a des implications sur les règles d'imbrication des éléments :

les balises block peuvent contenir une (ou plusieurs) autres balises block et/ou inline (sauf

quelques exceptions)

les balises inline ne peuvent contenir qu'une (ou plusieurs) balises inline.

1. Créez un nouveau fichier page3.html dans le répertoire /EnvSystemeReseau/tp-html et copiez-y le

contenu de base.html.

Au cours de cet exercice, vous utiliserez l'élément <p> (que nous avons vu au cours de l'exercice 2) et l'élément

<span>. Ce dernier permet de mettre en forme des portions de texte. Vous utiliserez également les propriétés

width (largeur), background-color (couleur d'arrière-plan), padding (marge intérieure) et margin

(marge extérieure).

Insérez dans <body>, successivement :

un <p> de 200 px de largeur, d'arrière-plan jaune et dont le contenu est le texte une boîte jaune,

un <p> d'arrière-plan vert et dont le contenu est une boîte verte

et un <p> de 400 px de largeur, 5 px de marge intérieure et d'arrière-plan gris, avec à l'intérieur :

un <span> d'arrière-plan jaune et dont le contenu est une boîte jaune

et un <span> d'arrière-plan bleu et dont le contenu est une boîte bleue.

Que constatez-vous concernant le positionnement dans le flux courant et la largeur des boîtes ?

Attribuez une marge extérieure de 20 px au premier <p> et de 0 px au second <p>. Que constatez-vous

concernant l'étendue des marges par rapport aux bordures de l'élément parent <body> ?

Attribuez à <body> une marge intérieure de 0 px. Observez le résultat. Puis remplacez padding par

margin et observez le résultat.

Exceptionnellement, avec l'élément <body>, la propriété margin spécifie non pas les marges extérieures mais

les marges intérieures. Par défaut, la marge intérieure de <body> est de 8 px.

Attribuez aux deux premiers <p> la propriété display:inline. Quelle est la conséquence ?

Attribuez au premier <span> la propriété display:block. Quelles sont les conséquences ?

Positionnement des éléments dans le flux

1. La propriété CSS position permet de modifier le positionnement par défaut des éléments dans le flux.

Le positionnement relatif (position:relative;) :

maintient l'élément dans le flux courant,

permet de le décaler par rapport à sa position par défaut dans le flux

et le décalage n'influence en rien les éléments qui le précèdent ou le suivent : ces derniers se

positionnement par rapport à sa position par défaut.

Le positionnement absolu (position:absolute;) :

retire l'élément du flux courant,

permet de le positionner par rapport aux bordures de son parent

et a une influence sur les éléments qui le précèdent ou le suivent : ces derniers considèrent qu'il n'existe

plus (par exemple, l'élément qui le suit dans le flux se positionne non plus par rapport à l'élément

concerné mais par rapport à l'élément qui le précède).

http://htmlhelp.com/reference/html40/block.html

http://htmlhelp.com/reference/html40/inline.html

7

ESR 2011-2012

Le positionnement fixe (position:fixed;) :

s'apparente au positionnement absolu

et l'élément reste toujours dans la même position par rapport à la fenêtre du navigateur, même lorsque

l'utilisateur fait défiler le contenu de la page avec les barres de défilement.

Le positionnement par défaut (position:static;) :

l'élément se trouve à sa position par défaut dans le flux

et les propriétés top, bottom, left et right ne s'y appliquent pas.

Un élément est positionné quand la valeur de sa position n'est pas static. Le positionnement d'un tel

élément est réalisé à l'aide des propriétés :

top : décalage du bord haut de l'élément par rapport au bord haut de son parent

bottom : décalage du bord bas de l'élément par rapport au bord bas de son parent

left : décalage du bord gauche de l'élément par rapport au bord gauche de son parent

right : décalage du bord droit de l'élément par rapport au bord droit de son parent

1. Insérez l'élément suivant dans page3.html :

Décalez l'élément <span> de 10 px à gauche et de 5 px en bas. Quelles sont les conséquences ?

2. Positionnez le premier <span> de la question 2 en absolu. Quelles sont les conséquences ? Où se trouve la

boîte bleue, à présent, et par rapport à quoi se place-t-elle ?

3. Créez un nouveau fichier nommé page4.html dans le répertoire /EnvSystemeReseau/tp-html et

copiez-y le contenu du fichier base.html.

Insérez dans l'élément <body>, successivement :

un élément <div> dont le contenu est :

« Iam summus Pater architectus Deus Hanc quam videmus mundanam domum, divinitatis templum augustissimum, archanae legibus sapientiae fabrefecerat. Supercaelestem regionem mentibus decorarat ;

aethereos globos aeternis animis vagetarat ; excrementarias ac feculentas inferioris mundi partes amnigena

animalium turba complera. [...] »

puis un élément <div> dont le contenu est :

Lien 1 <br> Lien 2 <br> Lien 3 <br>

Par rapport à quel élément les deux <div> seraient-ils positionnés si on les sortait du flux courant ?

Attribuez au premier <div> les propriétés suivantes : un positionnement absolu ; à 10 % du bord gauche

et 5% du bord haut de la fenêtre ; une largeur de 30% et une hauteur de 100% ; une marge intérieure de 15

px ; une bordure de couleur noire, d'une épaisseur de 1 px et de style solid.

Attribuez au second <div> : un positionnement fixe ; à 2% du bord haut et 2% du bord droit de la fenêtre

; une largeur de 10% ; une marge intérieure de 15 px ; un arrière-plan de couleur gris.

Faites défiler la page vers le haut et vers le bas avec les barres de défilement et observez le comportement

des deux éléments <div>.

8

ESR 2011-2012

Exercice 6 – Les tableaux

1. Créez un fichier mon-cv.html dans le répertoire /EnvSystemeReseau/tp-html. Copiez-y le

contenu du fichier base.html.

2. Complétez le contenu de la balise <title> imbriquée dans <head> avec le titre suivant : Curriculum

Vitae de Nom Prénom.

3. Souvent, pour présenter des informations structurées en lignes et en colonnes, on utilise les tableaux. La

balise <table> permet d'insérer un tableau dans une page Web.

Un tableau est défini de la manière suivante :

Le tableau commence par la balise ouvrante <table> et se termine par la balise fermante </table>.

On utilise la balise <tr> (table row) pour insérer une nouvelle ligne.

On utilise la balise <td> (table data) pour insérer une nouvelle cellule dans une ligne.

On utilise la balise <th> (table head) pour insérer un titre de ligne ou de colonne

Voici un exemple de tableau et le résutlat de son affichage :

1. Dans cet exemple, tous les élément <th> ont un attribut style de même valeur, et tous les éléments <td>

9

ESR 2011-2012

ont un attribut style de même valeur. Afin d'appliquer les mêmes styles à plusieurs balises sans les répéter dans

chacune des balises concernées, on peut définir une feuille de style interne. Pour cela on utilise la balise

<style> dans l'en-tête <head> du document.

En voici un exemple :

Le résultat de l'affichage est le même que celui du tableau précédent. La balise <style> contient 3 règles CSS :

la première s'applique à tous les éléments <table> de la page, la second s'applique à tous les éléments <th> de

tous les tableaux de la page, la troisième s'applique à tous les éléments <td> de tous les tableaux de la page.

2. Il existe 3 manières de définir des styles CSS :

les styles en ligne : dans le code HTML, avec l'attribut style dans chaque élément

les styles incorporés : dans l'en-tête de la page, avec la balise <style>

les styles externes : dans une feuille de style séparée (un fichier dont le nom a pour extension .css,

fichier.css dans l'exemple suivant). Une feuille de style externe peut être appliquée à n'importe

quel fichier HTML. Il suffit, pour cela, d'insérer, dans le fichier HTML concerné, une balise <link> de la

manière suivante :

10

ESR 2011-2012

1. Dans le fichier mon-cv.html, nous allons créer 3 sections : diplômes, expériences professionnelles et

loisirs. Vous définirez les styles en interne ou en externe.

Le titre de chaque section sera inséré à l'aide d'une balise <h3>. Il sera affiché en bleu (color:

blue;) et centré horizontalement (text-align: center).

Le contenu de chaque section sera un tableau.

Dans la section Diplômes, le tableau contiendra autant de lignes que de diplômes que vous avez obtenus.

Il sera divisé en 3 colonnes dont les titres seront : Année, Diplôme, Établissement. Le contenu des cellules sera

aligné à gauche (text-align: left;)

Dans la section Expériences professionnelles, le tableau sera divisé en 3 colonnes dont les titres seront :

Période, Établissement, Poste occupé. Le contenu des cellules sera également aligné à gauche.

Dans la section Loisirs, le tableau contiendra 3 lignes dont les titres seront : langues, activités artistiques

et sports. Chaque ligne contient 2 colonnes.

1. Ajoutez un titre principal à votre page à l'aide d'une balise <h1> que vous formaterez selon votre goût.

2. Ajoutez également une section contenant votre identité et vos coordonnées (Nom et prénom, adresse

postale, adresse électronique, numéros de téléphone fixe et portable).

Exercice 7 – Les listes

1. Créez un fichier mon-cv_listes.html dans le répertoire /EnvSystemeReseau/tp-html.

Copiez-y le contenu du fichier base.html.

2. Complétez le contenu de la balise <title> imbriquée dans <head> avec le titre suivant : Curriculum

Vitae (listes) de Nom Prénom.

3. Souvent, pour présenter des informations ordonnées, non ordonnées ou des définitions, on utilise des

listes. Une liste doit contenir au minimum un élément.

Une liste non ordonnée est définie de la manière suivante :

La liste commence par la balise ouvrante <UL> et se termine par la balise fermante </UL>.

On utilise la balise <IL> pour insérer un nouvel élément dans la liste.

Voici un exemple de liste non ordonnée :

Insérez ce code dans le corps <body> du fichier mon-cv_listes.html et observez.

1. Les éléments d'une liste non ordonnée sont introduits par des « éléments graphiques ». Par défaut il s'agit

d'un rond noir pour le premier niveau d'indentation, un rond blanc pour le deuxième niveau, etc... Ces éléments

graphiques peuvent être modifiés en renseignant le champs type='valeur' dans la balise <IL>.

fichier.css

fichier.html

11

ESR 2011-2012

Le champs type peut prendre les valeurs suivantes :

Testez les différentes valeurs sur la liste non ordonnée précédente.

2. Une liste ordonnée est définie de la manière suivante :

La liste commence par la balise ouvrante <OL> et se termine par la balise fermante </OL>.

On utilise la balise <IL> pour insérer un nouvel élément dans la liste.

Transformez la liste non ordonnée précédente en liste ordonnée, observez.

1. Comme pour les listes non ordonnées, les listes ordonnées utilisent des éléments graphiques pour

introduire les éléments de la liste. Ces éléments graphiques peuvent être modifiés en renseignant le champs

type='valeur' dans la balise <OL>.

Le champs type peut prendre les valeurs suivantes :

Type Type d'énumération

1 Chiffres arabes 1, 2, 3, ...

a Minuscules a b, c, ...

A Majuscules A, B, C, ...

i Chiffres romains minuscules i, ii, iii, ...

I Chiffres romains majuscules I, II, III, ...

Testez les différentes valeurs sur la liste ordonnée précédente.

2. Une liste dite de « description » est définie de la manière suivante :

La liste commence par la balise ouvrante <DL> et se termine par la balise fermante </DL>.

Un titre de définition est indiqué par la balise <DT>.

On utilise la balise <DD> pour renseigner la définition elle-même.

Voici un exemple de liste de description :

Insérez ce code dans le corps <body> du fichier mon-cv_listes.html et observez.

1. Dans le fichier mon-cv_listes.html, nous allons créer 3 sections : diplômes, expériences

professionnelles et loisirs.

Chaque section sera une liste de description dont le titre sera inséré à l'aide d'une balise <h3>. Il sera

affiché en bleu (color: blue;) .

Le contenu de chaque section sera une liste non ordonnée d'éléments en rapport avec la section (les

diplômes dans la section diplômes, ...).

Pour chaque diplôme dans la section Diplômes, vous devez créer une liste non ordonnée contenant les

12

ESR 2011-2012

informations suivantes : Année, Diplôme, Établissement.

La section Expériences professionnelles, doit être créée de la même façon que la section Diplômes. Les

informations demandées pour chaque expérience sont : Période, Établissement, Poste occupé.

De même pour la section Loisirs, avec les informations suivantes : langues, activités artistiques et sports.

2. Ajoutez également une section contenant votre identité et vos coordonnées (Nom et prénom, adresse

postale, adresse électronique, numéros de téléphone fixe et portable). Cette section sera créée grâce à une liste de

description.

Exercice 7 – Mise en forme des listes

1. Créez un fichier listes-formattees.html dans le répertoire /EnvSystemeReseau/tp-

html. Copiez-y le contenu du fichier base.html.

2. Insérez la liste suivante dans le corps de la page :

Puis définissez le code CSS qui permet de formater l'affichage de cette liste comme suit :

En l'absence de règles supplémentaires, la liste est affichée

de cette manière :

3. Positionnement de la liste. Attribuez à la liste précédente une marge extérieure gauche (margin-left)

et une marge intérieure gauche (padding-left) de 0 px et observez le résultat.

Corrigez ensuite les deux propriétés précédentes de manière à réintégrer les puces de la liste à l'intérieur du bloc

<div>.

4. Images en tant que puces. La propriété list-style-image permet d'utiliser une image en tant que

puce. Téléchargez une image (pas trop grande) et enregistrez-la dans le répertoire images sous le nom

puce.gif. Puis complétez le code CSS relatif à la liste avec la propriété liste-style-image:

url(puce.gif);.

Si le navigateur utilisé par l'utilisateur ne prend pas en chage cette partie de CSS (ou n'affiche pas les images), la

puce par défaut sera utilisée. Pour spécifier vous-même la puce HTML à afficher dans une telle situtation, vous

définirez à la fois la propriété list-style-image et la propriété list-style-type.

13

ESR 2011-2012

5. Positionnement des puces. La propriété list-style-position permet de placer les puces par

rapport au texte des items de la liste. Attribuez à la liste précédente cette propriété avec pour valeur inside et

observez le résultat.

6. Suppression des puces. Il peut arriver que vous ne vouliez pas utiliser de puce pour l'affichage d'une

liste. Pour cela, vous remplacerez les trois règles précédentes par l'attribut list-style: none; dans votre

règle de style concernant la liste.

Si vous souhaitez, non pas supprimer les puces mais les remplacer par un caractère de votre choix, vous utiliserez

également la règle list-style: none;. Puis vous forcerez la première ligne de chaque item de la liste à

s'afficher avec un alinéa négatif à l'aide de la propriété text-indent. Il vous faudra également définir le

margin-left ou padding-left, l'un des deux au choix, à 0, et l'autre à la même valeur positive que le

text-indent. Voici le code CSS complet :

Remplacez les styles définis précédemment pour la liste par ces derniers. Puis ajoutez le caractère » au

début de chaque item de la liste.

Exercice 8. Les styles CSS

1. Une feuille de style est un fichier dont l'extension est .css. On définit dans ce fichier nos préférences

concernant l'affichage du contenu de notre page HTML : les polices d'écriture, la taille des caractères pour les

textes, les couleurs, la taille des images, arrière-plans, le positionnement des différentes sections, etc.

Nous avons vu (durant l'exercice 6) les trois façons de définir les styles d'une page HTML. L'avantage des styles

externes, c'est qu'une modification dans cette feuille de style principale affectera toutes les pages qui lui sont liées.

2. Créez un fichier mise-en-forme.html dans le répertoire /EnvSystemeReseau/tp-html.

Copiez-y le contenu du fichier base.html. Créez ensuite un nouveau fichier mes-styles.css dans le même

répertoire.

3. Insérez, dans la balise <head> de votre page HTML, la balise suivante :

Cette balise vous permet de créer un raccourci vers le fichier dans lequel vous définissez les styles d'affichage de

votre page :

La balise <link> indique au navigateur qu'il doit chercher un document situé à l'extérieur de la page

HTML.

L'attribut rel="stylesheet" précise que le document en question est une feuille de style.

L'attribut type="text/css" précise le type de la feuille de style, du CSS en l'occurrence.

Et L'attribut href="URL" donne l'URL de la feuille de style, c'est-à-dire son emplacement.

1. À présent, insérez dans le contenu de la page (dans la balise <body>) un titre <h1> dont le contenu est

Mise en forme par les styles CSS. Insérez ensuite un titre <h2> dont le contenu est Un premier petit exemple suivi

d'un paragraphe <p> que vous remplirez avec un texte quelconque de petit taille (à rechercher sur le Web). Insérez

une deuxième fois un titre <h2> avec pour contenu Un deuxième petit exemple suivi d'un paragraphe que vous

remplirez cette fois avec un texte de longueur moyenne ou grande.

14

ESR 2011-2012

Nous allons, par la suite, définir, dans notre fichier mes-styles.css, l'aspect global de la page mise-en-

forme.html lors de son affichage. Pour cela, nous allons fournir au navigateur les règles d'affichage du

contenu.

2. La syntaxe d'une règle CSS est de la forme suivante : sélecteur {propriété1: valeur1;

propriété2: valeur2; …}. Une règle est donc composée de deux parties : un sélecteur et une ou

plusieurs déclarations. Une déclaration comprend elle-même deux parties : une propriété et une valeur associée

à cette propriété. Ces deux parties sont séparées par le caractère deux-points (:) et la déclaration est terminée par

un point-virgule (;). Dans l'exemple suivant, le sélecteur est p et la déclaration est color: blue ; dans la

déclaration, la propriété est color et sa valeur est #e8eae8.

Tous les types d'éléments HTML (les noms des balises) peuvent être des sélecteurs.

La liste des propriétés et leurs valeurs est définie dans la spécifications du w3c, que vous pourrez trouver

à l'adresse suivante : http://www.yoyodesign.org/doc/w3c/css1/index.html#css1-properties.

1. Les sélecteurs. Un sélecteur peut contenir plusieurs noms de balises, séparés de différentes manières.

Les sélecteurs multiples contiennent une liste de noms de balises HTML séparés par des virgules. Ils

permettent d'appliquer le même bloc de règles de styles à plusieurs éléments de la page HTML. Les deux

exemples suivants sont équivalents :

Les sélecteurs contextuels contiennent une liste de noms de balises HTML séparés par un espace. Il

permettent d'appliquer des styles à une balise lorsqu'elle se trouve dans un contexte donné. Dans le sélecteur, les

balises sont listées dans leur ordre d'imbrication. L'exemple suivant définit la valeur de la propriété list-style

des balises <li> selon leur niveau dans une liste :

- si <li> est imbriquée dans un seul <ol>, alors le navigateur utilise la valeur upper-roman de la propriété list-style

- si <li> est imbriquée dans deux <ol>, alors il utilise la valeur upper-alpha

- si <li> est imbriquée dans trois <ol>, alors il utilise la valeur décimal

Le sélecteur universel, noté *, applique les styles qui lui sont associés à tous les éléments du document.

Avec la règle de l'exemple suivant, tous les textes de la page HTML seront affichés en violet et dans la police

Times New Roman.

Les sélecteurs adjacents contiennent des noms de balises séparés par le caractère +. Ils permettent de

sélectionner une balise lorsqu'elle est immédiatement suivie d'une autre. Dans l'exemple suivant, le navigateur

ajoute de l'espace aux instances <h1> de la page lorsqu'elles sont immédiatement suivies d'un titre de niveau 2,

<h2>.

http://www.yoyodesign.org/doc/w3c/css1/index.html#css1-properties

15

ESR 2011-2012

Les pseudo-éléments contiennent un nom de balise suivi de : et du nom d'un pseudo-élément (:first-

line, :first-letter, :before, :after). Ils permettent de mettre en forme des parties de contenu qui

sont impossibles à baliser. Selon l'exemple suivant, la première ligne des éléments <p> doit s'afficher en italique

et dans une taille de police deux fois plus grosse :

1. Les classes. Le langage CSS permet d'appliquer plusieurs styles à un même élément en attribuant une

classe à chacun de ces éléments. Pour attribuer une classe à un élément, on utilise l'attribut class="nom".

Les classes régulières. On veut, par exemple, présenter un article contenant deux paragraphes <p>, l'un

contenant le résumé de l'article et l'autre l'article lui-même. On attribue au premier paragraphe la classe résumé,

ainsi : <p class="resume"> et au deuxième paragraphe la classe article, ainsi : <p class="article">.

On définit ensuite le style de chacun de ces paragraphes de la manière suivante (le nom de la balise et celui de sa

classe sont séparés par un .). Le résumé sera alors affiché en italiques, dans une taille de police inférieure et avec

une marge de 0.5cm. Le contenu de l'article sera centré dans la page.

Les classes génériques. On peut aussi définir une classe et l'associer à plusieurs balises différentes. Le

sélecteur de la règle CSS est alors composé d'un . suivi du nom de la classe. Par exemple, pour afficher les titres

<h1> et les paragraphes <p> en italiques, on définit une classe italique à laquelle on associe la règle permettant

d'afficher du texte en italiques. Puis, dans le code HTML, on attribue le nom de cette classe aux <h1> et aux <p>

: <p class="italique"> et <h1 class="italique"> .

Les classes ID permettent d'attribuer un identifiant unique à une balise donnée. Le sélecteur de la règle

CSS est composé d'un caractère # suivi du nom de l'identifiant. Par exemple, pour afficher le contenu d'un <p>

donné en jaune, on peut lui attribuer l'identifiant jaune (<p id="jaune"> ) puis définir la règle CSS suivante :

Les pseudo-classes sont des classes dont les noms sont prédéfinis et qui n'ont pas besoin d'être précisées

par l'attribut class. Elles permettent de contrôler le style de certaines balises selon leur état.

Voici les états les plus usités pour les éléments de type <a> :

a:link {color: orange;} : le texte du lien est affiché en orange tant qu'il n'a pas été visité

a:active {color: red;} : le texte du lien est affiché en rouge lorsque l'internaute clique dessus

a:visited {color: blue;} : le texte du lien est affiché en bleu s'il a été visité au moins une fois

a:hover {font-weight: bold;}: le texte du lien est affiché en caractères gras lorsque l'utilisateur le

survole avec la souris

La pseudo-classe :hover peut également être utilisée avec les autres balises du HTML.

Pour utiliser une pseudo-classe avec un élément auquel vous avez attribué une classe, utilisez la syntaxe

suivante : balise.classe:pseudo-classe. Par exemple, pour attribuer un style à un lien visité auquel

vous avez attribué la classe normal : a.normal:visited { … }.

1. Les propriétés des styles. Le langage CSS propose six catégories de propriétés de style : polices,

couleurs et arrière-plans, texte, boîtes et mise en pages, listes et classement des balises. On donne une valeur à

une propriété en faisant suivre son nom par le caractère : puis un espace et, enfin, une ou plusieurs valeurs

séparées par des virgules. Lorsqu'une valeur de propriété contient des espaces, il convient de l'entourer de

guillemets doubles (") afin d'expliciter le fait qu'il s'agit d'une seule des valeurs de la propriété. Par exemple, pour

16

ESR 2011-2012

définir la police d'affichage d'un titre :

Les 5 principales catégories de valeurs de propriétés sont :

les mots-clés : sont des noms de valeurs prédéfinis par le langage CSS. Par exemple, la propriété font-

size, qui permet de spécifier la taille de la police d'un texte, peut prendre les valeurs xx-large (très très

grand), x-large (très grand), large (grand), medium (moyen), small (petit), x-small (très petit) ou xx-

small (très très petit).

les longueurs : déterminent la taille d'une propriété, à l'aide d'un nombre qui peut parfois être de valeur

décimale. Pour indiquer s'il faut ajouter ou retrancher de la valeur actuelle de la propriété, on ajouter le signe +

ou - avant la valeur (sans espace entre les deux). La valeur est directement suivie (sans espace) de l'abréviation en

deux lettres de l'unité de mesure. On distingue trois types d'unités de mesure :

- les unités de mesure relative : em, qui correspond à la largeur de la lettre m en base de casse, et x-height

(abrégée ex), qui corresond à la hauteur de la letter x en bas de casse.

- les unités de mesure en pixels : px, correspondant à la taille d'un pixel.

- et les unités de mesure absolue : in pour les pouces, cm pour les centimètres, mm pour les millimètres, pt pour

les points et pc pour les picas.

les pourcentages : % comportent un signe + ou – (ajouter ou retrancher) car ils décrivent une mesure

proportionnelle à un autre contenu.

les URL sont spécifiées selon la syntaxe suivante : url(chemin) (sans espace entre le mot-clé url et

la parenthèse ouvrante). La valeur du chemin est relative non pas au chemin du fichier HTML mais au chemin de

la feuille de style CSS.

les couleurs : indiquent la couleur d'une propriété. Elles peuvent prendre pour valeur un mot-clé (blue,

yellow, orange, …), une valeur hexadécimale de la forme RGB (red, green, blue) ou une valeur décimale

RGB. Par exemple, le blanc est white (mot-clé), #000000; en hexadécimal et rgb(255, 255, 255) ou

rgb(100%, 100%, 100%) en décimal. Les valeurs rgb sont un nombre compris entre 0 et 255 ou un

pourcentage.

Sur le Web, les tailles de caractères peuvent changer d'un ordinateur à l'autre et d'un navigateur à l'autre. Par

conséquent, si vous souhaitez que l'aspect global que vous avez défini pour votre page soit respecté sur la plupart

des navigateurs, vous utiliserez des tailles de caractères relatives : les em et les % ou, encore mieux, les

descriptions prédéfinies citées précédemment ( xx-large à xx-small). Avec ces dernières, le navigateur ne

laissera pas la police d'écriture devenir illisible. Imaginez par exemple que vous choisissiez une taille de

caractères relative (à celle par défaut de votre ordinateur), petite mais lisible sur votre PC. Si l'ordinateur d'un

utilisateur a une taille de police par défaut plus petite que la vôtre, votre texte risque de devenir beaucoup trop

petit.

1. Applications.

Nous allons, à présent, définir les règles d'affichage de la page HTML dans le fichier mes-styles.css.

Attribuez à la page entière (<body>)

- une marge intérieure de 50px

- une couleur d'arrière-plan (background-color) de valeur #e8eae8;

- et une police de couleur (color) #5d665b;

Affichez la page mise-en-forme.html dans votre navigateur pour observer le résultat.

Définissez la police des textes (font-family) en Verdana, Geneva, Arial, sans-serif.

17

ESR 2011-2012

Ainsi, si la police Verdana n'est pas présente sur votre ordinateur, le navigateur utilisera Geneva, mais si cette

dernière n'est pas, elle non plus, présente sur votre ordinateur, il utilisera Arial. Si aucune des trois polices n'est

présente, il utilisera la police sans-serif qu'il connaît.

Actualisez l'affichage de votre page pour observer le résultat.

Fixez la taille de la police de caractères (font-size) à small et la hauteur des lignes (line-

height), c'est-à-dire la hauteur des caractères et de l'espace supplémentaire au-dessu, à 180% de la taille de la

police de caractères.

Observez le résultat.

Attribuez au premier <h2> une taille de police de 75% et au premier <p> une taille de police de 70%,

relativement à la taille de police spécifiée précédemment. Puis, attribuez au second <p> une indentation (text-

indent) de 3em.

Attribuez au texte du titre <h1> la couleur #ffffdd;. Puis attribuez au texte des titres <h2> la couleur

de police #966b72; et la famille de polices Georgia, "Times New Roman", Times, serif.


Afin d'aérer votre page, insérez un <p> vide entre chaque titre <h2> et le paragraphe qui le suite.


Insérez ensuite dans ces <p> vides un espace (au clavier) et observez le résultat.

Insérez maintenant dans ces <p> vides un espace insécable et observez le résultat.

Explication. Un paragraphe vide n'apparaît pas à l'écran, il doit obligatoirement avoir un contenu. Un espace ne

fonctionne que s'il se trouve entre deux caractères.

Astuce. On utilise l'espace insécable entre deux mots que l'on ne souhaite pas voir séparés lorsque la ligne se

termine (des noms propres, par exemple).

Encore quelques améliorations. Attribuez au <body> une marge supérieure (margin-top) et inférieure

(margin-bottom) de 70px, une marge gauche (margin-left) de 120px et une marge droite (margin-

right) de 50px.

Amusez-vous avec les valeurs des styles de la page que vous venez de créer en modifiant les familles et

tailles de polices, les marges, les interlignages, etc. Visionnez à chaque fois votre page dans différents navigateurs

pour observer les différences de rendu. Notez les différences observées pour chacune des balises que contient

votre page.

Exercice 8. Les cadres

1. Une page HTML peut être elle-même divisée en plusieurs pages HTML qu'on appelle cadres. Le contenu

de chaque cadre est une page (un fichier) HTML distincte. Les balises permettant de créer des cadres sont

<frameset> et <frame>. En voici un exemple et le résultat de l'affichage du fichier :

18

ESR 2011-2012

2. Explications.

La balise <frameset>

La balise <frameset> remplace la balise <body>. Elle définit un jeu de cadres et peut contenir des

cadres ou des jeux de cadres.

Les attributs attributs border, bordercolor et frameborder contrôlent les bordures des cadres ;

l'attribut framespacing contôle leur espacement.

l'attribut rows définit le nombre et la taille des différents cadres <frame> ou jeux de cadres

<frameset> que contient un <frameset>. Dans l'exemple précédent, le <frameset> principal contient un

cadre dont la hauteur occupera 25% de la hauteur de la fenêtre et un jeu de cadres dont la hauteur occupera tout le

reste (*) de la hauteur.

l'attribut cols définit le nombre et la taille des cadres et jeux de cadres que contient un <frameset>.

Ainsi, dans l'exemple précédent, le <frameset> de second niveau contient deux cadres dont l'un occupera 25%

de la largeur du jeu de cadres et l'autre occupera tout le reste de la largeur.

Les valeurs de rows et cols peuvent être des pourcentages ou des px. Au moins l'un des attributs rows

et cols doit être spécifié pour chaque <frameset>.

La balise <frame>

19

ESR 2011-2012

La balise <frame> ne peut être utilisée que dans le contexte d'un <frameset>. On l'utilise pour

indiquer l'URL du document qui va s'afficher dans chaque cadre à l'aide de l'attribut src.

L'attribut name de la balise <frame> permet de nommer un cadre de manière à l'utiliser comme cible

d'un lien hypertexte <a>. Il suffit pour cela d'ajouter l'attribut target dans la balise <a> du lien source. Voici, par

exemple, une ancre définie dans cadre2.html et qui permet d'afficher un document dans le cadre 3 :

Si l'internaute clique sur le lien, le document nouveau.html remplacera le contenu original du cadre 3.

Afin d'empêcher le redimensionnement des différents cadres par l'utilisateur, on utilise l'attribut

noresize.

Par défaut, chaque cadre est doté de barres de défilement dès que leur contenu dépasse l'espace de la

fenêtre. Afin de les supprimer, on utilise l'attribut scrolling avec pour valeur no.

Les attributs marginheight et marginwidth permettent par ailleurs d'insérer une marge entre les

bordures d'un cadre et son contenu. Une marge ne peut être inférieure à 1px et ne peut avoir pour valeur une taille

qui prend toute la place du contenu du cadre. Si les marges souhaitées ne conviennent pas au navigateur, ce

dernier affiche le cadre du mieux possible, en utilisant ses styles par défaut.

L'attribut frameborder permet de définir l'aspect de la bordure de chaque cadre. Ses valeurs possibles

sont yes ou 1 pour encadrer le cadre et no ou 0 pour supprimer la bordure.

Enfin, l'attribut bordercolor permet de modifier la couleur des bordures.

1. Applications.

Réalisez le <frameset> illustré par la copie d'écran ci-dessous.

La zone 1 s'appelle (name) cadre1, la zone 2 est cadre2 et la zone 3 est cadre3.

La zone du bas occupe 60px de la hauteur de la page et la zone du haut occupe tout le reste. Sa hauteur ne

doit pas être modifiable et son cadre ne doit pas être doté de barres de défilement.

La zone 1 ne doit pas avoir de barres de défilement, la zone 2 peut en avoir.

Les différents cadres doivent être séparés par un espace de 5px.

Aucune des 3 zones ne doit avoir de bordures.

Spécifiez les couleurs de fond des trois zones.

Enfin, définissez deux liens dans la zone 1 qui permettront d'afficher des fichiers dans la zone 2.

20

ESR 2011-2012

Exercice 9. Les formulaires

1. Un formulaire est composé de champs de saisie, de boutons cliquables, de cases à cocher qui proposent

des choix multiples, de menus déroulants et d'images cliquables. Une page HTML peut contenir un ou plusieurs

formulaires. Vous trouverez un exemple complet de formulaire mis en forme par les styles CSS à la section 11

(Mise en forme d'un formulaire) de cet exercice.

2. La balise <form>

Tous les éléments d'un formulaire doivent être placés entre les balises <form> et <form>.

L'attribut action de cette balise permet de spécifier :

- soit une adresse électronique à laquelle sera envoyé le contenu du formulaire : action="mailto:rakho@univ-

mlv.fr".

- soit l'adresse d'un script qui traitera les données du formulaire avant de les envoyer action="http://www.une-

adresse.com/cgi-bin/script".

L'attribut method peut prendre les valeurs suivantes :

- POST si vous souhaitez vous faire envoyer le contenu du formulaire par adresse électronique

(action="mailto:"). Dans ce cas, les applications qui sont censées traiter les données du formulaire n'y

accèderont que lorsqu'elles commenceront à les exécuter.

- GET si vous souhaitez sauvegarder les données du formulaire sur le serveur WWW grâce au protocole HTTP.

Les applications censées traiter les données devront y accéder sur le serveur.

ATTENTION : Si la sécurité est un problème, vous choisirez dont la méthode POST. En effet, avec GET, les

données pourront facilement être interceptées au passage ou extraites du fichier de traces du serveur.

L'attribut enctype permet de spécifier le format d'encodage des données envoyées lors de la soumission

du formulaire. Les formats suivants seront utilisés :

- text/plain si vous avez opté pour action="mailto:"

Dans cet encodage, chaque élément du formulaire est placé sur une ligne distincte, le nom du champ et sa valeur

étant séparés par le signe égal (=). Par exemple :

nom=Mathieu

prénom=Georges

- multiplart/form-data si votre formulaire contient des fichiers à envoyer (<input type="file">)

ATTENTION : À l'exception des boutons de sélection/réinitialisation, tous les éléments de formulaire décrits

dans la suite possèdent un attribut name qui est obligatoire car le navigateur s'en sert pour transmettre les choix

effectués pour chaque élément.

1. La balise <input>

La balise <input> permet d'insérer dans un formulaire divers types de champs de saisie, des listes à choix

multiples, des images cliquables et des boutons de soumission. De préférence, la valeur de cet attribut ne doit

mailto:[email protected]








21

ESR 2011-2012

contenir ni des lettres accentuées, ni des espaces, ni des ponctuations, et la première lettre ne doit pas être un

chiffre.

Pour sélectionner le type de contrôle à inclure, on utilise l'attribut type de <input>.

Pour insérer des champs de saisie

<input type="text" size="60" maxlength="80" value="entrez votre adresse ici"

name="adresse">

Un champ de texte s'affiche dans le navigateur comme une boîte vide qui n'accepte qu'une ligne de saisie. Les

attributs size et maxlength permettent de spécifier, respectivement, la longueur du champ et le nombre de

caractères que l'utilisateur est autorisé à y entrer. Le champ de saisie est vide tant que l'internaute ne l'a pas rempli

mais on peut y faire figurer une valeur par défaut (par exemple, une indication à l'attention de l'internaute

concernant le remplissage de ce champ). On utilise pour cela l'attribut value. L'attribut name, enfin, est

obligatoire.

<input type="password" name="mot_de_passe">,

Le type password est l'équivalent d'un champ de saisie texte normal sauf que les caractères entrés par

l'utilisateur sont masqués. Le type password possède les mêmes attributs size, maxlength et value que le

type text. L'attribut name est obligatoire.

<input type="file" name="fichier">

Le type file permet à l'internaute de sélectionner un fichier stocké sur sa machine. Le navigateur affiche

automatiquement un bouton Parcourir sur la droite du champ de saisie. Le type file possède les mêmes

attributs size, maxlength et value que le type text. L'attribut name est obligatoire.

Pour insérer des cases à cocher

<input type="checkbox" name="animal" checked="checked" value="choix1">

Le type checkbox sert à insérer une ou plusieurs cases à cocher. L'attribut checked est optionnel, il permet de

cocher une case par défaut qui peut être décochée par l'utilisateur si elle ne correspond pas à son choix. L'attribut

value ne s'affiche pas dans le navigateur, il contient la valeur soumise au serveur si l'internaute a coché la case.

<input type="radio" name="prefere" value="valeur">

Le type radio est similaire au type checkbox, sauf qu'on ne peut sélectionner qu'une seule case par groupe.

Tous les boutons radio qui possèdent le même attribut name appartiennent au même groupe.

Pour insérer des boutons d'action

<input type="submit" name="validation" value="Valider">

Le type submit permet d'envoyer au serveur les paramètres du formulaire (les valeurs des champs de saisie, les

valeurs des attributs value des listes de choix, etc.). L'attribut value permet de spécifier la valeur affichée du

bouton (par défaut, c'est Submit qui est affiché). L'attribut name n'est pas obligatoire, mais il permet de

différencier les différents boutons de soumission.

<input type="reset" value="Annuler">

Le type reset permet de réinitialiser tous les éléments d'un formulaire (suppression des valeurs et/ou remise des

valeurs par défaut). L'attribut value permet de spécifier le texte affiché de ce bouton (par défaut, c'est Reset

qui est affiché).

<input type="image" src="images/plan.gif">

Le type image permet de créer un bouton avec une image. Lorsque cette image est cliquée, le navigateur soumet

le formulaire. Ce type de bouton exige un attribut src dont la valeur est l'adresse du fichier image à utiliser.

L'attribut alt, facultatif, permet de spécifier un texte alternatif pour les navigateurs en mode texte ou en mode

vocal.

22

ESR 2011-2012

1. La balise <button>

Pour les trois types suivants, l'intitulé du bouton est défini par le contenu de la balise (par exemple, Pressez-moi !).

On peut y mettre un texte, comme dans l'exemple, ou une image, à l'aide de la balise : <button

type="submit"> <img src="" alt=""> </button>.

<button type="submit">Pressez-moi</button>

Pour créer un bouton qui, lorsqu'il est cliqué, indique au navigateur d'envoyer le contenu du formulaire au serveur

de traitement ou à une adresse électronique (option mailto dans <form>).

<button type="reset">Pressez-moi</button>

Pour créer un bouton de réinitialisation du formulaire.

<button type="button">Pressez-moi</button>

Pour créer un bouton classique.

1. La balise <textarea>

<textarea name="commentaires" cols="40" rows="40">

Mettez vos commentaires ici

</textarea>

Cette balise permet d'insérer dans un formulaire une zone de saisie de texte sur plusieurs lignes. L'internaute peut

y taper un nombre quasi illimité de caractères. L'attribut name est obligatoire. Vous pouvez insérer des

instructions de remplissage dans la zone de saisie (par exemple, Mettez vos commentaires ici). L'internaute le

supprimera au moment de remplir la zone de saisie. Les attributs rows et cols permettent de spécifier les

dimensions de la zone de saisie. Leur valeur est un nombre entier de caractères. Si le texte dépasse les dimensions,

le navigateur affiche des barres de défilement sur la zone de saisie.

2. Créer des menus déroulants : la balise <select>

Pour insérer un menu déroulant dans un formulaire, on utilise la balise <select>. L'attribut multiple

(multiple="multiple") de <select> permet d'autoriser l'internaute à choisir plus d'une option à la fois.

L'attribut size de <select> détermine le nombre d'options visibles. L'internaute peut faire défiler la liste pour

voir les autres options.

La balise <select> peut contenir autant de balises <option> que de choix proposés à l'utilisateur. Ces

différentes <option> peuvent être organisées en groupes avec la balise <optgroup> (par exemple, on peut

regrouper les départements de France par région). La balise <optgroup> ne peut être utilisée que dans une

balise <select> et ne peut contenir que des balises <option>.

3. La balise <option>

Le contenu de la balise <option> ne peut être que du texte. Son attribut value contient la valeur de chaque

option choisie par l'internaute que le navigateur envoie au serveur. Si l'attribut value n'est pas spécifié, c'est le

contenu de la balise qui est envoyé. Par conséquent, les deux exemples suivants sont équivalents :

<option>Chien</option> et <option value="Chien">Chien</option>.

Pour pré-sélectionner une ou plusieurs <option> par défaut, on y définit l'attribut selected="selected".

L'internaute pourra ensuite les désélectionner si elles ne correspondent pas à son choix.

23

ESR 2011-2012

4. La balise <optgroup>

Pour attribuer un titre à chaque groupe, on utilise l'attribut label de <optgroup> (dans l'exemple des

départements de France, les titres des groupes seraient les noms des régions). De préférence, pour que le menu

s'affiche correctement dans tous les navigateurs, les titres des sous-menus doivent être courts. La balise

<optgroup> ne peut être imbriquée, ce qui fixe à un niveau de profondeur la limite des sous-menus.

5. Intituler les éléments d'un formulaire : la balise <label>

Pour associer une étiquette à un élément de formulaire, on utilise la balise <label>. L'association entre le

l'élément de formulaire et son étiquette se fait de la manière suivante :

<label>Nom : <input type="text" name="nom" /></label>.

Une balise <label> ne peut être associée qu'un et un seul élément de formulaire ; mais plusieurs balises

<label> peuvent être associées à un même élément.

6. Regrouper des éléments de formulaire : les balises <fieldset> et <legend>

On peut organiser les éléments d'un formulaire en groupes et attribuer un intitulé à chaque groupe. Pour créer un

groupe, on insère tous les éléments concernés dans une balise <fieldset>. Puis, on insère dans ce

<fieldset> un élément <legend> dont le contenu est l'intitulé du groupe. Le navigateur peut, parfois,

afficher les groupes d'une manière particulière, comme les encadrer d'une bordure. La balise <legend> ne peut

être utilisée que dans une balise <fieldset>. L'attribut align de <legend> permet d'indiquer au navigateur

l'emplacement de la légende par rapport au groupe de champs. Ses valeurs possibles sont top, bottom, left et

right.

7. Mise en page d'un formulaire

Avec un tableau. La mise en page d'un formulaire peut être effectuée à l'aide d'un tableau, avec une

colonne pour les intitulés des éléments et une colonne pour les éléments eux-mêmes. En voici un exemple, et le

code HTML correspondant.

Le code HTML correspondant :

24

ESR 2011-2012

Par les styles CSS. La mise en page d'un formulaire peut aussi être effectuée directement grâce aux styles

CSS. Voici un exemple complet de menu.

25

ESR 2011-2012

Le code HTML correspondant :

26

ESR 2011-2012

Le code CSS correspondant :

27

ESR 2011-2012

1. Application

Créez, à l'aide des styles CSS ou avec un tableau, le formulaire dont la copie d'écran est la suivante :

28

ESR 2011-2012

10. Les images

1. Pour insérer une image dans une page Web, on utilise la balise <img src="nom">, où nom est le

chemin complet du fichier correspondant à l'image.

2. Les attributs de la balise <img> sont les suivants :

align, pour l'alignement vertical et horizontal. Ses valeurs possibles sont top, bottom, left, right

et center.

alt, pour spécifier un texte alternatif, au cas où l'image n'était pas accessible ou si le navigateur ne peut

l'afficher.

title, pour afficher une info-bulle décrivant l'image lorsque l'utilisateur la survole avecla souris

1. Les propriétés CSS associée à la balise <img> sont :

width, pour spécifier la hauteur de l'image en pixels

height, pour spécifier la largeur de l'image en pixels

border, pour spécifier les caractéristiques de la bordure (largeur et style de trait, couleur)

margin, pour spécifier l'espace vertical et horizontal séparant l'image des éléments qui l'entourent.

1. Pour utiliser une image comme lien hypermédia (pour qu'elle soit « cliquable »), on insére la balise

<img> dans une balise <a>. En voici un exemple :

11. Comment donner vie aux images

1. Comment zoomer une image lorsqu'elle est pointée par la souris.

Une version miniature de l'image est insérée dans la page HTML à l'aide de la balise <img>. Les

propriétés CSS width (taille en hauteur) et height (taille en largeur) de l'image sont fixées à 50% de la taille

d'origine de l'image (250px). La taille de l'image doit donc être connue à l'avance.

Puis, cette balise <img> est insérée dans une balise <a>. Cela nous permet d'agir sur son mode

d'affichage, par exemple, avec des pseudo-classes (:hover, :active, …).

Enfin, le pseudo-style a:hover img est défini dans la partie CSS afin d'ajuster (agrandir) les propriétés

29

ESR 2011-2012

width et height de l'image.

1. Une image pop-up

On peut aussi vouloir afficher une version plus grande d'une image sans pour autant masquer la version réduite.

L'exemple suivant montre comment réaliser cet effet :

Deux éléments <img> sont insérés dans un même lien hypermédia <a>. La première (identificateur

id="petit") est une version réduite de la seconde (identificateur id=vgrand").

Le style img#grand définit le style par défaut de l'image agrandie : sa position, sa taille et sa visibilité.

Par défaut, l'image est cachée (visibility: hidden;). Elle n'apparaît que lorsque l'utilisateur survole la

petite image avec sa souris.

Le style a:hover img#grand définit le style de l'image d'identificateur grand lorsque la souris

survole l'image réduite : la grande image devient visible (visibility:visible;). Ce style provoque

l'affichage de la grande image en avant-plan du document.

Quand le contenu de la balise <a> est survolé par l'utilisateur avec la souris, son élément enfant <img> dont

l'identificateur id est grand est devient visible.

30

ESR 2011-2012

1. Les images réactives

Les images réactives comportent une ou plusieurs zones cliquables. Lorsque l'utilisateur clique sur l'une d'entre

elles, un traitement particulier est effectué ou une page web annexe est ouverte. L'exemple suivant montre

comment réaliser des zones réactives :

Le sélecteur d'identificateur imagemap définit les caractéristiques du <div> : les dimensions grâce aux

balises width et height, et l'arrière plan avec background.

Le sélecteur de classe .map définit les caractéristiques des zones cliquables: affichage flottant (float:

left;), taille (width et height), marges (margin-top et margin-left) et bordure (border).

31

ESR 2011-2012

Exercice 1. La structure minimale d'une page HTML

Documents

Transcript of Exercice 1. La structure minimale d'une page HTML