Production et hébergement d'un site

Après avoir assimilé tout ce que j'ai écrit dans les chapitres précédants vous savez écrire des page HTML mais vous ne savez pas encore créer un site c'est à dire relier entre elles différentes pages.
Un site c'est un ensemble de pages Web (plus d'autres fichiers) qui est accessible par tous les internautes de la planète.

Production d'un site pour ordinateurs portables et de bureau

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.

Donc à la racine du dossier "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 avec pour extension : htm / htlm /php.
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.

<!DOCTYPE html> <html> <head> <title></title> <meta charset = 'utf-8'> <!--chargement de la 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 d'autres sites --> </footer> </body> </html>

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 apparaitre de façon étrange ...

Par défaut Notepad encode une nouvelle page en ANSI mais vous pouvez modifier cette valeur par défaut.
Commande : Paramètres / 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 ANSI et le navigateur lit la page avec le même système de codage.
L'inconvénient de l'ANSI est qu'il encode chaque caractère avec un 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 une 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 ci-dessous (uniquement du CSS) :

* {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 : 5px ; text-align : justify ; padding : 5px ;} nav a {display : block ; height : 30px ; line-height : 30px; background : white ; margin : 10px ; text-decoration : none ; text-align : center; } a:hover {color: red ; font-size : 150% ; } img.grand {display : block ; width : 80% ; margin : 10px auto 10px auto ; } img.gauche {float : left ; margin : 5px 1% 5px 1% ; width : 30% ; }

Analyse de cette feuille de style

* {… ; margin :0px ; padding :0px; } : on supprime toutes les marges par défaut pour certaines balises de type block en particulier celles attribuées aux 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 les balises HEADER, NAV, ARTICLE et FOOTER.
Ces quatre boites 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 boites NAV et ARTICLE doivent être côte à côte
Donc il faut régler leur largeur afin que physiquement elles puissent tenir de front et préciser que NAV doit se positionner à gauche et ARTICLE à droite.
Il faut aussi gérer un éventuel débordement dans la boite ARTICLE (overflow : auto).

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

nav a {display : block ; height : 30px ; background : white ; margin : 10px ; text-decoration : none ; text-align : center; } : les liens contenus dans une boite NAV deviennent des boites à fond blanc ; la légende débarassée du soulignement est centrée horizontalement et verticalement !

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 : 80% ; margin : 10px auto 10px auto ; }
img.gauche { display : inline ; float : left ; margin : 5px 1% 5px 1% ; height : 30% ; }
: deux classes pour les images. Ainsi on peut afficher les images selon deux styles totalement différents en fonction de la classe associée : une de front avec centrage horizontal OU jusqu'à trois images de front sous forme de miniatures.

Notez que la largeur des boites et images est exprimée non pas en pixels mais en pourcentage (de la largeur du conteneur). Il s'agit d'une bonne habitude à prendre dans le cadre du "responsive design" (adpatation du site à tous les types d'écrans : du smartphone à l'écran de bureau).

La page d'accueil : index.htm

Le code de la page ci-dessous :

