Docstoc

html

Document Sample
html Powered By Docstoc
					                                                                     Année Universitaire : 2008- 2009
                                                                Section   L2SE
                                                                          Programmation
                                                                Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                     Multimedia




                                    Chapitre 2 : HTML

Introduction
HTML Hyper Text MarkUp Language est un langage de description (et non pas un langage de
programmation) qui va nous permettre de décrire l'aspect d'un document, d'y inclure des
informations variées (textes, images, sons, animations etc.) et d'établir des relations cohérentes
entre ces informations grâce aux liens hypertextes.
Les avantages du langage HTML sont nombreux :
     peu coûteux en effet un simple éditeur de texte suffit à écrire ses premiers documents
        HTML
     relativement facile à aborder,
     il représente en outre un bon moyen de dépasser les problèmes de compatibilité entre des
        systèmes et des formats informatiques différents.
La description d'un document HTML passe par l'utilisation de BALISES (ou "TAGS" en
anglais). Une balise est délimitée par les signes "<" et ">" entre lesquels figure le nom de la
balise. Par exemple, la balise de retour à la ligne est <BR> La plupart du temps, on utilise une
balise de début et une balise de fin, qui définissent les propriétés de l'intervalle.

De quoi avez-vous besoin ?

      un navigateur (Internet Explorer, Netscape, Mozilla, Opera...).
      un éditeur HTML (==> Notepad, le "simple" Bloc-notes de Windows fera très bien
       l'affaire !)
Pour commencer le Bloc-notes est très bien, vous devrez taper vous même le code et ainsi vous
pourrez vous familiariser beaucoup plus vite avec les balises.

   1. Votre première page HTML
Commencez par ouvrir le Bloc-notes (ou un autre éditeur HTML) pour pouvoir taper le code.
Voici le code à taper :

<HTML>
<HEAD>
<TITLE>Ma première page en HTML</TITLE>
</HEAD>

<BODY>
Bonjour, voici ma première page web !




                                                  1
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




</BODY>
</HTML>


Enregistrez le document au format HTML (*.html ou *.htm). Pour cela, dans la case "Nom",
tapez : index.html. Et dans la case "Type", choisissez Tous(*.*) dans la liste déroulante.
Voila votre page est enregistrée. Vous pouvez ouvrir votre navigateur et visualiser votre première
page. Le seul texte qui apparaîtra sera "Bonjour, voici ...".


Explications des nouvelles balises utilisées :

- <html> et </html> : la première informe votre navigateur qu'il va afficher une page HTML.
Cette balise doit être la première de votre code. La seconde est la balise de fin. Elle referme la
première. (Remarquez le / devant le mot contenu entre crochets). Elle doit être la dernière de
votre     code      HTML       et     signifie    la    fin    de     votre      code      HTML.

- <head> et </head> : la première ouvre l'entête de votre page. Cet entête comprend pour
l'instant le titre de votre page. Cette balise est toujours placée juste après la balise <html>. La
seconde, referme l'entête de votre page (remarquez encore une fois le / devant le mot entre
crochets).

- <title> et </title> : la première ouvre la partie titre de votre page. Ce titre sera placé dans la
barre tout au-dessus de votre navigateur. La seconde referme la première encore une fois en
plaçant un / devant le mot entre crochets. La balise "title" doit être ouverte puis refermée à
l'intérieur de la balise "head". C'est à dire qu'il faut que la balise "title" doit être ouverte puis
refermée         avant      que       le      balise       "head"       ne       soit       refermée.

- <body> et </body> : la première ouvre le début du corps de votre document. C'est là que vous
allez placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer après la
balise de fermeture de l'entête (=> </head>). La seconde referme la première et maintenant je
suppose que vous avez compris le principe pour fermer une balise...

Première constatation :

- Le code d'une page web est composé de 2 parties, l'en-tête de la page (HEAD) et le corps
(BODY). Seul le corps de la page est affiché à l'écran (dans votre première page, il n'y a que la
phrase "Bonjour,..." qui s'est affichée).
   2. Mise en forme : Les couleurs



                                                  2
                                                                  Année Universitaire : 2008- 2009
                                                             Section   L2SE
                                                                       Programmation
                                                             Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                  Multimedia




Maintenant que nous savons comment créer une page très simple, nous allons pourvoir mettre le
texte en forme.

Commencons par mettre le texte en couleur.

<HTML>
<HEAD>
<TITLE>Texte en couleurs</TITLE>
</HEAD>

<BODY>
<FONT color="red">Rouge</FONT> <BR>
<FONT color="#FF0000">Rouge</FONT> <BR>
<FONT color="green">Vert</FONT> <BR>
<FONT color="#008000">Vert</FONT> <BR>
<FONT color="blue">Bleu</FONT> <BR>
<FONT color="#0000FF">Bleu</FONT> <BR>
<FONT color="yellow">Jaune</FONT> <BR>
<FONT color="#FFFF00">Jaune</FONT> <BR>

</BODY>
</HTML>



Ce qui donnera une page dont le contenu sera comme ceci :

Rouge
Rouge
Vert
Vert
Bleu
Bleu
Jaune
Jaune




                                                  3
                                                                      Année Universitaire : 2008- 2009
                                                                 Section   L2SE
                                                                           Programmation
                                                                 Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                      Multimedia




Vous pouvez également mettre le fond de l'écran en couleur

<HTML>
<HEAD>
<TITLE>Fond d'écran en couleur</TITLE>
</HEAD>

<BODY bgcolor="#000000">
<FONT color="#FFFFFF">texte blanc sur fond noir</font>

</BODY>
</HTML>



