Un Site WEB Basique

une fois le serveur APACHE bâti , reste a faire son site web. voici un kit version light pour un premier site basique a structure légère , peu consommateur de ressources et dédié aux débutants n’ayant aucune connaissance en HTML ou PHP.

NOTA: pour des site beaucoup plus lourds et plus pro , je recommande l’installation et l’utilisation de WordPress comme c’est le cas pour ce site (hébergé chez un fournisseur dédié et non pas sur un serveur local RPI) .

FICHIERS :

pour batir un site a structure basique, vous trouverez ci dessous un dossier compressé “sitesimple.rar” contenant les fichier de base pour réaliser votre premier site sur votre serveur apache.

le dossier contient egalement des images et fichiers d’aide qui rappellent les consignes ci dessous.

INSTALLATION DU DOSSIER:

extraire les fichiers de l’archive RAR , vous obtenez l’ensemble des fichiers ci dessous:

copier l’ensemble de ces fichiers et dossiers dans la racine du site de votre serveur sur le RPI ( en general le dossier “var/www/html“.

si vous avez ouvert l’accès extérieur a votre serveur sur votre box ( detail de la manip en bas de page ICI) , et que vous vous connectez via un acces exterieur , la page Index doit s’ouvrir et vous afficher le site basique qui ressemble a cela:

PRINCIPE DE FONCTIONNEMENT:

cette version très basique fonctionne sur le principe des frames (fenetres). l’affichage est divisé en 3 fenetres (Frame) :

  • bandeau gris foncé horizontal du Haut avec le tire de votre site (ici “Ma page du Haut” )
  • le bandeau gris clair de gauche avec le Menu . 3 options de bases en standard , page “Accueil” , acces page 1 , acces page 2
  • la fenetre centrale qui affiche la page courante ( page d’accueil a l’ouverture)

le fait de cliquer sur une des options du menu de gauche fait changer/afficher la page concernée dans la fenetre centrale . pour tester sans passer par une navigation exterieure , il vous suffit d’aller dans le repertoir d’installation du package et de double cliquer sur le ficher “Index.html” . le site s’ouvre et si vous cliquez dans les différentes options de gauche vous verrez la page centrale changer. la page accueil affiche un tutos basiques qui explique comment changer tout ça. reste maintenant a modifier les fichiers pour batir votre site perso sur cette base. voyons comment faire.

MODIFICATIONS / ADAPTATION :

il ne vous reste plus qu’a modifier les contenu des différents fichiers pour adapter cette structure basique a vos souhaits :

modification du titre :

ouvrir le fichier “framehaut.html” avec l’editeur HTML ( libre office par exemple) et changer le titre “Ma page du haut” avec le titre que vous souhaitez . changer la police, la taille des caracteres et les couleurs en fonction de vos préférences. n’oubliez pas de sauvegarder le resultat avec l’extension html.

modification du menu de gauche:

ouvrez le fichier “framemenu.html” avec un éditeur de texte genre bloc note , et dans les 2 lignes ci dessous qui affichent les tire de menu et exécutent les redirection de pages, remplacez les testes en ROUGE par le texte de menu que vous souhaitez.

<P><A HREF="page1/page1.html" TARGET="pagesite"><SPAN STYLE="font-variant: normal"><FONT COLOR="#000000"><FONT FACE="Times New Roman, serif"><FONT SIZE=3><SPAN STYLE="font-style: normal"><B>Page1</B></SPAN></FONT></FONT></FONT></SPAN></A></P>
<P><A HREF="page2/page2.html" TARGET="pagesite"><SPAN STYLE="font-variant: normal"><FONT COLOR="#000000"><FONT FACE="Times New Roman, serif"><FONT SIZE=3><SPAN STYLE="font-style: normal"><B>Page2</B></SPAN></FONT></FONT></FONT></SPAN></A></P>

vous pouvez ensuite changer police de caractere, couleur et taille avec l’editeur de texte plus evolué ( libreoffice par exemple)

création/modification des différentes pages:

les différentes pages peuvent ensuite etre modifiées directement avec un editeur de texte evolué pour saisir le texte a afficher , les polices de caractere , les couleurs etc..

les 3 pages a modifier sont :

  • mapageaccueil.html” dans le repertoire racine
  • page1.html” dans le repertoire page1
  • page2.html” dans le repertoire page2

penser a chaque fois a bien sauvegarder vos pages au format HTML.

ajout d’une page pages:

pour ajouter une page, il y a 2 opérations a faire:

  • ajouter un repertoire supplémentaire page3 – page4-….pagex , par copy/paste d’un des 2 repertoires existant et en changeant le numéro du nom du repertoire “pagex” et du fichier “pagex.html” a l’intérieur et en modifiant le contenu du fichier “pagex.html” avec un editeur de texte
  • ajouter une ligne de menu dans “framemenu.html” pour renvoyer a la page supplémentaire. pour cela ouvrir “framemenu.html” dans un editeur de texte basique genre bloc note et faire un copy paste d’une des deux ligne appelant les pages 1 ou 2:
  • modifier les nom des liens de redirection et sauvegarder le fichier au format html :

on peut recommencer l’opération autant de fois que de pages a rajouter .

NOTA: les modifications du site peuvent etre effectuées sur un PC avant d’etre installées sur le Raspberry PI.

voila pour les consignes basiques pour un site Web basique sur serveur APACHE raspberry PI.