Création et hébergement d'un site

Troisième partie du tutoriel HTML & CSS pour grands débutants.

Les différents chapitres

Généralités Développement d'un site par l'exemple

Généralités

Après avoir assimilé tout ce que j'ai écrit dans les parties 1 et 2 de ce tutoriel vous savez réaliser de jolies pages web mais vous ne savez pas encore créer un site.

Un site c'est un ensemble de pages web (plus d'autres fichiers) qui est accessible par tous les internautes de la planète.

Hébergement du site

Pour que n'importe quel internaute puisse visiter votre site il faut qu'il soit hébergé. Héberger son site sur son propre ordinateur n'est pas une bonne solution. Votre ordinateur devrait fonctionner jour et nuit, vous devriez avoir une connexion internet très haut débit et vous devriez avoir des compétences techniques pointues.

La solution est donc de faire appel à une entreprise appelée hébergeur.

Cette entreprise met à votre disposition un répertoire qui contiendra les fichiers constitutifs de votre site.
Vous achèterez éventuellement un nom de domaine sinon l'url de votre site risque d'être un peu longue et donc difficile à retenir. Ainsi je m'occupe du site d'un club sportif et comme ce site est destiné uniquement aux membres du club je n'ai jamais pris la peine d'acheter pour ce site un nom de domaine. Donc l'url est : calaisplongee.free.fr
Cette url indique l'hébergeur du site : free.fr

La page d'accueil du site

