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 'responsive'

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.

la classe des gastéropodes (avec des espèces comme les escargots et limaces)
la classe des bivalves (moules, huitres, saint-jacques, etc.)
la classe des céphalopodes (seiche, calmar, pieuvre, etc.)

un en-tête (identique pour toutes les pages)
une zone de navigation (identique pour toutes les pages)
un corps (différent pour chaque page)

Structure du dossier

index.htm
page1.htm (sur les gastéropodes)
page2.htm (sur les bivalves)
page3.htm (sur les céphalopodes)

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.

à la racine du dossier les pages et la feuille de style externe
un sous-dossier intitulé "images" et contenant toutes les images du site

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>  </header> <nav>  </nav> <article>  </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 ...

Cette instruction crée un 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 ("pages responsive").

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.

content

meta name ="viewport"

width = device-width : empêche ce "dézoomage" automatique par le navigateur ; vous demandez en effet que la largeur du viewport soit identique à la largeur utile de l'écran du terminal
user-scalable=yes : possibilité pour le visiteur de zoomer (en avant ou en arrière)

Exemple : code de la page index.htm

A titre d'exemple, ci-dessous le code de la page d'accueil (index.htm). <!DOCTYPE html> <html lang="fr"><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> <p class ="titre">Les mollusques</p> </header> <nav> <a href = "index.htm">Accueil</a> <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 ... <br>Les mollusques sont des animaux qui ... <br>Les mollusques n'ont pas de pattes mais ... <br>Ils ont une langue râpeuse (dotée de dents) : la radula.</p> <br>Ci-dessous radula d'un Ormeau ... <br><img class ="gauche" src ="images/radula.jpg" /> <img class ="gauche" src ="images/radula.png" /> <p>Retrouvez toute la biologie marine sur : </p> <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 est identique. Seul le contenu de ARTICLE est spécifique à chaque page.
La division HEADER occupe toujours toute la largeur de la fenêtre.
Sur un grand écran les divisions NAV & ARTICLE sont de front avec une "gouttière" entre les deux.
Sur un petit écran les trois divisions occupent toute la largeur de la fenêtre et sont les unes en dessous des autres.

La feuille de style externe : style.css

@media screen
{
	* {font-family : arial ; text-decoration : none ; color : navy ; 
		margin :0px ; padding :0px; }
	body {min-height : 100vh;    }   
	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% ;  }
	h1,h2{text-align : center; line-height : 40px;   }
	h1 {font-size : 140%; background : skyblue ;  }
	h2 {font-size : 120%; background : skyblue ;}
	a {display : block ; width : 80% ; background : silver ; 
		height : 30px ; line-height : 30px; text-align : center;
		margin : 10px auto 10px auto ; }
	a:hover {color : red ; box-shadow : 5px 5px 5px gray; }
	p {padding : 5px; text-align : justify; }
	p.titre {text-align : center; font-size : 200%; font-weight : bold ; 
		line-height : 100px; }
	header, nav, article {background : turquoise ; margin-top : 10px;  }
}
@media screen and (min-width: 801px)     
{
	*{font-size : 16px; }
	body {width : 800px ; margin : 10px auto 10px auto ; }
 	header {float : left ; width : 100%; }
	nav {float : left ; width : 24%; }
	article {float : right ; width : 74% ; }
}

@media screen and (max-width: 800px) 
{
	* {font-size : 14px; }
	body { width : 100%;  }
	header, nav, article {width : 100%; float : left; }
}

Cette feuille de style peut paraitre compliquée pour un débutant.
En effet dans le cadre du responsive design, les media queries sont utilisées afin que le mode d'affichage varie selon que la largeur de l'écran.

@media screen : règles de style pour tous les écran
@media screen and (min-width: 801px) : règles de style pour les grands écrans (largeur supérieure à 800px)
@media screen and (max-width: 800px) : règles de style pour les petits écrans (largeur inférieure ou égale à 80px)

Le texte des boites H1 et H2 est bien centré horizontalement (grâce à text-align : center) et verticalement (grâce à line-height).

Notez que la règle de style relative à l'élément A est lourde car l'on veut que les liens apparaissent sous forme de beaux boutons ; légende bien centrée horizontalement et verticalement dans sa boite.

Le rendu du code dans un cadre :

Visitez ce site à partir de votre PC - réduisez la largeur de la fenêtre pour simuler l'affichage du site sur un petit écran en cliquant sur l'icône 'niveau inférieur'

Hébergement du site pour le rendre public

Pour le moment vous avez sur votre PC vous avez "en local" un beau site qui de plus est responsive (s'affiche correctement sur tous les types d'écrans). Mais 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.

facile à installer et à utiliser
logiciel gratuit

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 :

hôte (adresse du serveur)
identifiant
mot de passe
port

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.

Traduction

Débuter en programmation web - sommaire

Initiation au HTML & CSS

Pour des pages dynamiques - initiation à PHP & SQL

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville