Créer son site en XHTML et CSS [Base]

le 22 octobre 2010 • Internet • par Courroux

Ne me dîtes pas que ça ne vous est jamais venu en tête de créer votre site web, votre propre site web, et bien grâce à ces deux langages combinés (XHTML et CSS), c'est possible (enfin ça restera assez basique au niveau des fonctionnalités)

Ce tutoriel s'adresse à tous les vrais débutants qui commencent à peine à connaitre le HTML (ou XHTML) et le CSS, pas de PHP, ni de MySQL, pas de design miracle, d'animations géniales ou meme de base de données (pour créer des comptes ou un stockage dynamique), ici, juste les bases de base. Vous trouverez ailleurs sur internet des milliers d'autres tutoriels pour mieux maitriser tout ça!

Dans ce tutoriel, nous aborderons ce que sont ces langages, et vous verrez qu'à la fin de ce cours, vous saurez créer votre propre site web.

Les outils

Vous vous en doutez bien, pour créer un site web, il faut des outils, on ne crée pas un site en claquant des doigts

Donc on a besoin d'un éditeur de texte, moi j'utilise bloc note, qui vient avec Windows, sinon, étant donné que vous débutez dans ce domaine, je vous conseille Notepad++, tout simplement parce qu'il note les lignes, et qu'il colorie intelligemment les balises, sympa pour se retrouver. (Si vous etes sous Linux, Kate vous suffira amplement)

Ensuite, d'un navigateur, je sais, vous en avez déjà un (eh oui, sinon vous ne seriez pas là), mais je vous en conseille trois, moi personnellement j'utilise Firefox, Chrome et IE. Pourquoi trois? Parce que les navigateurs interprètent différemment le code XHTML et CSS, donc, il faut être sûr que notre site soit disponible sous un maximum de navigateurs.

Lire ce tutoriel pour apprendre à transmettre des fichiers à sur un serveur ftp: Logiciel FTP

Et c'est tout. On n'a besoin que de ça !

Le XHTML

Parce qu'il faut bien commencer par quelque chose, autant commencer par le plus facile, le XHTML. L'abréviation XHTML signifie: eXtensible HyperText Markup Language.

C'est un langage de contenu, c'est à dire, que c'est grâce au XHTML que vous écrirez vos textes

Les balises

Voici les balises de base en XHTML

Une page en XHTML:

Voici comment doit être le format d'une page en XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>

   </head>
 
   <body>
 
   </body>
</html>

La balise DOCTYPE donne des informations sur la version d'XHTML que l'on utilise, la balise "html" permet d'ouvrir le fichier. La balise "head" enregistre toutes les balises ayant un rapport avec l'en tête du site comme le titre du site, les balises meta, un lien vers un fichier CSS etc... La balise "body" quand à elle ouvre le corps de la page, c'est dans cette partie que se placent les menus, les paragraphes, les blocs, etc...

Pour enregistrer une page en XHTML, allez dans votre éditeur de texte, copiez et collez ce code, puis cliquez sur "Enregistrez sous", donnez un titre à votre page du genre test.html, l'extension doit toujours être en .html ou en .htm, et sous la selection du nom du fichier, quand vous enregistrez, cochez "tous les fichiers".

Ensuite allez dans mes documents, puis cliquez sur votre page XHTML, et observez le résultat. Il n'y a rien

Pourquoi? Tout simplement parce que nous n'avons rien écrit, nous avons juste présenté comment une page en XHTML doit être structuré. Ne vous inquiétez pas, nous allons bientôt passer à la pratique.

Les liens:

Les liens vous permettent de rediriger l'utilisateur, vers une autre page de votre site et/ou vers un autre site.

<a  href="http://monsite.com">Mon site</a>

Grâce à cette balise toute simple, vous pourrez placer un lien sur votre site. L'adresse du site n'apparaitra pas, et c'est juste le nom "Mon site" qui sera vu, quand l'utilisateur cliquera dessus, il sera dirigé vers l'adresse monsite.com

Les images:

Pour afficher une image sur votre site, voici ce qu'il faut faire :

<img src="monimage.gif" alt="description_image" />

Lorsque vous insérerez ceci dans une page, l'image s'affichera, et si pour une raison ou une autre, celle ci ne s'affiche pas, et bien le texte description_image s'affichera à la place.

Les paragraphes:

C'est entre les paragraphes que nous écrirons nos textes...

<p>Voici un paragraphe<br />Et voici un saut de ligne</p>

Dans cet exemple, je vous ai montré la balise de paragraphe "p" et la balise de saut de ligne "br /" qui est très pratique, car vous ne pouvez pas sautez de ligne avec la touche "enter". (enfin si, vous pourrez, mais ces sauts de ligne ne se matérialiseront pas sur votre site)

Et les autres balises:

<title>Titre de mon site</title>

Voici la balise "title" qui permet de donner un nom à son site, celle ci est à mettre entre la balise <head>.

<p><strong>Important</strong>

La balise permet de mettre un texte en valeur, en le mettant en gras.

(La balises texte fonctionne aussi)

<blink>texte clignotant</blink>

Cette balise permet de faire clignoter un texte, mais attention, n'en abusez pas trop car elle fatigue les yeux et fait fuir les visiteurs (Et surtout elle ne fonctionne pas avec tous les navigateurs)

<p><em>Texte en italique</em></p>

La balise permet de mettre un texte en italique, ce qui permet de le différencier des autres.

(La balises texte fonctionne aussi)

<p><q>Mettre une citation</q></p>

La balise <q> permet de mettre une citation, celle ci encadrera le texte situé entre la balise.

<h1>TEXTE</h1> <h2>TEXTE</h2> <h3>TEXTE</h3> <h4>TEXTE</h4> <h5>TEXT</h5> <h6>TEXTE</h6>

Ces balises servent à agrandir ou à rétrécir le texte situé entre elles.

Bien sûr, il existe des milliers d'autres balises XHTML, mais évitons de nous attarder dessus, car elles n'ont pas tous d'intérêt, mais si vous êtes curieux, faîtes une recherche sur google

Le CSS

Dans le chapitre précédant, nous avons vu les différentes balises XHTML, dans celui ci nous verrons les balises CSS !

Le CSS va de paire avec un fichier .html, il permet de caractériser certaines parties d'un fichier .html. Si vous souhaitez que tous vos liens ne soient plus noirs et soulignés, mais jaunes clignotant et en gras, vous passerez par le CSS, de meme que pour créer un menu dynamique (c'est à dire qu'il vous suffira de modifier votre menu sur votre page CSS pour qu'il se modifie sur toutes vos pages XHTML)

Nous ne passerons à la pratique que dans le prochain chapitre, celui ci vous apprendra comment créer votre site avec votre propre design

Le CSS peut s'intégrer dans une page CSS (comme le XHTML mais l'extension devient .css), ou dans le fichier en lui même (déconseillé, car si vous voulez changer la disposition des menus par exemple, et bien il faudra passer par 100 fichiers, si vous avez 100 fichiers .html, alors que dans la première méthode on modifie un seul fichier).

Mais alors, comment on intègre un fichier CSS à un fichier XHTML? C'est simple, grâce à cette balise:

       <link rel="stylesheet" media="screen" type="text/css" href="monfichier.css" />

Ce code comme je vous l'avais dit en début de chapitre, est à placer entre les balises "head" et "/head".

Un fichier CSS ressemble à ça:

nombalise1
{
   propriete1: valeur1;
   propriete2: valeur2;
   propriete3: valeur3;
}
nombalise2
{
   propriete1: valeur1;
   propriete2: valeur2;
   propriete3: valeur3;
}

Dans le fichier CSS, par exemple on peut choisir la couleur, la taille, la mise en valeur, etc... de tout texte ou bloc situé entre les balises données.

