Vous êtes sur la page 1sur 50

Introduction XHTML

xhtml-intro

Introduction XHTML
Code: xhtml-intro

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

Auteurs et version
Daniel K. Schneider - Vivian Synteta Version: 0.7 (modifi le 17/9/08 par DKS)

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

Autres Modules
Module technique suppl.: intro-html (donne une introduction HTML 3.2)
Technologies Internet et Education TECFA 17/9/08

Introduction XHTML - .

xhtml-intro-2

Attention:
Ce document a t conu partir dune introduction HTML et il peut contenir quelques erreurs (balises non fermantes par exemple)

Objectifs:
Connatre les origines et les principes de XHTML
plus prcisement: XHTML 1.0 Transitional

Savoir composer une page XHTML 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

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 1. Table des matires dtaille

xhtml-intro-3

1. Table des matires dtaille


1. Table des matires dtaille................................................................................ 3 2. Outils ................................................................................................................... 5
2.1 Production de pages XHTML 3.1 3.2 3.3 3.4 4.1 4.2 4.3 4.4 4.5 5.1 5.2 5.3 5.4 Versions Guides courts en anglais Standards Vrificateurs/correcteurs de code Dfinition Les notions denvironnement et de balise Structure de base dun document XHTML: Diffrences majeurs par rapport HTML Configuration du serveur Titres Paragraphes Sparateurs La balise <div> 5 7 7 8 8 9 9 11 14 15 16 17 19 21 22 23

3. Versions de HTML et documentation sur le WWW ............................................. 7

4. Principe du langage XHTML................................................................................ 9

5. Titres, sparateurs et paragraphes ................................................................... 16

6. Mots et caractres ............................................................................................. 22


6.1 Mise en forme de mots 6.2 Caractres accentus

7. Les Listes .......................................................................................................... 25 8. Les Liens ........................................................................................................... 28


8.1 Liens externes vers un autre document HTML 8.2 Liens internes 8.3 Liens externes vers dautres protocoles/services Internet
Technologies Internet et Education

29 31 33
TECFA 17/9/08

Introduction XHTML - 1. Table des matires dtaille

xhtml-intro-4

9. Images............................................................................................................... 34
9.1 Insertion dimages 9.2 Formats et rsolution dimage 10.1Client-side Maps 11.1Utilisation 11.2La spcification dune table 34 36 38 43 46

10. Images cliquables.............................................................................................. 37 11. Les Tables ......................................................................................................... 43

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 2. Outils

xhtml-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 XHTML A. Utiliser un simple diteur de texte (Notepad)


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

B. Utiliser un diteur avec support XHTML


Pour faire des pages simples ou au contraire trs sophistiques XEmacs (difficile apprendre), WebExpert 5 ou mieux

C. Utiliser un diteur Wysiwyg


(dans la mesure o ce concept est appropri). Adobe GoLive, DreamWeaver, HotMetal, NVU (dernires versions !) etc.
Technologies Internet et Education TECFA 17/9/08

Introduction XHTML - 2. Outils

xhtml-intro-6

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 xhtml.
Solution prfrable pour mettre des articles sur le Web en format HTML, le support XHTML nest pas forcment bon ! (t 2002) Penser aussi au format PDF !

E. Edition avec un outil TTW (through the Web)


la plupart des plateformes modernes offrent cette fonctionalit

F. Gnrer du XHTML
"Emballage" de donnes en XHTML, souvent partir de bases de donnes
Ceci en temps rel (pages dynamiques) ou en mode "batch".

Exemples: tests, sondages, achats, etc.

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 3. Versions de HTML et documentation sur le WWW

xhtml-intro-7

3. Versions de HTML et documentation sur le WWW


3.1 Versions
1. HTML 1 (1992) 2. HTML 2 (1994) 3. HTML 3.2 (1997) 4. HTML 4.x (1999) 5. XHTML 1.0 (26 jan 2000, revised 1 Aug 2002)
XHTML 1.0 transitional XHTML 1.0 strict XHTML 1.0 frameset

