Langage HTML
DembaSOW
Doctorant en Cryptologie
Plan du cours
Les langages de programmation
Introduction au langage HTML
Les concepts fondamentaux du langage HTML
Les langages de programmation
Motivation
Langages interprétés
Les langages compilés
Le langage HTML
Motivation
Pourêtrecomprisparunordinateur,
un
algorithme
doitêtretraduitdansun
langagespécifique
qu’on
,
appelle
langagedeprogrammation
.Onobtientainsi
cequ’onappelleunprogrammeinformatiquequi
contientl’ensembledesactionsconsécutives
que
l’ordinateurdoitexécuter.Cesactionssontappelées
instructions
.
Lelangageutiliséparleprocesseurdel’ordinateur
est appelé
langagemachine
Unprogrammeen
.
langagemachineestuniquementconstituéd’une
Motivation
Il est difficile de comprendreet d’écriredes
programmesenlangagemachine.
Ainsiil estpluspratiquederéaliserunprogramme
dansunlangagepluscompréhensibleparl’homme
etdeletraduireensuiteenlangagemachineàl’aide
d’unprogrammespécialisé.
Selonlaméthodede
traduction,
ondistingueles
langagesinterprétéset
Langages interprétés
Unprogrammeécritdansunlangageinterprétéabesoin, pour chaqueexécution,d’unprogrammeannexeappelé
interpréteurquivalirelecodesourcepourtraduireetfaire
exécuteruneàune,chacunedesinterpréteurs.Danscecas,il n’yapasdegénérationdeprogrammeexécutable.
Les langages compilés
Danslecasd’unprogrammecompiléleprogrammeréalisé,, appeléprogrammesourceesttraduitcomplètementparce, qu’onappelleuncompilateuravantdepouvoirêtreexécuté. LacompilationgénèreunprogrammeditexécutableCe.
programmegénèreunprogramme,c'est-à-direqu’iln’apas
besoind’unautreprogrammepours’exécuter.Maisàchaque modificationdufichiersource(leprogrammesource)ilfaudra lerecompilerpourquelesmodificationsprennenteffet.
Le langage HTML:
Historique
La démocratisationdu WorldWideWeb, littéralementla largetoile d'araignéemondialeaengendrélanécessitéde développerdes sites,
Internetadaptésauxaspirationsdupublicenmatièredevisibilité,d'attraction et deconvivialitéet enadéquationavecles technologiesInternetdéjà
existantes.
Effectivement,laprésentationd'unepageWebsurlemodèleduDOSneserait certainementguèreappréciée.C'estpourquoi,l'organismeW3C(WorldWide
WebConsortium)chargédelastandardisationdestechnologiesduWeb,a élaboréunlangagededéveloppementappeléHTML(HyperTextMarket
Language)fonctionnantsurl'ensembledesplateformesexistantes;Windows, Linux,MacOS,etc., maiségalementdes navigateurs(browsers)comme
NetscapeCommunicator,InternetExplorer,Mozilla,etc.
Depuisl'adoptiondelaquatrièmeversionen1997,HTMLestdevenuunoutil dedéveloppementpuissantetincontournable.LaconceptiondespagesWeb estdevenued'uneextrêmesimplicitéàconditiondeconnaîtreauminimum lesbasesdecelangage.
Le langage HTML:
Définition
Lelangage
HTML
peutêtredéfini
commeunlangagede
programmationcompilélégerquiutilisedesbalisespour
mettreenformeles
textes
et les
images
avecdes
tableaux
,des
liens
…...
Demême,lelangage
HTML
estcapabledegérerlaquasi-totalitédesartificesduWebtelsque,évidemment
les
lienshypertextes,
les textesformatés,les images,les
vidéosouanimations,
lestableaux,lesformulaires,
les
cadres(frames),
lesscripts,lescaractèresspéciaux,
et
biend'autreschoses.
Introduction au langage HTML
Présentation de HTML
Les Outils
Les Balises et Attributs
Présentation de HTML
LelangageHTML«HyperTextMarkupLangage»estdéfinipar
leWorldWideWebConsortium(W3C)commeunlangagede descriptiondedocument.Il permetdeconcevoirdespages internetetd’établirdesliensentreellesafinderéaliserun siteinternetcomplet. HTMLestlelangagedebalisagehypertexteutilisédansle Web(HyperTextMarkupLanguage).Cen'estpasunlangage deprogrammationproprementdit.Cesont"simplement"des
balisespourmettreenforme(avecdesliens,entableau,
Les Outils
DenombreuxlogicielsdedéveloppementHTMLsontapparus surlemarchépermettantparfoisdeconcevoirunsiteWeb
completsansunemaîtriseparfaitedulangageHTML.
Bienqu'undocumentHTMLpeut-êtrerédigédansn'importe lequel des éditeursde texte commeNotepadpuis de
renommerlefichier *.txten*.htmou*.htmlquandvous serezaguerrisilestconseilléd'utiliserunlogicieldédiéàcet emploiafindeprofiterdesfonctionnalitésetdesassistants quelaplupartoffre.
Les Outils
Voici quelques uns des éditeurs HTML:
WebExpertestpriséparlesprofessionnelsetconstituelemeilleur rapportqualité/prix.
Frontpagesedestineàunlargepublicet demeureconvivialeet simple.
HotMetalProestreconnucommelemeilleurmaiségalementleplus onéreux.
HotDogdédiéàlafois auxwebmasterschevronnéscommeaux novicesdudéveloppementweb.
Les Outils
EnbrefpourcréerunepageWebenHTML,vousavezbesoinde:
UnéditeurHTML (NotepadouWordPadferatrèsbienl'affairepar exemple),pourcréervotrepageHTML; Unnavigateur(InternetExplorer,Netscape,Mozilla,etc...),pourvisualiser lerésultat; NB:vousn'aurezpasbesoind'êtreconnectéàInternetpourcréer votresite.
Les Balises et Attributs
Définitions
Présentation des balises usuelles
Balises simples
Définitions
Les balisessont des instructions HTML. Elles sont reconnaissables à leur forme particulière.
En effet, chacune est encadrée par les signes
inférieur à (" <") supérieur à (" > "). <Instruction HTML>
De plus, les balises permettent l'ouverture et la fermeture d'une instruction HTML
Une barre oblique, le slash(" /") en l'occurrence, différencie les deux types de balises.
La balise <...>marque le début de l'instruction. La balise </...>marque la fin de l'instruction.
<Instruction HTML>... Diverses éléments HTML ...</Instruction HTML> Exemple1:<b>mon texte en gras (bold) </b>.
Définitions
Lenomdelabalise(contenuentrelescrochets)n'estpassensibleàlacasse.Il
peutêtreécritindifféremmentenmajuscule,enminusculeouenunmélange desdeux.
L'attributd'unebalisepeut êtredéfini commeunevariablequiexisteà l’intérieurdalabalise.
Ilsemetsouslaformesuivante:nom_attribut="valeur"
Exemple:
Labaliseutiliséepourfaireunlien,apournom"a",etpournomd'attribut"href".
Ainsi,<ahref="http://www.google.fr">Google</a>permetdefaireunlienversla pageprincipaledusitedeGoogle.
Présentation des balises usuelles
Ouvrirunéditeur detextepuis saisissezle programme suivant:
Sauvegardezledocumentaveccommeextension".htm"ou
".html",et commetype"texteseulement"; puisdouble-cliquezsurledocument:votrenavigateurpar défautsera alorsouvertsurlapage.
<html>
<head>
<title>Mon titre</title> </head>
<body>
Voici mon premier document!
</body> </html>
Présentation des balises usuelles
Explications des nouvelles balises utilisées:
Lesbalises<html>et</html>:informentvotrenavigateurqu'ils'agitd'unepage
HTML;lapremièrebalisedoitdoncêtrelapremièredevotrecode,etlaseconde
doitêtreladernière.
Lesbalises<head>et</head>:informentvotrenavigateurqu'ils'agitdel'en-tête devotrepage;cetteen-têtedevotrepagecomprendpourl'instantletitredevotre page;labalise<head>esttoujoursplacéejusteaprèslabalise<html>.
Lesbalises<title>et</title>informentvotrenavigateurqu'il: s'agitdutitrede
votrepage;cetitreseraplacédanslabarretoutau-dessusdevotrenavigateur;ces balisesdoiventsesitueràl'intérieurdelabalise"head",c'est-à-direentre<head> et</head>.
Lesbalises<body>et</body>:informentvotrenavigateurqu'ils'agitducorpsde votredocument;c'estlàquevousallezplacertextes,images,ettoutceque
contiendravotrepage;labalise<body>doitsesitueraprèslabalisedefermeture del'en-tête</head>.
Présentation des balises usuelles
Remarque :
On peut donc faire une première constatation
lecoded'unepagewebestcomposédedeuxparties, l'en-têtedelapage(HEAD)etlecorps(BODY);
etseullecorpsdelapageestaffichéàl'l'écran:dansvotre premièrepage,il n'yaquelaphrase "Voicimonpremierdocument!"
Balises simples
<br>: passage à la ligne. Cette balise n’a pas de balise de fermeture;
<b>: mettre un texte en gras(bold);
<i>: mettre un texte en italique;
<u>: soulignerun texte (underline);
<center>: centrerun texte; etc...
Exemple:
Saisissez cette phrase dans votre texte puis exécutez le programme:
<center> <b><u>Mon texte </u></b><br> Et la suite... </center>
Les commentaires:
<! --ceci est un commentaire dans mon fichier HTML -->
Les balises de mise en forme
La balise de couleur
La balise de taille
Les listes
Les balises de mise en forme
La balise de couleur
<font color="red"> Mon texte </font>
Cette balise nous affiche une phrase « Montexte» en couleur
rouge.
D’autres couleurs sont disponibles mais l’écriture se fait en anglais.
Exemple:
Les balises de mise en forme
La balise de couleur
<body bgcolor="red"> Mon texte </body>
L’attributdecettebalisebodynous afficheunepageen couleurrouge
D’autres couleurs sont disponibles mais l’écriture se fait en anglais.
Exemple:
Les balises de mise en forme
La balise de taille
Taille absolue (de 1 à 7):
<font size=1>Montexte</font> <font size=2>Mon texte</font> <font size=3>Montexte</font> <font size=4>Montexte</font> <font size=5>Montexte</font> <font size=6>Mon texte</font> <font size=7>Montexte</font>
Taille relative:
<font size=-2>Mon texte</font> <font size=-1>Montexte</font> <font size=+1>Montexte</font> <font size=+2>Montexte</font>
Les balises de mise en forme
La balise de taille <H1>Montexte</H1> <H2>Montexte</H2> <H3>Montexte</H3> <H4>Montexte</H4> <H5>Montexte</H5> <H6>Montexte</H6>Les balises de mise en forme
Les listes
Saisissez ce petit programme dans un éditeur de texte puis le compilé:
<UL> <LI> Ligne 1 <LI> Ligne 2 <OL> <LI> Sous-Ligne 2.1 <LI> Sous-Ligne 2.2 </OL> </UL>
Les balises de mise en forme
Les listes
Explication
<OL>correspondauxlistesnumérotées(OrderedList);
<UL>correspondauxlistesàpuces(UnorderedList);
<LI>sertàspécifierqu'ondémarreunnouvelélémentdeliste;
NB:ànoterque</LI>existeégalement,maisn'estpasnécessaire,
car supposéfermeràl'ouverturedu<LI>suivant,ouàla
Les balises de mise en forme
Les listes
Les attributs des listes:
a<oltype="a"> b<oltype="a"> i <olstyle="list-style-type: lower-roman"> ii <olstyle="list-style-type: lower-roman"> I <olstyle="list-style-type: upper-roman"> II <olstyle="list-style-type: upper-roman"> a<olstyle="list-style-type: lower-alpha"> b<olstyle="list-style-type: lower-alpha"> A<olstyle="list-style-type: upper-alpha"> B<olstyle="list-style-type: upper-alpha">
Les balises de mise en forme
Les listes
Les attributs des listes:
<ultype="disc"> <ultype="disc"> <ultype="circle"> <ultype="circle"> <ultype="square"> <ultype="square">
Les balises de mise en forme
Quelques balises d’animation
<marquee>instructions</marquee>
Cette balise nous permet de défilerles instructions saisies au clavier.
Exemple: <marquee bgcolor="yellow" width="40%" direction="right" loop="0"> Bonjour Monde </marquee>
<blink>instructions</blink>
Cette balise nous permet de clignoterles instructions saisies au clavier.
Les balises de mise en forme
Quelques attributs des balises
Attributs Valeurs Description
Href URL Indique l'adresse URL d'une ressource externe Target _blank
_self _top
_parent
Indique le cadre cible pour afficher le document.
bgcolor -RED
-YELLOw….
Donne une couleur au fond du document HTML.
name nom Indique le nom du document
type -button
-text
-submit…
Les balises de mise en forme
Quelques attributs des balises
Attributs Valeurs Description
backgroundAdressede l’image
Permet l’affichage d’une image en arrière plan bgproperties-fixed Empêche l’image précitée de défiler avec le
contenu du document onload Nomde la
fonction
Ouvre une fonction JavaScript à l’affichage de la page
ounload Nomde la fonction
Ouvre une fonction JavaScriptà la sortie de la page
align -left
-right
-center…
Les balises de mise en forme
Quelques attributs des balises
Attributs Valeurs Description
width valeur Spécifie une largeur de la ligne color couleur Applique une couleur à la ligne size valeur en pixelDonne l’épaisseur de la ligne
Le Document HTML minimum
Exercice:Ecrire un programme HTMLqui nous permet d’afficher la page web ci-dessus en couleur jaune.
«Bonjour et bienvenue»(défiler et mettre en gras cette instruction) Table des matières(clignoter et centrer cette instruction)
I. CHAPITRE 1:Généralités A. Historique
B. Présentation
II.CHAPITRE 2:Leslangages 1. Introduction
2. Objectifs
₀ Démarche
Les concepts fondamentaux du
langage HTML
Les concepts fondamentaux du
langage HTML
Les liens
Les tableaux
Les formulaires
Les frames
Les liens
Les chemins d’accès
Définition et intérêts des liens
Types de liens
Les liens
Les chemins d’accès
Les chemins d'accès peuvent être:
absolus:c'est-à-dire qu'on spécifie l'adresse complète de ce à quoi on fait référence.
Exemple: C:\Images\mon_image.gif pour une image ou http://www.google.fr
pour un site.
relatifs:la référence est faite par rapport à l'endroit où l'on se trouve.
Exemple:.\mon_image.gif ou .\maPage.html désignant des fichiers situés dans le même répertoire que le fichier qui y fait référence.
Les liens
Définition et intérêts des liens
Leslienssontdespanneauxd’indicateursquinouspermettent deparcourirdespageswebliés.
Enconséquence,lesliensprennentuneplaceprépondéranteet
essentielledanslefonctionnementglobalduWorldWideWeb.
Lesliensassurent,donc,lafonctiondeguiderl'internautedans ses navigationset delui donnerles moyensdemener ses
investigationsenallantrecueillirdesinformationsautravers d'unemultitudedepagesoudesites.Celademeureleprincipe fondamentald'Internet.
Les liens
Types de liens
Il existe plusieurs types de liens:
Les liens hypertextes Les liens hyper images Les liens locaux
Les liens
Les liens hypertextes
Les liens hypertextes sont des liens construits sur du texte. L'utilisateur devra cliquer sur un mot ou un groupe de mot pour activer un renvoi vers un document cible.
La commande
<ahref="chemin d’accès "> Texte </a>
Les liens
Les liens hyper images
Les liens hyper imagessont des images qui servent de liens vers un document cible.
Ces liens fonctionnent exactement de la même manière que les liens hypertextes.
La commande suivante définit le lien vers une page sur le Web :
Les liens
Les liens hyper images
Exemple:
Après avoir créé une page web, saisissez le programme suivant qui nous permet d’aller dans la première page à travers un lien image .
<html> <head>
<title> Page de liens des images</title> </head>
<body>
<a href=" chemin d’accès "><imgsrc="Adresse de l'image"></a> </body>
Les liens
Objectif des liens hyper images
En effet, les imagesoffrent à l'utilisateurune surface cliquableplusoumoinslargeselonleursdimensions.
Par conséquent, un découpage en zones distinctes d'un élément graphique peut être un atout indéniable.
Imaginonsunutilisateurayantbesoindefabriquerdesliens parrapportauxrégionsduSénégal,danscetteoptique,illui suffiraitdetrouveruneimageadéquatepuisdeluiappliquer des zonesde sensibilitésdifférentesafinde créer une
Les liens
Les images en coordonnées:
La balise mapentame la définition des zones sensibles de l'image.
La balise areapermet de décrire une zone sensible. Les attributs de cette balise sont:
shape="Forme"
coords="Coordonnées" href="Adresse cible"
Les liens
Les images en coordonnées
Forme Description Coordonnées Exemple
rect Définit une zone
rectangulaire X1, Y1 = Coin supérieur gauche X2, Y2 = Coin inférieur droit <area shape="rect" coords="X1, Y1, X2, Y2“ href="doc.htm">
circle Définit une zone circulaire X, Y = Centre du cercle
R = Rayon du cercle
<area shape="circle" coords="X, Y, R" href="doc.htm">
polygon
Définit une zone polygonale
X1, Y1 = Premier point du polygone
X2, Y2 = Second point du polygone
Xn, Yn= Nième point du polygone <area shape="polygon" coords="X1,Y1,X2,Y2 ,X3,Y3« href="doc.htm">
Les liens
Les liens locaux
Les liens internes permettent de créer des renvois à l'intérieur du même document HTML.
Pour faire fonctionner ces liens, il suffit de déclarer une ancre
dans le document puis de créer le renvoi vers cette ancre.
La commande <aname="Nom d'ancre">définit l'ancre à
atteindre.
La commande <ahref="#Nom d'Ancre">définit le lien.
Les liens
Les liens locaux
Exemple:Saisissez le programme suivant :
<html>
<head>
<title>Un titre pertinent</title> </head>
<body>
<a name="Debut"></a>
<a href="#bas">Bas de page</a><br>
"copiezun textedanscettepartiedu programme“ <a name="bas"></a>
<a href="#Debut">Revenir</a> </body>
Les tableaux
DéfinitionLes tableauxsont définis avec la balise <table>. Le tableauest divisé en lignespar la balise <tr>.
Chaque ligneest divisée en cellulespar la balise <td>.
<table>et</table>serventrespectivementàouvrirunenouvelle table,etfermerlatablecourante; <tr>et</tr>serventàdéfinirunelignedutableau; <td>et</td>serventàdéfinirunecelluledutableau(ànoterque </TD>n'estpasindispensable,pourlamêmeraisonque</LI>). <th>et</th>serventàdéfiniruntitredeligneoudecolonne(le texteapparaîtalorscentréengrasdanslacellulecorrespondante);
Les tableaux
Les attributs de la balise <table>
Danscettepartienousallonsénumérerlesattributsdelabalise tablequisontlesplusutilisés:
L’attribut«border»quinouspermetdedéfinirlabordure
d’untableau.Cetattributprendcommevaleurlesnombres
entiers(0,1,2,3,...).
L’attribut«bordercolor»nouspermetdedéfinirlacouleur delaborduredutableau.Cetattributprendcommevaleur lescouleursenanglais.
L’attribut«bgcolor»nouspermetdedonnerunecouleurde fonddutableau.
Les tableaux
Exemple:
Saisissez le programme suivant qui nous permet d’afficher un tableau:
<html> <head>
<title>Page tableau</title> </head>
<body>
<table border=1 bgcolor="red">
<caption>Mon tableau</caption> <tr> <th>Nom 1</th> <th>Nom 2</th> </tr> <tr> <td>Cellule 1</td> <td>Cellule 2 </td> </tr> </table> </body> </html>
Les formulaires
Définition
LeformulairedansunepageHTML,permetdetransmettre desinformationsfourniesparl'utilisateurversunserveur. Leformulaireauseind'unsiteWebpeutêtreutilisépour récupérerdesinformationssurl'utilisateurdanslebutde fairedesstatistiquessurletypedefréquentationoule
tauxdesatisfaction.
Lacommande<form>marqueledébutduformulaire. Lacommande</form>marquelafinduformulaire
.
Les formulaires
Les attributs de la balise <form>
Labalise<form>possèdedifférentsattributsspécifiantson
nom,uncadrededestinationaprèslasoumissionduformulaire. L'attributname="Nomduformulaire"définitunnom
pourleformulairecourant.
L'attributtarget="Nomducadre"définitlecadre
destinatairequidoitafficherlesrésultatsduformulaire. L'attributmethod="Typedetransmission"définitle
typedetransmission.
L'attributaction="Adressecible"définit l'adresse
Les formulaires
Les types de transmission
Il y a deux méthodes d'accès au serveur http, GETet POST
LaméthodeGETfaitensortequel'informationpasseparla variableQUERY_STRINGpourinterpréterles données.Elle permetdetransférer unefaible quantitédedonnées au serveur.
LaméthodePOSTpermetd'envoyerdes informationsplus importantesau serveuravec une quantitéde données importantes,etcelaentouteconfidentialité.
Remarque:Dans tous nos programme nous utilisons que de la méthode
Les formulaires
Exemple:
Saisissez le programme suivant qui nous permet d’afficher un formulaire
<html> <head>
<title>Page formulaire</title> </head>
<body>
<form action=“page1.html” method=“post”>
<center><input type=“submit” value=“Voirla page”></center> </form>
</body> </html>
Remarque:Vous devez construire la page1.htmlqui est la valeur de l’attribut « action».
Les formulaires
Les zone de texte multi-lignes
Les balises<textarea>«instructions»</textarea>nous
permettentdedéfinirunezonedetexteavecplusieurslignes. Lesattributsdelabalise<textarea>lesplusimportantssont:
L’attribut«rows»définitlenombredelignes. L’attribut«cols»définitlenombredecolonnes.
Les formulaires
Les zone de texte multi-lignes
Exemple:
Changez le programme précédent en mettant une zone de saisie. <html>
<head>
<title>Page formulaire</title> </head>
<body>
<formaction=“page1.html” method=“post”> <center>
<h1>La zone de texte pour saisir</h1><br>
<textarearows=“15” cols=“15”></textarea><br><br><br> <input type="submit" value="Voir a page1">
</center> </form>
</body> </html>
Les formulaires
Les select
Lesselectdéfinissentunelistedechoixaffichantunesérie d'itemssousformesoitdelistedéroulante,soitdeliste
simple.
Lacommande<select>définitunelistedechoix. Lacommande</select>fermelalistedechoix.
Les formulaires
Les select
Quelques attributs de la balise
<select>
L'attribut name="Nom du champ" spécifie un nom pour l'élément. L'attribut size= " Valeur " définit le type de liste et le nombre
d'items.
L'attribut multiplepermet de créer une liste à choix multiple.
L'attribut tabindex="Nombre"définit la position de la liste dans l'ordre de tabulation.
Les formulaires
Lesselect
Les balises <option> ”choix” </option>
La balise <option> déclare une entrée dans la liste. La balise </option> ferme l'entrée précitée.
L’attribut“selected”estun attributde la balise<option> qui nous permetde définirunesélectionpar défaut.
Les formulaires
Les select Exemple: La listedéroulante Saisissezle programmesuivant: <html> <head><title>Page formulaire</title> </head>
<body>
<select >
<option selected> Premier item </option> <option> Second item </option>
<option> Troisième item </option> <option> Quatrième item</option> <option> Cinquième item </option> </select>
</body> </html>
Les formulaires
Les select Exemple: La listesimple Saisissezle programmesuivant: <html> <head><title>Page formulaire</title> </head>
<body>
<select size=6>
<option selected> Premier item </option> <option> Second item </option>
<option> Troisième item </option> <option> Quatrième item</option> <option> Cinquième item</option> </select>
</body> </html>
Les frames
La structure
Les cadres(frames)permettentde fractionnerla surface
d'affichageenplusieurspartiesafind'afficherdifférentespages
HTMLsimultanémentdanslenavigateur.
Cescadresserventnotammentàafficherd'uncôtéunesériede lienscommeunmenuouunsommaireetdel'autrecôtédes
pagescontenantdesinformationsenrelation.
Lacommande<frameset>marqueledébutdeladéfinitiondes cadres.
Lacommande</frameset>marquelafindeladéfinitiondes
Les frames
La créationLes cadres sont créés au sein des balises <frameset>.
Labalise<frame>créeuncadredansledocumentHTML. Cette balise possèdedeux attributsessentiels,un
spécifiantlapagecibleetl'autredéfinissantunnompour lecadre.
L'attribut src="Adresse du contenu" définit le contenu du cadre. L'attribut name="Nom du cadre" permet de nommer le cadre.
Les frames
Quelques attributs de<frameset>L'attribut cols="Largeur1,Largeur2"définit une largeur pour les cadres.
L'attribut rows="Hauteur1,Hauteur2"définit une hauteur pour les cadres.
Remarque:
Les valeursde cesattributssonten pourcentage.
Les frames
Exemple:
<html>
<head>
<title>Un titrepertinent</title> </head>
<frameset cols="20%,80%"> <frame>
</frameset> </html>