Introduction HTML

html-intro

Introduction HTML
Code: html-intro

Originaux
url: http://tecfa.unige.ch/guides/tie/html/html-intro/html-intro.html url: http://tecfa.unige.ch/guides/tie/pdf/files/html-intro.pdf

Auteurs et version
Patrick Jermann - Daniel K. Schneider - Barbara Class - Vivian Synteta Version: 1.0 (modif le 15/5/01 par VS)

Prrequis:
Notions de base sur Internet: Module technique prcdent: internet Notions de WWW Module technique prcdent: www-tech

Internet et Education

TECFA 15/5/01

Introduction HTML - .

html-intro-2

Autres Modules
Module technique suivant: html-forms

Objectifs:
Connatre les origines et les principes de HTML Savoir composer une page HTML en utilisant un diteur de texte simple 1. Utiliser des titres et des paragraphes 2. Crer des listes 3. Etablir des liens hypertextuels 4. Insrer des images 5. Crer un tableau

Internet et Education

TECFA 15/5/01

Introduction HTML - 1. Table des matires dtaille

html-intro-3

1. Table des matires dtaille

1. Table des matires dtaille 2. Outils
2.1 Production de pages HTML

3 5
5

3. Documentations sur le WWW

3.1 Pointeurs en anglais 3.2 Pointeurs en franais 3.3 Vrificateur de code

7
7 7 7

4. Principe du langage HTML

4.1 4.2 4.3 4.4 5.1 5.2 5.3 5.4 Dfinition La drive HTML Les notions denvironnement et de balise Structure de base dun document HTML: Titres Paragraphes Sparateurs La balise <div>

8
8 8 8 10

5. Titres, sparateurs et paragraphes

11
11 12 14 16

6. Mots et caractres
6.1 Mise en forme de mots 6.2 Caractres accentus

17
17 18

7. Les Listes 8. Les Liens

8.1 Liens externes vers un autre document HTML 8.2 Liens internes
Internet et Education

19 22
23 25
TECFA 15/5/01

Introduction HTML - 1. Table des matires dtaille 8.3 Liens externes vers dautres protocoles/services Internet

html-intro-4 27

9. Images
9.1 Insertion dimages 9.2 Formats et rsolution dimage

28
28 31

10. Images cliquables

10.1 Client-side Maps 10.2 Server-side Maps (ISMAP) ... titre indicatif

32
33 38

11. Les Tables

11.1 Utilisation 11.2 La spcification dune table

39
39 42

Internet et Education

TECFA 15/5/01

Introduction HTML - 2. Outils

html-intro-5

2. Outils
Mtaphore du musicien: plusieurs options existent
Apprendre en jouant doreille Utiliser un sampler et un ordinateur MIDI Prendre des cours de solfge ......

2.1 Production de pages HTML A. Utiliser un simple diteur de texte (Notepad)

Taper le code html dans un simple diteur ou utiliser un outil spcialis Appropri pour maintenir des indexes simples

B. Utiliser un diteur avec support HTML

Pour faire des pages simples ou au contraire trs sophistiques Parfois difficile apprendre (Emacs) Exemples: WebExpert2000, aceHTML
Internet et Education TECFA 15/5/01

Introduction HTML - 2. Outils

html-intro-6

C. Utiliser un diteur Wysiwyg

(dans la mesure o ce concept est appropri). Netscape Composer (gratuit ou presque), Claris Home Page, Microsoft Frontpage, Adobe GoLivepage page pabe, DreamWeaver, HotMetal, etc. Les sites Webmaster tiennent jour des listes, par ex: http://www.webreference.com/authoring/languages/html/editors/

D. Utiliser un traitement de texte

comme Framemaker, Word ou Wordperfect ou encore un langage de formatage comme Latex et ensuite traduire le texte en html. Solution prfrable pour mettre des articles sur le Web Penser aussi au format PDF

E. Gnrer du HTML
"Emballage" de donnes en HTML, souvent partir de bases de donnes Ceci en temps rel (pages dynamiques) ou en mode "batch". Exemples: tests, sondages, achats, etc.

Internet et Education

TECFA 15/5/01

Introduction HTML - 3. Documentations sur le WWW

html-intro-7

3. Documentations sur le WWW

url: http://tecfa.unige.ch/guides/htmlman/html-1.html

3.1 Pointeurs en anglais

Le Beginners Guide de NCSA: url: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html HTML Quick Guide de Michael Grobe: url: http://tecfa.unige.ch/guides/html-quick-guide.html Le Bare Bones Guide de Kevin Werbach: url: http://tecfa.unige.ch/guides/bare_bone.html

3.2 Pointeurs en franais

Pointeurs vers des guides et des tutoriels: url: http://tecfa.unige.ch/info-www.html

3.3 Vrificateur de code

Certains outils possdent un vrificateur (WebExpert) Exemple dun programme "stand-alone": WebLint url: http://www.unipress.com/cgi-bin/WWWeblint
Internet et Education TECFA 15/5/01

Introduction HTML - 4. Principe du langage HTML

html-intro-8

4. Principe du langage HTML

4.1 Dfinition
HyperText Markup Language (HTML) est un langage de mark up ... ... qui dfinit la structure logique dun document WWW diffus sur le Web.

4.2 La drive HTML

conu comme un langage de structuration logique du contenu utilis comme langage de prsentation et de mise en page XML est un retour vers le but premier de structuration

4.3 Les notions denvironnement et de balise

Un environnement possde un dbut et une fin. Un environnement est dlimit par une balise ou marqueur (Angl. "marker" ou tag) insr au dbut et la fin. Chaque marqueur est dlimit par les signes < et >
<balise> ....... le contenu de lenvironnement </balise>

Voici un exemple denvironnement HTML:

<H1>Titre principal</H1>
Internet et Education TECFA 15/5/01

Introduction HTML - 4. Principe du langage HTML

html-intro-9

A. Imbrication
Les environnements HTML peuvent tre imbriqus selon des rgles bien dfinies. Le chevauchement denvironnements nest pas permis :
JUSTE: <h1><a href=./test.html>Votre titre</a></h1>

FAUX !! <h1><a href=./test.html>Votre titre</h1></a>

B. Paramtres (ou attributs)

Les paramtres modifient le comportement dun environnement. Voici un exemple qui dfinit une image de fond de page (BACKGROUND) et les couleurs du texte (text), des liens non-visits (link) et des liens visits (vlink)
<BODY BACKGROUND="/gif/backgrnd.jpg" vlink="FFAA00"> ........ ........ ........ </body> text="FFFFFF" link="FFFF00"

Les outils ddition permettent de dfinir les paramtres des environnements

Internet et Education TECFA 15/5/01

Introduction HTML - 4. Principe du langage HTML

html-intro-10

4.4 Structure de base dun document HTML:

<HTML> <HEAD> <TITLE>document test (11-Oct-1995)</TITLE> <!-- Created by: D.K.S., 11-Oct-1995 --> </HEAD> <BODY> <H1>document test</H1> Voici un test! <ADDRESS> <A HREF="http://tecfa.unige.ch/tecfa/general/tecfa-people /schneider.html">D.K.S.</A></ADDRESS> </BODY> </HTML>

1. Le document doit tre entour de marqueurs (Angl. tags) html 2. L en-tte (head) est utilis pour stocker de linformation propos du document. Dans la plupart des cas, il sagit uniquement du titre. 3. Le titre (title) du document est utilis deux fins: Dans la plupart des browsers, le titre est affich dans la barre suprieure de la fentre. Le titre est souvent utilis par les search robots pour indexer votre page. Choisissez donc quelque chose de significatif. 4. Toute la page HTML proprement dite (ce qui est visible dans le browser) est incluse dans le corps (body).
Internet et Education TECFA 15/5/01

Introduction HTML - 5. Titres, sparateurs et paragraphes

html-intro-11

5. Titres, sparateurs et paragraphes

Exercice: url: http://tecfa.unige.ch/guides/htmlman/exo1.html