L'attribut Class

L'attribut class sert à sélectionner une portion de code dans un fichier XHTML que vous déterminez vous même, et que vous modifiez dans un fichier CSS.

Exemple:

<p class="exemple">
          sélection du texte dans un fichier XHTML
       </p>

On a mis un attribut class dans un fichier XHTML.

Puis dans votre fichier en CSS, vous mettrez ceci:

.exemple
{
   color: black;
}

On a modifié la mise en forme du texte "Sélection du texte dans un fichier XHTML", sa couleur est devenue noir.

Un avantage de l'attribut Class, c'est que l'on peut le ré-utiliser plusieurs fois dans un même fichier. Ainsi, à chaque fois que l'on ajoute l'attribut Class à texte, celui ci devient noir.

L'attribut ID

L'attribut ID a le même principe que l'attribut Class, mais contrairement à l'attribut Class, l'attribut ID est utilisable une seul fois dans un même fichier, c'est à dire que l'on ne peut pas le ré-utiliser.

Reprenons le même exemple:

<p id="exemple">
          sélection du texte dans un fichier XHTML
       </p>

Dans le fichier CSS ça devient:

#exemple
{
   color: black;
}

Les propriétés CSS:

Faire une liste des propriétés CSS serait beaucoup trop long, et trop volumineux. C'est pourquoi, je vous invite à les voir ici, le Site du Zero a fait une liste complète de toutes les propriétés CSS.

Pour consulter le tutoriel du Site du Zero, rendez vous ici: Liste des propriétés CSS

Créons notre site Web

Il est temps de passer à la pratique, ouvrez votre éditeur de texte et copiez/collez le code suivant et enregistrez le en .html. Ensuite ouvrez le fichier avec votre navigateur et observez le résultat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
   </head>
 
   <body>
 
       <!-- En tête -->
 
       <div id="en_tete">
           
       </div>
 
       <!-- Menus -->
 
       <div id="menu">        
           <div class="element_menu">
               <h3>Menu</h3>
               <ul>
                   <li><a href="#">Lien 1</a></li>
                   <li><a href="#">Lien 2</a></li>
                   <li><a href="#">Lien 3</a></li>
               </ul>
           </div>     
       </div>
 
       <!--Corps-->
 
       <div id="corps">
           <h1>Mon site</h1><br />
       
           <p>
             Bienvenue sur mon site, je vous présente ma page d'accueil créée grâce au tutoriel de kommunauty. Je suis en train d'apprendre le XHTML et le CSS, revenez plus tard, quand mon site sera entière terminer. Ou contactez moi à cette adresse: monemail@hotmail.fr <br />Merci de l'intérêt que vous portez à mon site.
           </p>
       </div>
 
       <!-- Copyright interdit d'enlever le lien kommunauty -->
 
       <div id="pied_de_page">
           <p>Copyright 2010 Mon site - Tous droits réservés - <blink>Kit graphique par <a href="http://kommunauty.fr>Kommunauty</a></blink></p>
       </div>
 
   </body>
</html>

Pour l'instant, aucun design, aucune couleur, rien que du texte, du noir et du blanc.

Ne vous inquiétez pas, je vous l'ai déjà dit, le XHTML est fait pour mettre en place le contenu de votre site web. Avant de continuer laissez moi vous expliquez ce qu'il y a dans ce fichier.

Tout d'abord, il y a les balises de début que nous avons déjà vu (DOCTYPE, HTML, BODY, HEAD). Ensuite, entre la balise HEAD, il y a la balise title, qui définit un titre à notre site, ensuite il y a la balise meta, et il y a la balise link qui enregistre notre fichier (CSS pas encore créé) dans le fichier XHTML.

