Sommaire

1. Le HTML

   1. Introduction au HTML
   2. HTML par la pratique
   3. Parlons de la validation !
   4. Un document HTML bien construit
   5. Le type des balises
   6. div & span / listes
   7. Table Vs Div

2. les feuilles de Styles CSS

   1. Qu'est-ce que CSS
   2. Le CSS dans vos document HTML

3. Trucs & astuces : organisation du code

   1. Quels logiciels utiliser
   2. Ecrire le code

4. Conclusion

5. Annexe

   1. Adresses dont j'ai parlé
   2. Adresses utiles

6. Conclusion

Le HTML

Introduction au HTML

Le HTML est une technologie permettant d'afficher des informations à un navigateur Web, ce langage a connu un fort engouement dans les années 90. A l'époque il existait 2 navigateurs concurrents, Netscape et Internet Explorer, pour que l'un ou l'autre soit le plus utilisé et perçu comme le meilleur, chacun introduisait des balises propriétaires comprises par eux seuls, ce qui entraina à devoir faire deux versions du site pour être visible par tous ...

Ce temps la est heureusement révolu

Désormais, la plupart des navigateurs essayent d'être conformes avec les standards du web, rédigé par le W3C. Mais qu'est-ce que le W3C ? Le W3C est un organisme international qui régit les lois pour Internet, ces principaux membres sont des grands acteurs de l'univers informatique comme IBM, Microsoft, Netscape etc...

On peut retrouver toutes les recommandations (qui sont en fait des standards) sur le site du W3C (XHTML,CSS existe aussi en français : XHTML, CSS) malheureusement les infos ne sont pas toujours très simples à lire, je vous conseille cet article : Comment lire une spécification du W3C

HTML par la pratique

Il y a quelques années, le HTML était n'importe quoi, désormais les temps ont changés. Il en existe plusieurs versions : HTML 4.01, XHTML 1.0 et XHTML 1.1, les 3 sont encore d'actualités et on peut utiliser CSS dans chacun des cas. Le XHTML est un document HTML se pliant aux mêmes règles que XML, par conséquent toutes les balises doivent être fermées et en minuscule, tous les attributs doivent être entre guillemets ("), il est interdit d'utiliser des balises qui ne font pas partie du schéma spécifié. Il existe différente variante : strict et transitional, la premiere interdit toutes balises de présentation alors que la seconde en autorise quelques unes.
Pour choisir la version qui vous convient le mieux, je vous conseille cet article : Le DOCTYPE qu’il vous faut et pour en savoir plus sur les Doctype, faites un tour sur mutu-xml : DTD ou encore Toi comprendre moi ?. Je le répète : XHTML ne correspond pas à div + CSS et HTML à table ! Voir aussi : Le XHTML n'est pas le CSS.

Je choisis presque toujours du XHTML1.0 Transitional ce qui me permet d'obtenir de la rigueur tout en gardant la possibilité d'utiliser certaines balises. Je choisis cette DTD mais ce n'est pas pour autant que je ne sépare pas le maximum présentation et contenu, par conséquent 90% de mes documents seront valides XHTML 1.0 strict

Parlons de la validation !

W3C met à disposition un validateur : le validateur du W3C, il en existe aussi un autre en français (et plus joli : le W3C et le design ...) validome.org : un validateur français.
Personnelement je n'utilise presque aucun validateur! Valider un document c'est utile pour ceux qui ne connaissent pas HTML (ou alors pour les fautes de frappes :p). Si vous connaissez HTML il ne vous viendra pas à l'idée de mettre une balise "p" dans un balise "q" ...

J'ai dit presque aucun validateur, car j'en utilise quand même un : une extension pour Firefox. Cette extension permet quand on regarde la source de la page, de voir nos erreurs de syntaxe. Je trouve que les resultats sont TRES moyens, et comporte pas mal d'erreur, il nous trouve des documents non valides, valides et vice versa. Si la validité est très importante pour vous (pour pouvoir afficher fiérement le logo W3C en bas de page ;)) utilisez plûtot validome. Ce plugin permet de déceler nos fautes de frappe, et c'est tout ce que je lui demande.

Le problème : la plupart des personnes qui font du web disent connaitre HTML, mais si on leur demande d'expliquer la balise "caption" et dans quel contexte l'utiliser, je ne pense pas que beaucoup sachent répondre correctement. Pour cela il existe un très bon site en français : Outil XHTML 1.1 Hiérarchie qui vous affichera une très brève description de l'élément, le type d'élément, une liste d'attributs et les balises parents et enfants possibles. Pour l'élément "caption" on apprend ainsi que cette balise définit un titre d'un tableau, qu'elle peut être contenu seulement dans l'élément "table".

Un document HTML bien construit

Un document HTML bien construit doit être constitué d'une DTD que vous aurez choisie, de la balise HTML avec un schéma ainsi que la langue de la page, à l'intérieur de celle ci, il doit avoir obligatoirement les balises "head" et "body". Dans l'element "head" vous devez obligatoirement mettre la balise title.

le document HTML minimaliste ressemble donc à ca :

<!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>Le titre de vos documents</title>
    </head>
    <body>
    </body>
</html>

et voici un autre document HTML, comportant un feuille de style externe et un script javascript.

<!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>Hello World</title>
        <link href="styles.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="script.js" > </script>
        <--
             Il vaut mieux mettre le javascript dans un fichier externe 
             comme pour CSS, ca permet de séparer Structure et dynamisme. 
             Voici quand meme comment faire pour mettre du javascript dans le document
        -->
        <script type="text/javascript">
        <!--
            function BonjourLeMonde()
            {
                alert('bonjour le monde');
            }
        //-->
        </script>
    </head>
    <body>
        <h1>Bonjour le monde</h1>
        <p>Un petit paragraphe pour dire bonjour au monde qui s'ouvre devant moi</p>
        <p><a href="#" onclick="BonjourLeMonde()">clique ici ;)</a></p>
    </body>
</html>

Le type des balises

Comme je vous l'ai dit plus haut, il existe beaucoup de balises HTML, il n'est pas nécessaire de savoir par coeur quels éléments peuvent les contenir, ni quelles elements ils peuvent contenir, mais déjà de connaitre leurs noms, avoir une idée de quoi ils servent et également de savoir leurs types suffit.

Qu'est-ce que le type d'une balise ? il en existe principalement deux sortes (laissons de coté les tableaux avec leur type particulier) il y a : block et inline (en ligne).

Il y a de grosses différences entre les deux types : le type inline sert surtout à baliser un bout de texte à l'intérieur d'un texte, ce genre de balises n'influent pas sur l'affichage, on retrouve dans ce genre de balises, "q", "a", "span". Les balises de type bloc font un saut de ligne avant et aprés la balise, c'est le cas des balises "p", "div".

Pour plus d'explication sur les types des balises, consultez ces articles

• Boîtes bloc, boîtes en ligne et propriété display
• La structure des balises bloc et en ligne
• Block vs inline part 1
• Block vs inline part 2
• Block vs inline part 3

div & span / listes

Attention : être valide ne veut pas dire qu'on a fait un bon document. HTML est riche de balises inconnues, allez faire un tour sur le site plus haut et regardez le nombre de balises dont vous ne soupçonnez même pas l'existence ... HTML ne se résume donc pas a "table", "tr", "td" ou encore "div". Utilisez donc les balises adaptés et aussi le minimum de balisage possible.

Quand on regarde le code HTML d'un site reconstruit intelligemment, on s'aperçoit qu'il y a beaucoup de balises "div", "span" et "li", généralement il y en a d'ailleurs beaucoup trop car la sémantique du site est mal pensé.

Mais si vous regardez vos sites non plus avec l'oeil de découpeur de cellule mais avec un oeil sémantique, c'est à dire, cette partie du site c'est quoi ? une liste, un titre, un paragraphe ? Vous vous apercevrez, qu'il y a énormement de liste dans un site, généralement la page comporte un menu, qui n'est qu'une liste de lien ...

Il existe 3 balises pour définir une liste

<!-- Ceci est une liste simple !-->
<ul>
    <li>premier element de la liste</li>
    <li>deuxieme element de la liste</li>
    <li>troisieme element de la liste</li>
</ul>

<!-- Ceci est une liste numéroté !-->
<ol>
    <li>premier element de la liste</li>
    <li>deuxieme element de la liste</li>
    <li>troisieme element de la liste</li>
</ol>

<!-- Ceci est une liste de définition !-->
<dl>
    <dt>Mot à définir</dt>
    <dd>Définition du mot</dd>
    <dt>Autre Mot à définir</dt>
    <dd>Définition d'un autre mot</dd>
    <dd>Une autre définition d'un autre mot</dd>
</dl>

Le code ci dessus donnera ceci :

Pour voir ce dont les listes sont capable, aller faire un tour du coté de Listamatic : One list, many option. Ce site est une mine d'or pour pérsonaliser les listes.

La balise "div" est un élément de type block qui n'a aucune structure HTML, c'est utile pour regrouper les informations dans une page pour une éventuelle mis en forme. La balise "span" est la même chose que "div" sauf qu'il est de type inline.

Par soucis de présentation on rajoute souvent des "div" un peu partout, il n'est pas rare de voir quelque chose qui ressemble au code ci dessous pour un menu.

<div class="droite">
   <div class="menu">
      <ul class="menubo">
         <li>item1</li> 
         <li>etc...</li>
      </ul>
   </div>
</div>

Ce code est valide, mais dans 99% des cas très stupide. Il est plus simple d'écrire le code ci dessous qui revient exactement à la même chose.

<ul class="droite menu menubo">
   <li>item1</li> 
   <li>etc...</li>
</ul>

Quand vous écrivez un document HTML, il ne faut absolument pas penser à la présentation du document, il faut structurer votre document en ayant juste une vue partiel sur la disposition global de la page. le coté design sera contrôlé par CSS !

Ne rajoutez pas des balises div inutilement !!!

• XHTML : Trop de div tue les div
• Y'a des calques qui s'perdent

Table Vs Div

Avant, quand CSS n'était pas encore bien compris, on utilisait courrament des tableaux pour de la mise en page ! Désormais c'est inutile, CSS peut s'occuper de la présentation. Bien sûr comme toute nouvelle technologie cela necessite un apprentissage, abandonner les tableaux n'est pas facile, mais une fois CSS et HTML bien compris, faire un design en pur CSS sera beaucoup plus naturel. Moi je suis désormais incapable de faire un site avec des tableaux. Et puis si vous lisez la source d'une page construite 100% en tableaux et 100% en HTML bien construit, vous verrez que ce sera beaucoup plus facile à comprendre. D'accord l'utilisateur lambda ne lit pas la source d'une page, mais leur navigateur oui, et il sera plus facile, pour lui aussi, de comprendre la disposition d'une page bien construite qu'avec des tableaux imbriqués.

Quelques raisons qui vous décideront à passer à ce que j'appellerais un web intelligent

• Passer les tableaux par la fenêtre
• Les standards Web pour l'entreprise
• Les problèmes de la mise en page par tableaux
• Coup de gueule une sémantique pour google

Articles traitant du passage tableaux vers web intelligent

• Faire une mis en page sans tableaux
• Techniques et astuces pratiques pour une mise en page CSS
• Se mettre aux standards du web

Alors faut il bannir les tableaux ? absolument pas ! les tableaux sont la pour contenir des données tabulaire, des chiffres! Par exemple le résultat d'un sondage etc...

Un tableau bien formé est extrêmement complexe, regardez cet article Au Tableau ! ou alors les spécifications du W3C en français le W3C et les tableaux et vous verrez la puissance des tableaux

Les feuilles de Styles CSS

Qu'est-ce que CSS

CSS veut dire Cascading Style Sheet, cette technologie sert à la présentation d'un document HTML.

Quand on fait un document web sur un écran, il faut le voir suivant 3 aspects : la partie donnée qui sera gérée par le (X)HTML, la partie présentation : gérée par CSS, et enfin la partie comportement dont javascript se charge.

CSS est un fichier texte, qui, contrairement a tout ce qui est web ne possède pas une syntaxe XML. CSS possède de nombreux avantages.

Tout d'abord cela permet de clarifier le code HTML en enlevant toutes les balises de présentation, ceci aide donc à baisser le poids de la page. Puisque le fichier de style est identique sur tout le site, le navigateur le mettra en cache, il ne sera donc téléchargé qu'une seule fois, par conséquent les pages seront beaucoup plus rapides à charger, enfin il suffit de modifier une règle de la feuille de style, pour modifier tout votre site.

Articles traitants des avantages de CSS :

• Le XHTML et le CSS

Un fichier CSS comporte plusieurs règles. Chaque règle comporte un sélecteur et des propriétés styles.

On peut bien sûr rajouter plusieurs règles dans une feuille de style CSS. Pour mieux comprendre les sélecteurs, regardez ces articles :

• Cascade CSS et priorité des sélecteurs
• Bien comprendre la cascade
• les sélécteurs (norme W3C en français)

Vous pouvez trouver une liste des différentes propriétés CSS à ces adresses

• tableaux des differentes propriétés CSS vu par le W3C
• liste des propriétés CSS, plus détaillé et plus simple à comprendre que la norme W3C

Je n'ai pas l'intention ici d'expliquer CSS, il y a de nombreux sites qui font cela très bien. Redirigez vous vers les sites en ressources pour trouver des articles expliquant CSS.

Intégrer CSS dans vos documents HTML

Il existe 3 façons d'inclure du CSS dans vos documents, dans chacun des cas, on devra placer le code dans la balise head de la page !

En mettant directement les règles dans la page.

<head>
    <title>Titre de la page</title>
    <style type="text/css">
    <!--
    
    a img {border:0 none;}
    
    //-->
    </style>
</head>

En incluant une feuille de style externe, le fichier styles.css devra se trouver dans le même répertoire que la page

<head>
    <title>Hello World</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
 </head>

En important une feuille de style externe

<head>
    <title>Titre de la page</title>
    <style type="text/css">
    <!--
    
    @import url(styles.css)
    
    //-->
    </style>
</head>

Dans les deux derniers cas, la feuille de style ne sera téléchargée qu'une seule fois puis mise en cache par le navigateur. Voici la documentation officielle sur la règle @import

Trucs & astuces

Quels logiciels utiliser

Pour le HTML, je vous déconseille tout éditeur automatique tels que les WISIWIG, préférez les éditeurs avec lequel vous écrivez et voyez le HTML, notepad fait déjà très bien l'affaire :), personnellement j'utilise pour mes petits documents, NotePad2 il fait juste la coloration syntaxique, et je ne lui en demande pas plus. Sinon pour mes documents plus complexes ou autres, j'utilise Visual Studio 2005 qui possède de l'auto-complétion, suivant le schéma qu'on utilise, aussi bien dans le CSS que dans le HTML

Il existe bien évidemment plein d'autres logiciels dont voici une liste. Je n'ai jamais utilisé ceux là

• nvu (gratuit)
• HTML-kit (gratuit)
• Notepad++ (gratuit)
• DreamWeaver (payant)

Ecrire le code

Le formatage du code CSS

Ayez une convention dans votre façon d'écrire du CSS. Je vous présente ma convention, vous êtes bien sûr pas obligé d'avoir la même; le plus important est que vous, et votre équipe, vous vous compreniez.

Regroupez les parties du CSS, par exemple si vous traitez du menu, écrivez toutes les règles les unes au dessous de l'autre, cela vous fera gagner un temps précieux lors de la modification du style, n'oubliez pas non plus de mettre, en commentaire, en dessus de la partie, à quoi sert la partie.

Au sein même de votre bloc de code, commencez du général pour aller au particulier. Ne commencez pas par ul#menu li ul li{/*style du sous menu*/} mais plutot par ul#menu{} puis ul#menu li{} etc...

Cette convention d'ecriture à l'air d'avoir été adopté par la majorité, il y a un excellent article, qui explique cela beaucoup plus en détail : CSS syntaxe de rigueur

Commencez les id par une minuscule puis chaque début de mot par une majuscule par exemple : <ul id="menuGauche" >. Pour les classes, commencez chaque mot par une majuscule exemple : <ul class="MenuGauche" >. Et puis gardez une certaine cohérence dans le nom de vos classes, id ...

J'ai aussi pris pour habitude d'écrire mes règles sur une seule ligne. Je vois trés rarement des exemples utilisant ceci, et beaucoup de personnes le déconseilent. Comme j'ai l'air d'être le seul à pratiquer cette technique, c'est surement une mauvaise idée. En faisant cela, je vois beaucoup plus rarement quel règle s'applique à qui. Ensuite il est bon d'avoir une préférence dans l'ordre des propriétés.

Par exemple :

    ul#menu li ul{display:none;}
    ul#menu li:hover>ul{display:block;}
    ul#menu * {z-index:60000;}
    ul#menu {margin:0px 0px 10px 0px;width:200px;}
    ul#menu, ul#menu ul{padding:0px;list-style:none; ...
    ul#menu ul{margin:0px;position:absolute;top:-1px;left:199px; ...
    ul#menu ul ul{left:299px;}
    ul#menu li{position: relative;margin: 0px;padding: 0px; ...
    ul#menu li li{line-height: 20px;height: 20px;vertical-align:middle; ...
    ul#menu hr {margin:0px; padding:0px;line-height:1px;}

Je trouve que de cette manière on repère plus rapidement qui s'occupe de qui, mais encore une fois, c'est peut être pas une bonne habitude. j'ai pris l'exemple du CSS de CodeS-SourceS

Attention à ne pas mettre des div/id de partout, utilisez la cascade ! Regardons plutôt un exemple.

<div id="menu">
    <h2>Element 1</h2>
    <ul>
        <li class="Element">Menu 1</li>
        <li class="Element">Menu 2</li>
        <li class="Element">Menu 3</li>
    </ul>
    <h2>Element 2</h2>
    <ul>
        <li class="Element">Menu 1</li>
        <li class="Element">Menu 2</li>
        <li class="Element">Menu 3</li>
    </ul>
</div>

LeCSS associé pourrait être

#menu .Element{color:#F00;}

Dans cet exemple, la class Element est inutile, il faut utiliser la cascade, pour séléctionner tous les éléments.

Le code plus haut deviendra donc

<div id="menu">
    <h2>Element 1</h2>
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
    </ul>
    <h2>Element 2</h2>
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>

et le CSS associé

#menu li{color:#F00;}

Conclusion

On me demande souvent des conseils pour du HTML, CSS etc... J'ai donc fait cet article pour répondre à ces personnes, tout en essayant d'inclure quelques liens forts utiles pour débuter. J'espère que mes conseils vous aideront à tenter l'expérience d'un web plus propre.

Annexe

Adresses dont j'ai parlé

About W3C

Comment lire une spécification du W3C

Le DOCTYPE qu’il vous faut

mutu-xml : DTD

Toi comprendre moi ?

Le XHTML n'est pas le CSS

le validateur du W3C

validome.org : un validateur francais

Liste des elements disponible en XHTML 1.1

XHTML : Trop de div tue les div

Y'a des calques qui s'perdent

Passer les tableaux par la fenêtre

Les standards Web pour l'entreprise

Les problèmes de la mise en page par tableaux

Passer les tableaux par la fenêtre

Faire une mis en page sans tableaux

Coup de gueule une sémantique pour google

Techniques et astuces pratiques pour une mise en page CSS

Se mettre aux standards du web

Au Tableau !

le W3C et les tableaux (en francais)

Boîtes bloc, boîtes en ligne et propriété display

La structure des balises bloc et en ligne

Block vs inline part 1

Block vs inline part 2

Block vs inline part 3

Le XHTML et le CSS

Cascade CSS et priorité des sélecteurs

Bien comprendre la cascade

les selecteurs (norme W3C en )

tableaux des differentes propriété CSS vu par le W3C

liste des propriétés CSS, plus détaillé et plus simple à comprendre que la norme W3C

la règle @import

CSS syntaxe de rigueur

Sites utiles

En francais

Alsacreations : pas mal d'articles, des exemples et un forum

Pompages.net : Site de traductions d'articles en anglais

Openweb.eu.org : TODO

Liste des elements disponible en XHTML 1.1

Traduction de la norme W3C sur HTML en francais

Traduction de la norme W3C sur CSS en francais

En anglais

alistapart

norme officielle sur CSS2

norme officielle sur HTML

Galerie de modele de liste skinée avec CSS

List de bugs CSS des differents navigateurs

Livre

Pour finir je vous présente 3 livres :

---

---

---

Article écrit par Cyril DURAND