5.1 Titres
Il existe 6 niveaux de titre dans HTML. Un retour la ligne est automatiquement insr aprs un titre. Syntaxe: <Hn></Hn> possible) o n est compris entre 1 et 6 (H1 est le plus grand titre

<H1>Titre de niveau 1</H1> <H4>Titre de niveau 4</H4>

Paramtre:
ALIGN sert spcifier lalignement horizontal dun titre.

Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"

<h1 align="center">Texte du titre centr</h1>

Internet et Education

TECFA 15/5/01

Introduction HTML - 5. Titres, sparateurs et paragraphes

html-intro-12

5.2 Paragraphes A. Paragraphe

Le marqueur de paragraphe "p" produit un double retour de ligne.

Syntaxe: <p> ... </p> Paramtre:

ALIGN sert spcifier lalignement horizontal du paragraphe.

Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"

<p align="center">Pierre mange une pomme</p> <p align="right">Marie samuse sur la balancoire</p>

B. Paragraphe en retrait
Le marqueur blockquote dcale le paragraphe droite.

Syntaxe: <blockquote> ... </blockquote>

<blockquote>Les avions se posent larogare</blockquote>

Internet et Education

TECFA 15/5/01

Introduction HTML - 5. Titres, sparateurs et paragraphes

html-intro-13

C. Paragraphe prformat
Le marqueur pre" est utilis lorsquon dsire afficher du texte avec un caractre nonproportionnel (monospaced font). Un m prendra autant de place quun i. Lorsquon insre plusieurs espaces la suite, ceux-ci sont maintenus laffichage (ce qui nest pas le cas avec le texte normal)

Syntaxe: <pre> ... </pre>

<pre> ligne 1 ligne2 prcde despaces </pre>

D. Adresse et signature
Address est utilis pour les indications relatives lauteur, la date de cration et la version du document.

Syntaxe: <address> ... </address>

<address> This document was created by Patrick.Jermann@tecfa.unige.ch Last modified: 2/7/95 </address>

Internet et Education

TECFA 15/5/01

Introduction HTML - 5. Titres, sparateurs et paragraphes

html-intro-14

5.3 Sparateurs A. Retour de ligne

Le marqueur br effectue un simple retour de ligne. Il nest pas ncessaire de le fermer par </br>.

Syntaxe: <br> Paramtre:

CLEAR permet de forcer lalignement du texte. Ce paramtre est particulirement utile lorsquon lutilise conjointement avec des images. Il introduit des retours de lignes jusqu ce que la marge droite, gauche ou les deux soient libres.

Syntaxe: CLEAR="LEFT ou RIGHT ou ALL"

<br clear=left> <br clear=all>

B. Ligne horizontale
Le marqueur hr insre une barre horizontale. Syntaxe: <hr> Voici les paramtres de <hr>: SIZE
spcifie lpaisseur de la barre horizontale en pixels. La valeur par dfaut est 1.
Internet et Education TECFA 15/5/01

Introduction HTML - 5. Titres, sparateurs et paragraphes

html-intro-15

Syntaxe: SIZE=n
<hr size=3>

WIDTH
spcifie la longueur de la ligne, soit en pixels, soit en pourcentage de la largeur de la fentre.

Syntaxe: WIDTH=n
<hr width=200> <hr width=60%>

ALIGN
spcifie lalignement de la barre

Syntaxe: ALIGN="LEFT ou RIGHT ou CENTER"

<hr aligh="CENTER">

NOSHADE
ne prend pas de valeur. Lorsquil est prsent dans le marqueur hr leffet est une ligne pleine sans ombrage.

Syntaxe: NOSHADE
<hr NOSHADE> Pour un aperu de leffet des diffrents paramtres consultez:

url: http://tecfa.unige.ch/guides/htmlman/hr-test.html

Internet et Education

TECFA 15/5/01

Introduction HTML - 5. Titres, sparateurs et paragraphes

html-intro-16

5.4 La balise <div>

permet de regrouper des lments on peut associer des attributs communs aux lments contenus entres les balises <div>
<div align="center"> <h1> Introduction </h1> <p> Bonjour </p> </div>

Cette balise est surtout utile pour associer des styles (voir les sites WebMaster ou un livre HTML rcent pour les style sheet)
<DIV class="cours"> ..... </DIV>

Internet et Education

TECFA 15/5/01

Introduction HTML - 6. Mots et caractres

html-intro-17

6. Mots et caractres
6.1 Mise en forme de mots
Voici quelques marqueurs de mise en forme de mots les plus utiliss en HTML.
Consultez ladresse suivante pour la liste complte:

url: http://tecfa.unige.ch/guides/htmlman/words_test.html
<B>Bold</B> <I>Italic</I> <U>Underline</U> <S>Strikethru</S> <SUP>Superscript</SUP> <SUB>Subscript</SUB> <EM>Emphasised</EM> <STRONG>Strong</STRONG> <CODE>Code</CODE> <Q>Quote</Q> <CITE>Citation</CITE> <!-- HTML comment -->

Notez que pour une utilisation avance, lapplication de ces marqueurs permet dindexer le contenu dun document et peut par ailleurs savrer utile pour lutilisation dun traducteur de HTML vers un autre format.

Internet et Education

TECFA 15/5/01

Introduction HTML - 6. Mots et caractres

html-intro-18

6.2 Caractres accentus

Certains diteurs prennent en charge la conversion des caractres accentus spcifiques une langue. Sinon le HTML ci-dessous permet dobtenir le caractre souhait laffichage.
Tableau 1: Codes HTML pour caractres spciaux

Code HTML
&acirc; &agrave; &ccedil; &eacute; &egrave; &ecirc; &gt; &lt; &icirc; &nbsp; &ocirc; &quot; &ucirc;
Internet et Education

Rsultat Display small a, circumflex accent (). Display small a, grave accent (). Display capital c, cedilla (). Display small e, acute accent (). Display small e, grave accent (). Display small e, circumflex accent (). Display greater than sign (>). Display less than sign (<). Display small i, circumflex accent (). Display non-breaking space ( ). Display small o, circumflex accent (). Display double quote (). Display small u, circumflex accent ().
TECFA 15/5/01

Introduction HTML - 7. Les Listes

html-intro-19

7. Les Listes
Exercice: url: http://tecfa.unige.ch/guides/htmlman/exo2.html Pour voir des exemples des diffrents types de listes, reportez-vous : url: http://tecfa.unige.ch/guides/htmlman/lists_test.html.

A. Liste puces
Syntaxe: <ul> ... </ul>
<ul> <lh>Titre de la liste</lh> <li>Elment 1</li> <li>Elment 2</li> </ul>

B. Liste numrote
Syntaxe: <ol> ... </ol>
<ol> <lh>Titre de la liste</lh> <li>Elment 1</li> <li>Elment 2</li> </ol>
Internet et Education TECFA 15/5/01

Introduction HTML - 7. Les Listes

html-intro-20

C. Liste de dfinitions
Le marqueur dl
dlimite une zone de liste de dfinition qui contient des termes "dt" et des descriptions "dd"

Syntaxe: <dl> ... </dl> Le marqueur dt

introduit un nouveau terme de dfinition.

Syntaxe: <dt> ... </dt> Le marqueur dd

introduit une description du terme de dfinition. Le rsultat lcran est un dcalage du texte vers la droite.

Syntaxe: <dd> ... </dd> Exemple 7-1: Une liste de dfinitions

<dl> <th>Titre de la liste <dt>Terme 1</dt> <dd>Dfinition du terme 1</dd> <dt>Terme 2</dt> <dd>Dfinition du terme 2</dd> .... </dl>
Internet et Education TECFA 15/5/01

Introduction HTML - 7. Les Listes

html-intro-21

D. Combinaison de diffrents type de listes

Les listes peuvent tre embotes les unes dans les autres, il suffit pour cela de dfinir un lment dune liste comme tant une autre liste.

Exemple 7-2: Exemple dembotement de listes

<ol> <li> Achats faire </li> <p> <ul> <li> 2 litres de lait </li> <li> 1 kg de pain mi-blanc </li> </ul> <li> Recette </li> <dl> <dt>Pain</dt> <dd>Il faut de la farine et de leau, de la levure.</dd> <dt>Lait</dt> <dd>Si vous tes en ville, aucune chance ... Il faut trouver une vache </dd> </dl> <li> Dernier lment numrot </li> </ol>

Internet et Education

TECFA 15/5/01

Introduction HTML - 8. Les Liens

html-intro-22

8. Les Liens
Exercice: url: http://tecfa.unige.ch/guides/htmlman/exo3.html Les liens permettent de construire un hypertexte et peuvent tre de diffrents types: externes: un pointeur du document mne vers un autre document internes: un pointeur renvoie une section du mme document Le marqeur <a> Un lien se dfinit par le marqueur <a ...> suivi du paramtre HREF=URL qui dfinit ladresse du document vers lequel le lien conduit. Il se termine par </a>. Le texte ou limage qui sont insrs entre les marqueurs de dbut et de fin sont les parties actives du lien ("mots_sensibles" ci-dessous) et dclencheront le chargement du document lorsquon clique dessus. Syntaxe: <A HREF="adresse"> mots_sensibles </A>
<A HREF="http://tecfa.unige.ch/welcome.html">Cliquez ici pour aller TECFA</A> <A HREF="/welcome.html">Retour lacceuil</A> <A HREF="../index.html">Remonter dun niveau</A>

Internet et Education

TECFA 15/5/01

Introduction HTML - 8. Les Liens

html-intro-23

8.1 Liens externes vers un autre document HTML

Ce type de lien permet de pointer vers un document rfrenc par une adresse URL ou par un chemin relatif. Ce document peut tre un document HTML ou tout autre type de fichier. (postscript, sons, images etc ...). Il faut distinguer entre une: adresse absolue (on indique le chemin pour parvenir la page cible en entier) adresse relative (on indique le chemin depuis la page courante) Adresse absolue pour atteindre un fichier situ sur un autre serveur que celui de la page dorigine

http://www.tecfa.ch/ origine

<a href ="http://www.unige.ch/cible.html"> click l </a>

http://www.unige.ch/

cible.html
Internet et Education TECFA 15/5/01

Introduction HTML - 8. Les Liens

html-intro-24

http://www.tecfa.ch/ origine.html

Adresse absolue pour atteindre un fichier situ sur le mme serveur que celui de la page dorigine
Arborescence du serveur WWW / /documents/ /documents/cible.html

<a href ="/documents/cible.html"> click l </a>

/documents/cible.html

http://www.tecfa.ch/ origine.html

Adresse relative pour atteindre un fichier situ sur le mme serveur que celui de la page dorigine
Arborescence du serveur WWW / /documents/ /documents/cible.html /essai/ /essai/origine.html

<a href ="../essai/cible.html"> click l </a>

/documents/cible.html
Internet et Education TECFA 15/5/01

Introduction HTML - 8. Les Liens

html-intro-25

8.2 Liens internes

Les liens internes permettent de construire des tables de matires et des renvois lintrieur dun texte Un lien interne pointe vers une ancre, cest dire un endroit lintrieur dun document dfini par un nom. Il faut dfinir deux choses pour un lien interne. Lancre interne Syntaxe: <A NAME="nom_de_lancre"></A>
<A NAME="bas_de_la_page"></A>

Le lien vers lancre

Le lien proprement dit se dfinit avec le marqueur a suivi de

Syntaxe: <A HREF=#nom>mots_sensibles</A>

<A HREF="#bas_de_la_page>Aller en bas</A>

Internet et Education

TECFA 15/5/01

Introduction HTML - 8. Les Liens

html-intro-26

Exemple 8-1: Liens internes et tables de matires

.... <a href=#partie1>Premire Partie</a> <a href=#partie2>Deuxime Partie</a> .... ... <a name=partie1></a> <h1>Partie 1</h1> .... ... <h1><a name=partie2>Partie 2</a></h1>
.....

Il est galement possible dutiliser les ancres dans les liens externes. Il faut alors spcifier lancre vers laquelle pointe le lien en ajoutant #nom la fin de lURL. Exemple 8-2: Ancres et liens externes
<a href=http://tecfa.unige.ch/cours/exemple.html#partie2>Deuxime Partie</a>

Et dans le document exemple.html on trouve la dfinition de lancre suivante:

<a name=partie2> <h2>Partie 2</h2>

Internet et Education

TECFA 15/5/01

Introduction HTML - 8. Les Liens

html-intro-27

8.3 Liens externes vers dautres protocoles/services Internet A. Liens pour lenvoi dun message e-mail et la lecture dun newsgroup
Un tel lien lance automatiquement lapplication de messagerie lectronique en incluant le nom du destinataire. De mme, il est possible demmener le lecteur vers un groupe de discussion en mentionnant le nom de celui-ci dans la dfinition du lien.

Exemple 8-3: Exemple de lien pour lenvoi de-mail

<a href=mailto:Patrick.Jermann@tecfa.unige.ch>Envoyez moi un message</a>

Exemple 8-4: Exemple de lien pour la lecture dun newsgroup

Consultez le <a href=news:comp.info.systems.www.authoring.html>groupe de discussion sur ldition en HTML</a>.

B. Liens pour le tlchargement dun fichier

Ce type de lien est utilis pour donner accs un dialogue de tlchargement de fichier. Le protocole indiqu dans lURL est , en loccurrence, le protocole de transfert de fichiers ftp.

Exemple 8-5: Exemple de lien pour le tlchargement de fichiers

<a href=ftp://tecfa.unige.ch/pub/software/>Liste des logiciels disponibles</a>

Internet et Education

TECFA 15/5/01

Introduction HTML - 9. Images

html-intro-28

9. Images
Exercice: url: http://tecfa.unige.ch/guides/htmlman/exo4.html

9.1 Insertion dimages

Les formats dimage affichables par les browsers sont *.gif et *.jpg (*.png pour les rcents) Pour avoir des images lintrieur dun document HTML, on utilise la commande img:

Syntaxe: <img src=URL align=alignement alt=commentaire width=n height=n hspace=n vspace=n border=n> Paramtres:
Le paramtre src est obligatoire et contient un URL ou un chemin relatif vers un fichier de format .gif ou .jpg ou .png

Syntaxe: src="chier.gif"
<img src=cow.gif>

Le paramtre align permet de spcifier lalignement de limage par rapport au texte. Les valeurs possibles sont : top, bottom, middle, right, left Syntaxe: ALIGN = "TOP ou BOTTOM ou MIDDLE ou RIGHT ou LEFT"
<img src=cow.gif align="LEFT">

Le paramtre alt contient le commentaire que les personnes utilisant un browser textuel (sans images) voient la place de limage.
Internet et Education TECFA 15/5/01

Introduction HTML - 9. Images

html-intro-29

Paramtres (suite): Les paramtres width et height se rfrent la largeur et la hauteur de limage (en pixels). Utilisez cette procdure dans tous les cas, car cela permet de commencer lire le texte avant que limage ne soit charge compltement. Syntaxe: WIDTH="n" HEIGHT="m" o n et m sont un nombre de pixels
<img src=cow.gif width=85 height=67>

Le paramtre hspace permet de spcifier la distance horizontale en pixels entre le texte environnant et le bord de limage. Syntaxe: HSPACE="j" o j est un nombre de pixels
<img src=cow.gif HSPACE="5">

Le paramtre vspace permet de spcifier la distance verticale en pixels entre limage et le texte qui lentoure. Syntaxe: VSPACE="k" o k est un nombre de pixels
<img src=cow.gif VSPACE="5">

Le paramtre border permet de crer un cadre autour de limage. La largeur de la bordure est exprime en pixels. Syntaxe: BORDER="l" o l est un nombre de pixels
<img src=cow.gif VSPACE="5">

Pour voir leffet de la combinaison des paramtres dans linsertion dimages reportez-vous lURL: url: http://tecfa.unige.ch/guides/htmlman/images_test.html
Internet et Education TECFA 15/5/01

Introduction HTML - 9. Images

html-intro-30

Exemple 9-1: Utilisation des paramtres dinsertion dimage

Internet et Education

TECFA 15/5/01

Introduction HTML - 9. Images

html-intro-31

9.2 Formats et rsolution dimage

La question critique dans lutilisation dimages est le temps de tlchargement ncessaire. Les stratgies possibles pour acclrer le chargement:

spcifier la taille de limage dans la commande img. penser la largeur standard minimum des crans (800 X 600 pixels). rduire la taille du fichier. Mais ce que lon gagne en volume de fichier, on le perd en qualit dimage. choisir une profondeur de couleur infrieure de 8 bits lorsque vous sauvez limage aprs traitement. La couleur de chaque point est encode par un certain nombre de bits. 8 bits correspond une image en 256 couleurs. entrelacer les images en format GIF. Cette opration correspond une fonctionnalit des logiciels de traitement dimage. Leffet lors du chargement de limage est que le lecteur voit apparatre une image de faible rsolution qui samliore par plusieurs passages successifs. pour les grandes images, utilisez une version de taille rduite (thumbnail) de limage dans votre document et mettez-y un pointeur vers la version normale de votre image.
<a href="http://tecfa.unige.ch/~jermann/images/big_cow.gif"> <img src="http://tecfa.unige.ch/~jermann/images/nn_exposure.gif" align=left alt="a cow" hspace=15 ></a>

Internet et Education

TECFA 15/5/01

Introduction HTML - 10. Images cliquables

html-intro-32

10.Images cliquables
Une image cliquable permet de prsenter des menus graphiques en plus des liens textuels.
Dfinir une image cliquable revient dfinir des zones sensibles (rectangulaires, circulaires ...) et des actions correspondant chacune dentre elles. Il existe plusieurs faons de traiter les actions de lutilisateur sur une image:

1. le traitement ncessaire est effectu par le client. 2. une routine du ct du serveur (rarement utilise)

Internet et Education

TECFA 15/5/01

Introduction HTML - 10. Images cliquables

html-intro-33

10.1 Client-side Maps

Exemple 10-1: Image Map url: http://tecfa.unige.ch/guides/htmlman/imagemap-ex.html

A. Principe:
La dfinition des zones sensibles de limage se trouve dans la page HTML. Cest le client (e.g. Netscape) qui se charge de grer les clicks de lutilisateur La dfinition dune image cliquable comporte deux parties: La dfinition des zones et des actions excuter (MAP & AREA) Limage et son lien vers la dfinition de zones (USEMAP)

B. Les marqeurs MAP & AREA

Le marqueur "MAP" sert dfinir le dbut et la fin dune section de dfinition de zones sensibles. Le marqueur "AREA" sert dfinir des zones lintrieur dune "MAP".

Paramtre de MAP
Le paramtre NAME sert dfinir un nom symbolique pour la dfinition de zones cliquables

Syntaxe: NAME="nom_de_la_map"
<MAP name="pegmap"> ... </MAP>

Internet et Education

TECFA 15/5/01

Introduction HTML - 10. Images cliquables

html-intro-34

C. Paramtres de AREA
tous sont obligatoires, ils sont spars dans les exemples pour raison de clart): SHAPE
correspond la forme de la zone sensible.

