Notes HTML

HTML

Notes HTML - Copyright Circum Net, 2001 - Tous droits réservés

 page 2

Table des matières

1 Introduction

1.1 Environnement client/serveur 6

1.2 Protocole HTTP et adresse URL 7
1.3 Langage HTML 9
1.4 Structure d'un document HTML 10
1.5 Méthode de travail pour créer un document HTML 11
1.6 Fichiers HTML et serveur HTTP 12
1.7 Langage HTML et outil d'édition 13

2 Balises HTML

2.1 Balises de structure d'un document HTML 16

2.2 Propriétés de la page 18
2.3 Couleurs 19
2.4 Niveaux de titre 21
2.5 Séparateurs et blocs de texte
2.5.1 Paragraphe 23
2.5.2 Fin de ligne 24
2.5.3 Retrait de texte 25
2.5.4 Commentaires 26
2.5.5 Trait horizontal 27
2.5.6 Bloc de contenu 28
2.6 Formats de présentation
2.6.1 Police de caractères 29
2.6.2 Caractère gras 30
2.6.3 Caractère italique 31
2.6.4 Caractère souligné 32
2.6.5 Centrage 33
2.7 Liens hypertextes
2.7.1 Liens externes 34
2.7.2 Liens internes 36
2.8 Images
2.8.1 Images gif - jpg 37
2.8.2 Images cliquables 39
2.8.3 Images animées 41
2.9 Listes
2.9.1 Listes non ordonnées 42
2.9.2 Listes ordonnées 43
2.9.3 Listes de définitions 44
2.9.4 Listes imbriquées 45
2.10 Tableaux
2.10.1 Structure générale 46
2.10.2 Structure des lignes 48
2.10.3 Structure des cellules 49
2.10.4 Tableaux imbriqués 51
2.11 Formulaires
2.11.1 Déclaration d'un formulaire 52
2.11.2 Zones de saisie de texte 53
2.11.3 Cases à cocher 55
2.11.4 Listes de choix 57
2.11.5 Activation d'un formulaire 59
2.12 Cadres
2.12.1 Définition des cadres 60
2.12.2 Division en cadres 61
2.12.3 Habillage des cadres 62
2.12.4 Liaison entre cadres 63

Notes HTML - Copyright Circum Net, 2001 - Tous droits réservés

 page 3

2.13 Indexation 65

html en quelques questions :

Introduction
Qu'est-ce que HTML ? 9
Comment créer un premier document HTML ? 11
Comment rendre ses pages accessibles sur le Web ? 12
Les éditeurs Web sont-ils indispensables ? 13

Balises HTML
Quels sont les codes de base d'un document web ? 16
Comment fixer l ? 18
Comment fixer l'aspect général d'un document Web ? 19
Comment préciser différents niveaux de titre ? 21

Séparateurs et blocs de texte

Comment représenter un paragraphe de texte ? 23
Comment coder un passage à la ligne ? 24
Comment indenter un bloc de texte ? 25
Comment insérer des commentaires ? 26
Comment débugger le code source ? 26
Comment dessiner un trait horizontal ? 27
Comment délimiter un bloc de contenu ? 28

Formats de présentation
Comment préciser une police de caractères ? 29
Comment mettre du texte en gras ? 30
Comment mettre du texte en italique ? 31
Comment souligner du texte ? 32
Comment centrer un élément ? 33

Liens hypertextes
Comment insérer un lien hypertexte ? 34
Quel système d'adressage utiliser ? 34
Comment faire un lien vers une partie d'un document ? 36

Images
Comment afficher une image ? 37
Quel format d'image utiliser ? 37
A quoi sert une image cliquable ? 39
Comment réaliser une image animée ? 41

Tableaux
A quoi servent les tableaux en HTML ? 46
Comment organiser un tableau ? 46

Formulaires
Comment récupérer de l'information fournie par un utilisateur ? 52

Notes HTML - Copyright Circum Net, 2001 - Tous droits réservés

 page 4

Cadres
Pourquoi utiliser des cadres/frames ? 60
Que faire afin de diviser un navigateur en cadres ? 61

Notes HTML - Copyright Circum Net, 2001 - Tous droits réservés

 page 5

Introduction

Copyright Circum Net, 2001

 page 6

Environnement client/serveur

Le World Wide Web (WWW ou Web) est un système permettant l'accès aux ressources d'Internet à
partir d'une navigation hypertexte et multimédia. Les documents publiés sur le Web peuvent
regrouper du texte, des images, du son, de la vidéo ou des liens renvoyant à d'autres documents - ils
sont conçus, ainsi que nous le verrons plus loin, à l'aide du langage HTML (Hypertext Markup
Language).

Le cadre d'exécution du Web est celui du modèle client/serveur. Cette architecture fait intervenir deux
programmes qui dialoguent entre eux au travers du réseau :
- Le client est un logiciel de consultation qui tourne sur tous les types de plate-forme (PC, Macintosh,
station Unix). Son rôle est d'entrer en communication avec un serveur, d'établir le dialogue et de lui
envoyer des demandes d'information (requêtes). Exemples de clients Web: Netscape Navigator, Internet
Explorer, Opera...
- En réponse, le serveur - constamment à l'écoute des requêtes que formulent les clients - lui fournit les
données correspondantes (en ce qui concerne le Web elles sont le plus souvent structurées en code
HTML). Exemples de serveurs Web: Apache, IIS, WebStar, Netscape Enterprise Server...

World Wide Web - client/serveur

Le client envoie une requête vers le serveur en utilisant son adresse IP. Le serveur réceptionne
la requête et envoie une réponse en utilisant l'adresse du poste client.
 page 7

Protocole HTTP et adresse URL

L'échange des données entre les serveurs et les clients Web est rendu possible grâce au
protocole de communication HTTP (Hypertext Transfert Protocol). Celui-ci assure en effet le transfert
de fichiers (format html, gif, jpg ...) entre un navigateur Web et un serveur Web.

L'adresse URL (Universal Resource Locator) est utilisée par le client pour demander un document Web (en
d'autres termes il l'utilise pour localiser un fichier sur un serveur Web). Cette URL est une référence unique
qui contient toutes les informations permettant de localiser le document sur un serveur. Ce type d'adresse se
présente sous la forme d'une chaîne de caractères qui est généralement composée de trois parties :
- le type de ressource sur Internet
- l'adresse du serveur à contacter
- le chemin de l'élément désiré sur le serveur (répertoire et nom de fichier)

Profil d'une adresse URL

La référence [Link] indique un document appelé "[Link]"

résidant dans le répertoire "docs" sur le serveur Web de l'ULB dont le nom sur Internet est
"[Link]".

Transaction HTTP
 page 8

Le client formule la requête HTTP - elle transite via l'internet jusqu'au serveur concerné - le
serveur réceptionne la requête - il localise la ressource internet demandée - il envoie au client
une réponse HTTP - le client affiche le résultat de la requête.
 page 9

Langage HTML

Contrairement à ce que son apparence sophistiquée pourrait laisser supposer, le Web est un
système assez simple. Il est constitué de pages de texte au format ASCII et d'illustrations (images,
sons, films...) reliées entre elles par des liens hypertextes. Pour mettre en forme tout cela on utilise
un langage nommé HTML (HyperText Markup Language).

HTML est un langage normalisé permettant de décrire la structure et la présentation des documents dans le
Web. Les pages HTML sont des documents de type texte (auxquels des codes html ont été ajoutés) qui
peuvent être réalisés grâce à un éditeur de texte (Simple Text, NotePad, WordPad), ou avec un éditeur
HTML comme Golive Cyberstudio, Dreamweaver, HotMetal, HTMLpad, Netscape Composer, Pagemill...

Le principe est élémentaire: on entoure la partie de texte à formater de balises (tags ou encore étiquettes)
qui seront interprétées par le navigateur (Netscape, Internet Explorer, Opera...) afin de les afficher à l'écran
(police de caractères, paragraphe, tableau, lien ...). Chaque balise s'inscrit entre les caractères < (inférieur à)
et > (supérieur à) et peut ainsi être traitée comme une commande par le navigateur. A quelques exceptions
près, les tags fonctionnent par paire, un tag d'ouverture <nom du tag> et un tag de fermeture </nom du tag>.

Syntaxe : <nom du tag>...</nom du tag>

Pour mettre par exemple "Formation Internet" en gras, on écrira <b>Formation Internet</b> - le navigateur
saura ainsi comment le mettre en page.

Page HTML - document Web

Au sens HTML, une " page " est un document qui sera chargé en un seul bloc par le client Web
puis affiché pour lecture. Lorsque l'on clique pour suivre un lien, on obtient (dans la majorité des
cas) une autre page. Chaque page peut être aussi longue qu'on le désire; si une page ne peut
être affichée entièrement sur l'écran par un client, une barre de défilement apparaîtra
automatiquement pour permettre au lecteur de se déplacer dans la page.
 page 10

Structure d'un document HTML

Un document HTML commence par le code d'ouverture <html> et se termine par le code de
fermeture </html>. Ces deux balises indiquent au navigateur que ce qui se trouve dans la zone qui
les sépare relève du langage HTML.

En plus de ces deux balises, un document HTML comporte idéalement trois autres parties :
- un en-tête délimité par les balises <head> et </head> - les éléments qui le composent concernent la
gestion du document et sont sans influence sur sa présentation, ils n'apparaissent pas à l'écran (ex: titre,
adresse électronique de l'auteur, déclaration des mots-clés, date de dernière modification...)
- un titre générique défini entre les balises <title> et </title> - ce titre apparaît dans la barre de titre de la
fenêtre du navigateur Web et est utilisé par les outils de recherche (Excite, Infoseek, Altavista, Yahoo,
Hotbot ...)
- un corps de page encadré par les balises <body> et </body> - cette partie décrit le document lui-même,
elle contient ce qui apparaîtra dans la zone d'affichage du navigateur Web.

Structure principale d'une page HTML

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body>
6 - ... Contenu destiné à être affiché dans le navigateur ...
7 - </body>
8 - </html>

Tout document HTML devrait présenter cette [Link] navigateurs Web tolèrent des
erreurs de structure (même de plus haut niveau), ce n'est cependant pas une raison suffisante
pour faire l'impasse sur cette règle de base.
 page 11

Méthode de travail pour créer un document HTML

La marche à suivre pour construire un fichier au format HTML est relativement simple et ne
connaît pas de variations majeures quel que soit l'outil d'édition que l'on utilise; ci-dessous en sont
présentées les étapes principales.

Point de départ de l'encodage HTML:

- ouvrir l'éditeur de texte

- écrire le document HTML avec les balises HTML
- enregistrer le document avec l'extension .html
- ouvrir le navigateur web
- afficher le document via le menu open (ouvrir) du navigateur

Pour d'éventuelles modifications:

- retourner dans l'éditeur de texte (sans fermer le navigateur)

- modifier les codes HTML
- enregistrer le fichier
- utiliser la commande reload (ou recharger/actualiser) du navigateur
 page 12

Fichiers HTML et serveur HTTP

Etre accessible sur le World Wide Web

Pour être accessible sur le World Wide Web, l'information doit être placée sur un serveur Web,
c'est à dire que les pages HTML doivent être placées sur le disque dur d'un ordinateur sur lequel
tourne un serveur de requêtes HTTP. Cet ordinateur serveur doit être connecté à Internet en
permanence afin que les utilisateurs puissent y accéder quand ils le désirent.

Si vous - ou l'organisation à laquelle vous appartenez - disposez d'une connexion Full-IP à Internet (liaison
câble télé, ADSL, ligne spécialisée), vous pouvez envisager de mettre en place un tel serveur sur l'un de vos
ordinateurs.

Par contre, si vous n'avez qu'un accès Dialup-IP (accès à des fonctionnalités de base via modem) ou si vous
voulez effectuer des tests avant d'installer votre propre serveur, il vous est possible d'utiliser le serveur Web
de votre fournisseur d'accès (ISP - Internet Service Provider).

Déposer les fichiers HTML sur le serveur Web

Une fois que vous avez développé les documents HTML:

- si vous passez par un prestataire de service Internet externe, vous devez suivre ses instructions pour
envoyer le ou les fichiers ***.html vers son serveur; ceci se fait généralement via un logiciel de transfert
de fichiers FTP (File Transfer Protocol - protocole servant à transférer des fichiers sur Internet; il définit
les règles de transfert des fichiers entre deux machines).
- si la machine sur laquelle vous travaillez n'est autre que le serveur Web ou est directement reliée à
celui-ci, il suffit de placer vos pages dans un répertoire réservé à cet usage.

Logiciels associés au transfert de fichiers

Sous Windows : WS_FTP, CuteFTP, LeapFTP

Sous Macintosh : Fetch, Anarchie, Transmit
Sous Linux : gftp, Iglooftp

Ces logiciels sont en accès libre sur le réseau.

 page 13

Langage HTML et outil d'édition

Ainsi que nous l'avons vu précédemment, l'HyperText Markup Language (HTML) - ou langage de
balisage hypertexte - est le langage utilisé pour créer des documents sur le World Wide Web. Il est
basé sur le langage standard de balisage généralisé (SGML), qui est une norme internationale de
description du contenu logique des documents.

Le format des documents HTML est celui d'un texte ASCII créé avec n'importe quel éditeur de texte. Il existe
actuellement des éditeurs spécifiquement conçus pour l'encodage de fichiers HTML; ceux-ci ne sont
cependant pas indispensables pour créer ce type de documents - ils accélèrent et facilitent simplement le
processus d'application des balises (voir ci-dessous la liste des "éditeurs syntaxiques").

D'autre part, sont disponibles ce qu'on appelle les éditeurs WYSIWYG (What You See Is What You Get - "ce
que vous voyez est ce que vous obtenez"). Le principal intérêt de ces outils réside dans le fait qu'ils évitent
au concepteur d'une page Web d'intervenir directement au niveau des codes et des règles de structuration.
Ils sont également fort utiles dans la récupération de documents existants.

Il est à noter cependant que pour arriver à utiliser de façon réellement efficace et " professionnelle " ces
différents outils, la connaissance du langage HTML est indispensable. Celle-ci vous évite de tomber dans le
piège d'une trop grande dépendance par rapport à un outil d'édition et constitue le marchepied
incontournable pour l'apprentissage d'autres techniques servant l'édition Web comme le langage JavaScript,
les feuilles de style CSS, le langage PHP, le langage XML ..

Editeurs WYSIWYG
- Golive
- Dreamweaver
- Claris Home Page
- Adobe PageMill
- AOL Press
- Nestscape Composer
- Microsoft Front Page
- Microsoft Office Internet Assistants

Editeurs syntaxiques
- Dreamweaver
- Golive
- Hotmetal
- Hotdog
- Homesite
- PageSpinner (Mac)
- NoteTab
- Aranea
- UltraEdit
- BBEdit (Mac)
- WebEdit
- WebExpert

Téléchargement de logiciels
 page 14

- [Link]
- [Link]
- [Link]
- [Link]

Quelques adresses parmi de très nombreuses ...

 page 15

Balises HTML

Copyright Circum Net, 2001

 page 16

Balises de structure d'un document HTML

La structure de base de tout document HTML est composée des éléments suivants :

- <html>
- <head>
- <title>
- <body>

<html>...</html> - Début et fin d'un document HTML

Cette balise identifie un document comme étant un document au format HTML. Tous les documents HTML
doivent commencer par la balise d'ouverture </html> et se terminer par la balise de fermeture </html>.

<head>...</head> - Début et fin de la zone de description du document HTML

Cette zone contient de l'information à propos du document et non de l'information destinée à être affichée
dans le corps du document. La balise <head> peut contenir les balises suivantes: title, base, isindex, meta,
script, style, link.

<title>...</title> - Titre générique du document HTML

Ce titre apparaît dans la barre de titre de la fenêtre du navigateur Web et est utilisé par les outils de
recherche afin d'indexer les documents. Si aucun titre n'est précisé, le titre utilisé par défaut dépend des
navigateurs Web.

<body>...</body> - Début et fin du corps du document HTML

Tout ce qui est destiné à être affiché dans le navigateur Web doit être placé entre la balise d'ouverture
<body> et la balise de fermeture </body>.

Structure de base d'un document HTML

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body>
6 - <h1>Le tour du monde en 80 jours</h1>
7 - <hr>
8 - <p>
9 - ... Ce Phileas Fogg était-il riche ? Incontestablement.
10 - Mais comment il avait fait fortune, c'est ce que les
11 - mieux informés ne pouvaient dire, et Mr. Fogg était
12 - le dernier auquel il convînt de s'adresser pour
13 - l'apprendre ...
14 - </p>
15 - <i>par Jules Verne</i>
16 - </body>
17 - </html>

Les codes relevant du langage HTML se trouvent entre les signes '<' et '>'. A l'intérieur on
retrouve des balises de formatage de contenu (ex: <p> </p>, <i> </i>).
 page 17

Idéalement, tous les documents relevant du langage HTML devraient présenter ces élements de structure.
Cela ne veut cependant pas dire que, si une des balises décrites ci-dessus est manquante, les documents
HTML ne seront pas affichés par les navigateurs Web. En effet, les versions les plus récentes de ces
derniers s'arrangent très bien avec les problèmes liés à la structure HTML. Toutefois, pour plus de sécurité
et en vue de renforcer la portabilité des documents HTML, il est toujours préférable de baser ses documents
sur une structure correcte.
 page 18

Propriétés de la page

L'aspect général d'un document Web (couleur de fond, image de fond, couleur du texte et des
liens) est défini dans la balise d'ouverture du corps de page <body>.

Grâce aux attributs "bgcolor" (couleur de fond), "text" (couleur du texte), "link", "vlink", "alink" (couleur des
liens), il est en effet possible de préciser comment doivent être traités certains éléments à chaque fois qu'ils
apparaîtront dans le document Web.

Syntaxe : <body>...</body>

Attributs de la balise <body>

bgcolor="code couleur"
Couleur d'arrière-plan de la page

background="url de l'image"
Texture de la page

text="code couleur"
Couleur du texte de la page

link="code couleur"
Couleur des liens (non visités) dans la page

vlink="code couleur"
Couleur des liens (visités) dans la page

alink="code couleur"
Couleur des liens (actifs) dans la page

Propriétés de la page

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="green" text="white">
6 - <h1>Le tour du monde en 80 jours</h1>
7 - <hr>
8 - <p>
9 - ... Ce Phileas Fogg était-il riche ? Incontestablement.
10 - Mais comment il avait fait fortune, c'est ce que les
11 - mieux informés ne pouvaient dire, et Mr. Fogg était
12 - le dernier auquel il convînt de s'adresser pour
13 - l'apprendre ...
14 - </p>
15 - <i>par Jules Verne</i>
16 - </body>
17 - </html>

Les options "bgcolor" et "text" sont placées dans la balise d'ouverture <body>. A l'affichage cela
donnera un document web dont le fond d'écran est vert et le texte blanc.
Il ne faut pas répéter les options dans la balise de fermeture </body>.
 page 19

Couleurs

En HTML, deux façons de préciser une couleur coexistent. La première permet de préciser une
couleur de façon presque intuitive puisqu'il suffit de donner le nom (en anglais) d'une des seize
couleurs de base pour que celle-ci soit interprétée correctement par un navigateur Web.

Les couleurs et leurs mot-clés

aqua black blue fuschia gray green

lime maroon navy olive purple red

silver teal white yellow

La deuxième façon offre une plus grande marge de manoeuvre. Elle fait référence au système d'affichage
des couleurs RGB. Celui-ci est basé sur une synthèse additive des trois couleurs fondamentales, le rouge, le
vert et le bleu (RVB ou RGB en anglais). Toute combinaison de ces trois couleurs va permettre de
reproduire l'ensemble de la gamme. En HTML les composantes RVB de chaque couleur sont traduites en un
code hexadécimal (base 16 : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) sur six positions.

Le code hexadécimal doit toujours être précédé d'un signe dièse (#). Ce code se construit sur six positions
(rrggbb), deux pour chaque composante fondamentale (red green blue). La saturation des couleurs
correspond au blanc (#ffffff), l'absence de couleur correspond au noir (#000000), la suite des combinaisons
possibles se situe entre les deux ...

Les couleurs et leurs codes

#ffffff
Blanc

#ff0000
Rouge

#00ff00
Vert

#0000ff
Bleu

#ff00ff
Magenta

#00ffff
Cyan

#ffff00
Jaune

#000000
Noir

Il n'est pas nécessaire de connaître sur le bout des doigts ces codes. La plupart des outils graphiques et
éditeurs Web actuels (Photoshop, Illustrator, CorelDraw, Draweamweaver, Golive ...) proposent des
 page 20

utilitaires de conversion : vous choisissez une couleur dans une palette et le logiciel vous fournit le code
hexadécimal correspondant. Il existe sur le réseau de nombreux shareware et freeware qui offrent le même
genre de service (Aranea, NoteTab Light, UltraEdit ...).
 page 21

Niveaux de titre

La conception d'une page Web passe idéalement par une phase de formatage logique. Celle-ci
s'intéresse aux éléments conceptuels d'un texte et à la signification de ses parties (les entêtes de
section, les paragraphes, les énumérations, etc.).

En HTML, le traitement des entêtes est assuré par les balises h1, h2, ... h6 - la commande h1 correspondant
au plus grand niveau disponible et la commande h6 au plus petit. Leur présentation à l'écran est prise en
charge par le navigateur Web qui décide -en fonction de son système de référence- du style à leur appliquer
(tout en respectant bien évidemment les différences de niveau). Attention, le texte inséré entre ces balises
de titre sera placé sur une nouvelle ligne.

Syntaxe : <h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Attribut des niveaux de titre

align="left|center|right"
Alignement horizontal du texte sur la gauche, le centre ou la droite de la page

Utilisation des niveaux de titre

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="green" text="white">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <h2 align="left">Phileas Fogg</h2>
8 - <p>
9 - ... Ce Phileas Fogg était-il riche ? Incontestablement.
10 - Mais comment il avait fait fortune,
11 - c'est ce que les mieux informés ne pouvaient dire,
12 - et Mr. Fogg était le dernier auquel il convînt
13 - de s'adresser pour l'apprendre ...
14 - </p>
15 - <h2 align="left">Passepartout</h2>
16 - <p>
17 - ... Jean Passepartout, un surnom qui m'est resté, et que
18 - justifiait mon aptitude naturelle à me tirer d'affaire ...
19 - </p>
20 - <i>par Jules Verne</i>
21 - </body>
22 - </html>

Le titre de niveau 1 (<h1></h1>) est le titre de plus grande importance (il est aligné sur le centre
de la page).
Les deux titres de niveau 2 qui suivent (<h2></h2>) sont de seconde importance (ils sont eux
alignés sur la gauche de la page). Ils sont tous les deux suivis d'un paragraphe.

Comme nous le verrons dans la suite du cours, Cette approche peut être affinée en utilisant la technique des
feuilles de style (CSS). Celle-ci permet de regrouper des règles de présentation sophistiquées destinées à
 page 22

être appliquées aux différents éléments de structuration de la page.

 page 23

Séparateurs et blocs de texte

Paragraphe

Un paragraphe est délimité en HTML par les balises <p></p>. Son contenu est réparti au mieux
par les navigateurs Web en fonction de l'espace disponible dans leur fenêtre.

L'insertion d'un paragraphe dans une page web implique un passage à une nouvelle ligne. A l'intérieur d'un
paragraphe, les espaces, tabulations et retours chariot ne comptent que pour un seul espace.

Syntaxe : <p>...</p>

Attribut des paragraphes

align="left|center|right|justify"
Alignement horizontal du texte sur la gauche, le centre ou la droite de la page

Utilisation des paragraphes

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <h2 align="left">Phileas Fogg</h2>
8 - <p align="center">
9 - ... Ce Phileas Fogg était-il riche ? Incontestablement.
10 - Mais comment il avait fait fortune,
11 - c'est ce que les mieux informés ne pouvaient dire,
12 - et Mr. Fogg était le dernier auquel il convînt
13 - de s'adresser pour l'apprendre ...
14 - </p>
15 - <h2 align="left">Passepartout</h2>
16 - <p align="justify">
17 - ... Jean Passepartout, un surnom qui m'est resté, et que
18 - justifiait mon aptitude naturelle à me tirer d'affaire ...
19 - </p>
20 - <i>par Jules Verne</i>
21 - </body>
22 - </html>

Le premier paragraphe est centré sur la page - le deuxième est justifié à gauche et à droite.
 page 24

Séparateurs et blocs de texte

Fin de ligne

Le retour chariot (passage à la ligne simple) est traduit en HTML par la balise <br>. Celle-ci est
une balise "unique", c'est-à-dire qu'elle ne possède pas de balise de fermeture.

En XHTML (reformulation du langage HTML 4.0 en utilisant la norme XML) les balises n'ayant pas de
contenu doivent se terminer par /. En ce qui concerne le retour chariot on devra donc écrire <br/>.

Syntaxe : <br> ou <br/>

Utilisation du retour chariot

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - Le tour du monde en 80 jours<br/>
7 - Phileas Fogg et Jean Passepartout<br/>
8 - <br/>
9 - <br/>
10 - <p align="center">
11 - ... Ce Phileas Fogg était-il riche ? <br/>
12 - Mais comment il avait fait fortune,
13 - c'est ce que les mieux informés ne pouvaient dire,
14 - et Mr. Fogg était le dernier auquel il convînt
15 - de s'adresser pour l'apprendre ...
16 - </p>
17 - </body>
18 - </html>

Vu qu'à l'intérieur des balises <p></p> les retours chariot ne comptent que pour un seul espace,
si l'on veut indiquer un passage à la ligne simple au sein d'un paragraphe on se servira de la
balise <br/>.
 page 25

Séparateurs et blocs de texte

Retrait de texte

La balise <blockquote></blockquote> permet d'ajouter une indentation à un bloc de texte.

Concrètement elle déplace un bloc de lignes de façon rigide à droite et à gauche. Plusieurs balises
de ce type peuvent être imbriquées.

Syntaxe : <blockquote>...</blockquote>

Utilisation du retrait de texte

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <h2 align="left">Phileas Fogg</h2>
8 - <blockquote>
9 - <p>
10 - ... Ce Phileas Fogg était-il riche ? Mais comment
11 - il avait fait fortune, c'est ce que les mieux
12 - informés ne pouvaient dire, et Mr. Fogg était le
13 - dernier auquel il convînt de s'adresser pour l'apprendre ...
14 - </p>
15 - </blockquote>
16 - </body>
17 - </html>
 page 26

Séparateurs et blocs de texte

Commentaires

Les commentaires permettent de documenter le code source HTML d'une page Web.

Syntaxe : <!-- ... -->

Ce qui se trouve entre ces balises ne sera pas afficher par les navigateurs Web. Cette possibilité est
particulièrement utile pour annoter une source HTML ou pour la débugger.

Utilisation des commentaires

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <!--
7 - Le tour du monde en 80 jours - par Jules Verne
8 - source : Project Gutenberg Etext
9 - date : 27122001
10 - -->
11 - <p>
12 - ... Ce Phileas Fogg était-il riche ? Mais comment
13 - il avait fait fortune, c'est ce que les mieux
14 - informés ne pouvaient dire, et Mr. Fogg était le
15 - dernier auquel il convînt de s'adresser pour l'apprendre ...
16 - </p>
17 - </body>
18 - </html>

Le contenu des balises "commentaires" peut être réparti sur plusieurs lignes.
 page 27

Séparateurs et blocs de texte

Trait horizontal

La balise <hr> est utilisée pour dessiner un trait horizontal divisant toute la fenêtre du navigateur
Web. Il sert à séparer les blocs d'informations. C'est une balise "unique", c'est-à-dire qu'elle ne
possède pas de balise de fermeture.

En XHTML (reformulation du langage HTML 4.0 en utilisant la norme XML) les balises n'ayant pas de
contenu doivent se terminer par /. En ce qui concerne le trait horizontal on devra donc écrire <hr/>.

Syntaxe : <hr> ou <hr/>

Attributs du trait horizontal

align="left|center|right"
Alignement horizontal du trait sur la gauche, le centre ou la droite de la page

size="x"
Epaisseur du trait. L'ordre de grandeur est préciser en pixels

width="x" ou width="%"
Largeur du trait en pixels ou en % de la page

Utilisation du trait horizontal

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <hr align="center" size="6" width="60%">
8 - <h2 align="left">Phileas Fogg</h2>
9 - <hr align="left" size="1" width="200">
10 - <p align="center">
11 - ... Ce Phileas Fogg était-il riche ? Incontestablement.
12 - Mais comment il avait fait fortune,
13 - c'est ce que les mieux informés ne pouvaient dire,
14 - et Mr. Fogg était le dernier auquel il convînt
15 - de s'adresser pour l'apprendre ...
16 - </p>
17 - <h2 align="left">Passepartout</h2>
18 - <hr align="left" size="1" width="200">
19 - <p align="justify">
20 - ... Jean Passepartout, un surnom qui m'est resté, et que
21 - justifiait mon aptitude naturelle à me tirer d'affaire ...
22 - </p>
23 - <i>par Jules Verne</i>
24 - </body>
25 - </html>

Le premier trait est centré, a une largeur de 60% de la page et une épaisseur de 6 pixels - le
deuxième trait (ainsi que le troisième) est aligné à gauche, a une largeur de 200 pixels et une
épaisseur de 1 pixel.
 page 28

Séparateurs et blocs de texte

Bloc de contenu

La balise <div></div> délimite des blocs de contenu et en rend solidaires les éléments. Cette
particularité est surtout intéressante lorsque l'on exploite d'autres langages comme le Javascript ou
les CSS. En effet, leur combinaison rend possible le développement de pages web dites dynamiques
: la balise <div></div> permettant, dans ce contexte, de classifier les différentes parties d'un
document et de les rendre accessibles à des langages de manipulation tel que le Javascript.

Syntaxe : <div>...</div>

Attributs de la balise 'div'

align="left|center|right"
Alignement horizontal du bloc sur la gauche, le centre ou la droite de la page

class="nom de la classe"
Association d'une classe de style à un bloc de contenu (voir CSS)

Utilisation des blocs de contenu

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <div align="center" class="introduction">
8 - <h2>Introduction</h2>
9 - <p align="center">
10 - ... Ce Phileas Fogg était-il riche ? Incontestablement.
11 - Mais comment il avait fait fortune,
12 - c'est ce que les mieux informés ne pouvaient dire,
13 - et Mr. Fogg était le dernier auquel il convînt
14 - de s'adresser pour l'apprendre ...
15 - </p>
16 - </div>
17 - <div align="left" class="chapitre">
18 - <h2>Passepartout</h2>
19 - <p align="justify">
20 - ... Jean Passepartout, un surnom qui m'est resté, et que
21 - justifiait mon aptitude naturelle à me tirer d'affaire ...
22 - </p>
23 - </div>
24 - <div align="right" class="signature">
25 - <i>par Jules Verne</i>
26 - </div>
27 - </body>
28 - </html>

Le premier bloc contient un titre de niveau 2 et un paragraphe - il est centré et est associé à la
classe 'introduction'. Le deuxième bloc contient également un titre de niveau 2 et un paragraphe
- il est aligné à gauche et est associé à la classe 'chapitre'. Enfin, le troisième bloc contient une
ligne de texte - il est aligné à droite et est associé à la classe 'signature'.
 page 29

Formats de présentation

Police de caractères

La balise <font></font> permet de définir les caractères utilisés pour un bloc de texte. Il est
possible, via les attributs de cette balise, de préciser le type de police des caractères, la taille des
caractères ainsi que leur couleur.

Syntaxe : <font>...</font>

Attributs de la balise 'font'

face="nom de la police"
Nom de la police utilisée (ex: arial, verdana ...)

size="x"
Taille des caractères (entre 1-7 / défaut = 3)

color="code couleur"
Couleur du texte

Utilisation des polices de caractères

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <font size="7" face="arial">
7 - Le tour du monde en 80 jours
8 - </font>
9 - <br/><br/>
10 - <p align="center">
11 - <font face="verdana" color="#f3f3c7" size="4">
12 - ... Ce Phileas Fogg était-il <b>riche</b> ?
13 - Incontestablement...
14 - </font>
15 - </p>
16 - </body>
17 - </html>

L'ordre dans lequel les attributs de la balise 'font' sont mentionnés n'a pas d'influence sur le
traitement appliqué aux caractères.
 page 30

Formats de présentation

Caractère gras

La balise <b></b> met la portion de texte qu'elle englobe en caractère gras (bold).

Syntaxe : <b>...</b>

Utilisation des caractères gras

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <p align="center">
8 - ... Ce Phileas Fogg était-il <b>riche</b> ? Incontestablement...
9 - </p>
10 - </body>
11 - </html>

A l'intérieur du paragraphe, le mot 'riche' -placé entre <b></b>- sera affiché en caractère gras.
 page 31

Formats de présentation

Caractère italique

La balise <i></i> met la portion de texte qu'elle englobe en caractère italique (italic).

Syntaxe : <i>...</i>

Utilisation de l'italique

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <p align="center">
8 - ... Ce Phileas Fogg était-il <b>riche</b> ? Incontestablement...
9 - </p>
10 - <div align="right" class="signature">
11 - <i>par Jules Verne</i>
12 - </div>
13 - </body>
14 - </html>

A l'intérieur du bloc de contenu 'signature', le texte 'par Jules Verne' -placé entre <i></i>- sera
affiché en caractère italique.
 page 32

Formats de présentation

Caractère souligné

La balise <u></u> met la portion de texte qu'elle englobe en caractère souligné (underline).

Le code de soulignement est un peu particulier, il peut prêter à confusion. En effet, les navigateurs Web
utilisent par défaut le soulignement pour clairement identifier les liens hypertextes. En conséquence, si l'on
utilise le caractère souligné en dehors de ce contexte certains utilisateurs auront tendance à cliquer sur du
texte qui présente un soulignement simple en pensant que c'est un lien.

Syntaxe : <u>...</u>

Utilisation du soulignement

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <h1 align="center"><u>Le tour du monde en 80 jours</u></h1>
7 - <p align="center">
8 - ... Ce Phileas Fogg était-il <b>riche</b> ? Incontestablement...
9 - </p>
10 - <div align="right" class="signature">
11 - <i>par Jules Verne</i>
12 - </div>
13 - </body>
14 - </html>

Le titre de niveau 1 sera affiché en caractère souligné.

 page 33

Formats de présentation

Centrage

La balise <center></center> permet de centrer un ou plusieurs éléments dans une page Web. Ces
éléments peuvent être des entêtes, des blocs de texte, des liens, des images, des tableaux.

Syntaxe : <center>...</center>

Utilisation de la balise 'center'

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white">
6 - <center>
7 - <h1><u>Le tour du monde en 80 jours</u></h1>
8 - <p>
9 - ... Ce Phileas Fogg était-il <b>riche</b>?...
10 - </p>
11 - </center>
12 - <div align="right" class="signature">
13 - <i>par Jules Verne</i>
14 - </div>
15 - </body>
16 - </html>

Le titre de niveau 1 ainsi que le paragraphe qui suit seront alignés sur le centre de la page.
 page 34

Liens hypertextes

Liens externes

L'hypertexte peut être décrit comme une méthode de présentation non linéaire de l'information
permettant une navigation par mot ou phrase clé à l'intérieur d'un même document ou vers des
documents connexes. Le World Wide Web est entièrement basé sur la notion d'hypertexte.

Il est possible de transformer certains mots, icônes ou images d'une page HTML en liens qui, lorsqu'ils sont
sélectionnés, renvoient vers un autre paragraphe, un autre document, une image, un son ... Ceci se fait à
l'aide des balises <a></a> ; elles se placent autour du ou des mots qui vont servir de déclencheur de lien
hypertexte.

Syntaxe : <a>...</a>

Attribut de la balise 'a'

href="URL"
Mention de l'adresse URL de la ressource que l'on veut atteindre

Utilisation des liens hypertextes

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <p align="center">
8 - ... Ce <a href="[Link] Fogg</a> était-il
<b>riche</b> ? Incontestablement...
9 - </p>
10 - <div align="right" class="signature">
11 - <i><a href="[Link]">par Jules Verne</a></i>
12 - </div>
13 - </body>
14 - </html>

Le premier lien fait référence à un document se trouvant sur un autre serveur

([Link] Le second lien fait référence à un document html se trouvant au même
endroit que le fichier courant.

Si l'on veut créer un lien vers un document se trouvant dans le répertoire courant (c'est-à-dire dans le même
répertoire que celui où se trouve le fichier qui contiendra le lien), l'url à mentionner correspondra tout
simplement au nom du fichier visé.

Exemple : <a href="[Link]">Exercices de mathématiques</a>

Si l'on veut créer un lien vers un document se trouvant dans le répertoire supérieur, l'url à mentionner sera
composée de deux point (..) suivis d'un slash et du nom du fichier visé (les deux points servant à remonter
d'un niveau dans l'arborescence des répertoires du serveur).
 page 35

Exemple : <a href="../[Link]">Dictionnaire anglais/allemand</a>

Si l'on veut créer un lien vers un document se trouvant dans le répertoire inférieur, l'url à mentionner sera
composée du nom du répertoire suivi d'un slash et du nom du fichier visé.

Exemple : <a href="def/[Link]">Définition d'un routeur</a>

Si l'on veut créer un lien vers un document se trouvant sur un autre serveur, l'url à mentionner sera complète
(type de protocole, nom du serveur , chemin du fichier visé).

Exemple : <a href="[Link]

 page 36

Liens hypertextes

Liens internes

En HTML, si l'on peut lier deux documents à l'aide d'un lien hypertexte, il est également possible à
partir d'un lien de ne référencer qu'une partie d'un document.

Pour réaliser cela, il faut tout d'abord clairement identifier les parties du document que l'on veut pouvoir
atteindre en y plaçant des 'cibles'. Ceci se fait à l'aide de la balise 'a' et de son attribut 'name'.

Syntaxe : <a name="nom_de_la_cible"></a>

Attribut de la balise 'a'

name="nom_de_la_cible"
Précise le nom de la cible. C'est cette valeur qui devra être utilisée par les liens hypertextes afin
d'atteindre la partie du document concernée.

Une fois les cibles positionnées et nommées, il est possible d'y faire référence à travers des liens
hypertextes. Pour cela il faut passer en paramètre à l'attribut 'href' de la balise 'a' le nom de la cible visée (en
le faisant précéder du caractère '#').

Syntaxe : <a href="#nom_de_la_cible">...</a>

Lien vers une partie d'un document

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body>
6 - <a href="#bio">Lire la biographie de l'auteur</a>
7 - ...
8 - ...
9 - ...
10 - <a name="bio"></a>
11 - ...
12 - </body>
13 - </html>

Le lien en début de document pointe vers une partie du même document se trouvant plus bas.
Si le lien est activé, le navigateur Web va positionner la partie visée dans sa surface d'affichage
(le plus souvent dans le haut de la surface d'affichage).
 page 37

Images

Images gif - jpg

Nous l'avons déjà vu, un fichier HTML n'est rien d'autre qu'un fichier de type "texte". Il ne peut
donc pas directement contenir d'image. Ce que l'on peut faire par contre c'est utiliser un code HTML
(la balise <img>) qui indiquera au navigateur Web quels fichiers images doivent être affichés dans la
page Web. Les fichiers images sont en effet stockés à part, le code source HTML n'y fait que
référence.

Les deux formats graphiques compressés 'GIF' et 'JPEG' sont ceux que l'on rencontre le plus souvent sur
Internet. Ils sont compatibles avec la plupart des navigateurs Web. D'autres formats peuvent être utilisés
mais ils nécessitent soit de disposer d'une version récente d'un navigateur soit d'avoir installé des plug-ins
(programmes additionnels) pour les interpréter.

Le code <img> est une balise "unique", c'est-à-dire qu'elle ne possède pas de balise de fermeture. En
XHTML (reformulation du langage HTML 4.0 en utilisant la norme XML) les balises n'ayant pas de contenu
doivent se terminer par /. En ce qui concerne une image on devra donc écrire <img/>.

Syntaxe : <img> ou <img/>

Attributs de la balise 'img'

src="URL"
Adresse du fichier image à afficher

align="top|bottom|middle|left|right"
Alignement de l'image en relation avec le texte environnant

width="x" height="x"
Dimensions de l'image en pixels (largeur et hauteur)

border="x"
Epaisseur de l'encadrement de l'image en pixels

hspace="x" vspace="x"
Marges horizontales et verticales autour de l'image (en pixels)

alt="..."
Texte alternatif

Insertion d'images dans une source HTML

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <center><img src="[Link]"/></center>
8 - <p align="center">
9 - <img src="[Link]" align="right"/> Ce Phileas Fogg
10 - était-il riche ? Incontestablement. Mais comment il
11 - avait fait fortune, c'est ce que les mieux informés
 page 38

12 - ne pouvaient dire, et Mr. Fogg était le dernier auquel

13 - il convînt de s'adresser pour l'apprendre ...
14 - </p>
15 - <i><a href="[Link]">par Jules Verne</a></i>
16 - </body>
17 - </html>
 page 39

Images

Images cliquables

Une image cliquable (également appelée " image sensible ") est une image divisée en zones sur
lesquelles il est possible de cliquer afin d'obtenir une adresse URL associée. En d'autres mots, la
technique des images cliquables permet d'inclure plusieurs liens hypertextes différents dans une
même image (ex: barre de navigation, plan de ville).

L'intégration et l'activation d'une image cliquable dans un fichier HTML se fait via la balise '<img>' et de son
attribut 'usemap'.

Syntaxe : <img src="[Link]" usemap="#nom"/>

La carte appelée à travers l'attribut 'usemap' est décrite dans la source HTML grâce aux éléments '<map>' et
'<area>' ainsi que leurs attributs.

Syntaxe : <map name="nom">

<area shape="rect|poly|circle" coords="X1,Y1,X2,Y2" href="URL">
<area shape="rect|poly|circle" coords="X1,Y1,X2,Y2" href="URL">
</map>

Cette description de carte va définir dans l'image qui l'a appelée la forme, la taille, la position des différentes
zones et leur associer des adresses url (de la même façon que pour les liens hypertextes).

Attribut de la balise 'map'

name="nom_de_la_carte"
Précise le nom de la carte. C'est cette valeur que devra utiliser l'attribut 'usemap' de la balise
'<img> afin d'activer l'image cliquable.

Attributs de la balise 'area'

shape="rect|poly|circle"
Forme de la zone ('rect', 'poly', ou 'circle' - respectivement : rectangle, polygone ou cercle)

coords="X1,Y1,X2,Y2"
Coordonnées de la zone; elles précisent sa taille et sa position. Leur nombre varie en fonction
de la forme définie via l'attribut 'shape'.

href="URL"
Mention de l'adresse URL de la ressource que l'on veut atteindre

Comment repérer les coordonnées d'une zone

Le couple X,Y spécifie les coordonnées d'un point de la forme utilisée (rectangle,
polygone ou cercle) pour définir la zone cliquable. Ces coordonnées sont exprimées
en pixels et ont toujours pour élément de référence le coin supérieur gauche de
 page 40

l'image (coordonnées 0,0).

Pour obtenir les coordonnées des zones cliquables que l'on veut définir dans une image, la
solution la plus simple est de s'en remettre à un logiciel de traitement d'images (Photoshop,
PaintShop Pro ...) ou à un éditeur Web comme Dreamweaver, Golive ... Ceux-ci vous
permettent en effet d'éditer votre image et, à l'aide du curseur, d'en repérer tous les pixels.

Utilisation d'une image cliquable

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">
6 - <center><img src="[Link]" usemap="#carte1"></center>
7 - <map name="carte1">
8 - <area shape="rect" coords="62,45,90,60" href="[Link]">
9 - <area shape="rect" coords="59,75,98,86" href="[Link]">
10 - <area shape="circle" coords="60,90,30" href="[Link]">
11 - </map>
12 - <h1 align="center">Le tour du monde en 80 jours</h1>
13 - <p align="center">
14 - <img src="[Link]" align="right"/> Ce Phileas Fogg
15 - était-il riche ? Incontestablement. Mais comment il
16 - avait fait fortune, c'est ce que les mieux informés
17 - ne pouvaient dire, et Mr. Fogg était le dernier auquel
18 - il convînt de s'adresser pour l'apprendre ...
19 - </p>
20 - </body>
21 - </html>
 page 41

Images

Images animées

Les images animées ne relèvent pas vraiment du langage HTML. Elles consistent en fait en une
succession d'images fixes et sont conçues à l'aide de logiciels de traitement d'images.

Le cas de figure le plus souvent rencontré est celui des "animated gifs". En effet, le format gif permet
d´enregistrer plusieurs images dans un même fichier. Lorsque ce fichier gif est appelé dans un navigateur
Web, les images qui le composent sont affichées les unes après les autres. Les temps d´affichage peuvent
être paramétrés; on peut choisir que l´animation se répète indéfiniment, se répète un nombre précis de fois
ou ne se répète pas. Voici quelques outils d'édition graphique qui traitent les "animated gifs" :
- Photoshop
- Gif Animator
- Paint Shop Pro
- Gif Builder
- CoffeeCup GIF Animator
- Ulead Gif Animator
- ...

Au niveau du code HTML, pour insérer une image animée dans une page Web, il suffit d'utiliser la balise
<img/> comme s'il s'agissait d'une image classique.

Exemple : <img src="image_animee.gif"/>

 page 42

Listes

Listes non ordonnées

Le langage HTML permet d'organiser un document ou une partie d'un document en créant des
listes. Ces codes sont particulièrement utiles pour la réalisation de tables des matières. Dans ce
cadre, une liste non ordonnée regroupe des éléments sans qu'une présentation selon un ordre
particulier soit nécessaire.

Le navigateur Web, lorsqu'il rencontre dans un document HTML une liste non ordonnée, place chaque
élément de la liste sur une nouvelle ligne et le fait précéder d'une puce.

Une liste non ordonnée est délimitée par la balise <ul></ul>. Chaque élément de la liste est encadré par la
balise <li></li>.

Syntaxe : <ul>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
...
</ul>

Attribut des balises 'ul' et 'li'

type="disc|square|circle"
Type de puce à placer devant les éléments d'une liste non ordonnée (la valeur par défaut est
'disc')

