HTML & CSS : production et hébergement d'un site

Après avoir assimilé tout ce que j'ai écrit dans les chapitres précédents 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 adaptatif

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.

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.
Dans chaque page il suffit de créer un lien vers la feuille de style externe avec la balise LINK.

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 pour la partie BODY la même structure.

<!DOCTYPE html> <body> <header> <!--lien vers page d'accueil--> </header> <nav> <!-- liens vers autres pages du site--> </nav> <article> <!--contenu différent pour chaque page--> </article> </body> </html>

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

header, nav, article 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>

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

La Partie HEAD de chaque page

... <title>Les mollusques</title> <meta charset = 'utf-8'> <link href ="style.css" rel = "stylesheet" > <meta name="viewport" content= "width=device-width, user-scalable=yes" >

L'instruction meta charset

Dois-je vous rappeler que l'instruction meta charset ... 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.

L'instruction link ...

Lien vers la feuille de style externe.

La balise meta viewport ...

Cette instruction a déja été évoquée dans la page précédente ("page adaptative").

L'instruction meta viewport est fondamentale dans le cadre du Web mobile et doit être insérée dans la partie HEAD de chaque page !
Les écrans des mobiles sont beaucoup plus étroits que les écrans de PC (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent par défaut le site en "dézoomant" ce qui permet d'avoir un aperçu de l'ensemble de la page mais alors c'est tellement écrit petit que c'est illisible ! Cette zone d'affichage simulée est appelée le viewport.

Exemple : code de la page index.htm

A titre d'exemple ci-dessous le code de la page d'accueil.

<!DOCTYPE html> <html><head> <title>Les mollusques</title> <meta charset = 'utf-8'> <link href ="style.css" rel = "stylesheet" > <meta name="viewport" content= "width=device-width, user-scalable=yes" > <meta name="robots" content="noindex" /> </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 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" /> <h2>Retrouvez toute la biologie marine sur : </h2> <a href="http://www.mer-littoral.org" target="_blank">http://www.mer-littoral.org</a> </article> </body></html>

Pour toutes les pages le contenu des divisions HEADER & NAV sont identiques.
Selon les pages seul le contenu de ARTICLE change.

La feuille de style externe : style.css

Le code CSS

@media screen { * {font-family : arial ; text-decoration : none ; color : navy ; margin :0px ; padding :0px;} header, nav, article {background : aqua ; min-height : 50px; } h1,h2 {background : white ; margin : 10px auto 10px auto ; text-transform : uppercase ; text-align : center ; } h1{height : 30px ; font-size : 140% ; line-height : 30px ; } h2 {height : 24px ; font-size : 120% ; line-height : 24px ; } p {margin : 5px ; text-align : justify ; padding : 5px ;} a:hover {color : red ; font-size : 1.5em;} nav a {height : 30px ; line-height : 30px ; text-align : center ; background : white ; } img.grand {display : block ; width : 80% ; margin : 10px auto 10px auto ; } img.gauche {display : inline-block ; margin : 5px 1% 5px 1% ; vertical-align : top ; width : 30% ; } } @media screen and (min-width: 900px) { * {font-family : arial ; font-size : 16px; } body {width : 900px ; margin: 20px auto 20px auto ; } header, nav, article {margin :10px auto 10px auto ; background : aqua ; } header{width : 100% ; float: left ;} nav {width : 29% ; float : left ; height : 600px ; overflow : auto; } article {width :70% ; float : right ;} nav a {display : block; width : 80% ; margin : 10px auto 10px auto; } } @media screen and (max-width: 899px) { * {font-family : arial ; font-size : 12px; } body {width : 100% ; } header, nav, article {width : 100% ; } nav a {display : inline-block ; width : 30% ; margin : 10px 1% 10px 1%;} }

Les règles de style pour tous les écrans :

Règles si largeur supérieure ou égale à 900 pixels :

Règles si largeur inférieure à 900 pixels :

Testez le site

Testez avec votre PC. Pour simuler l'affichage sur une tablette ou smartphone réduisez la largeur de la fenêtre en cliquant sur l'icône "niveau inf".
Vous pouvez aussi tester successivement sur votre smartphone puis votre tablette et enfin sur votre PC en mode plein écran.
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