Apprenez à créer votre site web avec HTML5 et CSS3

Apprenez à créer votre site web avec HTML5 et CSS3

Mis à jour le jeudi 24 juillet 2014

Enfin, nous y voilà. C'est un chapitre un peu particulier, assez différent de ce que vous avez lu jusqu'à maintenant. En fait, c'est ce que j'appelle un « TP » (Travaux Pratiques). Maintenant, vous ne pouvez plus vous contenter de lire mes chapitres à moitié endormis, vous allez devoir mettre la main à la pâte en même temps que moi.

Vous avez lu beaucoup de théorie jusqu'ici mais vous vous demandez sûrement comment font les webmasters pour créer d'aussi beaux sites. Vous vous dites que vous êtes encore loin d'avoir les connaissances nécessaires pour construire tout un site… Eh bien vous vous trompez !

Maquettage du design

Je vois d'ici le tableau. Vous vous dites « Chouette, on va créer un site complet », vous ouvrez votre éditeur de texte (Notepad++ par exemple), et vous me regardez en me demandant « Bon, par quelle ligne de code on commence ? ».

Et là, je dois justement vous arrêter. Prenez un crayon et un papier : il faut d'abord réfléchir à ce que vous voulez créer comme site. De quoi va-t-il parler ? Avez-vous un thème, un objectif ?

Je sais, par expérience, que la plupart d'entre vous « cherche juste à apprendre » pour le moment. Vous n'avez donc peut-être pas encore d'idée précise en tête. Dans ce cas, je vous suggère de créer un site pour vous présenter, pour assurer votre présence sur le Web : ce site parlera de vous, il y aura votre CV, vos futures réalisations et pourquoi pas votre blog.

En ce qui me concerne, dans ce TP, je vais réaliser le site web de notre mascotte Zozor, le célèbre âne du Site du Zéro (figure suivante). Zozor a décidé de partir en voyage à travers le monde et sa première étape sera… San Francisco ! Il veut donc créer un site web pour qu'on le connaisse et pour qu'on suive son périple à travers le monde.

L'âne Zozor, la mascote du Site du Zéro
L'âne Zozor, la mascote du Site du Zéro

La première étape consiste à maquetter le design, pour avoir un objectif du site web à réaliser. À partir de là, deux possibilités :

  • soit vous êtes des graphistes (ou vous en connaissez un) ayant l'habitude d'imaginer des designs, avec des logiciels comme Photoshop ;

  • soit vous n'êtes pas très créatifs, vous manquez d'inspiration et, dans ce cas, vous allez chercher votre inspiration sur des sites web comme freehtml5templates.com, qui vous proposent des idées de design et qui peuvent même vous donner le code HTML / CSS tout prêt !

Pour ma part j'ai fait appel à Fan Jiyong, un graphiste, qui m'a proposé le design (qui me plaît beaucoup !) que vous pouvez voir à la figure suivante.

La maquette du site web que nous allons réaliserLa maquette du site web que nous allons réaliser

Conception de la maquette : Fan Jiyong

Cette maquette est en fait une simple image du résultat qu'on veut obtenir. Je demande au graphiste de me fournir les éléments qui vont m'aider à construire le design, c'est-à-dire les codes couleurs utilisés, les images découpées (figure suivante) ainsi que les polices dont j'aurai besoin.

Télécharger les images et les polices

Image utilisateur
Image utilisateur
Image utilisateur
Image utilisateur

Quelques-unes des images « découpées » utilisées dans le design

Il ne nous reste plus qu'à réaliser ce site web ! Nous allons procéder en deux temps :

  1. Nous allons construire le squelette HTML de la page.

  2. Puis nous allons le mettre en forme et le mettre en page avec CSS.

Allez, au boulot !

Organiser le contenu en HTML

La première chose à faire est de distinguer les principaux blocs sur la maquette. Ces blocs vont constituer le squelette de notre page.

Pour créer ce squelette, nous allons utiliser différentes balises HTML :

  • les balises structurantes de HTML5, que nous connaissons : <header>, <section>, <nav>, etc. ;

  • la balise universelle <div> quand aucune balise structurante ne convient.

Comment je sais quelle balise utiliser moi ?

C'est à vous de décider. De préférence, utilisez une balise qui a du sens (comme les balises structurantes <header>, <section>, <nav>) mais, si aucune balise ne vous semble mieux convenir, optez pour la balise générique <div>.

Regardez la figure suivante pour voir ce que je vous propose comme structure.

Maquette découpée en différentes sectionsMaquette découpée en différentes sections

Toutes les balises que l'on va utiliser n'apparaissent pas sur cette maquette mais cela vous permet d'avoir une idée de l'imbrication que je propose pour les éléments.

Le HTML n'est pas vraiment la partie complexe de la réalisation du site web. En fait, si vous avez bien compris comment imbriquer des balises, vous ne devriez pas avoir de mal à réaliser un code approchant du mien :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Zozor - Carnets de voyage</title>
    </head>

    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />
                    <h1>Zozor</h1>
                    <h2>Carnets de voyage</h2>
                </div>
                
                <nav>
                    <ul>
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            
            <div id="banniere_image">
                <div id="banniere_description">
                    Retour sur mes vacances aux États-Unis...
                    <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a>
                </div>
            </div>
            
            <section>
                <article>
                    <h1><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Je suis un grand voyageur</h1>
                    <p>Lorem ipsum dolor sit amet...</p>
                    <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
                    <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
                </article>
                <aside>
                    <h1>À propos de l'auteur</h1>
                    <img src="images/bulle.png" alt="" id="fleche_bulle" />
                    <p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor" /></p>
                    <p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>
                    <p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou zBiographie, comme vous voulez !) afin que les zéros sachent qui je suis réellement.</p>
                    <p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p>
                </aside>
            </section>
            
            <footer>
                <div id="tweet">
                    <h1>Mon dernier tweet</h1>
                    <p>Hii haaaaaan !</p>
                    <p>le 12 mai à 23h12</p>
                </div>
                <div id="mes_photos">
                    <h1>Mes photos</h1>
                    <p><img src="images/photo1.jpg" alt="Photographie" /><img src="images/photo2.jpg" alt="Photographie" /><img src="images/photo3.jpg" alt="Photographie" /><img src="images/photo4.jpg" alt="Photographie" /></p>
                </div>
                <div id="mes_amis">
                    <h1>Mes amis</h1>
                    <ul>
                        <li><a href="#">Pupi le lapin</a></li>
                        <li><a href="#">Mr Baobab</a></li>
                        <li><a href="#">Kaiwaii</a></li>
                        <li><a href="#">Perceval.eu</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Belette</a></li>
                        <li><a href="#">Le concombre masqué</a></li>
                        <li><a href="#">Ptit prince</a></li>
                        <li><a href="#">Mr Fan</a></li>
                    </ul>
                </div>
            </footer>
        </div>
    </body>
</html>

Petite particularité : comme vous le voyez, tout le contenu de la page est placé dans une grande balise <div> ayant pour idbloc_page (on l'appelle aussi parfois main_wrapper en anglais). Cette balise englobe tout le contenu, ce qui va nous permettre de fixer facilement les dimensions de la page et de centrer notre site à l'écran.

Pour le reste, aucune grosse difficulté à signaler. Notez que je n'ai pas forcément pensé à toutes les balises du premier coup : en réalisant le design en CSS, il m'est parfois apparu qu'il était nécessaire d'englober une partie des balises d'un bloc <div> pour m'aider dans la réalisation du design.

Pour le moment, comme vous vous en doutez, le site web n'est pas bien beau (et encore, je suis gentil). Vous pouvez voir le résultat actuel à la figure suivante.

Apparence du site web constitué uniquement du HTML
Apparence du site web constitué uniquement du HTML

C'est en CSS que la magie va maintenant opérer.

Mettre en forme en CSS

Les choses se compliquent un peu plus lorsqu'on arrive au CSS. En effet, il faut du travail (et parfois un peu d'astuce) pour obtenir un résultat se rapprochant de la maquette. Je dis bien « se rapprochant » car vous ne pourrez jamais obtenir un résultat identique au pixel près.

Mettez-vous bien cela en tête : le but est d'obtenir le rendu le plus proche possible, sans chercher la perfection. Même si vous obtenez selon vous « la perfection » sur un navigateur, vous pouvez être sûrs qu'il y aura des différences sur un autre navigateur (plus ancien) ou sur une autre machine que la vôtre. Nous allons donc faire au mieux et ce sera déjà du travail, vous verrez.

