[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Officiels > Site Web > Apprenez à créer votre site web ! > Les bases du XHTML > Votre première page XHTML > Lecture du tutoriel

Votre première page XHTML

C'est bon, vous avez tous les logiciels qu'il faut ?
Alors ne traînons plus, on va maintenant passer à l'attaque et réaliser notre première page en XHTML. Comme je vous l'ai dit dans le chapitre précédent, il n'y aura pas de CSS pour le moment.

Et c'est partiii !

Sommaire du chapitre :

Les balises et attributs
Une page XHTML
Les commentaires
Q.C.M.

Les balises et attributs

Avant de commencer à écrire notre première page web, il faut que je vous présente à quoi ressemble ce fameux langage XHTML.
Par exemple, pour écrire "Bienvenue sur mon site !" en XHTML, comment on fait ? Bah, il suffit de le taper :
Bienvenue sur mon site !

Jusque-là, pas trop dur... Oui mais attendez, si c'était ça, ça serait trop simple et forcément ça serait pas rigolo

Les balises

En effet dans une page XHTML, en plus du texte, vous allez trouver un autre élément au milieu : ce sont les balises.
Une balise commence par "<" et se termine par ">". Par exemple :
<balise>

Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque chose au navigateur. Par exemple, une balise permet d'indiquer que tel texte est le titre de votre page, cet autre texte est une citation etc etc...

Il existe 2 types de balises : certaines balises apparaissent toujours par paire, d'autres au contraire sont toutes seules.

Les balises existant par paire : ce sont les plus courantes. On écrit la première balise, on tape du texte, puis on "ferme" la balise en la réécrivant avec un slash devant "/". Par exemple :

Code : XML
1
<titre>Bienvenue sur mon site !</titre>
La première balise <titre> indique le début du titre, et elle est refermée plus loin avec </titre> .
Le navigateur comprend que ce qui est entre <titre> et </titre> est le titre de votre site web, et que celui-ci est "Bienvenue sur mon site !"
Les balises seules : elles sont un peu plus rares, mais il y en a quand même. On s'en sert en général pour insérer un élément dans une page.
Ce type de balise se termine toujours par un slash "/", mais cette fois le slash se trouve à la fin de la balise. Par exemple la balise qui permet d'insérer une image :

Code : XML
1
<image />
Cette balise indique juste qu'il y a une image à cet endroit.

Il est donc facile de reconnaître à quel type de balise on a affaire :

Si vous voyez <truc> , c'est qu'il s'agit forcément d'une balise existant par paire, et donc que vous allez trouver un </truc> un peu plus loin, pour indiquer la fermeture de la balise.
Si vous voyez <truc /> , c'est une balise seule.

Les attributs

Les attributs sont un moyen de donner des précisions sur une balise. On peut trouver des attributs sur les deux types de balises (par paire ou seules).
Par exemple, prenons la balise seule <image /> . C'est bien beau de dire qu'on insère une image, mais encore faut-il indiquer laquelle. On fera ça avec un attribut :

Code : XML

1	<image nom="soleil.jpg" />

Ici, l'attribut est "nom", et il a pour valeur "soleil.jpg". Cela indique que l'image que l'on veut insérer s'appelle "soleil.jpg" tout simplement.

Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Par exemple, ce code indique que la citation est de Neil Armstrong et qu'elle date du 21 Juillet 1969 :

Code : XML

1
2
3

<citation auteur="Neil Armstrong" date="21/07/1969">
C'est un petit pas pour l´homme` un bond de géant pour l´humanité.
</citation>

Comme vous le voyez, on ferme la balise en mettant simplement </citation> sans répéter les attributs (ça ne servirait à rien).

Ce qu'il faut retenir

Bon, tout ce que je viens de vous dire là, c'est le seul moment de théorie pure que vous trouverez dans ce cours. Vous ne savez pas encore faire une page web, mais rassurez-vous nous allons commencer dans 2 minutes.

Je tenais à vous montrer un peu ce que sont ces "balises" que vous allez rencontrer tout le temps par la suite, histoire que vous tiriez pas trop la tronche quand vous allez en voir (un peu comme ça => o_O

)
Bien entendu, j'ai inventé des noms de balises, en réalité <image /> et <citation> n'existent pas. Mais vous allez avoir tout le temps d'apprendre les vrais noms.

Avant de terminer cette petite partie théorique, je vais vous donner ici quelques règles pas bien compliquées qu'il faudra retenir si vous voulez faire une parfaite petite page web :

Les balises existent soit par paires (<balise> </balise> ) ; soit toutes seules, mais dans ce cas il faut mettre un / à la fin de la balise (ex. : <balise /> )
Les noms des balises et attributs s'écrivent toujours en minuscules (ex. : "citation, auteur, date")
Les valeurs des attributs peuvent contenir des majuscules (ex. : "Neil Armstrong")
S'il y a des attributs dans une balise fonctionnant par paire, on ne les met que dans la balise ouvrante (cf : exemple ci-dessus).

Allez, maintenant on passe à la pratique !

Une page XHTML

C'est le moment d'ouvrir votre éditeur (Bloc-Notes, Notepad++ ou un autre), et de tester avec moi votre première page web

Voici le code de base d'une page web, qui va servir de point de départ à chacune de nos pages :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>

Recopiez ce code dans votre éditeur, et enregistrez la page avec l'extension .html (ou .htm ça marche aussi). Par exemple avec Notepad++, allez dans le menu "Fichier / Enregistrer", et tapez "essai.html" comme sur la capture d'écran ci-dessous :

J'ai appelé ma page "essai.html", mais vous pouvez lui donner le nom que vous voulez.

Rendez-vous ensuite dans le dossier où vous avez enregistré la page. Vous devriez voir votre fichier (x)HTML :

L'icône du fichier est peut-être différente selon le navigateur que vous utilisez. Personnellement, j'utilise Mozilla Firefox, donc ce que vous voyez est l'icône d'un fichier HTML si vous avez Firefox.
Avec Internet Explorer, l'icône est assez similaire, sauf qu'à la place il y a le "e" bleu d'Internet Explorer.

Double-cliquez sur l'icône pour l'ouvrir dans votre navigateur. Suspense, votre première page web s'ouvre pour la première fois sous vos yeux. Et que voyez-vous ???

Eh oui, la page est vide ! Il a fallu écrire tout ce code pour créer... une page vide !

Mais rassurez-vous quand même, la page n'est en fait pas si vide que ça : elle contient des tonnes d'informations dont votre navigateur aura besoin. En plus, le titre de la page apparaît déjà dans la barre de titre de la fenêtre (si si, regardez tout en haut à gauche de la fenêtre : "Bienvenue sur mon site !")

Si vous le désirez, vous pouvez voir comment je fais pour créer le fichier XHTML et le tester dans cette animation :

Enregistrer et tester sa première page web (873 Ko)

Notez qu'une fois votre fichier XHTML créé, vous pouvez toujours le réouvrir en faisant un clic droit sur l'icône et en cliquant sur "Notepad++" comme ceci :

Quelques explications ?

Je vous dois quelques explications sur le code que je vous ai donné un peu plus haut. Je veux que vous compreniez que tout cela n'est pas du charabia et que ça sert vraiment à quelque chose !

Je me permets de copier ce code à nouveau pour que vous l'ayez bien sous les yeux (c'est le même que tout à l'heure, il n'y a pas de différence) :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
   </body>
