Вы находитесь на странице: 1из 49

1

Le langage HTML (HyperText Markup Language) est un ensemble de rgles, de commandes qu'on utilise pour donner des indications aux logiciels clients (Netscape Navigator, Microsoft Internet Explorer,...) qui recevront le document crit au format texte.

Faut-il connatre la programmation, pour apprendre et comprendre le langage HTML ?

Le mot "langage" en informatique est pour beaucoup de personnes synonyme de sueurs froides. Ne vous alarmez pas !!! Si vous tes un programmeur de gnie, tant mieux... Si vous tes juste un utilisateur de la micro-informatique, tant mieux aussi, car la cration de documents HTML est la porte de toute personne sachant utiliser un simple diteur de texte comme le Bloc-Notes de Windows par exemple.

HTML : Un langage de "Tagueurs".

Dans un traitement de texte, pour rendre un texte en caractres gras ou italique, on va le slectionner l'aide de la souris et appliquer le style grce une "barre d'outils". Il en va de mme avec les documents HTML. Mais au lieu d'utiliser la souris, on va placer le texte entre deux marqueurs (que l'on appelle "tags" en anglais). Imaginons qu'une personne ne dispose que d'une machine crire traditionnelle et qu'une autre lui propose de mettre en forme son texte sur un ordinateur... La premire personne enverra sa lettre avec les instructions de prsentation : (cher ami, voici le texte accompagn des indications dont nous avons convenues) (Dbut de la lettre) (Utilisation de caractres type Helvetica, gras, italiques) Marcel DURANT ( la ligne) Socit Pingouin qui chante ( la ligne) 10 - 12, rue du ple Nord ( la ligne) 59850 Keskiffroi ( la ligne) (fin d'utilisation de caractres type helvetica, gras, italiques) (passer une ligne) (passer une ligne) Cher Monsieur, ( la ligne) (passer une ligne) (paragraphe standard) Suite notre dernier entretien, je vous informe que j'ai bien reu les dates de vos sessions de formation au HTML. (passer une ligne) J'accepte avec grand plaisir de me rendre la (utilisation de caractres S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

italiques)formation sur le HTML (fin d'utilisation de caractres italiques) que vous organisez chez vous. Je tiens aussi vous prciser que je viendrai accompagn de mon collaborateur. (passer une ligne) Recevez, Monsieur, l'expression de ma considration distingue. (fin de paragraphe standard) (passer une ligne) (passer une ligne) (centrer) Marcel DURANT (fin de centrer)
Les indications entre parenthses n'apparatront pas dans la version finale de ce document. Elles n'ont pas d'autre but que d'expliquer la mise en forme et le style de prsentation adopter. En HTML, la procdure est identique... Il faut expliquer au logiciel client (Netscape Navigator, Microsoft Internet Explorer,...) comment il doit prsenter la page. Pour que le logiciel client soit en mesure de distinguer (sans se tromper !) le texte afficher des indications (les "Tags"), celles-ci commencent toujours par un < et se termine toujours par un >.

Par exemple : <italique>Je suis un utilisateur heureux</italique> Affichera sur la page HTML : Je suis un utilisateur heureux.

Ce qu'il faut pour bien commencer.

1. Un diteur de texte ou un traitement de texte capable d'enregistrer des fichiers textes sans mise en forme (ASCII pur ou ".TXT"). 2. Un client Web (c'est--dire Netscape Navigator, Microsoft Internet Explorer ou autres...).

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

Il faut rappeler qu'un document contenant des annotations en HTML n'est ni plus ni moins qu'un fichier texte (code ASCII). Il peut tre reconnu sans problmes de conversion d'un environnement l'autre. Une page peut donc tre lue et interprte par n'importe quel navigateur sur n'importe quelle plateforme... pourvu que l'on ait plac les marqueurs au bon endroit. Nous vous proposons dans ce second chaptre, de dcouvrir les autres marqueurs principaux d'une page crite en HTML, savoir :

<html></html> : La page <head><title></title></head> : l'entte <body></body> : Le corps <!-- les commentaires --> : Les commentaires

La page <html></html>
De l'anglais, HyperTexte Markup Language, ces marqueurs indiquent que ce qui suit est crit en HTML. Tout le contenu de votre document, texte et marqueurs, doit tre situ entre <html> et </html>. C'est le premier marqueur qu'on doit trouver dans tout document HTML.

L'entte d'une page HTML


Le marqueur head indique la prsence d'un prologue, d'un titre compris entre le marqueur de dbut et de fin. On n'y trouve, gnralement, que peu d'autres marqueurs, part le marqueur title. Vous ne devez placer aucun lment de votre texte dans ce bloc. Le marqueur title vous permet de donner un titre votre page, et est charg de dcrire succintement le contenu de la page. Ce titre apparat dans la barre de titre du navigateur utilis. Enfin ces marqueurs doivent se trouver juste aprs le marqueur <html> et avant le marqueur <body>.

Le corps d'une page HTML


<body></body> Le reste du document HTML, textes, liens, images, toute information... doit tre compris entre ces marqueurs. En associant les marqueurs que nous venons de voir, on obtient : <html> <head> S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

<title>Le titre de la page</title> </head> <body> Vos textes, liens & images... </body> </html>

Les commentaires
<!-- les commentaires --> Vous pouvez inclure des commentaires dans vos documents HTML pour dcrire le document, ou apporter toute indication sur l'tat du document. Le texte plac en commentaire est ignor par les navigateurs lorsque le fichier HTML est lu. De ce fait, il n'apparat pas l'cran.

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

Ce qui rend le Web si populaire, c'est la circulation entre les diffrentes pages s'effectuant l'aide de liens hypertextes, contenus dans les documents eux-mmes. Grce ces liens, la personne qui consulte des donnes n'a aucun besoin de connatre l'adresse d'un site Web, pas plus que les URL (Uniform Ressource Locator) des fichiers qu'il contient. Pour rendre leur prsence explicite, les clients WEB (navigateurs) leur associent une couleur particulire et/ou une mise en forme telle que le soulignement.

Couleur des liens


La dfinition des couleurs des liens se fait en associant des attributs au marqueur <body> (que nous avons vu au chapitre 3, "La page HTML"). Les couleurs sont attribues l'aide de codes hexadcimaux. text sert dfinir la couleur du texte par dfaut. Par exemple : <body text="FFFF00">

link sert dfinir la couleur des liens. Par exemple : <body link="00FFFF">

vlink sert dfinir la couleur des liens dj visits. Par exemple : <body vlink="A100A1">

alink sert dfinir la couleur d'un lien en cours de slection. Par exemple : <body alink="808080">

Lien avec une page d'un autre site


Pour insrer un lien, il faut indiquer une rfrence (URL) et un lment, texte ou image, visible l'cran sur lequel on doit cliquer pour y accder. Voici un exemple de code pour obtenir un lien : <a href="menu.html">Le menu du mariage</a> Le lien apparat alors en couleur contraste et soulign dans le

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

navigateur et donne: Le menu du mariage. Les liens peuvent diriger le navigateur vers des sites HTTP, FTP, MAILTO... (vous pouvez en effet, lier un lment avec une bote aux lettres, un transfert...). Pour crer un lien, il s'agit tout simplement de dfinir le type de document dans la commande A HREF comme dans l'exemple qui suit : <a href="http://www.nordnet.fr">Venez chez NordNet</a> Ce qui aura pour rsultat : Venez chez NordNet Remarquez que lorsque vous survolez avec votre souris le lien hypertexte, (la souris devient une main), vous pouvez lire sur la barre d'tat (en bas de la fentre de votre navigateur) l'adresse du lien auquel il se rfre.

Liens avec une page sur le mme site


Le code : <a href="page.html">Voici mon lien sur une autre page !!!</a> donne tout simplement accs une page HTML situe au mme niveau hirarchique que la page actuellement ouverte sur le serveur (la page appele se situe dans le mme dossier que la page contenant le lien).

Liens sur une mme page (les ancres ou sections)


La commande a name enregistre une encre l'intrieur d'un document HTML. On peut ensuite rfrer directement ce point prcis avec une commande a href. Ds que vous cliquerez sur le lien visant une ancre, le navigateur ira se positionner directement sur la ligne de texte o aura t place l'encre. La commande peut se taper directement comme ceci : <a name="nom_de_l_ancre"> ce qui indique au navigateur o se trouve la section (l'ancre) vise. Pour se rendre cet endroit, il faut taper la rfrence comme ceci : <a href="page.html#ancre_couleur">Couleur des liens</a> Pour essayer la commande en question, cliquez sur ce lien Couleur des liens et vous devriez vous rendre la section concerne de cette page.

Les liens a name fonctionnent aussi d'un document HTML un autre. S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

Ainsi, aprs avoir identifi les sections d'un document avec des <a name="general">, il s'agit de taper la commande plus complte <a href="caract.html#general">Gnralits</a> Ainsi, le lien indique d'abord le nom du fichier HTML dans lequel il faut se rendre et ensuite le nom de la section l'intrieur de ce fichier. Le nom du fichier et l'ancre sont spars par un dise ( # ).

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

Nous avons vu dans un prcdent chapitre quelle tait la structure d'un document HTML. Nous allons maintenant dcouvrir comment il est possible de prsenter l'information entre les marqueurs <body>. Nous nous intresserons aux diffrentes formes de paragraphe, aux polices de caractres et enfin aux variations diacritiques. Les Paragraphes Les Polices Les Caractres

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

L'information que l'on veut faire passer doit toujours tre ordonne, hirarchise... de faon attirer l'attention du lecteur. Nous allons voir comment il est possible de prsenter l'information dans son ensemble.

<p>, <br> & <nobr></nobr>


<p> marque un changement de paragraphe. <br> donne un simple changement de ligne. Notez ici que les commandes <br> et <p> n'ont pas tre fermes. Vous pouvez utiliser plusieurs commandes <br> et <p> rptitivement pour augmenter l'espacement. Il faut aussi prciser que le passage la ligne est automatique en HTML. Pour viter que les phrases ne soient tronques arbitrairement, vous pouvez utiliser le marqueur <nobr>(qui lui, doit toujours tre termin par </nobr>)

<hr>
<HR> donne une ligne comme celle-ci :

o Pour faire varier la largeur de la ligne : on utilise le code suivant: <HR WIDTH=75%>. Cela donne une ligne de 75% de la largeur de l'cran (selon la largeur de la fentre du navigateur utilise par l'usager).