Pour mettre en forme le design, je vais procéder en plusieurs étapes. Je vais m'occuper des éléments suivants, dans cet ordre :

  1. Polices personnalisées.

  2. Définition des styles principaux de la page (largeur du site, fond, couleur par défaut du texte).

  3. En-tête et liens de navigation.

  4. Bannière (représentant le pont de San Francisco).

  5. Section principale du corps de page, au centre.

  6. Pied de page (footer).

Les polices personnalisées

Pour les besoins du design, mon graphiste a utilisé trois polices sur sa maquette :

  • Trebuchet MS (police courante) ;

  • BallparkWeiner (police exotique) ;

  • Day Roman (police exotique).

La plupart des ordinateurs sont équipés de Trebuchet MS (quoique pas nécessairement tous, on pourrait la faire télécharger). Par contre, les deux autres polices sont un peu originales et ne sont sûrement pas présentes sur les ordinateurs de vos visiteurs. Nous allons les leur faire télécharger.

Comme vous le savez, il faut proposer plusieurs versions de ces polices pour les différents navigateurs. Dafont ne propose que le .ttf en téléchargement. Par contre, FontSquirrel propose un générateur de polices à utiliser en CSS3 avec @font-face : vous lui envoyez un .ttf, l'outil transforme le fichier dans tous les autres formats nécessaires et vous fournit même le code CSS prêt à l'emploi !

Je m'en suis servi pour générer les différentes versions des deux polices exotiques que je vais utiliser. Ensuite, dans mon fichier CSS, je rajoute ce code qui m'a été fourni par FontSquirrel pour déclarer les nouvelles polices :

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

En plus de cela, il faut bien entendu mettre à disposition les fichiers des polices. Comme vous le voyez, j'ai créé un sous-dossier polices dans lequel j'ai mis les différentes versions de mes polices.

Définition des styles principaux

On peut maintenant s'attaquer à définir quelques styles globaux pour tout le design de notre page. On va définir une image de fond, une police et une couleur de texte par défaut, et surtout on va dimensionner notre page et la centrer à l'écran.

/* Eléments principaux de la page */

body
{
    background: url('images/fond_jaune.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

Avec #bloc_page, le bloc qui englobe toute la page, j'ai fixé les limites à 900 pixels de large. Avec les marges automatiques, le design sera centré.

J'ai utilisé la propriété CSS text-transform: uppercase; (que nous n'avons pas vue auparavant) pour faire en sorte que mes titres soient toujours écrits en majuscules. Cette propriété transforme en effet le texte en majuscules (elle peut aussi faire l'inverse avec lowercase). Notez qu'on aurait aussi pu écrire les titres directement en majuscules dans le code HTML.

La figure suivante vous montre ce qu'on obtient pour le moment avec le code CSS. On est encore loin du résultat final mais on se sent déjà un petit peu plus « chez soi ».

Le fond et les limites de la page commencent à apparaître
Le fond et les limites de la page commencent à apparaître

En-tête et liens de navigation

D'après la structure que j'ai proposée, l'en-tête contient aussi les liens de navigation. Commençons par définir l'en-tête et, en particulier, le logo en haut à gauche. Nous verrons ensuite comment mettre en forme les liens de navigation.

L'en-tête
/* Header */

header
{
    background: url('images/separateur.png') repeat-x bottom;
}

#titre_principal
{
    display: inline-block;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}

#logo, header h1
{
    display: inline-block;
    margin-bottom: 0px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

Nous créons une distinction entre l'en-tête et le corps de page grâce à une image de fond. Les éléments sont positionnés en inline-block et nous personnalisons les polices et les dimensions. Rien d'extraordinaire pour le moment.

Les liens de navigation

La mise en forme des liens de navigation est un petit peu plus intéressante. Vous l'avez vu, j'ai créé une liste à puces pour les liens… mais une telle liste s'affiche habituellement en hauteur, et non en largeur. Heureusement, cela se change facilement, vous allez voir :

/* Navigation */

nav
{
    display: inline-block;
    width: 740px;
    text-align: right;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 15px;
}

nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}

La principale nouveauté est la définition CSS list-style-type: none;, qui permet de retirer l'image ronde servant de puce. Chaque élément de la liste (<li>) est positionné en inline-block, ce qui nous permet de placer les liens côte à côte comme nous le souhaitions.

Le reste des définitions ne contient rien d'extraordinaire : des dimensions, des couleurs, des bordures… Autant de choses que vous connaissez déjà. Notez que je ne trouve pas forcément les bonnes valeurs du premier coup, il me faut parfois tâtonner un peu pour trouver une apparence proche de la maquette d'origine.

La figure suivante représente le résultat que nous obtenons avec les derniers ajouts de CSS.

L'en-tête est mis en page
L'en-tête est mis en page

La bannière

Bien, passons maintenant à un exercice un peu plus difficile mais très intéressant : la bannière ! Notre maquette comporte une jolie bannière représentant le pont de San Francisco. Cette bannière, sur votre site, peut être amenée à évoluer. Ici, elle peut servir à illustrer, par exemple, le dernier billet de blog de notre ami Zozor, qui vient de visiter San Francisco.

La bannière est intéressante à plus d'un titre :

  • elle comporte des angles arrondis ;

  • la description est écrite sur un fond légèrement transparent ;

  • le bouton « Voir l'article » est réalisé en CSS, avec des angles arrondis ;

  • une ombre vient donner du volume à la bannière.

Voici le code que j'ai utilisé pour réaliser toute la bannière :

/* Bannière */

#banniere_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/sanfrancisco.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banniere_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
}

.bouton_rouge
{
    display: inline-block;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img
{
    border: 0;
}

Ce code est assez technique et riche en fonctionnalités CSS. C'est peut-être la partie la plus délicate à réaliser dans cette page.

Vous pouvez constater que j'ai choisi d'afficher l'image du pont sous forme d'image de fond dans le bloc <div> de la bannière.

J'ai aussi donné une position relative à la bannière, sans utiliser de propriétés pour en modifier le décalage… Pourquoi ? A priori, une position relative sans décalage ne sert à rien… Et pourtant, cela m'a été particulièrement utile pour placer le bouton « Voir l'article » en bas à droite de la bannière. En effet, j'ai placé le bouton en absolu à l'intérieur.

Le bouton ne devrait-il pas se placer en bas à droite de la page ?

Non, souvenez-vous ce que je vous avais dit : si un bloc est positionné en absolu dans un autre bloc lui-même positionné en absolu, fixe ou relatif, alors il se positionne à l'intérieur de ce bloc.
Notre bannière est positionnée en relatif (sans décalage). Comme le bouton est positionné en absolu à l'intérieur, il se place donc en bas à droite de la bannière !

C'est une technique particulièrement utile et puissante dans la réalisation d'un design, souvenez-vous en !

Dernier détail : pour la légende de la bannière, j'ai choisi d'utiliser la transparence avec la notation RGBa plutôt que la propriété opacity. En effet, opacity aurait rendu tout le contenu du bloc transparent, y compris le bouton « Voir l'article » à l'intérieur. J'ai trouvé préférable de rendre transparente seulement la couleur de fond plutôt que tout le bloc.

Le résultat est plutôt sympathique (figure suivante).

La bannière est mise en forme
La bannière est mise en forme

Cela en jette, vous ne trouvez pas ?

Le corps

Le corps, au centre de la page, est dans notre cas constitué d'une unique balise <section> (mais il pourrait y en avoir plusieurs, bien sûr).

Pas beaucoup de difficultés sur le corps, le positionnement du bloc « À propos de l'auteur » se fait en inline-block. On joue avec les angles arrondis et les ombres, on ajuste un peu les marges et les dimensions du texte, et nous y voilà !

/* Corps */

article, aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}

article
{
    width: 625px;
    margin-right: 15px;
}

.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}

article p
{
    font-size: 0.8em;
}

aside
{
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}

#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}

#photo_zozor
{
    text-align: center;
}

#photo_zozor img
{
    border: 1px solid #181818;
}

aside img
{
    margin-right: 5px;
}

