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

(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 donn_{C'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}é_él_lé_é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

::

<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

: :

Balises HTML

(4)

Attributs d

’

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

:

nom_attribut

="

valeur

"

exemple

: <html

lang

="

fr

">

Balises HTML

(5)

Deux types de balises

Deux types de balises ::

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

<

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

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

::

(6)

Document HTML de base

<html> <html>

<

<headhead>> <

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

</headhead>> <body> <body>

<!

>

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

</html>

Structure d

’

un document HTML

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

’

entête du document

-

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

’

entête du document

-

Head

exemple

:

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

</HEAD> </HTML>

(9)

Le corps du document

-

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.

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

<body>

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

(10)

Le corps du document

-

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 listes_{Les listes}

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

Les formulairesLes formulaires

Les liens hypertextes_{Les liens hypertextes}

(11)

B

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

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

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

</HEAD>

<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

-

Body

(14)

Body

–

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

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

Retour

Retour àà la lignela ligne <BR>

<BR>

Commentaire ignor

Commentaire ignoréé par le navigateurpar le navigateur <!

(15)

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

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

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

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

</HEAD>

<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

–

La mise en forme de texte

Retour

(17)

(18)

B

alise

<font>

…

</font>

-

attribut <

color

>

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

: :

red, yellow, pink.

Body

–

Modifier la couleur du texte

(19)

Exemple

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

</HEAD>

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

(20)

(21)

B

alise <font>

…

</font>

-

attribut <face>

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

alise

<font>

…

</font>

-

attribut <size>

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

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

</HEAD>

<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

-

Body

(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 balise_{Attribut 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

–

Les niveaux de titre

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)

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 HTML_{Une balise HTML} est un _{est un}él_é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

:

<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

<html> <html>

<

<headhead>> <

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

</headhead>> <body> <body>

<!

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

</body> </body>

(30)

Attr

i

b

u

ts

b

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

(31)

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

Balise <_{Balise <}div_div> ... </_{> ... </}div_div> : 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

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

B_Balise <font> _{alise <font>}…_… </font> :_{</font> :}

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

(32)

Le corps du document

-

Body

Les imagesLes images

(33)

Structure de base:

<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

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

–

Les Tableaux

(35)

<HTML>

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

<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

</tr>

<tr

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

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

(36)

Body

–

Les Tableaux

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

CELLSPACING=10 _{cellpadding=10} <tr bgcolor=yellow>

(37)

<HTML>

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

<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

</tr>

<tr> <td

<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

–

Les Tableaux

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

(39)

Body

–

Les Tableaux

Exercice: r

(40)

Body

–

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>

<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

</tr>

<tr

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

</tr>

<tr

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

</tr>

<tr

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

</tr>

<tr

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

(41)

Le corps du document

-

Body

(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

Liste_Liste à_à puce ("Unnumbered")_{puce ("Unnumbered")} :_: <UL

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

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

</UL>

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

<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

–

Les listes

(43)

(44)

Le corps du document

-

Body

Les liens hypertextesLes liens hypertextes

Les formulaires_{Les formulaires}

(45)

Pour ins

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

B_Balise simple _{alise simple}<_<img_img>_>

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

<

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

<

(46)

Attributs de la balise <_{Attributs de la balise <}img_img>_>

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

–

Insertion d

’

images

(47)

Le corps du document

-

Body

(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

–

les liens HTML

(49)

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

Syntaxe

: :

<A HREF="URL">

ancre

</A>

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

: :

<A

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

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

–

les liens HTML

(51)

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

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

: :

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

Body

–

liens hypertextes

(53)

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

<a

<a href

href="

="

nomFichier.extension">

nomFichier.extension

">

……

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

src

="

nomFichier.extension

">

exemple

:

<p><embed

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

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

–

Insertion du son

(55)

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

<embed

src

="

nomFichier.extension

" hidden >

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

href

="

nomFichier.extension

">

……

</a>

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

dynsrc

="aucland45.MPEG>

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

–

Insertion de vid

é

o

(57)

Le corps du document

-

Body

(58)

Int

é

rêt d'un formulaire

Les formulaires interactifs permettent de doter les pages

web d'

é

l

é

ments interactifs permettant par exemple un

dialogue avec l

’

internaute, la saisie de donn

é

es ...

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

ces informations ainsi saisies sont trait

é

es par le serveur

www.

Les formulaires

(59)

M

é

thode des formulaires

Les formulaires HTML permettent de retourner des informations

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

Liste de s

(60)

Les formulaires

Un formulaire commence et finit par:

Un formulaire commence et finit par: FORMFORM

►

► _Les_Les_attributs_attributs _{METHOD et ACTION}_{METHOD et ACTION}_sont_sont _obligatoires_obligatoires

♦

♦ _{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="_m_m_é_é_thode_thode _d_d_’_’_envoi_envoi _des_des_donn_donn_é_é_es_es_{" (}_{" (}_GET_GET_/_/ _POST_POST₎₎

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

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

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

Un formulaire commence et finit par:

Un formulaire commence et finit par: FORMFORM

►

► _Les_Les_attributs_attributs _{METHOD et ACTION}_{METHOD et ACTION}_sont_sont _obligatoires_obligatoires

♦

♦ _{ACTION = "}_{ACTION = "}_{adresse pour l'envoi}_{adresse pour l'envoi}_"_" ♦

♦ _{METHOD = "forme}_{METHOD = "}_forme _d’_d_’envoi_{envoi" ( GET}_{" ( GET ou}_ou _{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:

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_lé_{éments pour faire un ou plusieurs choix}_{ments pour faire un ou plusieurs choix} ♦

♦ _Des_Des_é_é_l_l_é_é_{ments pour saisir des donn}_{ments 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

é

rieur de la balise FORM...

Les formulaires

(65)

Les

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

♦

♦ _{la balise INPUT}_{la balise INPUT}_:_:_{un ensemble de boutons et de}_{un 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}_multilignes_multilignes

♦

♦ _{la balise SELECT}_{la balise SELECT}_{: une liste}_{: une liste}_à_à _{choix multiples}_{choix multiples}