Comment créer votre première page XHTML/CSS ? (mon site, pas à pas)
Votes : environ (100%) 1 vote

Dans ce tutoriel dédié aux débutants, vous allez découvrir comment créer une page statique en XHTML/CSS pour débuter votre site web, et pour vous aider à savoir comment utiliser divers propriétés et balises en XHTML et en CSS.

D’ailleurs,  vous pouvez utiliser cette page soit pour l’utiliser comme un thème principal (template) pour votre site web, ou bien une page unique pour une société.

La page web que nous allons créer durant les chapitres de ce tutoriel, va se composer d’un en-tête, d’un menu horizontal, d’un corps et d’un pied de la page.

Nous allons voir en premier le côté XHTML de notre page, et puis, par la suite, nous allons traiter le côté CSS (style) de la page.

N’oubliez pas que si vous saurez comment créer une page statique durant ce tutoriel, soyez sûr et certain que vous saurez comment créer des thèmes, propres à vous. Et les utiliser pour des CMS (niveau confirmé).

Allons-y !

Les composants de la page que nous allons créer :

En fait, pour créer une page web, il faut savoir le plan général que nous allons suivre…

Pour notre cas, nous allons créer une page statique en XHTML/CSS avec un « look » standard, qu’on trouve dans la plupart des sites web.

Et comme j’ai cité en haut, les composants sont : L’en-tête, le menu horizontal (de navigation), le corps (la barre à droite et la zone du contenu) et le pied de la page.

Voici dans l’image ci-dessous une illustration montrant l’emplacement de chaque composant :

Nous allons traiter maintenant le sujet, de manière plus détaillé, plus théorique. Pour qu’on puisse traiter la partie pratique de façon plus aisée.

L’en-tête :

L’en-tête c’est le premier élément qu’on aperçu lors de la première visite vers votre page ou de votre site web, donc, il doit être bien organisé, et contenant au moins le Logo ou le Nom de votre site web.

D’autre part, il doit être léger, pour ne pas ralentir ou coincer le chargement de votre page !

On peut créer un en-tête en utilisant plusieurs méthodes, nous allons parler de ça dans la partie pratique de ce tutoriel :)

Le menu horizontal (de navigation) :

Comme dans cette page, vous pouvez trouver juste en haut, un menu de navigation, qui se trouve déjà dans toutes les pages de ce site web.

Vous pouvez (à l’aide de ce menu) faciliter la navigation à vos visiteurs, en les offrant des liens pertinents vers plusieurs catégories dans votre site web !

Et pourtant nous allons voir comment le créer dans la suite…

Le corps :

Le corps de la page, est le composant le plus important dans un site web, il doit être lisible (le texte) organisé (titres, images,…) et stylé pour faciliter la lecture et l’accès à l’information que contient votre corps.

En fait, le corps contient deux sous-composants, la barre verticale qui se trouve à droit et le contenu de la page !

Et comme nous allons voir tout de suite, le corps doit être lisible, un font (police) lisible et clair, avec un arrière plan qui tend vers le blanc.

Nous allons voir comment le créer par la suite.

Le pied de la page :

Quand on visite un site web professionnel, on constate qu’il y en a des divers liens (licenses légales, contact,…) dans le pied de chaque page.

Mais pourquoi ?

Savez-vous qu’il y a un mythe qui dit que les moteurs de recherche (comme Google) prennent en considération les liens situés dans le pied des pages d’un site web. Mais ce n’est pas vraiment le cas…

Cependant, il est devenu très fréquent d’utiliser le pied de la page pour placer les conditions d’utilisation, les licences légales et les droits de l’auteur du site.

Donc, comme les autres. On doit (si on veut faire les points sur les lettres) créer un beau pied de page, pour offrir aux visiteurs d’autres rubriques ayant relation à tous ce qui est juridique…

Mais pour un premier pied de page, nous n’allons pas procurer à créer un grand pied de page… Un petit suffit… Si vous êtes curieux(se), vous pouvez suivre nos tutoriels sur ce site :)

Montrez-moi le résultat de ce tutoriel !

D’accord !

Voici le résultat final de ce tutoriel :

Pas encore dispo.

Mais l’important ici, ce n’est pas le résultat !

On peut trouver partout dans les moteurs de recherche des « templates »  disponibles en téléchargement.

Donc, vous êtes ici non seulement pour créer une page statique, mais souvent pour vous aider à acquérir de nouvelles techniques en CSS/XHTML pour faire les choses de manière plus esthétiques, tout cela en se basant sur le fameux éditeur… Bloc Notes (Notepad).

Et passons à l’essentiel…

Pouvez-vous m’expliquer cela en chinois ?

Eh oui ! Nous allons commencer par le côté contenu (XHTML).

Et par la suite, nous allons ajouter un look moderne à notre page en utilisant le CSS.

Le côté XHTML :

Comme dans l’article qui explique l’XHTML de A à Z, je vous ai dit qu’il existe l’HTML et l’XHTML. Et je vous ai dit que le plus convenable est l’XHTML.

Et donc, pour l’utiliser on doit le signaler en premier avant de taper le premier code !

Voici un rappel sur le code dont on a discuté autrefois (et c’est sur ce code qu’on va travailler) :

[html]
<!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 » dir= »ltr » lang= »fr-FR »>

<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
<title> Page easytutoriel </title>
</head>
<body>

</body>
</html>
[/html]

Commençons maintenant par l’en-tête.

XHTML : L’en-tête

Pour créer un en-tête nous aurons besoins à  la balise

pour définir le bloc, la balise pour le logo et

Voici le code avec les commentaires () pour comprendre le rôle de chaque élément.

Rappel : Les commentaires n’apparaît qu’à vous, les visiteurs ne les voient que si l’utilisateur accède au code source de la page. (on a parlé de cela dans cette série de tutoriels)

[html]

<div> <!– <div> pour définir un bloc pour mettre dedans le contenu de l’en-tête –>

<a href= »# »> <!– lien vers la page d’accueil, que nous allons créer par la suite –>
<img src= » » width= » » height= » » alt= »logo » title= »Logo du site » /> <!– pour le logo du site, avec width=largeur et height=hauteur –>

</a>
</div> <!– pour fermer la balise <div> –>

[/html]

Pour le code XHTML ci-dessus, nous n’avons pas intégrer les sélecteurs du CSS (Class et Id).

Si vous voulez savoir comment créer un logo pour votre site web, je vous invite à regarder les tutoriels vidéos que j’ai créé pour ceci G .

Donc, on doit mettre les sélecteurs pour pouvoir ajouter du CSS par la suite.

Voici le fichier XHTML actuel (avec les sélecteurs CSS : Id et Class) :

[html]
<!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 » dir= »ltr » lang= »fr-FR »>

<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
<title> Page easytutoriel </title>
</head>
<body>
<div id= »entete »> <!– <div> pour définir un bloc pour mettre dedans le contenu de l’en-tête –>

<a href= »# »> <!– lien vers la page d’accueil, que nous allons créer par la suite –>
<img src= » » width= » » height= » » alt= »logo » title= »Logo du site » /> <!– pour le logo du site, avec width=largeur et height=hauteur –>

</a>
</div> <!– pour fermer la balise <div> –>
</body>
</html>
[/html]

J’ai mit dans l’exemple en haut le sélecteur #entete pour l’en-tête.

XHTML : Le menu horizontal, de navigation

Le menu, c’est un composant qui se compose spécialement de plusieurs liens, parfois des dizaines de liens.

Donc, il faut organiser ce dernier afin de faciliter la navigation aux visiteurs de votre page, c’est pour cela que nous allons utiliser les balises de liste suivants : <ul>, <li> et <a>

Voici le code complet avec les sélecteurs.

[html]
<ul class= »menu rouge »>
<li><a href= »# » title= » »>Accueil</a></li>
<li class= »current »><a href= »# » title= » »>Qui sommes-nous ?</a></li>
<li><a href= »# » title= » » >Contactez-nous!</a></li>
<li><a href= »# » title= » »>Easytutoriel</a></li>
<li><a href= »# » title= » »>Nos services</a></li>
</ul>
[/html]

Dans le code XHTML en haut, j’ai mit comme sélecteur CSS #menu. Car c’est le seul menu dans notre page, et par ailleurs, j’ai utilisé le Id muni du nom «menu ».

XHTML : Le corps de la page

Dans ce tutoriel, nous allons créer un corps contenant une barre à droit de la page, et un espace d’un arrière plan blanc pour le contenu (texte, images, vidéos,…).

Voici le code XHTML du corps de la page, l’explication juste après :

[html]

<div id= »corps »> <!– c’est la balise qui va contenir la totalité du contenu de chaque page, c’est le corps de la page –>