Vous pouvez maintenant enregistrer votre page dans la Bloc-notes sous le même nom. Pas besoin
de fermer votre navigateur puis de réouvrir votre page. Il suffit de réactualiser la page en cliquant
sur soit Refresh, soit Rafraîchir ou encore Actualiser selon le navigateur... (ou simplement la
touche F5)


Explications des nouvelles balises utilisées :


- <br> : cette balise permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une
page web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran.
Avec la balise <br>, vous pourrez faire des sauts de ligne à votre guise. Un "BR" correspond à un
saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "BR"
(==>       <BR><BR>).          Il      n'y     a      pas     de       balise     de       fin     !

- <font> et </font> : elles permettent de modifier l'apparence du texte. Elle doit recevoir des
informations provenant d'attribut(s) pour connaître la mise en forme à appliquer. Pour l'instant,
nous avons juste vu l'attribut "color" qui permet de mettre le texte en couleur. Les couleurs les
plus fréquentes peuvent être nommées explicitement en anglais (red, green, blue,...) sinon il faut
placer le code Hexadécimal de la couleur voulue. Vous trouverez la liste des principaux codes
couleurs sur notre page Codes couleurs. La couleur du texte est par défaut noir (#000000 ou
black).

- nous avons également vu l'attribut "bgcolor" dans <BODY> : "bgcolor" (==>background color
: couleur de fond) permet de mettre le fond de l'écran en couleur tout comme le fait "color" pour



                                                  4
                                                                        Année Universitaire : 2008- 2009
                                                                   Section   L2SE
                                                                             Programmation
                                                                   Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                        Multimedia




