tutoriel XHTML

Mettre en forme
On en arrive au cœur du problème : mettre en forme le texte.

Paragraphes et sauts de ligne
La plus grande partie d'un texte, habituellement, c'est... du texte. Des paragraphes de texte. En XHTML, les paragraphes sont délimités par des (et , évidemment). Avec la plupart des navigateurs, les paragraphes sont rendus à la manière anglo-saxonne : alignement sur la gauche, pas d'alinéa. Il y a généralement une espace entre deux paragraphes.

Pour aller simplement à la ligne, utilisez l'élément
.

Citations
Vous pouvez citer au niveau inline, soit en utilisant directement des guillemets, soit en utilisant l'élément (pour quote) :

Delenda Carthago, comme disait le grand Caton...

Au passage, Internet Explorer ignore purement et simplement l'élément , donc mieux vaut utiliser directement les guillemets.

Au niveau bloc, c'est l'élément

qu'il vous faut :

Charles-Marie de La Condamine est un savant et explorateur
français, né à Paris en 1701. Il est admis à à l'Académie française en
1760. Il écrit à ce sujet :

La Condamine est aujourd'hui

Reçu dans la troupe immortelle

Il est bien sourd, tant mieux pour lui,

Mais non muet, tant pis pour elle.

est généralement rendu par un bloc indenté à droite et à gauche :

La Condamine est aujourd'hui
Reçu dans la troupe immortelle
Il est bien sourd, tant mieux pour lui,
Mais non muet, tant pis pour elle.

Styles de texte
Gras et italique
Le XHTML ne se soucie pas du rendu visuel. Pour lui, le gras et l'italique n'existent pas à proprement parler. Mais il sait mettre en valeur du texte.

est utilisé pour renforcer un membre de phrase, insister sur son importance. Il est donc souvent rendu par du gras par les navigateurs.

(pour emphasize) sert également à mettre en relief un membre de phrase. Il est plus faible que . Il est généralement rendu par de l'italique.

Selon les règles typographiques habituelles, un mot, une citation en langue étrangère non francisée doit être mis en italique. Il ne s'agit pas ici de mettre en valeur, mais d'une convention typographique. Dans ce cas, vous devez utiliser l'élément . Vous pouvez indiquer de quelle langue il s'agit en utilisant l'attribut lang. Exemple :

Selon le goût italien, les pâtes doivent être cuites al dente .

Ce qui donne :

Selon le goût italien, les pâtes doivent être cuites al dente.

Définitions
Le XHTML vous permet de structurer encore davantage vos documents, essentiellement les documents techniques. (pour define) sert à indiquer un mot dont on va donner la définition, une fois pour le reste du document. Exemple :

On dit qu'un morphisme de schémas est étale
lorsqu'il est à la fois lisse et non ramifié. En fait, il suffit pour cela
qu'il soit à la fois plat et non ramifié.
Titres (films, livres, etc.)
C'est qu'il faut utiliser pour les citations de titres de livres, de films, etc. L'élément est usuellement rendu par de l'italique. Exemple :

Le film Morte a Venezia de Luchino
Visconti est une adaptation de la nouvelle Der Tod
in Venedig de Thomas Mann.

Code informatique
(que vous reverrez dans la section du texte préformaté) est également un style de texte qui sert à démarquer un extrait de code informatique du texte normal. Exemple :

La ligne #include
demande au compilateur d'inclure dans le programme certaines
informations sur la bibliothèque standard d'entrées-sorties.

Sigles et acronymes
Les sigles peuvent être indiqués par un élément , et les acronymes (sigles prononçables, comme ONU, OTAN, etc.) par l'élément... . Ces éléments sont intéressants surtout si on utilise leur attribut title : certains navigateurs peuvent alors afficher le contenu de title dans une bulle d'aide. Démonstration :

L'UNSCOM a été créée pour assister
l'IAEA en Iraq.

Les bons navigateurs (Mozilla ou FireFox par exemple) affichent le contenu du title sous la forme d'une bulle d'aide (tooltip en anglais) quand vous laissez le curseur dessus. Faites le test :

L'UNSCOM a été créée pour assister l'IAEA en Iraq.

Listes
Il y a trois sortes de listes possibles en XHTML :

les listes numérotées ;
les listes non numérotées ;
les listes de définitions (lexiques).
Toutes les listes sont des éléments blocs.

Listes non numérotées
Elles sont aussi dites « listes à puces » car souvent les navigateurs affichent des puces devant chaque entrée de liste.

et

(pour Unordered Lists) marquent le début et la fin d'une liste, et
le début et la fin d'une entrée de liste.

En exemple, voici quelques armes de Goldorak :

• mégavolts
  
• cornofulgure
  
• astéro-hache
  

Ce qui donne :

mégavolts
cornofulgure
astéro-hache
Listes numérotées
Même principe, avec

(Ordered Lists) à la place de
. La numérotation se fera par défaut en chiffres arabes (1, 2, 3...). Vous pouvez changer le type de numérotation, en chiffres romains ou en caractères alphabétiques (a, b, c...) grâce à l'attribut type :




1. mégavolts
   
2. cornofulgure
   
3. astéro-hache
   


Ce qui donne :

mégavolts
cornofulgure
astéro-hache
Pour changer de numérotations, changez la valeur de type : I pour les chiffres romains majuscules, a pour les caractères alphabétiques minuscules, A pour les majuscules.

Lexiques
On utilise l'élément (Definition list). À l'intérieur de l'élément , (pour definition term) est une entrée du lexique, et (pour definition definition...) la définition associée à cette entrée. Admettons que vous fassiez un lexique du folklore normalien.



Amazon
Flipper mythique de la K-fêt, arrivé à l'École en 1990.

Fun machine
L'autre flipper, qui ne sert comme son nom l'indique qu'à se dérouiller les
doigts ou à tuer le temps en attendant de jouer à l'Amazon.



Ce qui donne :

Amazon
Flipper mythique de la K-fêt, arrivé à l'École en 1990.
Fun machine
L'autre flipper, qui ne sert comme son nom l'indique qu'à se dérouiller les doigts ou à tuer le temps en attendant de jouer à l'Amazon.
Texte préformaté
On utilise l'élément pour du texte préformaté au niveau bloc. Différences avec du texte normal : les navigateurs respectent toutes les espaces que vous avez indiqués et ils utilisent généralement une fonte à espacement fixe. Le texte préformaté peut être utilisé pour mettre en page un poème, par exemple, ou plus prosaïquement, du code informatique.

Attention toutefois, n'est pas l'environnement verbatim de LaTeX : le code XHTML y est interprété. Dans cette documentation, par exemple, on a recours aux entités pour représenter et &.

Prenons un exemple, un programme très simple en langage C :


#include

int main(void)
{
printf("Hello, world!\\n");
return 0;
}


sera rendu par :

#include

int main(void)
{
printf("Hello, world!\\n");
return 0;
}

(pour les littéraires, recopiez ça dans un fichier hello.c, faites gcc hello.c puis ./a.out et regardez).

Pour citer du code en inline, utilisez la bien-nommée balise .

Images
On se sert de l'élément (pour image, bien sûr) et de ses attributs. Le principal attribut est src : il permet de spécifier l'adresse où aller chercher l'image. Ainsi, quand on écrit son fichier ~/www/index.html pour inclure une image située dans son répertoire ~/www/images/, on écrira :



On peut aussi indiquer une adresse absolue quand l'image n'est pas sur votre compte, par exemple :



Il est obligatoire d'indiquer une description de votre image, en guise de texte alternatif pour les navigateurs texte, ou si pour une raison quelconque l'image ne peut pas être téléchargée ; le texte alternatif sert, en particulier, pour les non-voyants qui disposent de logiciels pour lire du texte à haute voix, mais n'ont rien pour décrire des images. Ce texte doit être court et informatif. On l'indique avec l'attribut alt :



Si l'image ne joue aucun rôle sémantique (c'est-à-dire si elle n'est là que pour décorer), on indique alt="".

Les formats les plus couramment utilisés pour le Web sont le JPEG, en .jpg et le GIF, en .gif — utiliser de préférence le format PNG, GIF n'étant pas libre, et moins bon techniquement. JPEG est un format qui est plus adapté aux photos, GIF ou PNG sont plus adaptés aux logos et de manière générale aux images ayant peu de couleurs.

Tableaux
Les tableaux sont décrits par l'élément . C'est l'un des chapitres les plus complexes du XHTML : les possibilités sont très nombreuses.

Un tableau simple
définit l'ensemble du tableau. À l'intérieur, il faut décrire les lignes du tableau et ses cellules. L'élément décrit les lignes, et les cellules. On déclare dans l'ordre , puis et enfin .


Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6


Ce qui donne :

Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6

Pas très croquignolet, hein ?

Un tableau plus évolué
On peut déjà commencer par donner un titre à ce tableau, grâce à l'élément . Le titre du tableau se place au début du tableau, avant la première ligne (avant le premier ) mais dans le tableau tout de même (donc après la déclaration de ).

On veut également différencier des méta-cellules, qui donnent des informations sur le contenu des cellules de données, des cellules de données à proprement parler. Les cellules de données, c'est bien sûr , et les méta-cellules, c'est l'élément (le H étant pour header, en-tête) qui s'en charge.

On peut aussi, pour rendre le tableau un peu plus esthétique, et plus lisible (6 cellules ça va, mais quand vous en aurez 42...), lui donner une bordure. On utilise pour cela l'attribut border à qui on spécifie une épaisseur en nombre de pixels. Généralement, border=1 suffit amplement à ce que vous voulez faire (délimiter mieux les cellules).


Ceci est un tableau
Colonne gauche Colonne droite
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6


Donc :

Ceci est un tableau Colonne gauche Colonne droite
Cellule 1 Cellule 2
Cellule 3 Cellule 4
Cellule 5 Cellule 6

Liens
Le meilleur pour la fin, les liens ! Ce qui fait d'une page Web une vraie page hypertexte (le HT de XHTML) et pas un bête document. Les liens se décrivent avec l'élément (qui est, bien sûr, inline), suivi d'attributs.

Lien simple
Le lien de base utilise l'attribut href :

Retourner au serveur des élèves.

donne ainsi :

Retourner au serveur des élèves.

On peut utiliser des liens absolus, comme celui ci-dessus, qui donne l'ensemble de l'URL, mais aussi des liens relatifs, qui sont relatifs à l'arborescence de votre site. Admettons que vous ayez dans votre répertoire ~/www/ un répertoire stage qui contient, entre autres, le fichier rapport.html. Pour faire un lien dessus, depuis la page d'accueil, ça donnera :

Mon [url=stage/rapport.html]rapport de stage[/url]
parle du lien entre les nombres p-adiques et les phases de
la lune.
Ancres
Une ancre sert à faire un lien local, c'est-à-dire vers un endroit précis du document. C'est particulièrement utile pour faire une table des matières avec des liens qui pointent vers les titres, ou encore pour faire des références croisées dans un document.

On commence par définir les ancres, c'est-à-dire les endroits vers lesquels on veut pointer. On utilise l'attribut name de l'élément :

Les Olmèques ont véritablement
existé. C'est la première des grandes civilisations précolombiennes...

Quand vous lisez le document avec un navigateur, l'ancre est invisible. Pour choisir le nom de l'ancre, vous avez à votre disposition tous les caractères alphanumériques, et mêmes les caractères accentués. Veuillez seulement à ne pas utiliser deux fois la même ancre au sein du document.

Pour faire le lien vers cette ancre, on utilise toujours l'attribut href, mais en modifiant la syntaxe avec un # :

Esteban, Zia et Tao rencontrent alors les Olmèques, une peuplade
extra-terrestre (voir ici la [url=#olm]véritable histoire
du peuple olmèque[/url].

Vous pouvez positionner un lien vers cette ancre même depuis un autre fichier :

Voir [url=citesdor.html#olm]l'histoire des Olmèques[/url].

Liens spéciaux
Vous pouvez créer un lien de telle sorte que, lorsqu'on suit ce lien, on vous envoie un courrier électronique. On utilise toujours l'élément et son attribut href. Seulement, le protocole du lien change. Auparavant c'étaient des liens HTTP (Web). Mais vous pouvez aussi utiliser le protocole mailto, qui est le protocole des courriers électroniques.

Écrivez-moi : mon.adresse@ens.fr

Quand un lecteur suivra ce lien, son navigateur lui proposera de vous envoyer un mail.

Donner une adresse « en clair » sur son site est une excellente manière de recevoir du spam. Mieux vaut utiliser un encodage très simple, à base d'entités, qui vous permettra de damer le pion aux robots collecteurs d'adresses.
Les entités dont vous avez besoin en l'espèce sont @ pour une arobase (@) ou encore . pour un point (.) et - pour un tiret (-). Ce qui donne :

Mon adresse : jean-paul.sartre@ens.fr

Complètement illisible, on est bien d'accord ? C'est ce que verra le robot collecteur d'adresses. En revanche, un lecteur normal passant par un navigateur verra ceci :

Mon adresse : jean-paul.sartre@ens.fr

Vous pouvez utiliser ce système avec d'autres protocoles, celui des news (news:) pour que le navigateur affiche (s'il en est capable) le message dont vous avez donné le message-ID, ou le FTP...

Le validateur du W3C
Vous avez fini de taper votre première page XHTML. Vous vous êtes bien relu. Il vous reste une dernière étape : passer cette page au validateur XHTML. Il vous permettra de voir si vous avez bien refermé toutes vos balises dans l'ordre qu'il faut, par exemple.

Validation
Il vous suffit d'aller dire coucou au validateur du W3C et de lui indiquer l'URL de votre page XHTML, ou encore de lui indiquer le chemin du fichier sur votre disque dur. Vous saurez tout de suite si votre code est bon ou s'il reste quelques corrections à faire...

Attention : le validateur ne vérifie que la correction formelle de votre code. En clair, il peut vous dire que votre fichier est syntaxiquement correct, mais pas s'il est sémantiquement correct.
Si le code de votre page n'est pas correct, le validateur vous l'indiquera, en vous précisant quelles sont les lignes incriminées dans votre fichier XHTML, et la nature de l'erreur. En suivant ces instructions, vous pourrez corriger votre code.

Le label
Quand vous aurez une page impeccable, ce qui est loin d'être difficile à obtenir (et qui est très gratifiant, vous verrez), le validateur vous permettra d'insérer dans votre page le code suivant :






Il peut être très utile de suivre ce conseil. Vous aurez ainsi dans votre page le logo suivant :


ce qui présente les avantages suivants :

vos lecteurs peuvent voir que vous respectez les normes et les promouvez ;
en cliquant dessus, vous pouvez vérifier en un clin d'œil la conformité de votre page aux normes, et corriger très rapidement tout écart.
Pourquoi respecter les normes ?
Nous vous rappelons que les respect des normes n'est pas seulement une affaire de pédanterie, mais avant tout d'accessibilité. Pour en savoir plus sur le calvaire des pages non conformes à la norme pour les personnes handicapées, vous pouvez aller voir le site AccessiWeb. [/b][/i]

c'est du html porno, quoi !! ^^ ca ressemble très très fort au html, je ne vois quasiment jamais aucune page en xhtml

de toutes façon , tu ne comprend jamais rien toi !!!!
a part jouer aux mises sur prizee , je T KC

ki c'est ki vas tout faire en php lui mêmee ? d'ailleur ca m'a interessé j'ait ous lu, moi nimporten quoi sur la programtion web jte lis tous

mdr jéjé tu es trop flexible !!!!! le php c'est facile

c'est pas ce que tu me dis sur msn !!!

ps:

mafia34500 dit :
<?$variable='bonjour';
mafia34500 dit :
arf c du chinois

arf!! je suis demasqué