xHTML - leçon 2 : Les bases de l'xHTML
Bon, maintenant que nous savons quel sont les principaux navigateurs, quel sont les principaux éditeurs et qu'est-ce qu'une balise, nous pouvons commencer à programmer notre première page xHTML !
Cest parti !
I. Créer une page xHTML
Avant de commencer à écrire notre page, il faut la créer
Je vais prendre l'exemple du Bloc-Note de Windows car c'est le seul que j'ai sous la main...
Ouvrez le Bloc-Note en allant dans Démarrer puis Tous les programmes (ou Programmes selon votre version de Windows) puis Accessoires et enfin, cliquez sur Bloc-Note.
Vous obtenez une page vierge. Cliquez à présent sur Fichier puis Enregistrer sous. Tapez <code>index.html</code> dans le nom du fichier puis cliquez sur Enregistrer.
<table style="border: medium none ; width: 100%;"><tbody><tr><td style="width: 33px; vertical-align: top;">
</td><td style="color: blue; vertical-align: top;">Pourquoi on l'appelle <code>index.html</code> ?</td></tr></tbody></table>
La page d'accueil, la première page d'un site doit s'appeler <code>index</code> et doit porter l'extension désignant une page xHTML, c'est à dire <code>.html</code> ou <code>.htm</code>, car c'est le premier fichier que le serveur va chercher quand vous tapez une adresse dans votre navigateur. Ces paramètres peuvent être modifiés dans certains cas, mais pas toujours. Nous allons donc utiliser ce nom.
Maintenant que la page est créée, on peut commencer à programmer !
II. Le doctype
<table style="border: medium none ; width: 100%;"><tbody><tr><td style="width: 33px; vertical-align: top;">
</td><td style="color: blue; vertical-align: top;">Kesako ?</td></tr></tbody></table>
Le doctype, c'est une balise spéciale qui permet d'indiquer au navigateur quelle est la version de xHTML que l'on utilise afin de faciliter la tâche de ce dernier quand il va décoder le xHTML pour vous montrer la page. Nous sommes actuellement en xHTML 1.1 donc nous allons préciser à l'aide du doctype suivant :
Ne vous inquiétez pas, vous n'avez pas à comprendre ce charabia mais juste à l'écrire (ou le copier coller) tout en haut de votre page
Selon la norme xHTML 1.1, cette balise est obligatoire.
III. La structure de base
Nous allons maintenant indiquer au navigateur que nous allons entrer du code xHTML. Pour cela, nous allons utiliser le conteneur <code><html> ... </html></code>. Voici à quoi doit ressembler notre page :
<table style="border: medium none ; width: 100%;"><tbody><tr><td style="width: 33px; vertical-align: top;">
</td><td style="color: blue; vertical-align: top;">Pourquoi la balise c'est <code><html></code> et pas <code><xhtml></code> ?</td></tr></tbody></table>
Le xHTML est un langage dérivé de son prédécesseur, le HTML. Cette balise (comme la plupart des balises xHTML) est un reste de ce langage.
Tout va bien ? On continue alors !
Maintenant que le navigateur sait en quoi l'on programme, on va définir les différentes parties de la page, à savoir l'entête (header) et le corps de la page.
L'entête se définit par les balises <code><head></code> et <code></head></code>. Dedans on y mets plein d'informations comme l'encodage utilisé, le titre de la page, ...
Commençons par le titre. C'est pas très compliqué, il suffit de mettre le titre que l'on souhaite donner à sa page dans l'entête, entre les balises <code><title></code> et <code></title></code>. C'est ce titre qui sera affiché dans la barre de titre du navigateur.
Maintenant passons à l'encodage. L'encodage c'est la façon dont le texte est lu par le navigateur. Si l'encodage est mal définit, on à alors très souvent des lettres qui sautent, comme les lettres accentuées par exemple. Il existe tout un tas d'encodage, mais les deux plus utilisés sont le UTF-8 et le ISO-8859-1. Le second est plus utilisé en Europe car il gère nativement les lettres accentuées (sinon on devrait utiliser des trucs du genre &eacute; pour avoir un simple é).
C'est donc l'encodage ISO-8859-1 que nous allons utiliser
.
On définit l'encodage dans l'entête à l'aide d'une balise "meta" avec les attributs suivants : <nobr><code><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></code></nobr>
Voila à quoi doit ressembler notre page :
Maintenant, on attaque le corps de la page. C'est dans cette partie que l'on mettra tout ce qui sera affiché dans le navigateur (le texte, les images, le liens, les animations, etc...). On définit le corps de la page avec les balises <code><body></code> et <code></body></code>. Tout ce qui ce trouve entre ces deux balises est affiché dans le navigateur. Un petit exemple ?
Eh bien nous voici à la fin de ce second cours d'xHTML. Rendez-vous bientôt pour un troisième cours, qui portera sur la mise en en forme du texte.
A bientôt :hello-11a1:
Bon, maintenant que nous savons quel sont les principaux navigateurs, quel sont les principaux éditeurs et qu'est-ce qu'une balise, nous pouvons commencer à programmer notre première page xHTML !
Cest parti !
I. Créer une page xHTML
Avant de commencer à écrire notre page, il faut la créer
Ouvrez le Bloc-Note en allant dans Démarrer puis Tous les programmes (ou Programmes selon votre version de Windows) puis Accessoires et enfin, cliquez sur Bloc-Note.
Vous obtenez une page vierge. Cliquez à présent sur Fichier puis Enregistrer sous. Tapez <code>index.html</code> dans le nom du fichier puis cliquez sur Enregistrer.
<table style="border: medium none ; width: 100%;"><tbody><tr><td style="width: 33px; vertical-align: top;">
La page d'accueil, la première page d'un site doit s'appeler <code>index</code> et doit porter l'extension désignant une page xHTML, c'est à dire <code>.html</code> ou <code>.htm</code>, car c'est le premier fichier que le serveur va chercher quand vous tapez une adresse dans votre navigateur. Ces paramètres peuvent être modifiés dans certains cas, mais pas toujours. Nous allons donc utiliser ce nom.
Maintenant que la page est créée, on peut commencer à programmer !
II. Le doctype
<table style="border: medium none ; width: 100%;"><tbody><tr><td style="width: 33px; vertical-align: top;">
Le doctype, c'est une balise spéciale qui permet d'indiquer au navigateur quelle est la version de xHTML que l'on utilise afin de faciliter la tâche de ce dernier quand il va décoder le xHTML pour vous montrer la page. Nous sommes actuellement en xHTML 1.1 donc nous allons préciser à l'aide du doctype suivant :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Ne vous inquiétez pas, vous n'avez pas à comprendre ce charabia mais juste à l'écrire (ou le copier coller) tout en haut de votre page
Selon la norme xHTML 1.1, cette balise est obligatoire.
III. La structure de base
Nous allons maintenant indiquer au navigateur que nous allons entrer du code xHTML. Pour cela, nous allons utiliser le conteneur <code><html> ... </html></code>. Voici à quoi doit ressembler notre page :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
</html><table style="border: medium none ; width: 100%;"><tbody><tr><td style="width: 33px; vertical-align: top;">
Le xHTML est un langage dérivé de son prédécesseur, le HTML. Cette balise (comme la plupart des balises xHTML) est un reste de ce langage.
Tout va bien ? On continue alors !
Maintenant que le navigateur sait en quoi l'on programme, on va définir les différentes parties de la page, à savoir l'entête (header) et le corps de la page.
L'entête se définit par les balises <code><head></code> et <code></head></code>. Dedans on y mets plein d'informations comme l'encodage utilisé, le titre de la page, ...
Commençons par le titre. C'est pas très compliqué, il suffit de mettre le titre que l'on souhaite donner à sa page dans l'entête, entre les balises <code><title></code> et <code></title></code>. C'est ce titre qui sera affiché dans la barre de titre du navigateur.
Maintenant passons à l'encodage. L'encodage c'est la façon dont le texte est lu par le navigateur. Si l'encodage est mal définit, on à alors très souvent des lettres qui sautent, comme les lettres accentuées par exemple. Il existe tout un tas d'encodage, mais les deux plus utilisés sont le UTF-8 et le ISO-8859-1. Le second est plus utilisé en Europe car il gère nativement les lettres accentuées (sinon on devrait utiliser des trucs du genre &eacute; pour avoir un simple é).
C'est donc l'encodage ISO-8859-1 que nous allons utiliser
On définit l'encodage dans l'entête à l'aide d'une balise "meta" avec les attributs suivants : <nobr><code><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></code></nobr>
Voila à quoi doit ressembler notre page :
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Ma première page xHTML !!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
</html>Maintenant, on attaque le corps de la page. C'est dans cette partie que l'on mettra tout ce qui sera affiché dans le navigateur (le texte, les images, le liens, les animations, etc...). On définit le corps de la page avec les balises <code><body></code> et <code></body></code>. Tout ce qui ce trouve entre ces deux balises est affiché dans le navigateur. Un petit exemple ?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Ma première page xHTML !!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
C'est ma première page xHTML !!
</body>
</html>Eh bien nous voici à la fin de ce second cours d'xHTML. Rendez-vous bientôt pour un troisième cours, qui portera sur la mise en en forme du texte.
A bientôt :hello-11a1:
Dernière édition: