Scribd
Importer
1 vues31 pages

HTML

HTML

Transféré par

assan9279
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
1 vues31 pages

HTML

HTML

Transféré par

assan9279
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

HTML

I. Introduction

Internet est un réseau de réseaux, un ensemble d'ordinateurs interconnectés et utilisant le


même protocole. Ce réseau offre différents services, tels que messagerie électronique, ftp
(transfert de fichiers), telnet (connexion à distance)...et le fameux World Wide Web (WWW)
ou Web! L'idée de départ du Web est de laisser l'information sous forme non-structurée sur le
réseau, plutôt que de l'organiser en base de données. En revanche, chaque document peut faire
référence aux autres, par le biais de trois mécanismes:

1. Un schéma d'adressage uniforme pour localiser chaque information sur le Web: Les
URL;
2. Un protocole (HTTP) pour accéder aux ressources disponibles sur le Web;
3. Un langage balisé permettant la navigation entre sites à l'aide de liens hypertextes: le
langage HTML.

Pour publier des informations sur un même réseau, il est nécessaire de parler le même
langage. Pour cette raison, tous les ordinateurs connectés sur le réseau utilisent le même
protocole d'échange de données, et le langage utilisé pour la création de pages Web est le
langage HTML (Hypertext Markup Language). HTML permet à l'utilisateur de:

• Publier du texte mis en forme, des images, du son, de la vidéo...


• Concevoir des formulaires permettant de dialoguer avec un serveur distant
(commander un produit, réserver une place de théâtre, ...);
• Lire les informations publiées par d'autres utilisateurs, et naviguer grâce aux liens
hypertexte.

Un document hypertexte (HTML) n'est rien d'autre qu'un fichier de texte, portant l'extension
".HTML", et dans lequel apparaissent des Balises. Ces balises ont pour but de définir la
structure du document: telle partie correspond à un titre, telle autre correspond à une image...
Le langage HTML est ensuite interprété par un logiciel dit de navigation (navigateur, ou
butineur, ou browser...)

Ce tutorial permet de faire une synthèse des différentes balises classiques du langage HTML:
Mise en page, mise en forme de texte, création de liens, insertion d'images... tout cela passe
par l'utilsation de balises!

II. Structure d'un document HTML: Balises et Attributs

II.1. Balises

Un document HTML a toujours la structure suivante:


<HTML> <-- balise de début de document HTML
<HEAD> <-- balise de début de l'en-tête

(contenu de l'en-tête)

</HEAD> <-- balise de fin de l'en-tête

1
<BODY> <-- balise de début du corps

(contenu du corps)

</BODY> <-- balise de fin du corps

</HTML> <-- balise de fin de document HTML

Le corps (BODY) est composé de la succession d'éléments, chacun de ces éléments étant
constitué de:

o Une balise de début d'élément, de la forme <BALISE>;


o Un contenu (qui peut lui-même contenir d'autres éléments)
o Une balise de fin d'élément, de la forme </BALISE> (parfois optionnelle).

Apprendre le langage HTML revient à connaître les différentes balises et savoir les utiliser.
Ces séances de TP ont pour but de vous faire utiliser de nouvelles balises progressivement.

Exemple de balises:

o <HEAD>...</HEAD> et <BODY>...</BODY> sont des balises!


o <P>...</P> : le contenu entre ces deux balises sera alors un paragraphe
o <B>...</B> : le contenu entre ces deux balises sera alors du texte en caractères gras

II.2. Attributs

A chaque balise sont associés un certain nombre d'attributs, qui caractérisent les propriétés
de cette balise. Jusqu'ici, une balise servait à rendre un seul effet (par exemple, la balise B
mettait en gras).

La majorité des balises HTML sont en fait capables de régler plusieurs effets à elles-seules.
Chaque effet est alors géré par un attribut. Les valeurs de ces attributs seront spécifiées
comme suit:

<BALISE attribut1="valeur1" attribut2="valeur2">


...
</BALISE>

Exemples: Quelques attributs de la balise <BODY>: bgcolor (permet de spécifier la couleur


de fond de votre page Web), fgcolor (permet de spécifier la couleur du texte de la page).
Dans le code HTML, ces attributs apparaîtront sous la forme:

<BODY bgcolor="red" fgcolor="black">


...
</BODY>

Remarques:

1. Ne pas spécifier la valeur d'un attribut revient à laisser le navigateur choisir le contenu
prévu par "défaut". Ainsi, si vous n'écrivez pas fgcolor=black dans votre page, ce
n'est pas bien grave... le noir étant la couleur de texte par défaut des Navigateurs.

2
2. Une faute courante consiste à mélanger les notions de balise et d'attribut. Par exemple,
il est affreux (!!!) d'écrire: <bgcolor=red>, car bgcolor est un attribut de la balise
BODY. Il faut écrire; <BODY bgcolor=red>

III. Mais où sont ces balises et ces attributs, en vrai?

Pour visualiser les balises HTML, ouvrez une fenêtre de navigateur. Dans le champ "Adresse"
de cette fenêtre, entrez quelques URL (Exemples: [Link]
[Link] Pour chacune de ces pages visitées, observez le code HTML
correspondant (par le menu Affichage/Source de la Page). Repérez les balises HTML,
HEAD, BODY et leur balise de fin. Vous êtes ici face à vos premiers codes HTML.

Remarque: Dans la suite de ce tutorial, tous les noms de menus et champs, ainsi que les copies
d'écran des pages à réaliser correspondent au navigateur Netscape (rien ne vous interdit
cependant d'utiliser Internet Explorer!)

3
MISE EN PAGE
I. Balise <HR>

La balise <HR> permet de tracer une séparation horizontale. Ses attributs sont donnés dans le
tableau suivant:

Balise <HR>
Nom de
Définition valeurs
l'attribut
permet de régler l'épaisseur du
SIZE entières, supérieures à 1
trait
permet de régler la largeur du en % (100% correspond à toute la largeur du
WIDTH
trait navigateur)
NOSHADE trait sans ombre sans valeur
permet de régler l'alignement
ALIGN left (par défaut), right, center
du trait

II. Balise <BR>

La balise <BR> permet de passer à la ligne. Attention, faire un simple retour-chariot ne sera
pas interprété par le navigateur comme un passage à la ligne!

III. Balise <P>

La balise <P> permet de mettre en forme un paragraphe. Ses attributs sont donnés dans le
tableau suivant:

Balise <P>
Nom de l'attribut Définition valeurs
ALIGN Réglage de l'alignement du paragraphe left, right, center, justify

4
MISE EN FORME DE TEXTE
I. Balises de titre: <H1>, <H2>...<H6>

Les balises <H1>...<H6> permettent de définir des niveaux de titre, du plus grand (niveau 1)
aux titres de niveaux inférieurs (niveaux 2 à 6). Leurs attributs sont donnés dans le tableau
suivant:

Balises <H1>...<H6>
Nom de l'attribut Définition valeurs
ALIGN Réglage de l'alignement du paragraphe left, right, center, justify

II. Balise <FONT>

La balise <FONT> permet de choisir la police de caractères du texte. Donnons quelques


attributs de cette balise:

Balise <FONT>
Nom de
Définition valeurs
l'attribut
Taille de la de 1 à 7 par valeurs entières (par défaut: 3); Il est possible
SIZE
police d'écrire aussi SIZE=+n, où n est compris entre 1 et 7.
une couleur standard (red, blue, green) ou un code hexadécimal
Couleur des
COLOR sous la forme #RRVVBB (Exemple: #FF0000 correspondra à
caractères
du rouge)
Tout nom de police: Comic Sans MS, Bookman, Times New
Police de
FACE Roman (par défaut).
caractères
Plus ou moins concluant selon l'âge du Navigateur...

III. Balises de mise en relief

Les balises de mise en relief sont de deux types: les éléments physiques (gras, italiques...) et
les éléments logiques (qui sont des combinaisons prédéfinies des éléments physiques). Les
balises les plus courantes sont données dans le tableau suivant:

Balise Elément... type de mise en relief


<B> physique mise en caractères gras
<I> physique mise en italiques

5
<S> physique caractères barrés
<U> physique caractères soulignés
<BLINK> physique caractères clignotant
<BIG> physique caractères plus gros
<SMALL> physique caractères plus petits
<EM> logique mise en emphase
<CITE> logique citation
<DFN> logique définition
<CODE> logique morceau de programme
<STRONG> logique mise en évidence forte
<KBD> logique texte à taper au clavier
<SUP> logique mise enexposant
<SUB> logique mise enindice
<PRE> logique ca ra ctè res préformatés

6
LIENS HYPERTEXTE
I. La balise A et ses attributs

Le langage HTML permet la navigation sur le Web, à l'aide de liens hypertextes. Un lien est
affecté à un morceau de texte, une image...Un clic sur ce lien permet de charger une autre
page Web. Un lien est, par défaut, écrit en bleu souligné, puis en rouge foncé souligné lorsque
le site pointé par ce lien a déjà été visité.

La balise permettant de créer un lien hypertexte est la balise <A>. La balise de fin est
obligatoire. Les attributs de cette balise sont donnés dans le tableau suivant:

Balise <A>
Nom de l'attribut Définition valeurs
HREF (obligé!) URL de la page Web à atteindre par ce lien une URL
nom de la position dans le fichier HTML une chaîne de
NAME (optionnel)
courant caractères
TARGET une chaîne de
la cible du lien
(optionnel) caractères

Dans le code HTML, un lien apparaît donc de la manière suivante:

• Code HTML: Pour aller sur Nomade cliquer <A


href="[Link]
• Allure de la page Web: Pour aller sur Nomade cliquer ici.

II. L'attribut HREF (obligatoire!!)

La valeur de l'attribut HREF de la balise A est une URL. En effet, un lien hypertexte peut
appeler une page Web disponible sur un site distant, une page Web disponible en local sur
votre disque, ou encore un endroit particulier (position) d'un fichier HTML (intéressant dans
le cas de fichiers très longs). Nous avons vu qu'une URL pouvait décrire toutes ces situations.
Donnons quelques exemples: dans notre exemple, le lien est écrit à l'intérieur d'un fichier,
appelé [Link], et ce lien pointe vers un autre fichier [Link].

• Si [Link] est une page Web d'un site distant: Dans ce cas l'URL doit
spécifier le protocole et l'adresse DNS (consulter le cours "Introduction à l'Internet"
pour la structure d'une URL).
Exemple: <A HREF="[Link]
• Si [Link] est une page Web en local sur votre disque: L'URL soit
spécifier le chemin complet à suivre pour atteindre ce fichier.
Exemple: <A HREF="chemin/[Link]">...</A>.

7
Comment spécifier le chemin?

On suppose que le fichier [Link] est contenu dans le répertoire Rep (voir
Figure).

o Si [Link] est dans le même répertoire Rep que [Link], seul


son nom suffit. Le chemin/nom_de_fichier s'écrit directement:
[Link]
o Si [Link] est contenu dans un sous-Répertoire SousRep1 de Rep, le
chemin/nom_de_fichier s'écrit: SousRep1/[Link]
o Si [Link] est contenu dans un sur-Répertoire SurRep2 de Rep, le
chemin/nom_de_fichier s'écrit: ../[Link] (la chaine ../ permet de
remonter l'arborescence d'un niveau).
o Si [Link] est contenu dans le sur-Répertoire SurRep3 de Rep, le
chemin/nom_de_fichier s'écrit: ../../SurRep3/[Link] (on remonte
l'arborescence de deux niveaux avant de rentrer dans le répertoire SousRep3).

• Lien vers une position de [Link]: : Dans le cas d'un fichier très long, il peut
être intéressant d'utiliser un lien pointant sur un autre endroit du même fichier. Dans
ce cas, cet endroit a dû être nommé à l'aide de l'attribut NAME de la balise A (voir
paragraphe I.1.3.). Le lien spécifie alors le nom de cette position, précédé du caractère
dièse #:
Exemple: <A HREF="#position">...</A>.
• Lien vers une position de [Link]: : Le lien spécifie alors le nom du fichier
(avec ou sans chemin complet) suivi du nom de la position dans ce fichier, précédé du
caractère dièse #:
Exemple: <A HREF="chemin/[Link]#position">...</A>.

III. L'attribut NAME

L'attribut NAME de la balise A permet de donner un nom à un endroit particulier d'un fichier
HTML. Ce nom pourra ensuite être appelé par un lien du même fichier ou d'un fichier

8
différent. La syntaxe est la suivante: <A NAME="position"> (la balise de fin est dans ce cas
optionnelle).

IV. L'attribut TARGET

Cet attribut spécifie le nom du cadre cible pour afficher le document défini par un lien. S'il est
utilisé avec l'élément <BASE> l'attribut indique alors le nom du cadre cible implicite (par
défaut) pour tous les liens du document courant.

9
TABLEAUX
I. Un réflexe à prendre avant de commencer un tableau

Dessiner un tableau en HTML n'est pas très facile; en revanche, il est très facile de se perdre
dans le nombre de colonnes et de lignes de votre tableau. DONC: pour vous prémunir de cette
situation, il est souhaitable, avant de commencer à écrire le code HTML, de bien repérer sur
papier la structure de votre tableau: nombre de lignes, nombre de colonnes, cellules
fusionnées...Après avoir fait ce travail seulement, vous pouvez commencer à écrire le code.

Exemple:Combien de lignes - de colonnes - de cellules fusionnées constituent ce tableau?

Date Matière Salle


matin HTML A
Lundi
après-midi ANGLAIS B

Ceux qui ont trouvé :

• Le tableau contient 3 lignes, 4 colonnes;


• Une cellule (1ère ligne) regroupe 2 colonnes;
• Une cellule (1ère colonne) regroupe deux lignes.

... Ceux-là donc peuvent commencer à écrire le code HTML!

II. Les balises TABLE, TR, TD, TH, CAPTION

L'insertion d'un tableau se fait à l'aide de la balise <TABLE>. La balise de fin est obligatoire.
Les attributs de cette balise sont donnés dans le tableau suivant:

Balise <TABLE>
Nom de
Définition valeurs
l'attribut
en % (100% équivaut à la pleine
WIDTH largeur occupée par le tableau
largeur)
0 (pas de bordure) puis 1,
BORDER Taille des bordures de cellules
2...(valeurs entières)
CELLSPACING Espacement inter-cellules en pixels
Distance entre le bord de cellule et le
CELLPADDING en pixels
contenu de la cellule

10
La balise CAPTION permet de donner une légende à un tableau. Son attribut est
ALIGN=top|bottom, suivant que l'on voudra placer la légende au-dessus ou en-dessous du
tableau. La balise de fin est obligatoire.

A l'intérieur de la balise TABLE, un élément <TR>...</TR> (Table Row) définit une ligne.

A l'intérieur de la balise TR, un élément <TD>...</TD> (Table Data) définit une colonne (i.e.
une cellule). Lorsque ces cellules sont celles de la première ligne, il est possible de remplacer
la balise <TD>...</TD> par <TH>...</TH> (Table Header): le contenu de la cellule sera alors
mis en gras.

Ainsi, le code correspondant à un tableau 2 lignes-3 colonnes sera donc:

<TABLE>
<TR>
<TD>contenu de ligne 1, colonne 1
<TD>contenu de ligne 1, colonne 2
<TD>contenu de ligne 1, colonne 3
</TR>
<TR>
<TD>contenu de ligne 2, colonne 1
<TD>contenu de ligne 2, colonne 2
<TD>contenu de ligne 2, colonne 3
</TR>
</TABLE>

Les attributs des balises TR, TD et TH sont donnés dans le tableau suivant:

Balises <TR>, <TD> et <TH>


Nom de
Définition valeurs
l'attribut
définit l'alignement horizontal du contenu dans la
ALIGN left, center, right
cellule
définit l'alignement vertical du contenu dans la
VALIGN top, middletop, baseline
cellule
nombre entier supérieur
COLSPAN nombre de colonnes occupées par la cellule
à2
nombre entier supérieur
ROWSPAN nombre de lignes occupées par la cellule
à2

11
INSERTION D'IMAGES
I. La balise IMG et ses attributs

L'insertion d'une image se fait à l'aide de la balise <IMG>. La balise de fin est interdite. Les
attributs de cette balise sont donnés dans le tableau suivant:

Balise <IMG>
Nom de
Définition valeurs
l'attribut
un nom de fichier, avec
SRC Fichier source de l'image son chemin d'accès
complet
Alignement de l'image par rapport au texte qui bottom, middle, top; left,
ALIGN
l'entoure right
un petit descriptif de l'image (qui remplacera
ALT l'image dans le cas d'un navigateur qui ne charge une chaîne de caractères
pas les images)
Taille du trait d'encadrement lorsqu'un lien est placé
BORDER 0 (pas de trait) puis 1, 2...
sur l'image
HEIGHT hauteur de l'image pixels
WIDTH largeur de l'image pixels
attribut utilisé pour rendre une image cliquable (cf
USEMAP #nom de map
chapitre sur les images réactives)

II. Petit rappel sur l'adressage (très important!)

Pour insérer une image, il est nécessaire, dans l'attribut SRC de la balise IMG, de donner le
nom de l'image ainsi que son chemin d'accès complet.
Exemple: <IMG src="chemin/nom">
La spécification de ce chemin complet se fait de la même manière que pour un lien (cf
paragraphe I.1.2). Reprenons les mêmes notations: vous devez insérer l'image [Link]
dans le fichier fichier_courant.html, enregistré dans le répertoire Rep (voir Figure).

12
• Si [Link] est dans le même répertoire Rep que fichier_courant.html, seul
son nom suffit. Le chemin/nom_de_fichier s'écrit directement: [Link]
• Si [Link] est contenu dans un sous-Répertoire SousRep1 de Rep, le
chemin/nom_de_fichier s'écrit: SousRep1/[Link]
• Si [Link] est contenu dans un sur-Répertoire SurRep2 de Rep, le
chemin/nom_de_fichier s'écrit: ../[Link] (la chaine ../ permet de remonter
l'arborescence d'un niveau).
• Si [Link] est contenu dans le sur-Répertoire SurRep3 de Rep, le
chemin/nom_de_fichier s'écrit: ../../SurRep3/[Link] (on remonte
l'arborescence de deux niveaux avant de rentrer dans le répertoire SousRep3).

Bien comprendre ce qu'est un sous-répertoire, un sur-répertoire, un niveau de


l'arborescence....

III. Lien sur une image

Il est possible de mettre un lien sur une image, i.e. un clic de souris sur cette image appelle
une autre page Web... en encadrant la balise IMG d'une balise de lien A !

13
IMAGES RÉACTIVES
I. Rappel sur les insertions d'images

Assurez-vous de bien vous rappeler la méthode d'insertion d'images. Etes-vous au clair avec
les problèmes de chemin d'accès à un fichier Image? Vous rappelez-vous de la balise
d'insertion d'image et de ses attributs? Tout cela est indispensable pour effectuer cette partie.
N'hésitez donc pas, s'il vous reste des doutes, à prendre 5 minutes pour retourner lire ce qui
concerne les insertions d'images.

II. Qu'est-ce qu'une image réactive?

Une image réactive est une image qui interagit avec l'utilisateur: lorsque votre souris passe sur
cette image, sa position sur l'image entraîne plusieurs actions possibles: changement de
couleur d'un élément de la page, appel d'une autre page Web...Dans cette partie, nous allons
générer des images réactives qui, lorsqu'on clique sur une région de l'image, appellent d'autres
page Web.

III. Balises MAP, AREA

La création d'une image réactive se fait en plusieurs étapes (cf. Figure):

1. Insertion d'une image dans un document HTML: Cette étape correspond au travail
que nous avons effectué dans le chapitre précédent. Si l'image s'appelle [Link]
et qu'elle est située dans le même répertoire que le fichier_courant.html dans
lequel elle est insérée, le code HTML correspondant sera: <IMG
SRC="[Link]">.
2. Création d'un maillage: A l'intérieur de ce maillage, qui a la dimension de l'image,
sont définies différentes régions; le maillage est créé grâce à la balise <MAP>, et les
régions grâce à la balise <AREA>. Il est indispensable de donner un nom à ce maillage,
par exemple monMaillage.
3. Superposition du maillage ainsi créé sur l'image: les différentes régions du maillage
deviennent des partitions de l'image, chacune de ces partitions engendrant une action

14
particulière lors d'un clic de souris. Pratiquement, la superposition se fait en donnant le
nom du maillage à l'image, par le biais d'un nouvel attribut de la balise IMG: l'attribut
USEMAP: ainsi, le code HTML donné ci-dessus devient <IMG SRC="[Link]"
USEMAP="#monMaillage">.

Il nous reste à définir comment construire le maillage et ses régions. Cette définition se fait en
utilisant les attributs des balises MAP (balise de fin obligatoire) et AREA (balise de fin
interdite). Ces attributs sont donnés dans les deux tableaux suivants:

Balise <MAP>
Nom de l'attribut Définition valeurs
NAME Nom du maillage (obligatoire) chaîne de caractères

Balise <AREA>
Nom de
Définition valeurs
l'attribut
• RECT (rectangle)
• CIRCLE (cercle)
SHAPE Forme de la région • POLY (polygone)
• DEFAULT (tout le reste)

• Rectangle:
Xhautgauche,Yhautgauche,Xbasdroit,Ybasdroit.
Coordonnées des points • Cercle: Xcentre,Ycentre, Rayon.
COORDS
délimitant la région (en pixels) • Polygone: liste des X,Y des points
du polygone

Lien de destination lors du clic


HREF URL
sur la région

Exemple:

<!INSERTION DE L'IMAGE ET LIEN AVEC LE MAILLAGE>


<IMG src="[Link]" usemap="#monMaillage">

<!CREATION DU MAILLAGE ET DE SES DEUX REGIONS RECTANGULAIRES>


<MAP name="monMaillage">
<AREA shape="RECT" coords="20,20,48,48"
href="fichier_autre.html">
<AREA shape="RECT" coords="48,20,82,48"
href="fichier_autre2.html">
</MAP>

15
DOCUMENTS MULTI-CADRES
Initialement, les sites Web se présentaient sous forme de pages simples, qui s'enchainaient les
unes après les autres. Avec l'évolution du langage HTML, il est désormais possible de
présenter les sites de façon plus conviviale, à base de documents multi-cadres. Le principe est
le suivant: la page que vous visitez est composée de plusieurs parties, certaines fixes (par
exemple le plan du site (menu), un logo), et d'autres ont des contenus variables.

La structure d'un document multicadre est la suivante: Le fichier HTML qui constitue la page
d'accueil est constituée d'une subdivision en plusieurs cadres (ou frames), chaque cadre
possédant son code source HTML propre. Cette présentation possède le double intérêt de
rendre la visite d'un site plus facile (on ne se "perd" pas entre les différentes pages"), et de
faciliter la modification d'une seule partie du site (pour modifier le site, il suffit de modifier le
code source du cadre correspondant).

I. La page d'accueil: subdivision par balise FRAMESET

Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames.
Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La
subdivision se fait à l'aide de la balise <FRAMESET>...</FRAMESET>, qui remplace la balise
<BODY>...</BODY>, et précise la subdivision en termes de nombre de colonnes et nombre de
lignes. Les attributs de cette balise sont présentés dans le tableau suivant:

