[PDF] Cours de formation PDF pour apprendre créer des pages web avec le langage HTML - Cours développement web

84  40  Download (14)

Full text

(1)

Cours d

(2)

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML 

 Le Le HTMLHTML ((HyperTextHyperText MarkupMarkup Language) est un format de Language) est un format de

pr

préésentation de donnsentation de donnéées permettant de crées permettant de créer des er des pages pages web

web pouvant être lues dans des pouvant être lues dans des navigateursnavigateurs..



 C'est un langage de description de donnC'est un langage de description de donnéées, et non un es, et non un

langage de programmation

langage de programmation. Il est figé. Il est figé c.c.àà.d. qu'une fois le .d. qu'une fois le document charg

document chargéé dans le navigateur, il ne rdans le navigateur, il ne réépond pond àà aucune aucune action de l'utilisateur sur le contenu de la page.

action de l'utilisateur sur le contenu de la page.



 Ce langage est pourvu d'un systèCe langage est pourvu d'un système de me de balisagebalisage qui va qui va

permettre de structurer le document. permettre de structurer le document. Il utilise une Grammaire

Il utilise une Grammaire àà base de Marqueurs ou Balisesbase de Marqueurs ou Balises



(3)

      

 Une balise HTMLUne balise HTML est un est un éélléément que l'on va ajouter au ment que l'on va ajouter au

texte

texte àà afficher pour dire au navigateur de quelle manièafficher pour dire au navigateur de quelle manière re l'afficher.

l'afficher. Elle n'est pas affichElle n'est pas affichéée telle quelle dans le e telle quelle dans le navigateur, elle est interpr

navigateur, elle est interprééttéée par celuie par celui--ci.ci.

       

syntaxe

syntaxe

::

<BALISE>

<BALISE>

(Balise standard )(Balise standard )

-- Une balise est toujours déUne balise est toujours délimitlimitéée par les signes e par les signes

<

<

et et

>

>

-- Chaque balise ouverte doit être fermChaque balise ouverte doit être ferméée, cependant il e, cependant il existe des exceptions

existe des exceptions

       

exemple

exemple

: :





Balises HTML

Balises HTML

(4)

      



Attributs d

Attributs d

une balise

une balise

::

-- informations complinformations compléémentaires mentaires caractcaractéérisant une baliserisant une balise..

-- Une baliseUne balise peut comporter de zépeut comporter de zéro ro àà plusieurs attributsplusieurs attributs..

forme

forme

:

:

nom_attribut

nom_attribut

="

="

valeur

valeur

"

"

exemple

exemple

: <html

: <html

lang

lang

="

="

fr

fr

">

">





Balises HTML

Balises HTML

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML

(5)

Deux types de balises

Deux types de balises ::



balises simples

balises simples

Balises dites "vides":

Balises dites "vides": ne contiennent aucune autre balise HTMLne contiennent aucune autre balise HTML

Ces balises n'ont pas besoin d'être ferm

Ces balises n'ont pas besoin d'être ferméées. es.

exemple

exemple

<

<imgimg srcsrc="adresse_de_l="adresse_de_l’’image"> image"> (insertion d(insertion d’’une image)une image)



balises doubles

balises doubles

Deux balises

Deux balises ouvrantes/fermantes, entre lesquelles sont ouvrantes/fermantes, entre lesquelles sont situ

situéées d'autres balises ou du texte. es d'autres balises ou du texte. La balise fermante: identique

La balise fermante: identique àà la balise ouvrante.la balise ouvrante. contient un "/" pour indiqu

contient un "/" pour indiquer la fermeture. er la fermeture.

exemple

exemple

::



(6)

      



Document HTML de base

Document HTML de base

<html> <html>

<

<headhead>> <

<titletitle> > …… </</titletitle>> </

</headhead>> <body> <body>

<!

<!---- Ici votre siteIci votre site ---->>

</body> </body> </html>

</html>





Structure d

Structure d

un document HTML

un document HTML

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML

la balise <html>. Elle encadre l'ensemble des autres balises.

<head>: va contenir tout l'en-tête de la page (Informations diverses:

auteur, titre, version, scripts, variables ... )

<body>: contenu ou corps du document.

(7)





L

L

entête du document

entête du document

-

-

Head

Head

La balise

La balise <<headhead>> contient de nombreux renseignements contient de nombreux renseignements sur la page, sur l'auteur

sur la page, sur l'auteur ......

     

 Le titre de la pageLe titre de la page

entre les balises <

entre les balises <title> et </title> et </titletitle>> Tr

Trèès important : s important :



 ApparaîApparaît dans la barre de titre du navigateur.t dans la barre de titre du navigateur.



 Son contenu sera affichéSon contenu sera affiché en titre des réen titre des résultats de lasultats de la recherche dans les moteurs de recherche

recherche dans les moteurs de recherche

---> mettre le maximum de mots> mettre le maximum de mots--clefs importants.clefs importants.

<

(8)





L

L

entête du document

entête du document

-

-

Head

Head

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML

exemple

exemple

:

:

<HTML> <HTML> <HEAD> <HEAD> <TITLE>

<TITLE>courscours HTML HTML –– ENSA 1ENSA 1èère annre annéée</TITLE>e</TITLE> </HEAD>

</HEAD> </HTML>

(9)





Le corps du document

Le corps du document

-

-

Body

Body

La balise <body> va contenir tout le texte et toutes les La balise <body> va contenir tout le texte et toutes les

images affich

images affichéés dans la page web.s dans la page web.

<HTML> <HEAD>

<TITLE>cours HTML – … </TITLE> </HEAD>

<body>

entre les "body" se situe le corps du code </body>

(10)





Le corps du document

Le corps du document

-

-

Body

Body

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML       

 Les paragraphes de texteLes paragraphes de texte

      

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux      

 Les listesLes listes       

 Les images et zones rLes images et zones rééactivesactives       

 Les formulairesLes formulaires       

 Les liens hypertextesLes liens hypertextes       

(11)

















B

B

alise <p> </p>

alise <p> </p>

-- Permet la segmentation du texte en paragraphes.Permet la segmentation du texte en paragraphes.

-- PréPrécise ocise oùù commence un paragraphe et oùcommence un paragraphe et où il se termine.il se termine.

Exemple

Exemple

:: <HTML> <HTML> <HEAD> <HEAD> <TITLE>cours HTML

<TITLE>cours HTML –– ENSA 1ENSA 1èère annre annéée</TITLE>e</TITLE> </HEAD>

</HEAD>

<body>

<body>

Ce texte est constitu

Ce texte est constituéé de trois paragraphesde trois paragraphes <p>Voici le deuxi

<p>Voici le deuxièème paragraphe</p>me paragraphe</p> <p>et un troisi

<p>et un troisièème paragraphe</p>me paragraphe</p> </body>

</body>



(12)

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L



(13)





Le corps du document

Le corps du document

-

-

Body

Body

      

 Les paragraphes de texteLes paragraphes de texte

      

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux      

 Les listesLes listes       

 Les images et zones rLes images et zones rééactivesactives       

 Les formulairesLes formulaires       

(14)





Body

Body

La mise en forme de texte

La mise en forme de texte

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L Paragraphe align

Paragraphe alignéé àà droitedroite <P

<P alignalign=right>...</P>=right>...</P>

Paragraphe align

Paragraphe alignéé àà gauchegauche <P

<P alignalign==leftleft>...</P>>...</P>

Paragraphe centr

Paragraphe centréé <P

<P alignalign=center>...</P>=center>...</P>

Nouveau paragraphe

Nouveau paragraphe

<P>...</P>

<P>...</P>

Aligne l'

Aligne l'éélléément ment àà droitedroite <DIV

<DIV alignalign=right> ...</DIV>=right> ...</DIV>

Aligne l'

Aligne l'éélléément ment àà gauchegauche <DIV

<DIV alignalign==leftleft> ...</DIV>> ...</DIV>

Centre l'

Centre l'éélléément encadrment encadréé par le tagpar le tag <DIV

<DIV alignalign=center> ...</DIV>=center> ...</DIV>

Centre tout

Centre tout éélléément compris dans le tagment compris dans le tag <CENTER>...</CENTER>

<CENTER>...</CENTER>

Bloc en retrait

Bloc en retrait -- DDéécalagecalage

<BLOCKQUOTE> </BLOCKQUOTE>

<BLOCKQUOTE> </BLOCKQUOTE>

Retour

Retour àà la lignela ligne <BR>

<BR>

Commentaire ignor

Commentaire ignoréé par le navigateurpar le navigateur <!

(15)



 BBalise alise <b> <b> </b>: texte en gras</b>: texte en gras

<b>Ce texte s'affichera en gras</b> <b>Ce texte s'affichera en gras</b>



 Balise Balise <i> <i> …… </i>: texte en italique</i>: texte en italique

<i>Ce texte s'affichera en italique</i> <i>Ce texte s'affichera en italique</i>



 BBalise alise <u> <u> </u>: texte soulign</u>: texte soulignéé

<u>Ce texte sera soulign

<u>Ce texte sera soulignéé</u></u>



 Balise Balise <s> <s> …… </s>: texte barr</s>: texte barréé

<s>Ce texte sera barr

<s>Ce texte sera barréé</s></s>



 BBalise alise <sup> <sup> </sup>: texte en exposant</sup>: texte en exposant

<sup>Ce texte sera en exposant</sup> <sup>Ce texte sera en exposant</sup>

 Balise Balise <<subsub> > …… </</subsub>: texte en indice>: texte en indice



(16)

Exemple

Exemple

:: <HTML> <HTML> <HEAD> <HEAD> <TITLE>cours HTML

<TITLE>cours HTML –– ENSA 1ENSA 1èère annre annéée</TITLE>e</TITLE> </HEAD>

</HEAD>

<body>

<body>

<b>Ce texte s'affichera en gras</b><

<b>Ce texte s'affichera en gras</b><brbr> > <i>Ce texte s'affichera en italique</i><

<i>Ce texte s'affichera en italique</i><brbr> > <u>Ce texte sera soulign

<u>Ce texte sera soulignéé.</u><.</u><brbr>> <s>Ce texte sera barr

<s>Ce texte sera barréé</s><</s><brbr> >

<sup>Ce texte sera en exposant</sup><

<sup>Ce texte sera en exposant</sup><brbr> > <

<subsub>Ce texte sera en indice</>Ce texte sera en indice</subsub>> </body> </body> </HTML> </HTML> C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L





Body

Body

La mise en forme de texte

La mise en forme de texte

Retour

(17)



(18)





B

B

alise

alise

<font>

<font>

</font>

</font>

-

-

attribut <

attribut <

color

color

>

>

exemple

exemple

: : <font

<font colorcolor="#ff0000">texte en rouge</font>="#ff0000">texte en rouge</font>



 Les couleurs peuvent être Les couleurs peuvent être éécrites de deux manicrites de deux manièères :res :

-- En hexadEn hexadéécimal de type RVB et prcimal de type RVB et prééccééddéées d'un dies d'un dièèse (#)se (#)

exemples exemples : : #ff0000 => rouge #ff0000 => rouge #00ff00 => vert #00ff00 => vert #0000ff => bleu #0000ff => bleu

-- Textuelles en anglais USTextuelles en anglais US

exemples

exemples

: :

red, yellow, pink.





Body

Body

Modifier la couleur du texte

Modifier la couleur du texte

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(19)

Exemple

Exemple

:: <HTML> <HTML> <HEAD> <HEAD> <TITLE>cours HTML

<TITLE>cours HTML –– DUT 1DUT 1èère annre annéée</TITLE>e</TITLE> </HEAD>

</HEAD>

<body>

<body>

<font

<font colorcolor=#000000>Ce texte s'affichera en noir<=#000000>Ce texte s'affichera en noir<brbr> > <font

<font colorcolor="="redred">Ce texte s'affichera en rouge<">Ce texte s'affichera en rouge<brbr> > <font

<font colorcolor="="blueblue">Ce texte s'affichera en bleu<">Ce texte s'affichera en bleu<brbr>> <font

<font colorcolor=#00ff00>Ce texte s'affichera en vert<=#00ff00>Ce texte s'affichera en vert<brbr>>

<font

<font colorcolor=#=#ffffffffffff>Ce texte s'affichera en <font >Ce texte s'affichera en <font colorcolor=#000000>blanc=#000000>blanc

</body>

</body>



(20)

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L



(21)

















B

B

alise <font>

alise <font>

</font>

</font>

-

-

attribut <face>

attribut <face>

exemple

exemple

: :

<font face="Arial">texte en Arial</font> <font face="Arial">texte en Arial</font>

<font face="

<font face="Arial,timesArial,times">Ce texte sera en Arial sinon en times</font>">Ce texte sera en Arial sinon en times</font>





B

B

alise

alise

<font>

<font>

</font>

</font>

-

-

attribut <size>

attribut <size>

exemple

exemple

: :

<font size="5">Ce texte sera en taille 5.</font> <font size="5">Ce texte sera en taille 5.</font>

-- Par dPar dééfaut, la valeur de l'attribut size vaut "faut, la valeur de l'attribut size vaut "33". ".

-- Possible rPossible réunir les trois attributs (éunir les trois attributs (colorcolor, face, size) , face, size) dans la même balise <font>.

dans la même balise <font>.



(22)

Exemple

Exemple

:: <HTML> <HTML> <HEAD> <HEAD> <TITLE>cours HTML

<TITLE>cours HTML –– DUT 1DUT 1èère annre annéée</TITLE>e</TITLE> </HEAD>

</HEAD>

<body>

<body>

<font

<font colorcolor="="redred" face="" face="ComicComic Sans Ms" size=5>Ce texte Sans Ms" size=5>Ce texte s'affichera en rouge,

s'affichera en rouge, ComicComic Sans Ms, taille 5<brSans Ms, taille 5<br> > <font size=10

<font size=10 colorcolor="="blueblue" face="" face="arial">Ce texte s'afficheraarial">Ce texte s'affichera en taille 10, bleu,

en taille 10, bleu, arialarial<<brbr>>

<font size=3>Ce texte s'affichera en taille 3<

<font size=3>Ce texte s'affichera en taille 3<brbr> > <font face="times">texte en times</font>

<font face="times">texte en times</font>

</body> </body> </HTML> </HTML> C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L



(23)



(24)





Le corps du document

Le corps du document

-

-

Body

Body

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML       

 Les paragraphes de texteLes paragraphes de texte       

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux      

 Les listesLes listes       

 Les images et zones rLes images et zones rééactivesactives       

 Les formulairesLes formulaires       

 Les liens hypertextesLes liens hypertextes       

(25)



 Balise Balise <<hnhn>> oùoù nn reprrepréésente le niveausente le niveau

Il existe diff

Il existe difféérents niveaux de titres ( 1 rents niveaux de titres ( 1 àà 6 ) (6 ) (tous importantstous importants) )



 Attribut de la baliseAttribut de la balise

<

<HxHx alignalign=center>...</=center>...</HxHx> Titre centr> Titre centréé <

<HxHx alignalign==leftleft>...</>...</HxHx>> Titre alignTitre alignéé àà gauchegauche <

<HxHx alignalign=right>...</=right>...</HxHx>> Titre alignTitre alignéé àà droitedroite



(26)





Body

Body

Les niveaux de titre

Les niveaux de titre

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

exemple

: <HTML> <HEAD>

<TITLE>cours HTML …</TITLE> </HEAD> <body> <h1>Titre Niveau1</h1> <h2>Titre Niveau2</h2> <h3>Titre Niveau3</h3> <h4>Titre Niveau4</h4> <h5>Titre Niveau5</h5> <h6>Titre Niveau6</h6> </body> </HTML>

(27)
(28)

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML 

 HTMLHTML est un format de préest un format de présentation de donnésentation de données pour cres pour crééer des er des pages web

pages web pouvant être lues dans des pouvant être lues dans des navigateursnavigateurs.. 

 C'est un langage àC'est un langage à balises.balises. 

 Une balise HTMLUne balise HTML est un est un éléément que l'on va ajouter au texte ment que l'on va ajouter au texte àà afficher pour dire au navigateur de quelle mani

afficher pour dire au navigateur de quelle manièère l'afficher.re l'afficher.

syntaxe

syntaxe

:

:

<BALISE> (simple ou double) <BALISE> (simple ou double)

      

 Attributs dAttributs d’’une baliseune balise::

-- informations complinformations compléémentaires mentaires caractcaractéérisant une balise.risant une balise.

-- Une baliseUne balise peut comporter de zépeut comporter de zéro àro à plusieurs attributs.plusieurs attributs.

forme

forme: : nom_attributnom_attribut="="valeurvaleur" "



(29)

      



Document HTML de base

Document HTML de base

<html> <html>

<

<headhead>> <

<titletitle> > …… </</titletitle> > <!<!---- titre de la pagetitre de la page ---->> </

</headhead>> <body> <body>

<!

<!–– corps de la pagecorps de la page ---->>

</body> </body>



(30)





Attr

Attr

i

i

b

b

u

u

ts

ts

b

b

alise <body> </body>:

alise <body> </body>:

-- BACKGROUND pour BACKGROUND pour insinséérerrer uneune image image commecomme fond fond

<BODY BACKGROUND

<BODY BACKGROUND="="nom_de_fichier.extensionnom_de_fichier.extension"">>

-- BGCOLOR : couleur de l'arriBGCOLOR : couleur de l'arrièère planre plan

-- TEXT : couleur du texte, par dTEXT : couleur du texte, par dééfaut elle est noirfaut elle est noir

-- LINK : couleur des liensLINK : couleur des liens

-- ALINK : couleur des liens sALINK : couleur des liens séélectionnlectionnééss

-- VLINK : VLINK : couleur des liens dcouleur des liens dééjjàà visitvisitéés s

<BODY BGCOLOR

<BODY BGCOLOR="couleur" ="couleur" TEXTTEXT="couleur" ="couleur" LINKLINK="couleur" ="couleur"





Rappels

Rappels

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(31)



 BBalise <p> </p>: segmentation du texte en paragraphesalise <p> </p>: segmentation du texte en paragraphes



 Balise <Balise <divdiv> ... </> ... </divdiv> : division de la page en blocs> : division de la page en blocs



 Balise <brBalise <br> : saut de ligne ou retour > : saut de ligne ou retour àà la lignela ligne



 Balise <b> Balise <b> …… </b>: texte en gras</b>: texte en gras



 BBalise <i> alise <i> …… </i>: texte en italique</i>: texte en italique



 BBalise <u> alise <u> </u>: texte soulign</u>: texte soulignéé



 Balise <s> Balise <s> …… </s>: texte barr</s>: texte barréé



 Balise <sup> Balise <sup> …… </sup>: texte en exposant</sup>: texte en exposant



 BBalise <alise <subsub> > …… </</subsub>: texte en indice>: texte en indice



 BBalise <font> alise <font> </font> :</font> :

-- attributs : <face>, <size>, <attributs : <face>, <size>, <colorcolor>>



(32)





Le corps du document

Le corps du document

-

-

Body

Body

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML       

 Les paragraphes de texteLes paragraphes de texte       

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux

      

 Les listesLes listes       

 Les imagesLes images       

 Les formulairesLes formulaires       

 Les liens hypertextesLes liens hypertextes       

(33)

Structure de base:

Structure de base:

<TABLE> </TABLE>

<TABLE> </TABLE>

indique au navigateur le d

indique au navigateur le début et la fin d'une table ébut et la fin d'une table Pour d

Pour déécrire le tableau, on utilise ensuite les balises : crire le tableau, on utilise ensuite les balises : <TR> </TR>

<TR> </TR> ((TTable able RRowow): D): Dééfinit une ligne du tableau. finit une ligne du tableau. Pour ajouter une l

Pour ajouter une ligne au tableau. igne au tableau. <TD> </TD>

<TD> </TD> ((TTable able DDataata): Dé): Définit une séfinit une série de cellules de donnrie de cellules de donnéées es (qui pourront c

(qui pourront contenir du texte, desontenir du texte, des images, une tab

images, une table...).le...). <TH> </TH>

<TH> </TH> ((TTable able HHeadead):): DDééfinit une cellule contenant un titrefinit une cellule contenant un titre (intitul

(intituléé) de colonne ou de ligne. ) de colonne ou de ligne. Le r

Le réésultat sultat àà l'affichage est un textel'affichage est un texte



(34)

ATTRIBUTS

ATTRIBUTS

WIDTH="x"

WIDTH="x" largeur du tableau (nombre ou % par rapport largeur du tableau (nombre ou % par rapport àà lala largeur de la fenêtre)

largeur de la fenêtre)

HEIGHT="x"

HEIGHT="x" hauteur du tableau (nombre en pixels ou %)hauteur du tableau (nombre en pixels ou %)

BORDER=

BORDER="x""x" taille de la bordure ou taille de la bordure ou éépaisseur de lpaisseur de l’’ombrage ombrage (1 par d

(1 par dééfaut)faut)

BGCOLOR=

BGCOLOR=couleurcouleur couleur de fond des cellulescouleur de fond des cellules

BACKGROUND

BACKGROUND pour utiliser une image comme fond pour la tablepour utiliser une image comme fond pour la table

CELLSPACING

CELLSPACING="x"="x" largeur des bordures = espace entre deux cellules largeur des bordures = espace entre deux cellules du tableau

du tableau

CELLPADDING

CELLPADDING="x"="x" espace libre (pixels) entre le texte et le bord de laespace libre (pixels) entre le texte et le bord de la cellule qui le contient

cellule qui le contient

ALIGN

ALIGN alignementalignement: left, right, center: left, right, center

COLLSPAN="n"

COLLSPAN="n" fusion de fusion de colonnescolonnes sursur uneune mêmemême ligneligne ( td et ( td et thth ))





Body

Body

Les Tableaux

Les Tableaux

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(35)

<HTML>

<HTML>

<HEAD> <TITLE>exemple1 tableau</TITLE> </HEAD>

<HEAD> <TITLE>exemple1 tableau</TITLE> </HEAD>

<BODY BGCOLOR="#00FF00" >

<BODY BGCOLOR="#00FF00" >

<CENTER> <table border=5 BORDERCOLOR=

<CENTER> <table border=5 BORDERCOLOR=redred CELLSPACING=10CELLSPACING=10 cellpadding

cellpadding=10 =10 widthwidth=80% =80% heigthheigth="80" > ="80" > <tr

<tr bgcolorbgcolor==yellowyellow>> <td>1

<td>1--1</td> <td> 11</td> <td> 1--2 </td> <td> 12 </td> <td> 1--3 </td> <td> 13 </td> <td> 1--4 </td>4 </td> </tr>

</tr>

<tr

<tr bgcolorbgcolor==blueblue>> <td>2

<td>2--1</td> <td> 21</td> <td> 2--2 </td> <td> 22 </td> <td> 2--3 </td> <td> 23 </td> <td> 2--4 </td>4 </td> </tr>

</tr>

<tr

<tr bgcolorbgcolor=black>=black> <td><font

<td><font colorcolor=white>3=white>3--1</td> <td> <font 1</td> <td> <font colorcolor=white>3=white>3--2 </td>2 </td> <td> <font

<td> <font colorcolor=white>3=white>3--3</td> <td> <font 3</td> <td> <font colorcolor=white>3=white>3--4 </td>4 </td> </tr

</tr bgcolorbgcolor==yellowyellow>> <tr> <td>4

<tr> <td>4--1</td> <td> 41</td> <td> 4--2 </td> <td> 42 </td> <td> 4--3</td> <td> 43</td> <td> 4--4 </td> </tr>4 </td> </tr>



(36)





Body

Body

Les Tableaux

Les Tableaux

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

BGCOLOR="#00FF00" border=5 BORDERCOLOR=red

CELLSPACING=10 cellpadding=10 <tr bgcolor=yellow>

<tr bgcolor=blue> <tr bgcolor=black>

(37)

<HTML>

<HTML>

<HEAD> <TITLE>exemple tableau</TITLE> </HEAD>

<HEAD> <TITLE>exemple tableau</TITLE> </HEAD>

<BODY BGCOLOR="#00FFFF" >

<BODY BGCOLOR="#00FFFF" >

<CENTER> <table border=10 CELLSPACING=25

<CENTER> <table border=10 CELLSPACING=25 cellpaddingcellpadding=8 =8 widthwidth=80%=80% heigth

heigth="80" BORDERCOLOR="#000000"> ="80" BORDERCOLOR="#000000"> <tr

<tr bgcolorbgcolor==yellowyellow>> <th

<th colspancolspan=2 =2 rowspanrowspan=2> <font size="6"> 1=2> <font size="6"> 1--1 </th> 1 </th> <th> <font size="4">1 <th> <font size="4">1--3 </th> <th> 13 </th> <th> 1--4 </th>4 </th> </tr> </tr> <tr> <td> 2 <tr> <td> 2--3 </td> <td> 23 </td> <td> 2--4 </td> </tr>4 </td> </tr> <tr> <tr> <td>3

<td>3--1</td> <td 1</td> <td rowspanrowspan=2> <font =2> <font colorcolor==redred>3>3--2 </td>2 </td> <td

<td colspancolspan=2 =2 rowspanrowspan=2> 3=2> 3--3</td>3</td> </tr>

</tr>

<tr> <td

<tr> <td bgcolorbgcolor==redred>4>4--1</td> </tr>1</td> </tr>

<CAPTION ALIGN="UP"><B> Tableau</B> : cellules de diff

<CAPTION ALIGN="UP"><B> Tableau</B> : cellules de difféérentes taillesrentes tailles </CAPTION>

</CAPTION>



(38)





Body

Body

Les Tableaux

Les Tableaux

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

BGCOLOR="#0099FF" border=2 BORDERCOLOR="#000000"

<CAPTION ALIGN="UP"> <tr bgcolor=yellow> <th colspan=2 rowspan=2> <td colspan=2> <td rowspan=2>

(39)





Body

Body

Les Tableaux

Les Tableaux

Exercice: r

(40)





Body

Body

Les Tableaux

Les Tableaux

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L <HTML> <HTML>

<HEAD> <TITLE>9eme tableau</TITLE> </HEAD>

<HEAD> <TITLE>9eme tableau</TITLE> </HEAD>

<BODY >

<BODY >

<CENTER> <table border=10 CELLSPACING=20

<CENTER> <table border=10 CELLSPACING=20 cellpaddingcellpadding=10 =10 widthwidth=80%=80% heigth

heigth="80" BORDERCOLOR="#000000"> ="80" BORDERCOLOR="#000000"> <tr

<tr bgcolorbgcolor==blueblue> <th>1> <th>1--1</th> <th 1</th> <th colspancolspan=3><font size="6"> 1=3><font size="6"> 1--2 </th> 2 </th> <td

<td rowspanrowspan=4>1=4>1--5 </td>5 </td> </tr>

</tr>

<tr

<tr bgcolorbgcolor==yellowyellow>> <td> 2

<td> 2--1 </td> <td> 21 </td> <td> 2--2 </td> <td> 22 </td> <td> 2--3 </td> <td 3 </td> <td rowspanrowspan=4>2=4>2--4</td>4</td> </tr>

</tr>

<tr

<tr bgcolorbgcolor==redred>> <td> 3

<td> 3--1 </td> <td 1 </td> <td colspancolspan=2 =2 rowspanrowspan=2> 3=2> 3--2 </td> 2 </td> </tr>

</tr>

<tr

<tr bgcolorbgcolor="#00FFAA">="#00FFAA"> <td>4

<td>4--1</td>1</td> </tr>

</tr>

<tr

<tr bgcolorbgcolor="#00FFAA">="#00FFAA"> <td

<td colspancolspan=3>5=3>5--1</td> <td> 51</td> <td> 5--5 </td>5 </td> </tr>

(41)





Le corps du document

Le corps du document

-

-

Body

Body

      

 Les paragraphes de texteLes paragraphes de texte       

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux       

 Les listesLes listes

      

 Les imagesLes images       

 Les formulairesLes formulaires       

(42)

HTML permet de d

HTML permet de dééfinir 3 types de listes finir 3 types de listes àà l'aide des balises simples ou pairesl'aide des balises simples ou paires



 ListeListe àà puce ("Unnumbered")puce ("Unnumbered") :: <UL

<UL TYPE="disc|circle|squareTYPE="disc|circle|square" >" > <LI>

<LI> éélléément1 ment1 </LI></LI> <LI>

<LI> éélléémentment2 </LI> 2 </LI> </UL>

</UL> 

 ListeListe numénumérotérotéee ("Ordered")("Ordered") :: <OL>

<OL> <LI>

<LI> éélléément1ment1 </LI></LI> <LI>

<LI> éélléément2ment2 </LI> </LI> </OL>

</OL> 

 Liste descriptive (ou de déListe descriptive (ou de définition ou glossaire)finition ou glossaire) :: <DL>

<DL>

<DT>

<DT> terme1terme1 </DT></DT> <DD>

<DD> description du termedescription du terme </DD></DD> <DT>

<DT> terme2terme2 </DT></DT> <DD>

<DD> description du termedescription du terme </DD></DD>





Body

Body

Les listes

Les listes

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(43)
(44)





Le corps du document

Le corps du document

-

-

Body

Body

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ HTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML       

 Les paragraphes de texteLes paragraphes de texte       

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux      

 Les listesLes listes       

 Les imagesLes images

      

 Les liens hypertextesLes liens hypertextes       

 Les formulairesLes formulaires       

(45)

Pour ins

Pour inséérer une image rer une image àà un document HTMLun document HTML



 BBalise simple alise simple <<imgimg>>



 Pour insPour inséérer une image localerer une image locale

<

<imgimg srcsrc="chemin de l="chemin de l’’image" image" altalt=" texte alternatif=" texte alternatif ">">



 Pour insPour insérer une image érer une image distantedistante

<

<imgimg src="URL" src="URL" altalt=" texte alternatif=" texte alternatif ">">



(46)



 Attributs de la balise <Attributs de la balise <imgimg>>

-- srcsrc : donne le chemin de l'image. : donne le chemin de l'image.

-- altalt : affiche un texte alternatif : affiche un texte alternatif àà la place de l'image sila place de l'image si celle

celle--ci ne peut pas être chargci ne peut pas être chargéeée

-- alignalign : left: left, right, middle, , right, middle, bottombottom, top, top

-- width=n ou n% width=n ou n% height=mheight=m : pour redimensionner une image: pour redimensionner une image

-- border=nborder=n : pour tracer un cadre autour de l'image avec : pour tracer un cadre autour de l'image avec un trait de n pixels de large

un trait de n pixels de large

oo -- vspacevspace=n =n hspacehspace=m=m : espace vert: espace verticalical entre entre ll’’imageimage et leet le

texte

texte en pixels (en pixels (vspacevspace), espace ), espace h

hoorriizzontalontal imageimage--textetexte (hspace(hspace).).





Body

Body

Insertion d

Insertion d

images

images

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(47)





Le corps du document

Le corps du document

-

-

Body

Body

      

 Les paragraphes de texteLes paragraphes de texte       

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux      

 Les listesLes listes       

 Les imagesLes images       

 Les liens hypertextesLes liens hypertextes

      

(48)



 HTML donne la possibilitHTML donne la possibilitéé de créde créer des liens vers d'autres er des liens vers d'autres documents :

documents :

-- documents HTMLdocuments HTML

-- des imagesdes images

-- du sondu son

-- des filmsdes films

-- des serveurs ...des serveurs ...



 Le logiciel client www prLe logiciel client www présente ce lien sous forme de motsésente ce lien sous forme de mots soulign

soulignés ou d'image encadrés ou d'image encadréée que l'on appelle e que l'on appelle ancreancre ouou

lien

lien..



 Ce lien est soit un fichier local, soit une URLCe lien est soit un fichier local, soit une URL





Body

Body

les liens HTML

les liens HTML

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(49)



 Liens vers un document complet distant :Liens vers un document complet distant :

Syntaxe

Syntaxe

: :

<A HREF="URL">

<A HREF="URL">

ancre

ancre

</A>

</A>

exemple

exemple

: :

pour acc

pour accééder der àà la page du CEI de lla page du CEI de l’’ ENSENS

<A

<A HREF="http://www.ens.uae.ma/html/cei.html"HREF="http://www.ens.uae.ma/html/cei.html">> Le CEI Le CEI </A></A> de E.N.S.de E.N.S.

Affiche: Affiche: Le CEI

Le CEI de E.N.S.de E.N.S.



(50)



 Liens vers un document complet local :Liens vers un document complet local :

Syntaxe

Syntaxe

: :

<A

<A HREF=nom_de_fichier_localHREF=nom_de_fichier_local"">> ancre ancre </A></A>

exemple

exemple

: : pour acc

pour accééder der àà une page d'essai localeune page d'essai locale

... Cliquer

... Cliquer <A<A HREF="Mon CV.doc"HREF="Mon CV.doc">> ICIICI </A></A> ...

Affiche: Affiche:

Cliquer

Cliquer ICIICI





Body

Body

les liens HTML

les liens HTML

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(51)



 Liens vers une partie du document courant :Liens vers une partie du document courant :

Syntaxe

Syntaxe

: :

<A NAME="

<A NAME="etiquetteetiquette"> nom </A> d"> nom </A> dééfinit un point de branchementfinit un point de branchement

<A HREF="

<A HREF="##etiquetteetiquette"> ancre </A> pour faire le lien"> ancre </A> pour faire le lien

exemple

exemple

: :

pour acc

pour accééder au mot "ANCRES" du document courantder au mot "ANCRES" du document courant <A NAME="ANCRES"> Les ancres </A>

<A NAME="ANCRES"> Les ancres </A>

<A HREF="#ANCRES"> retour vers le haut </A> <A HREF="#ANCRES"> retour vers le haut </A>

Affiche: Affiche:



(52)

Liens

Liens ExemplesExemples Lien interne d

Lien interne déépart (même page)part (même page)

<a

<a hrefhref="#top">="#top">……</a></a> Lien interne arriv

Lien interne arrivéée (même page)e (même page)

<a name="top">

<a name="top">……</a></a> Lien interne (page

Lien interne (page diffdifféérenterente))

<a

<a hrefhref="index2.htm">="index2.htm">……</a></a> Lien

Lien externeexterne

<a

<a hrefhref="http://="http://www.allhtml.comwww.allhtml.com">">……</a></a> Lien e

Lien e--mailmail

<a

<a hrefhref="="mailto:webmaster@allhtml.commailto:webmaster@allhtml.com"> "> </a></a> Lien

Lien versvers newsnews

<a

<a hrefhref="="news:news.multimania.comnews:news.multimania.com">">……</a></a>





Body

Body

liens hypertextes

liens hypertextes

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(53)



 lien hypertexte vers un fichier medialien hypertexte vers un fichier media : :

<a

<a href

href="

="

nomFichier.extension">

nomFichier.extension

">

……

……

</a>

</a>

exemples d

exemples d’’extensionextension : .mid: .mid, .wmv, .wmv, ., .wavwav, .mp3, .ram , .mp3, .ram ……



(54)



 IntIntéégrer un fichier son dans la pagegrer un fichier son dans la page : on ajoute: on ajoute

<

<

embed

embed

src

src

="

="

nomFichier.extension

nomFichier.extension

">

">

exemple

exemple

:

:

<p><embed

<p><embed srcsrc="sprng_01.mid" width="150" height="40" ="sprng_01.mid" width="150" height="40" autostart="false" loop="false"></p>

autostart="false" loop="false"></p>

Remarques:

Remarques:

Autostart

Autostart= "= "truetrue"" :lancement automatique du son :lancement automatique du son "

"falsefalse" : lancement à" : lancement à volontvolontéé du sondu son loop

loop= "= "truetrue" : le son est jou" : le son est jouéé en boucleen boucle "

"falsefalse" : le son n" : le son n’’est jouest jouéé ququ’’une seul foisune seul fois loop

loop="="55" : le son est joué" : le son est joué 5 fois5 fois





Body

Body

Insertion du son

Insertion du son

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(55)



 IntéIntégrer un fichier son dans le fond de la pagegrer un fichier son dans le fond de la page ::

<embed

<embed

src

src

="

="

nomFichier.extension

nomFichier.extension

" hidden >

" hidden >

exemple

exemple

:

:

<p><embed

<p><embed srcsrc="sprng_01.mid" ="sprng_01.mid" autostartautostart="true" loop="false" hidden="true">="true" loop="false" hidden="true">

Musique de fond en cours de diffusion.</p> Musique de fond en cours de diffusion.</p>



(56)



 lien hypertexte vers un fichier lien hypertexte vers un fichier videovideo : :

<a

<a

href

href

="

="

nomFichier.extension

nomFichier.extension

">

">

……

……

</a>

</a>

exemple

exemple

:

:

<a

<a hrefhref="aucland45.MPEG">Un petit film au format ="aucland45.MPEG">Un petit film au format mpegmpeg</a></a>



 IntéIntégrer un fichier grer un fichier videovideo dans la page:dans la page:

<

<

img

img

dynsrc

dynsrc

="aucland45.MPEG>

="aucland45.MPEG>

exemple

exemple

:

:

<

<imgimg dynsrcdynsrc="="nomClip.MPEGnomClip.MPEG" " startstart="="fileopenfileopen">"> Un petit film au format

Un petit film au format mpegmpeg </a></a>

fileopen

fileopen= la vid= la vidéo est affichéo est affichéée e àà l’l’ouvertureouverture mouseover

mouseover= la vid= la vidééo est afficho est affichéée au passage de la sourise au passage de la souris





Body

Body

Insertion de vid

Insertion de vid

é

é

o

o

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(57)





Le corps du document

Le corps du document

-

-

Body

Body

      

 Les paragraphes de texteLes paragraphes de texte       

 La mise en forme de texteLa mise en forme de texte       

 Les niveaux de titresLes niveaux de titres       

 Les tableauxLes tableaux      

 Les listesLes listes       

 Les imagesLes images       

 Les liens hypertextesLes liens hypertextes       

(58)

Int

Int

é

é

rêt d'un formulaire

rêt d'un formulaire

Les formulaires interactifs permettent de doter les pages

Les formulaires interactifs permettent de doter les pages

web d'

web d'

é

é

l

l

é

é

ments interactifs permettant par exemple un

ments interactifs permettant par exemple un

dialogue avec l

dialogue avec l

internaute, la saisie de donn

internaute, la saisie de donn

é

é

es ...

es ...

Un formulaire est une fiche que l'utilisateur peut remplir,

Un formulaire est une fiche que l'utilisateur peut remplir,

ces informations ainsi saisies sont trait

ces informations ainsi saisies sont trait

é

é

es par le serveur

es par le serveur

www.

www.





Les formulaires

Les formulaires

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(59)

M

M

é

é

thode des formulaires

thode des formulaires

Les formulaires HTML permettent de retourner des informations

Les formulaires HTML permettent de retourner des informations

saisies par un utilisateur vers une application serveur

saisies par un utilisateur vers une application serveur

Les formulaires utilisent des balises particuli

Les formulaires utilisent des balises particulièères:res: <

<formform action= " " methodaction= " " method= " " > = " " > …… </</formform>> <input type = "

<input type = "texttext" " namename ="nom" value="cha="nom" value="chaîîne"ne"> > zone de saisiezone de saisie

<input

<input type="type="submitsubmit "" value="Envoyer"> value="Envoyer"> bouton dbouton d’’envoienvoi

<input type="reset"

<input type="reset" namename="efface" value="Effacer"> ="efface" value="Effacer"> btonbton effacereffacer <input type="checkbox"

<input type="checkbox" name="case1" value="name="case1" value="valeur_casevaleur_case"">> <input type="radio"

<input type="radio" namename="radio1" value="="radio1" value="valeur_radiovaleur_radio"">> <select

<select name ="select"name ="select" size="1">size="1"> <option

<option value="R"value="R">choix1</option> >choix1</option> <option

<option value="D"value="D"> choix2 </option>> choix2 </option>





Les formulaires

Les formulaires

Liste de s

(60)





Les formulaires

Les formulaires

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

Un formulaire commence et finit par:

Un formulaire commence et finit par: FORMFORM

<FORM ACTION METHOD> </FORM> <FORM ACTION METHOD> </FORM>

Les Les attributsattributs METHOD et ACTION METHOD et ACTION sontsont obligatoiresobligatoires

ACTION = " ACTION = " adresse du script qui va recevoir les adresse du script qui va recevoir les

donn

donnéées saisies dans le formulairees saisies dans le formulaire ""

METHOD="METHOD="mmééthodethode ddenvoienvoi des des donndonnééeses" (" (GETGET// POSTPOST) )

-- POST: valeur qui correspond POST: valeur qui correspond àà un envoi de donnéun envoi de donnéeses stock

stockéées dans le corps de la requête.es dans le corps de la requête.

M

(61)





Les formulaires

Les formulaires

<FORM ACTION METHOD> </FORM> <FORM ACTION METHOD> </FORM>

-- GET : GET : passe les informations d'un formulaire parpasse les informations d'un formulaire par l

l’interm’interméédiaire des URL. Elles sont placdiaire des URL. Elles sont placéées, directement es, directement à

à la suite de l'adresse URL de la page appeléla suite de l'adresse URL de la page appelée.e.

exemple:

exemple:

inconv

inconvéénientsnients: :

-- elle rend visibles les donnelle rend visibles les donnéées dans la barre es dans la barre dd’’adresse adresse

du navigateur donc modifiable par l

(62)





Les formulaires

Les formulaires

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

Un formulaire commence et finit par:

Un formulaire commence et finit par: FORMFORM

<FORM ACTION METHOD> </FORM> <FORM ACTION METHOD> </FORM>

Les Les attributsattributs METHOD et ACTION METHOD et ACTION sontsont obligatoiresobligatoires

ACTION = " ACTION = " adresse pour l'envoi adresse pour l'envoi ""

METHOD = "formeMETHOD = "forme d’d’envoienvoi" ( GET " ( GET ouou POST ) POST )

-- POST: valeur qui correspond POST: valeur qui correspond àà un envoi de donnun envoi de donnééeses stock

stockéées dans le corps de la requête.es dans le corps de la requête. M

Méthode la plus utiliséthode la plus utilisée pour les formulairesée pour les formulaires Le nombre d'informations important

Le nombre d'informations important

-- GET : mGET : mééthode gthode géénnééralement assez peu adaptralement assez peu adaptéée, car e, car limit

limitéée àe à 255 caractè255 caractères. Les informationsres. Les informations seront envoy

seront envoyéées dans l'adresse de la pagees dans l'adresse de la page (http://...).

(63)

exemples:

<form action="c:\cours\HTML\exple.php" method="POST">

<FORM METHOD="GET" ACTION="mailto:Redan@ENS.ma">

forme d'envoi

forme d'envoi



(64)

-- Insertion de n'importe quel Insertion de n'importe quel éléléément HTML de base:ment HTML de base: textes, tableaux, liens, ...

textes, tableaux, liens, ...

-- Insertion dInsertion d’é’éllééments interactifs. ments interactifs. Deux types

Deux types ::

Des éDes éléments pour faire un ou plusieurs choix ments pour faire un ou plusieurs choix

Des Des ééllééments pour saisir des donnments pour saisir des donnéées es

( envoy

( envoyéées es àà l'URL indiqul'URL indiquéé dans l'attribut dans l'attribut ACTIONACTION ))

A l'int

A l'int

é

é

rieur de la balise FORM...

rieur de la balise FORM...





Les formulaires

Les formulaires

C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d C o u r s d ’’’’’’’’ H T M LH T M LH T M LH T M LH T M LH T M LH T M LH T M L

(65)

Les

Les ééllééments interactifs sontments interactifs sont ::

la balise INPUT la balise INPUT : : un ensemble de boutons et deun ensemble de boutons et de

champs de saisie

champs de saisie àà une ligneune ligne

la balise TEXTAREA la balise TEXTAREA : une zone de saisie : une zone de saisie multilignesmultilignes

la balise SELECT la balise SELECT : une liste : une liste àà choix multipleschoix multiples





Les formulaires

Les formulaires

A l'int

Figure

Updating...

References