Ensuite entre la balise BODY, on a découpé le contenu du site grâce à la balise <*div> (enlevez le * dans votre code, c'est que sans cet astérisque, l'article que vous etes en train de lire se mettrait à bugger severement) et aux attributs class et ID, on a placé l'en tête, le corps et le contenu. Puis on a ajouté quelques textes qui annoncent que le site n'est pas encore ouvert, avec une adresse mail pour que l'on puisse vous contacter, le menus est également déjà mis en place, mais n'est pas encore mis en valeur. Tout cela est personnalisable, vous pouvez enlever, modifier, supprimer et ajouter.

Nous allons supposer que nous créons un site d'entraide pour webmasters, comme kommunauty quoi.

Passons maintenant au fichier CSS.

/*Design réalisé par Courroux pour kommunauty*/


/*Entre les balises body*/
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px; 
background-image: url("images/fond.png");
a:link {color:#2f38de}
}

/* En tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 3px solid black;
}


/* Menu */

#menu
{
color: #FFFFFF;
float: left;
width: 120px;
margin-top: 5px;
margin-bottom: 1px;
padding: 5px;
background-image: url("images/menu.png");
background-repeat: repeat-x;
border: 3px solid black;

}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding-top: 15px;
padding-left:-20px;
margin: 0px;

}
.element_menu a
{
color: #FFFFFF;
font-size: 13px;
text-decoration: none;
font-family: "Comic Sans MS";
}
.element_menu a:hover
{
font-size: 16px;
}


/* Corps de page */

#corps
{
margin-left: 140px;
background-image: url("images/pied_de_page.png");
margin-bottom: 20px;
padding: 5px;
color: #FFFFFF;
background-repeat: repeat-x; 
border: 3px solid black;
}

#corps h1
{
height: 40px
color: #FFFFFF;
text-align: center;
font-family: Arial, "Times New Roman";
height: 40px
}

#corps h2
{
height: 30px;
background-repeat: no-repeat; 
padding-left: 30px;
text-align: center;
}


/* Pied de page */

#pied_de_page
{
padding: 1px;
clear: both;
background-image: url("images/pied_de_page.png");
text-align: center;
color: #FFFFFF;
background-repeat: repeat-x; 
border: 3px solid black;
}

Dans ce code, on met le texte en forme au tout début, on modifie ce qui se situe entre la balise BODY, ensuite, on modifie la mise en page du fichier XHTML que l'on a découpé grâce aux attributs, enregistrez le fichier "design.css", dans le même dossier que celui où vous avez placé votre page XHTML.

A mon avis, vous avez sûrement compris ce qui se passe dans le fichier design.css, étant donné que ce n'est que de l'anglais, essayez de modifier ce fichier, pour mieux comprendre le fonctionnement de chaque attribut.

Voilà, votre site est officiellement créé, et c'est un peu grâce à moi

Informations

Voici quelques informations qui vous seront utiles:

Pour en trouver des codes de CSS libres et pré-construits, beaux et efficaces, rendez vous sur le tutoriel de Kommunauty sur CSS-Tricks: Cliquez ici!
Pour voir un aperçu du site, allez ici: Cliquez ici! (l'exemple de site que nous avons créé est hébergé sur mon propre serveur)
Dans le copyright, un lien envoie vers le site kommunauty, il est strictement interdit d'enlever ce lien, tant que vous utilisez les fichiers et les images mis à votre disposition tels quel. (mais comme c'est en libre service, il suffit que vous changiez le titre et TADAAA ça devient (presque) votre œuvre rien qu'à vous)
Pour télécharger les images du thème rendez vous ici: Cliquez ici!
Le thème est utilisé à titre d'exemple, je m'excuse de sa qualité médiocre, mais il a été créé en un jour

Voilà, c'est tout, merci d'avoir lu ce tutoriel.

Créer son site en XHTML et CSS [Base]

Les outils

Le XHTML

Le CSS

Créons notre site Web

Informations

Lisez aussi...

Javascript : De la neige sur vos sites web !

Rediriger son site avec du HTML