Syntaxe: SHAPE = "RECT ou POLY ou CIRCLE"

<AREA SHAPE="rect">

COORDS indique les coordonnes en pixel pour dfinir la taille des zones. Le coin en haut gauche de limage est le point dorigine. Pour les rectangles: les coordonnes spcifier sont le coin en haut gauche et celui en bas droite. Syntaxe: COORDS="n,m,i,j"
<AREA SHAPE="rect" COORDS="16,17,249,77">

Pour les cercles: les coordonnes du centre et la valeur du rayon sont ncessaires (3 nombres). Syntaxe: COORDS="l,k,p"
<AREA SHAPE="circle" COORDS="16,249,10">
Internet et Education TECFA 15/5/01

Introduction HTML - 10. Images cliquables

html-intro-35

Pour les polygones: on donne les coordonnes pour chaque point Syntaxe: COORDS="x1,y1,x2,y2,x3,y3,...,...."
<AREA SHAPE="poly" COORDS="10,10, 10,15, 15,15, ....">

HREF
contient lURL qui est charg lorsque lutilisateur clique sur une des zones sensibles.

Syntaxe: HREF="URL"

o URL est une adresse WWW

<AREA HREF="http://tecfa.unige.ch/~schneide">

Exemple 10-2: Dfinition des zones dune image cliquable url: http://tecfa.unige.ch/guides/htmlman/imagemap-ex.html.
<MAP name="pegmap"> <AREA SHAPE="rect" COORDS="16,17,249,77" HREF="http://tecfa.unige.ch/ ~schneide> <AREA SHAPE="rect" COORDS="16,91,249,213" HREF="http://tecfa.unige.ch/ welcome.html"> <AREA SHAPE="rect" COORDS="16,228,249,437" HREF="http://tecfa.unige.ch/ ~jermann"> </MAP>

Internet et Education

TECFA 15/5/01

Introduction HTML - 10. Images cliquables

html-intro-36

USEMAP
Le paramtre USEMAP se met lintrieur dune commande IMG et indique au client que limage en question est cliquable.

La valeur du paramtre USEMAP contient ladresse dune section MAP qui peut se trouver dans le mme document
(auquel cas on le dclare en commenant par #, e.g. #nom_carte)

ou dans un autre document (URL#nom_de_carte). Syntaxe: <img src="image.gif" USEMAP="#ancre_de_la_map">

<img src="pegase1.gif" USEMAP="#pegmap">

Internet et Education

TECFA 15/5/01

Introduction HTML - 10. Images cliquables

html-intro-37

Exemple 10-3: Image cliquable du ct client

<MAP name="pegmap">

<AREA SHAPE="rect" COORDS="16,17,249,77" HREF="http://tecfa.unige.ch/~schneide>

<AREA SHAPE="rect" COORDS="16,91,249,213" HREF="http://tecfa.unige.ch/welcome.html">

<AREA SHAPE="rect" COORDS="16,228,249,437" HREF="http://tecfa.unige.ch/~jermann">

</MAP>

<IMG SRC="pegase1.gif" USEMAP="#pegmap">

Internet et Education

TECFA 15/5/01

Introduction HTML - 10. Images cliquables

html-intro-38

10.2 Server-side Maps (ISMAP) ... titre indicatif

Dfinir un lien qui contient limage et introduire ISMAP dans la commande dimage. Crer un fichier *.map sur le serveur qui contient les coordonnes des zones sensibles. Exemple 10-4: Utilisation dun server-side script pour le traitement dune image cliquable
<a href=../cgi-bin/imagemap/test> <img scr=../test.gif ISMAP> </a> Le fichier test.map contient les lments suivants (syntaxe pour les serveurs NCSA): default /~jermann/garbage.html rect rect rect rect http://tecfa.unige.ch/~jermann/garbage.html#staf11 http://tecfa.unige.ch/~jermann/garbage.html#staf12 http://tecfa.unige.ch/~jermann/garbage.html#staf13 http://tecfa.unige.ch/~jermann/garbage.html#staf14 7,7 144,144 148,7 280,144 281,7 420,144 7,145 144,280

Internet et Education

TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-39

11.Les Tables
Exercice url: http://tecfa.unige.ch/guides/htmlman/exo5.html

11.1 Utilisation
Il existe des outils et des filtres qui permettent de gnrer facilement des tables. Il reste cependant utile de connatre la syntaxe des tables pour tre capable de modifier les tables produites laide dun assistant. Les tables sont utiles pour: Prsenter des donnes numriques ou des tables de correspondance (exemples ci-dessous). Ceci correspond lutilisation traditionnelle des tableaux. Forcer la mise en page dun document comportant plusieurs colonnes.

Internet et Education

TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-40

Exemple 11-1: Une table simple

<TABLE BORDER="1"> <TR> <TD>Options:</TD> <TD></TD> <TD></TD> </TR> <TR> <TD></TD> <TD>-a</TD> <TD>tous les fichiers</TD> </TR> <TD></TD> <TD>-l</TD> <TD>taille, date et permissions</TD> </TR> <TR> <TD></TD> <TD>-R</TD> <TD>affichage du contenu des sous-r&eacute;pertoires</TD> </TR> <TR> <TD></TD> <TD>-t</TD> <TD>trier selon la date</TD> <TR> <TD>Exemple:</TD> (1) ls -lat *.text</TD> <TD>affiche tous les fichiers &quot; *.text &quot; dans un r&eacute;pertoire, tri&eacute;s selon la date.</TD> </TR> </TABLE> Internet et Education TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-41

Exemple 11-2: une table cellules occupant plus dune ligne ou colonne:

<table border> <tr> <th rowspan=2></th> <th colspan=2>average</th> <th rowspan=2>other<br>category</th> </tr> <tr> <th>height</th> <th>weight</th> </tr> <tr> <th align=left>males</th> <td>1.9</td> <td>0.003</td> </tr> <tr> <th align=left>females</th> <td>1.7<td>0.002</td> <tr> </table>

Internet et Education

TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-42

11.2 La spcification dune table

Une table ("table") contient des lignes ("tr") qui contient son tour des cellules/ colonnes ("td"). Le marqueur table" dfinit le dbut et la fin dune table Syntaxe: <TABLE> ... </TABLE>

A. Paramtres de <table>:
Le paramtre BORDER
sinsre dans le marqueur de dbut de table et permet de spcifier la largeur des bordures.

Syntaxe: BORDER="n"

o n est un nombre de pixels

<TABLE BORDER="4"> ... </TABLE>

Le paramtre CELLSPACING
permet de contrler lespacement entre deux cellules

Syntaxe: CELLSPACING="n" Le paramtre CELLPADDING

o n est un nombre de pixels

<TABLE CELLSPACING="4"> ... </TABLE> sert fixer la distance se trouvant entre le bord dune cellule et le texte qui sy trouve.

Syntaxe: CELLPADDING="m"

o m est un nombre de pixels

<TABLE CELLPADDING="4"> ... </TABLE>

Internet et Education TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-43

Le paramtre WIDTH
permet de forcer la largeur et la hauteur quoccupe la table sur la page. La valeur n peut tre exprime en pixels ou en pourcentages.

Syntaxe: WIDTH="k"
<TABLE WIDTH="400"> ... </TABLE>

Syntaxe: WIDTH="l%"
<TABLE WIDTH="70%"> ... </TABLE>

Rsum: paramtres du marqueur table

3. 1. BORDER 2. CELLSPACING 3. CELLPADDING 4. WIDTH

TEXT 1. 2.

4.

Internet et Education

TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-44

B. Le marqueur "TR"
dfinit le dbut et la fin dune ligne du tableau. Syntaxe: <TR> ... </TR> Paramtres de TR (sappliquent aussi aux cellules TD et TH) Le paramtre ALIGN
peut prendre des valeurs. Il contrle lalignement horizontal du texte lintrieur de toutes les cellules dune ligne sil est spcifi dans un marqueur tr ou lintrieur dune seule cellule sil se trouve dans les marqueurs td ou th.

Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"

<TR ALIGN=LEFT> (toutes les colonnes contenues dans cette ligne seront alignes gauche)

Le paramtre VALIGN
contrle lalignement vertical du texte lintrieur des cellules.

Syntaxe: VALIGN="TOP ou MIDDLE ou BOTTOM ou BASELINE"

<TR ALIGN=TOP> (toutes les colonnes contenues dans cette ligne seront alignes vers le haut)

Internet et Education

TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-45

C. Les marqueurs "TD" et "TH"

servent dfinir des cellules dans une ligne Le marqueur TD (table data en anglais) dfinit le dbut et la fin dune cellule. Le marqueur TH sutilise comme "TD" mais le rsultat laffichage est un texte mis en vidence (apparaissant par exemple en gras) Syntaxe: <TD> ... </TD> Paramtres sappliquant aux cellules: Le paramtre ROWSPAN
dtermine le nombre de lignes quune cellule occupe et sintroduit lintrieur des marqueurs td ou th. Lon peut ainsi tirer une cellule vers le bas. Lorsque vous dfinissez les cellules de la ligne suivante (dans le prochain marqueur tr) il ne sera pas ncessaire de redfinir cette cellule.

Syntaxe: ROWSPAN="n"
<TD ROWSPAN=2>

o n est un nombre de lignes

(pour une cellule qui occupe deux lignes)

Le paramtre COLSPAN
permet de dfinir une cellule qui occupe plusieurs colonnes. Le rsultat est ltirement de la cellule en largeur.

Syntaxe: COLSPAN="m" o m est un nombre de cellules

<TD COLSPAN=2> Voir lexemple 11-2 une table cellules occupant plus dune ligne ou colonne: [41]
Internet et Education TECFA 15/5/01

Introduction HTML - 11. Les Tables

html-intro-46

Internet et Education

TECFA 15/5/01