Tutoriel : codage et intégration d'un design en Xhtml strict et CSS
Afin que vous puissiez suivre ce tutoriel, nous vous invitons à découvrir le premier chapitre dedié à la découpe d'un design sous photoshop ou de télécharger directement La découpe complète prête à être codée.
Un site codé en XHTML Strict a plusieurs avantages comparé à une intégration html classique ou à base de tableau :
- Amélioration de l'accessibilité et vitesse de chargement.
- Compatibilité avec tous les navigateurs.
- Des pages moins lourdes.
- Personnalisation intégrale de l'habillage plus aisée grâce au css.
- Un code plus propre.
- Un site aux normes W3C.
- Optimisé pour le référencement de part sa structure propre et claire pour les moteurs.
- Compatibilité avec tous les navigateurs.
- Des pages moins lourdes.
- Personnalisation intégrale de l'habillage plus aisée grâce au css.
- Un code plus propre.
- Un site aux normes W3C.
- Optimisé pour le référencement de part sa structure propre et claire pour les moteurs.
1. Logiciels requis
Pour pouvoir intégrer du contenu à vos pages HTML vous aurez besoin d'un éditeur web ou de texte :
Dreamweaver
Webexpert
Notepad
Webexpert
Notepad
2. création de la page html
Ouvrez un nouveau document HTML et à la première ligne inserez-y le DOCTYPE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
Pour en apprendre un peu plus sur le doctype et connaître celui qui sera le plus adapté à vos besoins, nous vous conseillons ce site.
Entre les balises <head> </head> on ajoute la ligne qui appele le css.
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
La préparation de l'intro de notre page XHTML est terminée, voici sont aperçu avant le codage :
3. La structure XHTML
Vous devez placer vos DIV dans l'ordre d'apparition c'est à dire de haut en bas et de gauche à droite. ce contenu est à placer entre vos balises <BODY></BODY>
a. Header
b. Colonne de gauche
c. Colonne de droite
d. Pied
b. Colonne de gauche
c. Colonne de droite
d. Pied
1. Comme son nom l'indique le conteneur sert à contenir toutes les autres div cela vous permettra de donner une taille au site, de le placer d'un coté ou de l'autre de la page, etc....
2. Cette div nous servira à placer le header.
3. Nous créons ensuite la colonne de gauche ou nous placerons par la suite notre/nos menu(s).
4. Puis la colonne de droite ou il y aura le contenu principal.
5. Nous expliquerons plus bas l'utilité de cette balise.
6. Le pied.
7. On ferme la balise "conteneur".
Important ! Il est important de toujours fermer vos <div> ouverte, dans le cas contraire votre site ne sera pas valide XHTML et des problèmes d'affichages ainsi que des erreurs dans le validateur XHTML apparaîtront.
4. La structure CSS
Chaque DIV que nous avons créé sur notre page XHTML va maintenant devoir être définie dans le CSS.
Ouvrez un nouveau document CSS, Supprimez la ligne "@charset "windows-1252";".
On commence par mettre du style à la balise BODY, elle permet de définir l'arrière plan du site et de donner un style générique utile aux autres DIV, comme la police, la taille et la couleur du texte, etc..
1. Nous choisissons une couleur d'arrière plan, vous pouvez remplacer la couleur par une image.
2. Margin permet de définir l'espace extérieur d'une div par rapport à son conteneur.
L'ordre de lecture est haut - gauche - bas - droite.
3. Padding permet de définir l'espace intérieur d'une div.
L'ordre de lecture est le même que pour margin : haut - gauche - bas - droite.
4. Font-family défini La police utilisée sur votre site.
Nous mettons plusieurs polices comme cela si le visisteur ne possède pas la police choisie, le navigateur affichera la suivante et ainsi de suite.
5. Text-align défini l'alignement horizontal du texte, ici à gauche
6. Font-size défini la taille du texte.
7. Couleur des textes.
1. On centre le site par rapport à la page.
2. Width défini la largeur, le plus simple ici est de ce référer à la largeur du header qui lui, prend toute la largeur du site.
3. On défini la couleur de fond du site(couleur des colonnes).
1. width défini la largeur de la div.
2. height sa hauteur.
3. On indique le chemin de l'image et on lui dit de ne pas répéter l'image.
1. Les images de notre menu font 137px de largeur, la colonne de gauche doit donc au minimun faire cette taille, ici on augmente un peu sa taille pour ne pas que le menu soit collé au bord du site.
2. On indique que la colonne doit être descendue de 20px pour espacer un peu le header du reste du site.
3. On fait flotter la colonne à gauche. La balise float permet de sortir un élément du flux, elle est utilisée principalement pour faire des colonnes et permet également de mettre du texte à gauche ou à droite d'une image.
Exemple avec float à gauche :
On attribue un Float:left à mon image, le texte ce place à droite de l'image.
On attribue un Float:left à mon image, le texte ce place à droite de l'image.Exemple sans float:
Sans float l'image reste intégrée au flux donc le texte ce place en dessous de l'image
Sans float l'image reste intégrée au flux donc le texte ce place en dessous de l'image
Exemple avec float à droite :
On attribue un Float:right à mon image, le texte ce place à gauche de l'image.
On attribue un Float:right à mon image, le texte ce place à gauche de l'image.
1. La largeur de la DIV doit au minimum faire la même taille que l'image que nous allons utiliser pour notre cadre news 627px.
Attention ! En cumulant la taille de la colonne de gauche et de droite la taille totale ne doit pas dépasser celle du conteneur, qui est ici de 800px
2. On indique que la colonne doit être descendue de 20px pour espacer un peu le header du reste du site.
3. On déplace la colonne de droite de 150px vers la droite.
Important ! Vous devez attribuer un margin à la colonne de droite équivalent à la taille de la colonne de gauche pour la compatibilité de votre site avec firefox, si on ne le fait pas le bloc de news passera en dessous du menu sous modzilla.
1. Cette propriété a pour effet de placer le div auquel elle s'applique en dessous des div en float, se qui replace la div avec float dans le flux.
2. Rend la div invisible
1. On indique la hauteur du pied.
2. On indique le chemin de l'image.
5. Les hyperliens
Au fur et à mesure de vos ajouts de contenu ou de news, vous devrez certainement utiliser la fontion hyperlien, celle-ci n'étant pas définie dans le css, vous devrez également lui attribuer un style via le css.
Les hyperliens se forment via les balises <a></a>.
Dans le css nous mettrons donc :
1. Le style des liens.
2. Le style des liens au passage de la souris
1. Couleur des liens.
2. On ne met pas decoration.
- overline : Texte surligné.
- line-through : Texte barré.
- underline :Texte souligné
- blink : Texte clignotant (ne fondtionne que sous firefox).
- none : Texte sans rien
3. Retire la bordure pointillée d'un lien.
4. Font-weight sert à définir l'épaisseur du texte, nous le mettons en gras.
- lighter : Texte léger
- normal : Texte normal
- bold : Texte en gras
- bolder Texte en très gras
6. Le menu HTML
Nous allons placer notre menu dans la colonne de gauche, on commence par les DIV qui formeront le cadre de notre menu, il y en a trois.
1. Dans la première DIV nous écrirons le titre du menu. (ex: catégories, partenaires, etc..)
2. L'image de fond se répetera de façon à pouvoir mettre autant de lien dans le menu que nécessaire.
3. La dernière image servira de finition à notre menu.
On remarque un changement, avant nous utilisions des ID maintenant se seront des CLASS.
On utilise des ID="" pour des balises qu'on ne retrouvera qu'une seule fois dans le code :
<div id="conteneur"></div>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="pied"></div>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="pied"></div>
On utilise des CLASS="" pour les balises qu'on retrouvera plusieurs fois dans le code comme le cadre de news (plusieurs news) et le menu (menu partenaires, menu navigation, etc...)
Nous allons maintenant placer nos liens et le titre de notre menu.
Nous allons créer une liste à puce pour y placer nos liens, ce n'est pas obligatoire mais cela permet de rajouter différents effets comme une numérotation décimale, grecque, alphabétique, avec puce, sans puce etc...
Nous allons placer chaque lien entre les balises <li></li> et le tout sera placé entre les balises <ul></ul>.
Le menu est désormais intégré, vous pouvez bien sur copier/coller et répéter sa structure autant de fois que vous le souhaitez pour l'utilisation de plusieurs menus par exemple : navigation, partenaires, etc...
7. Le menu CSS
Dans cette DIV nous avons écrit le titre du menu.
1. On indique le chemin de l'image.
2. La largeur de l'image.
3. On centre l'image par rapport à son conteneur qui est la colonne de gauche.
4. On descend le texte de 8px dans l'image, pour eviter de le coller tout en haut dans l'image
5. La taile réelle de l'image est de 42px, mais nous avons inscrit 34px à cause du padding.
Si vous ne soustrayez pas le padding de la taille totale de l'image alors elle sera déformée/agrandie.
L'image fait 42px on veut lui mettre un padding de 8px pour que le texte ne colle pas le haut de l'image 42-8=34 la valeur de height sera donc de 34px 
ici nous n'avons pas soustrait le padding, donc la div menu_haut fait 42+8=50, l'image étant plus petite les 8px manquants sont remplacés par un espace
En conclusion le padding s'ajoute à la somme totale de la div si vous ne le soustrayez pas dans height.
6. Dans le BODY nous avons spécifié que tous les textes du site devront être alignés à gauche, ici nous allons centrer le titre.
7. Nous agrandissons un peu la taille du titre.
8. Nous le mettons le texte en gras.
1. On indique le chemin de l'image.
2. Nous appliquons le même calcule que pour menu_haut nous soustrayons le padding de la largeur total de l'image, 137px-10px=127px.
3. On centre l'image par rapport à son conteneur la colonne de gauche.
4. Nous atribuons un padding sur les cotés pour ne pas que le texte touche les bords du menu.
5. La couleur du texte.
1. On indique le chemin de l'image.
2. La largeur de l'image.
3. On centre l'image par rapport à son conteneur la colonne de gauche.
4. la hauteur de l'image.
ul = Pour positionner l'entierté du menu plus facilement, lui mettre une largeur, etc....
1. Malgré le padding de menu_fond le menu n'est pas suffisamment à droite il déborde encore un peu sur le noir, on le déplace donc un peu à droite.
2. On met les marges extérieurs à 0.
3. On choisit une taille adéquate pour que le menu ne dépasse pas du cadre rouge.
4. On diminue la taille du texte.
ul li = Les balises le ne sont pas conçues spécialement pour abriter des liens, nous pouvons y mettre du texte, c'est pour cela qu'il faut aussi leurs dédier une ligne dans le css.
1. On met le texte en gras.
2. On ne met pas de décoration sur le texte.
3. list-style-type permet de spécifier le type de la liste, si la liste est ordonnée ou si la liste est non ordonnée (à puce).
ul li a = permet de mettre un effet sur les liens sur les liens.
1. La couleur du texte.
2. Retire la bordure en pointillé d'un lien.
ul li a:hover = Défini l'effet sur les liens au passage de la souris
1. Au passage de la souris on change la couleur des liens
8. Le(s) cadre(s) de news XHTML
Passons maintenant à l'intégration de notre cadre de news, il va être composé de trois DIV situées dans la colonne de droite.
Nous allons maintenant mettre notre texte dans chaque balise adéquates.
1. Le titre de notre news.
2. Le texte.
3. Nous pouvons rajouter des informations dans l'image qui termine notre cadre de news. (qui a posté, à quelle heure, etc...)
Comme pour le menu vous pouvez copier/coller le code du cadre autant que nécessaire pour l'affichage de plusieurs news.
9. Le(s) cadre(s) de news CSS
On déclare les DIV du cadre dans le css.
1. Chemin de l'image.
2. Largeur de l'image auquelle on soustrait le padding de 7px.
3. On centre le cadre de news.
4. Padding de 3px par rapport au bord supérieur et de 7px par rapport au côté gauche.
5. Longueur de L'image auquel on soustrait le padding de 3px.
6. On met le texte en gras.
1. Chemin de l'image
2. Largeur de l'image auquelle on soustrait le padding de 20px.
3. On centre le cadre de news.
4. Pour éviter que le texte ne se colle aux bordures du cadre nous attribuons un padding de 10px de chaque coté.
1. Chemin de l'image.
2. Largeur de l'image auquelle on soustrait le padding de 7px.
3. On centre le cadre de news.
4. Padding de 7px par rapport à au bord supérieur et de 10px de chaque coté.
5. hauteur de l'image moins le padding de 7px.
6. On diminue la taille de la police.
7. On aligne le texte à droite.
10. Le pied HTML & CSS
Le pied a déjà en partie été codé dans la création de la structure, nous allons maintenant lui ajouter un style supplémentaire pour le texte.
On ajoute notre copyright entre la balise <div id="pied"></div>
<div id="pied">
©<a href=""> Votresite.com</a> | Design <a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits graphiques gratuits" > Kit graphique </a> | <a href="http://validator.w3.org/check?uri=referer" onclick="window.open(this.href); return false;">XHTML strict</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" onclick="window.open(this.href); return false;">CSS3</a>
</div>
©<a href=""> Votresite.com</a> | Design <a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits graphiques gratuits" > Kit graphique </a> | <a href="http://validator.w3.org/check?uri=referer" onclick="window.open(this.href); return false;">XHTML strict</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" onclick="window.open(this.href); return false;">CSS3</a>
</div>
Passons au CSS :
On reprend la ligne #pied
1. On modifie la taille par rapport au padding (-20px).
2. Le chemin de l'image.
3. On attribue un padding de 20px pour ne pas coller le texte au bord supérieur de l'image.
4. Couleur du texte blanc.
5. Taille du texte.
6. On centre le texte.
Nous avons ajouté des liens dans le pied, si nous ne leur associons pas un style se sera celui par defaut (a) qui sera appliqué.
Pour appliquer un style à une balise spécifique, il faut la précéder de sa balise parente.
Exemple:
Partie HTML : <a href="monimage.png">Mon lien</a>
Partie CSS : a {color:#FFF,text-decoration:underline}
Tous les liens du site seront blancs et soulignés.
Nous voudrions par exemple que les liens du pied soient rouges et non soulignés.
Nous allons donc précéder la balise </a> de sa balise parente <div id="pied">.
Ce qui dans le css nous donne :
#pied a {color:#C00000;text-decoration:none}
Les liens du pied seront rouge et sans decoration.
Partie HTML : <a href="monimage.png">Mon lien</a>
Partie CSS : a {color:#FFF,text-decoration:underline}
Tous les liens du site seront blancs et soulignés.
Nous voudrions par exemple que les liens du pied soient rouges et non soulignés.
Nous allons donc précéder la balise </a> de sa balise parente <div id="pied">.
Ce qui dans le css nous donne :
#pied a {color:#C00000;text-decoration:none}
Les liens du pied seront rouge et sans decoration.
1. Couleur des liens.
2. Pas de décoration
3. Retire la bordure en pointillé d'un lien.
4. Police normal.
1. Couleur des liens au passage de la souris.
11. Quelques balises
Tout au long de ce tutoriel vous avez pu constater que certaines balises que vous aviez l'habitude d'utiliser étaient obsolètes ou non-adaptées aux normes W3C, le but du codage XHTML est avant tout d'alleger les pages web et de rendre le code propre et compatible avec un maximum de navigateurs.
Quelques exemples de balises que l'on utilisera plus car elles ne sont pas valides XTML :
<b></b>
<i></i>
<u></u>
<strong></strong>
<marquee></marquee>
<i></i>
<u></u>
<strong></strong>
<marquee></marquee>
Quelques exemples de balises à adapter:
target="_blank" = onclick="window.open(this.href); return false;"
Certaines balises doivent maintenant être fermées pour passer le validateur : "IMG", "INPUT","HR", "BR" nous devons rajouter un / à la fin.
<input type="text" value="" />
<img src="monimage.jpg" alt="" />
<hr />
<br />
<img src="monimage.jpg" alt="" />
<hr />
<br />
12. Aperçu final du codage et conclusion
Voici l'aperçu final de votre codage CSS et de votre page Xhtml Strict :
Code source final du style.css
body, html {background:#232323;margin:0;padding:0;font-family:Verdana, Arial;text-align:left;font-size:12px;color:#FFF}
#conteneur {margin: 0 auto;width:800px;background:#FFF}
#header {width:800px;height:141px;background: url(images/header.png) no-repeat;}
#left {width:150px;padding:20px 0 0 0;float:left}
#right {width:640px;padding:20px 0 0 0;margin:0 0 0 150px}
.clear {clear:both;visibility:hidden}
#pied {height:22px;background:url(images/pied.png);padding:20px 0 0 0;color:#FFF;font-size:11px;text-align:center;}
#pied a {color:#FFF;text-decoration: none;outline:none;font-weight:normal;}
#pied a:hover {color:#bf191b}
/*News*/
.news_haut {background:url(images/news_haut.png);width:620px;margin:0 auto;padding:3px 0 0 7px;height:27px;font-weight:bold}
.news_fond {background:url(images/news_fond.png);width:607px;margin:0 auto;padding:0 10px 0 10px}
.news_bas {background:url(images/news_bas.png);width:607px;margin:0 auto;padding:7px 10px 0 10px;height:18px;font-size:10px;text-align:right}
/*Menu*/
.menu_haut {background:url(images/menu_haut.png);width:137px;margin:0 auto;padding:8px 0 0 0;height:34px;text-align:center;font-size:14px;font-weight:bold}
.menu_fond {background:url(images/menu_fond.png);width:127px;margin:0 auto;padding:0 5px 0 5px;color:#FFF}
.menu_bas {background:url(images/menu_bas.png);width:137px;margin:0 auto;height:23px}
ul {margin:0 0 0 5px;padding:0;width:115px;font-size:10px}
ul li {font-weight:bold;text-decoration:none;list-style-type: none;}
ul li a {color: #FFF;outline:none;}
ul li a:hover{color: #191919}
/*Class générique*/
a {color:#FFF;text-decoration:none;outline:none;font-weight:bold}
a:hover {color:#191919}
#conteneur {margin: 0 auto;width:800px;background:#FFF}
#header {width:800px;height:141px;background: url(images/header.png) no-repeat;}
#left {width:150px;padding:20px 0 0 0;float:left}
#right {width:640px;padding:20px 0 0 0;margin:0 0 0 150px}
.clear {clear:both;visibility:hidden}
#pied {height:22px;background:url(images/pied.png);padding:20px 0 0 0;color:#FFF;font-size:11px;text-align:center;}
#pied a {color:#FFF;text-decoration: none;outline:none;font-weight:normal;}
#pied a:hover {color:#bf191b}
/*News*/
.news_haut {background:url(images/news_haut.png);width:620px;margin:0 auto;padding:3px 0 0 7px;height:27px;font-weight:bold}
.news_fond {background:url(images/news_fond.png);width:607px;margin:0 auto;padding:0 10px 0 10px}
.news_bas {background:url(images/news_bas.png);width:607px;margin:0 auto;padding:7px 10px 0 10px;height:18px;font-size:10px;text-align:right}
/*Menu*/
.menu_haut {background:url(images/menu_haut.png);width:137px;margin:0 auto;padding:8px 0 0 0;height:34px;text-align:center;font-size:14px;font-weight:bold}
.menu_fond {background:url(images/menu_fond.png);width:127px;margin:0 auto;padding:0 5px 0 5px;color:#FFF}
.menu_bas {background:url(images/menu_bas.png);width:137px;margin:0 auto;height:23px}
ul {margin:0 0 0 5px;padding:0;width:115px;font-size:10px}
ul li {font-weight:bold;text-decoration:none;list-style-type: none;}
ul li a {color: #FFF;outline:none;}
ul li a:hover{color: #191919}
/*Class générique*/
a {color:#FFF;text-decoration:none;outline:none;font-weight:bold}
a:hover {color:#191919}
Code source final de index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="left">
<div class="menu_haut">Menu</div>
<div class="menu_fond">
<ul>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
</ul>
</div>
<div class="menu_bas"></div>
</div>
<div id="right">
<div class="news_haut">Integer nisl orci, lobortis a porttitor.</div>
<div class="news_fond">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut erat nulla, porta eget faucibus non, gravida quis tortor. Curabitur sit amet nulla non ipsum egestas scelerisque. Aliquam erat volutpat.
Donec sollicitudin velit porta est aliquam id dictum augue iaculis. Morbi malesuada, purus ut dictum auctor, augue ipsum mattis lorem, quis iaculis lorem lacus a turpis. Curabitur vestibulum metus vel leo dignissim rhoncus. Etiam semper condimentum iaculis. Pellentesque ac nunc eget tortor lobortis consequat. Nullam pretium gravida lectus commodo vestibulum. Sed suscipit, dolor non iaculis adipiscing, justo nulla porttitor nulla, tincidunt fermentum dui nisi in dolor.
Phasellus congue, nulla in semper ultrices, purus mauris posuere mi, vitae posuere massa orci et risus. Vivamus tincidunt porta urna et varius. Maecenas nec odio sit amet dui tristique aliquam. In hac habitasse platea dictumst.
</div>
<div class="news_bas">Posté le 20/07/2010 à 14h40 par ADMIN <a href="">lire la suite</a> </div>
</div>
<div class="clear"></div>
<div id="pied">
©<a href=""> Votresite.com</a> | Design <a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits graphiques gratuits" > Kit graphique</a> | <a href="http://validator.w3.org/check?uri=referer" onclick="window.open(this.href); return false;">XHTML strict</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" onclick="window.open(this.href); return false;">CSS3</a>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css" title="Défaut" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="left">
<div class="menu_haut">Menu</div>
<div class="menu_fond">
<ul>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
<li><a href="#" title="">Rubrique</a></li>
</ul>
</div>
<div class="menu_bas"></div>
</div>
<div id="right">
<div class="news_haut">Integer nisl orci, lobortis a porttitor.</div>
<div class="news_fond">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut erat nulla, porta eget faucibus non, gravida quis tortor. Curabitur sit amet nulla non ipsum egestas scelerisque. Aliquam erat volutpat.
Donec sollicitudin velit porta est aliquam id dictum augue iaculis. Morbi malesuada, purus ut dictum auctor, augue ipsum mattis lorem, quis iaculis lorem lacus a turpis. Curabitur vestibulum metus vel leo dignissim rhoncus. Etiam semper condimentum iaculis. Pellentesque ac nunc eget tortor lobortis consequat. Nullam pretium gravida lectus commodo vestibulum. Sed suscipit, dolor non iaculis adipiscing, justo nulla porttitor nulla, tincidunt fermentum dui nisi in dolor.
Phasellus congue, nulla in semper ultrices, purus mauris posuere mi, vitae posuere massa orci et risus. Vivamus tincidunt porta urna et varius. Maecenas nec odio sit amet dui tristique aliquam. In hac habitasse platea dictumst.
</div>
<div class="news_bas">Posté le 20/07/2010 à 14h40 par ADMIN <a href="">lire la suite</a> </div>
</div>
<div class="clear"></div>
<div id="pied">
©<a href=""> Votresite.com</a> | Design <a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits graphiques gratuits" > Kit graphique</a> | <a href="http://validator.w3.org/check?uri=referer" onclick="window.open(this.href); return false;">XHTML strict</a> & <a href="http://jigsaw.w3.org/css-validator/check/referer" onclick="window.open(this.href); return false;">CSS3</a>
</div>
</div>
</body>
</html>
Chaque personne à une manière différente de coder, des astuces, des raccourcis, ce tutoriel vous donne juste un aperçu des possibilités du codage XHTML couplé au CSS en étant le plus simple et le plus détaillé possible.
Il y de nombreux points qui non pas été abordés, de nombreuses balises que vous pouvez rajouter pour embellir votre site, c'est à vous maintenant de vous perfectionner via les nombreux tutoriaux existants sur la toile.
Outil indispensable pour vos vérifications les Validateur XHTML et Validateur CSS vous seront très utiles, ils vous indiqueront vos erreurs, et vous suggérons les corrections à apporter à votre codage.
Si vous avez apprécié ce tutoriel partagez-le sur Twitter Merci.
Le 08/09/11 à 3:54
merci encore justement le plus qu'il me fallait
Le 22/01/12 à 1:03
très bon tuto
Le 03/02/12 à 5:32
Merci encore à vous ! Super tuto ! Bien expliqué ! Que du bonheur depuis que je travaille avec vos kits !! :)
*Commentaire complémentaire de qualité = Lien DoFollow assuré !