[PDF] Cours développement Web avec le langage HTML de A à Z - Cours HTML

72  10  Download (0)

Texte intégral

(1)

Langage HTML

DembaSOW

Doctorant en Cryptologie

(2)

Plan du cours

Les langages de programmation

Introduction au langage HTML

Les concepts fondamentaux du langage HTML

(3)
(4)

Les langages de programmation

Motivation

Langages interprétés

Les langages compilés

Le langage HTML

(5)

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

(6)

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

(7)

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.

(8)

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.

(9)

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.

(10)

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.

(11)
(12)

Introduction au langage HTML

Présentation de HTML

Les Outils

Les Balises et Attributs

(13)

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,

(14)

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.

(15)

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.

(16)

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.

(17)

Les Balises et Attributs

Définitions

Présentation des balises usuelles

Balises simples

(18)

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>.

(19)

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.

(20)

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>

(21)

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>.

(22)

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!"

(23)

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 -->

(24)

Les balises de mise en forme

La balise de couleur

La balise de taille

Les listes

(25)

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:

(26)

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:

(27)

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>

(28)

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>

(29)

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>

(30)

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

(31)

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">

(32)

Les balises de mise en forme

Les listes

Les attributs des listes:

<ultype="disc"> <ultype="disc"> <ultype="circle"> <ultype="circle"> <ultype="square"> <ultype="square">

(33)

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.

(34)

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…

(35)

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…

(36)

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

(37)

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

(38)

Les concepts fondamentaux du

langage HTML

(39)

Les concepts fondamentaux du

langage HTML

Les liens

Les tableaux

Les formulaires

Les frames

(40)

Les liens

Les chemins d’accès

Définition et intérêts des liens

Types de liens

(41)

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.

(42)

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.

(43)

Les liens

Types de liens

Il existe plusieurs types de liens:

Les liens hypertextes Les liens hyper images Les liens locaux

(44)

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>

(45)

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 :

(46)

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>

(47)

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

(48)

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"

(49)

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">

(50)

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.

(51)

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>

(52)

Les tableaux

Définition

Les 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);

(53)

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.

(54)

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>

(55)

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

.

(56)

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

(57)

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

(58)

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».

(59)

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.

(60)

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>

(61)

Les formulaires

Les select

Lesselectdéfinissentunelistedechoixaffichantunesérie d'itemssousformesoitdelistedéroulante,soitdeliste

simple.

Lacommande<select>définitunelistedechoix. Lacommande</select>fermelalistedechoix.

(62)

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.

(63)

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.

(64)

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>

(65)

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>

(66)

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

(67)

Les frames

La création

Les 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.

(68)

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.

(69)

Les frames

Exemple:

<html>

<head>

<title>Un titrepertinent</title> </head>

<frameset cols="20%,80%"> <frame>

</frameset> </html>

(70)
(71)

Hébergement d’un site web

(72)

Figure

Updating...

Références

Updating...