Auteur/autrice : QUOY

créer un serveur WEB APACHE avec votre raspberry PI c’est possible , nous allons voir ici comment faire tout cela.

MISE A JOUR DU PI:

comme toujours avant toute manip d’installation , faire une mise a jour de votre systeme:

sudo apt update
sudo apt upgrade 

INSTALLER APACHE :

nous allons commencer par installer la couche logicielle du serveur WEB , à savoir APACHE2 . rien de plus facile , taper:

sudo apt install apache2

TESTER L’INSTALLATION:

une fois l’installation faite , pour vérifier que tout fonctionne, essayer une connexion sur votre RPI via un PC lui aussi connecté sur votre réseau domestique . tout d’abord , récupérer l’adresse IP de votre RPI. pour cela positionner le pointeur de votre souris sur l’icône de connexion réseau dans la barre de menu du RPI ( en haut ou en bas a droite suivant le type d’affichage choisis).

vous devriez voir apparaitre quelque chose du genre:

eth0: Configured 193.168.1.17

c’est l’adresse IP de votre RPI sur votre reseau domestique.

ouvrez votre navigateur WEB et taper dans la barre de navigation l’adresse IP trouvée avec devant “http://” :

http://193.168.1.17

si tout est OK vous devriez voir apparaitre une page de ce type signe que tout fonctionne:

APACHE est donc installé et il utilise le répertoire /var/www/html comme racine pour le site.

l’installation a déposé dans le repertoire /var/www/html un fichier Index.html qui est la page d’exemple qui s’affiche .

quand on contact l’adresse IP du RPI , on se connecte sur le port 80 du RPI (commande http://…) et apache va cherche dans le repertoire /var/www/html/.

par exemple , si vous tappez : http:// 193.168.1.17/monsite apache cherchera automatiquement le fichier “monsite” dans le repertoire /var/www/html/ et si on ne rajoute pas de nom de fichier et juste la commande: http:// 193.168.1.17/ , apache va chercher le fichier index.html comme tout appel classique a un site internet .

MODIFIER LES DROITS D’ACCÈS:

nous allons donner des droits d’accès au dossier d’apache , ce qui permettra d’administrer les sites installés ( modification et création de fichiers => voir plus bas). Pour cela, lancez les commandes suivantes :

sudo chown -R pi:www-data /var/www/html/
sudo chmod -R 770 /var/www/html/

INSTALLER PHP:

pour pouvoir faire fonctionner votre serveur et par exemple installer un site internet , il faudra pour interpréter des commandes PHP. pour cela nous allons devoir installer l’interpréteur PHP qui exécutera ces commandes PHP.

pour installer PHP sur votre RPI, taper:

sudo apt install php php-mbstring

TESTER PHP:

avant de continuer plus loin, comme pour apache, nous allons tester le fonctionnement de PHP. pour cela avec l’explorateur du RPI ou en ligne de commande , aller supprimer le fichier Index.html qui est dans le répertoire /var/www/html/ puis créer un fichier index.php avec un éditeur de texte et mettez y la commande simple suivante:

echo "<?php phpinfo(); ?>" > /var/www/html/index.php

NOTA : les modif précédentes ne peuvent être faites qu’a condition d’avoir modifié les droits d’accès.

ouvrir le navigateur web sur sotre PC connecté sur le reseau et connectez vous a l’adresse IP du RPI , vous devriez voir apparaitre ceci :

INSTALLER MySQL et mariadb-server

nous allons maintenant installer le moteur/gestionnaire de base de données MySQL, et mariadb-server, pour cela taper:

NOTA: mariadb-server remplace mysql-server

sudo apt install mariadb-server php-mysql

TEST DE MySQL:

le test se fait en ligne de commande avec : sudo mysql –user=root

cette commande démarre mariadb qui va nous permetre queluqes config de base, pour cela taper les commandes suivantes derrière le prompt MariaDB [(none)]>:

DROP USER 'root'@'localhost';
CREATE USER 'root'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' WITH GRANT OPTION;

dans la deuxieme ligne de commande , remplacer ‘password’ par un mot de passe de votre choix. ce mot de passe servira avec PHPmyAdmin

INSTALLER PHPMyAdmin:

PHPMyadmin est une interface plus simple qu’une console pour gerer une base de donnée MySQL. pour l’installer :

sudo apt install phpmyadmin

pendant l’installation, des fenêtres de configuration de paquet s’ouvre , réponses aux différentes questions:

serveur web a reconfigurer: apache2

config de phpmyadmin: repondre non

puis activer l’extension de mysqli avec :

sudo phpenmod mysqli
sudo /etc/init.d/apache2 restart

TEST de PHPmyadmin:

avec le navigateur internet de votre PC , connectez vous avec la commande:

http://193.168.1.17 /phpmyadmin

si vous avez un message d’erreur c’est parce que probablement le répertoire d’installation de phpmyadmin n’est pas dans var/www/html , en général , Phpmyadmin est installé dans usr/share/ , alors taper la commande ci dessous qui va créer un lien entre les 2 répertoires :

sudo ln -s /usr/share/phpmyadmin /var/www/html/phpmyadmin

normalement tout devrait rentrer dans l’ordre et avec l’adresse plus haut on obtiens le

résultat suivant:

CONFIGURATION/CHANGEMENT DU MOT DE PASSE PHPmyAdmin:

en ligne de commande Bash, aller dans le repertoire var/www/html/phpmyadmin et copier/coller le fichier “config.sample.inc.php” en le renommant avec la commande shell ci dessous:

cp config.sample.inc.php config.inc.php

ensuite ouvrir le fichier config.inc.php avec l’editeur nano :

sudo nano config.inc.php

une fois le fichier ouvert en mode éditeur , au debut on trouve un ensemble de ligne sous le commentaire /* serveur parameter */ qui commencent toutes par $cfg[‘Servers’][$i][‘wxyz’]

aller sous la ligne : $cfg[‘Servers’][$i][‘host’] = ‘localhost’; et ajouter les 2 lignes suivantes ( a la place de password reprendre le mot de passe de la config mariaDB.:

RENDRE VOTRE RPI accessible depuis le WEB

le serveur Web est prêt mais il n’est pas encore accessible via le web , uniquement en local. pour cela il va falloir que la box redirige les requêtes entrantes vers le RPI qui héberge le serveur. Pour mettre ces redirections en place, nous allons devoir accéder a l’interface de configuration de la Box.

pour accéder a l’interface de config de votre box voir les documents relatif fournis par votre fournisseur d’accès . une fois dans l’interface via vos identifiants et mot de passe d’administration, il vous faudra trouver l’option qui permet de rediriger les connexions entrante . sur une box orange, il faut activer l’option “réseau” dans les préférences et créer/activer les service et port correspondants .

.une fois fait , votre RPI est accessible depuis l’extérieur via l’adresse IP de votre box .

DYN DNS:

votre fournisseur d’acces vous affecte une adresse dynamique , pour résoudre ce problème , il faut utiliser les service d’un fournisseur de nom de “domaine” reliant le nom de domaine a l’adresse dynamique . il en existe plusieurs , un des plus connus est le suivant:

http://noip.com

vous pouvez créer un compte et un nom de domaine fixe en quelques clic et faire le lien de ce nom de domaine fixe avec votre paramétrage DYN/DNS chez votre fournisseur d’accès .

pour cela , vous vous connectez a votre compte administrateur de box et saisissez les données de connexion a votre compte noip et le tour est joué (voir copie écran ci dessous dans le cas de la livebox orange) . il ne reste plus qu’a vous connecter au nom de domaine pour avoir accès a votre serveur web RPI quelque soit votre adresse IP dynamique …

ne reste plus qu’a créer votre site internet et donc les pages hébergées sur le serveur du RPI dans le repertoire var/www/html . ce sera l’objet d’un ou plusieurs autres tutos …

NOTA: si vous vous connectez de façon distante avec un http://domaine.ddns.net/phpmyadmin , vous pouvez aller configurer votre base de donnée de façon distante …

vous avez installé APACHE, PHP ,MySQL et PhpMyAdmin, voyons comment créer une base de donnée et une table avec PhpMyAdmin.

connectez vous a votre adresse d’administration via votre IP , la connexion se fait avec un lien du type :

http://192.168.1.xx/phpmyadmin

après connexion au serveur , s’affiche l’écran de login, taper votre mot de passe puis “Exécuter”:

s’ouvre alors l’écran général de phpMyAdmin:

faisons un petit zoom dans cet ecran :

a gauche apparait la liste des bases de données existantes , pour pouvoir en créer une nouvelle , il suffit de cliquer dans la case “base de données” dans la bande de menu en haut (case entourée en rouge ci dessus).

dans l’ecran suivant ,en dessous de la ligne “créer une base de donnée” , donner un nom a votre BDD (ici MaBDDtest”), puis cliquer sur créer:

la base et créée , un nouvel ecran s’affiche , on voit a gauche la nouvelle BDD , reste a créer la premiere table de la base de données.

donner un nom a cette premiere table ( ici adherents par exemple pour créer un fichier d’adhérents a une asso) et spécifier le nombre de colonnes ( qui correspond au nombre de données a enregristrer dans la table), ici 7 . puis cliquez a droite de l’ecran sur executer

l’ecran suivant va vous permetre de donner un nom au differents champs d’enregistrement , de déclarer un type de donnée, puis le nombre de caracteres reservés a l’enregistrement concerné.

en bas de page a droite , le bouton ” ” vous permet de sauvegarder la saisie ;

voila votre base de donnée avec sa première table est créée , l’écran récapitulatif possède des options a droite permettant de modifier a tout moment la définition de chaque enregistrement. vous pouvez donc revenir ultérieurement sur votre table si besoin de la faire évoluer .

CREER UNE PREMIERE LIGNE DANS LE FICHIER:

pour pouvoir tester le fonctionnement de la base de donnée , il peut être utile de créer un premier enregistrement de données , pour cela aller dans l’onglet SQL et saisissez une ligne d’exemple sous ce format:

INSERT INTO MaBDDtest.adherents (NOM, PRENOM, RUE, CODEPOSTAL, VILLE, PORTABLE, MAIL) VALUES ('LEPONGE', 'Bob', '1 rue du lavabo', '75', 'PARIS', '0670564357', 'bobleponge@gmail.com');

puis faire exécuter en bas a droite , ne reste plus qu’a aller dans affichage pour constater l’enregistrement:

MESSAGE D’ERREUR LA PREMIÈRE FOIS:

il se peut que vous ayez un message d’erreur sur fonnd rouge/rose comme celui ci dessous a la première tentative ( c’était mon cas).

Warning in ./libraries/sql.lib.php#613
count(): Parameter must be an array or an object that implements Countable

une recherche google sur ce message d’erreur permet de résoudre le problème. voici la solution trouvée qui a réglé mon soucis:

• aller dans le fichier /usr/share/phpmyadmin/libraries/sql.lib.php à l’aide de cette commande : nano /usr/share/phpmyadmin/libraries/sql.lib.php
• Recherche (count($analyzed_sql_results[‘select_expr’] == 1) à l’aide des touches CTRL + W
• Remplace le par ((count($analyzed_sql_results[‘select_expr’]) == 1)
• Puis sauvegarder avec CTRL + X et confirmer avec Oui.
• redémarrer le serveur web avec la commande : service apache2 restart

tout devrait rentrer dans l’ordre .

pas de serveurs web et bases de données MySQL sans un minimum de connaissances des bases du PHP.

nous allons voir ici quelques manipulations “stratégiques” en PHP sur les bases de données. l’objectif ici n’est pas de faire un cours de PHP , mais de proposer des modules de programme “tout cuits” utilisables dans vos applications . pour une meilleure compréhension des instruction , faire une recherche type google.

pour tester les petits bouts de programmes suivants , il vous suffit de les copier/coller dans votre editeur raspberry et de les enregistrer dans le répertoire var/www/html puis de les lancer dans votre navigateur via une ligne du type :http://192.168.x.y/nomfichier.php ou 192.168.x.y est l’adresse ip locale de votre serveur RPI et nomfichier.php le nom de votre fichier enregistré dans ce repertoire

création d’ une base de donnée:

le petit bout de php ci dessous se connecte au serveur local avec le nom d’utilisateur et le mot de pass créés l’ors de l’installation de Mysql. et crée une base de donnée apellée demo .il integre des message de diagnostic . les commandes strategiques sont celles en rouge.

<?php
$link = mysqli_connect("localhost", "root", "password");
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
} 
$sql = "CREATE DATABASE demo";
if(mysqli_query($link, $sql)){
    echo "Database created successfully";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>

création d’ une table dans une base de donnée:

ci dessous , on se connecte a la base de donnée démo créée précédemment, et on crée une table “persons” qui contient 4 données: numero d’enregistrement , nom, prénom, adresse mail. c’est 4 données ont des noms de “variables” respectif : id, first_name, last_name et email. la variable id est en auto-incrémentation (la valeur associéé s’incrémente automatiquement a chaque nouvel enregistrement. c’est en plus la clé primaire de tri (PRIMARY KEY). pour les 3 autres variables, VARCHAR(x) précise le type de variable et la place (x) reservée a la variable. NOT NULL précise que l’enregistrement ne paut pas etre vide.

<?php
$link = mysqli_connect("localhost", "root", "password", "demo"); 
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "CREATE TABLE persons(
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    first_name VARCHAR(30) NOT NULL,
    last_name VARCHAR(30) NOT NULL,
    email VARCHAR(70) NOT NULL UNIQUE
)";
if(mysqli_query($link, $sql)){
    echo "Table created successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>

REMARQUE: creation d’une base et de sa table sont plus facile via PhpMyAdmin. mais les 2 exemples fournis permettent eventuellement de créer des scripts dynamiques .

insertion d’un enregistrement :

<?php
$link = mysqli_connect("localhost", "root", "", "demo");
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "INSERT INTO persons (first_name, last_name, email) VALUES ('Peter', 'Parker', 'peterparker@mail.com')";
if(mysqli_query($link, $sql)){
    echo "Records inserted successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
mysqli_close($link);
?>

affichage du contenu de la table d’une BDD :

<?php
$link = mysqli_connect("localhost", "root", "password", "demo");
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
$sql = "SELECT * FROM persons";
if($result = mysqli_query($link, $sql)){
    if(mysqli_num_rows($result) > 0){
        echo "<table>";
            echo "<tr>";
                echo "<th>id</th>";
                echo "<th>first_name</th>";
                echo "<th>last_name</th>";
                echo "<th>email</th>";
            echo "</tr>";
        while($row = mysqli_fetch_array($result)){
            echo "<tr>";
                echo "<td>" . $row['id'] . "</td>";
                echo "<td>" . $row['first_name'] . "</td>";
                echo "<td>" . $row['last_name'] . "</td>";
                echo "<td>" . $row['email'] . "</td>";
            echo "</tr>";
        }
        echo "</table>";
         mysqli_free_result($result);
    } else{
        echo "No records matching your query were found.";
    }
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}

voici le résultat de l’affichage dans le navigateur dans le cas d’un exemple perso de base de donnée d’une station météo:

ENVOI DE DONNEES A PARTIR D’UN FORMULAIRE:

nous avons vu plus haut comment insérer des données avec un script PHP. nous allons voir maintenant comment insérer des données a partir d’un formulaire dans une page HTML.

1-creation du formulaire:

le fichier fourni au format txt devra etre enregistré au format html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Record Form</title>
</head>
<body>
<form action="insert.php" method="post">
    <p>
        <label for="firstName">First Name:</label>
        <input type="text" name="first_name" id="firstName">
    </p>
    <p>
        <label for="lastName">Last Name:</label>
        <input type="text" name="last_name" id="lastName">
    </p>
    <p>
        <label for="emailAddress">Email Address:</label>
        <input type="text" name="email" id="emailAddress">
    </p>
    <input type="submit" value="Submit">
</form>
</body>
</html>

2-récuperation des données et insertion:

quand l’ utilisateur clique sur le bouton d’envoi du formulaire , le fichier formulaire HTML envoie les données au fichier « insert.php ». Le fichier ‘insert.php’ se connecte au serveur de base de données MySQL, récupère les champs des formulaires à l’aide des variables PHP $_REQUEST et exécute la requête d’insertion pour ajouter les enregistrements.

le fichier insert.txt devra etre chargé avec l’extension.php dans le repertoire var/www/html du serveur raspberry

<?php
$link = mysqli_connect("localhost", "root", "password", "demo"); 
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
} 
$first_name = mysqli_real_escape_string($link, $_REQUEST['first_name']);
$last_name = mysqli_real_escape_string($link, $_REQUEST['last_name']);
$email = mysqli_real_escape_string($link, $_REQUEST['email']); 
$sql = "INSERT INTO persons (first_name, last_name, email) VALUES ('$first_name', '$last_name', '$email')";
if(mysqli_query($link, $sql)){
    echo "Records added successfully.";
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
} 
mysqli_close($link);
?>

pour faire fonctionner l’ensemble , une fois les 2 pages dans le repertoire html , il suffit d’appeler la page html avec le navigateur via une ligne de commande du type ci dessous:

http://192.168.x.y/formulaire

voici le résultat du formulaire test de mes essais sur une base de donnée météo ( exemple plus haut):

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.

voyons comment implémenter une galerie photo basique avec le site web basique .

a partir du site simple décrit ici , nous allons modifier le répertoire “page1” en lui ajoutant 8 photos comme ci dessous . attention pour la dénomination des fichiers photos choisir une codification simple. ici en l’occurrence , les miniatures seront affichées par paquet de 4 sur plusieurs lignes ( 2 lignes pour cet exemple) donc le nom de fichier est numéroté avec un index ligne colonne

Contenu de “page1.html” :

voici le code html et les commandes de style de “page1.html” . ce fichier au format texte devra bien entendu etre modifié en html en changeant le nom de l’extension.

la partie entre les balise <style> et </style> permet de definir le style (formater) le contenu de la page . vous pouvez donc modifier les valeur suivant vos besoins .

voici le détail du code :

<!DOCTYPE html>
<html>
  <head>
	<title> GALERIE PHOTO 1</title>
	<style>
	img
	{
	  width: 140px;
	  heigh: 110px;
	}
	th
	{
	  font-size: 2em;
	  background-color: #f9ddff;
	  padding: 20px;
	}
	body
	{
	  font-family: sans-serif;
	  font-size: lem;
	  text-align: center;
	  background-color: slateblue;
        }
	table
	{
	  background-color: white;
	  width: 60%;
	}
	td
	{
	  padding: 25px;
	}
	</style>
   </head>

   <body>
	<table align="center">	
	<tr>
	  <th colspan="4">GALERIE PHOTO 1</th>
	</tr>
	<tr>
	  <td colspan="4">clicker sur la vignette pour agrandir la photo</td>
	</tr>
	<tr>
	  <td><a href="image01.jpg" target="_blank"><img src="image01.jpg"></a></td>
	  <td><a href="image02.jpg" target="_blank"><img src="image02.jpg"></a></td>
	  <td><a href="image03.jpg" target="_blank"><img src="image03.jpg"></a></td>
	  <td><a href="image04.jpg" target="_blank"><img src="image04.jpg"></a></td>
	</tr>

	<tr>
	<td><a href="image11.jpg" target="_blank"><img src="image11.jpg"></a></td>
	<td><a href="image12.jpg" target="_blank"><img src="image12.jpg"></a></td>
	<td><a href="image13.jpg" target="_blank"><img src="image13.jpg"></a></td>
	<td><a href="image14.jpg" target="_blank"><img src="image14.jpg"></a></td>
	</tr>
	</table>
  </body>
</html>

en appelant la page 1 via le menu de gauche du site web basique , on ouvre “page1.html” dans la fenetre de visualisation et cela donne:

et quand on clique sur une des vignettes de la page, on ouvre une nouvelle fenêtre avec la photo en taille maxi adaptée a la fenêtre , par exemple en cliquant sur la deuxième vignette de la deuxième ligne on obtient cette page:

voila , pas plus compliqué que ça . vous pouvez bien entendu créer plusieurs galeries photos , appelée chacune par une ligne différente dans le menu de gauche …

pour cela , créer autant de répertoire et de fichiers “pagex.html” avec les photos relatives dans le répertoire .

Comme pour la galerie photo , voyons comment créer une page de vidéos. le principe est le meme que pour la galerie photo. on va créer un repertoire avec les videos ( ici au format MP4) et une page html pour l’affichage.

comme pour la page photo, voici le fichier htlm au format txt ( penser a remetre l’extension html dans votre repertoire du serveur ):

par rapport a la page de galerie photo , dans la partie table, on a remplacé les code de redirection photo par des codes de redirection video . ces codes lancent le lecteur vidéo maintenant inclus en standard dans les navigateurs classiques . le format vidéo MP4 est également maintenant un des format standard supporté => il vous faudra donc faire attention a ne pas utiliser n’importe quel format video sur votre site.

<!DOCTYPE html>
<html>
	<head>
		<title> VIDEOS 1</title>
		<style>
		th
		{
			font-size: 2em;
			background-color: #f9ddff;
			padding: 20px;
		}
		body
		{
			font-family: sans-serif;
			font-size: lem;
			text-align: center;
			background-color: slateblue;
		}
		table
		{
			background-color: white;
			width: 60%;
		}
		td
		{
			padding: 25px;
		}

		</style>
	</head>
	<body>
		<table align="center">	
			<tr>
				<th colspan="4">VIDEOS</th>
			</tr>
			<tr>
				<td>
				<video width="640" height="480" controls>
				<source src="saturneweb.mp4" type="video/mp4">
				Your browser does not support the video tag.
				</video>
				</td>
			</tr>
			<tr>
				<td>
				<video width="640" height="480" controls>
  				<source src="jupiterweb.mp4" type="video/mp4">
				Your browser does not support the video tag.
				</video>
				</td>
			</tr>
		</table>
	</body>
</html>

voila le look de la page ainsi bâtie après ouverture dans le navigateur: