Cr?er des sites en XHTML

Créer des pages en XHTML. Se débarrasser de la mise en page en tableaux. Créer des sites en CSS.

Vous n'arretez pas de lire cela un peu partout. Cela devient une obsession, vous voulez comprendre comment faire. Mais là vous tombez sans doute sur des tutoriaux déjà très pointus, faisant appel à des concepts que vous ne comprenez pas toujours. Normal, le sujet est tellement vaste que les concepteurs d'aide en oublient souvent les très très débutants.

Je vais tenter à travers ce tutorial de vous mener petit à peit vers la construction d'un modèle de mise en page en XHTML, embelli par une feuille de style CSS.

Nous procèderons de la manière suivante : du fond vers la forme. Nous commencerons ainsi à créer le code nécéssaire, sans se soucier une seule seconde de l'aspect de nos pages. Cependant, la démarche utilisée (une des démarches possible) nous permettra de créer facilement ensuite une présentation originale à notre page.

Le fond : XHTML

Pour débuter, imaginons notre site comme un livre. Si vous deviez écrire un livre, vous l'écririez sans doute dans la même langue du début à la fin. Ainsi, votre éditeur pourrait prévenir vos futurs lecteurs de la langue utilisée dans votre livre. En XHTML, c'est pareil.

Il nous faut donc commencer par renseigner dans notre page cette information :

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

Cette ligne renseigne en quelque sorte le navigateur sur le fait que nous allons utiliser de l'XHTML transitional, donc le dictionnaire se trouve à l'adresse indiquée.

Commençons ensuite notre page :

Pour poursuivre, il faut comprendre que votre page HTML sera découpée en deux principales parties. La première est l'en-tête de la page. Elle renseigne le navigateur sur des informations qu'il ne faudra pas afficher dans la page. Par exemple, on y renseigne le titre de la page, que vous retrouverez en général en haut à gauche de votre fenêtre de navigateur, dans la barre de titre.

C'est également dans l'en-tête que vous insérerez les META tags, la plupart des scripts Javascript, les styles CSS que nous verrons plus tard...

L'autre partie de la page est le corps. C'est ce que le navigateur affichera dans vos pages (textes, images...)

Commençons donc par l'en-tête de la page.

<head>

Nous allons en premier préciser le jeu de caractères à utiliser. Vous pouvez vous renseigner sur le sujet, mais dans le simple but de comprendre XHTML, cela ne vous sera pas nécéssaire.

Au passage, vous remarquerez peut être déjà quelque chose avec cette dernière ligne, si vous avez déjà travaillé avec HTML : avant le > final a été inséré le signe /.

En effet, l'une des particularité de XHTML par rapport à HTML 4 est qu'il nécéssite que toutes les balises soient fermées. Pour les balises « double », cela ne change rien, comme pour <html> que nous allons en fin de page compléter par </html>. Mais dans le cas de balises simples, comme celle là, ou par exemple img pour la plus courante, il n'existe pas de balise fermante. Ainsi, pour préciser que la balise se ferme, vous devez ajouter ce /.

L'oubli de ce caractère entrainera une erreur de validation de votre code. Par contre, comme certains navigateurs comprendront mal ce signe final, pensez à toujours le précéder d'un espace.

De cette manière, votre ancienne balise image qui était :

devra être transformée en :

Voilà terminé cet apparté.

Revenons à notre en-tête.

Element principal pour qualifier votre page : son titre (celui qui se retrouve dans la barre tout en haut de la fenêtre).

En XHTML, pas de changement :

<title>Titre de la page</title>

Nous n'allons pas ici nous compliquer la tâche avec des scripts Javascript ou autres baliess meta devenues inutiles, venons en à l'essentiel : la feuille de style CSS.

Elle n'est pas encore créée, mais nous allons déjà définir quel nom elle portera et ou elle sera enregistrée. Cela nous permettra de bien séparer le fond et la forme de votre page.

Pas très original, la feuille de style dans ce cas sera donc à enregistrer dans le même dossier que notre page, et aura comme nom de fichier style.css .

Vous remarquerez encore le / final, sachant que celle balise n'a pas de balise de fermeture.

Voilà, nous avons terminé pour notre en-tête.

</head>

Et nous commençons donc directement le corps de la page :

<body>

Nous sommes là dans un exercice, le but est donc de vous créer une page qui ne soit pas inutilement compliquée à réaliser.

Il nous faut simplement imaginer grossièrement ce qu'on veut faire, et pour notre exemple, on va faire dans le banal d'un point de vue hirarchie des informations.

Souvent dans les sites web, on retrouve en haut de page une image, souvent un logo, qui peut en quelque sorte représenter le titre de notre site.

En dessous, nous avons un menu, qui donne suite au titre du contenu de la page. La suite consiste souvent en des sous-titres séparés par des paragraphes.

Si pour vous ce genre de découpage de l'information dans une page web ne nous surprend pas, vous allez vite comprendre l'intêret de l'XHTML.

Pour les autres, prenons un exemple.

Imaginons que nous allons créer un site web marchand. Nous allons par exemple vendre des disques. Vous imaginez bien le système de hierarchie de l'information qui s'impose.

Un disque de Francis Cabrel sera un disque dans la catégorie « Français », qui elle même sera dans la catégorie « chanson ».

Vous avez peut-être déjà vu de type de rappel dans un site, qui vous situe par rapport à l'accueil du site :

Accueil > Chanson > Française > Francis Cabrel

Et ainsi on peut imaginer que dans cette page, on liste tous les albums de Francis Cabrel.

Comme chaque album de Francis Cabrel a sa critique et sa liste de chansons, il est aisé d'imaginer la hierarchie des informations. Elle ressemblerait à cela :

Mon site de vente de CD

Francis Cabrel

Album numéro 1

Liste de chansons

Titre de la chanson 1

Titre de la chanson 2

...

Titre de la dernière chanson

Critique

Album numéro 2

...

Dernier album

Si vous avez compris comment sont reliés ces informations, vous comprendrez comment les structurer en XHTML.

Pour rester simple, il existe 3 types de structures pour l'information en XHTML :

les titres
les paragraphes
les listes

Comme il existe plusieurs niveaux de titres, vous pourrez encore caractériser l'information de votre page. Les titres sont en XHTML (comme en HTML) les balises h. Comme il existe plusieurs niveaux, il a fallu leur donner des numéros pour comprendre quel était le titre le plus important.

Ainsi, utilisez les balises <h1>, <h2>,... <h6> pour renseigner vos titres, <h1> étant pour le titre de plus haute importance.

Pour remprendre schématiquement notre précédente hierarchie :

<h1>Mon site de vente de CD</h1>

<h2>Francis Cabrel</h2>

<h3>Album numéro 1</h3>

<h4>Liste de chansons</h4>

Titre de la chanson 1

Titre de la chanson 2

...

Titre de la dernière chanson

<h4>Critique<h4>

<h3>Album numéro 2</h3>

...

<h3>Dernier album</h3>

Comment procéder pour mettre en place cette hierarchie, savoir où mettre quelle balise ?

Pas si compliqué, ne vous inquiétez pas.

On commence par le haut. Le premier qui englobe tout, c'est <h1>. Ici c'est parce que c'est le titre du site.

De la même manière, nous avons mis un sous titre, qui en fait est le titre de la page: <h2>

Ensuite, nous devions lister tous les albums de cet artiste. Donc pour chacun d'eux : <h3> (on va simplement en descendant).

Pour chaque album, nous avions dit que nous allions mettre le liste des chansons et la critique de l'album. Ce sont donc des informations qui dépendent de l'album, donc ils ont <h4>.

Cette hierachie peut s'étendre jusqu'à 6 niveaux comme cela. C'est une limitation qui n'est pas inutile. Si vous créez quelque chos de plus profond, modifiez le de sorte à réduire, et ceci par exemple en créant de nouvelles pages, qui feront le détail de celle en cours.

Il nous reste à caractériser, mettre des balises autour du contenu de la critique et pour la liste des chansons.

Nous retrouvons là les deux autres formes citées précédement. Le contenu de la critique sera dans un paragraphe et la liste des chansons dans une liste.

Un paragraphe est balisé par <p> </p>, simplement.

<p>Contenu de la critique</p>

Pour la liste, cela est plus compliqué.

Il existe plusieurs types de liste (ordonnée, avec numéros...). Mais en général, l'utilisation des listes avec XHTML et CSS ne s'occupe guère de ces options. Donc nous n'allons parler que de la liste la plus simple.

Elle commence par la balise <ul> et se termine donc par </ul>. A l'intérieur, vous devez ensuite insérer chaque élément de liste entre <li> et </li>.

Pour notre liste de chansons, nous aurons alors :

<ul>

<li>Titre de la chanson 1</li>

<li>Titre de la chanson 2</li>

...

<li>Titre de la dernière chanson</li>

</ul>

Voilà, globalement, le principal contenu de notre page est crée :

<h1>Mon site de vente de CD</h1>

<h2>Francis Cabrel</h2>

<h3>Album numéro 1</h3>

<h4>Liste de chansons</h4>

<ul>

<li>Titre de la chanson 1</li>

<li>Titre de la chanson 2</li>

...

<li>Titre de la dernière chanson</li>

</ul>

<h4>Critique<h4>

<p>Contenu de la critique</p>

<h3>Album numéro 2</h3>

...

<h3>Dernier album</h3>

Au passage, si vous n'avez jamais jugé utile auparavant d'indenter votre code, vous pourrez peut-être avec XHTML comprendre tout l'intérêt de le faire.

