Intégration HTML : créez votre propre design sur le Web

Comme tous les développeurs autodidactes j'ai moi aussi commencé en téléchargent des templates gratuits, puis en bidouillant les codes, réussi à faire mon premier site. Seulement un jour il faut se lancer dans la création de son propre design pour pouvoir évoluer. Dans ce billet je n'aborderais pas toute la création graphique, seulement une partie très amusante qui est l'intégration HTML ou en d'autres terme, le fait de récupérer tout un tas d'images et les rassembler (comme un puzzle) afin de créer l'ensemble graphique de votre page.

Récupération des images

A savoir : Les images représentent un poids important lors du chargement de votre page. Des images moins lourdes feront donc une page plus rapidement chargée, il ne faut pas négliger ce détail.

Optimiser vos images

Pour optimiser vos images (et donc vos pages), il suffit d'être logique dans les découpes... C'est à dire ? Par exemple l'image de fond est souvent une image lisse ou répétitive. Dans ce cas le plus simple est de récupérer la plus petite partie de l'image répété. Exemple : sur ce blog, le fond est constitué d'une seule image de 1px de large et 600px de haut pour un poids de moins de 1Ko, celle-ci est ensuite répété sur toute la longueur de la fenêtre.
Dans le cas où vous ne pouvez pas couper de petite image (pour une bannière par exemple), il vous reste le choix de les optimiser à l'enregistrement. Je donne mon exemple sur photoshop, dans Fichier => Enregistrer pour le Web et périphériques ... , vous avez la possibilité de baisser la qualité de l'image afin de diminuer son poids (le poids et visible en bas à gauche de la fenêtre).
A titre personnel, pour le format d'image, je pense qu'il y en a simplement deux qui sont vraiment bon pour le Web, c'est le jpeg et le png.

Création de la page HTML

Vos images sont maintenant prêtes, vous les avez enregistrées dans un dossier nommé /images ou /img , on peut donc créer la page html que l'on nomme index.html (index veut dire que c'est la page affichée par défaut).
Le répertoire où se situe votre site est donc composé de cette manière :

/images
index.html
style.css *

* On reviendra plus tard sur le fichier style.css
Le fichier index.html doit ressembler à peu près à quelques chose comme ca :

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Titre  de mon site</title>
</head>
<body>
</body>
</html>

Création de la feuille de style 

Pour afficher nos images et placer les différents blocs de notre site nous allons principalement des div et du CSS.
Commençons par le début, pour pouvoir rédiger du CSS faut créer la feuille de style que l'on nomme ici style.css (voir plus haut le répertoire du site). Ce fichier ne contient aucun contenu pour le moment.
Nous allons maintenant le lier à notre page index.html avec le code suivant, dans les balises <head></head> :

<link  href="style.css" rel="stylesheet" type="text/css"  />

Intégration de la page

Une fois les deux fichiers liés entre eux, nous pouvons éditer le fichier style.css pour faire apparaître un fond sur notre page :

body {
background-image:url(images/nomDeLimage.jpg);
background-repeat:repeat-x ;
background-position:top ;
background-color:#000;
}

Alors, expliquons ce que veut dire ce code :
body : C'est le nom de la balise qui se trouve dans la page index.html, le body est le corps de la page. Tout ce qui doit être affiché dans la page doit se trouver dans le body.
background : Cela désigne le fond, dans notre cas c'est le fond du body / de la page.
image, repeat, position : Affiche une image, la répète sur l'axe X (horizontal), et la positionne par rapport au top (haut).
On peut rajouter un background-color , cela permet d'éviter une cassure à la fin de l'image, dans l'idéal la couleur de fond est la couleur du dernier pixel de l'image.
Bien entendu si voulez que votre fond soit de couleur uni, alors seul le background-color vous suffira.
Maintenant vous pouvez enregistrer et ouvrir votre page index.html dans un navigateur internet, votre fond est bien affiché :p .
Passons maintenant aux différents blocs qui nous serviront à ajouter du contenu. Pour cela il va falloir jouer entre le fichier index et style.
Premièrement nous allons créer un cadre pour centrer le site sur la page, nous utiliserons une balise div placé dans le body à laquelle on va donner un identifiant (attribut id) pour pouvoir la cibler dans la feuille de style :

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Titre de mon site</title>
</head>
<body>
<div  id="site"></div>
</body>
</html>

On a donc décidé d'appeler cette balise div "site". L’appellation d'une balise par id veut dire que cet id doit être unique, donc à partir de maintenant plus question de nommer une autre balise "site", quelle que soit la balise.

Les balises div sont en fait des blocs que l'on peut très facilement mettre en forme à l'aide de CSS. Passons donc au CSS :

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

Ici nous avons placé un # avant "site" pour signaler que la mise en forme doit s'appliquer sur l'élément de la page ayant un "id" égale à "site".
Nous verrons plus loin que l'on peut également déclarer nos style d'une autre façon.
Le width signifie la largeur du bloc (900 pixel) et le margin indique que les marges sont automatiques, donc le bloc va régler ces marge de gauche et de droite pour qu’elles soient identiques, en d'autres termes ... Le bloc va se centrer ^^ . Attention par contre cette fonction ne règle pas les marges en hauteur, une solution existe pour cela mais nous en parlerons dans un prochain tuto.
Tant que l'on est motivé, continuons avec un bloc pour la bannière en haut, côté html :

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Titre de mon site</title>
</head>
<body>
<div  id="site">
    <div id="top"></div>
</div>
</body>
</html>

On crée une balise div qui doit se trouver dans la partie centrée, et a la laquelle on donne un identifiant unique "top". Je conseille fortement de bien organiser son code car pour le moment on peut encore si retrouver sans trop de cheveux arrachés, mais à mesure que votre code vas s'allonger vous aurez du mal à savoir à quelle balise ouvrante appartient tel balise fermante... Et si vous devez compter une par une toutes les balises, c'est un mal de crane que je vous garantit :S je sais ce que c'est ... Donc autant prendre les bonnes habitudes dès le départ ^^
Maintenant le CSS :

#top {
height:150px;
background-image:url(images/banniere.jpg);
background-repeat:no-repeat;
background-position:center;
}

Donc ici il n'y a pas grand-chose à rajouter, si ce n'est le height qui signifie la hauteur de la balise.
On continu avec un bloc placé à gauche dans lequel on placera le menu :

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>Titre de mon site</title>
</head>
<body>
<div  id="site">
    <div id="top"></div>
    <div id="blocMain"></div>
</div>
</body>
</html>

Du côté du CSS nous allons utiliser une nouvelle propriété qui est le float, il nous permettra de rendre le bloc « flottant » et ainsi nous pourrons le placer un peu où ont veux (il faut savoir que par défaut la balise div sont des blocs occupant toute la largeur disponible).

#blocMain {
float:left ;
width :250px ;
}

Il n’en faut pas plus pour placer notre bloc, dans lequel on placera notre menu.
Pour réaliser le bloc qui accueillera le contenu nous allons également utiliser la propriété float.

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>Titre de mon site</title>
</head>
<body>
<div  id="site">
    <div id="top"></div>
    <div id="blocMain"></div>
    <div id="content"></div>
</div>
</body>
</html>

Et dans le style :

#content {
float :right ;
width :600px ;
}

Si on fait un petit calcul on a donc un site de 900 pixels de large, un menu de 250 pixels et un bloc content de 600 pixels, il y aura alors une marge de 50 pixels entre les deux blocs (blocMain et content).

Il nous reste plus que le bloc du bas de page à créer :

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>Titre de mon site</title>
</head>
<body>
<div  id="site">
    <div id="top"></div>
    <div id="blocMain"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>
</body>
</html>

Ici pour être que la balise « footer » ce place bien au-dessous des deux blocs mis en forme à l’aide de la propriété float, nous utilisons la propriété clear :both ;

#footer {
clear :both ;
}

Voilà nous avons fini une intégration HTML simple. On va pousser un peu plus la mise en page en ajoutant un menu et les premiers textes formatés.

Faire un menu en HTML / CSS

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>Titre de mon site</title>
</head>
<body>
<div  id="site">
    <div id="top"></div>
    <div id="blocMain">
<ul>
<li><a href=”index.html”>Accueil</a></li>
<li><a href=”presentation.html”>Présentation</a></li>
<li><a href=”tuto-html.html”>Apprendre  le HTML</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
   <div id="content"></div>
    <div id="footer"></div>
</div>
</body>
</html>

Pour réaliser des menus il est plus propre d’utiliser des listes HTML (balises ul et li), mais c’est aussi très pratique pour la mise en forme CSS.

Côté CSS, nous avons vu que le # permet de cibler un identifiant mais aussi que l’on peut cibler une balise directement par son nom (exemple : body).
Analysez le code suivant :

#blocMain ul {
list-style :none ;  /* Supprime les puces de la liste */
padding :  0px ; /* Supprime les marges intérieur */
}

Il est possible de cibler une balise dans un identifiant en les séparant d’un espace. Faite cependant attention à ce que ce soit dans le bon ordre, par exemple si on note :

ul #blocMain

Cela n’a plus du tout la même signification car sa ciblerai l’identifiant « blocMain » se trouvant dans une balise ul.

On peut continuer la mise en forme CSS :

#blocMain ul li a {
display :  block ; /* Déclare le lien comme un bloc */
padding :  3px ; /* Marge intérieur */
font-family : 'Arial',  sans-serif ; /* La police à utiliser */
font-size :  13px ; /* Taille de la police */
color :  #333 ; /* couleur du texte */
text-decoration :  none ; /* Supprime le soulignement du lien */
border-bottom :  solid 1px #333 ; /* ajoute une bordure en bas du bloc */
}
#blocMain ul li a :hover  {
color:#FF0000; /* Couleur  rouge */
}

En ajoutant :hover dans le css, on déclare que cette mise en forme devra être prise en compte au passage de la souris sur le lien.
Le menu est fini, il reste plus qu’à mettre en forme les premiers textes de la page.

<html>
<head>
<meta  http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>Titre de mon site</title>
</head>
<body>
<div  id="site">
    <div id="top"></div>
    <div id="blocMain">
<ul>
<li><a href=”index.html”>Accueil</a></li>
<li><a href=”presentation.html”>Présentation</a></li>
<li><a href=”tuto-html.html”>Apprendre  le HTML</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>
   <div  id="content">
<h1>Titre de la  page</h1>
<p>Bienvenue, vous  pouvez insérer ici <span class=texte>votre premier texte</span></p>
</div>
    <div id="footer"></div>
</div>
</body>
</html>

Dans la balise span nous avons rajouté l’attribut class, cela permet de lui donner un style CSS, un peu comme les identifiants (id) mais cette fois on n’est pas obligé de l’attribuer à une seule balise.

Au niveau du CSS c’est simple :

h1, p, span {
font-family :'Arial', sans-serif ;
}
p, span {
font-size :  13px ;
color :#333 ;
}
h1 {
color :  #FF0000 ;
}
.texte {
color :#FF0000 ;
}

Ici deux choses sont importantes, d’abord les virgules : la virgule permet d’assigner le style à différents éléments, sans pour autant que ceux-ci soient liés.
La deuxième chose importante est le point (.), pour déclarer le style associé à un attribut class il faut préciser dans le CSS le nom de la class précédé d’un point.

Ici s’arrête ce premier tutorial, si certains passage vous semble un peu flou n’hésitez pas à me le signaler dans les commentaires.