La petite difficulté ici était de réussir à placer la flèche à gauche du bloc <aside> « À propos de l'auteur » pour donner l'effet d'une bulle. Là encore, notre meilleur ami est le positionnement absolu. La technique est la même : je positionne le bloc <aside> en relatif (sans effectuer de décalage), ce qui me permet ensuite de positionner l'image de la flèche en absolu par rapport au bloc <aside> (et non par rapport à la page entière). En jouant sur le décalage de l'image, je peux la placer avec précision où je veux, au pixel près (figure suivante) !

Le corps de la page est mis en forme
Le corps de la page est mis en forme

Le pied de page

Il ne nous reste plus que le pied de page à mettre en forme. Celui-ci est constitué de trois sous-blocs que j'ai matérialisés par des <div> auxquels j'ai donné des id pour mieux les repérer. Ces blocs sont positionnés en inline-block les uns à côté des autres.

/* Footer */

footer
{
    background:  url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
    padding-top: 25px;
}

footer p, footer ul
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}

#tweet, #mes_photos, #mes_amis
{
    display: inline-block;
    vertical-align: top;
}

#tweet
{
    width: 28%;
}

#mes_photos
{
    width: 35%;
}

#mes_amis
{
    width: 31%;
}

#mes_photos img
{
    border: 1px solid #181818;
    margin-right: 2px;
}

#mes_amis ul
{
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
    width: 48%;
    list-style-image: url('images/ico_liensexterne.png');
    padding-left: 2px;
}

#mes_amis a
{
    text-decoration: none;
    color: #760001;
}

Deux petites particularités à signaler sur le pied de page :

  • J'ai utilisé la fonctionnalité des images de fond multiples de CSS3, ce qui m'a permis de réaliser le séparateur entre le corps et le pied de page. Il est constitué de trois images : le séparateur, la petite flèche vers le haut et un léger dégradé.

  • J'ai modifié la puce de la liste « Mes amis », en bas à droite, avec la propriété list-style-image qui m'a permis d'utiliser une image personnalisée plutôt que les puces standard. Il existe de nombreuses propriétés CSS spécifiques comme celle-ci et nous ne pouvons pas toutes les voir une par une dans ce cours mais, maintenant que vous êtes des habitués du CSS, vous n'aurez aucun mal à apprendre à les utiliser simplement en lisant l'annexe listant les principales propriétés CSS.

Et voilà, notre design est terminé (figure suivante) !

Le pied de page est mis en forme
Le pied de page est mis en forme

Ah, vous pensez en avoir fini ? Il reste hélas encore un peu de travail : il faut tester notre site sur différents navigateurs. Idéalement, il vaut mieux le faire au fur et à mesure de la mise en place du design. En particulier, les anciennes versions d'Internet Explorer (IE6 à IE8) méritent qu'on s'y attarde car le résultat n'est pas forcément celui auquel on s'attendait…

Assurer la compatibilité avec IE

Depuis Internet Explorer 9 (IE9), nous n'avons plus vraiment de raisons de nous plaindre du légendaire retard d'Internet Explorer dans la gestion du CSS. Voyez vous-mêmes le résultat (figure suivante), il est très bon sur ce navigateur sans aucune adaptation nécessaire.

Le site sous IE9 : aucun problème à signaler !
Le site sous IE9 : aucun problème à signaler !

Par contre, vous risquez d'attraper quelques cheveux blancs en regardant le résultat sur les anciennes versions d'Internet Explorer.

Comment je fais pour voir le résultat sous IE6 à IE8, si je suis équipé d'IE9 ?

Je vous avais parlé d'IETester, un outil pratique mais instable (il plante souvent). Vous pouvez l'essayer pour tester votre site sur les anciennes versions d'IE.

Il y a cependant une solution plus stable et plus rapide : appuyez sur la touche F12 de votre clavier lorsque vous êtes sous IE9 et une barre dédiée aux développeurs web apparaît. Là, un menu vous permet de changer le comportement d'IE (figure suivante) afin de simuler les anciennes versions (à partir de IE7).

Changement du moteur de rendu sous IE
Changement du moteur de rendu sous IE

Là, en général, il arrive qu'on prenne très peur.
La figure suivante vous montre ce qu'on obtient en « mode IE7 ».

Le site sous IE7 : rien ne s'affiche correctement !
Le site sous IE7 : rien ne s'affiche correctement !

Avant de préparer votre valise pour aller vivre en Patagonie loin de ce monde cruel, laissez-moi vous redonner le moral avec cette phrase rassurante : tout problème a une solution (répétez cela autant de fois que nécessaire).

En fait, notre site ne rencontre que deux problèmes principaux sur les anciennes versions d'IE :

  • Le positionnement inline-block n'est pas bien géré sous IE6 et IE7, ce qui fait que la plupart de nos positionnements ne fonctionnent pas pour le moment… Mais nous avons vu qu'une astuce permet de régler le problème sans trop d'efforts !

  • Les balises structurantes de HTML5 (<header>, <nav>, <aside>…) ne sont pas gérées sous IE6, IE7 et IE8, ce qui pose de gros problèmes d'affichage… Mais, là encore, un petit script ajouté au début de votre code HTML permet de régler le problème !

Par contre, il faudra faire une croix sur certaines fonctionnalités plus récentes de CSS3 qui ne sont pas gérées sur ces vieilles versions :

  • les coins arrondis ;

  • les images de fond multiples ;

  • la transparence ;

  • les ombres.

Étant donné que ce sont des fonctionnalités liées à l'apparence, nous ne chercherons pas à les faire fonctionner sur les anciennes versions d'IE. Si toutefois vous y tenez, sachez que, là encore, des scripts existent et permettent d'émuler la plupart de ces fonctionnalités manquantes, mais cela vous demandera pas mal de travail supplémentaire et votre site risque d'être plus lent sur ces navigateurs. Du moment que le site reste lisible sur les anciennes versions d'IE, je vous recommande de ne pas vous préoccuper trop de ces problèmes.

Faire fonctionner les balises structurantes de HTML5

Nous l'avons vu, il suffit d'ajouter un simple bout de code JavaScript dans l'en-tête de son site et le tour est joué (lignes 6 à 8) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>Zozor - Carnets de voyage</title>
    </head>

Régler le positionnement inline-block

Pour gérer le positionnement inline-block, nous avons vu qu'il était nécessaire de créer une feuille de style spéciale pour les anciennes versions d'Internet Explorer. Il faut utiliser un CSS un peu différent pour que les vieilles versions d'IE « comprennent » ce qu'il faut faire.

En créant une feuille de style spéciale pour les vieilles versions d'IE (qu'on pourrait appeler style_ie.css) et en utilisant la technique ci-dessous, on peut reproduire le comportement des inline-block :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="style_ie.css" />
        <![endif]-->

        <title>Zozor - Le Site Web</title>
    </head>

La feuille de style style_ie.css contiendra des déclarations comme celle-ci :

element
{
    display: inline;
    zoom: 1;
}

Cette technique doit être appliquée sur chaque élément positionné en inline-block.

Vérifier la validité

Le W3C propose sur son site web un outil appelé le « Validateur » (« Validator » en anglais).
Le validateur est une sorte de programme qui va analyser votre code source et vous dire s'il est correctement écrit ou s'il comporte des erreurs que vous devez corriger.

Souvenez-vous : le W3C a établi des normes. Il est nécessaire de les respecter, pour qu'on soit sûr que tous les sites web parlent la même « langue ».

Il existe un validateur pour HTML et un validateur pour CSS (à mettre dans vos favoris !). Celui pour CSS comportant quelques bugs (il signale comme invalides des feuilles CSS qui sont tout à fait valides), nous ne nous y attarderons pas. Par contre, le validateur HTML va être très intéressant pour nous : voici son adresse http://validator.w3.org.

Vous pouvez valider votre page web de trois façons différentes, c'est pour cela qu'il y a trois onglets :

  • adresse (URL) ;

  • envoi du fichier .html ;

  • copier-coller du code HTML.

Pour le moment, notre site web n'est pas encore disponible sur le Web, ce qui fait qu'il n'a pas d'adresse URL. Le mieux est donc d'envoyer le fichier .html que l'on a fait ou encore de copier-coller directement le code HTML.

Si vous envoyez votre code HTML et que tout se passe bien, le validateur va vous répondre avec le message représenté à la figure suivante.

Le validateur du W3C nous informe que notre page ne comporte pas d'erreur
Le validateur du W3C nous informe que notre page ne comporte pas d'erreur

Dans ce cas, cela signifie que tout va bien et que vous avez bien construit votre page !

Malheureusement, il arrivera souvent que vous ayez des erreurs. Dans ce cas, évitez de paniquer comme cela :

