Gestion de contenu HTML5 et CSS3 avec SSI (Server Side Includes)

Les développeurs web HTML5 et CSS3 ont longtemps utilisé le simple truc SSI (Server Side Include) comme un moyen rapide et facile façon de gérer le contenu. Cela implique de casser le code en segments de code plus petits et un cadre qui peut être copié.

Même si vous visualisez le code source dans le navigateur, vous ne trouvez rien d'inhabituel dans la page.

Cependant, si vous regardez le code dans un éditeur de texte, vous trouvez des découvertes intéressantes:

csSSI. shtml 
Des choses intéressantes se passent dans cet extrait de code:









La page n'a pas de contenu! Tout le contenu actuel a disparu. Cette page, qui contient uniquement des informations structurelles, est le cœur de tout type de CSS - la structure est divorcée du contenu.


Une nouvelle balise funky remplace le contenu. Dans chaque endroit où vous vous attendez à voir du texte, vous voyez un 








Le nom de fichier est inhabituel. Le serveur ne recherche normalement pas les balises d'inclusion (car la plupart des pages n'en possèdent pas). En règle générale, vous devez enregistrer le fichier avec l'extension spéciale. shtml pour demander au serveur de rechercher les directives include et de les exécuter. (Il est possible d'utiliser des configurations de serveur spéciales pour autoriser SSI avec des extensions html normales.)


Les serveurs n'autorisent pas toujours les technologies SSI. Tous les serveurs ne sont pas configurés pour Server Side Includes. Vous devrez peut-être vérifier auprès de votre administrateur de serveur pour que cela fonctionne.


La bonne chose à propos de Server Side Includes est la façon dont il sépare le contenu de la structure. Par exemple, regardez le code du premier bloc de contenu:

Ce code indique au serveur de rechercher le fichier story1. html dans le répertoire courant et place le contenu du fichier là. Le fichier est un fragment HTML très simplifié:

Livre I - Création de la base HTML

Fondations HTML sonores
Tout sur la validation
Choix de vos outils
Gestion des informations avec listes et tableaux
Établir des connexions avec des liens
Ajouter des images
Créer des formulaires


Cette approche facilite la modification de la page.Si vous voulez une nouvelle histoire, vous faites simplement un nouveau fichier, story1. html, et le mettre dans le répertoire. Ecrire un programme pour le faire automatiquement est facile.
Comme le code PHP, le code SSI ne fonctionne pas si vous ouvrez simplement le fichier dans le navigateur ou faites glisser le fichier dans la fenêtre. SSI nécessite une participation active du serveur; Pour exécuter une page SSI sur votre machine, vous devez donc utiliser localhost, comme vous le faites pour le code PHP.
Si vous visualisez le code source de csSSI. shtml vous ne verrez pas les lignes d'inclusion; ils seront remplacés par les extraits HTML inclus.