Utilisation d'une liste non ordonnée

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <ul type="square">
8 - <li>Jules Verne</li>
9 - <li>Phileas Fogg</li>
10 - <li>Jean Passepartout</li>
11 - </ul>
12 - </body>
13 - </html>
 page 43

Listes

Listes ordonnées

Une liste ordonnée regroupe des éléments de la même façon qu'une liste non ordonnée, excepté
que dans ce cas-ci chaque élément de la liste ordonnée est précédé de son numéro d'ordre.

Une liste ordonnée est délimitée par la balise <ol></ol>. Chaque élément de la liste est encadré par la balise
<li></li>.

Syntaxe : <ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
...
</ol>

Attribut de la balise 'ol'

type="1|i|I|a|A"
style de la numérotation à placer devant les éléments d'une liste ordonnée:
1 = chiffres arabes (1,2,3 ...)
i = chiffres romains en minuscules (i, ii, iii ...)
I = chiffres romains en majuscules (I, II, III ...)
a = lettres en minuscules (a, b, c ...)
A = lettres en majuscules (A, B, C ...)

start="x"
Indication de la valeur de départ pour la numérotation des éléments

Utilisation d'une liste ordonnée

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">
6 - <h1 align="center">Le tour du monde en 80 jours</h1>
7 - <ol type="1">
8 - <li>Jules Verne</li>
9 - <li>Phileas Fogg</li>
10 - <li>Jean Passepartout</li>
11 - </ol>
12 - </body>
13 - </html>
 page 44