<div class= »content »> <!– le côté « content » de votre page web (texte, images,…) –>

<h1> Bienvenue sur mon site web ! </h1> <!– pour faire un titre important, pour l’accueil, j’utilise ici « bienvenue sur mon site… » –>

<h2> Titre 2 </h2> <!– Titre important, qu’on peut l’utiliser pour organiser le contenu texte d’une page –>

Pour tester.

<h2> Titre 3 </h2>

Pour remplir.

<img src= »http:// » alt= » » title= » » />

</div>

<div class= »sidebar »> <!– pour définir la barre à droite de votre page web, qui va contenir des menus par exemple –>

<ul>

<h2>  </h2> <!– pour mettre un titre aux blocs à droite de la page –>

Le contenu du <b>bloc</b> ici. <!– j’ai mit la balise <b> pour mettre le texte en gras –>

</ul>

</div>

</div>

[/html]

Dans l’exemple en haut, j’ai mit plusieurs balises blocs

, la première balise pour définir le corps (avec le sélecteur ID corps) et la deuxième et la troisième pour couper la page en deux, une pour le contenu, et l’autre pour la barre situé à droite.

Et comme j’ai dit tout à l’heure, le CSS c’est pour après, et c’est la partie la plus intéressante.

Voici donc, le code complet jusqu’à l’instant de notre fichier XHTML :

[html]
<!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 » dir= »ltr » lang= »fr-FR »>

<head>
<meta http-equiv= »Content-Type » content= »text/html; charset=UTF-8″ />
<title> Page easytutoriel </title>
</head>
<body>
<div id= »entete »> <!– <div> pour définir un bloc pour mettre dedans le contenu de l’en-tête –>

<a href= »# »> <!– lien vers la page d’accueil, que nous allons créer par la suite –>
<img src= » » width= » » height= » » alt= »logo » title= »Logo du site » /> <!– pour le logo du site, avec width=largeur et height=hauteur –>

</a>
</div> <!– pour fermer la balise <div> –>

G <ul id= » menu»> </ul>

<div id= »corps »> <!– c’est la balise qui va contenir la totalité du contenu de chaque page, c’est le corps de la page –>

<div> <!– le côté « content » de votre page web (texte, images,…) –>

<h1> Bienvenue sur mon site web ! </h1> <!– pour faire un titre important, pour l’accueil, j’utilise ici « bienvenue sur mon site… » –>

<h2> Titre 2 </h2> <!– Titre important, qu’on peut l’utiliser pour organiser le contenu texte d’une page –>

Pour tester.

<h2> Titre 3 </h2>

Pour remplir.

<img src= »http:// » alt= » » title= » » />

</div>

<div> <!– pour définir la zone à droite de votre page web, qui va contenir des menus par exemple –>

<ul>

<h2>  </h2> <!– pour mettre un titre aux blocs à droite de la page –>

Le contenu du <b>bloc</b> ici. <!– j’ai mit la balise <b> pour mettre le texte en gras –>

</ul>

</div>

</div>
</body>
</html>
[/html]

Passons maintenant au pied de la page.

XHTML : Le pied de la page

Pour le pied de la page, on a droit à plusieurs types. On va mettre pour ce tutoriel un simple pied de page, pour faciliter la compréhension :)

Voici donc le code XHTML d’un simple pied de page :

[html]

<div id= »pied »>

<span class= »gauche »> Tous les droits sont réservés ©</span> <!– j’ai mit ici le code « © » pour imprimer la symbole du Copyright –>

<a href= »# »><span class= »droit »> Le nom de mon site</span></a>

</div>

[/html]

Dans l’exemple en haut, nous avons créé un simple pied de page, constitué d’un seul lien qui renvoi vers la page d’accueil, avec le nom de votre site web. J’ai mit deux sélecteurs Class, droit et gauche pour que je que je puisse distinguer facilement l’élément que je doit le flotter à gauche ou à droit, en faisant un « float » dans le CSS (à gauche pour .gauche et à droit pour .droit).

Voici une impression du contenu de notre page, sans CSS bien-sur !

G

Bien ! Prenons un repos…

Revenons au cours :)

Comme je vous l’ai dit tout à l’heure, nous allons s’amuser plus avec le CSS, car c’est lui qui va donner le style à votre page actuel.

Commençons le CSS…

Le côté CSS (Style) :

