Internet

HTML & DHTML

Par Th. COSNUAU

 

 

 

 

 

But du document

Création de sites Web dynamiques et interactifs

 

 

Le langage HTML

Le HTML (HyperText Markup Language) est le langage utilisé pour créer les documents (pages Web) reconnus par les navigateurs Internet (browser).

Contenu dans un simple fichier ASCII, il permet d’effectuer les mises en formes classiques (alignement des paragraphes, polices de caractères, choix des couleurs, ...) offertes par les puissants traitements de textes du marchés.

Le HTML peut également accueillir des images, des portions de codes issus d'autres langages voire des composants binaires afin d'enrichir le contenu des pages présentées.

Le HTML autorise d’autre part la définition de liens dits hypertextes entre des documents locaux ou distants ; c’est cette fonctionnalité qui permet de "naviguer" d’un document à un autre, par simple clic sur le lien choisi.

Indépendant de toute plate-forme, le document HTML sera lu sur n’importe quelle machine pourvue d’un navigateur adéquat.

 

Un fichier HTML est un fichier texte ASCII 7 bits, c'est à dire sans caractères accentués.

Pour exprimer un caractère accentué, il faut entrer une combinaison composée du caractère &, du code du caractère proprement dit et d’un ; (point virgule). Le code du caractère peut être exprimé soit par son code ASCII, précédé du signe #, soit par un mot clé prédéfini du HTML.

Ainsi é s’écrit é ou é.

Voici une liste des principaux caractères spéciaux rencontrés dans la langue française :

Caractère

Code HTML

Code ASCII

à

à

à

é

é

é

è

è

è

ê

ê

ê

ù

ù

ù

De même, les caractères spéciaux (courants en informatique) doivent être exprimés par des codes appropriés :

Caractère

Code HTML

>

>

<

&lt;

&

&amp;

"

&quot;

 

Les retours chariots (passage à la ligne) sont ignorés par les navigateurs ; les sauts de ligne, sauf indication contraire, se font en fonction de la largeur de la fenêtre d'affichage.

De même, une suite de plusieurs espaces (blancs) et les tabulations ne seront pas prises en compte ; un espace insécable peut être inséré à l'aide du codage &nbsp;.

 

Afin de distinguer les indications de mise en forme et le texte à afficher, le HTML utilise des balises (aussi appelées marqueurs ou tags) indiquées entre les signes < et >.

Voici par exemple, le code d'une page HTML très simple :

<HTML>
<HEAD>
<TITLE> Ma page HTML </TITLE>
</HEAD>
<BODY>
Bienvenue dans le monde merveilleux du HTML !

</BODY>
</HTML>

<HTML>, <HEAD>, <TITLE> et <BODY> sont des balises ouvrantes tandis que </HTML>, </HEAD>, </TITLE> et </BODY> sont des balises fermantes ; la plupart du temps en effet, les balises fonctionnent par paires afin de préciser la portée de leurs actions. Une balises fermante est toujours composée par le nom de la balise ouvrante précédé du caractère /.

Il est parfois possible d'ajouter des attributs afin de préciser l'action d'une balise ; la balise prend alors la forme :

<Balise attribut_1 = valeur attribut_2 = valeur>

 

Par exemple

<BODY BGCOLOR="#00FF00">

indique que le fond du document est d'une certaine couleur (BGCOLOR = background color)

Les balises ne sont pas sensibles aux différences majuscule/minuscule (case insensitive); il est donc équivalent, par exemple, d'écrire <HTML> et <html>.

 

La rédaction d'une page HTML peut se faire à l'aide d'un simple éditeur de texte ou bien en utilisant un outil adapté qui se chargera d'insérer les balises à votre place.

Dans la pratique, on utilise souvent les deux méthodes afin d'affiner le code de la page et d'insérer des balises non disponibles via l'outil.

 

L'exemple précèdent utilise les balises minimales pour la création d'un document

HTML :

<HTML> ... </HTML>

début/fin d'un document de type HTML

<HEAD> ... </HEAD>

début/fin de la zone d'entête

<TITLE> ... </TITLE>

début/fin du titre de la page

<BODY> ... </BODY>

début/fin du document proprement dit

La balise (obligatoire) <HTML> indique simplement que le document est écrit en HTML. Cette balise doit figurer au tout début, tandis que le </HTML> terminant le document hypertexte se place en toute fin !

Entre les balises <HTML> et </HTML> se situent les deux parties composant l'ensemble du document HTML : l'entête et le corps.

L'entête est précisé grâce au couple <HEAD> </HEAD> et le corps par <BODY> </BODY>.

Les balises d'entête doivent toujours précéder les balises de corps.

 

L'insertion de commentaires est possible n'importe où grâce à la balise <!> qui ne nécessite pas de fermeture. Ainsi la ligne suivante ne sera pas interprétée par le navigateur :

<! Ceci est commentaire>

Il est également possible (et plus courrant) d'insérer un groupe de commentaires à l'aide des balises <!-- et --> :

<!--

Commentaires

-->

 

Note :

Par la suite, les balises fermantes ne seront pas systématiquement indiquées.

 

 

La version du HTML de référence peut être indiquée (avant la partie en-tête <HEAD> avec la balise <!DOCTYPE>.

Ainsi la ligne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

impliquera l'utilisation du HTML en version 3.2

 

 

La zone d'entête <HEAD> ... </HEAD>, prologue au document proprement dit, contient des informations destinées principalement au navigateur et qui ne seront donc pas à proprement parlé, visible par l'utilisateur.

 

Le titre du document est indiqué grâce à la balise <TITLE>.

<TITLE> Bienvenue sur mon site Internet </TITLE>

Si la zone d'entête ne contient qu'une balise, il s'agit en général de celle ci.

Ce titre apparaît habituellement dans la barre de titre du navigateur.

 

Il est possible de faire figurer au sein de l'entête un certain nombre d'informations sur le document qui seront lues et interprétées par le serveur HTTP.

Ces informations sont précisées à l'aide de la balise <META> suivie d'attributs appropriés (associés à NAME ou HTTP_EQUIV) et valorisées à l'aide du mot clé CONTENT.

On recense trois catégories d'informations :

 

On peut, à l'aide de la balise <META NAME = "..." CONTENT = "..."> indiquer des informations telles que le nom de l'auteur (Author), un "droit de copie" (Copyright), le public visé (Rating), ...

<META NAME = "Author" CONTENT ="Thierry COSNUAU">

<META NAME = "Copyright" CONTENT ="1999 ThC ">

<META NAME = "Rating" CONTENT ="General">

 

L'attribut Keywords sera utilisé par les moteurs de recherche pour référencer votre page comme traitant des sujets indiqués par les mots clés successifs :

<META NAME = "Keywords" CONTENT ="mot_clé1,mot_clé2,mot_clé3">

Cette indication pourra éventuellement être complétée par l'attribut Description :

<META NAME = "Description" CONTENT ="description de la page">

 

La balise <META HTTP-EQUIV = "..." CONTENT = "..."> permet d'indiquer une directive au navigateur.

L'attribut Expires est utilisée par la plupart des navigateurs pour donner la date à partir de laquelle la page ne doit plus être conservée dans le cache du navigateur mais bien rechargée sur le serveur lors d'un nouveau passage sur la page. La valeur 0 indique que la page doit être systématiquement rechargée.

<META HTTP-EQUIV= "Expires" CONTENT ="Sun, 05 Sep 1999 12:00:00 GMT">

 

Le chargement automatique d'une page précisée par son URL après un certain délai se fait à l'aide de l'attribut Refresh. C'est notamment utile lorsque les sites changent de place ...

<META HTTP-EQUIV= "Refresh" CONTENT ="10;URL=PAGE2.HTM">

 

Le pays (et donc la langue) d'origine de la page est déclaré par l'attribut Content-language (FR pour la France).

L'adresse email du concepteur, utile pour lui envoyer des remarques concernant le site ou la page, est valorisée par l'attribut Reply-to.

Un grand nombre d'attributs peuvent être employés avec META NAME ou META HTTP-EQUIV. L'utilisateur curieux de les connaître se connectera au site des organismes de normalisation tels que le W3 consortium (www.w3.org).

 

La balise <BASE HREF =...> donne la base de l'adresse URL (Uniform Resource Locator) qui sera placée devant les références relatives dans le document, de telle sorte que, hors contexte, les fichiers soient cherchés à l'adresse Adresse_de_base/Adresse_relative.

Ainsi :

<BASE HREF=http://www.tcosnuau.fr/>

permettra de référencer les adresses courtes telles que mapage.htm à l'adresse http://www.tcosnuau.fr/mapage.htm

 

 

 

Le corps du document, commencé par la balise <BODY>, constitue la partie visible de la page HTML, c'est à dire les éléments apparaissant dans le navigateur de l'utilisateur.

A l'intérieur de cette zone , le texte incorporé sans balises apparaîtra tel quel dans la page.

La balise <BODY> peut elle même comporter un certain nombre d'attributs tels que la couleur de fond ou l'image utilisée comme "papier peint" de la page.

<BODY BGCOLOR = "#AABBCC">

ou

<BODY BACKGROUND = "monfond.gif">

On peut également préciser la couleur des différents composants du document ; l'exemple suivant affichera le texte en bleu-gris, les liens en vert, les liens visités en jaune et les liens actifs en cyan :

<BODY TEXT="#AABBCC" LINK="#00FF00" VLINK="#FFFF00" ALINK="#00FFFF">

 

La couleur peut être précisée soit par un code hexadécimal, soit par un nom prédéfini reconnu par le HTML.

La méthode de codage hexadécimal est moins lisible mais plus précise. Elle permet en effet de préciser, sur une échelle allant de 0 à 255, les valeurs des composantes rouge, verte et bleue : #RRVVBB (RGB en anglais).

Couleur

Code hexadécimal

Code HTML

rouge

#FF0000

red

vert

#00FF00

lime

bleu

#0000FF

blue

blanc

#FFFFFF

white

noir

#000000

black

jaune

#FFFF00

yellow

cyan

#00FFFF

cyan

 

Ce codage des couleurs, valable pour la couleur de fond, restera valable pour l'ensemble des attributs précisant la couleur.

Le début et la fin d'un paragraphe de texte sont indiqués respectivement par les balises <P> et </P>.

Un paragraphe contient en général une portion de texte d'allure homogène.

L'attribut ALIGN permet de préciser l'alignement (center, left ou right).

<P ALIGN=right> Ce texte est très droit. </P>

La fin d'un paragraphe est marquée par un retour à la ligne.

 

 

Six niveaux de titres (Headers) peuvent être utilisés au sein du document HTML. Les titres sont entourés par les tags <Hn> et </Hn> où n prend une valeur comprise entre 1 et 6, 1 correspondant au titre principal.

L'attribut ALIGN permet comme pour les paragraphes de préciser l'alignement.

 

<H1 ALIGN=center> Titre de mon document </H1>

<H2> Sous titre </H2>

<H6> Titre de petit niveau </H6>

 

 

Les balises précisant le style et les attributs des caractères sont :

<B>

gras [Bold]

<STRONG>

gras (logique)

<I>

italique [Italic]

<EM>

italique (logique) [Emphasis]

<U>

soulignés [Underline]

<S> ou <STRIKE>

barrés

<PRE>

texte formaté (avec espaces et sauts de ligne)

<BIG>

grande taille

<SMALL>

petite taille

<FONT SIZE=nn>

taille absolue (1-7)

<FONT SIZE=+n>

taille relative (+ ou -)

<FONT COLOR = "#nnnnnn">

couleur

<FONT FACE=police>

Type de police (Arial, Courier, Serif, ...)

<SUB>

mise en indice

<SUP>

mise en exposant

<CENTER>

centré

 

D'autre part, un certain nombre de styles prédéfinis peuvent être employés pour clarifier la présentation d'une page :

<CODE>

Code de programmation

<SAMP>

Exemple [Sample]

<VAR>

Variable

<DEF>

Définition

<ADDRESS>

Adresse

<CITE>

Citation (courte)

<BLOCKQUOTE>

Citation (longue)

<TT>

Police de taille fixe [Type Text]

<KBD>

Machine à écrire [Keyboard]

 

Note :

La balise <BLOCKQUOTE> ... </BLOCKQUOTE> peut être utilisée pour effectuer un ou plusieurs retraits.

 

Un retour à la ligne s'incorpore à l'aide de la balise <BR> (Break).

Une ligne horizontale peut être insérée avec la balise <HR> (Horizontal Rule) dont les attributs précisent éventuellement la taille et la position.

<HR SIZE=n>

épaisseur

<HR WIDTH=n|%>

longueur (absolue / pourcentage)

<HR ALIGN=

left|right|center>

position

<HR NOSHADE>

sans ombre

Par défaut, la ligne occupe toute la largeur et son épaisseur vaut 2.

Les deux balises <BR> et <HR> ne nécessitent pas de balises fermantes.

 

Il est également possible d'empêcher le retour à la ligne réalisé par défaut lorsqu'une ligne dépasse la largeur de l'écran à l'aide des balises <NOBR> ... </NOBR>. La césure (éventuelle) peut alors être indiquée à l'aide de la balise <WBR> (Word break).

 

Certaines balises de mise en forme ne fonctionne que pour un certain type de navigateur ; leur emploi est donc fortement déconseillé, puisqu'il prive une partie des clients de l'effet souhaité.

Citons pour mémoire la balise propriétaire de Microsoft <MARQUEE> permettant de faire défiler du texte sous Internet Explorer mais qui ne fonctionnera que sous ce navigateur et la balise propriétaire de Netscape <BLINK> qui fera clignoter le texte, uniquement sous Navigator ...

(La balise <MARQUEE> admet les attributs BEHAVIOR=SLIDE / SCROLL, DIRECTION ou encore SCROLLDELAY=n)

 

 

Les listes à puces (Unordered List) sont incorporées au sein des tags <UL> et </UL> ; chaque item de la liste (List Item) est ajouté à l'aide de la balise <LI> (sans contrepartie fermante).

<UL>

<LI> Pomme

<LI> Poire

<LI> Citron

</UL>

 

La représentation des puces peut être modifiée à l'aide de l'attribut STYLE qui peut prendre les valeurs Disc, Square ou Circle (prise en compte uniquement par certains navigateurs).

 

Les listes numérotées (Ordered List) sont placées entre les balises <OL> et

</OL>, chaque item étant ajouté avec la balise <LI> :

<OL>

<LI> Un

<LI> Deux

<LI> Trois

</OL>

 

Il est possible de préciser la manière d'exprimer la numérotation à l'aide de l'attribut TYPE dans la balise <OL> ou dans la balise <LI> :

TYPE = 1 Numérotation classique en chiffres arabes (par défaut)

TYPE = I Chiffres romains en majuscules

TYPE = i Chiffres romains en minuscules

TYPE = a Lettres minuscules

TYPE = A Lettres majuscules

On peut également faire démarrer la numérotation à partir d'un certain rang avec l'attribut START de la balise OL.

Les listes de définition (Definition List) peuvent être ajoutées entre les balises <DL> et </DL> avec, pour chaque définition le terme à définir (Definition Term) placé entre <DT> et </DT> et la définition proprement dite (Definition Data) entre <DD> et </DD>.

<DL>

<DT> Pomme </DT>

<DD> Fruit à compote </DD>

<DT> Orange </DT>

<DD> Fruit à jus </DD>

</DL>

 

Note :

Des listes peuvent également être mise en place avec les balises <MENU> et <DIR> qui fonctionnent sensiblement de la même façon que <UL> et qui sont donc peu utilisées.

 

 

En HTML, les tableaux sont utilisés non seulement pour afficher des données en colonnes mais également pour aligner les éléments les uns par rapport aux autres, en masquant la bordure du tableau.

Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Toutefois, le nombre de colonnes du tableau sera déduit du nombre de cellules ajoutées pour chaque ligne.

La balise HTML indiquant l'insertion d'un tableau est <TABLE>.

Une ligne (Table Row) est débutée par <TR> et terminée par </TR>.

Une cellule (Table Data) est délimitée par <TD> et </TD>.

On utilise éventuellement <TH>...</TH> pour insérer une cellule d'entête.

Le titre d'un tableau peut être précisé avec la balise <CAPTION>...</CAPTION> qui doit se situer entre les balises <TABLE> et </TABLE> ; ce titre sera placé, selon les versions du navigateur au dessus ou au dessous du tableau.

<TABLE>

<TR><TH>Ville</TH><TH>Pays</TH><TH>Continent</TH></TR>

<TR><TD>Paris</TD><TD>France</TD><TD>Europe</TD></TR>

<TR><TD>Turin</TD><TD>Italie</TD><TD>Europe</TD></TR>

<TR><TD>Caire</TD><TD>Egypte</TD><TD>Afrique</TD></TR>

</TABLE>

 

La balise <TABLE> possède les attributs suivants :

<TABLE BORDER = n>

taille de la bordure du cadre

<TABLE CELLSPACING = n>

espace entre les cellules

<TABLE CELLPADDING = n>

espace entre le bord et le contenu

<TABLE WIDTH = n|%>

largeur du tableau (absolue/pourcentage)

<TABLE BGCOLOR =

"#nnnnnn">

couleur de fond

<TABLE BORDERCOLOR =

"#nnnnnn">

couleur de bordure

<TABLE BORDERCOLORDARK =

"#nnnnnn">

couleur de bordure sombre

<TABLE BORDERCOLORLIGHT =

"#nnnnnn">

couleur de bordure claire

<TABLE ALIGN =

left|right|center >

alignement

Note :

Les attributs BORDERCOLORLIGHT et BORDERCOLORDARK sont prioritaires par rapport à BORDERCOLOR.

 

Les attributs des balises de ligne <TR> et de cellule <TD> permettent également d'affiner l'apparence :

<TR ALIGN = ...>

alignement de la ligne

<TD ALIGN = ... >

alignement de la cellule

<TD COLSPAN = n>

étirement sur n colonnes

<TD ROWSPAN = n>

étirement sur n lignes

<TD WIDTH = n|%>

largeur de la cellule (absolue/pourcentage)

<TD HEIGHT = n>

hauteur de la cellule

<TD BGCOLOR = "#nnnnnn">

couleur de fond

<TD BORDERCOLOR =

"#nnnnnn">

couleur de bordure

<TD BORDERCOLORDARK =

"#nnnnnn">

couleur de bordure sombre

<TD BORDERCOLORLIGHT =

"#nnnnnn">

couleur de bordure claire

Note :

Les attributs de <TD> peuvent également être appliqués à <TH>.

 

<TABLE BORDER=3 width=100%

BORDERCOLOR=Green

BORDERCOLORLIGHT=Red

BORDERCOLORDARK=Blue

BGCOLOR=YELLOW

CELLSPACING=4

CELLPADING=6

>

<CAPTION>G&eacute;ographie</CAPTION>

<TR ALIGN=CENTER>

<TH width=33%>Ville</TH>

<TH width=33%>Pays</TH>

<TH width=33%>Continent</TH>

</TR>

<TR ALIGN=CENTER>

<TD>Paris</TD>

<TD>France</TD>

<TD>Europe</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Turin</TD>

<TD>Italie</TD>

<TD>Europe</TD>

</TR>

<TR ALIGN=CENTER>

<TD>Caire</TD>

<TD>Egypte</TD>

<TD>Afrique</TD>

</TR>

<TR ALIGN=CENTER>

<TD COLSPAN=2>Luxembourg</TD>

<TD>Europe</TD>

</TR>

</TABLE>

 

Par essence le HTML est un langage hypertexte qui permet à l'utilisateur de naviguer entre les pages par simple clic souris sur un mot, généralement souligné et d'une couleur différente, appelé lien.

Les liens permettent d'aller :

- vers un autre endroit au sein du document courant (signet)

- vers une autre page du site visité (lien local)

- vers un autre site (lien distant)

Il est également possible de créer un lien vers une adresse email ou encore un serveur FTP.

 

Une adresse URL (Uniform Resource Locator) indique la localisation de l'information demandée par le navigateur.

Une URL est composée de plusieurs parties :

protocole

nom de l'hôte

répertoire

fichier

Ainsi pour l'adresse

http://www.microsoft.com/ie/welcome.htm

http représente le protocole

www.microsoft.com représente le nom de l'hôte

ie représente le répertoire

welcome.htm représente le fichier (page)

Les différents protocoles sont :

HTTP (HyperText Transfer Protocol)

lien distant vers une page web

FTP (File Transfert Protocol)

lien distant vers un fichier

MAILTO

lien vers un mail

FILE

Lien vers un fichier

 

Une URL ne peut être composée que des caractères alphanumériques classiques (A-Z, a-z, 0-9) et les symboles dollar ($), tiret (-), souligné (_) et point (.).

Les autres caractères doivent être précisés à l'aide de codages spéciaux indiqués à l'aide du caractère pour cent (%) suivi du caractère ASCII du caractère en notation hexadécimale.

Ainsi %20 représente l'espace, %3f le point d'interrogation ...

 

La balise exprimant un lien ou ancre (Anchor) est <A>.

Pour définir un signet, utile pour se déplacer à l'intérieur du document, on utilise la balise <A NAME=...>

Pour atteindre un emplacement qu'il soit local ou distant on utilise la balise <A HREF = ...>.

De la valorisation de l'attribut HREF, dépendra le type de déplacement.

<H1>Sommaire</H1>

<A HREF="#Part1">Premi&egrave;re partie</A>

<BR>

<A HREF="#Part2">Seconde partie</A>

<BR>

<hr width="75%">

<BR>

<P>

<A NAME="Part1">Ici commence la partie 1</A>

<!-- texte -->

</P>

<P>

<A NAME="Part2">Ici commence la partie 2</A>

<!-- texte -->

</P>

 

<A HREF="PAGE2.HTM"> cliquez ici pour la page 2 </A>

<A HREF="PAGE2.HTM#TEST"> cliquez ici pour la page 2 </A>

<A HREF="HTTP://WWW.MICROSOFT.COM"> Site Microsoft </A>

<A HREF="MAILTO:tcosnuau@free.fr"> Envoyez moi un mail </A>

<A HREF="DOWNLOAD/SAMPLE.ZIP"> Fichier exemple </A>

 

En plus du texte, une page est composée la plupart du temps d'images qui la rende plus attractive et aussi ... plus lente à afficher ; il convient donc d'utiliser ces "décorations" à bon escient afin de ne pas trop alourdir le site et donc décourager l'éventuel visiteur.

Les images ne font pas partie intégrante du document ; seules leurs références sont indiquées. Les fichiers images doivent donc être disponibles sur le serveur HTTP, aux emplacements indiqués.

Le Web utilise deux formats graphiques satisfaisants du point de vue rapport "qualité d'image / taille du fichier". Ils comportent chacun 256 couleurs

Ces deux formats sont le JPEG (Join Point Expert Group) et le GIF (Graphic Interchange Format).

Les images GIF ont la particularité de pouvoir être animées, c'est à dire que l'image affichée évoluera au cours du temps afin de recréer une petite animation.

L'insertion d'une image au sein d'une page HTML se fait à l'aide du tag <IMG> utilisé conjointement avec un certain nombre d'attributs. Ainsi pour préciser la source, c'est à dire le nom du fichier image, on emploie l'attribut SRC.

<IMG SRC="IMAGE.GIF">

On peut éventuellement définir un texte alternatif qui s'affichera si le navigateur ne reconnaît pas les images, avec l'attribut ALT.

La dimension de l'image peut être précisée avec les attributs WIDTH et HEIGHT.

Une bordure peut être ajoutée avec BORDER=taille.

L'alignement par rapport au texte se fait avec l'attribut ALIGN dont les valeurs possibles sont Top, Middle, Bottom, Left et Right. D'autres valeurs permettent d'affiner cet alignement : TextTop, AbsMiddle, AbsBottom et BaseLine.

L'espace entre l'image et un objet peut être précisée par les valeurs de VSPACE (vertical) et HSPACE (horizontal).

<IMG SRC="FLOWER.GIF" ALT="Jolie fleur"

WIDTH=100 HEIGHT=160

BORDER=5 ALIGN=LEFT>

 

 

Une image peut être découpée en zones afin de permettre l'association de liens multiple en fonction de la zone cliquée. On parle alors de Maps et de "liens hypergraphiques".

L'utilisation d'un logiciel graphique dédié est fortement conseillée pour définir les différentes zones de l'image (MapThis, MapEdit, ...).

Il faut préciser l'attribut USEMAP="#nom" lors de l'insertion de l'image avec la balise <IMG> et ajouter une balise <MAP NAME = "nom"> définissant les zones de l'image et leurs références.

Ces zones sont définies grâce à la balise <AREA> contenue dans une structure <MAP> ... </MAP>.

La forme de la zone peut être rectangulaire (RECT), circulaire (CIRCLE) ou polygonale (POLYGON).

L'attribut COORDS précise les coordonnées qui permettront au navigateur de reconstituer la forme géométrique. Par convention, le point d'origine (0,0) est situé au coin supérieur gauche de l'image ; l'axe des abscisses (X) est alors dirigé vers la droite et l'axe des ordonnées (Y) vers le bas.

<IMG SRC="MAP3.GIF" USEMAP="#Map123">

<MAP NAME="Map123">

<AREA SHAPE=RECT COORDS="1,1,55,50" HREF="page1.htm" ALT="UN">

<AREA SHAPE=RECT COORDS="57,1,110,50" HREF="page2.htm" ALT="DEUX">

<AREA SHAPE=RECT COORDS="1,60,110,120" HREF="page3.htm" ALT="TROIS">

<AREA SHAPE=default HREF="page0.htm">

</MAP>

 

Le langage HTML permet de diviser l'écran en plusieurs fenêtres alors appelées "cadres" (frames), dans le but d'afficher plusieurs documents simultanément. Cela est notamment utile pour présenter une table des matières qui restera tout au long de la visite du site.

Le fichier qui décrit les cadres est un document HTML assez simple dont la partie <BODY> ... </BODY> est remplacée par des balises spécifiques :

<FRAMESET> ... </FRAMESET>.

L'agencement des fenêtres se fait à l'aide des attributs ROWS (horizontal) et COLS (vertical) de la balise <FRAMESET>.

On précise à l'aide des ces attributs la taille de chacune des zones.

Il est possible d'utiliser le caractère * pour compléter une suite de zone à 100% (par exemple ROWS="25%,40%,*" équivaut à ROWS="25%,40%,35%")

La balise <FRAME SRC= ...> permet de préciser le document HTML "classique" qui sera placé à l'intérieur du cadre.

<FRAMESET ROWS = "25%,75%">

<FRAME SRC="PAGE1.HTM">

<FRAMESET COLS = "40%,60%">

<FRAME SRC="PAGE2.HTM">

<FRAME SRC="PAGE3.HTM">

</FRAMESET>

</FRAMESET>

 

La bordure d'une FRAME ou d'un FRAMESET peut être supprimée en valorisant l'attribut FRAMEBORDER à "No" ; la taille de la bordure peut être indiquée dans ces deux balises avec l'attribut BORDER ; la couleur de la bordure sera précisée par l'attribut BORDERCOLOR.

Il est également possible :

 

Enfin, il est utile de nommer les frames pour faciliter la navigation entre les différents écrans. Cette propriété est précisée par l'attribut NAME.

 

<FRAMESET ROWS="80,*" FRAMEBORDER="Yes" FRAMESPACING="1">

<FRAME SRC="AZURTITL.HTM" NAME="Titre" SCROLLING="No"

NORESIZE MARGINHEIGHT="0" MARGINWIDTH="0" FRAMESPACING="0"

FRAMEBORDER="No">

<FRAMESET COLS="180,*">

<FRAME SRC="AZURSOMM.HTM" NAME="Sommaire" SCROLLING="No"

FRAMEBORDER="0" FRAMESPACING="0">

<FRAME SRC="AZURFIRS.HTM" NAME="Main" FRAMEBORDER="0"

FRAMESPACING="0">

</FRAMESET>

</FRAMESET>

 

Si le navigateur ne supporte pas les frames, il convient de prévoir une section <NOFRAMES> dans laquelle sera affiché un message d'avertissement

<NOFRAMES>

Votre navigateur ne supporte pas les frames

</NOFRAMES>

 

Les liens de la balise <A> doivent contenir l'attribut TARGET précisant dans quel cadre se situera la page visée.

Cet attribut sera valorisé avec le nom du cadre (NAME) ou avec une valeur prédéfinie :

_blank

indique au navigateur qu'il doit créer une nouvelle fenêtre

_self

indique que la nouvelle page sera chargée à la place de la page courante

_top

entraîne l'affichage de la page sur l'ensemble de la fenêtre

 

Disponible à partir de la version 4 de HTML, les frames flottants offrent la possibilité d'inclure à l'intérieur même d'une page une zone pointant vers une autre page.

Cette insertion est réalisé à l'aide de la balise <IFRAME> dont l'attribut SRC, tout comme pour <FRAME> précise la page à inclure.

Les attributs de <IFRAME> sont sensiblement les mêmes que ceux employés pour <FRAME>.

 

 

 

 

 

 

La première forme d'interactivité des pages HTML est fournie par l'utilisation des formulaires qui reprennent certains des contrôles habituellement utilisés par les interfaces graphiques des systèmes d'exploitation actuels.

L'utilisateur peut ainsi remplir un champ de saisie, préciser ses choix à l'aide de cases à cocher et de radio boutons et transmettre ses données à l'aide de boutons d'action.

L'insertion d'un formulaire dans un document HTML se fait avec la balise <FORM>.

Le nom du formulaire est indiqué par l'attribut NAME.

Le type d'action (GET ou POST) est précisé avec l'attribut METHOD.

L'action est indiquée grâce à l'attribut ACTION.

Trois types de contrôles, correspondant à trois balises peuvent être inclus dans un formulaire.

Les contrôles "classiques" sont insérés à l'aide du tag <INPUT TYPE = ...> dont les valeurs possibles sont :

TEXT

zone de saisie

PASSWORD

zone de saisie remplacée par des *

HIDDEN

zone cachée

CHECKBOX

case à cocher

RADIO

radio bouton

SUBMIT

bouton poussoir d'envoi

RESET

bouton poussoir de réinitialisation

IMAGE SRC="..."

bouton image

Les attributs qui peuvent être précisés sont :

NAME

nom du contrôle

VALUE

valeur par défaut d'un champ de saisie

CHECKED

indique si un contrôle RADIO ou CHECKBOX est actif

SIZE

taille du champ pour les champs caractères (par défaut 20)

MAXLENGTH

nombre maximum de caractères

SUBMIT

bouton poussoir d'envoi

RESET

bouton poussoir de réinitialisation

IMAGE SRC="..."

bouton image

 

Une liste déroulante peut être insérée à l'aide de la balise <SELECT>.

Les différents lignes sont précisées par des balises <OPTION>.

Une zone de texte multi-lignes peut être introduite par la balise <TEXTAREA>.

Un bouton quelconque peut être ajouté avec la balise <BUTTON>.

 

<P>Voici une forme :</P>

<P>&nbsp;</P>

<FORM METHOD="POST" NAME="TESTFORM">

<P>zone de texte à saisir : <INPUT TYPE="TEXT" SIZE="20"

NAME="T1"></p>

<P>cases à cocher :</P>

<P><INPUT TYPE="checkbox" NAME="C1">Option 1</P>

<P><INPUT TYPE="checkbox" NAME="C2">Option 2</P>

<P>choix multiples</P>

<P><INPUT TYPE="radio" NAME="R1" VALUE="V1">choix 1</P>

<P><INPUT TYPE="radio" CHECKED NAME="R1" VALUE="V2">choix 2</P>

<P>bouton de commande : <INPUT TYPE="submit" NAME="B1"

VALUE="Envoyer"></P>

</FORM>

 

<FORM>

Votre syst&eagrave;me : <BR>

<SELECT NAME="System">

<OPTION>Mac OS

<OPTION SELECTED>PC Windows

<OPTION>Unix

</SELECT> <P>

Logiciels utilisés : <BR>

<SELECT NAME="Software" MULTIPLE SIZE=5>

<OPTION> FrontPage

<OPTION SELECTED> Internet Explorer

<OPTION SELECTED> Xara 3D

<OPTION> Xara Web Style

</SELECT> <P>

<TEXTAREA NAME="Commentaires" ROWS=20 COLS=60>

N&eacute;ant

</TEXTAREA><P>

<BUTTON OnClick="javascript:alert('Hello')">

SayHello

</BUTTON>

</FORM>

 

La mise en page des formulaires se fait usuellement à l'aide de tableau (<TABLE>) dont on ne fait pas apparaître les bordures.

Les formulaires sont surtout utilisés conjointement avec des éléments tels que le langage JavaScript ou les programmes CGI.

Ils permettent alors d'établir un véritable dialogue entre l'utilisateur et le serveur contenant le site.

 

<HTML>

<HEAD>

<TITLE>Test Form &amp; JavaScript</TITLE>

<SCRIPT Language="JavaScript">

function Hello()

{

document.write("Bonjour <B>" + document.forms[0].elements["EF_NOM"].value + "</B>");

}

</SCRIPT>

</HEAD>

<BODY>

<FORM METHOD="Get" ACTION="JavaScript:Hello();">

Entrez votre nom : <INPUT TYPE="Text" NAME="EF_NOM">

<INPUT TYPE="Submit" VALUE="Bonjour">

</FORM>

</BODY>

</HTML>

 

 

 

DHTML : le HTML dynamique

 

Le DHTML ou le HTML dynamique apporte de l'animation et de l'interactivité dans les pages Web en mélangeant, très savamment, trois développements récents de la publication sur le Web :

Le positionnement d'objets

Les langages de scripts (JavaScript et VBScript)

Les feuilles de style

L'aspect dynamique réside dans le fait que la page HTML peut être modifiée après le chargement de celle ci par le navigateur. Ces modifications et animations sont effectuées du coté client sans faire appel aux ressources du serveur.

Le positionnement au pixel près d'un objet dans un document Web, est désormais possible.

Cependant l'implémentation s'est faite de façon différente selon les navigateurs.

Netscape 4.0 le fait par la balise propriétaire <LAYER>.

Microsoft Explorer 4.0 ou 5.0 le réalise par les feuilles de style.

Ceci entraîne quelques problèmes de compatibilité.

Le DOM (Document Objet Model) cherche à imposer une norme qui concilie les deux points de vue.

 

JavaScript est un langage de scripts, introduit par Netscape sous Navigator 2.0 et qui depuis n'a cessé d'évoluer. D'abord avec la version 3.0 de Navigator (JavaScript 1.1) et ensuite avec la version 4.0 (JavaScript 1.2). Repris, mais très imparfaitement, par Microsoft avec Explorer 3.0, il donne maintenant entière satisfaction sous Explorer 4.0.

Avec la norme ECMAScript et sa reprise dans HTML 4.0, JavaScript est devenu un standard de la publication sur Internet.

 

Popularisées par Microsoft avec Explorer 3.0, les feuilles de style (Cascading Style Sheets) ont apporté aux développeurs un concept nouveau et attrayant. Elles ont encore évolué avec Explorer 4.0 puis 5.0.

Leur adoption par Netscape 4.0 permet une bonne compatibilité.

Les feuilles de style sont devenues un standard par la norme CSS1 et HTML 4.0 en recommande vivement l'usage.

 

Note :

Le JavaScript faisant l'objet d'un document à part, nous nous intéresserons ici à l'utilisation des balises de positionnement et aux feuilles de styles.

La méthode de positionnement des objets dans les pages HTML n'est pas standardisée ; selon le choix du navigateur client, Netscape Navigator ou Microsoft Internet Explorer, les balises de positionnement seront interprétées ou ... ignorées !

 

Netscape préconise la méthode des layers ou couches de positionnement.

La balise <LAYER>, balise propriétaire de Netscape, permet ainsi de placer précisément du texte, des images ou n'importe quel autre objet dans la page du navigateur.

Le positionnement se fait à l'aide des attributs LEFT et TOP qui déterminent respectivement les positions horizontale et verticale par rapport au coin supérieur gauche de la page. La valeur de ces attributs peut être indiquée en pixels ou en pourcentage (valeur suivie du signe %).

L'attribut NAME permet d'autre part de nommer le layer.

<LAYER NAME="dispo" LEFT=80 TOP=150>

Ce texte est bien dispos&eacute;

</LAYER>

<LAYER NAME="dispo2" LEFT=50% TOP=50%>

Ce texte est bien centr&eacute;

</LAYER>

L'avantage d'une telle méthode est qu'elle permet d'afficher à l'endroit voulu un ou plusieurs objets.

On peut ainsi créer des superpositions (notion de couches) qui peuvent être intéressantes, notamment lors de l'utilisation d'images transparentes (GIF).

<LAYER NAME="superpos1" LEFT=80 TOP=150>

Ce texte est superpos&eacute;

</LAYER>

<LAYER NAME="superpos2" LEFT=82 TOP=152>

Ce texte est superpos&eacute;

</LAYER>

<LAYER NAME="superpos3" LEFT=84 TOP=154>

Ce texte est superpos&eacute;

</LAYER>

 

 

Afin de répondre à la balise <LAYER> apparue avec la version 4.0 de Netscape, Microsoft a introduit, également dans la version 4.0 de son navigateur Internet Explorer, son propre concept de positionnement.

Ignorant la balise <LAYER>, préférant l'utilisation des balises <SPAN> et <DIV>, la méthode de Microsoft concernant le positionnement est finalement assez proche de celle de Netscape, même si elle s'inscrit dans le cadre plus général des feuilles de styles (CSS).

La balise <SPAN> permet de positionner un objet dans la page en se référant soit au coin supérieur gauche (position absolue) soit à un autre objet (position relative).

L'ensemble des informations permettant de préciser l'action de <SPAN> est indiqué dans l'attribut STYLE qui peut notamment contenir les propriétés POSITION, TOP, LEFT, WIDTH et HEIGHT, chacune d'elles étant séparée par un ;.

Les valeurs des positions peuvent être indiquées en pixels ou en pourcentage.

<SPAN STYLE="POSITION:ABSOLUTE;TOP:150;LEFT:100">

Texte en bonne place

</SPAN>

<SPAN STYLE="POSITION:ABSOLUTE;TOP:50%;LEFT:50%">

Centre de la page

</SPAN>

<FONT COLOR=Blue>

<SPAN STYLE="POSITION:ABSOLUTE;TOP:100;LEFT:100">

Viva DHTML

</SPAN>

</FONT>

<FONT COLOR=Cyan>

<SPAN STYLE="POSITION:ABSOLUTE;TOP:105;LEFT:105">

Viva DHTML

</SPAN>

</FONT>

 

La balise <SPAN> a l'avantage d'être également compréhensible par Netscape Navigator 4.0 puisque ce navigateur accepte la définition des feuilles de style.

L'exemple ci dessus fonctionnera donc de manière pratiquement identique avec les deux navigateurs dominants du marchés.

Il faut toutefois veiller, lors de l'utilisation d'images, à préciser les attributs de taille.

 

L'exemple qui suit utilise les propriétés de positionnement de texte avec du JavaScript. L'effet consiste en un texte glissant de droite à gauche.

Cet exemple ne fonctionne qu'avec le navigateur de Microsoft (IE4).

<HTML>

<HEAD>

<SCRIPT language=javascript>

function ie4(){

if(!document.all)

alert("Cet effet ne fonctionne que sous Ms IE 4 et +.");

}

</SCRIPT>

</HEAD>

<BODY onload="ie4()">

<FONT SIZE=+3>Ce site est vraiment ... </FONT>

<SPAN ID="Glisse" style="position:relative;visibility:hidden;font-style:italic">

<FONT SIZE=+3>formidable !</FONT></span>

<SCRIPT language=javascript>

<!--

if (document.all){

Glisse.style.left=document.body.clientWidth

Glisse.style.visibility="visible"

}

function moveit(){

if (Glisse.style.pixelLeft>15)

Glisse.style.pixelLeft-=15

else {

Glisse.style.fontStyle="normal"

Glisse.style.left=0

clearInterval(moving)

}

}

if (document.all)

moving=setInterval("moveit()",50)

//-->

</SCRIPT>

</BODY>

</HTML>

 

 

Introduit dès la version 3.0 d'Internet Explorer et pérennisé avec les versions 4.0 des outils de Microsoft et de Netscape, le concept des feuilles de style permet la définition de mise en forme générique pour des ensembles de composants de natures identiques.

On pourra notamment définir la nature et la taille de police utilisée pour tel ou tel type de texte (titre, sous-titre, définition, ...)

On assure ainsi la cohérence des styles et on évite les redéfinitions multiples à chaque utilisation du style.

Ce concept, qui existait déjà dans les traitements de texte (tels Word de Microsoft), peut s'appliquer aussi bien aux styles déjà existants du HTML (Header, ...) qu'à des styles "utilisateurs" définis pour les besoins du site.

Une extension des feuilles de styles est apportée avec les feuilles de styles en cascade (Cascading Style Sheets ou CSS) qui gèrent la présence des définitions multiples.

 

 

La définition de base d'un style se fait sous la forme :

balise { propriété de style: valeur; propriété de style: valeur ...}

 

H3 { FONT-FAMILY: Arial; FONT-STYLE: italic }

L'exemple ci-dessus définit l'aspect, pour tout le document, des textes entourés des balises <H3> et </H3>.

Les accolades {...} peuvent être éventuellement remplacées par des crochets [...] ou des parenthèses (...).

On peut inclure un nombre "infini" de couples propriétés: valeur en les séparant à chaque fois par un point virgule (;).

Les styles peuvent être écrits sur plusieurs lignes :

H3 {

FONT-FAMILY: Arial;

FONT-STYLE: italic;

COLOR: green

}

 

Il est possible d'attribuer plusieurs valeurs à une même propriété. Dans ce cas, les différentes valeurs seront séparées par des virgules :

H3 {FONT-FAMILY: Arial, Helvetica, sans-serif}

D'autre part, un même style peut être affecté à plusieurs balises (séparées par des virgules) :

H1, H2, H3 {FONT-FAMILY: Arial; FONT-STYLE: italic}

L'incorporation des définitions de styles peut être effectuée de deux manières :

- soit le style est défini pour un document donnée et sa définition se fait au sein du document lui même : on parle alors de style interne ;

- soit le style est défini pour un ensemble de pages, dans un fichier séparé et la définition est alors dite externe.

 

L'incorporation de style au sein d'un document peut se faire aussi bien dans l'entête que dans le corps.

Il est toutefois logique et conseillé de placer la définition des styles entre les balises <HEAD>.

On utilise alors la balise <STYLE TYPE="text/css"> afin d'introduire la définition des styles.

<HTML>

<HEAD>

<STYLE TYPE="text/css">

H2 { FONT-FAMILY: Arial; FONT-STYLE: bold }

H3 { FONT-FAMILY: Arial; FONT-STYLE: italic; COLOR:red}

</STYLE>

</HEAD>

<BODY>

<H2> Voici mon titre 2, plein de style </H2>

<H3> et mon titre 3, un peu rouge </H3>

<BR>

Et ceci est mon texte

</BODY>

</HTML>

 

L'incorporation à l'intérieur des balises <BODY>, moins utile peut être employée pour des besoins spécifiques.

<HTML>

<BODY>

<H1 STYLE="FONT-FAMILY: Arial; FONT-STYLE: italic"> Un titre </H1>

</BODY>

</HTML>

Dans l'exemple ci dessus, le style Arial, italique n'affectera que cette seule balise <H1>.

 

 

La définition des styles prend toute son ampleur lorsqu'il s'agit d'appliquer cette définition à l'ensemble des pages composants un site.

Il convient donc, afin de rendre les styles disponibles pour un ensemble de pages, de créer un fichier à part entière (externe), qui contiendra les définitions des styles. Ce fichier, usuellement d'extension .CSS devra être placé sur le serveur et "incorporé" dans chaque page à la manière des fichiers Include du langage C.

Le lien vers le fichier sera indiqué dans l'entête de chaque page à l'aide de la balise <LINK> employée avec certains attributs.

Ainsi, le code HTML utilisé pour incorporer le fichier de style nommé Styles.CSS sera :

<HTML>

<HEAD>

<LINK REL=stylesheet TYPE="text/css" HREF="Styles.CSS">

</HEAD>

 

Les classes de style permettent d'affecter plusieurs styles à une seule balise.

La définition

balise { propriété de style: valeur}

devient alors

balise.nom_de_classe { propriété de style: valeur}

ou plus simplement

.nom_de_classe { propriété de style: valeur}

Pour appeler le style dans le document il suffira alors de préciser l'attribut CLASS pour la balise à modifier :

<BALISE CLASS="nom_de_classe"> ... </BALISE>

 

Ainsi, si l'on désire définir les passages importants par une mise en forme appropriée (gras et rouge), on pourra définir la classe Fort :

.Fort {font-weight: bold ; color:#FF0000}

et l'appliquer à un paragraphe, un titre ...

<P CLASS ="Fort"> mon texte est important </P>

<H3 CLASS ="Fort"> mon titre est important </H3>

 

L'utilisation conjointe des classes avec des langages de script (tel le JavaScript) pose problème car la syntaxe balise.class devient ambiguë.

Il faut alors recourir à la méthode des identifiants qui se substitue à la définition des classes en reprenant intégralement leur fonctionnement.

La définition d'un identifiant se fait à l'aide du caractère dièse (#) suivi du nom de l'identifiant :

#nom_ID { propriété de style: valeur}

L'appel à cet identifiant est alors possible à l'aide de l'attribut ID dans n'importe quelle balise :

<P ID="nom_ID" > mon texte </P>

 

Les feuilles de styles peuvent être appliquées à un sous ensemble fin d'objets ; il n'est pas, par exemple obligatoire de les appliquer à un paragraphe entier.

Afin de délimiter l'action d'un style on utilise la balise <SPAN>.

<P> Le texte qui suit est <SPAN CLASS="Fort"> important !!! </SPAN> </P>

 

La balise <DIV> permet à l'inverse d'appliquer un style à plusieurs objets.

<DIV CLASS="Fort">

<P> Ce paragraphe est "Fort" </P>

<P> Celui-ci aussi </P>

</DIV>

 

Les feuilles de styles sont dites en cascade car il est possible que plusieurs styles rentrent en concurrence.

L'ordre de priorité des éléments de style est le suivant :

- style HTML

- fichier externe (.CSS)

- style défini dans l'entête du document (<HEAD>)

- style défini dans le corps du document (<BODY>)

Ainsi un style défini dans un fichier externe surclassera le style par défaut du HTML mais sera lui même surclassé par un style défini au niveau du <BODY>.

Il est possible avec la déclaration d'attribut !Important de modifier cet ordre mais ce cas est rare et peu conseillé.

Les longueurs, généralement positives, représentent des valeurs relatives (en pourcentage) ou absolues.

 

% : pourcentage par rapport à la totalité de l'espace

px : pourcentage par rapport à la résolution d'une image en pixel

ex : pourcentage par rapport à la taille de la lettre x

em : pourcentage par rapport à la taille de la police

 

pt : points

mm : millimètres

pc : picas

cm : centimètres

in : inches (2,54cm)

 

Note :

Les unités sont présentées ci-dessus par ordre croissant de la taille d'affichage obtenue.

La liste complète (et "officielle") des propriétés et recommandations concernant les feuilles de style version 1, peut être trouvée à l'adresse http://www.w3.org/pub/WWW/TR/REC-CSS1 .

En voici une sélection :

 

font-family

nom (Arial, Times, Helvetica, ...) ou une famille de polices (serif, sans-serif, cursive, fantasy, monospace)

font-style

style de l'écriture (normal, italic, oblique)

font-weight

épaisseur de la police

(normal / bold / bolder / lighter)

font-size

taille de la police

(xx-small / x-small / small / medium / large / x-large / xx-large /

larger / smaller / taille en points (pt), inches (in), centimètres (cm), pixels (px) /pourcentage (%)

font-variant

variante par rapport à la normale

(normal / small-caps)

font

raccourci pour les différentes propriétés de police

(exemple : P {font: bold italic})

 

text-align

alignement du texte (left / center / right)

text-indent

retrait dans la première ligne d'un bloc de texte

spécifié en inches (in) ou en centimètres (cm) ou en pixels (px)

text-decoration

décoration du texte, soit barré, clignotant, ...

(blink / underline / line-through / overline / none)

text-transform

casse du texte (majuscule, minuscule)

(uppercase / lowercase / capitalize)

color

couleur du texte (hexadécimal ou code)

word-spacing

espace entre les mots

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

letter-spacing

espace entre les lettres

spécifié en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

line-height

interligne (espace entre les lignes du texte)

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

width

longueur d'un élément de texte ou d'une image

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

height

hauteur d'un élément de texte ou d'une image

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

white-space

espace ou blanc (normal ou pre ou nowrap)

 

background-color

couleur de l'arrière-plan

background-image

image de l'arrière-plan

background-repeat

façon de répéter l'image d'arrière-plan

repeat / no-repeat /

repeat-x (x = nombre de répétitions horizontales) /

repeat-y (y = nombre de répétitions verticales)

background-attachment

spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran

scroll / fixed

background-position

spécifie la position de l'image d'arrière-plan par rapport au coin

supérieur gauche de la fenêtre

top / center / bottom , left / center /right

ou en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

background

raccourci pour les différentes propriétés d'arrière-plan

 

 

 

margin-top

valeur de la marge supérieure

en unité de longueur ou auto

margin-right

valeur de la marge droite

en unité de longueur ou auto

margin-bottom

valeur de la marge inférieure

en unité de longueur ou auto

margin-left

valeur de la marge gauche

en unité de longueur ou auto

margin

regroupe les différentes propriétés de la marge

 

border-top-width

épaisseur du bord supérieur

thin ou medium ou thick ou spécifié par l'auteur

border-right-width

épaisseur du bord droit

thin / medium / thick ou spécifique

border-bottom-width

épaisseur du bord inférieur

thin / medium / thick ou spécifique

border-left-width

épaisseur du bord gauche

thin / medium / thick ou spécifique

border-width

regroupe les différentes propriétés de border-width

border-color

couleur de la bordure

border-style

style du trait de la bordure

none / solid / dotted / dashed / double /

groove / ridge / inset / outset

border

regroupe toutes les propriétés des bords

padding-top

valeur de remplissage haut entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

padding-right

valeur de remplissage droit entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

padding-bottom

valeur de remplissage bas entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

padding-left

valeur de remplissage gauche entre l'élément et le bord

en points (pt), inches (in), centimètres (cm), pixels (px)

ou pourcentage (%)

padding

regroupe les différentes propriétés de remplissage

 

list-style-type

détermine le type de puces ou de numérotation

disc / circle / square

decimal / lower-roman / upper-roman / lower-alpha / upper-alpha

list-style-image

permet de remplacer les puces par une image

list-style-position

spécifie si les puces sont à l'intérieur ou à l'extérieur du texte

inside / outside

list-style

regroupe toutes les propriétés de liste

 

 

 

 

 

© 1999/10 Thierry COSNUAU