Listes

Listes de définitions

Une liste de définition est particulièrement adaptée si l'on veut présenter à l'écran les termes et
articles d'un dictionnaire, lexique ou glossaire.

Le navigateur Web, lorsqu'il rencontre dans un document HTML une liste de définition, place chaque terme
de la liste sur une nouvelle ligne et le fait directement suivre par sa définition (légèrement indentée).

Une liste de définitions est placée entre les codes <dl></dl>. Chaque terme à définir est encadré par la
balise <dt></dt> et est suivi de sa définition délimitée par la balise <dd></dd>.

Syntaxe : <dl>
<dt>Premier terme</dt>
<dd>Définition</dd>
<dt>Deuxième terme</dt>
<dd>Définition</dd>
...
</dl>

Utilisation d'une liste de définitions

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">
6 - <h1 align="center">Romanciers</h1>
7 - <dl>
8 - <dt>Jules Verne</dt>
9 - <dd>Ecrivain français (1828 - 1905). Sa rencontre
10 - avec l#éditeur J. Hetzel, qui ne cessa de l#aider, lui
11 - permit de recueillir de gros succès dans le genre qu#il
12 - avait créé avec Cinq Semaines en ballon ...</dd>
13 - <dt>Henri Ridder Haggard</dt>
14 - <dd>Romancier anglais (1856 - 1925).
15 - Habile à faire revivre les ombres du passé et les mythes,
16 - il écrivit ...</dd>
17 - </dl>
18 - </body>
19 - </html>
 page 45