6. XHTML 1.1 - Module-based XHTML 7. XHTML Basic 1.1 (mini-version pour petits appareils portables) 8. XHTML 2.x (sous prparation)

3.2 Guides courts en anglais


XHTML Tags Reference chez webrefenence url: http://www.webreference.com/xml/reference/xhtml.html

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 3. Versions de HTML et documentation sur le WWW

xhtml-intro-8

3.3 Standards
url: http://www.w3.org/TR/tr-title

3.4 Vrificateurs/correcteurs de code


Certains outils possdent un vrificateur (WebExpert, XEmacs) Bon programme "batch" qui analyse et corrige vos fichiers: HtmlTidy. Ce logiciel fait aussi la traduction Html vers XHTML ou encore Html confus vers HTML + CSS. url: http://tidy.sourceforge.net/
Exemple dutilisation (Taper "tidy -h" pour obtenir un rsum des options)

Syntaxe: tidy options fichier


par exemple: -asxhml = -f fichier = -m -i = -clean = tidy -asxhtml -f diag.txt -clean -i -m exo1.html traduire vers XHTML crire le diagnostic dans un fichier = remplacer le fichier actuel, faites une copie avant !! indentation du code (mieux pour lire) transformer "font" etc. en instructions CSS

Plugins pour Firefox (vivement conseills !) Web Developper HTML Validator googlebar

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 4. Principe du langage XHTML

xhtml-intro-9

4. Principe du langage XHTML


4.1 Dfinition
The Extensible HyperText Markup Language (XHTML) est un langage de balisage (mark up) ... qui dfinit la structure logique dun document WWW diffus sur le Web. La prsentation est gre par des feuilles de style

4.2 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> Les balises XHTML sont en lettres minuscules !!

Voici un exemple denvironnement XHTML:


<h1>Titre principal</h1>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 4. Principe du langage XHTML

xhtml-intro-10

A. Imbrication
Les environnements XHTML 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.
un paramtre se compose dun mot clef (son nom) et dune valeur les valeurs sont entre "guillements" nom="valeur" Voici un exemple qui dfinit le nom dun fichier pour une image inclure: ........ <img src="next.gif" /> ........

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 4. Principe du langage XHTML

xhtml-intro-11

4.3 Structure de base dun document XHTML:


La structure dune page XHTML avec un schma:
<?xml version = "1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XML and Document type declaration

<html xmlns = "http://www.w3.org/1999/xhtml"> Namespace <head> declaration <title>Object Model</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> Encoding <body> declaration <h1>Welcome to our Web page!</h1> <p>Enjoy ! </p> Body (page </body> contents) </html>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 4. Principe du langage XHTML

xhtml-intro-12

Exemple dun document XHTML transitionnel


<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <title>document test </title> <!-- Created by: D.K.S., 2002 --> </head> <body> <h1>document test</h1> Voici un test! </body> </html>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 4. Principe du langage XHTML

xhtml-intro-13

1. Le document doit possder une entte XML


Une dclaration XML (version et option "jeu de caractres")
<?xml version="1.0" encoding="ISO-8859-1"?>

une dclaration du DocType ("XHTML")


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Le contenu du document doit tre entour de marqueurs (Angl. tags) html avec une dclaration de "namespace".
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

3. L en-tte (head) est utilis pour stocker de linformation propos du document. Dans la plupart des cas, il sagit uniquement du titre. 4. 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.

5. Toute la page XHTML proprement dite (ce qui est visible dans le browser) est incluse dans le corps (body).

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 4. Principe du langage XHTML

xhtml-intro-14

4.4 Diffrences majeurs par rapport HTML


Insertion dun DOCTYPE correct au dbut du fichier (en principe aussi ncessaire pour HTML)
Voici un exemple pour la version "molle" de XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Ajout dun attribut de "namespace" au tag <html>


xmlns="http://www.w3.org/1999/xhtml"

Toutes les balises doivent tre ferms


par exemple ter un </p> nest pas valable

Minuscules pour toutes les balises: <P> devient <p> etc. Les lments vides doivent avoir un "terminateur": <hr> devient <hr /> etc. Les valeurs dattributs sont entours de guillemets: <p align="right"> (aussi pour HTML en fait) Chaque attribut doit avoir une valeur: <hr noshade="noshade">. Toujours utiliser &amp; pour & dans des attributs, y compris les URL: <a href="?a=1&amp;b=2"> La dclaration XML nest pas ncessaire, mais fortement conseille (surtout si vous utilisez des jeux de caractres comme ISO-8859-1 (accents et Umlauts)
<?xml version="1.0" encoding="ISO-8859-1" ?>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 4. Principe du langage XHTML

xhtml-intro-15

4.5 Configuration du serveur


Normalement, un document XHTML doit tre servi avec le mime-type: "application/xhtml+xml"
Cest une exigeance formelle du W3C et donne plus de possibilits

Sur le serveur de TECFA, les fichiers *.xhtml sont du "vrai" HTML IE explorer 6 ne digre pas le mime type "application/xhml+xml" !
En consquence, la plupart des contenus XHTML sont actuellement servis comme HTML Si vous mettez du XHtml dans un fichier *.html il sera servie comme "text/html" !

Workaround pour IE Explorer url: http://www.w3.org/MarkUp/2004/xhtml-faq#ie


<?xml version="1.0" encoding="iso-8859-1"?>

<?xml-stylesheet type="text/xsl" href="copy.xsl"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

Ensuite faire un fichier copy.xsl (accessible sur le mme serveur!)


<stylesheet version="1.0" xmlns="http://www.w3.org/1999/XSL/Transform"> <template match="/"> <copy-of select="."/> </template> </stylesheet>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 5. Titres, sparateurs et paragraphes

xhtml-intro-16

5. Titres, sparateurs et paragraphes


Exercice: url: ../../code/xhtml-intro/exo1.html

5.1 Titres
Il existe 6 niveaux de titres dans HTML. Un retour la ligne est automatiquement insr aprs un titre. Syntaxe: <hn></hn> o n est compris entre 1 et 6 (H1 est le plus grand titre possible)
<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 ou justify"
<h1 align="center">Texte du titre centr</h1>

Note: Dans XHTML 2 il existera aussi une balise <h> qui permet dimbriquer hirarchiquement des sections.

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 5. Titres, sparateurs et paragraphes

xhtml-intro-17

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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 5. Titres, sparateurs et paragraphes

xhtml-intro-18

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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 5. Titres, sparateurs et paragraphes

xhtml-intro-19

5.3 Sparateurs A. Retour de ligne


Le marqueur br effectue un simple retour de ligne. 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. Syntaxe: size="n"
<hr size="3" />

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 5. Titres, sparateurs et paragraphes

xhtml-intro-20

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 align="center" />

NOSHADE Lorsquil est prsent dans le marqueur hr leffet est une ligne pleine sans ombrage. Syntaxe: noshade="noshade"
<hr noshade="noshade" />

Pour un aperu de leffet des diffrents paramtres consultez: url: ../../code/xhtml-intro/hr-test.html

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 5. Titres, sparateurs et paragraphes

xhtml-intro-21

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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 6. Mots et caractres

xhtml-intro-22

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. Utilisez-les avec modration (pour mettre en valeur quelques mots). Sil sagit de modifier lapparence de contenus entiers entre balises, de fontes, etc. utilisez CSS.
Consultez ladresse suivante pour la liste complte:

url: ../../code/xhtml-intro/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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 6. Mots et caractres

xhtml-intro-23

6.2 Caractres accentus


Par dfaut, il faut rentrer des codes spciaux comme les accents, leuro etc. en UTF-8 ou alors indiquer le jeu de caractres dans la dclaration XML

Exemple: Pour travailler avec les caractres europens: ISO-8859-1


<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> .... </html>

Par dfaut tout fichier XML dfinit implicitement UTF-8 comme jeu de caractres:
<?xml version="1.0"?>

est gal :
<?xml version="1.0" encoding="UTF-8"?> Note: Utilisez toujours &amp; pour & (y compris dans des attributs, les URLs etc.): <a href="service.ch?a=1&amp;b=2"> au lieu de: <a href="service.ch?a=1&b=2">

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 6. Mots et caractres

xhtml-intro-24

Sinon, la vielle mthode HTML ci-dessous permet dobtenir le caractre souhait laffichage (une pratique dcourage aujourdhui).
Tableau 1: Codes HTML pour caractres spciaux

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

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 ().

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 7. Les Listes

xhtml-intro-25

7. Les Listes
Exercice: url: ../../code/xhtml-intro/exo2.html Pour voir des exemples des diffrents types de listes, reportez-vous : url: ../../code/xhtml-intro/lists_test.html.

A. Liste puces (unordered lists)


Syntaxe: <ul> ... </ul>
<ul> <li>Elment 1</li> <li>Elment 2</li> </ul>

B. Liste numrote (ordered lists)


Syntaxe: <ol> ... </ol>
<ol> <li>Elment 1</li> <li>Elment 2</li> </ol>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 7. Les Listes

xhtml-intro-26

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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 7. Les Listes

xhtml-intro-27

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: <ul> </ul> <li> Recette: <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> </li> <li> 2 litres de lait </li> <li> 1 kg de pain mi-blanc </li> </li>

</dl> <li> Dernier lment numrot </li> </ol>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 8. Les Liens

xhtml-intro-28

8. Les Liens
Exercice: url: ../../code/xhtml-intro/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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 8. Les Liens

xhtml-intro-29

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)

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

Adresse absolue pour atteindre un fichier situ sur un autre serveur que celui de la page dorigine

http://www.unige.ch/

cible.html

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 8. Les Liens

xhtml-intro-30

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
<a href ="../essai/cible.html"> click l </a>

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

/documents/cible.html

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 8. Les Liens

xhtml-intro-31

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>
<p><a name="bas_de_la_page">au revoir</a></p>

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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 8. Les Liens

xhtml-intro-32

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:


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

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 8. Les Liens

xhtml-intro-33

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 depuis un serveur FTP


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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 9. Images

xhtml-intro-34

9. Images
Exercice: url: ../../code/xhtml-intro/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="fichier.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.

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 9. Images

xhtml-intro-35

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: ../../code/xhtml-intro/images_test.html

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 9. Images

xhtml-intro-36

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 de petits crans (1024 X 768 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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 10. Images cliquables

xhtml-intro-37

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)

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 10. Images cliquables

xhtml-intro-38

10.1Client-side Maps
Exemple 10-1: Image Map url: ../../code/xhtml-intro/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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 10. Images cliquables

xhtml-intro-39

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

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 10. Images cliquables

xhtml-intro-40

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: ../../code/xhtml-intro/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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 10. Images cliquables

xhtml-intro-41

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

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 10. Images cliquables

xhtml-intro-42

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

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-43

11.Les Tables
Note: On prsente ici les tables "simples" [section refaire] Exercice url: ../../code/hxtml-intro/exo5.html

11.1Utilisation
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. Toutefois, aujourdhui on prfre le positionnement avec CSS.

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-44

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

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-45

Exemple 11-2: une table cellules occupant plus dune ligne ou colonne: url: ../../code/hxtml-intro/table_test.html

<table border="2"> <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> <td>0.002</td> </tr> </table>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-46

11.2La spcification dune table


Une table simple ("table") contient des lignes ("tr") qui contient son tour des cellules/ colonnes ("td"). En XHTML il existe de balises supplmentaires ! 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" o n est un nombre de pixels
<table cellspacing="4"> ... </table>

Le paramtre CELLPADDING 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>

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-47

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.

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-48

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)

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-49

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" o n est un nombre de lignes
<td rowspan=2> (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: [45]

Technologies Internet et Education

TECFA 17/9/08

Introduction XHTML - 11. Les Tables

xhtml-intro-50

Technologies Internet et Education

TECFA 17/9/08