Balise <FRAMESET>
Nom de
Définition valeurs
l'attribut
Subdivision en plusieurs lignes (ou soit en pixels, soit en %.
ROWS
bandes horizontales)
Exemples:

• 25%,75%
Subdivision en plusieurs colonnes • 158,* (l'étoile signifiant "le
COLS complément à 158 pixels)
(ou bandes verticales)
• 25%,2* (2* signifiant "deux autres
cadres de tailles égales)

Exemple:
<FRAMESET rows="25%,75%"> <-- subdivision en deux cadres
<FRAME> <-- définition du premier cadre
<FRAME> <-- définition du second cadre
</FRAMESET>

II. Les cadres : balise FRAME

16
Chacun des cadres est défini ensuite à l'aide de la balise <FRAME>...</FRAME>, (balise de fin
optionnelle). Les attributs de cette balise sont présentés dans le tableau suivant:

Balise <FRAME>
Nom de l'attribut Définition valeurs
SRC la source HTML du contenu de ce cadre une URL
Le nom de ce cadre (important! voir ci-dessous,
Name chaîne de caractères
paragraphe III.1.3.)
YES, NO (par défaut
SCROLLING Autorise ou non une barre de défilement
YES)
Si spécifié, interdit le redimensionnement du
NORESIZE sans valeur
cadre par l'utilisateur
0 (pas de bordure) ou 1
FRAMEBORDER Présence ou non d'une bordure
(bordure)
Espace horizontal entre le bord du cadre et le
MARGINWIDTH en pixels
contenu du cadre
Espace vertical entre le bord du cadre et le
MARGINHEIGHT en pixels
contenu du cadre

III. Cadre de destination et nom de cadre

Votre document multicadre peut être vu comme la juxtaposition de plusieurs pages Web dans
le même navigateur. Un problème se pose alors dans la définition des liens hypertextes tels
que nous les avons définis avant: Lors d'un clic de souris sur un hyperlien, l'attribut HREF de la
balise <A> spécifie quel document html charger...mais ne spécifie pas dans quel cadre le
charger!!. Avec un document multicadres, un lien doit à présent donner deux informations:

1. Le nom du fichier HTML source: grâce à l'attribut HREF de la balise <A>;


2. La destination de ce fichier source. Ceci se fait grâce à l'attribut target de la balise
<A>. La valeur de cet attribut doit correspondre au nom du cadre de destination
(attribut name de la balise <FRAME> correspondante).
Exemple:

<A href="fichier_autre.html target="cadrePrincipal">

A condition d'avoir déclaré dans la page d'accueil un cadre portant ce nom:

<FRAME src="[Link] name="cadrePrincipal">

l'attribut target de la balise <A> contient donc le nom du cadre de destination. Il peut aussi
contenir d'autres noms, prédéfinis, comme le montre le tableau ci-dessous:

Contenu de
Action résultante
target
_blank ouvre une nouvelle fenêtre de navigateur

17
affiche le document en pleine page du navigateur (et
_top
supprime donc la subdivision en cadres)
_self affiche le document dans le cadre courant
_parent affiche le document dans le cadre englobant

18
LISTES D'ÉLÉMENTS
I. Listes ordonnées

Il est possible, avec le langage HTML, de lister des éléments, de façon ordonnée. Les
éléments seront alors numérotés, soit par des chiffres (1, 2, 3...) soit par des lettres majucules
(A, B, C...) ou minuscules (a, b, c...). Exemples:

A. élément numéro 1
1. élément numéro 1
B. élément numéro 2
2. élément numéro 2
C. élément numéro 3

La balise permettant d'écrire une liste est la balise <OL> (O pour "ordered") (balise de fin
obligatoire). Le choix du type de numérotation se fait grâce à l'attribut TYPE de la balise OL,
selon le tableau suivant:

Balise <OL>
Nom de
Définition valeurs
l'attribut
Type de numérotation des 1 (pour une numérotation 1, 2, 3...), A (pour
TYPE
éléments de la liste A, B, C...), a (pour a, b, c...)

A l'intérieur des balises ouvrante et fermante, chaque élément (item) de la liste commence par
une balise <LI> (balise de fin optionnelle). La structure HTML d'une liste ordonnée est donc
la suivante:

<OL TYPE="valeur">
<LI> un élément de la liste
<LI> un autre élément de la liste
</OL>

II. Listes non-ordonnées

Le principe est le même que les listes ordonnées; la balise permettant d'écrire une liste non-
ordonnée est la balise <UL> (U pour "Unordered") (balise de fin obligatoire). Dans ce type de
liste, les items de liste ne sont plus numérotés. Ils sont précédés d'un symbole, défini par
l'attribut TYPE de la balise UL, selon le tableau suivant:

Balise <UL>
Nom de l'attribut Définition valeurs
TYPE Type de symbole de la liste DISC, SQUARE, CIRCLE

19
FORMULAIRES
I. Qu'est-ce qu'un formulaire?

Un formulaire intégré dans une page Web permet une interaction entre l'internaute et la
personne qui a publié la page. Il peut s'agir d'enquête par Internet, de commande de pizza, de
réservations de places de spectacles...

Un formulaire contient des éléments appelés contrôles (champs de textes, boutons, boîtes à
cocher, menus...). L'utilisateur change donc la valeur de ces contrôles avant d'envoyer son
formulaire. Les informations contenues dans les différents champs sont alors récupérées et
traitées par un logiciel (appelé script CGI).

Un formulaire se compose d'une balise <FORM>...</FORM>. Le contenu de cette balise est une
succession d'éléments, définis eux-aussi par des balises, chaque balise caractérisant un type de
contrôle. Enfin, les différents contrôles peuvent être disposés en tableau.

II. Balise FORM

L'élément FORM est celui qui englobe tout le formulaire. Ses attributs ont pour tâche de
contrôler comment et où seront envoyées les données du formulaire. Ne jamais emboîter des
balises FORM!!!

Il existe deux méthodes d'envoi des données:

• Par la méthode GET, les données (c.à.d le nom du champ et son contenu) sont
concaténées en une unique chaine de caractères qui est ajoutée à l'URL (regarder le
contenu du Champ "Location" de votre navigateur lorsque vous envoyez un
formulaire). La taille de l'envoi est donc limitée;
• Par la méthode POST, la chaine de carcatères est envoyée par le biais de séquences
du protocole HTTP spéciales.

Les attributs de la balise FORM (balise de fin obligatoire) sont donnés dans le tableau ci-après:

Balise <FORM>
Nom de
Définition valeurs
l'attribut
ACTION Adresse du script chargé de traiter les données URL
METHOD Méthode d'envoi des données GET, POST
Code Javascript par
ONSUBMIT Un script à exécuter lors de l'envoi du formulaire
exemple
Un script à exécuter lors de la remise à zéro du Code Javascript par
ONRESET
formulaire exemple

III. Balise INPUT

20
La balise <INPUT>...</INPUT> permet de créer un grand nombre de contrôles. Quelques-uns
de ses attributs sont donnés dans le tableau ci-après:

Balise <INPUT>
Nom de
Définition valeurs
l'attribut
• Text (un champ de saisie de
texte)
• Password (un champ pour
saisir un mot de passe)
• Checkbox (une boîte à cocher)
TYPE Type de contrôle • Radio (boutons radio exclusifs)
• Submit (bouton d'envoi de
formulaires)
• Reset (bouton de remise à zéro
de formulaires)

Nom du contrôle, obligatoire (sauf


NAME chaine de caractères
pour submit et reset)
• Text: Initialise le contenu;
Valeur affectée au contrôle, • Checkbox et Radio: indique la
VALUE
obligatoire pour radio et checkbox valeur du bouton coché.

Forcé le contrôle (Radio,


CHECKED sans valeur
Checkbox) à être coché par défaut
Longueur du champ de saisie (pour
SIZE nombre entier
text et password
Nombre maximal de caractères
MAXLENGTH nombre entier
autorisé (pour text et password)

IV. Balise SELECT

Une balise select permet de créer un menu déroulant, ou une liste de sélection (à choix forcé
ou multiple). La balise de fin est obligatoire. Chaque item de la liste est ensuite défini à l'aide
de balises OPTION (balise de fin facultative), qui ont les mêmes attributs que INPUT.

Les attributs de la balise <OPTION>...</OPTION> sont présentés dans le tableau ci-après:

Balise <SELECT>
Nom de
Définition valeurs
l'attribut
Nom donné à la liste. Ce nom est passé au programme de chaîne de
NAME
traitement: obligatoire! caractères

21
MULTIPLE Liste à choix multiple quand spécifié, à choix forcé sinon sans valeur
SIZE Nombre d'options visibles simultanément nombre entier

Exemple:
<SELECT Name="monMenu" MULTIPLE>
<OPTION> élément 1 de la liste</OPTION>
<OPTION> élément 2 de la liste</OPTION>
<OPTION> élément 3 de la liste</OPTION>
</SELECT>

V. Balise TEXTAREA

Cette balise permet de créer une zone de texte. Trois attributs obligatoires: COLS (nombre de
colonnes visibles), ROWS (nombre de lignes visibles), NAME bien sûr! Balise de fin obligatoire!

22
FEUILLES DE STYLE
I. Qu'est-ce que les feuilles de style?

Nous avons vu dans le chapitre de mise en forme de texte que l'allure des niveaux de titre
(couleur, taille, alignement) pouvait être modifiée à l'intérieur de la balise de titre. De même,
il était possible de changer la couleur de fond d'écran, l'image de fond. Mais toutes ces
interventions se faisaient à l'intérieur du fichier source HTML. Si l'on désire harmoniser les
titres, il faudra ainsi parcourir tous les fichiers sources pour modifier tel ou tel attribut. Depuis
la version 4 du langage HTML, il est possible de créer des feuilles de style, qui ont pour tâche
de regrouper les informations de mise en page des documents qui s'y réfèrent. Ainsi, plusieurs
documents HTML peuvent appeler la même feuille de style, et la modification d'un attribut ne
se fera que dans cette feuille de style.

Attention cependant, la notion de feuille de style étant relativement récente, celles-ci ne


fonctionnent pas sur des navigateurs trop anciens.

II. Que modifier dans les fichiers HTML?

Il suffit dans le fichier HTML de spécifier la location et le nom de la feuille de style: Nous
avions vu que la seule balise figurant dans l'en-tête était la balise <title>...</title>. En
réalité, d'autres balises peuvent figurer dans l'en-tête, et par exemple la balise <LINK>, qui
permet de spécifier le nom de la feuille de style (extension ".css", pour "Cascading Style
Sheet").

Exemple:
<HEAD>
<TITLE>Ma page Web</TITLE>
<LINK rel="stylesheet" HREF="[Link]"
TYPE="text/css">
</HEAD>

III. Comment écrire une feuille de style?

Une feuille de style est un simple fichier texte, enregistré avec l'extension ".css". Ce fichier
est constituée d'une série de lignes, chaque ligne correspondant à la définition des attributs
d'une balise. La syntaxe est la suivante:

BALISE { ATTRIBUT1:valeur1; ATTRIBUT2:valeur2...}

Exemple:
BODY {background-color:blue}
H1 {font-style:italic; font-family:sans-serif}
EM {font-style:italic}
EM EM {font-style:roman}
Quelques remarques:

23
• Il est possible d'imbriquer les styles: dans l'exemple précédent, une balise d'emphase
(EM) mettra les caractères en italiques, mais l'imbrication de deux balises EM forcera
à une police Roman.
• La balise SPAN permet de créer la propre mise en forme d'un mot ou d'un ensemble de
mots. La définition de la balise se fera dans la feuille de style, sous la forme:
•
• SPAN.classe1 { ATTRIBUT1:valeur1; ATTRIBUT2:valeur2...}
• SPAN.classe2 { ATTRIBUT1:valeur3...}

et son utilisation dans le fichier HTML:

Voici un exemple d'utilisation de la <SPAN


class="classe1">première</SPAN> classe de SPAN et de la <SPAN
class="classe2">deuxième</SPAN> classe.

• La balise DIV permet de créer la propre mise en forme d'un paragraphe. Elle s'utilise
comme SPAN.

IV. Tableau de quelques propriétés

(Tableau écrit par Gilles Maire - "Un nouveau Guide Internet - UNGI )
Nom Description Définition Exemple Remarque
gill et
helvetic sont
les noms des
polices,
nom et sans-serif est
BODY {font-family: gill, helvetica,
font-family famille de la [[<nom> | <famille>],*] la famille.
sans-serif }
police Si un nom
comprend
des espaces
il doit être
coté.
style normal,
défaut :
font-style italique et normal | italic | oblique H1, H2, H3{font-style: italic }
normal
oblique
style petites
défaut :
font-variant polices ou normal | small-caps H3 { font-variant: small-caps }
normal
normal
normal | bold | bolder | défaut :
Epaisseur de lighter | 100 | 200 | 300 | normal
font-weight EM{font-weight:bolder }
la police 400 | 500 | 600 | 700 | Souvent des
800 | 900 noms

24
logiques
remplacent
les nombres
donnés ici
< xx-small | x-small |
P { font-size: 12pt; }
small | medium | large |
BLOCKQUOTE {font-size: larger
Taille de la x-large | xx-large> | < défaut :
font-size }
police larger | smaller> medium
EM { font-size:150%}
|<taille> |
EM { font-size:1.5em}
<pourcentage%>
P { font: 12pt/14pt sans-serif }
Permet de P { font: 80% sans-serif }
[ <font-style> || <font- défaut :
regrouper les P { font: x-large/110% "new century
variant> || <font- dépend de la
différentes schoolbook", serif }
font weight> ]? <font-size> configuration
propriétés de P { font: bold italic large Palatino,
[ / <line-height> ]? du
polices en serif }
<font-family> navigateur
une ligne P { font: normal small-caps
120%/120% fantasy }
P { color: red }
couleur d'un défaut :
color <couleur> EM{color:rgb(255,0,0)}
texte black
EM { color: #f00 }
background- couleur du défaut :
<color> | transparent H1 { background-color: #F00 }
color fond d'écran transparent
background- image du BODY { background-image: défaut :
<url> | none
image fond d'écran url([Link])} none
repeat-x
façon de permet de
répéter BODY { répéter de
background- repeat | repeat-x | repeat-
l'image du background-image: url([Link]); façon
repeat y | no-repeat
fond de background-repeat: repeat-y; } horizontale
l'écran défaut :
repeat
permet de
spécifier si BODY { background: red
background- l'image reste url([Link]); défaut :
scroll | fixed
attachment fixe avec les background-repeat: repeat-y; scroll
déplacements fixed;}
d'écran
spécifie la
position de
l'image de
[<pourcentage> | BODY { background:
fond par
background- <longueur>]{1,2} | [top url([Link] défaut :
rapport au
position | center | bottom] || [left | right top } 0%,0%
coin
center | right]
supérieur
gauche de la
fenêtre

25
permet de <background-color> ||
regrouper les <background-image> ||
différentes <background-repeat> || P { background: url([Link]) green défaut :
background
propriétés de <background- 50% repeat fixed } aucun
fond d'écran attachment> ||
en une ligne <background-position>
définit la
word- distance défaut :
normal | <longueur> H1 { word-spacing: 0.4em}
spacing d'espacement normal
entre mots
définit la
distance
letter- normal | <lengTH défaut :
d'espacement EM { letter-spacing: 0.1em }
spacing bgcolor=#FFFFEE> normal
entre
caractères
permet de
spécifier si le
none | [ underline ||
texte est
text- overline || line-TH A:link, A:visited, A:active { text- défaut :
souligné,
decoration bgcolor=#FFFFEErough decoration: none } none
surligné,
|| blink ]
barré ou
clignotant
spécifie
l'alignement baseline | sub | super |
défaut :
vertical- vertical du top | text-top | middle |
EM {vertical-align: sub} baseline
align texte par bottom | text-bottom |
rapport au <pourcentage>
reste du texte
permet de
forcer les
caractères en
majuscule
(uppercase)
ou en
text- capitalize | uppercase | défaut :
minuscule H2 { text-transform: uppercase }
transform lowercase | none none
(lowercase);
capitalize
force en
majuscule le
premier
caractère
permet de
placer le défaut :
texte à dépend de la
left | right | center |
text-align gauche, à P { text-align:justify} configuration
justify
droite, de le du
centrer ou de navigateur
le justifier.

26
valeur de
l'indentation
<longueur> |
text-indent avant la P { text-indent: 3em } défaut : 0
<pourcentage>
première
ligne
valeur entre normal | <nombre> |
DIV { line-height: 1.2; font-size: défaut :
line-height deux lignes <longueur>
10pt } normal
adjacentes |<pourcentage>
valeur de la <longueur> |
margin-top H1 { margin-top: 3px } défaut : auto
marge haute <pourcentage> | auto
margin- valeur de la <longueur> | H1 { margin-rigTH
défaut : auto
right marge droite <pourcentage> | auto bgcolor=#FFFFEE: 3px }
margin- valeur de la <longueur> |
H1 { margin-bottom: 3px } défaut : auto
bottom marge basse <pourcentage> | auto
valeur de la <longueur> |
margin-left H1 { margin-left: 3px } défaut : auto
marge gauche <pourcentage> | auto
défaut :
auto
Les valeurs
permet de manquantes
regrouper les sont celles
[ <longueur> | BODY { margin: 1em 2em 3em } /*
différentes définies sur
margin <pourcentage> | auto top=1em, right=2em, bottom=3em,
propriétés de le coté
]{1,4} left=2em */
marge en une opposé
ligne Une seule
valeur est
applicable à
tous
valeur de
<longueur> |
padding-top remplissage H1 { padding-top: 3px } défaut : 0
<pourcentage>
haut
valeur de
padding- <longueur> |
remplissage H1 { padding-right: 3px } défaut : 0
right <pourcentage>
droit
valeur de
padding- <longueur> |
remplissage H1 { padding-bottom: 3px } défaut : 0
bottom <pourcentage>
bas
valeur de
<longueur> |
padding-left remplissage H1 { padding-left: 3px } défaut : 0
<pourcentage>
gauche
permet de défaut : 0
regrouper les top, right,
différentes [<longueur> | bottom et
padding H1 { padding: 1em 2em }
propriétés de <pourcentage>]{1,4} left
padding en Les valeurs
une ligne manquantes

27
sont celles
définies sur
le coté
opposé
Une seule
valeur est
applicable à
tous
TH
donne bgcolor=#FFFFEEin |
border-top- défaut :
l'épaisseur du medium | TH H1 { border-top-width: 0.5em }
width medium
bord haut bgcolor=#FFFFEEick |
<longueur>
TH
donne bgcolor=#FFFFEEin |
border- H1 { border-rigTH défaut :
l'épaisseur du medium | TH
right-width bgcolor=#FFFFEE-width: 0.5em } medium
bord droit bgcolor=#FFFFEEick |
<longueur>
TH
border- donne bgcolor=#FFFFEEin |
défaut :
bottom- l'épaisseur du medium | TH H1 { border-bottom-width: 0.5em }
medium
width bord droit bgcolor=#FFFFEEick |
<longueur>
TH
donne bgcolor=#FFFFEEin |
border-left- défaut :
l'épaisseur du medium | TH H1 { border-left-width: 0.5em }
width medium
bord droit bgcolor=#FFFFEEick |
<longueur>
défaut :
medium
Les valeurs
permet de manquantes
[TH
regrouper les sont celles
bgcolor=#FFFFEEin |
border- différentes H1 { border-width: TH définies sur
medium | TH
width propriétés de bgcolor=#FFFFEEin } le coté
bgcolor=#FFFFEEick |
border-width opposé
<longueur>]{1,4}
en une ligne Une seule
valeur est
applicable à
tous
donne la
défaut :
border-color couleur des <couleur>{1,4} H1 { border-color: red }
black
bordures
permet de
donner le none | dotted | dashed |
défaut :
border-style style de la solid | double | groove | #xy34 { border-style: solid dotted }
none
ligne de ridge | inset | outset
remplissage

28
de la bordure
regroupe
défaut
toutes les
:aucune
propriétés des
<border-top-width> || les valeurs
bordures H1 { border-top: TH
border-top <border-style> || omises sont
hautes : bgcolor=#FFFFEEick }
<couleur> égales aux
épaisseur,
valeurs par
style et
défaut
couleur
regroupe
défaut
toutes les
:aucune
propriétés des
<border-top-width> || les valeurs
bordures
border-right <border-style> || H1 { border-right: 1em } omises sont
droites:
<couleur> égales aux
épaisseur,
valeurs par
style et
défaut
couleur
regroupe
défaut
toutes les
:aucune
propriétés des
<border-top-width> || les valeurs
border- bordures H1 { border-bottom: TH
<border-style> || omises sont
bottom basses: bgcolor=#FFFFEEick solid red }
<couleur> égales aux
épaisseur,
valeurs par
style et
défaut
couleur
regroupe
défaut
toutes les
:aucune
propriétés des
<border-top-width> || les valeurs
bordures H1 { border-left: TH
border-left <border-style> || omises sont
gauches: bgcolor=#FFFFEEick solid red }
<couleur> égales aux
épaisseur,
valeurs par
style et
défaut
couleur
défaut
:aucune
regroupe
<border-width> ||
toutes les
border <border-style> || P { border: solid red } toutes les
propriétés des
<color> bordures
bordures
sont
identiques
permet de
donner la
<longueur> |
width largeur d'un [Link] { width: 100px } défaut : auto
<pourcentage> | auto
élément texte
ou image
permet de
height donner la <longueur> | auto [Link] { height: 100px } défaut : auto
longueur d'un

29
élément texte
ou image
permet de
cadrer [Link] {
l'élément là float: left; défaut :
float left | right | none
où il apparaît margin-left: 0; none
ou à gauche }
ou à droite
permet à un
élément
none | left | right | boTH défaut :
clear d'être cadré H1 { clear: left }
bgcolor=#FFFFEE none
sur le côté
spécifié
spécifie où
block | inline | list-item | défaut :
display l'élément est P { display: block }
none none
affiché
type d'espace défaut :
white-space normal | pre | nowrap PRE { white-space: pre }
blanc normal
définit le type disc | circle | square |
de decimal | lower-roman |
list-style- OL { list-style-type: lower-roman }
numérotation, upper-roman | lower- défaut : disc
type /* i ii iii iv v etc. */
de bullet dans alpha | upper-alpha |
les listes none
permet de
remplacer les
types de
list-style- défaut :
numérotation <url> | none UL { list-style-image: url([Link]) }
image none
de list-style-
type par une
image
spécifie si les
bullets ou
numérotation
list-style- ou images défaut :
inside | outside UL { list-style-position: outside }
position sont à outside
l'intérieur ou
à l'extérieur
du texte.
(disc | circle | square |
permet de
decimal | lower-roman |
regrouper les
upper-roman | lower- défaut :
list-style différentes UL { list-style: upper-roman inside }
alpha | upper-alpha | aucune
catégories de
none) ||<url> | none ||
list-style
inside | outside

30
31

Vous aimerez peut-être aussi