Listes

Listes imbriquées

A partir des codes de listes, on peut réaliser des combinaisons complexes débouchant sur
l'affichage de tables de matières sophistiquées. Bien évidemment, dans ce cas, il faut être attentif à
respecter la logique d'ouverture et de fermeture des balises de listes.

Combinaison de listes

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">
6 - <h1 align="center">Jules Verne</h1>
7 - <ul>
8 - <li>L'île mystérieuse</li>
9 - <li>Le tour du monde en 80 jours</li>
10 - <ol>
11 - <li>Phileas Fogg</li>
12 - <li>Jean Passepartout</li>
13 - <ul>
14 - <li>Londres</li>
15 - <li>Suez</li>
16 - <li>Bombay</li>
17 - </ul>
18 - <li>Fix</li>
19 - </ol>
20 - <li>Le château des Carpathes</li>
21 - </ul>
22 - </body>
23 - </html>

La première liste non ordonnée contient une liste ordonnée qui elle-même contient une liste non
ordonnée.
 page 46

Tableaux

Structure générale

Les tableaux sont des éléments fort utilisés en matière d'édition Web. Ils permettent de structurer
de façon plus sophistiquée la présentation des données et ainsi de dépasser les limitations de la
mise en page de base du langage HTML. Celle-ci est en effet essentiellement linéaire : les éléments
sont simplement placés les uns après les autres. Les tableaux permettent, eux, les présentations en
colonnes, l'alignement en parallèle de textes et d'images, l'imbrication de tableaux ...