Toutes les valeurs sont possibles, mme les dcimales. Voici un chantillon vari : <HR WIDTH=5%> donne :

<HR WIDTH=15%> donne :

<HR WIDTH=25%> donne :

<HR WIDTH=50%> donne :

<HR WIDTH=65%> donne :

<HR WIDTH=92%> donne :

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

10

o Pour faire varier l'paisseur de la ligne : <HR SIZE="5"> donne une ligne d'une paisseur de 5 pixels :

Toutes les valeurs sont possibles, mme les dcimales. Voici un chantillon vari : <HR SIZE="1"> donne :

<HR SIZE="2"> donne :

<HR SIZE="3"> donne :

<HR SIZE="3.5"> donne :

<HR SIZE="4"> donne :

<HR SIZE="10"> donne :

<HR SIZE="25"> donne :

o On peut faire varier les deux en mme temps : Toutes les valeurs sont possibles, mme les dcimales. Voici un chantillon vari : <HR SIZE=2 WIDTH=25%> donne :

<HR SIZE=4 WIDTH=45%> donne :

<HR SIZE=10 WIDTH=95%> donne :

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

11

<HR SIZE=20 WIDTH=25%> donne :

o Les lignes peuvent aussi tre alignes gauche droite ou centres. Les commandes suivantes <HR ALIGN=left> <HR ALIGN=right> <HR ALIGN=center> donnent respectivement :

o Enfin, la commande <HR NOSHADE> permet d'afficher une ligne sans effet de profondeur comme ci-dessous :

o Il est galement intressant de placer des images en tant que lignes, ce qui offre beaucoup plus de possibilits graphiques. Ainsi, il s'agit de dessiner et prparer l'avance dans votre logiciel de dessin prfr une image en forme de ligne et de l'enregistrer en format GIF. Ces images sont alors appeles l'aide de la commande de base (<img src="images/ligne1.gif"> voir dans le chapitre "Insrer des images"). Ainsi, on pourrait avoir des lignes de ce genre :

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

12

<center></center>
Le marqueur <center> suivi par quelque chose (texte, image) et termin par </center> donne : Quelque chose de centr

<blockquote> </blockquote>
La commande <blockquote> </blockquote> permet d'emprisonner un paragraphe telle une citation en alina comme dans l'exemple ci-dessous :

NordNet est un lieu de rendez-vous, d'information, d'changes et de rencontres, mais aussi une exceptionnelle porte d'entre sur Internet pour tous les gens du Nord. NordNet se construit de jour en jour autour de nouvelles rubriques, et fait dcouvrir notre rgion. Les entreprises sont aussi de plus en plus prsentes sur Internet. Retrouvez sur NordNet celles qui ont dj mis un pied dans le futur.

&nbsp;
En mettant cette commande entre deux mots, cela vite de les sparer s'il y a un passage la ligne automatique (Espace inscable).

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

13

Cette partie a pour objectif de dcrire les possibilits de rendre des caractres en gras, italique... dans une page Web. Voyons maintenant les diffrents marqueurs permettant de prsenter l'information :

Gnralits sur les caractres


La police des caractres est unique sur Internet et quelque soit le browser utilis, elle apparatra toujours de la mme faon. On peut cependant changer sa taille, ou donner un effet de police de machine crire.

<tt></tt>

Ce marqueur est l'un de ceux qui modifient l'apparence du texte. Vous pouvez constater que ces quelques mots sont sous le format style "machine crire". Elles ont t encadres par les marqueurs <tt> </tt>.

<hx> </hx>

La prsentation d'une page commence gnralement par le choix et l'usage d'enttes prdtermins qui s'chelonnent de <h1> <h6> (h pour header). Ces marqueurs comprennent un choix de taille (1 6), le caractre gras et un passage la ligne automatique. <h1>Exemple de Header de niveau 1</h1>

Exemple de Header de niveau 1


<h2>Exemple de Header de niveau 2</h2>

Exemple de Header de niveau 2


<h3>Exemple de Header de niveau 3</h3>

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

14

Exemple de Header de niveau 3

<h4>Exemple de Header de niveau 4</h4>

Exemple de Header de niveau 4

<h5>Exemple de Header de niveau 5</h5> Exemple de Header de niveau 5

<h6>Exemple de Header de niveau 6</h6>


Exemple de Header de niveau 6

Il est noter que les headers peuvent recevoir un attribut :align. Align va changer la place du titre ds l'instant o il aura comme valeur, soit left, center, right, ou justify .

<font> </font>

Ce marqueur permet grce l'attribut size d'augmenter ou de rduire la taille des caractres. Aussi, en associant l'attribut color (qui doit recevoir un code hexadcimal), on peut
mettre une srie de caractres dans une couleur diffrente.

<font size=+2 color=408080> Plus gros de 2 units et couleur ptrole </font>

Plus gros de 2 units et couleur ptrole

Caractres gras
Il existe deux possibilits pour mettre des caractres en gras : <b></b>

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

15

<b>Caractres gras</b> ===> Caractres gras <strong></strong> indique une insistance plus forte sur un mot qui se trouve dans un paragraphe.

Caractres italiques
Comme les caractres gras, il existe deux possibilits pour mettre les caractres en italiques : <i></i> <i>Caractres italiques</i> ===> Caractres italiques <em></em> indique une insistance plus forte sur un mot qui se trouve dans un paragraphe. Bien videmment, il est tout fait possible de combiner les caractres gras & italiques.

Texte prformat
Gnralement, le texte contenu dans le fichier HTML est format selon les marqueurs HTML qui s'y trouvent insrs. Ce qui veut dire que tout espace, tabulation ou retour chariot supplmentaire est ignor par le navigateur. La seule exception cette rgle concerne le marqueur de prformatage <pre></pre>. Tout ce qui se trouve plac entre eux est reproduit tel quel sur l'cran.

Monsieur, NordNet est un lieu de rendez-vous, d'information, d'changes et de rencontres, mais aussi une exceptionnelle porte d'entre sur Internet pour tous les gens du Nord. NordNet se construit de jour en jour autour de nouvelles rubriques, et fait dcouvrir notre rgion. Les entreprises sont aussi de plus en plus prsentes sur Internet. Retrouvez sur NordNet celles qui ont dj mis un pied dans le futur. Bien amicalement. Toute l'quipe NordNet

Autres caractres
S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

16

<blink> </blink>

Permet de faire clignoter un mot ou une phrase. <blink>Coucou ! Beuh !</blink> donne :

Coucou ! Beuh !

<address> </address>

Permet d'apposer sa signature au bas d'une page Web. On peut aussi y mettre ses Copyrights, et son adresse e-mail. <address>Marcel Fouillou 1996</address> donne : Marcel Fouillou 1996 <cite> </cite>

Marque une citation, un nom d'crivain... Pluie en Novembre, Nol en Dcembre. <cite>(Marcel Fouillou, 1889)</cite> donne :

Pluie en Novembre, Nol en Dcembre. (Marcel Fouillou, 1889)

<sup> </sup>

Permet d'utiliser les exposants dans des formules. S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

17

Si Albert Enstein avait d crire ces formules sur les pages HTML, il aurait programm comme a : E=MC<sup>2</sup> donne :

E=MC2

<sub> </sub>

Permet d'utiliser les indices dans des formules. De quoi satisfaire les chimistes, entre autres... H<sub>2</sub>O donne :

H2O

<small> </small>

Permet de mettre les caractres en tout petit. <small>C'est variment petit !</small> donne :

C'est vraiment petit !

<big> </big>

Permet de mettre les caractres en grand. S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

18

<big>C'est vraiment grand !</big> donne :

C'est vraiment grand !

<samp> </samp>

Affiche tous les caractres tels qu'ils ont t saisis. C'est souvent pratique pour afficher ce style de signes :

<samp>$, , #, @</samp> donne :

$, , #, @

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

19

Certains caractres ont une signification spcifique dans HTML. Pour les utiliser comme tels dans une page, il faut utiliser les commandes alternatives pour les afficher correctement l'cran. De plus, l'utlisation des caractres accentus sur le World Wide Web pose un certain nombre de problmes car il y a plusieurs faons de traiter les caractres diacritiques.

Caractres utiliss dans les marqueurs


Code HTML Caractre obetnu &amp; &gt; &lt; &quot; & > < " Valeur "et" commercial suprieur infrieur double guillemet

Caractres A
Majuscules Code HTML Caractre obtenu &AElig; &Aacute; &Acirc; &Agrave; &Aring; &Atilde; &Auml; &aelig; &aacute; &acirc; &agrave; &aring; &atilde; &auml; Minuscules Code HTML Caractre obtenu

Caractres C
Majuscules Code HTML Caractre obtenu &Ccedil; &ccedil; Minuscules Code HTML Caractre obtenu

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

20

Caractres E
Majuscules Code HTML Caractre obtenu &Eacute; &Ecirc; &Egrave; &Euml; Minuscules Code HTML Caractre obtenu &eacute; &ecirc; &egrave; &euml;

Caractres I
Majuscules Code HTML Caractre obtenu &Iacute; &Icirc; &Igrave; &Iuml; &iacute; &icirc; &igrave; &iuml; Minuscules Code HTML Caractre obtenu

Caractres N
Majuscules Code HTML Caractre obtenu &Ntilde; &ntilde; Minuscules Code HTML Caractre obtenu

Caractres O

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

21
Majuscules Code HTML Caractre obtenu &Oacute; &Ocirc; &Ograve; &Oslash; &Otilde; &Ouml; &#140; Minuscules Code HTML Caractre obtenu &oacute; &ocirc; &ograve; &oslash; &otilde; &ouml; &#156;

Caractres U
Majuscules Code HTML Caractre obtenu &Uacute; &Ucirc; &Ugrave; &Uuml; Minuscules Code HTML Caractre obtenu &uacute; &ucirc; &ugrave; &uuml;

Caractres Y
Majuscules Code HTML Caractre obtenu &Yacute; &#159; Minuscules Code HTML Caractre obtenu &yacute; &yuml;

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

22

Afin d'illustrer le contenu de vos pages Web, il vous est possible d'y insrer des images. Les formats d'images reconnus par les navigateurs HTML sont les images en .GIF et les images en .JPEG. Ceux-ci sont intressant car ils compriment les images; n'oublions pas que sur Internet, le poids est l'ennemi de la vitesse...

Les fonds d'cran On peut en effet dfinir un fond de page en associant des attributs au marqueur <body>. Les attributs sont soit background, soit bgcolor. background : associ au marqueur <body>, reoit en variable une image qui sera rpte autant de fois sur la page, jusqu' que ce soit uniforme : <body background="fond.gif"> bgcolor : associ au marqueur <body>, reoit en variable un code hexadcimal qui dfinira la couleur du fond : <body bgcolor=#000080>

Insrer une image au fil du texte


Il est possible d'insrer des images dans une phrase :

Vous voyez que cette image phrase.

se trouve dans le milieu de la

align=bottom L'image peut tre aligne la base du texte grce S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

23

l'attribut align (plac dans le marqueur <img src="">) qui reoit la variable bottom :

L'image <discobreak1.gif> est base.

aligne sa

align=top L'image peut tre aligne la tte du texte grce la variable top :

L'image <discobreak1.gif> est tte.

aligne sa

align=middle L'image peut tre aligne au centre du texte grce la variable middle :

L'image <discobreak1.gif> est centre.

aligne au

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

24

Mettre une image ct d'un texte


Il est possible de positionner des images sur le ct d'un paragraphe, grce l'attribut align. Il faut noter qu'il n'est bien videmment pas possible de combiner ces deux attributs dans le mme marqueur. ==> <align=left> donne : NordNet est un lieu de rendez-vous, d'information, d'changes et de rencontres, mais aussi une exceptionnelle porte d'entre sur Internet pour tous les gens du Nord. NordNet se construit de jour en jour autour de nouvelles rubriques, et fait dcouvrir notre rgion. Les entreprises sont aussi de plus en plus prsents sur Internet. Retrouvez sur NordNet ceux qui ont dj mis un pied dans le futur.

==> <align=right> donne : NordNet est un lieu de rendez-vous, d'information, d'changes et de rencontres, mais aussi une exceptionnelle porte d'entre sur Internet pour tous les gens du Nord. NordNet se construit de jour en jour autour de nouvelles rubriques, et fait dcouvrir notre rgion. Les entreprises sont aussi de plus en plus prsents sur Internet. Retrouvez sur NordNet ceux qui ont dj mis un pied dans le futur.

Autres commandes
Sous les navigateurs Netscape Navigator et Microsoft Internet Explorer, il est possible partir d'une image, de rduire ou d'augmenter sa taille grce l'attribut width et height qui doivent recevoir une taille en nombre de pixels. Par exemple :

Prenons John Travolta dans "La Fivre du Samedi Soir". Cette image donnerait avec width=150 et height=250

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

25

... il a certes grossi depuis ce film, mais pas autant que a !!!

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

26

Nous allons, dans ce chaptre , voir comment il est possible de raliser des mises en forme de tableaux trs sophistiqus, sans que la cration du code source pose de relles difficults. Pour ce faire nous nous appuyerons sur des exemples. Deux points seront abords dans les pages suivantes : Les commandes de bases Les attributs

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

27

Les commandes de base pour crer des tableaux en HTML sont les suivantes :

<table></table>
Cette commande est la commande principale pour ouvrir une zone de tableau. <table> </table> encadrent les limites d'un tableau.

<th></th>
De l'anglais table header, permet d'ajouter une range en en-tte. C'est le titre de la colonne. Les paramtres par dfaut sont l'usage du caractres gras et la position centre.

<tr></tr>
De l'anglais table row, marque le dbut d'une nouvelle ligne. <tr> </tr> permet de dfinir une range.

<td></td>
De l'anglais table data, est plac devant les informations qui composent les cellules. Les paramtres par dfaut sont l'alignement gauche et l'alignement vertical au centre.

<caption></caption>
Commande qui doit tre place directement sous la commande <table> et avant la premire range. Elle permet de donner un titre au tableau.

Exemple : Soit le code HTML suivant :

<table> <caption>Les chiffres</caption> <tr> <th> A </th> <th> B </th> <th> C </th> <th> D </th> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr> </table>

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

28

Affichera sous un logiciel client (Navigator ou Internet Explorer) :

Les chiffres A B C D 1 2 3 4 5 6 7 8

Nota Bene : Le HTML nous donne la possibilit d'insrer au sein d'un tableau diffrents types d'informations : du texte des images des liens hypertextes des listes & dfinitions des tableaux

Ceci est un texte simple centr et gras Ceci est un tableau dans un autre tableau Ceci est une liste :

Voici une image

1. se lever 2. prendre son petit3.


djeuner se laver

Ceci est un lien hypertexte droite

4. aller travailler

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

29

Les attributs permettent de configurer les tableaux pour obtenir la prsentation souhaite. Les attributs des tableaux sont :

L'Attribut : border se place dans la commande <table> et permet d'encadrer tous


les lments du tableau par une bordure dont il est possible de spcifier l'paisseur (border=1, border=2, etc...). Border peut tre utilis sans spcifier de valeurs (<table border>) Le code HTML suivant : <table border=5> <caption>Les chiffres</caption> <tr> <th> A </th> <th> B </th> <th> C </th> <th> D </th> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr> </table>

Affichera sous un logiciel client :

Les chiffres A B C D 1 2 3 4 5 6 7 8

Align
L'attribut align est utilis dans les commandes de base <caption> et <th>, <tr>, <td>. => Pour <caption> align permet de placer le titre d'un tableau au-dessus (top) ou en dessous (bottom) Les codes HTML suivant afficheraient sous un logiciel client : <caption align=top> <caption align=bottom>

Les chiffres A B C D 1 2 3 4 5 6 7 8

A B C D 1 2 3 4 5 6 7 8 Les chiffres

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

30

=> Pour <th>, <tr>, <td> Ce mme attribut utilis dans ces commandes permet d'aligner le contenu des cellules gauche (align=left), droite (align=right) ou au centre (align=center).

Valign
Cet attribut est utilis l'intrieur des commandes <th>, <tr>, <td> Il permet de contrler la disposition verticale des donnes l'intrieur des cellules du tableau. Les valeurs qu'il peut adopter sont : valign=top : le texte est plac dans la partie suprieure de la cellule. valign=middle : le texte est plac au milieu de la cellule (valeur par dfaut). valign=bottom : le texte est plac dans la partie infrieure de la cellule. valign=baseline : le texte est plac sur la mme ligne.

Nowrap
Cet attribut, lorsqu'utilis dans les cellules <th> ou <td> empche que le texte ne soit bris en deux ou plusieurs lignes. Comparez les deux tableaux suivants pour voir la diffrence. La commande s'crit comme suit : <td nowrap> ou <th nowrap>

contenu trs long sans nowrap

contenu trs long avec nowrap

Width
Variation de la largeur totale d'un tableau. Cet attribut peut toutefois tre utilis avec les commandes <th>, <tr>, <td> Voici trois tableaux configurs avec une largeur respective de 30, 60 et 90%. Les commandes pour les obtenir sont : <table border=1 width="30%"> <table border=1 width="60%"> <table border=1 width="90%">

567 765 567 765 891 981

891 981

123 321 123 321

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

31

567 765

891 981

123 321

Rowspan
L'attribut rowspan a pour effet de donner une largeur de lignes que l'on dfinit. Ainsi, <td rowspan=2> affichera une colonne de 2 ranges. Les commandes s'appliquent indiffremment avec <td> ou <th>. Exemples : 1 exemple La commande <th rowspan=2> La commande <th rowspan=10> <th rowspan=10> <th rowspan=10> 2 exemple <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> Sur la droite 3 exemple <th rowspan=2> dans le tableau Centr 4 exemple <th rowspan=2> ou <td rowspan=2>

Colspan
Attribut identique rowspan mais pour les colonnes. Exemples : 1 exemple La commande <th colspan=2> 2 exemple Chiffres 1 2 3 4 5 6 7 8 9 En bas <th colspan=2> 3 exemple S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

32

Centr

dans le tableau

4 exemple <th colspan=2> ou <td colspan=2> Dernier exemple qui combine les attributs rowspan & colspan Dernier exemple 2 oprations 6 + 11 = 13 +7 = 13 = 13

10 + 3

Cellspacing
L'attribut cellspacing dtermine l'paisseur de la bordure. Bien sr, cellspacing ncessite la prsence de l'attribut border (NB : border ne dfinit que la bordure entourant le tableau en entier).

Par exemple, le premier tableau a une valeur d'espacement des bordures de 0, alors que le deuxime a une valeur de 5.

100 200 300 400 500 600 100 200 300 400 500 600

Cellpadding
L'attribut cellpadding dtermine l'paisseur de la bordure. Bien sr, cellpadding ncessite la prsence de l'attribut border (NB : border ne dfinit que la bordure entourant le tableau en entier).

Par exemple, le premier tableau a une valeur d'espacement des cellules de 0, alors que le deuxime a une valeur de 5.

100 200 300 400 500 600 100 200 300 400 500 600
Les attributs cellspacing & cellpadding peuvent tre combins comme dans l'exemple ci-dessous avec des valeurs respectives de 0 et de 5.

100 200 300


S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

33 400 500 600 100 400 200 500 300 600

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

34

Cette partie dcrit comment il est possible d'afficher des listes & dfinitions. Cela consiste prsenter de l'information, avec une indentation comme on peut le voir dans les sommaires des ouvrages papier... Les listes peuvent tre programmes de plusieurs faons : Les listes peuvent tre programmes de plusieurs faons : Listes ordonnes Listes non ordonnes Listes numrotes ou puces Les emboitements, etc ...

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

35

Ce type de listes est parfois appel liste numrote. Les termes insrs dans cette listes seront numrots. Lorsqu'un navigateur interprte une liste ordonne, il numrote (et souvent indente) chaque terme squentiellement. Ce n'est pas vous d'ajouter une numrotation et si vous ajoutez ou supprimez des termes, la numrotation de l'ensemble restera correcte.

<ol></ol>
De l'anglais, Ordered-List, ces marqueurs encadrent les termes numroter. Cette commande est termine par </ol>.

<li>
De l'anglais, List-Item, est plac au dbut de chaque ligne, pour indiquer le premier terme dfinir.

Exemple : Soit le code suivant : <ol> <lh>Formation au HTML</lh> <li>Introduction <li>A la dcouverte du HTML <li>La page HTML <li>Le formatage du texte <li>Les listes & dfinitions <li>Les liens HyperTexte <li>... </ol> Qui donnera l'affichage suivant : Formation au HTML

1. 2. 3. 4. 5. 6. 7.

Introduction A la dcouverte du HTML La page HTML Le formatage du texte Les listes & dfinitions Les liens HyperTexte ...

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

36

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

37

<ul></ul>
De l'anglais, unumbered-List, ces marqueurs encadrent les termes prsenter. Cette commande est termine par </ul>.

<li>
De l'anglais, List-Item, est plac au dbut de chaque ligne, pour indiquer le premier terme dfinir.

Les attibuts
Il est possible de changer la forme des diffrentes puces grce l'attribut type, qui peut recevoir la commande disc (rond noir), circle (carr blanc) ou square (carr noir). Dans l'exemple suivant, vous pourrez constatr les effets de cet attributs.

Exemple : Soit le code suivant : <ul type=disc> <lh>Formation au HTML</lh> <li>Introduction <li>A la dcouverte du HTML <li>La page HTML <li>Le formatage du texte <li>Les listes & dfinitions <li>Les liens HyperTexte <li>... </ul> Qui donnera l'affichage suivant : Formation au HTML Introduction A la dcouverte du HTML La page HTML Le formatage du texte Les listes & dfinitions

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

38
Les liens HyperTexte ...

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

39

<dl></dl>
De l'anglais, Definition-List, indique que ce qui qui suit est une liste de dfinitions. Cette commande est termine par </dl>.

<dt>
De l'anglais, Definition-Term, est plac pour indiquer le premier terme dfinir.

<dd>
De l'anglais, Definition-Data, est plac au dbut du texte qui compose la dfinition.

Exemple : Soit le code suivant : <dl> <lh>Formation au HTML</lh> <dt>Les tableaux <dd>Les commandes de base <dd>Les attributs <dt>Les listes & dfinitions <dd>Les listes non ordonnes <dd>les listes ordonnes <dd>les dfinitions </dl> Qui donnera l'affichage suivant : Formation au HTML Les tableaux Les commandes de base Les attributs Les listes & dfinitions Les listes non ordonnes Les listes ordonnes Les dfinitions On s'apperoit bien que l'indentation est applique.

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

40

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

41

Exemple : Soit le code suivant : <ol> <lh><b>Formation au HTML</b></lh> <li>Introduction <li>A la dcouverte du HTML <li>La page HTML <li>Le formatage du texte <li>Les listes & dfinitions <ul> <li>Les listes non ordonnes <li>les listes ordonnes <li>les dfinitions </ul> <li>Les tableaux <ul type=disc> <li>Les commandes de base <li>les attributs </ul> <li>...etc... </ol> Qui donnera l'affichage suivant : Formation au HTML

1. 2. 3. 4. 5.

6.

Introduction A la dcouverte du HTML La page HTML Le formatage du texte Les listes & dfinitions Les listes non ordonnes les listes ordonnes les dfinitions Les tableaux Les commandes de base les attributs

2.

...

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

42

Jusqu' prsent nous avons vu les diffrents moyens de diffuser de l'information et de la prsenter. Mais sur le Web, l'information ne circule pas qu'en sens unique. Il est possible de faire circuler l'information dans les deux sens et de recolter diverses donnes et requtes, en offrant la possibilit l'utilisateur de renseigner des formulaires de saisie. Les applications sont trs varies : sondage, rserver une chambre ou un billet de train, louer une voiture, faire une recherche partir d'une base de donnes, etc... Tous les lments d'un formulaire HTML doivent obligatoirement tre encadrs par les marqueurs <form> et </form>. Exemple : <form> <input ... > <input ... > <input ... > ... </form>

Les zones de saisie


Grce la commande <input>, il est possible de crer des formulaires. Deux attributs sont toujours associs ce marqueur :

1. name :
qui sert d'tiquette aux informations qui vont tre saisies ou slectionnes (par exemple, une zone de saisie pourra tre relie un champ d'une base de donnes). C'est le nom du champ.

2. type :
permet de dfinir la nature du champ de saisie. Il est suivi d'une valeur et d'un certain nombre d'options pour donner une forme de saisie ou de slection.

type=text Cette valeur permet de recevoir du texte. Il est possible de dfinir le nombre de caractres grce l'attribut size : Le code suivant :

<form> S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

43

Nom : <input type="text" name="nom" size=30> Prnom : <input type="text" name="prenom" size=15> </form> donnera l'cran Nom : Prnom :

type=password Similaire la valeur prcdente, except que les donnes saisies n'apparaissent pas "en clair" l'cran. Il est possible de dfinir le nombre de caractres grce l'attribut size : Le code suivant : <form> Votre mot de passe : <input type="password" name="mot_de_passe" size=10> </form> donnera l'cran Votre mot de passe :

type=checkbox Fait apparatre une zone de slection qui prend la forme d'une case cochable. La variable value permet d'attribuer une tiquette la variable name la valeur de la case slectionne. L'option checked fait apparatre une case coche par dfaut : Le code suivant :

<form> <input type="checkbox" name="viennoiserie" value="croissant" checked>Croissant <input type="checkbox" name="boisson" value="cafe">Caf <input type="checkbox" name="boisson" value="jus_de_fruit" checked>Jus de fruit </form> donnera l'cran

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