le texte. C'est le même principe pour le code des couleurs. La couleur du fond est par défaut blanc
(#FFFFFF).




Petites "définitions" :


- Un attribut est un paramètre qui fournit des indications à une balise. Il possède un nom et très
souvent une valeur à préciser (nom = "valeur"). Il se rajoute dans la balise de début, c'est à dire
toujours entre les < > après le nom de la balise (par exemple : <font color="#ff0000">.

- Le code Hexadécimal qui permet de définir une couleur est composé de 6 caractères précédés
de #. Ces 6 caractères définissent la "teneur" en rouge, vert et bleu (les couleurs de bases) de la
couleur a former. Il n'y a que 16 caractères possibles : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

   3. Mise en forme : Les couleurs
Nous allons maintenant faire varier la taille et la police de caractère du texte.

<HTML>
<HEAD>
<TITLE>Taille et police du textes</TITLE>
</HEAD>

<BODY>
<FONT size=7>Taille 7</FONT> <BR>
<FONT size=6>Taille 6</FONT> <BR>
<FONT size=5>Taille 5</FONT> <BR>
<FONT size=4>Taille 4</FONT> <BR>
<FONT size=3>Taille 3 (par défaut)</FONT> <BR>
<FONT size=2>Taille 2</FONT> <BR>
<FONT size=1>Taille 1</FONT> <BR><BR>

<FONT size="+4">Taille +4</FONT> <BR>
<FONT size="+3">Taille +3</FONT> <BR>
<FONT size="+2">Taille +2</FONT> <BR>
<FONT size="+1">Taille +1</FONT> <BR>
Taille par défaut ( => 3 ) <BR>
<FONT size="-1">Taille -1</FONT> <BR>



                                                   5
                                                                   Année Universitaire : 2008- 2009
                                                              Section   L2SE
                                                                        Programmation
                                                              Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                   Multimedia




<FONT size="-2">Taille -2</FONT> <BR>

<FONT size=4 face="Verdana">Taille 4 en Verdana</FONT> <BR>
<FONT size=2 face="Comic sans MS">Taille 3 en Comic sans MS</FONT> <BR>
<FONT face="Arial, Times New Roman" color="#336699">Taille normal en Arial si la police
existe sinon en Times New Roman en couleur #336699</FONT> <BR>

</BODY>
</HTML>



Ce qui donnera une page dont le contenu sera comme ceci :

Taille 7
Taille 6
Taille 5
Taille 4
Taille 3 (par défaut)
Taille 2
Taille 1

Taille +4
Taille +3
Taille +2
Taille +1
Taille par défaut ( => 3 )
Taille -1
Taille -2

Taille 4 en Verdana
Taille 2 en Comic sans MS
Taille normale en Arial si il existe sinon en Times New Roman en couleur #336699


Vous pouvez maintenant enregistrer votre page sous le même nom (ou un autre) et visualiser le
résultat dans votre navigateur.




                                                  6
                                                                            Année Universitaire : 2008- 2009
                                                                       Section   L2SE
                                                                                 Programmation
                                                                       Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                            Multimedia




Explications des nouveaux attributs utilisés :


- l'attribut "size" : "size" (==> taille) permet de modifier la taille du texte compris entre <font> et
</font>.
Vous avez le choix entre donner un nombre entre 1 et 7 (par défaut => 3) ou bien donner une
valeur de "décalage" par rapport à la taille par défaut du navigateur ("-2", "-1", "+1", "+2",
"+3", "+4").


- l'attribut "face" : "face" (==> apparence) permet de choisir la police dans laquelle le texte sera
affiché. Vous pouvez préciser plusieurs noms de police séparés par des ','. Si la navigateur ne
reconnaît pas le premier nom, il essayera avec le suivant...Si il ne reconnaît aucun nom, il
utilisera la police par défaut du navigateur utilisé.


Petites remarques :

- Vous pouvez tout à fait cumuler les attributs dans une balise (séparés par un espace) ! Dans le
code ci-dessous nous combinons 3 attributs :
<FONT color="#ff0000" size=4 face="Verdana">Taille 4 en rouge en Verdana</FONT>

- Inutile d'utiliser des polices très spéciales car si les visiteurs ne l'ont pas sur leur ordi, le
navigateur ne la reconnaîtra pas et donc ne l'utilisera pas.

    4. Mise en forme : alignement et gras
Nous allons à présent voir comment mettre du texte en gras, italique,....

<HTML>
<HEAD>
<TITLE>Texte en gras, italique, centré</TITLE>
</HEAD>

<BODY>
<B>texte en gras</B> <BR>
<I>texte en italique</I> <BR>
<U>texte souligné</U> <BR>
<CENTER>texte centre</CENTER> <BR>
<!-- On peut également imbriquer les balises -->
<B><CENTER>texte centré en gras</CENTER></B>



                                                     7
                                                                        Année Universitaire : 2008- 2009
                                                                   Section   L2SE
                                                                             Programmation
                                                                   Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                        Multimedia




<!-- Mais il faut faire attention à refermer les balises
dans le bon ordre comme ci-dessus -->
<B><CENTER>......</B></CENTER> est incorrect -->
<BR>
<!-- Nous pouvons également réutiliser la balise FONT -->
<B><CENTER><FONT color="red" size=2>texte en rouge, gras, centré de taille
2</FONT></CENTER></B> <BR>
<P align="left"> <I> mon paragraphe sera écrit à gauche de l’écran en italique </I></P>


</BODY>
</HTML>



Ce qui donnera une page dont le contenu sera comme ceci :

texte en gras
texte en italique
texte souligné
                                             texte centre
                                        texte centré en gras
                              texte en rouge, gras, centré de taille 2



Vous avez pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur.


Explications des nouvelles balises utilisées :

- <b> et </b> : écrit le texte en gras.
- <i> et </i> : écrit du texte en italique.
- <u> et </u> : souligne du texte. Evitez d'utiliser trop cette balise car un texte souligné peut être
confondu avec un lien et ça peut étre gênant pour le visiteur.
- <center> et </center> : centre le texte par rapport à l'écran.
- <!-- et --> : Ces balises permettent de commenter votre code. Le texte compris entre ces balises
ne sera pas pris en compte par le navigateur ( ==> pas affiché !). Le commentaire peut s'étendre
sur plusieurs lignes. Faites attention à bien fermer le commentaire (==> "-->") sinon la fin de
votre code ne sera pas affichée !.


                                                  8
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




Remarques importantes :

- Attention à bien refermer vos balises (avec la balise de fin) sinon la suite du texte aura
également les propriétés de la balise non refermée. Par exemple si vous oubliez de refermer la
balise pour placer des commentaires (<!-- ... -->), la fin de votre code ne s'affichera pas !

- Si vous voulez cumuler des balises, pour par exemple mettre un texte en gras, en italique et
centré, il faut bien faire attention à l'ordre des balises pour les refermer !

Voici ce qu'il ne faut pas faire :
<B><I><CENTER>mon texte</I></B</CENTER>

Il faut les refermer dans l'ordre inverse de l'ouverture :
<B><I><CENTER>mon texte</CENTER></I></B>
C'est le même principe pour toutes les balises !


- La balise <P> (paragraphe)
La balise <P> permet de créer un paragraphe. C'est une balise de type conteneur, bien que le </P>
soit optionnel (moi je le met toujours, d'ailleurs, le W3C le recommande).
Cette balise posséde bien évidemment quelques attributs.

=> ALIGN (alignement horizontal) align permet définir l'alignement horizontal d'un paragraphe.
Il admet trois valeurs :

      left alignement à gauche (option par défaut)
      center pour aligner au centre
      right pour aligner à droite
      justify justification du texte, justify justification du texte, c'est à dire que l'espacement
       entre les mots est ajusté de façon à ce qu'une ligne de texte débute de la marge gauche et
       finisse à la marge droite.



   5. Les tableaux
Voici le moment de créer des tableaux. Les tableaux sont très pratiques pour faire de la mise en
page. En effet, ils permettent d'aligner des éléments (textes, images,...). Mais ce n'est pas leur
unique fonction...



                                                  9
                                                                         Année Universitaire : 2008- 2009
                                                                    Section   L2SE
                                                                              Programmation
                                                                    Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                         Multimedia




Explications des nouvelles balises utilisées :

- <table> et </table> : création d'un tableau. Nous avons dans notre exemple précisé, au moyen
de l'attribut "border" (0 par défaut), la taille de la bordure autour des cellules de notre tableau. (la
balise de fin est obligatoire !)

- <tr> : débute une nouvelle ligne dans la tableau. La balise de fin (</TR>) n'est pas
obligatoire. Chaque fois que le navigateur tombera sur une balise <TR>, il considérera que la
ligne précédente est terminée et commencera une nouvelle. Toutes les lignes d'un même tableau
doivent contenir le même nombre de cellules.

- <td> : crée une nouvelle cellule dans un tableau. Cette cellule doit être contenue dans une
ligne et donc une balise "TR" doit être déjà ouverte... Vous pouvez ensuite créer autant de
cellules que vous voulez dans un même ligne. Une cellule peut contenir un peu tout et n'importe
quoi. On peut y mettre du texte, des images,... La cellule va s'adapter automatiquement aussi bien
en largeur qu'en hauteur au contenu le plus haut et le plus large. Et pour finir, toutes les cellules
d'une même colonne ont la même largeur (celle de la cellule la plus large), idem pour la hauteur
des cellules d'une même ligne.
Comme pour "TR", la balise de fin (</TD>) est optionnelle.


Explications des nouveaux attributs utilisées :

- "bgcolor" permet de donner un fond de couleur à un tableau ou à une cellule. Comme toujours
la couleur peut être précisée soit par son nom (en anglais) soit par son code Hexa (le blanc soit
#FFFFFF est la couleur par défaut).
- "width" permet de préciser la largeur d'un tableau ou d'une cellule. La largeur peut être donnée
en pixel ou en pourcentage.
- "height" permet de donner la hauteur d'une cellule. Il n'est pas possible de préciser la hauteur
d'un tableau. Attention, si vous donnez une certaine hauteur X à une cellule et que vous placez
par exemple une image dont la hauteur est plus grande, la cellule s'adaptera à la taille de l'image
en "oubliant" son attribut hauteur ! (idem en largeur).
- "align" précise l'alignement sur un axe horizontal du tableau ou du contenu de la cellule. (valeur
possible : "left" par défaut, "right", "center").
- "valign" précise l'alignement du contenu des cellules sur un axe vertical. (valeur possible :
"middle", "bottom", "top").


- "cellpadding" définit l'espace en pixel entre le bord d'une cellule et son contenu. (1 par défaut).
- "cellspacing" définit l'espace entre les cellules du tableau. (1 par défaut).
- "colspan" permet de faire fusionner des cellules d'une même ligne. Il faut y préciser le nombre


                                                   10
                                                                     Année Universitaire : 2008- 2009
                                                                Section   L2SE
                                                                          Programmation
                                                                Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                     Multimedia




de cellules à fusionner.
- "rowspan" permet de faire fusionner des cellules d'un même colonne. Il faut y préciser le
nombre de cellules.


<HTML>
<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>

<BODY>
Voici notre premier tableau avec un bord de 1 : <BR><BR>

<TABLE border=1>
<TR>
<TD>Celulle 1</TD>
<TD>Celulle 2</TD>
</TR>
<TR>
<TD>Celulle 3</TD>
<TD>Celulle 4</TD>
</TR>
</TABLE>

<BR><BR>
Taille des celulles en pixel :
<BR><BR>
<TABLE width=300 border=1>
<TR>
<TD width=100>100</TD>
<TD width=100>100</TD>
<TD width=100>100</TD>
</TR>
</TABLE>
<BR><BR>

Taille des celulles en pourcentage :
<BR><BR>
<TABLE width="60%" border=1>
<TR>
<TD width="33%">33%</TD>


                                                 11
                                                                     Année Universitaire : 2008- 2009
                                                                Section   L2SE
                                                                          Programmation
                                                                Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                     Multimedia




<TD width=34%>34%</TD>
<TD width=33%>33%</TD>
</TR>
</TABLE>

</BODY>
</HTML>



Ce qui donnera une page dont le contenu sera comme ceci :

Voici notre premier tableau avec un bord de 1 :


          Celulle 2
Celulle 1
Celulle 3 Celulle 4


Taille des celulles en pixel :

100             100              100


Taille des celulles en pourcentage :

33%                   34%                33%


Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur.
Remarques :

- Même si les balises de fin </td> et </tr> sont optionnelles, il veut quand même mieux les
utiliser pour éviter des problèmes de compatibilité ou de mise en page avec certains vieux
navigateurs.
Maintenant que nous savons comment créer un simple tableau, nous allons découvrir les
principaux attributs que nous pouvons utiliser.




                                                  12
                                                                   Année Universitaire : 2008- 2009
                                                              Section   L2SE
                                                                        Programmation
                                                              Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                   Multimedia




<HTML>
<HEAD>
<TITLE>Les tableaux</TITLE>
</HEAD>

<BODY>
Tableaux avec des fonds de couleurs et alignements du contenu :

<TABLE border=2 bgcolor="#000000" cellpadding=5 cellspacing=3 align="center">
<TR>
<TD width=100 height=100 bgcolor="#CCCCCC" valign="top" align="left">#CCCCCC</TD>
<TD width=100 height=100 bgcolor="#FFFFFF" align="right" valign="top">#FFFFFF</TD>
</TR>
<TR>
<TD width=100 height=100 bgcolor="#FF0000" align="left" valign="middle">#FF0000</TD>
<TD width=100 height=100 bgcolor="#0099FF" align="right" valign="middle">#0000FF</TD>
</TR>

<TR>
<TD width=100 height=100 bgcolor="#FFFFCC" valign="bottom"
align="right">#FFFFCC</TD>
<TD width=100 height=100 bgcolor="#008000" valign="bottom" align="left">#008000</TD>
</TR>
</TABLE>
<BR><BR>

Fusion de celulles (colonnes) :
<TABLE border=1 width=400 align="center" cellspacing=0 cellpadding=2>
<TR>
<TD width="25%">Celulle 1</TD>
<TD width="25%">Celulle 2</TD>
<TD width="25%">Celulle 3</TD>
<TD width="25%">Celulle 4</TD>
</TR>
<TR>
<TD colspan=4 align="center">Celulle fusionnée sur 4 colonnes</TD>
</TR>
</TABLE>
<BR><BR>




                                                 13
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




Fusion de celulles (lignes) :
<TABLE width=400 align="center" cellspacing=0 cellpadding=2>
<TR>
<TD width="50%" bgcolor="#FFFF00">Celulle 1</TD>
<TD width="50%" bgcolor="#CCFFFF">Celulle 2</TD>
<TD rowspan=2 bgcolor="#333333"><CENTER><FONT color="#FFFFFF">Fusion de 2
lignes</FONT></CENTER></TD>
</TR>
<TR>
<TD width="50%" bgcolor="#CCCCCC">Celulle 3</TD>
<TD width="50%" bgcolor="#999999">Celulle 4</TD>
</TR>
</TABLE>

</BODY>
</HTML>



Ce qui donnera une page dont le contenu sera comme ceci :

Tableaux avec des fonds de couleurs et alignements du contenu :



                                   #CCCCCC              #FFFFFF




                                   #FF0000              #0000FF




                                                 14
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




                                       #FFFFCC #008000

Fusion de celulles (colonnes) :
                  Celulle 1        Celulle 2       Celulle 3       Celulle 4
                                  Celulle fusionnée sur 4 colonnes


Fusion de celulles (lignes) :
                  Celulle 1                    Celulle 2                   Fusion
                                                                            de 2
                  Celulle 3                    Celulle 4                   lignes


Vous pouvez maintenant enregistrer votre page et visualiser le résultat dans votre navigateur.

Petits plus :

- Vous pouvez mettre une image comme fond d'un tableau à la place d'une simple couleur
(comme pour la balise BODY) avec l'attribut background. Mais cet attribut ne sera accepté que
par Internet Explorer, les autres n'afficheront pas l'image !

- Il est également possible ce changer la couleur de la bordure autour du tableau avec l'attribut
"bordercolor" (par exemple bordercolor="#000000"). Mais encore une fois, cet attribut n'est
compatible qu'avec IE !

   6. Les formulaires

Les formulaires permettent de récupérer des informations auprès de vos visiteurs. Vous pouvez
ainsi créer une certaine interactivité avec vos visiteurs. Ils pourront vous envoyer des messages et
vous pourrez mieux les connaître.
Il y a plusieurs moyens pour récupérer ces informations. Soit vous utilisez un script coté serveur
(en CGI ou en PHP par exemple), ce script est interpreté sur un serveur chez votre hébergeur et
pourra traiter les informations. Soit vous pouvez recevoir les infos directement sur votre adresse
email au moyen d'un "mailto".


                                                 15
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




Je ne m'étendrai pas plus sur les scripts CGI dans ce tutorial (ce n'est pas le but). Cependant, vous
pourrez trouvez des scripts et des explications en visitant les sites sur les CGI de notre annuaire
en cliquant ICI. L'envoi des données via un mailto sera expliqué dans ce cours.

<HTML>
<HEAD>
<TITLE>Formulaires</TITLE>
</HEAD>

<BODY>
Voici un premier formulaire très simple :
<BR><BR>
<FORM action="mailto:vous@votre-domaine.com" method="post" enctype="text/plain">
Entrez votre nom : <INPUT type="text" name="nom">
<BR><BR>
<INPUT type="submit" value="Envoyer" name="submit">
</FORM>
Ce qui donnera une page dont le contenu sera comme ceci :

Voici un premier formulaire très simple :

Entrez votre nom :

 Submit




<BR><BR><BR>
Voici une version améliorée de notre premier formulaire :
<BR><BR>
<FORM action="mailto:vous@votre-domaine.com" method="post" enctype="text/plain">
<INPUT type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : ">
Entrez votre prénom : <INPUT type="text" name="prenom">
<BR>
Entrez votre nom : <INPUT type="text" name="nom">
<BR><BR>
<INPUT type="submit" value="Envoyer" name="submit"> <INPUT type="reset"
value="Effacer les données" name="reset">
</FORM>




                                                 16
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




Voici une version améliorée de notre premier formulaire :

Entrez votre prénom :
Entrez votre nom :

 Submit    Effacer les données



<BR><BR><BR>
Et pour finir cette première partie sur les formulaires, une troisième version de notre formulaire :
<BR><BR>
<FORM action="mailto:vous@votre-domaine.com" method="post" enctype="text/plain">
<INPUT type="hidden" name="intro" value="Voici les infos récoltées via la formulaire : ">
Entrez votre prénom : <INPUT type="text" name="prenom">
<BR>
Entrez votre nom : <INPUT type="text" name="nom" size=25>
<BR>
Entrez l'adresse de votre site : <INPUT type="text" name="url" size=40 value="http://">
<BR><BR>
Entrez un mot de passe : <INPUT type="password" name="pass" size=10 maxlenght=10>
<BR><BR>
<INPUT type="submit" value="Envoyer" name="submit"> <INPUT type="reset"
value="Effacer les données" name="reset">
</FORM>

</BODY>
</HTML>

Et pour finir cette première partie sur les formulaires, une troisième version de notre formulaire :

Entrez votre prénom :
Entrez votre nom :
                                   http://
Entrez l'adresse de votre site :




                                                 17
                                                                     Année Universitaire : 2008- 2009
                                                                Section   L2SE
                                                                          Programmation
                                                                Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                     Multimedia




Entrez un mot de passe :

 Submit    Effacer les données



Vous pouvez maintenant enregistrez votre page et la visualiser dans votre navigateur.


Explications des nouvelles balises utilisées :

- <form> et </form> : elles délimitent un formulaire. La présence de la balise de fin est
primordiale !

L'attribut "enctype" permet de spécifier le type de données. Vous n'avez pas besoin d'y toucher
pour le moment.

L'attribut "action" désigne l'adresse du script qui va traiter les données. Par exemple avec un
CGI, nous aurions quelque chose comme ceci : action="cgi-bin/mon_cgi.pl", avec un script en
PHP ceci : action="mon_script.php" et enfin pour un mailto (envoi vers une mail) ceci :
action="mailto:adresse_email@domaine.com".

L'attribut "method" spécifie la manière dont les données remplies dans le formulaire doivent être
transmises. Il peut prendre 2 valeurs : "POST" ou "GET". Avec GET, les données sont envoyées
au serveur via l'URL et sont donc visibles dans celle-ci ! Avec POST, les données sont
directement envoyées au serveur et ne sont pas visibles. On utilisera presque toujours la
méthode POST pour les formulaires.

- <input> : cette balise permet de placer un champ dans lequel les informations peuvent être
recueillies. (pas de balise de fin !)

L'attribut "name" permet de désigner un champ du formulaire par un nom pour le traitement des
données. Chaque nom doit être unique !

L'attribut "type" spécifie le type de champ.
Il peut prendre plusieurs valeurs :
- "text" pour entrer du simple texte
- "hidden" pour un champ caché non visible par le visiteur (on ne peut pas y ajouter du texte !)
- "password" pour entrer un mot de passe (les caractères sont remplacés par des *)
- "submit" pour créer un bouton pour envoyer les données du formulaire.
- "reset" pour créer un bouton qui vide le formulaire et le remet comme au chargement de la


                                                 18
                                                                        Année Universitaire : 2008- 2009
                                                                   Section   L2SE
                                                                             Programmation
                                                                   Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                        Multimedia




page.

L'attribut "value" permet de donner une valeur à un champ avant que le visiteur ne commence à
le remplir. Dans le cas d'un bouton (submit ou reset), cette valeur sera le texte affiché sur le
bouton !

L'attribut "size" donne la largeur du champ (20 par défaut).

L'attribut "maxlenght" quant à lui définit le nombre maximal de caractères pouvant être tapés
dans un champ. Si vous essayez de taper un caractère supplémentaire, il ne sera pas pris dans le
champ !.
Vous avez déjà surement vu dans des formulaires, des listes déroulantes, des cases à cocher et
bien voici comment procéder.

Explications des nouvelles balises utilisées :

- <select> et </select> : crée une liste déroulante. On peut lui attribuer un nom avec l'attribut
"name" ainsi que le le nombre d'éléments visibles de la liste avec "size" (1 par défaut).

- <option> et </option> : ajoute un élément à la liste déroulante créée avec un SELECT. On peut
lui donner une valeur grâce à son attribut "value". Par défaut, c'est la première balise option qui
sera celle par défaut. Si vous voulez que ce soit une autre, il faut ajouter le mot suivant dans la
balise en question : 'selected'.

- <textarea> et </textarea> : elles délimitent une zone de texte. Comme toujours on peut la
nommer avec "name". On peut également en spécifier la taille avec "rows" (nombre de lignes) et
"cols" (nombre de colonnes).

Nous avons également vu 3 nouvelles valeurs pour l'attribut type d'un INPUT :
- "button" : crée un bouton cliquable. On lui donne un nom au moyen de "name" et une valeur
(qui sera le texte affiché sur ce bouton) avec "value". Les simples boutons n'ont pas un grand
intérêt à première vue mais ils en auront beaucoup quand on leur affectera des actions via un
JavaScript.

- "checkbox" : crée une case à cocher. On peut bien entendu lui donner un nom et une valeur
mais on peut aussi décider si elle doit être cochée ou non au chargement de la page.
Si la case doit être cochée, il faut rajouter dans la balise le mot suivant : 'checked'. Par défaut une
case n'est pas cochée.

- "radio" : crée un bouton radio. Un bouton radio seul n'a pas un grand intérêt. En général, on en
place plusieurs pour donner un choix aux visiteurs. Contrairement aux cases à cocher avec


                                                  19
                                                                      Année Universitaire : 2008- 2009
                                                                 Section   L2SE
                                                                           Programmation
                                                                 Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                      Multimedia




lesquelles on peut sélectionner plusiers valeurs, avec les boutons radio, on ne peut en choisir
qu'une ! Quand on choisit une autre valeur, celle qui était sélectionnée ne l'est plus.
ATTENTION : les boutons radios doivent avoir le même nom (via l'attibut "name") !
Pour sélectionner la valeur par défaut, comme pour les cases à cocher, il faut ajouter le mot
'checked' dans la balise du bouton par défaut

<HTML>
<HEAD>
<TITLE>Formulaires</TITLE>
</HEAD>

<BODY>
<B>Les boutons :</B>
<BR><BR>
<FORM>
<INPUT type="button" name="mon_bouton" value="Voici un bouton">
</FORM>
<BR>

<B>Les liste déroulantes :</B>
<BR><BR>
<FORM>
Comment trouver ce tutorial jusqu'à présent :
<SELECT name="liste">
<OPTION value="excellent">Excellent</option>
<OPTION value="bon" selected>Bon</option>
<OPTION value="moyen">Moyen</option>
<OPTION value="faible">Faible</option>
<OPTION value="nul">Pitoyable</option>
</SELECT>
<BR><BR>

Ou bien, on peut préciser le nombre de valeur à afficher :
<SELECT name="liste" size="3"></option>
<OPTION value="excellent">Excellent</option>
<OPTION value="bon" selected>Bon</option>
<OPTION value="moyen">Moyen</option>
<OPTION value="faible">Faible</option>
<OPTION value="nul">Pitoyable</option>
</SELECT>
</FORM>


                                                 20
                                                              Année Universitaire : 2008- 2009
                                                         Section   L2SE
                                                                   Programmation
                                                         Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik              Multimedia




<BR>

<B>Les zones de textes :</B>
<BR><BR>
<FORM>
Entrez votre texte :
<BR>
<TEXTAREA name="texte" cols=40 rows=5>Texte de départ</TEXTAREA>
</FORM>
<BR>

<B>Les cases à cocher :</B>
<BR><BR>
<FORM>
Quels sont vos hobbys :
<BR>
Le sport : <INPUT type="checkbox" name="hobby1" value="sport" checked>
<BR>
Internet : <INPUT type="checkbox" name="hobby2" value="internet" checked>
<BR>
Votre site : <INPUT type="checkbox" name="hobby3" value="site">
<BR>
La lecture : <INPUT type="checkbox" name="hobby4" value="lecture">
<BR>
La télévision : <INPUT type="checkbox" name="hobby5" value="tv" checked>
</FORM>
<BR>

<B>Les boutons radio :</B>
<BR><BR>
<FORM>
Quel est votre niveau en HTML :
<BR>
<INPUT type="radio" name="niveau" value=3>Excellent
<BR>
<INPUT type="radio" name="niveau" value=2 checked>Moyen
<BR>
<INPUT type="radio" name="niveau" value=1>Débutant
</FORM>




                                                 21
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




</BODY>
</HTML>



Ce qui donnera une page dont le contenu sera comme ceci :

Les boutons :


Les listes déroulantes :

                                                 Bon
Comment trouver ce tutorial jusqu'à présent :

                                                             Excellent
                                                             Bon
Ou bien, on peut préciser le nombre de valeur à afficher :   Moyen


Les zones de textes :

Entrez votre texte :
  Texte de départ




Les cases à cocher :

Quels sont vos hobbys :
Le sport :
Internet :
Votre site :
La lecture :
La télévision :

Les boutons radio :



                                                 22
                                                                         Année Universitaire : 2008- 2009
                                                                    Section   L2SE
                                                                              Programmation
                                                                    Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                         Multimedia




Quel est votre niveau en HTML :
    Excellent
    Moyen
    Débutant


Vous avez pouvez maintenant enregistrez votre page sous le même nom et visualiser la page dans
votre navigateur.


.

    7. Liens hypertextes


Les liens hypertextes (ancrages) sont des éléments d'une page HTML (soulignés lorsqu'il s'agit
de texte) permettant aux internautes de naviguer vers une nouvelle adresse lorsque l'on clique
dessus. Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils
permettent notamment de naviguer :

       vers un autre endroit du document
       vers un fichier HTML situé à un emplacement différent sur la machine qui héberge la
        page
       vers une autre machine

