Lorsque nous aurons terminé de rédiger ce site (dans moins d'un an) et que vous aurez suivi la totalité de ce Cours,
et posé toutes vos questions dans nos blogs, vous saurez réaliser totalement votre propre site web, sans aucun outil du commerce (souvent inutiles).
Il vous suffira de choisir un nom de domaine (nous verrons quelques conseils à ce sujet) et le faire héberger sur un serveur PRO.
Vous saurez également utiliser tous les "Outils Google Webmaster" (gratuits bien sûr) et votre site sera parfaitement référencé, là encore sans utiliser
de services payants inutiles. Alors combien cela vous coûtera ??? En aucun cas plus de 90 euros par an, pour l'hébergement et le nom de domaine.
Toutes les explications permettant de réaliser un site complet comme celui-ci c'est cadeau et c'est ICI .
(Nota: notre travail à été lancé le 01-08-2020, nous espérons l'avoir achevé avant les vacances 2021, mais nous serons toujours présents pour répondre à vos questions.)
En réalité, écrire un site web c'est écrire, dans le langage du serveur qui nous héberge, tous les ordres pour qu'il envoie au navigateur du visiteur les pages
de notre site web. Notre serveur est paramétré en PHP, c'est donc uniquement ce langage que nous utiliserons. Il nous suffit donc de lui décrire quel HTML
envoyer au visiteur pour chaque page.
Vous l'avez compris le PHP n'envoie pas de CSS (feuille de style), ni de Javascript, ni d'images etc. au visiteur. C'est le rôle de votre navigateur,
exécutant le HTML qu'il reçoit du serveur, de demander tout ce que nous avons décrit dans notre HTML ! Ainsi donc vous y voyez plus clair sur qui fait quoi !
* Insistons encore davantage: lorsque le HTML demande au serveur une feuille de style décrite dans la page ou une vidéo ou tout autre composant,
le serveur n'est plus en lien avec vous via le PHP. Mais c'est votre navigateur qui dialogue avec le serveur.
Toutes nos pages utilisent, sans aller trop loin, toutes les nouvelles techniques; par exemple, la feuille de style utilise pour s'adapter aux différents supports
(écran d'ordinateur, tablettes, téléphones), la spécification CSS3 "Media Queries", prévue pour l'application de feuilles de styles en fonction des périphériques
de consultation utilisés pour du HTML. On parle de "pratique Responsive Web Design". Également, nous employons les mises en page à l'aide de la conjugaison entre
les modules CSS Grid layout, à l'intérieur desquels nous incluons les mises en forme horizontales ou verticales des éléments contenus dans chaque "Grille".
Ainsi donc, pour un type de site comme le nôtre, il nous suffit d'un simple découpage de nos pages en quatre zones :
le bandeau, le menu, la page, le pied de page, comme vous pouvez le voir ci-dessous. (Ce sont les 40 premières lignes de notre feuille CSS unique pour toutes
nos pages de ce site. Voyez le GRID de nos pages)
Donc ce simple bout de CSS dans le HTML de notre page type suffit à mettre en place les grandes parties d'une page classique :
Et toutes nos pages seront entourées d'un DIV particulier avec la class= "wrapper", et dans ce DIV se trouveront toujours les quatre DIV pour les classe:
* bandeau (qui servira éventuellement à mettre un bandeau et quelques objets ... nous y reviendrons),
* ToutMenu (pour le menu général du site),
* content (contenant la page elle même),
* footer (étant réservé au bas de page.)
Certains se demandent sans doute: "mais ou mettre les éléments qu'une page peut utiliser et qui sont disposés à un endroit précis de chaque page,
comme le bouton HOME en haut à gauche de la page, ou un DIV qui apparaitrait lors d'un login, ou encore une image située a droite du site
quand la taille de la fenêtre le permet ? TOUT ces objets ne se déplaçant pas avec le scroll !"
Nous y reviendront au bon moment, mais sachez que tout ces éléments se déclarent et se positionnent avant l'ouverture du DIV wrapper, tout simplement.
Vous voyez déjà la simplification extrême qu'apporte le GRID lors d'une mise en page.
Tout ces DIV indépendants, tels des électrons libres, feront l'objet d'un Cours spécialement pour eux, tant leur rôle est important.
Vous comprendrez facilement que toutes les pages auront trois grilles identiques à quelques détails prés:
Par exemple, le menu sera toujours identique à l'exception du bouton de la page active, qui sera brun au lieu de noir, et inactif etc...
Voila pourquoi nous allons vous expliquer comment est organisé le code des pages, Cours 2 .
Retour Menu
