Créer un site en XHTML et CSS

Noter ce cours :

Liens sponsorisés :

Le XHTML étant de plus en plus employé (mais pas forcément correctement), il est important de savoir concevoir proprement la structure d'un site en XHTML strict. La mise en page sera réalisée en CSS. Nous allons donc concevoir une page web minimale sans CSS au début. Cette page sera la structure du site et ne ressemblera donc à rien (aucune mise en forme). Nous allons ensuite lui appliquer une mise en forme à l'aide d'une feuille de style CSS, puis nous changerons la mise en forme à l'aide d'une autre feuille de style. Vous constaterez alors que, sans toucher au code XHTML, un site peut prendre grâce aux CSS des apparences très différentes en modifiant un seul fichier. Nous travaillerons pour créer cette page web avec le bloc-notes intégré à Windows.

Réalisation de la structure proprement dite :

Commencez par créer un nouveau document texte que vous nommerez par exemple index.htm, il s'agit ici d'un exemple. Il va tout d'abord faire savoir au navigateur quel type de page il va traiter. On doit donc pour cela ajouter ce qu'on appelle le doctype. Procédons :

Ouvrez votre fichier texte qui pour l'instant est vide. Ajoutez ces lignes :

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

Votre fichier ressemble maintenant à ça :

Ajout du doctype dans la page XHTML

Nous allons maintenant ajouter l'en-tête de la page en rajoutant les lignes suivantes :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ici le titre de votre page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>

Ici, nous venons de mettre le titre de la page, le lien vers la future feuille de style qui s'appelera style.css et nous venons de déclarer le charset, autrement dit le jeu de caractères que le navigateur utilisera pour afficher la page. Votre fichier ressemble pour l'instant à ceci :

Création de l'en-tête du site

Nous allons maintenant construire la structure du corps de page, ce qui s'affichera dans le navigateur. Nous allons donc utiliser la balise <body> et remplir ensuite notre document :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ici le titre de votre page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
Nous allons ensuite construire la structure de la page ici
</body>
</html>

Votre page web ressemble maintenant à ceci :

Nous venons de créer le corps de la page

Tout ce qui est obligatoire dans une page Web est désormais intégré. Nous allons pouvoir concevoir la structure du site (optimisée aussi pour le référencement) et qui respecte la sémantique XHTML, garante d'une meilleure accessibilité.

Nous allons créer une page web qui ressemblera à ça en terme de structure (donc sans aucune mise en forme):

aperçu de la structure de la page web

Vous pouvez constater que l'aspect est moche, que le menu est en dessous du contenu au lieu d'être à gauche avec le contenu à droite, etc... Tout ceci est normal car nous n'avons pas encore conçu la feuille de style CSS qui viendra embellir tout ça. Le code XHTML pour réaliser cette structure est plus que simple. Nous allons tout d'abord ajouter le titre de la page, tout en haut. Un titre en XHTML se code avec les balises <hX></hX> ou X est un numéro variant de 1 à 6. Plus le numéro est grand, moins le titre est important. Etant donné qu'il s'agit du titre principal, nous utiliserons donc la balise <h1></h1>

Pour les menus, nous allons utiliser les balises <ul></ul> qui correspondent à des listes. Le contenu n'étant pour l'instant qu'à base de texte, il sera contenu dans une balise <p> qui correspond à un paragraphe. Le menu et le contenu seront contenus dans des balises <div> ce qui permettra une évolution future plus simple et permettra une séparation plus stricte entre le menu et le texte. Commençons par rajouter le titre :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ici le titre de votre page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<h1>Bienvenue sur ma page Web</h1>
</body>
</html>

Nous allons maintenant rajouter le contenu et le menu. Si le contenu est placé en haut dans le code source, ce n'est pas par hasard mais pour une question de référencement. Votre référencement sera ainsi plus efficace (nous nous chargerons de faire passer ensuite le contenu à droite et le menu à gauche grâce aux feuilles de style CSS). Commençons par rajouter à notre page donc le code source des deux conteneurs (balises <div>) :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ici le titre de votre page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<h1>Bienvenue sur ma page Web</h1>
<div id="contenu">

</div>
<div id="menu">

</div>
</body>
</html>

Nous allons ensuite placer le contenu de la page dans une balise <p></p> et réaliser le menu avec une liste :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ici le titre de votre page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<h1>Bienvenue sur ma page Web</h1>
<div id="contenu">
<p>Ici le contenu du site Web. Cette page est volontairement minimaliste.</p>
</div>
<div id="menu">
<ul>
<li><a href="lien.htm" title="Description du lien 1">Lien 1</a></li>
<li><a href="lien2.htm" title="Description du lien 2">Lien 2</a></li>
<li><a href="lien3.htm" title="Description du lien 3">Lien 3</a></li>
<li><a href="lien4.htm" title="Description du lien 4">Lien 4</a></li>
</ul>
</div>
</body>
</html>

Nous allons maintenant rajouter un conteneur général qui permettra de centrer le site également sous internet Explorer qui ne respecte pas les recommandations du W3C :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ici le titre de votre page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<div id="conteneur">
<h1>Bienvenue sur ma page Web</h1>
<div id="contenu">
<p>Ici le contenu du site Web. Cette page est volontairement minimaliste.</p>
</div>
<div id="menu">
<ul>
<li><a href="lien.htm" title="Description du lien 1">Lien 1</a></li>
<li><a href="lien2.htm" title="Description du lien 2">Lien 2</a></li>
<li><a href="lien3.htm" title="Description du lien 3">Lien 3</a></li>
<li><a href="lien4.htm" title="Description du lien 4">Lien 4</a></li>
</ul>
</div>
</div>
</body>
</html>

Réalisation de la mise en page :

Et voilà ! votre première page web est créée. Nous allons maintenant la mettre en forme pour la rendre plus attrayante, tout cela à l'aide d'une feuille de style CSS. Commencez par créer un fichier nommé style.css . Ce fichier sera le point de départ de notre feuille de style. Placez le fichier dans le même répertoire que la page html que nous venons de créer. Ouvrez ensuite ce fichier (qui est vide pour le moment) avec le bloc-notes. Voici le contenu de notre feuille de style CSS :

*{
font-family:Verdana, Arial, Helvetica;
}
body{
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
width:770px;
}
body,h1{
text-align:center;
}
#conteneur{
width:770px;
text-align:left;
}
h1{
font-size:1.5em;
}
#menu{
width:150px;
float:left;
font-size:0.8em;
}
#menu li{
list-style-type:none;
line-height:20px;
}
#contenu{
width:620px;
float:right;
width:615px;
text-align:left;
}

Voici maintenant quelques explications (vous en aurez plus dans la section CSS du site). Le selecteur * nous permet d'appliquer un style à tous les éléments. Ici, nous auront donc une police Verdana, Arial ou Helvetica (en fonction de leur présence sur l'ordinateur du client. Par exemple si le client a la police Verdana sur son ordinateur, le site sera affiché en Verdana, sinon en Arial et pour finir en Helvetica). Nous fixons ensuite des largeurs aux boîtes à l'aide de la syntaxe width:Xpx; ou X est un nombre et px l'unité, ici le pixel. Nous effectuons des positionnements à gauche et à droite (respectivement à l'aide de la syntaxe float:left; et float:right;). Les attributs margin-left:auto; et margin-right:auto; permettent de centrer le contenu sur les navigateurs respectant les recommandations du W3C. Pour Internet Explorer, il faut utiliser une combine qui consiste à utiliser la syntaxe text-align:center; qui ne s'applique normalement qu'au texte... Cette syntaxe aura pour effet sous Internet Explorer de centrer le <div id="conteneur">. On replace ensuite le texte à gauche avec la ligne text-align:left;

Voilà ! Vous venez de réaliser une page Web succinte mais qui respecte les recommandations du W3C et est parfaitement valide XHTML strict. Vous pouvez vous en inspirer pour réaliser un site Web entier basé sur le XHTML et les feuilles de style CSS.

Vous avez aimé cet article intitulé Créer un site en XHTML et CSS ? Partagez-le !
Vulgarisation-informatique.com
Cours en informatique & tutoriels