L'attribut principal des ancrages est href. Il s'écrit sous la forme suivante :
<a href="Adresse ou URL"> .. </a>

Lien externe

Un lien externe est un lien vers une page pointée par son URL
Par exemple :

<a href="http://www.commentcamarche.net"> Comment ça marche? </a>

Lien local

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par le
fichier cible.


                                                   23
                                                                         Année Universitaire : 2008- 2009
                                                                    Section   L2SE
                                                                              Programmation
                                                                    Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                         Multimedia




Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si
le fichier cible est "index.html" situé dans le répertoire parent, son lien s'écrira:

<a href="../index.html"> ... </a>

Ce lien peut aussi être défini de façon absolue, en écrivant l'adresse du fichier cible de façon
locale:

<a href="file:///lecteur:/répertoire/index.html"> ... </a>

Les signets

Il est également possible de créer un signet dans une page, c'est-à-dire marquer un endroit précis
d'une page pour s'y rendre par un lien hypertexte. Les signets se définissent grâce à l'attribut
NAME ou ID. La syntaxe est la suivante :

<balise id="signet"> ... </balise>

L'appel d'un signet se fait de la manière suivante :

<a href="#signet"> ... </a>

Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien
d'accéder à une section particulière d'une autre page :

    <a href="url/nom_du_fichier.html#signet"> ... </a>

    8. Image réactive

Qu'est-ce qu'une carte ?

La balise <MAP> (=carte en français) sert à définit des zones réactives sur une seule image afin
d'insérer des liens sur une même surface. Elle permet à partir d'une seule image de proposer un
panel de différentes destinations internes comme externes. Elle est utile pour les bandeaux
publicitaires mais aussi et surtout pour les menus graphiques. Son utilisation est conditionnée à la
présence d'images avec la balise <IMG>.

Les images

On insert une image dans une page HTML avec la balise <IMG> dont les attributs sont NAME :
le nom de l'image (nécessaire pour le JavaScript) SRC : l'adresse (relative ou absolue) de l'image,


                                                             24
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




WIDTH : sa largeur en pixels ou en pourcentage, HEIGHT : sa hauteur en pixels ou en
pourcentage, BORDER : son éventuelle bordure en pixels (=2 par défaut lors d'un lien, sinon 0),
ALT : un commentaire placé dans le cadre en attendant son chargement et contitutif d'une bulle
lors du passage de la souris, ALIGN : alignement, HSPACE : marge horizontale entre l'image et
les autres éléments (texte, image...) en pixels, VSPACE : marge verticale en pixels, USEMAP :
spécifie le nom de la carte à utiliser sur l'image.

Si les dimensions de l'image ne sont pas spécifiées, le navigateur les déterminent
automatiquement une fois l'image chargée, c'est-à-dire que si le chargement d'une page est très
long, comme le navigateur aura affiché le texte avant l'image, il devra refaire la mise en page une
fois qu'il connaîtra ses dimensions.

Les attributs d'alignement sont les suivants : LEFT : aligné à gauche (du texte...), RIGHT :
alignée à droite, TOP : alignée en haut, MIDDLE : alignée au milieu, BOTTOM : alignée en bas,
BASELINE : basée sur la ligne, TEXTTOP : le texte est aligné en haut, ABSMIDDLE : l'image
est centrée au milieu de l'axe du texte, ABSBOTTOM : l'image est centrée sur la base du texte.

Syntaxe :

<IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur"
HEIGHT="hauteur" ALT="commentaire" BORDER="épaisseur_de_la_bordure"
ALIGN="alignement" HSPACE="marge_horizonale" VSPACE="marge_verticale"
USEMAP="#nom_de_la_carte">.

Exemple :

<IMG SRC="images/logo.gif NAME="logo-html" WIDTH=161 HEIGHT=68 ALT="Le point
sur les balises HTML" BORDER=1 ALIGN="right" HSPACE=20>

Note :
Le seul attribut obligatoire est SRC, tous les autres sont optionnels.

Les cartes

Vous avez pu constater que la balise <IMG> réserve l'un de ses attributs au nom d'une carte
(<MAP>) dont la balise correspondant au nom spécifié dans USEMAP contient toutes les infos
concernant les zones réactives (sensibles à la souris et pointant vers une destination interne ou
externe).

Donc après avoir écrit votre balise <IMG> qui fait référence à une carte, il faut créer proprement
dit — grace au conteneur <MAP> — les différentes zones de la carte à partir de leur coordonnées

                                                 25
                                                                       Année Universitaire : 2008- 2009
                                                                  Section   L2SE
                                                                            Programmation
                                                                  Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                       Multimedia




sur l'image. Une même carte peut théoriquement être appelée par plusieurs images différentes,
mais dans la pratique il est fort peu probable que vous utilisez deux images dont les zones soient
identiques. A noter que la carte peut être écrite avant ou après l'image qui l'appelle, le principal
c'est qu'elles soient toutes deux assez proche dans votre code pour qu'un temps de chargement
très long de votre page ne soit pas pénalisant.

Le conteneur <MAP> a pour seul attribut NAME : nom de la carte. Ce conteneur contient autant
de balises <AREA> qu'il y a de zones réactives.

Syntaxe :

<MAP NAME="nom_de_la_carte">

différentes balises <AREA>...

</MAP>

Les zones

A une zone réactive est associée une balise <AREA> dont les attributs sont NAME : le nom de la
zone, SHAPE : le type de zone (cercle, rectangle ou polygone), COORDS : les coordonnées de la
zone (séparées par des virgules), HREF : l'adresse destination, ALT : le commentaire qui
apparaitra lorsque le curseur de la souris passera sur la zone.

Syntaxe :

<AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées"
HREF="adresse_destination" ALT="commentaire">

       Zone circulaire

Une zone circulaire est définie par la balise <AREA SHAPE="circle"> et dont l'attribut
COORDS prend pour valeurs la liste des abscisse, ordonnée à l'origine du centre et le rayon du
cercle.

Syntaxe :

<AREA SHAPE="circle" COORDS="x,y,rayon" HREF="destination">

Exemple :



                                                 26
                                                                    Année Universitaire : 2008- 2009
                                                               Section   L2SE
                                                                         Programmation
                                                               Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                    Multimedia




<MAP NAME="bulles">
<AREA SHAPE="circle" COORDS="50,50,40" HREF="#bulles">
</MAP>
<IMG SRC="images/map1.gif" WIDTH=180 HEIGHT=100 BORDER=0 USEMAP="#bulles">




       Zone rectangulaire

Une zone rectangulaire est définie par la balise <AREA SHAPE="rect"> et dont l'attribut
COORDS prend pour valeurs les coordonnées des coins supérieur gauche et inférieur droit
séparées par des virgules.

Syntaxe :

<AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF="destination">

Exemple :

<MAP NAME="menu">
<AREA SHAPE="rect" COORDS="10,3,60,16" HREF="#home">
<AREA SHAPE="rect" COORDS="10,16,60,30" HREF="#edito">
<AREA SHAPE="rect" COORDS="10,30,60,43" HREF="#links">
<AREA SHAPE="rect" COORDS="10,43,60,57" HREF="#mail">
</MAP>
<IMG SRC="images/map2.gif" WIDTH=70 HEIGHT=60 BORDER=0 USEMAP="#menu">




       Zone polygonale

Une zone polygonale est définie par la balise <AREA SHAPE="poly"> et dont l'attribut
COORDS prend pour valeurs la liste des abscisse et ordonnée à l'origine de chacun des points.



                                                 27
                                                                    Année Universitaire : 2008- 2009
                                                               Section   L2SE
                                                                         Programmation
                                                               Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                    Multimedia




Syntaxe :

<AREA SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,x4,y4,...x27,y27,x1,y1"
HREF="destination">

Exemple :

<MAP NAME="eux">
<AREA SHAPE="poly" COORDS="0,0,34,0,78,20,
43,33,46,69,19,54,0,78,0,0" HREF="#moi">
<AREA SHAPE="poly" COORDS="34,0,78,20,43,33,
46,69,19,54,0,78,0,93,91,93,123,76,98,49,147,34,131,0,34,0" HREF="#toi">
<AREA SHAPE="poly" COORDS="131,0,200,0,200,
94,91,93,123,76,98,49,147,34,131,0" HREF="#nous">
</MAP>
<IMG SRC="images/map3.gif" WIDTH=200 HEIGHT=94 BORDER=0 USEMAP="#eux">




Prévisualisation

Si vous voulez afficher une image particulièrement volumineuse qui, par conséquent, va mettre
beaucoup de temps à s'afficher, il est possible de spécifier en valeur à l'attribut LOWSRC une
autre images (en fait la même mais un fichier différent) beaucoup plus légère car compressé ou
avec énormément moins de couleurs.

Exemple :

<IMG SCR="veranda.jpg" WIDTH=200 HEIGHT=150 LOWSRC="verandamini.gif" ALT="Ma
belle vérenda!">

Dans cet exemple, vous avez une image JPEG de 200 Ko à afficher mais comme vous savez que
cela prendra longtemps à afficher : vous spécifiez une autre image de 15 Ko (en 32 couleurs) à
afficher en attendant que l'originale soit totalement chargée.




                                                 28
                                                                         Année Universitaire : 2008- 2009
                                                                    Section   L2SE
                                                                              Programmation
                                                                    Matière
Responsable : Manel lâajimi, Inès Hassoumi, Ali Rekik                         Multimedia




Différentes méthodes pour limiter la taille d'une image :

       diminuer la taille de l'image
       diminuer le nombre de couleurs
       augmenter la compression (JPEG)

Ici, l'image de prévisualisation peut être de taille différente de l'originale, être d'un autre format,
etc...




                                                   29

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:16
posted:8/16/2012
language:French
pages:29