Tout d’abord, il faut lier notre page XHTML à notre fichier CSS (que vous venez de créer en utilisant votre éditeur de texte [Notepad++]).

Pour cela, nous allons ajouter une balisedans lede notre page :

[html]

<head>

// …

<link rel= »stylesheet » href= »style.css » type= »text/css » media= »screen » />

// …

[/html]

Avec style.css le nom de votre fichier CSS munit de l’extension .css :) (attention aux majuscules)

CSS : Le code qui permet d’organiser l’affichage

Voici un code conçut et utilisé par Yahoo! permettant aux créateurs de sites (webmasters) de fixer les valeurs des balises utilisés dans notre page (exemple : la marge de, la taille du texte,…) ayant des valeurs par défaut.

Car chaque navigateur se comporte de sa façon, il faut donc les rassembler tous pour afficher le même style dans tous les autres navigateurs.

Il faut alors le coller en premier de votre fichier CSS, pour ne pas l’écraser par un autre code se trouvant après lui…

[css]

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,
legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;
font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content: »;}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;
font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{font-size:100%;}
/*because legend doesn’t inherit in IE */
legend{color:#000;}

[/css]

Et puis par la suite, nous allons commencer par l’en-tête, passant par le corps et finissant par le pied de la page !

CSS : Body

Pour définir l’arrière plan de toute la page, on doit utiliser soit la baliseou.

Et pourtant, je vais utiliser la balisecomme sélécteur CSS, d’où je vais définir la taille du texte et le font à utiliser !

Et comme vous l’avez retenu lors du dernier tutoriel dans cette série , nous allons utiliser les propriétés : Background et Font

Voici à quoi ressemble la partie code :

[css]

Body {

Font-family :arial ,sans-serif ;

Font-size :13px ;

Background :grey ; /** Vous pouvez faire : url(votre-miniature.gif) #couleur **/

Color :#000 ;

}

[/css]

Vous pouvez même ajouter, padding pour créer une marge autour de votre page :)

CSS : L’en-tête

Pour l’en-tête, nous devons tout d’abord déterminer la largeur de notre page web. Prenons 900 pixels (900px) comme largeur.

Et pour l’arrière plan, j’ai préparé une image en dégradé pour la mettre en arrière plan en répétition selon l’axe « OX » (avec la propriété background, valeur : url(imagebg.png) repeat-x top red).

Voici le code CSS avec explication pour l’en-tête et ses sous-éléments :

[css]

#entete {
width:900px;
height:150px;
padding:10px;
background: url(imagebg.png) repeat-x top red;
margin:0 auto;
}
#entete .logo{
float:left;
height:auto;
width:auto;
}
#entete .logo img{
border:0;
}
[/css]

Voici le résultat :

G

Et c’est fini avec le style de l’en-tête ! Passons maintenant au style du corps de votre page XHTML.

CSS : Le menu horizontal de navigation

On a définit dans la partie XHTML le menu horizontal par le sélecteur ul#menu.

Nous allons utiliser alors ce sélecteur pour mettre un style pour tous les éléments de notre menu.

Voici un code CSS complet à copier, l’explication juste après :) :

[css]
<pre>ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(images/bg.png) repeat-x top left;
border:1px solid #000;
margin:0;
padding:0;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}

ul.menu li a:hover,.current {
color:#fff;
background:url(images/arriereplan.png) repeat-x top left;
}

ul.menu .current a {
color:#fff;
font-weight:700;
}

ul.menu.rouge{
background-color:#B11718;
}
ul.menu.rouge li a:hover, .menu.rouge li.current {
background-color:#DE3330;
}</pre>
[/css]

CSS : Le corps

Alors, pour le corps de la page, on a dit qu’on va mettre un arrière plan blanc, avec spécification de la taille du texte, sans oublier d’autres style dont je vais vous parler tout de suite.

Mais avant, voici le code CSS pour le sélecteur #corps :

[css]

#corps {

Width :900px ;

Height :auto ;

Background :#fff ;

Margin :10px auto 10px auto ;

}

[/css]

Jusqu’à l’instant, nous n’avons pas encore parlé du CSS3.0, c’est comme l’HTML avec l’XHTML, c’est plus fiable et nous donne beaucoup plus de propriétés à utiliser.

On peut à l’aide du CSS3 ajouter un arrière plan dégradé sans utiliser des images ! La même chose pour les bordures, le flou et tout ce que vous pouvez faire à l’aide de ce dernier.

Généralement, on utilise le CSS3 avec la version la plus récente de l’HTML, l’HTML 5.

Dans notre exemple, je vais ajouter des bordures à notre corps de la page (à #corps). Voici comment faire avec des explications :

[css]

#corps {

Width :900px ;

Height :auto ;

Background :#fff ;

Margin :10px auto 10px auto ;

-webkit-border-radius :4px ; G /** Pour les navigateurs utilisant le webkit, comme Google Chrome et Safari **/

-moz-border-radius :4px ; /** Pour le Firefox et autres navigateurs mozilla **/

Border-radius :4px ; /** Pour tous les navigateurs (presque, les dernières versions) **/

}

[/css]

Bien !

Passons maintenant à l’interieur du sélecteur #corps ; commençons par la partie contenu  la gauche.

Nous allons spécifier le style des titres, des images, et du texte.

Voici une feuille de style à comprendre pour le sélecteur .gauche et ses sous-éléments:

[css]

.gauche {

Width :550px ;

Padding :5px ;

Float :left ;

}

. gauche p{

Margin –bottom :5px ;

}

.gauche h1,h2,h3 {

Font-family :arial,sans-serif ;

Margin :6px 0 6px 3px;

}

.gauche h1 {

Font-size :22px ;

Font-weight :bold ;

}

.gauche h2 {

Font-size :20px ;

Font-weight :400 ;

}

.gauche h3 {

Font-size :16px ;

Color :grey ;

Font-weight :bold ;

}

.gauche img{

Padding :2px ;

Border :1px solid grey ;

Background :#fff ;

}

[/css]

G

Bien !

Passons maintenant à la zone à droite du corps du site.

CSS : La barre à droite

Nous avons défini la barre ou la zone à droite du corps par le sélecteur .droite, et je vous ai dit qu’on va l’utiliser pour insérer des menus, des formulaires  ou des boutons. Vous pouvez utiliser ce menu comme le cas de easytutoriel.com :)

En anglais, on appelle souvent cette barre, sidebar.

Je pense qu’on s’est familiarisé un peu avec le CSS. Je vous laisse le temps pour découvrir vous-même le rôle de chaque propriété :)

Le voici :

[css]

#corps .barre {
width:220px;
float:left;
background:#FAFAFA;
padding:3px;
border-left:1px solid grey;
}
.sidebar h2 {
background: #DF0101;
font-size: 17px;
color: white;
font-weight: 400;
width: 248px;
line-height: 34px;
letter-spacing: 0;
padding: 2px 0px 15px 10px;
}
[/css]

CSS : Le pied de la page

Le pied de la page, il n’y a rien de plus facile que cela !

Voici le code CSS :

[css]

#pied {

Height :50px ;

Background :black ;

Width :900px ;

Margin:0 auto;

Padding:5px;

}

#pied span {

Font-size:14px;

Color:#fff;

}

#pied a {
Color:#E6E6E6 ;
}
#pied .gauche {
float:left;
}
#pied .droit {
float:right;
}
[/css]

Résultat + Code source complet :

WAW, vous avez enfin créé votre page XHTML, que vous pouvez par la suite l’utiliser soit pour les pages de votre site (nous allons parler de ça dans les prochaines parties de cette série), soit pour un CMS (en ajoutant les variables PHP).

Voici le résultat de notre page que nous venons de créer :

Pas encore dispo.

Et voici le fichier téléchargeable (lien direct) :

Pas encore dispo.

Si l’un des liens ne marche pas avec vous , veuillez nous contacter par cette page : http://www.easytutoriel.com/contact

Merci pour votre lecture !!

Conclusion :

Le tutoriel touche à sa fin !

Espérons que ce dernier vous a apprit énormément de choses, vous a inspiré et montré quelque chose sur la façon que les webmasters faisaient pour créer des pages statiques en XHTML/CSS.

En fait, si vous avez pu créer votre page statique en suivant ce tutoriel, je vous invite à suivre nos prochains tutoriels. Je vais vous parler sur comment faire pour créer des trucs attractifs, et vous allez surement bénéficier d’un code prêt à la fin de chaque tutoriel, comme il est le cas avec ce tutoriel.

Si vous avez trouver de la difficulté durant ce tutoriel, je vous invite à poster un commentaire en bas de cet article :)

PS: Ce tutoriel n’est pas encore achevé, je suis entrain d’éditer les codes, pour une meilleure compilation.

Soufiane – Easytutoriel.com