<!DOCTYPE html> <html><head> <title>Les mollusques</title> <meta charset = 'utf-8'> <link href ="style.css" rel = "stylesheet" > </head> <body> <header> <h2><a href ='#'>Les mollusques</a></h2> </header> <nav> <a href = "page1.htm">Les gastéropodes</a> <a href = "page2.htm">Les bivalves</a> <a href = "page3.htm">Les céphalopodes</a> </nav> <article> <h1>Les mollusques</h1> <img class ='grand' src = 'images/mollusques.jpg' > <p>Il s'agit d'un embranchement essentiellement aquatique même s'il existe quelques espèces de mollusques terrestres tels l'Escargot et la Limace. <br>Les mollusques sont des animaux qui ont un corps mou protégé par un manteau qui sécrète souvent une coquille. <br>Les mollusques n'ont pas de pattes mais disposent d'un large pied pour le déplacement (ou l'enfouissement). <br>Ils ont une langue râpeuse (dotée de dents) : la radula.</p> <br>Ci-dessous radula d'un Ormeau et schéma de fonctiodnnement de la radula : <br><img class ="gauche" src ="images/radula.jpg" /> <img class ="gauche" src ="images/radula.png" /> </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

Charger la feuille de style externe

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 ="style.css" rel = "stylesheet" >

Comme le fichier cible (style.css) est dans le même dossier que le fichier source (index.htm) le chemin relatif est tout simplement le nom du fichier cible.

Les liens hypertextes

Examinons maintenant quelques liens hypertextes dans la partie BODY !

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

Le seul attribut obligatoire de la balise A est href.
Si la valeur de cet attribut est "#" alors lien vers le haut de la même page.

A partir de n'importe qu'elle page il faut pouvoir accéder aux autres pages. Il y a donc dans chaque page une zone de navigation.

<nav> <a href = "page1.htm">Les gastéropodes</a> <a href = "page2.htm">Les bivalves</a> <a href = "page3.htm">Les céphalopodes</a> </nav>

Pour aller de index.htm à page1.htm on reste dans le dossier principal donc le chemin relatif est tout simplement le nom de la page cible.

<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:// ou https:// sinon le navigateur va comprendre lien vers le dossier "www.mer-littoral.org" du même site donc il va afficher :

Notez aussi la présence de l'attribut target ="_blank" donc le site va s'afficher dans un nouvel onglet. Le visiteur pourra donc revenir sur votre site en cliquant de nouveau sur le premier onglet.

Insérer des images

Pour les balises IMG le seul attribut obligatoire est scr.
La valeur de cet attribut est le chemin relatif de la page vers l'image.

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

Ci-dessus instruction pour afficher l'image mollusques.jpg dans la page d'accueil.
Les images sont dans le sous-dossier "images" donc le chemin relatif est "images/nom image"

Attention il existe plusieurs formats d'images matricielles : jpg, gif, png.

La page "page1.htm"

Le code de cette page :

<!DOCTYPE html> <html> <head> <title>gastéropodes</title> <meta charset = 'utf-8'> <link href ="style.css" rel = "stylesheet" > </head> <body> <header> <h2><a href ='index.htm'>Les mollusques</a></h2> </header> <nav> <a href = "page1.htm">Les gastéropodes</a> <a href = "page2.htm">Les bivalves</a> <a href = "page3.htm">Les céphalopodes</a> </nav> <article> <h1>Les Gastéropodes</h1> <p>Les gastéropodes sont des brouteurs grâce à leur langue râpeuse (radula). Mais attention n'en déduisez pas qu'ils sont tous herbivores. Car si certains broutent des algues, d'autres broutent des animaux fixés (éponges, cnidaires, etc.). <p>Ci-dessous schéma anatomique d'un gastéropode : <img src ="images/gasteropode_schema.png" class ="grand" > <p>Galerie photos de quelques gastéropodes marins : bigorneau, buccin et nasse. <p><img class ="gauche" src ="images/bigorneau.jpg" > <img class ="gauche" src ="images/buccin.jpg" ><img class ="gauche" src ="images/nasse.jpg" > </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

Retour accueil

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

Ci-desus lien pour retourner à la page d'accueil (index.htm).
Les quatre pages du site sont dans le même sous dossier donc le chemin relatif est tout simplement le nom du fichier cible.

Styler l'affichage des images

Selon que l'on applique à une image la classe "grand" ou la classe "gauche" la mise en page est totalement différente.
Avec la classe "grand" l'image est une boite qui est centrée horizontalement.
Avec la classe "gauche" les images se positionnent côté à côte en partant de la gauche.

Les autres pages du site

Leur code est presque identique à "page1.htm".
Ce qui change est le contenu de la boite ARTICLE !

Testez ce code

Visitez le site paramétré pour grands écrans !

Attention ce site est conçu pour les écrans ayant plus de 900 pixels de large donc interdit l'internet mobile ..
Essayez de le visualiser à partir de votre smartphone. C'est la "cata" : c'est tellement affiché petit que c'est illisible et si vous zoomez alors la page est alors rognée.

La version du site pour tous les types d'écrans

Sur un petit écran (smartphone ou tablette en mode "portrait") on ne peut plus envisager que les boites NAV et ARTICLE soient de front ; elles doivent être les unes en dessous des autres. On ne peut s'offrir le luxe de marges car les pixels sont rares donc précieux.

La version 3 de CSS introduit les medias queries (ou requêtes de média). Grâce à cet outil il devient simple d'adapter un site aux petits écrans.

La nouvelle version de la feuille de style

@media screen { 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 : 5px ; text-align : justify ; padding : 5px ;} nav a {display : block ; height : 30px ; line-height : 30px ; background : white ; margin : 10px ; text-decoration : none ; text-align : center; } a:hover {color: red ; font-size : 150% ; } img.grand {display : block ; width : 80% ; margin : 10px auto 10px auto ; } img.gauche {float : left ; margin : 5px 1% 5px 1% ; width : 30% ; } } @media screen and (min-width: 900px) { * {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 ;} } @media screen and (max-width: 899px) { * {font-family : arial ; text-decoration : none ; font-size : 10px; color : navy ; margin :0px ; padding :0px; } body {width : 100% ; } header, nav, article, footer {background : aqua ; margin-top : 10px ; margin-bottom : 10px; } header, footer,nav, article {width : 100% ; float: left ;} article {height : 300px; overflow : hidden ; } article:hover {height : auto ; } }

Des explications s'imposent !

Une feuille de style structurée

Modification du code HTML des pages

Attention il faut aussi amender un peu chaque page !
Dans la partie HEAD de chaque page il faut rajouter l'instruction ci-dessous :

<meta name="viewport" content= "width=device-width, user-scalable=yes" >

A défaut de cette instruction le smartphone se prend pour un ordinateur.
Vous pouvez vous contenter de copier cette instruction pour l'insérer dans vos pages mais si vous voulez comprendre lisez l'encadré ci-dessous !

Testez la version adaptative du site

Utilisez votre smartphone ou votre tablette pour la visite.
Une tablette en mode "paysage" a plus de 900px de large ; cette même tablette en mode "portrait" a moins de 900px. Donc à partir d'une tablette vous pouvez observer les deux modes d'affichage de chaque page (boites NAV et ARTICLE de front OU l'une sous l'autre) selon l'orientation. En mode "portrait" pensez à survoler ARTICLE pour afficher tout le contenu.
A défaut vous pouvez simuler un smartphone à partir de votre PC ; il suffit de réduire la largeur de la fenêtre d'affichage !
Visitez le site adaptatif !

Hébergement du site pour le rendre public

Sur votre PC vous avez "en local" un beau site qui de plus est adaptatif (s'affiche correctement sur tous les types d'écrans). Mais pour l'instant vous seul pouvez le consulter puisqu'il n'est pas "en ligne".

Pour que n'importe quel internaute puisse visiter votre site il faut le publier c'est à dire qu'il soit installé sur un "serveur".
Faire de votre PC personnel un serveur n'est pas une bonne solution ; il 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 (administration d'un serveur).

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

Par contre pour mon site personnel (sur lequel vous êtes) j'ai acheté le nom de dommaine "darchevillepatrick.info" chez l'hébergeur one.com donc l'url est tout simplement darchevillepatrick.info (aucune mention de l'hébergeur).

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 chez mon hébergeur 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 certains 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 Filezilla.

Le logiciel Filezilla

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 Filezilla.

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 (glisser - déposer) vers le panneau de droite.
Retour menu