Webelix.net :: Creer un site web - Xhtml - Réalisation du site en XHTML avec CSS (partie 1)

Vous êtes ici : Home Page

Dossiers

Creer un site web

Xhtml

Realisation site XHTML (1)

Imprimer

Informations Membres

	[185] Posts sur le forum
	[177] Membres inscrits

Il y a en ligne :

1 Membre

1 Invité

Membre en ligne:
herbord

Partenariat

Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

Partenaires

Réalisation du site en XHTML avec CSS (partie 1)

Nous allons créer un site en XHTML « Transitional » (qui va nous permettre d'avoir moins de contrainte au niveau des balises HTML autorisés par W3C) et utiliser les CSS pour la mise en forme du site.

Pourquoi le XHTML?
Parce que c'est un language tourné vers les applications futures. Il nous oblige à respecter des normes, pour une meilleur interprétation par nos chers navigateurs.
Pourquoi les CSS?
Parce qu'il faut oublié nos bons vieux tableaux HTML pour les mises en forme d'un site, et avoir une souplesse au niveau des mises en page.

Alors on commence?

Créer un fichier "index.html" à la racine de votre site (ftp).
Puis ouvrez ce fichier à l'aide d'un éditeur de texte, du genre bloc note. (Mais un logiciel tel que EditPlus sera plus agréable lors du codage, car il fait la différence avec des couleurs de texte, entre les balises, les textes, et diverses options que compose une page HTML)

Ouvrez le fichier "index.html" et tapez ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title> Nom du site </title>
</head>

<body>
  Contenu du site
</body>
</html>

Ceci est le minimum que l'on peut trouver dans une page XHTML, toutes les pages seront structurées de cette manière.

Note : Pour plus amples informations sur les balises XHTML, se référer aux "Cours XHTML".

Etape 1 - Les Zones (mise en forme)

Nous allons inclure les codes qui vont nous délimiter les zones.
Rappelez vous, HEADER, MENU, PAGE et FOOTER sont les zones de notre futur site.

La Zone HEADER aura une dimension de 600x90 pixels
La Zone MENU aura une dimension de 120x350 pixels
La Zone PAGE aura une dimension de 480x310 pixels
La Zone FOOTER aura une dimension de 480x40 pixels

Attention ! Toutes lignes de codes en noir, sont celles que nous ajoutons au fur et à mesure de l'explication!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Mon premier site en XHTML</title>
</head>

<body>
<div>
  <div>Zone HEADER</div>
  <div>Zone MENU</div>
  <div>Zone PAGE</div>
  <div>Zone FOOTER</div>
</div>
</body>
</html>

Ces zones définies par des blocs <DIV> ne servent à rien sans les CSS.
Ce que nous allons voir maintenant.

Créer un fichier "style.css" à la racine de votre site (ftp).

Ouvrez le fichier "style.css" et tapez ceci:

html, body {margin: 0;padding: 0;}
#container {position: relative;width: 600px;margin: 4px auto;}
#header {position: relative;height: 90px;}
#menu {float: left;width: 120px;height: 350px;}
#page {float: right;width: 480px;height: 310px;}
#footer {float: right;width: 480px;height: 40px;}

Note : Pour plus amples informations sur les CSS, se référer aux "Cours CSS".

Une fois le fichier "style.css" créé et enregistré, nous allons compléter notre fichier "index.html".

Ouvrez le fichier "index.html" et tapez ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Mon premier site en XHTML</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="container">
  <div id="header">Zone HEADER</div>
  <div id="menu">Zone MENU</div>
  <div id="page">Zone PAGE</div>
  <div id="footer">Zone FOOTER</div>
</div>
</body>
</html>

Cliquez ici pour Voir l'aperçu

Note : <link rel="stylesheet" href="style.css" type="text/css" /> renseigne l'existence et l'endroit du fichier contenant les CSS.

Passons à l'étape suivante Suite du Cours