</html>

Voici les explications ligne par ligne :

Sur la toute première ligne se trouve la déclaration "Doctype". C'est une balise un peu particulière, et c'est la seule qui n'obéit pas aux règles que je vous ai données tout à l'heure.
Concrètement, cette balise sert à dire au navigateur que ce que vous faites est une page XHTML, et que vous utilisez la version 1.0 du langage XHTML (eh oui, comme dans les programmes il y a des versions !).
Pourquoi je vous apprends à utiliser le XHTML 1.0 ? Parce que c'est une des version les plus récentes, et que votre site sera ainsi à jour
Vient ensuite la balise <html> . C'est la balise principale qui englobera toute votre page (x)HTML. Comme vous pouvez le voir, on ne la ferme qu'en dernier avec </html> , qui indique que votre page (x)HTML s'arrête là. Il n'y a donc rien après le </html> .
La balise <html> contient 2 attributs :
- xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML. Ne vous en préoccupez pas et laissez comme ça, ça ne nous intéresse pas particulièrement.
- xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée votre page web. Si vous écrivez une page web en français, mettez "fr" comme je l'ai fait. Si la page est en anglais, mettez "en", en italien "it", espagnol "es" etc etc...
La balise <head> contient quelques informations d'en-tête pour votre page web. Elle est refermée un peu plus loin.
1. A l'intérieur de la balise <head> , vous trouvez notamment la balise <title>. Elle est très importante : c'est elle qui contient le titre de votre page web. Ici, le titre est "Bienvenue sur mon site !", mais c'est à vous de mettre le bon titre de votre page
2. Ensuite, vous pouvez voir une balise <meta> . Il existe beaucoup de balises de ce type, mais je ne vous en parlerai que plus tard parce qu'elles ne sont pas indispensables. Seule celle que je vous ai donnée est indispensable : elle sert à indiquer que vous allez taper des caractères spécifiques au français (éèàê etc...).
Enfin (ouf!), après la fermeture de la balise <head> commence une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de votre page web. En clair, c'est entre ces 2 balises que nous allons passer 99% de notre temps
Pour le moment, il n'y a rien entre ces 2 balises, donc la page n'affiche rien (il y a un fond blanc comme vous avez pu le constater tout à l'heure).

Pfiou !
Voilà, je vous ai donné le sens de tout ce bazar

Encore une fois, retenir ce que ça signifie exactement n'est pas indispensable. Ce qui est indispensable, c'est de se servir de ce modèle à chaque fois que vous créerez une nouvelle page web.

Les commentaires

Avant d'en terminer avec ce chapitre riche en nouvelles connaissances, je voudrais rapidement vous parler des "commentaires".

Les commentaires sont des informations que vous écrivez pour vous. Les commentaires n'apparaissent pas aux yeux des visiteurs.
Vous pouvez par exemple utiliser les commentaires pour marquer des repères si votre page XHTML est très grosse, ou pour vous servir de rappel.

Un commentaire est une balise un peu spéciale commençant par 
Voici un exemple de commentaires dans le code de tout à l'heure :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <!-- Rappel : c'est ici que l'on écrit le contenu de notre page web -->
   </body>
</html>

Essayez d'enregistrer cette page web et de voir ce qu'elle donne dans votre navigateur : il n'y a aucune différence avec le code de tout à l'heure. Ce qu'il y a dans le commentaire n'apparaît nulle part.

En général, on utilise assez peu les commentaires, mais je tenais à vous montrer comment on s'en sert pour que vous ne soyez pas surpris si vous en voyez.
Il se pourrait que j'en utilise dans certains de mes exemples pour vous donner des explications au milieu du reste du code XHTML.

Q.C.M.

Lequel de ces éléments peut contenir des majuscules ?

La balise
Le nom de l'attribut
La valeur de l'attribut (entre guillemets)

Quelle est la particularité des balises qui ne fonctionnent pas par paire ?

Elles commencent par <!--
Elles commencent par un slash (</)
Elles se terminent par un slash (/>)

A quelle balise se trouve l'attribut xml:lang ?

<html>
<title>
<head>

Quelle balise permet d'indiquer le titre de la page web ?

<title>
<titre>
<titke>

Entre quelles autres balises les balises <meta> se trouvent-elles ?

<body> et </body>
<title> et </title>
<head> et </head>

Laquelle de ces balises est un commentaire ?

<-- Commentaire -->
<!-- Commentaire >

Statistiques de réponses au QCM

Vous ne vous attendiez pas à avoir à écrire tout ce code pour faire une simple page web, non ?

C'était pourtant un passage obligé si vous voulez faire une vraie page web.
Mais rassurez-vous, à partir de maintenant tout ce que nous allons faire va apparaître à l'écran, et dès le prochain chapitre vous allez pouvoir faire afficher du texte à votre navigateur !

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité