2 - Le Langage HTML

8/10/2019 2 - Le Langage HTML

1/40


2/40

Table des matires

Le Langage HTML........................................................................................................................ 1

1. Introduction HTML : Hyper Text Markup Language .................................................... 4

1.1. Quelques rgles simples pour l'criture en langage HTML....................................... 4

1.2. Qu'est-ce qu'un URL (Uniform Resource Locator). .................................................. 4

2. Les En-ttes - H.T.M.L. ..................................................................................................... 5

3. Les dlimiteurs - H.T.M.L ................................................................................................ 6

3.1. Les dlimiteurs ........................................................................................................... 6

3.2. Liste de description .................................................................................................... 7

3.3. Indentation de paragraphe ..........................................................................................7

3.4. Prsentation d'un paragraphe en multi-colonnes........................................................ 8

4. Les styles - H.T.M.L. ......................................................................................................... 94.1. Taille du texte............................................................................................................. 9

Une trs grande taille.................................................................................................................. 9

Une grande taille ....................................................................................................................9

Une taille moyenne............................................................................................................. 9

4.2. Attributs...................................................................................................................... 9

5. Les listes - H.T.M.L. ........................................................................................................ 13

6. Les caractres spciaux - H.T.M.L. ................................................................................. 15

6.1. Les ingalits............................................................................................................ 15

6.2. Les caractres accentus....................................................................................... 15

6.3. D'autres caractres utiles ..........................................................................................16

7. Les images - H.T.M.L. ..................................................................................................... 177.1. Les images dans le texte...........................................................................................17

8. Les images ractives - H.T.M.L. ...................................................................................... 19

8.1. Les images ractives - H.T.M.L. (ancienne mthode) ..............................................19

8.2. Les images ractives - H.T.M.L. (nouvelle mthode)...............................................21

9. Les liens - H.T.M.L.......................................................................................................... 23

9.1. Les liens vers un document complet distant............................................................. 23

9.2. Les liens vers un document complet local ............................................................... 23

9.3. Les liens vers une partie d'un document local.......................................................... 24

9.4. Les liens vers une partie du document courant ........................................................ 24

9.5. Adresser un message lectronique ........................................................................... 24

10. Les Formulaires - H.T.M.L. ...........................................................................................26

10.1. Bouton .................................................................................................................... 26

10.2. Slection d'un fichier ..............................................................................................26

10.3. Texte libre sur une ligne......................................................................................... 26

10.4. Texte libre sur plusieurs lignes............................................................................... 27

10.5. Menu....................................................................................................................... 27

ENQUETE sur la SATISFACTION des UTILISATEURS............................................. 28

11. Les tableaux - H.T.M.L.................................................................................................. 29

11.1. Dclarer le dbut et la fin d'un tableau................................................................... 29

11.2. Dfinir le dbut et la fin d'une ligne....................................................................... 29

11.3. Dfinit chaque lment de la ligne titre .................................................................3011.4. Dcrit le titre du tableau ......................................................................................... 31


3/40

12. - H.T.M.L............................................................................................. 32

13. Divers - H.T.M.L............................................................................................................34

13.1. Centrer un document ............................................................................................... 34

13.2. Modification de la taille et de la couleur des caractres.........................................34

13.3. Tableau des couleurs .............................................................................................. 34

13.4. Indice et exposant................................................................................................... 3813.5. Fond sonore ............................................................................................................ 39

13.6. Insertion Vido....................................................................................................... 39


4/40

1. Introduction HTML : Hyper Text Markup Language

Un document HTML est compos de texte et de commandes (tag en anglais). Ces

commandes permettent de mettre en forme le texte (Titre, caractre gras, italique, image,

liens, etc...).

1.1. Quelques rgles simples pour l'criture en langage HTML

Les commandes HTML ont une marque de dbut et une marque de fin

Certaines marques de fin sont facultatives

Les commandes HTML utilisent les caractres < et > comme dlimiteurs.

Exemple:

Cet t e commande donne un t i t r e au document HTML

Les commandes HTML peuvent tre crites en minuscules ou en majuscules.

Un fichier rdig en HTML doit tre suffix par .htmlou .HTMLou .htmou .HTM

1.2. Qu'est-ce qu'un URL (Uniform Resource Locator).

Un URL est le moyen de nommer un objet dans le monde WWW. La syntaxe d'un URL est la

suivante :

t ype: ser veur : por t / chemi n_d' acces/ f i chi er #et i quet t e?par amet r es

Le type de serveur :

http :pour les URL provenant de serveurs WWW

gopher :pour les serveurs GOPHER

ftp :pour les fichiers transfrer

telnet :pour ouvrir une session interactive

wais :pour interroger une base WAIS

news :pour accder aux forums


5/40


6/40

3. Les dlimiteurs - H.T.M.L

Dans le texte que vous tapez, les espaces et les retours la ligne ne sont pas interprts par les

clients WWW.

3.1. Les dlimiteurs

Les dlimiteurs permettent d'arer et de formater le document.

Saut de paragraphe

Division de bloc

Saut la ligne

Insertion d'une ligne horizontale de sparation

Exemples :

Aprs cet t e l i gne un saut de par agr aphe

Apr s cel l e- ci un saut l a l i gne si mpl e
sur l a l i gne sui vant e.Ce text e est encadr par deux l i gnes hori zont al es

Rsultat :

Aprs cette ligne un saut de paragraphe

Aprs celle-ci un saut la ligne simple

sur la ligne suivante.

Ce texte est encadr par deux lignes horizontales


7/40

3.2. Liste de description

Dbut et fin de liste de description

Nom du terme

Description du terme dfini

Exemples:

Pr emi er t er meDescr i pt i on du premi er t er me

Cet t e descr i pt i on peut cont i nuer l a l i gne sui vant e
ai nsi de sui t e . . .

Second ter meDescr i pt i on du second t er me

Rsultat:

Premier terme

Description du premier termeCette description peut continuer la ligne suivante

ainsi de suite ...

Second terme

Description du second terme

3.3. Indentation de paragraphe

Exemple:

J e veux met t r e en avant l e paragraphe qui sui t :Nous pour r i ons peut - t r e t ous bi en nous entendr e avec des genspar f ai t s. Mai s not r e t che est de bi en nous ent endr e avec des gensi mpar f ai t s. ( Ri char d L. EVANS). . . gr ande vr i t !

Rsultat:


8/40

Je veux mettre en avant le paragraphe qui suit :

Nous pourrions peut-tre tous bien nous entendre avec des gens parfaits. Mais notre

tche est de bien nous entendre avec des gens imparfaits. (Richard L. EVANS)

... grande vrit !

Remarque:

Les commandes BLOCKQUOTEpeuvent s'imbriquer les unes dans les autres.

3.4. Prsentation d'un paragraphe en multi colonnes


9/40

4. Les styles - H.T.M.L.

Les titres de paragraphes peuvent tres visualiss en fonction de leur importance. Ils sont

reprsents par des fontes de caractres de diffrentes tailles, de la plus grande la plus petite

en voici un exemplaire de chaque.

4.1. Taille du texte

Une t r s gr ande tai l l e

Une trs grande taille

Une grande t ai l l e

Une grande taille

Une t ai l l e moyenne

Une taille moyenne

Une pet i t e t ai l l e

Une petite taille

Une t r s pet i t e t ai l l e

Une trs petite taille

Une t ai l l e vr ai ment mi nuscul e

Une taille vraiment minuscule

4.2. Attributs

Les caractres peuvent recevoir les attributs suivants :

ou ou Pour barrer du texte.

Exemple:

C' est BEAU et bar r


10/40

Rsultat:

C'est BEAU et barr

Pour souligner du texte.

Exemple:

Ceci n' est pas un l i en

Rsultat:

Ceci n'est pas un lien

Pour faire clignoter du texte.

Exemple :

C' est MAGI QUE ! ! !

Rsultat:

C'est MAGIQUE !!!

Pour intgrer du texte format dans une phrase.

Exemple :

Ceci est une phrase cont enant un t ext e f ormat

Rsultat:

Ceci est une phrase contenant unt exte f or mat

Cas d'un paragraphe format.

Il est inutile de forcer des csures de lignes.

Le texte apparat tel que vous le saisissez.

Exemple:

Sous DOS t apez l es commandes sui vantes

C: > MKDI R WI NSOCKC: > CD WI NSOCK


11/40

C: > COPY A: WI NSOCK. ZI P C:C: > PKUNZI P - D WI NSOCK

Rsultat:

Sous DOS tapez les commandes suivantes

C: > MKDI R WI NSOCKC: > CD WI NSOCKC: > COPY A: WI NSOCK. ZI P C:C: > PKUNZI P - D WI NSOCK

Les styles physiques

o

Pour mettre du texte en gras

Exemple:

Texte gras

Rsultat:

Texte gras

o

Pour mettre du texte en italique

Exemple:

Text e en i t al i que

Rsultat:

Texte en italique

Les styles logiques

L'initiative est laisse au client WWW

o Pour insister sur un texte (en gnral gras)

Exemple :

J'insiste


12/40

Rsultat:

J'insiste

o

Pour mettre du texte en valeur (en gnral italique)

Exemple:

Text e en val eur

Rsultat:

Texte en valeur

o Pour insrer une citation (en gnral italique)

Exemple:

Sui vez l e boeuf

Rsultat:

Suivez le boeuf

o Pour afficher une adresse (en gnral italique)

Exemple :

manas@uni ce. f r

Rsultat:

[email protected]


13/40

5. Les listes - H.T.M.L.

Il existe deux sortes de listes : non ordonne et ordonne

Les listes peuvent tre embotes.

Liste non ordonne

Liste ordonne

Elment de la liste

Exemple 1:

Ceci est une l i st e non ordonne de t ermes

Le t i t r e est cadr Ter me ATer me BTer me C

Rsultat:

Ceci est une liste non ordonne de termes

Le titre est cadr

Terme A

Terme B

Terme C

Exemple 2:

Ceci est une l i st e or donne i ncl uant une sous- l i st e or donneTer me ASous- l i st eTer me A- 1Ter me A- 2

Ter me BTer me C

Rsultat:


14/40

Ceci est une liste ordonne incluant une sous liste ordonne

1. Terme A

Sous liste

1. Terme A-12. Terme A-2

2. Terme B3. Terme C


15/40

6. Les caractres spciaux - H.T.M.L.

6.1. Les ingalits

Les caractres < , > , & et " tant interprts par HTML, les squences suivantes permettent

leur affichage.

&l t ; & &&quot ; "

Les espaces n'tant pas significatifs, le caractre permet de forcer un "blanc" autantque souhait

Exemple:

Les oiseaux gazouillent au printemps


Rsultat:Les oiseaux gazouillent au printemps


6.2. Les caractres accentus

HTML utilise le jeu de caractres ISO Latin-1 cods sur 8 bits et les caractres ASCII

cods sur 7 bits. Avec cette dernire codification les caractres accentus sont reprsents par

les squences suivantes :

&eacut e; &Eacut e; &ec i r c; &i uml ; &ccedi l ; &nt i l d e;

&AEl i g;


16/40

6.3. D'autres caractres utiles

Le caractre n'apparat pas avec tous les navigateurs, optez plutt pour l'image

.


17/40

7. Les images - H.T.M.L.

HTML permet d'insrer des images dans du texte. Ces images apparaissent dans le

corps du texte, mais aussi comme ancre, ou mme comme document rfrenc.

Les clients WWW Mosaic acceptent les formats d'images suivants :

XBM pour les images monochromes

GIF pour les images couleurs

Les clients WWW Netscape ou Internet Explorer acceptent en plus le format

JPEG pour les images couleurs

7.1. Les images dans le texte

La commandepermet d'insrer une image dans le texte.

Syntaxe:

Image adresse d'une image

Attribut "MI DDLE" "TOP" "BOTTOM" "LEFT" ou "RI GHT" Titre "Un titre" qui se substituera l'image pour les clients ne pouvant ou ne sachant

pas afficher des images (Lynx sur terminal VT100 par exemple). En effet, il est beaucoup plus

agrable pour ces utilisateurs de voir un message ou un caractre, au lieu de [ I MAGE]

hh nombre de pixels de sparation droite et gauche de l'image. (par dfaut hh=0)

vv nombre de pixels de sparation en haut et en bas de l'image. (par dfaut vv=0)

bb nombre de pixels de l'encadrement de l'image. (par dfaut il n'y a pas d'encadrement)

Exemple:

La chouet t eou La chouet t eEssayer aussi : La chouet t e La chouet t e chouet t e chouet t e


18/40

Rsultat:

La chouette


19/40

8. Les images ractives - H.T.M.L.

Une image ractive permet de lier des documents en fonction de la zone clique par

l'utilisateur. Le plus bel exemple est la carte de France ractive permettant de connatre rgion

par rgion tous les serveurs WWW.

(cf URL http://www.urec.cnrs.fr/annuaire/cartes/index.shtml ).

Voici deux mthodes pour fabriquer des images ractives.

1. La mthode anciennelie au serveur, et faisant appel au serveur lors de sonutilisation.

2. La mthode nouvelleautonome, toutes les informations ncessaires sonfonctionnement sont contenues dans la page HTML affiche par le client.

8.1. Les images ractives - H.T.M.L.(ancienne mthode)

Cette mthode ncessite l'intervention d'un programme excutable sur le serveur

imagemap(serveur NCSA) ou htimage(serveur CERN) dans le rpertoire/cgi-bin.

Trois lments indispensables :

un fichier image .gif un fichier carte .map correspondant l'image .gif

le programme excutable

Le premier lment est trouver par vos soins !!

Le dernier est fourni par le serveur WWW

Reste le fichier .map qu'il faut fabriquer

soit en utilisant des logiciels comme XV sur plateforme UNIX ou VMS (mais celareste relativement rbarbatif car il faut relever manuellement les zones qui seront

ractives),

soit le fin du fin en utilisant l'outil spcialis MAPEDIT qui fabrique selon vosdirectives ce fameux fichier .map

La syntaxe du contenu de ce fichier est la suivante :

zone ur l coor donnes, . . . , coor donnes

Les coordonnes des points de l'image sont dfinies en pixel suivant les axes x et y, l'origine

tant le point en haut et gauche de l'image.


20/40

Ce fichier contient une zone par ligne, il existe 3 types de zones : rectangle, cercle et

polygone, plus la zone "dfaut".

Les lignes de commentaires doivent commencer par un "#".

Type de zone Mot-clef Coordonnes

rectangle rect on dfinit les coordonnes de deux sommets oppos

cercle circleon dfinit les coordonnes du centre du cercle

et les coordonnes d'un des points de la circonfrence

polygone poly on dfinit les coordonnes de chaque sommet

dfaut default

Exemple:

Chaque utilisateur peut crer son espace html (voir l'administrateur du serveur). Il suffit de

crer un rpertoire public_html dans lequel on place ses propres fichiers html, images, etc ....

Deux zones sont dfinies dans un fichier : un rectangle autour du nez et un cercle autour du

menton.

Attention:

les URL doivent contenir l'adresse du serveur.

# Premi er essaidef aul t ht t p: / / nephi . uni ce. f r / Cour sHTML/ non. ht ml# On f i xe l e nezr ect ht t p: / / nephi . uni ce. f r / Cour sHTML/ nez. ht ml 54, 81 83, 107# On poi nt e sur l e ment on ( quand l es or ei l l es ! ! )ci r cl e ht t p: / / nephi . uni ce. f r / Cour sHTML/ ment on. ht ml 72, 126 82, 138

On utilise ces 3 lments ainsi :

Exemple:


21/40

Rsultat:

A vous de cliquer !

8.2. Les images ractives - H.T.M.L.(nouvelle mthode)

Cette mthode est maintenant la plus employe car elle est indpendante du serveur,

toutes les informations concernant les diffrentes zones sensiblesde l'image sont traites par

le client.

Deux lments indispensables :

un fichier image .gif ou .jpg

dfinir les zones ractives

Le premier lment est trouver par vos soins !!

Reste dfinir les zones ractives

soit en utilisant des logiciels commeXVsur plateforme UNIX ou VMS (mais celreste relativement rebarbatif car il faut relever manuellement les zones qui seront

ractives),

soit en utilisant un outil spcialis tel queMAPEDIT qui fabrique selon vosdirectives un fichier .map

La syntaxe du contenu de ce fichier est la suivante :

zone ur l coor donnes, . . . , coor donnes

Les coordonnes des points de l'image sont dfinies en pixel suivant les axes x et y, l'origine

tant le point en haut et gauche de l'image.

Il faudra donc adapter les donnes fournies dans ce fichier .map la syntaxe suivante :

Type de zone Mot-clef Coordonnes

rectangle rect on dfinit les coordonnes de deux sommets oppos

cercle circle on dfinit les coordonnes du centre du cercleet la longueur du rayon


22/40

polygone poly on dfinit les coordonnes de chaque sommet

dfaut default

Exemple:

Rsultat:


23/40

9. Les liens - H.T.M.L.

Une des fonctionnalits la plus agrable du langage HTML est la possibilit de crer

des liens vers d'autres documents. Ces documents peuvent tre des documents HTML, des

images, du son, des films, et des serveurs TELNET, WAIS, FTP et GOPHER. Le logiciel

client WWW prsente ce lien sous forme de mots souligns ou d'image encadre que l'on

appelle ancre ou lien. Ce lien est soit un fichier local, soit une URL(*).

Il existe quatre types principaux de liens :

9.1. Les liens vers un document complet distant

Syntaxe:

ancr e

Exemple:

pour accder aux pages du CRI - UNSA Le CRI U. N. S. A.

Rsultat:

Le CRI de l'U.N.S.A.

9.2. Les liens vers un document complet local

Syntaxe:

ancr e

Exemple:

pour accder une page d'essai locale Cl i quer ICI

Rsultat:

Cliquer ICI


24/40

9.3. Les liens vers une partie d'un document local

Syntaxe:

nom

pour df i ni r un poi nt de br anchement ancr e pour f ai r e l e l i en.

Exemple:

pour accder au paragraphe 3 du document local Par agr aphe 3 : Les souci s Not e [3]

Rsultat:

Note [3]

9.4. Les liens vers une partie du document courant

Syntaxe:

nom pour df i ni r un poi nt de br anchement

ancr e pour f ai r e l e l i en.

Exemple:

pour accder au mot "ANCRES" du document courant Les ancr es Voyons r et ournons au dbut du f i chi er

Rsultat:

Voyons r etour nons au dbut du f i chi er

9.5. Adresser un message lectronique

Syntaxes :

ancr e ou ancr e


25/40

Exemple 1 :

pour m'adresser un message lectronique Ecr i vez- moi ! !

Rsultat:

Ecr i vez- moi ! !

Exemple 2 :

pour m'adresser un message lectronique avec un sujet prdfini Ecr i vez- moi encor e ! !

Rsultat:

Ecr i vez- moi encor e ! !

Exemple 3 :

pour m' adr esser un message l ect r oni que avec un dest i natai r e secondai r e, undest i nat ai r e secondai r e "cache" ou "of f i ci eux" etun suj et pr df i ni Ecr i vez- nous. Nous sommes pl usi eur s ! !

Rsultat:

Ecr i vez- nous. Nous sommes pl usi eur s ! !


26/40

10. Les Formulaires - H.T.M.L.

Les clients volus supportent les formulaires.

Un formulaire est une fiche que l'utilisateur peut remplir, ces informations ainsi saisies sont

traites par le serveur WWW l'aide d'un programme CGI (Common Gateway Interface).

Un formulaire commence et finit par

avec ACTI ON = "progr amme execut abl e ou shel l "METHOD = GET

POST

Il existe plusieurs types de champs :

10.1. Bouton

avec TYPE = RADI O pour l es boutons mul t i pl esCHECKBOX pour l es cases cocherSUBMI T pour envoyer l e f or mul ai r e une f oi s r empl iRESET pour ef f acer l e cont enu du f ormul ai r e

NAME = "un nom" qui i dent i f i e l e boutonVALUE= "val eur " donne au bout on l orsqu' i l est sel ect i onnCHECKED si gnal e un bouton par df aut ( RADI O) ou

une case coche avant sai si e ( CHECKBOX)

TYPE = I MAGE i dent i que au SUBMI T mai s l e bout on est r empl acpar une i mage de vot r e choi x

NAME = "un nom" qui i dent i f i e l e boutonSRC = " i mage" nom du f i chi er i mageALI GN = BOTTOM val eur par df aut

LEFT, RI GHT, TOP, ABSMI DDLE, ABSBOTTOM,TEXTTOP, MI DDLE, BASELI NEsont l es aut r es val eur s possi bl es

10.2. Slection d'un fichier

avec TYPE = FI LE pour per met t r e l ' envoi d' un f i chi erNAME = "un nom" qui i dent i f i e l e champ t exte

10.3. Texte libre sur une ligne

avec TYPE = TEXT pour f ai r e sai si r du t ext e


27/40

PASSWORD l es caractres sai si s sont r epr sent espar des ' *'

HI DDEN l e champ est cach : ut i l e pour t r ansmet t r edes i nf or mat i ons non vi si bl es.

NAME = "un nom" qui i dent i f i e l e champ t exte

10.4. Texte libre sur plusieurs lignes

avec NAME = "un nom" qui i dent i f i e l e champ t exteROWS = nombre de l i gnes vi si bl esCOLS = nombre de col onnes vi si bl es

10.5. Menu

avec NAME = "un nom" qui i dent i f i e l e menu

r epr sente chaque choi x du menuavec SELECTED qui si gnal e l e choi x par df aut

10.6. Exemple de formulaire

ENQUETE sur l a SATI SFACTI ON des UTI LI SATEURS

Uni ver si t ai r e C. N. R. S. I . N. S. E. R. M. Aut r e PUBLI C Pr i v

Vos Nom et pr nom :

Vot r e adr esse l ect r oni que :

J e sui s bel l e/ beau,j eune,r i che,

en bonne sant

Vot r e opi ni on

Trs sat i sf ai tSat i sf ai tI ndi f f rentC' est nul ! !


28/40


29/40

11. Les tableaux - H.T.M.L.

HTML 3 permet la fabrication de tableaux trs visuels.

On utilise les commandes suivantes :

11.1. Dclarer le dbut et la fin d'un tableau

BORDER=

BORDER=0 l e t abl eau n' a pas de cont our BORDER=n l e t abl eau a un cont our d' pai sseur "n"

CELLPADDI NG=

Df i ni t l ' espace ent r e l ' obj et et l e cont our d' une cel l ul e

CELLSPACI NG=

Df i ni t l ' pai sseur du t ra i t ent re l es cel l ul es

WI DTH=

Fi xe l a l ar geur du t abl eau

HEI GHT=

Fi xe l a haut eur du t abl eau

BGCOLOR=

BGCOLOR="#RRGGBB"

Df i ni t l a coul eur de f ond de tout l e tabl eau. RR, GG et BB sont l esval eur s hexadci mal es du Rouge(RR) , Vert ( GG) et Bl eu( BB) .

11.2. Dfinir le dbut et la fin d'une ligne

ALI GN=

ALI GN=LEFT ( par df aut ) t out es l es cel l ul es de l a l i gne sont cadr es

gauche ALI GN=CENTER t out es l es cel l ul es de l a l i gne sont cent r es


30/40

ALI GN=RI GHT t out es l es cel l ul es de l a l i gne sont cadr es dr oi t e

BGCOLOR=

BGCOLOR="#RRGGBB"

Df i ni t l a coul eur de f ond des cel l ul es de cet t e l i gne. RR, GG et BBsont l es val eur s hexadci mal es du Rouge(RR) , Vert ( GG) et Bl eu( BB) .

11.3. Dfinit chaque lment de la ligne titre

Dcrit chaque lment du tableau

COLSPAN=

COLSPAN=n (par dfaut n=1) la cellule occupe ncolonnes.

ROWSPAN=

ROWSPAN=n (par dfaut n=1) la cellule occupe nlignes.

ALIGN=

ALIGN= alignement horizontal du contenu de la cellule.

ALIGN=LEFT (valeur par dfaut) alignement gauche de la cellule.

ALIGN=RIGHT alignement droite de la cellule.

ALIGN=CENTER centrage dans la cellule.

VALIGN=

VALIGN= alignement vertical du contenu de la cellule.

VALIGN=BOTTOM (valeur par dfaut) alignement au bas de la cellule. VALIGN=TOP alignement au sommet de la cellule.

VALIGN=CENTER centrage dans la cellule.

WIDTH=

WIDTH= largeur de la cellule en pourcentage ou en pixel.

BGCOLOR=

BGCOLOR="#RRGGBB"


31/40

Dfinit la couleur de fond de la cellule. RR, GG et BB sont les valeurs hexadcimales

du Rouge(RR), Vert(GG) et Bleu(BB).

11.4. Dcrit le titre du tableau

ALI GN=

ALI GN=TOP ( par df aut ) l a l gende du t abl eau est en haut ALI GN=BOTTOM l a l gende du t abl eau est en bas

Exemple:

Compar at i f modl e conomi queModl eVi t esse
en km/ heur eConsommat i on
en l i t r e/ 100 kmMar queTypeNumer o de sr i ePeugeot 106

B2234. 341325, 7Ci t r on AXAT67B867891265, 5

Rsultat:

Comparatif modle conomique

Modle

Marque Type Numero de srie

Vitesse

en km/heure

Consommation

en litre/100 km

Peugeot 106 B2 234.34 132 5,7

Citron AX AT67B8 6789 126 5,5


32/40

12. - H.T.M.L.

Netscape a implment le partage de la fentre en "cadres" ou "cellules" autonomes.

Ceci revient diviser la fentre en plusieurs zones appelesframes. Chaque zone est gre

indpendamment des autres. Chaque zone porte un nom.

Trois commandes permettent de grer cette fonctionnalit, mais attention le corps du

fichier n'est plus inclus dans et mais dans et.

permet de diviser une zone en cellules horizontales ou verticales.

ROWS="n, n%, *, . . . " divise la zone en cellules horizontales.

o n = hauteur en nombre de pixels

o n%= hauteur de la cellule en pourcentage de l'crano * = hauteur restante

COLS="n, n%, *, . . . " divise la zone en cellules verticales.

o n = largeur en nombre de pixelso n%= largeur de la cellule en pourcentage de l'crano * = largeur restante

BORDERpermet de supprimer (BORDER=0) ou d'agrandir la valeur du sparateur de cellules.

caractrise la cellule

NAME="nom_de_l a_zone" SRC="URL" SCROLLI NG="yes" ou "no" ou "auto" MARGI NWI DTH= nombre de pi xel s de l a mar ge ver t i cal e MARGI NHEI GHT= nombre de pi xel s de l a marge hor i zont al e NORESI ZE vi t e l a modi f i cat i on de l a t ai l l e par l ' ut i l i sat eur BORDER= nombr e de pi xel s du bord FRAMEBORDER="yes" ou "no" par df aut = "yes"

"yes" l e spar at eur est en 3- D"no" l e spar at eur est pl at

FRAMESPACI NG= nombre de pi xel s de l a sparat i on BORDERCOLOR="#RRVVBB" coul eur de l a sparat i on

partir de cette commande, le texte ne sera affich que par lesBrowsersne sachant pas grer

lesframes.

Pour utiliser les "frames", un nouvel attribut "TARGET" de la commande permet de


33/40

donner le nom de la cellule ( cf attribut "NAME" de la commande ) dans laquelle ledocument sera affich

l i en

TARGET="Cel l ul e- 1" af f i chage dans l a cel l ul e "Cel l ul e- 1" TARGET="_sel f " af f i chage dans l a mme cel l ul e TARGET="_bl ank" af f i chage dans une nouvel l e f ent r e TARGET="_t op" suppress i on de t outes l es frames, r et our un af f i chage

cl assi que

Exemple:

Le but de l'exemple est de fabriquer une page qui ressemble au tableau ci-dessous

Cellule droite-

hauteCellule

gaucheCellule droite-

basse

Dommage, vot r e Br owser ne per met pas l es f r ames.

Rsultat:


34/40


35/40

Color Red Green Blue A voir

aliceblue F0 F8 FF

antiquewhite FA EB D7

aqua 00 FF FF

aquamarine 7F FF D4

azure F0 FF FF

beige F5 F5 DC

bisque FF E4 C4

black 00 00 00

blanchedalmond FF EB CD

blue 00 00 FF

blueviolet 8A 2B E2

brown A5 2A 2A

burlywood DE B8 87

cadetblue 5F 9E A0

chartreuse 7F FF 00

chocolate D2 69 1E

coral FF 7F 50

cornflowerblue 64 95 ED

cornsilk FF F8 DCcrimson DC 14 3C

cyan 00 FF FF

darkblue 00 00 8B

darkcyan 00 8B 8B

darkgoldenrod B8 86 0B

darkgray A9 A9 A9

darkgreen 00 64 00

darkkhaki BD B7 6Bdarkmagenta 8B 00 8B

darkolivegreen 55 6B 2F

darkorange FF 8C 00

darkorchid 99 32 CC

darkred 8B 00 00

darksalmon E9 96 7A

darkseagreen 8F BC 8F

darkslateblue 48 3D 8Bdarkslategray 2F 4F 4F


36/40


37/40

mediumaquamarine 66 CD AA

mediumblue 00 00 CD

mediumorchid BA 55 D3

mediumpurple 93 70 DB

mediumseagreen 3C B3 71

mediumslateblue 7B 68 EE

mediumspringgreen 00 FA 9A

mediumturquoise 48 D1 CC

mediumvioletred C7 15 85

midnightblue 19 19 70

mintcream F5 FF FA

mistyrose FF E4 E1

moccasin FF E4 B5

navajowhite FF DE AD

navy 00 00 80

oldlace FD F5 E6

olive 80 80 00

olivedrab 6B 8E 23

orange FF A5 00

orangered FF A5 00

orchid DA 70 D6

palegoldenrod EE E8 AA

palegreen 98 FB 98

paleturquoise AF EE EE

palevioletred DB 70 93

papayawhip FF EF D5

peachpuff FF DA B9

peru CD 85 3F

pink FF C0 CBplum DD A0 DD

powderblue B0 E0 E6

purple 80 00 80

red FF 00 00

rosybrown BC 8F 8F

royalblue 41 69 E1

saddlebrown 8B 45 13

salmon FA 80 72sandybrown F4 A4 60


38/40

seagreen 2E 8B 57

seashell FF F5 EE

sienna A0 52 2D

silver C0 C0 C0

skyblue 87 CE EB

slateblue 6A 5A CD

slategray 70 80 90

snow FF FA FA

springgreen 00 FF 7F

steelblue 46 82 B4

tan D2 B4 8C

teal 00 80 80

thistle D8 BF D8

tomato FF 63 47

turquoise 40 E0 D0

violet EE 82 EE

wheat F5 DE B3

white FF FF FF

whitesmoke F5 F5 F5

yellow FF FF 00

yellowgreen 9A CD 32

13.4. Indice et exposant

HTML 3 permet indice et exposant.

et

Exemple:

F( x) =x2+2x+10

Rsultat:

F (x) = x2 + 2x + 10


39/40


40/40

"ABSBOTTOM"

LOOP= "true" ou "false"

Exemple:

Rsultat:

Regardez et apprciez Charmant n'est-ce pas ?

Documents

2 - Le Langage HTML