44

Croissant Caf Jus de fruit

type=radio Identique l'option prcdente. Seul point diffrent, une seule slection pourra tre valide (avec checkbox, on peut slectionner plusieurs choix en mme temps) : Le code suivant :

<form> <input type="radio" name="civil" value="Mr">Monsieur <input type="radio" name="civil" value="Mme" checked>Madame <input type="radio" name="civil" value="Mlle">Mademoiselle </form> donnera l'cran Monsieur Madame Mademoiselle

type=range range permet l'utilisateur d'entrer un nombre dont les limites sont fixes par 2 variables : min et max. Le code suivant : <form> Donnez maintenant une note entre 0 et 20 : <input type="range" name="note" min=0 max=20 size=2> </form> donnera l'cran : Donnez maintenant une note entre 0 et 20 :

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

45

type=submit Submit est un des deux boutons se trouvant au bas de tout formulaire de saisie. Il permet d'envoyer les informations saisies vers le serveur (donc de valider la saisie). L'attribut value permet de spcifier les mots figurant sur le bouton : Le code suivant :

<form> <input type="submit" value="Valider la saisie"> </form> donnera l'cran

type=reset Idem au bouton prcdent mais rinitialise tous les champs de saisie (annule la saisie) : Le code suivant :

<form> <input type="reset" value="Effacer et recommencer"> </form> donnera l'cran

Les champs mmos


Pour crer une zone de saisie comportant plusieurs lignes, on utilise les marqueurs <textarea></textarea>. Deux attributs permettent de dfinir la taille de la zone de saisie en nombre de lignes rows et en nombre de colonnes cols. Le code suivant :

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

46

<form> Vos commentaires : <textarea name="comments" rows=10 cols=20> </textarea> </form> donnera l'cran Vos commentaires :

Les menus droulants


<select> </select> permettent de crer des menus droulants comportant deux ou plusieurs options. Le code suivant : <form> <p>Slectionnez un jour de la semaine : <select name="jour_semaine"> <option>Lundi <option>Mardi <option>Mercredi <option>Jeudi <option>Vendredi <option>Samedi <option>Dimanche </select> </form> donnera l'cran : Slectionnez un jour de la semaine : On peut aussi spcifier la taille de la fentre de slection en ajoutant la variable size. Dans le cas o size=6, la fentre de slection fera apparatre les six premires options du menu. Slectionnez un jour de la semaine : Lorsque l'on dsire raliser un menu choix multiple, il suffit d'ajouter l'attribut multiple. Slectionnez un ou des jours de la semaine : En rajoutant, l'option selected au marqueur <option>, l'information qui suit sera slectionne par dfaut. Slectionnez un jour de la semaine :

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

47
Rcupration et exploitation des donnes Les donnes bien videmment, un moment ou un autre devront tre rcupres et enregistres par le serveur en vue de leur traitement. Les possibilits qui sont offertes dans ce domaine sont trs nombreuses. Elles n'entrent pas dans les spcifications du langage HTML puisque ce dernier se borne uniquement dfinir l'aspect des pages Web. Un programme informatique tratant les donnes transmises par un formulaire doit tre, cet effet, mis en place sur le serveur qui abrite ledit formulaire.

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

48

On peut incorporer autre chose que du texte et des images un fichier HTML : les sons et les animations vido sont aussi les bienvenus. Ils viendront se charger dans des fentres distinctes de celle du navigateur. Un logiciel dit "programme d'accompagnement" sera lanc parce que le navigateur ne peut reproduire tous les sons ou animations lui-mme.

Les trames sonores


Pour placer des sons dans un document HTML, vous devez d'abord choisir et travailler (ventuellement) vos sons dans votre logiciel de tratement sonore et sauvegarder les fichiers produits dans un format compatible (WAV, AIFF, AU). La commande pour insrer un son est du mme type que les pointeurs dj vus. On peut ainsi mettre un son "derrire" un lien ou une image. Voici les deux commandes : => Pour assigner un son un lien : <a href="bebe.wav">Ecoutez le bb (Attention : 48Ko)</a> donne : Ecoutez le bb (Attention : 48Ko) => Pour une image "sonore" : <a href="bebe.wav"> <img src="eric_bebe.jpg></a>

donne :

Les squences vido


L'intgration de squences vido est possible en HTML par le biais d'animations en format Quicktime, MPEG ou AVI. Dans l'exemple qui suit, le code utilis est: <a href="st_voyager.avi">Cliquez ici pour voir Star Trek Voyager (Attention : 358 Ko)</a>

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13

49

donne l'cran : Cliquez ici pour voir Star Trek Voyager (Attention : 358Ko) L'utilisateur doit cliquer sur la phrase contraste "Cliquez ici pour voir Star Trek Voyager" pour dclencher le tlchargement du fichier sur le disque dur de l'utilisateur. On peut galement choisir de mettre une image comme dclencheur de la commande en inscrivant une image source comme rfrence au lieu de texte comme ceci : <a href="st_voyager.avi"> <img src="voyager.gif"></a> donne :

L'animation se dclenchera d'elle-mme par le biais du programme d'accompagnement choisi.

S.NASSIH / Cours HTML / TDI2 / 2011-2012 11/01/13