Pour obtenir un tableau en HTML, il suffit de définir une balise de début de tableau, de décrire le tableau
ligne par ligne (chaque ligne étant composée d'au minimum une cellule), et pour terminer d'indiquer la balise
de fin de tableau.

Les balises suivantes sont indispensables à la construction d'un tableau :

- <table></table> - définit le début et la fin de la construction du tableau
- <tr></tr> - définit une ligne dans un tableau
- <td></td> - définit une cellule dans une ligne

A l'intérieur d'une cellule d'un tableau on peut placer à peu près n'importe quel élément HTML : titres,
paragraphes, listes, liens, images, formulaires, tableaux.

Syntaxe : <table>
<tr>
<td>Contenu de la cellule</td>
</tr>
</table>

Attributs de la balise 'table'

border="x"
Bordure du tableau (vaut 0 par défaut)

cellspacing="x"
Espace laissé libre entre les cellules

cellpadding="x"
Espace laissé libre entre le contenu et les bords internes des cellules

width="x" ou width="x%"
Largeur du tableau en pixels ou en pourcentage de la "page"

bgcolor="code couleur"
Couleur d'arrière-plan du tableau

Utilisation d'un tableau

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
 page 47

5 - <body bgcolor="#4A6F67" text="white" link="#f3f3c7">

6 - <table border="1" width="60%" bgcolor="#BEC69D">
7 - <tr>
8 - <td>Contenu de la cellule 1.1</td>
9 - <td>Contenu de la cellule 1.2</td>
10 - </tr>
11 - <tr>
12 - <td>Contenu de la cellule 2.1</td>
13 - <td>Contenu de la cellule 2.2</td>
14 - </tr>
15 - </table>
16 - </body>
17 - </html>

Ce code source donne pour résultat la construction par le navigateur Web d'un tableau de deux
lignes composées de deux cellules.
 page 48

Tableaux

Structure des lignes

Les lignes des tableaux contiennent des cellules. Elles sont limitées par la balise de début de
ligne <tr> et par la balise de fin de ligne </tr>.

La ligne contenant le plus grand nombre de cellules est considérée comme la ligne directrice du tableau, les
autres lignes prenant leurs repères sur celle-ci (le navigateur web place automatiquement des cellules vides
afin de remplir les espaces laissés libres s'il existe une différence quant au nombre de cellules entre les
lignes).

Syntaxe : <tr>...</tr>

Attributs de la balise 'tr'

align="left|center|right|justify"
Alignement horizontal du contenu des cellules qui composent la ligne

valign="top|middle|bottom"
Alignement vertical du contenu des cellules qui composent la ligne

bgcolor="code couleur"
Couleur d'arrière-plan des cellules qui composent la ligne

Traitement des lignes d'un tableau

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="black" link="#f3f3c7">
6 - <table border="1" width="60%">
7 - <tr bgcolor="#BEC69D" align="center">
8 - <td>Contenu de la cellule 1.1</td>
9 - <td>Contenu de la cellule 1.2</td>
10 - </tr>
11 - <tr bgcolor="#f3f3c7" align="center">
12 - <td>Contenu de la cellule 2.1</td>
13 - <td>Contenu de la cellule 2.2</td>
14 - </tr>
15 - <tr bgcolor="#f3f3c7" align="left">
16 - <td>Contenu de la cellule 3.1</td>
17 - </tr>
18 - </table>
19 - </body>
20 - </html>

Les deux premières lignes contiennent chacune deux cellules dont le contenu est centré. La
dernière ligne ne contient qu'une seule cellule dont le contenu est aligné à gauche.
 page 49

Tableaux

Structure des cellules

Les cellules constituent les unités de base des tableaux. Leur rôle consiste à réceptionner le
contenu que l'on désire afficher dans le tableau. Elles sont limitées par la balise de début de cellule
<td> et par la balise de fin de cellule </td>.

De nombreux éléments HTML peuvent être placés dans une cellule de tableau : titres, paragraphes, listes,
liens, images, formulaires, tableaux.

Syntaxe : <td>...</td>

Attributs de la balise 'td'

align="left|center|right|justify"
Alignement horizontal du contenu de la cellule

valign="top|middle|bottom"
Alignement vertical du contenu de la cellule

width="x" ou width="x%"
Largeur de la cellule en pixels ou en pourcentage

height="x" ou height="x%"
Hauteur de la cellule en pixels ou en pourcentage

colspan=""
Débordement d'une colonne

rowspan=""
Débordement d'une ligne

bgcolor="code couleur"
Couleur d'arrière-plan de la cellule

Traitement des cellules d'un tableau

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="black" link="#f3f3c7">
6 - <table border="1">
7 - <tr>
8 - <td width="200" align="left" bgcolor="#BEC69D">
9 - Contenu de la cellule 1.1
10 - </td>
11 - <td width="400" align="center">
12 - Contenu de la cellule 1.2
13 - </td>
14 - </tr>
15 - <tr>
16 - <td bgcolor="#f3f3c7" colspan="2">
17 - Contenu de la cellule 2.1
18 - </td>
19 - </tr>
20 - </table>
 page 50

21 - </body>
22 - </html>

La première ligne contient deux cellules ayant des tailles différentes (respectivement 200 pixels
et 400 pixels). La deuxième ligne ne contient qu'une seule cellule; celle-ci occupe cependant un
espace équivalant à celui attribué aux deux cellules de la ligne précédente (colspan="2").
 page 51

Tableaux

Tableaux imbriqués

Dans le cadre de la diffusion d'information sur le Web, les tableaux HTML sont fort sollicités - on
les retrouve quasiment partout. Ce sont en effet de puissants éléments de mise en page. Cependant,
afin d'exploiter pleinement leur potentiel, il faut arriver à manipuler des bouts de codes HTML de plus
en plus sophistiqués; l'imbrication de tableaux en fait partie.

Lorsque l'information que l'on désire placer dans un document web nécessite une mise en page "complexe",
on a souvent recours à l'imbrication de tableaux, c'est-à-dire à "des tableaux dans des tableaux". Cette façon
de faire offre beaucoup de souplesse et renforce la modularité de la page.

Le codage d'une telle structure est relativement simple, si l'on garde à l'esprit que l'important est ici de ne
pas se tromper dans la logique d'ouverture et de fermeture des balises 'table', 'tr', 'td'.

Imbrication de tableaux

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#4A6F67" text="black" link="#f3f3c7">
6 -
7 - <table width="100%" height="100%">
8 - <tr>
9 - <td align="center" valign="middle" bgcolor="#BEC69D">
10 -
11 - <table border="1">
12 - <tr>
13 - <td width="200" align="left" bgcolor="#BEC69D">
14 - Contenu de la cellule 1.1
15 - </td>
16 - <td width="400" align="center">
17 - Contenu de la cellule 1.2
18 - </td>
19 - </tr>
20 - <tr>
21 - <td bgcolor="#f3f3c7" colspan="2">
22 - Contenu de la cellule 2.1
23 - </td>
24 - </tr>
25 - </table>
26 -
27 - </td>
28 - </tr>
29 - </table>
30 -
31 - </body>
32 - </html>

Le premier tableau n'est composé que d'une ligne contenant une seule cellule. Celle-ci contient
un deuxième tableau qu'elle va placer au milieu de la page.
 page 52

Formulaires

Déclaration d'un formulaire

Il est possible grâce aux formulaires HTML d'afficher à l'écran des zones de dialogue (zones de
saisie de texte, cases à cocher, liste de choix ...) et d'en transférer le contenu vers un serveur. On
peut ainsi à travers une page Web récupérer de l'information fournie par un utilisateur. Les données
récupérées sont ensuite traitées par un programme (script) installé sur le serveur en vue de leur
exploitation.

Aujourd'hui un site web ne peut quasi plus se passer de la technique des formulaires HTML. Voici quelques
applications exploitant les formulaires :
- outil de recherche
- consultation en ligne d'une base de données
- commande de documentation
- inscription en ligne
- identification des utilisateurs

La déclaration d'un formulaire se fait à l'aide de la balise <form></form> et par la spécification des attributs
'action' et 'method'.

Syntaxe : <form action="url" method="get ou post">....</form>

L'URL précisée via le paramètre 'action' désigne le programme vers lequel l'information recueillie est dirigée.
Si ce paramètre n'est pas présent, l'URL du document courant est utilisée par défaut. La valeur du
paramètre 'method' indique la méthode d'accès au serveur http. 'post' et 'get' sont les deux valeurs possibles
:
- la méthode 'get' ajoute le contenu du formulaire à l'url spécifiée dans le paramètre 'action' comme s'il
s'agissait d'une requête normale;
- la méthode 'post' envoie le contenu du formulaire au serveur comme un ensemble de données sans les
faire figurer à la suite de l'url.

Déclaration d'un formulaire

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body>
6 - <form action="/cgi-bin/[Link]" method="post">
7 - ....
8 - </form>
9 - </body>
10 - </html>

Tout ce qui se trouve entre ces deux tags concerne la structure du formulaire et le type de
questions que l'on souhaite poser.
 page 53

Formulaires

Zones de saisie de texte

Une zone de saisie d'information est affichée par le navigateur Web lorsqu'il rencontre dans la
source HTML la balise <input/>. Cette zone sera une zone de saisie de texte si la balise 'input' est
accompagnée de l'attribut 'type' et que celui-ci a pour valeur un des paramètres suivants: text,
password ou hidden.

Ce type de zones permet à l'utilisateur d'entrer des chiffres et/ou des mots (nom, prénom, dates, ville,
numéro de téléphone, mot de passe ...).

Dans un formulaire HTML, chaque zone de saisie doit posséder un nom unique (qui ne contient ni d'espaces
ni de caractères accentués). Ce nom est en effet indispensable si l'on veut qu'un programme sur le serveur
puisse traiter et manipuler les données qui ont été enregistrées par l'utilisateur.

Syntaxe : <input/>

Attributs de la balise 'input'

type="text|password|hidden"
text : zone de texte sur une ligne
password : zone dont le texte est remplacé à l'écran par des '*'
hidden : transmission d'un champ sans qu'il apparaisse à l'écran

name="nom-du-champ"
Identificateur de l'élément du formulaire - il sera utilisé dans le programme qui traitera le
formulaire

value="..."
Attribution d'une valeur par défaut au champ de saisie

size="x"
Taille d'affichage de la zone de saisie (en nombre de caractères)

Attention, les zones de saisie de données ne peuvent être utilisées efficacement qu'au sein d'un formulaire,
c'est-à-dire entre les balises <form ...> et </form>.

Utilisation des zones de saisie de texte

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#BEC69D" text="black" link="#f3f3c7">
6 - <form action="/cgi-bin/[Link]" method="post">
7 - Nom :
8 - <input type="text" name="nom" size="20"/><br/>
9 - Prénom :
10 - <input type="text" name="prenom" size="20"/><br/>
11 - Nom d'utilisateur :
12 - <input type="text" name="login" size="20"/><br/>
13 - Password :
14 - <input type="password" name="pass" size="8"/><br/>
 page 54

15 - </form>
16 - </body>
17 - </html>

Le premier champ est de type 'text', a pour identificateur 'login' et a une taille d'affichage de 20
caractères. Le deuxième champ est de type 'password', a pour identificateur 'passwd' et a une
taille d'affichage de 8 caractères.
 page 55

Formulaires

Cases à cocher

La balise <input/> peut également présenter à l'écran des champs de saisie de type 'boutons
radio' et 'cases à cocher'.

Ces boutons sont définis via l'attribut 'type'. Celui-ci doit prendre la valeur 'radio' si l'on désire afficher des
boutons radio et 'checkbox' si l'on désire afficher des cases à cocher.

Le type 'radio' permet de gérer les questions à réponse "binaire" (exemple: avez-vous des enfants ? oui/non
- on utilise pour ce genre de questions des 'boutons exclusifs'). Dans ce cas, il n'y a qu'une seule des
options qui peut être sélectionnée. Le type 'checkbox', au contraire, permet que plusieurs options soient
retenues (exemple: quels systèmes d'exploitation utilisez-vous ? Windows - Linux - MacOSX).

Syntaxe : <input/>

Attributs de la balise 'input'

type="radio|checkbox"
radio : boutons radio
checkbox : cases à cocher

name="nom-du-champ"
Identificateur de l'élément du formulaire - il sera utilisé dans le programme qui traitera le
formulaire.

value="..."
Attribution d'une valeur par défaut au champ de saisie.

checked
Présélection d'une case ou d'un bouton.

Cases à cocher et boutons radio

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#BEC69D" text="black" link="#f3f3c7">
6 - <form action="/cgi-bin/[Link]" method="post">
7 - <p>
8 - Avez-vous déjà entendu parler de Jules Verne ?<br/>
9 - <input type="radio" name="jverne" value="yes"/> oui<br/>
10 - <input type="radio" name="jverne" value="no"/> non
11 - </p>
12 - <p>
13 - Quel(s) roman(s) avez-vous lu(s) ?<br/>
14 - <input type="checkbox" name="biblio" value="livre1"/>
15 - Le tour du monde en 80 jours<br/>
16 - <input type="checkbox" name="biblio" value="livre2"/>
17 - Vingt mille lieues sous les mers<br/>
18 - <input type="checkbox" name="biblio" value="livre3"/>
19 - L'île mystérieuse<br/>
20 - <input type="checkbox" name="biblio" value="livre4"/>
21 - Le château des Carpathes<br/>
22 - </p>
23 - </form>
 page 56

24 - </body>
25 - </html>

La première question est gérée a travers deux champs de type 'radio' ayant pour identificateur
'jverne'. Le premier champ, s'il est sélectionné, retourne la valeur 'yes' - tandis que le second
champ retourne la valeur 'no' (les deux ne pouvant être activés simultanément).
La deuxième question est gérée a travers quatre champs de type 'checkbox' ayant pour
identificateur 'biblio'. A l'inverse des champs de type 'radio', ici, plusieurs champs peuvent être
sélectionnés.
 page 57

Formulaires

Listes de choix

La balise <select></select> offre la possibilité de présenter dans un formulaire un menu déroulant

reprenant toutes les options concernant le choix que vous devez opérer.

Syntaxe : <select>
<option></option>
<option></option>
<option></option>
<option></option>
...
</select>

La balise 'option' est utilisée afin de définir chaque élément faisant partie de la liste de choix.

Attributs de la balise 'select'

name="nom-du-champ"
Identificateur de la liste - il sera utilisé dans le programme qui traitera le formulaire.

value="..."
Attribution d'une valeur par défaut au champ de saisie.

size="..."
Nombre de lignes visibles dans une liste déroulante.

Attributs de la balise 'option'

value="..."
Attribution d'une valeur à une option. Si aucune valeur n'est précisée, c'est le contenu de la
balise option qui est repris.

Utilisation des listes de choix

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#BEC69D" text="black" link="#f3f3c7">
6 - <form action="/cgi-bin/[Link]" method="post">
7 - <p>
8 - Avez-vous déjà entendu parler de Jules Verne ?<br/>
9 - <input type="radio" name="jverne" value="yes"/> oui<br/>
10 - <input type="radio" name="jverne" value="no"/> non
11 - </p>
12 - <p>
13 - Quel(s) roman(s) avez-vous lu(s) ?<br/>
14 - <select name="biblio" size="1">
15 - <option value="livre1">
16 - Le tour du monde en 80 jours
17 - </option>
18 - <option value="livre2">
19 - Vingt mille lieues sous les mers
20 - </option>
 page 58

21 - <option value="livre3">
22 - L'île mystérieuse
23 - </option>
24 - <option value="livre4">
25 - Le château des Carpathes
26 - </option>
27 - </select>
28 - </p>
29 - </form>
30 - </body>
31 - </html>

La deuxième question est gérée a travers une liste de choix ayant pour identificateur 'biblio'. A
priori un seul élément est visible - le reste est affiché lorsque l'on actionne la liste déroulante.
 page 59

Formulaires

Activation d'un formulaire

L'activation d'un formulaire, c'est-à-dire l'envoi des données saisies par l'utilisateur vers le
serveur, repose sur la balise 'input'. Celle-ci, accompagnée de son attribut 'type' (ayant pour valeur
'submit'), force le navigateur Web à afficher un bouton d'envoi de formulaire.

Syntaxe : <input/>

Attributs de la balise 'select'

type="submit"
Bouton d'envoi d'un formulaire.

value="intitule_du_bouton"
Texte affiché sur le bouton d'envoi d'un formulaire.

Bouton d'envoi d'un formulaire

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <body bgcolor="#BEC69D" text="black" link="#f3f3c7">
6 - <form action="/cgi-bin/[Link]" method="post">
7 - <p>
8 - Avez-vous déjà entendu parler de Jules Verne ?<br/>
9 - <input type="radio" name="jverne" value="yes"/> oui<br/>
10 - <input type="radio" name="jverne" value="no"/> non
11 - </p>
12 - <p>
13 - Quel(s) roman(s) avez-vous lu(s) ?<br/>
14 - <select name="biblio" size="1">
15 - <option value="livre1">
16 - Le tour du monde en 80 jours
17 - </option>
18 - <option value="livre2">
19 - Vingt mille lieues sous les mers
20 - </option>
21 - <option value="livre3">
22 - L'île mystérieuse
23 - </option>
24 - <option value="livre4">
25 - Le château des Carpathes
26 - </option>
27 - </select>
28 - </p>
29 - <input type="submit" value="envoyer"/>
30 - </form>
31 - </body>
32 - </html>

Le dernier champ active le formulaire: les données sont alors envoyées vers le script précisé via
l'attribut 'action' de la balise 'form' et selon la méthode précisée via l'attribut 'method' de la balise
'form'.
 page 60

Cadres

Définition des cadres

Certains codes du langage HTML permettent de diviser la fenêtre d'affichage d'un navigateur Web
en plusieurs zones d'affichages capables de présenter en parallèle différents documents Web. Ces
zones ('cadres' - en anglais 'frames'), liées physiquement mais possédant une architecture autonome
sont interactives : un lien dans l'une d'entre elles peut modifier le contenu d'une autre zone.

Ce système permet de diviser la structure des pages classiques en fonction des besoins. Par exemple, un
magazine peut consacrer un 'cadre' au sommaire pilotant un autre 'cadre' affichant le corps des différents
articles.

Structuration d'une page Web à l'aide des cadres

La surface d'affichage du navigateur est divisée en différentes zones destinées à recevoir des
documents html.

Pour obtenir un document structuré en cadres/frames, il faut définir un premier fichier HTML de description
des différentes zones (cadres) de l'écran. Celui-ci indique comment le navigateur Web doit diviser sa fenêtre
d'affichage, c'est-à-dire qu'il précise le nombre et la taille des cadres ainsi que les documents HTML qui
seront chargés et affichés dans chacun de ces cadres. La structure de cette page de description est reprise
dans l'exemple présenté ci-dessous.

Exemple : <frameset cols="20%,*">

<frame src="[Link]"/>
<frame src="[Link]"/>
</frameset>

La balise 'frameset' assure l'agencement des cadres tandis que la balise 'frame' s'occupe d'habiller un cadre
en particulier. Nous allons étudier ces codes de plus près dans les chapitres qui suivent.
 page 61

Cadres

Division en cadres

A travers la balise 'frameset' il est possible d'organiser la division de la fenêtre d'affichage d'un
navigateur Web en différents cadres. Elle permet de préciser le type d'agencement des cadres
(lignes/colonnes) ainsi que leur taille.

Syntaxe : <frameset>...</frameset>

Attributs de la balise 'frameset'

rows="n1, n2 ... " (x, %, *)

Définition de la hauteur et du nombre de cadres en cas de division horizontale. Du nombre de
paramètres précisés entre guillemets découle le nombre de cadres. Ces paramètres
représentent, dans le cas d'une division en lignes, la hauteur d'un cadre (exprimée soit en pixels,
soit en pourcentage, soit via l'astérisque qui indique l'espace restant).

cols="n1, n2 ... " (x, %, *)

Définition de la largeur et du nombre de cadres en cas de division verticale. Du nombre de
paramètres précisés entre guillemets découle le nombre de cadres. Ces paramètres
représentent, dans le cas d'une division en colonnes, la largeur d'un cadre (exprimée soit en
pixels, soit en pourcentage, soit via l'astérisque qui indique l'espace restant).

frameborder="0|1|no|yes"
Bordures des cadres.

Attention, la balise 'frameset' n'est présente que dans le document de description des cadres. Il suffit de
placer les codes liés à 'frameset' dans un fichier HTML en lieu et place de la balise 'body'. Ce document ne
doit donc théoriquement contenir que les éléments suivants : <html></html>, <head></head>, <title></title>,
et les codes de division en cadres.

Fichier de description des cadres

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <frameset cols="20%,80%">
6 - <frame src="[Link]"/>
7 - <frame src="[Link]"/>
8 - </frameset>
9 - </html>

Cette structure en cadres définit deux colonnes. La première colonne occupe 20% de la surface
d'affichage du navigateur et a pour contenu le fichier [Link]. La deuxième colonne occupe
80% de la surface d'affichage du navigateur et a pour contenu le fichier [Link].
 page 62

Cadres

Habillage des cadres

La balise 'frame', contenue dans la balise 'frameset', habille en quelque sorte un cadre.
Concrètement, elle l'identifie clairement en lui associant un identificateur et fixe son contenu en
appelant -via une url- un fichier destiné à être affiché à l'écran (le plus souvent un fichier HTML).

Syntaxe : <frame/>

Attributs de la balise 'frame'

src="url"
Adresse url du document à afficher dans le cadre

name="nom_du_cadre"
Identificateur du cadre (cible d'un lien hypertexte)

marginwidth="x"
Espace entre le document et les limites verticales du cadre

marginheight="x"
Espace entre le document et les limites horizontales du cadre

frameborder="0|1|no|yes"
Bordure du cadre

scrolling="no|yes"
Barre de défilement du cadre

noresize
Impossibilité de redimensionner le cadre

Utilisation de la balise 'frame'

1 - <html>
2 - <head>
3 - <title>Test HTML</title>
4 - </head>
5 - <frameset rows="200,*">
6 - <frame src="[Link]" name="titre" scrolling="no"/>
7 - <frame src="[Link]" name="article" noresize/>
8 - </frameset>
9 - </html>

Cette structure en cadres définit deux lignes. La première ligne a une hauteur de 200 pixels et a
pour contenu le fichier '[Link]'. Elle est identifiée par le paramètre 'titre' et ne présente pas
de barre de défilement
La deuxième ligne occupe l'espace restant de la surface d'affichage du navigateur et a pour
contenu le fichier '[Link]'. Elle est identifiée par le praramètre 'article' et ne peut être
redimensionnée ('noresize').
 page 63

Cadres

Liaison entre cadres

Une fois qu'un cadre est clairement identifié grâce à l'attribut 'name' de la balise 'frame', il est
possible de s'en servir comme espace d'affichage pour les données résultant de l'activation d'un
lien.

A titre d'exemple, reprenons la cas d'un magazine qui exploite une structure composée de deux cadres
verticaux, l'un consacré au sommaire et l'autre aux articles du magazine. Dans ce contexte, l'objectif
poursuivi par les auteurs sera de pouvoir activer des liens hypertextes dans la zone 'sommaire' et en afficher
le résultat dans la zone 'articles'.

Cadres et liens hypertextes

Afin de réaliser cela, il faut placer dans la balise du lien hypertexte 'a', un nouvel attribut 'target' qui va
reprendre en paramètre l'indentificateur du cadre sélectionné pour recevoir le résultat du lien.

Exemple : <a href="[Link]" target="article">Bulletin météo</a>

L'attribut 'href' indique quel document charger. De son côté, l'attribut 'target' indique où le charger.

Cibles prédéfinies

_self
Le document sera chargé dans la même zone que celle dans laquelle se trouve le lien
hypertexte.

_blank
Le navigateur doit créer une nouvelle fenêtre (c'est-à-dire un nouveau navigateur) afin d'y
afficher le document.

_top
Le document est affiché de manière classique dans la fenêtre du navigateur (cela implique la
 page 64

suppression des cadres).

_parent
Le document sera chargé dans le cadre parent.
 page 65

Indexation

Les moteurs d'indexation et de recherche sur Internet (ex: AltaVista, Google, Hotbot ...) utilisent
des programmes logiciels, des "robots", qui vont parcourir les documents contenus sur le Web afin
de les indexer. Les index de ces moteurs de recherche sont réalisés par les robots à partir
d'éléments qui peuvent être recueillis à divers endroits d'une page HTML : le titre ou l'en-tête du
document, les URL, les zones hypertextes ou le document complet.

Afin de faciliter le travail des robots, le concepteur d'un site Web peut, via le langage HTML, utiliser des
instructions invisibles pour l'utilisateur - les "metatags" - qui proposent des champs spécifiques regroupant
les caractéristiques essentielles d'un document. En effet, certains robots se servent de ces tags HTML pour
indexer et classer plus finement les sites Web dans leurs bases de données.

Les metatags, pour être pris en compte, doivent être insérés à l'intérieur du document dans la zone d'entête
<head>...</head>.

Syntaxe : <meta/>

Attributs de la balise 'meta'

name="nom_du_champ"
Identificateur du champ.
Le nom 'keywords' est largement accepté comme identificateur du champ de données qui
contiendra les mots-clés du document.

content="valeurs"
Valeurs associées au champ défini via l'attribut 'name'. Dans le cas du champ 'keywords' les
valeurs doivent être séparées par une virgule

Utilisation des metatags

1 - <html>
2 - <head>
3 - <title>Le tour du monde en 80 jours</title>
4 - <meta name="keywords"
5 - content="roman, Jules Vernes,Phileas Fogg, Passepartout"/>
6 - </head>
7 - <body>
8 - ... Contenu destiné à être affiché dans le navigateur ...
9 - </body>
10 - </html>

Ce document HTML présente un entête de page qui liste des mots-clés représentant le sujet
traité. En conséquence, l'indexation de ce document dans certains outils de recherche se fera
plus facilement.

L'utilité de ce type de balises ne se limite pas uniquement aux relations qu'elles peuvent avoir avec les outils
de recherche. Il existe, en effet, d'autres "metatags" qui permettent notamment de rafraîchir le contenu d'une
page automatiquement, d'éviter l'enregistrement d'une page dans le "cache" d'un navigateur, de préciser les
langages et les caractères inclus dans une page ... (plus d'info : [Link]