XHTML Intro

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
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
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.
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
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
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>
TECFA 17/9/08
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" /> ........
TECFA 17/9/08
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>
TECFA 17/9/08
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>  </head> <body> <h1>document test</h1> Voici un test! </body> </html>
TECFA 17/9/08
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).
TECFA 17/9/08
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 & pour & dans des attributs, y compris les URL: <a href="?a=1&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" ?>
TECFA 17/9/08
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>
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.
TECFA 17/9/08
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>
TECFA 17/9/08
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>
TECFA 17/9/08
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" />
TECFA 17/9/08
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
TECFA 17/9/08
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>
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>
TECFA 17/9/08
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 & pour & (y compris dans des attributs, les URLs etc.): <a href="service.ch?a=1&b=2"> au lieu de: <a href="service.ch?a=1&b=2">
TECFA 17/9/08
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
â à ç é è ê > < î ô " û
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 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>
TECFA 17/9/08
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>
TECFA 17/9/08
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>
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>
TECFA 17/9/08
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
TECFA 17/9/08
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
TECFA 17/9/08
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>
TECFA 17/9/08
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>
TECFA 17/9/08
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>
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.
TECFA 17/9/08
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
TECFA 17/9/08
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>
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)
TECFA 17/9/08
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>
TECFA 17/9/08
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"/>
TECFA 17/9/08
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>
TECFA 17/9/08
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"/>
TECFA 17/9/08
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">
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.
TECFA 17/9/08
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é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 " *.text " dans un répertoire, triés selon la date.</td> </tr> </table>
TECFA 17/9/08
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>
TECFA 17/9/08
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>
TECFA 17/9/08
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.
TECFA 17/9/08
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)
TECFA 17/9/08
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]
TECFA 17/9/08
xhtml-intro-50
TECFA 17/9/08

XHTML Intro

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

XHTML Intro

Transféré par

Droits d'auteur :

Formats disponibles

Introduction XHTML

Technologies Internet et Education

Introduction XHTML - 1. Table des matires dtaille

1. Table des matires dtaille

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

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

Introduction XHTML - 1. Table des matires dtaille

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

Technologies Internet et Education

Introduction XHTML - 2. Outils

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

B. Utiliser un diteur avec support XHTML

C. Utiliser un diteur Wysiwyg

Introduction XHTML - 2. Outils

D. Utiliser un traitement de texte

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

Exemples: tests, sondages, achats, etc.

Technologies Internet et Education

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

3. Versions de HTML et documentation sur le WWW

3.2 Guides courts en anglais

Technologies Internet et Education

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

3.4 Vrificateurs/correcteurs de code

Syntaxe: tidy options fichier

Technologies Internet et Education

Introduction XHTML - 4. Principe du langage XHTML

4. Principe du langage XHTML

4.2 Les notions denvironnement et de balise

Voici un exemple denvironnement XHTML:

Technologies Internet et Education

Introduction XHTML - 4. Principe du langage XHTML

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

B. Paramtres (ou attributs)

Technologies Internet et Education

Introduction XHTML - 4. Principe du langage XHTML

4.3 Structure de base dun document XHTML:

XML and Document type declaration

Technologies Internet et Education

Introduction XHTML - 4. Principe du langage XHTML

Exemple dun document XHTML transitionnel

Technologies Internet et Education

Introduction XHTML - 4. Principe du langage XHTML

1. Le document doit possder une entte XML

une dclaration du DocType ("XHTML")

Technologies Internet et Education

Introduction XHTML - 4. Principe du langage XHTML

4.4 Diffrences majeurs par rapport HTML

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

Toutes les balises doivent tre ferms

Technologies Internet et Education

Introduction XHTML - 4. Principe du langage XHTML

4.5 Configuration du serveur

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

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

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

Technologies Internet et Education

Introduction XHTML - 5. Titres, sparateurs et paragraphes

5. Titres, sparateurs et paragraphes

Technologies Internet et Education