La page d'accueil du site doit impérativement être à la racine du dossier et se nommer index (avec l'extension htm ou html).
Je me suis amusé (on s'amuse comme on peut) à déplacer durant quelques minutes le fichier index.htm de mon site dans un sous répertoire.
Et voila ce que l'internaute qui visitait mon site à ce moment là pouvait voir :

Oui … mon site est hébergé chez one.com (hébergement gratuit la première année).

La version locale du site

Sur votre ordinateur vous devez avoir la copie conforme du dossier chez l'hébergeur (même structure et même contenu).
Si vous voulez modifier votre site (ajouter des pages, modifier des fichiers, etc.) il faut d'abord tester en local les mises à jour puis dès que vous êtes satisfait du résultat vous pouvez alors transférer chez l'hébergeur les fichiers nouveaux et remplacer les fichiers modifiés par leur dernière version.

En général l'hébergeur met à votre disposition un logiciel de transfert. Les informaticiens parlent de logiciel FTP (File Transfert Protocol). Mais je vous conseille d'utiliser Fillezilla.

Le logiciel Fillezilla

La première fois que vous connectez au serveur de l'hébergeur via le logiciel vous devez saisir tout en haut vos paramètres de connexion qui vous ont été communiqué par l'hébergeur lors de votre inscription :

Vous pouvez demander au logiciel de stocker ces paramètres. Ainsi pour les connexions suivantes vous n'aurez plus qu'à sélectionner un serveur FTP dans la liste (si vous gérez plusieurs sites) puis cliquer sur le bouton "connexion rapide".

Observons la structure de la page du logiciel Fillezilla.

Les deux volets qui nous intéressent sont les volets 2 et 3
Dans le volet de gauche vous voyez mon disque dur et plus précisément les fichiers et dossiers à la racine du répertoire "mon_site".
Dans le panneau de droit vous verriez (si j'étais connecté à un serveur) la structure et le contenu de mon site chez l'hébergeur.

Pour transférer chez l'hébergeur les nouveaux fichiers et la nouvelle version des fichiers mis à jour c'est un jeu d'enfant. Il suffit de sélectionner dans le panneau de gauche un fichier ajouté ou modifié et ensuite d'effectuer un drag & drop vers le panneau de droite.
Un conseil. Pour savoir si vous avez (ou pas) effectué le transfert comparez les dates des dernières modifications des fichiers.

Développement d'un site par l'exemple

Le thème du site

Supposons que vous devez réaliser un site sur l'embranchement des mollusques. Vous savez sans doute qu'en biologie un embranchement se subdivise à son tour en classes.

Aspect de chaque page

Aperçus de la page d'accueil : index.htm


Structure du dossier

Mais attention un site comprend aussi des fichiers qui ne sont pas des pages. Ainsi pour éviter de dupliquer la feuille de style dans chaque page celle-ci est externalisée. C'est à dire que l'on réalise un fichier ne contenant que du code CSS. Ce fichier a pour extension .css. On parle de feuille de style externe.

Il peut aussi y avoir éventuellement un fichier contenant du code JavaScript. Ce fichier aura l'extension .js

Il y a également les images du site.

Si vous installez tous les fichiers constitutifs de votre site à la racine du répertoire ce sera vite un joyeux bazar …
Il faut organiser proprement le répertoire : créer des sous dossiers en son sein.

Sur votre ordinateur le site sera un dossier nommé "mollusques" et structuré ainsi :

index.htm

autres_pagesautres_fichiersimages
page1.htmscript.jscalmar.jpg
page2.htmstyle.cssescargot.jpg
page3.htmmoules.jpg
...

Donc à la racine du dosssier "mollusques" se trouve la page d'accueil (index.htm). Je rappelle que c'est impératif que la page d'accueil se nomme index et qu'elle soit à la racine du dossier (ou répertoire).

Cette structure peut sembler complexe et un peu disproportionnée par rapport au nombre de fichiers. Mais c'est délibéré de ma part afin de pouvoir illustrer la notion subtile de chemin relatif et puis pensez que le nombre de fichiers peut augmenter au fil du temps. Par exemple vous envisager de traiter dans le site tous les embranchements du règne animal ...

Un conseil : pour les noms de fichiers et noms de dossiers n'utilisez que des lettres minuscules et non accentuées ! Les navigateurs sont sensibles à la casse.

Structure de la page

Chaque page aura la même structure.

Structure type de chaque page

<!DOCTYPE html> <html> <head> <title></title> <meta charset = 'utf-8'> <!--lien vers feuille de style externe--> </head> <body> <header> <!--lien vers page d'accueil--> </header> <nav> <!-- liens vers les autres pages--> </nav> <article> <!--contenu différent pour chaque page--> </article> <footer> <!--lien vers un autre site --> </footer> </body> </html>

Commentaire

Vous allez dire que ça commence fort... Vous découvrez de nouvelles balises.

header, nav, article,footer sont en effet de nouvelles balises introduites par la version 5 de HTML. Ces nouveaux conteneurs sont destinés à remplacer les fameux :

<div id ='entete'>… </div> <div id ='menu'>… </div> <div id ='corps'>… </div> <div id ='pied'>… </div>

Ces nouvelles balises sont implémentées sur les navigateurs récents (sur IE à partir de la version 9).

Notez également que dans la partie HEAD nous avons une instruction que nous avons déjà rencontré :

<meta charset = 'utf-8'>

Dois-je vous rappeler que cette instruction HTML force le navigateur du visiteur à lire les pages avec le jeu de caractères UTF-8.
Donc si lesdites pages n'ont pas été encodées en UTF-8 les lettres accentuées vont apparaître de façon étrange …

Par défaut Notepad encode une nouvelle page en ISO-88591 (on dit aussi latin1). Mais vous pouvez modifier cette valeur par défaut.
Commande : Préférences/nouveau document/ cocher "UTF-8 (sans BOM)

Mais au fait pourquoi se compliquer la vie ?

Pourquoi ne pas se contenter des paramétrages par défaut : Notepad encode la page en latin1 et le navigateur lit la page avec le même système de codage.

L'inconvénient du latin1 est qu'il utilise un encodage basé sur 1 octet, soit 256 (2 puissance 8) possibilités (1 caractère = 1 octet = 8 bits ). Ainsi, dans votre page, vous ne pourrez insérer que 256 caractères différents. Avec cette norme vous ne pourrez jamais produire dans la même page les lettres accentuées françaises et les caractères spéciaux cyrilliques, pour prendre un exemple.

La feuille de style externe : style.css

Le code de ce fichier

* {font-family : arial ; text-decoration : none ; font-size : 14px; color : navy ; margin :0px ; padding :0px; } body {width : 900px ; margin: 20px auto 20px auto ; } header, nav, article, footer {margin :10px 0px 10px 0px ; background : aqua ; } header, footer {width : 100% ; float: left ;} nav {width : 29% ; float : left ; height : 600px ; } article {width :70% ; float : right ; height :600px ; overflow :auto ;} h1,h2 {width : 80% ; background : white ; margin : 10px auto 10px auto ; text-transform : uppercase ; text-align : center ; } h1{height : 30px ; font-size : 150% ; line-height : 30px ; } h2 {height : 20px ; font-size : 130% ; line-height : 20px ; } h3{font-size : 110% ; line-height : 50px; text-align : center; } p {margin : 10px ; text-align : justify ; min-height : 200px ; background : white; padding : 5px ; } nav ul li {margin : 10px ; list-style-type : none ; height : 30px ; line-height :30px ;background :white ; padding :5px ; } a:hover {color: red ; font-size : 150% ; } img.grand {display : block ; width : 500px ; margin : 10px auto 10px auto ; } img.gauche {float : left ; margin : 5px ; height : 150px ; }

Analyse du CSS

* {… ; margin :0px ; padding :0px; } : on supprime toutes les marges par défaut pour certaines balises de type block en particulier celles pour les balises titres (h1 à h6).

body {width : 900px ; margin: 20px auto 20px auto ; }: la page sera centrée horizontalement et ne va pas coller à la barre de menus du navigateur.

header, nav, article, footer {margin :10px 0px 10px 0px ; background : aqua ; } : les quatre grandes divisions de la page sont respectivement désignées par : HEADER, NAV, ARTICLE et FOOTER.
Ces quatre boîtes ont des marges haute et basse pour qu'elles ne se collent pas.

nav {width : 29% ; float : left ; height : 600px ; }
article {width :70% ; float : right ; height :600px ; overflow :auto ;}
:
les boîtes NAV et ARTICLE doivent être côte à côte donc il faut régler leur largeur afin que physiquement elles puissent tenir côte à côte et préciser que NAV doit se positionner à gauche et ARTICLE à droite. Il faut aussi gérer un éventuel débordement dans la boîte ARTICLE.

h1{height : 30px ; font-size : 150% ; line-height : 30px ; } : est-il utile de rappeler la technique pour qu'un titre soit centré verticalement dans sa boîte ?

nav ul li {margin : 10px ; list-style-type : none ; height : 30px ; line-height :30px ;background :white ; padding :5px ; } : les items de listes contenus dans la boîte NAV n'ont pas de puce mais un fond blanc; texte centré verticalement dans la boîte

a:hover {color: red ; font-size : 150% ; } : si un lien est survolé son texte devient rouge et la taille du texte augmente de 50%.

img.grand {display : block ; width : 500px ; margin : 10px auto 10px auto ; }
img.gauche { float : left ; margin : 5px ; height : 150px ; }
:
deux classes pour les images. Ainsi on peut afficher les images selon deux styles totalement différents.
Dans chaque classe on précise uniquement soit la hauteur soit la largeur d'affichage afin que l'image ne soit jamais déformée.

La page d'accueil : index.htm

Le code de la page

<!DOCTYPE html> <html><head> <title>Les mollusques</title> <meta charset = 'utf-8'> <link href ="autres_fichiers/style.css" rel = "stylesheet" > </head> <body> <header> <h1><a href ='#'>Les mollusques</a></h1> </header> <nav> <ul> <li><a href = "autres_pages/page1.htm">Les gastéropodes</a> <li><a href = "autres_pages/page2.htm">Les bivalves</a> <li><a href = "autres_pages/page3.htm">Les céphalopodes</a> </ul> </nav> <article> <img class ='grand' src = 'images/escargot.jpg' > <p> <img class = 'gauche' src = 'images/archimollusque.jpg'> Le terme Mollusque, mollis = mou, vient du ... </p> </article> <footer> <h3>Retrouvez toute la biologie marine sur : <a href="http://www.mer-littoral.org" target="_blank">http://www.mer-littoral.org</a></h3> </footer> </body> </html>

Analyse du code

Cette page n'a plus de CSS mais uniquement du HTLM puisque le CSS a été externalisé.

Dans la partie HEAD nouvelle instruction HTML :

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

Nous allons emprunter un langage très imagé pour tenter d'expliquer le concept de chemin relatif.
Considérons chaque sous dossier comme une pièce et la racine du dossier principal comme le hall.
Les pièces ne communiquent pas entre elles ! Pour passer d'une pièce à une autre il faut repasser par le hall !

Pour aller de index.htm vers style.css il faut entrer dans la pièce "autres_fichiers". Le chemin relatif est donc : autres_fichiers/style.css

Etudions les différents liens de cette page !

<h1><a href ='#'>Les mollusques</a></h1>

Ci-dessus lien vers le haut de la même page.

<li><a href = "autres_pages/page1.htm">Les gastéropodes</a></li>

Pour aller de index.htm à page1.htm il faut entrer dans "autres_pages" donc le chemin relatif est : autres_pages/page1.htm

<img class ='grand' src = 'images/escargot.jpg' >

Ci-dessus lien pour accéder à l'imageescargot.jpg à partir de la page index.htm. Il faut entrer dans le dossier "images"

<h3>Retrouvez toute la biologie marine sur : <a href="http://www.mer-littoral.org" target="_blank">http://www.mer-littoral.org</a></h3>

Ci-dessus lien vers un autre site. N'oubliez surtout pas le préfixe http:// sinon le navigateur va comprendre : "lien vers le dossier www.mer-littoral.org" du même site donc il va afficher :

La page "page1.htm"

Le code de cette page (extrait)

<!DOCTYPE html> <html><head> <title>Gastéropodes</title> <meta charset = 'utf-8'> <link href ="../autres_fichiers/style.css" rel= "stylesheet" > </head> <body> <header> <h1><a href ='../index.htm'>Les mollusques</a></h1> </header> <nav> <ul> <li><a href = "page1.htm">Les gastéropodes</a> <li><a href = "page2.htm">Les bivalves</a> <li><a href = "page3.htm">Les céphalopodes</a> </ul> </nav> …

Analyse du code

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

Donc le chemin relatif est : ../autres_fichiers/style.css

<h1><a href ='../index.htm'>Les mollusques</a></h1>

Pour aller de page1.htm à index.htm il faut remonter à la racine. Donc le chemin relatif est : ../index.htm

<li><a href = "page2.htm">Les bivalves</a><Li>

Les pages page1.htm et page2.htm sont dans le même sous dossier donc le chemin relatif est tout simplement le nom du fichier cible .

Les pages "page2.htm" et "page3.htm"

La hiérarchie des feuilles de style

Imaginons un site comprenant entre autres la page "annexes.htm" et une feuille de style externe.

Dans une feuille de style externe (fichier .css) nous avons pour le sélecteur TABLE la règle de style suivante : table {… ; border-collapse : collapse ; }

Dans la feuille de style interne (à l'intérieur du conteneur STYLE) de la page annexes.htm nous avons toujours pour le sélecteur table la règle de style suivante : table {… ; border-collapse : separate ; }

Dans les tableaux de la page annexes.htm les bordures contiguës seront-elles fusionnées ou distinctes ?

Et bien c'est comme le code de la route il y a des règles de priorité. La règle interne (contenue dans feuille de style interne) est prioritaire sur la règle contenue dans la feuille de style externe. Donc les bordures contiguës seront séparées.

Et si nous voulons que dans l'un des tableaux de notre page annexes.htm les bordures soient fusionnées ?
Et bien il suffit d'ajouter à la balise table une règle de style :
<table style ='border-collapse:collapse ;' >

La règle de style dans la balise est prioritaire sur la règle de style interne qui elle-même est prioritaire sur la règle de style externe.

Quelques améliorations possibles du site

Osez un fond avec dégradé linéaire.
Les navigateurs récents ont intégré cette nouvelle fonctionnalité apportée par la version 3 de CSS qui simplifie la mise en page. Auparavant pour avoir un fond d'écran dégradé il fallait d'abord produire une image contenant ce dégradé (avec un logiciel de dessin tel Photoshop ou Gimp) et ensuite intégrer cette image avec la méga propriété background.

Désormais il suffit de rajouter dans la règle de style relative au sélecteur BODY:
body {… ; background : linear-gradient(45deg,navy,aqua,white )
Ce qui signifie : dégradé linéaire avec un axe de 45 degrés de bleu marine vers blanc en passant par aqua.

Pour en savoir plus sur les dégradés linéaires avec CSS3 : Tutoriel CSS3

A propos des templates

Certains sites vous proposent des templates à télécharger (parfois gratuitement). Les templates sont des modèles de site.

Vous vous dites peu être que vous êtes fatigué pour rien à apprendre le HTML et le CSS puisque il existe ces fameux templates.

Détrompez vous et rassurez vous ; vous n'avez pas perdu votre temps. Ces templates sont surtout destinés à faciliter la tâche du développeur web. Un individu qui est nul en HTML & CSS sera incapable de comprendre le code et entre autres il ne saura pas produire les autres pages du site à partir de index.html. Du fait de son ignorance il sera incapable de transposer.
Puisqu' ignorant en CSS il sera tout aussi incapable de personnaliser la feuille de style externe.

J'ai téléchargé partir du site freehtml5templates.com un template. Je vous donne quelques extraits du code afin de vous montrer que l'emploi des templates suppose une bonne connaissance en HTML et CSS.

Extraits de la page index.html

<!--[if IE]> <script> document.createElement('header'); document.createElement('footer'); document.createElement('section'); document.createElement('nav'); </script> <![endif]--> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Comprenez le rôle de ce commentaire HTML ?

Extrait de la feuille de style

.navbutton { background: #e6b22e; background: -webkit-gradient(linear, left top, left bottom, from(#f2a218), to(#e6b22e)); background: -webkit-linear-gradient(top, #f2a218, #e6b22e); background: -moz-linear-gradient(top, #f2a218, #e6b22e); background: -ms-linear-gradient(top, #f2a218, #e6b22e); background: -o-linear-gradient(top, #f2a218, #e6b22e); -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: rgba(0,0,0,1) 0 1px 0; box-shadow: rgba(0,0,0,1) 0 1px 0; text-shadow: rgba(0,0,0,.4) 0 1px 0; …

Comprennez vous ce code ?
Forcément non ou plutôt pas encore ...

Cette partie est terminée. Pour compléter votre initiation à HTML & CSS il faut maintenant aborder les formulaires. Donc retour au menu ! Retour menu