Notre exemple est assez simplifié, c'est vrai. Il ne couvre pas toutes les possibilités de création de pages, c'est vrai. Cependant, utiliser un modèle hierarchique comme celui là dans la majorité de vos créations vous permettront sans aucun doute de travailler plus logiquement, et ainsi, non seulement les mises à jour seront plus simples par la suite, mais en plus, la création de nouveautés se simplifiera d'autant plus.

Nous avons donc maintenant bien établi la façon dont le code sera au coeur de votre page.

Restons simples, gardons ainsi notre page comme cela. Même si cela peut paraître trop peu de code, considérons que cela suffit pour une première tentative.

Malgré cela, vous allez constater que cela peut être déjà bien suffisant pour créer la mise en page que vous voulez.

Mais avant de terminer, nous allons tout de même ajouter ce qui se révèle indispensable dans tout site : un menu de navigation.

Et comme un menu n'est ni plus ni moins qu'une succession de liens, nous allons logiquement créer ce menu sous forme de liste.

<ul>

...

<li><a href="dernierlien.html">Dernier lien</a></li>

</ul>

Si vous êtes vraiment néophyte avec HTML, sachez simplement que la balise a renseigne un lien, son attribut href nous dit quelle est la cible de ce lien et le texte est le texte à cliquer.

Nous voilà donc avec une liste de lien en guise de menu.

Nous la plaçons au début du corps de la page, après

<body>

Et cela nous donne :

<body>

<ul>

...

<li><a href="dernierlien.html">Dernier lien</a>/li>

</ul>

<h1>Mon site de vente de CD</h1>

<h2>Francis Cabrel</h2>

<h3>Album numéro 1</h3>

<h4>Liste de chansons</h4>

<ul>

<li>Titre de la chanson 1</li>

<li>Titre de la chanson 2</li>

...

<li>Titre de la dernière chanson</li>

</ul>

<h4>Critique<h4>

<p>Contenu de la critique</p>

<h3>Album numéro 2</h3>

...

<h3>Dernier album</h3>

Il faut bien sûr finir notre corps de page ensuite :

</body>

et terminer la page :

</html>

Voilà, si c'est votre première page en XHTML, félicitations. Malheureusement, je serais tenté de dire que c'est loin d'être le plus compliqué qui est passé. Mais courage, ça c'est pas si difficile.

Il ne nous reste plus sur notre code qu'à régler quelques détails pour éviter de revenir dessus ensuite. Il faut renseigner, lorsque nécéssaire les attributs id ou class de certaines balises, afin que les styles CSS s'y appliquent.

Par exemple, il est logique de penser que nous allons faire apparaître tous les titres <h3> de la même manière. Si ça n'est pas le cas, il est possible que vous n'ayez pas bien compris le fonctionnement de la logique décrite.

Par contre, notre exemple possède une particularité qu'il faut résoudre. Cela aurait pu se produire également avec un paragrpahe, mais ici, nous avons deux listes (menu et liste des chansons). Ainsi, lorsque nous allons créer nos styles CSS, nous allons préciser certaines choses pour les listes. Comme elles ne représentent pas du tout la même chose, il serait embêtant de rencontrer ce probleme.

Pour pouvoir travailler dans notre future feuille de style CSS sur deux objets bien différents, nous allons leur donner à chaun un identifiant qui les caractérisera.

Pour cela, ajoutons à la balise ul l'attribut id.

Faisons simple et clair, pour le menu, notre balise ul deviendra :

et pour la liste des chansons :

Au final, notre code XHTML sera :

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

<head>

<title>Titre de la page</title>

</head>

<body>

<ul>

...

<li><a href="dernierlien.html">Dernier lien</a> </li>

</ul>

<h1>Mon site de vente de CD</h1>

<h2>Francis Cabrel</h2>

<h3>Album numéro 1</h3>

<h4>Liste de chansons</h4>

<ul>

<li>Titre de la chanson 1</li>

<li>Titre de la chanson 2</li>

...

<li>Titre de la dernière chanson</li>

</ul>

<h4>Critique<h4>

<p>Contenu de la critique</p>

<h3>Album numéro 2</h3>

...

<h3>Dernier album</h3>

</body>

</html>

Nous passerons à la forme dans la deuxième partie, à venir bientôt.

Retour aux tutoriaux

Livres

HTML : Pr?cis et Concis

HTML 4 pour les nuls

Liens

Dreamweaver Media Box

Openweb

Journal du net

Forum alsacreations

10 raisons de passer ? XHTML, CSS et DOM

Exemple de site que vous pouvez construire avec Dreamweaver : poker.bwin.com. Développez votre propre site de paris sur le foot avec le logiciel Dreamweaver. Avec un peu d'expérience, vous saurez développer rapidement et efficacement un module qui permette à vos visiteurs de parier en direct. Vous pourrez alors proposer une interface qui permet de faire des paris sur le foot sur votre site.

RSS

Yeca - Ultimteam - CC - Webmaster PHP - Blog geek