AU SEEECOUUUUUUUURS !!! Ma page web n'est pas valide, je ne vais pas m'en sortir, je suis cerné par les erreurs, faites quelque chose aidez-mmmoiiiiii !

Vous aviez une belle page web, elle s'affichait bien, elle était jolie, et pourtant le validateur vous répond avec un message rouge inquiétant, en vous disant que votre page web n'est pas bien construite.

Tout d'abord, mettez-vous bien ceci en tête : ce n'est pas parce que votre page web s'affiche correctement qu'elle ne comporte pas d'erreur. Votre page web peut être toute belle et comporter beaucoup d'erreurs.

Quel intérêt de les corriger alors ?

Il faut savoir que les navigateurs « essaient » de ne pas afficher les erreurs, lorsqu'ils en rencontrent, pour ne pas perturber l'internaute. Mais rien ne vous dit que d'autres navigateurs ne vont pas se comporter bizarrement !

Avoir une page web valide, c'est donc avoir la possibilité de dormir tranquille en sachant que l'on a bien fait les choses comme il faut. Cela simplifie le travail des programmes qui lisent les pages web.
De plus, et c'est vérifié, une page web correctement construite aura plus de chances d'être mieux positionnée dans les résultats de recherche de Google, ce qui vous amènera… plus de visiteurs !

Voici une liste de conseils qui peuvent vous aider à résoudre les erreurs qui risquent de vous être signalées tôt ou tard :

  • Tous vos textes doivent en général être dans des balises de paragraphes. Il est interdit de mettre du texte directement entre les balises <body></body> sans l'avoir entouré des fameux <p></p>. Ceci est aussi valable pour les retours à la ligne <br />, qui doivent être à l'intérieur de paragraphes. C'est une erreur ultra-courante chez les débutants.

<p>Ceci est un texte correctement placé dans un paragraphe.
<br />
Les balises <br /> doivent se trouver à l'intérieur d'un paragraphe, ne l'oubliez pas</p>

Ceci est un texte en-dehors d'un paragraphe. C'est interdit.
<br />
  • Toutes vos images doivent comporter un attributalt qui indique ce que contient l'image. Si, par hasard, votre image est purement décorative (vous ne pouvez pas en trouver de description), vous êtes autorisés à ne rien mettre comme valeur pour l'attribut alt.

<!-- L'image comporte une description -->
<img src="photo.jpg" alt="Une photo de moi" />

<!-- L'image ne comporte pas de description mais a quand même un attribut alt -->
<img src="deco.png" alt="" />
  • Vos balises doivent être fermées dans l'ordre.

<!-- Les balises ne sont pas fermées dans leur ordre d'ouverture -->
<p>Texte <em>important</p></em>

<!-- Les balises sont fermées dans leur ordre d'ouverture -->
<p>Texte <em>important</em></p>

Gardez bien ce schéma en tête, beaucoup de débutants font cette erreur.

  • Si vos liens comportent des &, vous devez les remplacer par le code &amp; pour éviter toute confusion au navigateur.

<!-- Exemple d'un mauvais lien en HTML -->
<a href="http://www.site.com/?jour=15&mois=10&an=2000">

<!-- Exemple d'un bon lien en HTML -->
<a href="http://www.site.com/?jour=15&amp;mois=10&amp;an=2000">
  • Vérifiez enfin que vous n'avez pas utilisé des balises anciennes et désormais obsolètes en HTML5 (comme le vieux <frame>, la balise <marquee>

Le validateur vous dira « Element XXX undefined » (balise inconnue) ou encore « There is no attribute XXX » (attribut inconnu).

Tout le monde fait des erreurs, alors ne paniquez pas. Corrigez pas à pas votre page web jusqu'à ce que le validateur vous affiche un beau résultat en vert.

Le code final

Je mets à disposition le code final de la page web que nous avons réalisée. Vous pouvez également visualiser le résultat (figure suivante) en ligne grâce à un code web.

Apparence finale du site webApparence finale du site web

Vous pouvez aussi télécharger un fichier ZIP contenant tous les fichiers du site pour pouvoir le tester chez vous :

Télécharger les fichiers du site (500 Ko)

Exemple de certificat de réussite
Exemple de certificat de réussite