Wikilivres

Programmation Web/Programmer en deux minutes

< Programmation Web

Un site web est un ensemble de pages web envoyées par un serveur distant à votre navigateur.

Une page web est un document html composé d'une tête et d'un corps (<html> <head></head> <body></body> </html>). La tête contient des informations telles le titre du document (<title>), son apparence (<style>) et ses animations (<script>) ; tandis que le corps du document est affiché.


Créer ce document HTML dans un éditeur de texte avec coloration syntaxique. L'enregistrer (*.html) puis l'ouvrir avec un navigateur : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 

   <head>
      <title>Page web</title>

      <script type="text/javascript">
          alert("bonjour le monde !");
      </script>

      <style type="text/css"> 
          body { 
              background: green; 
            } 
          #division_une {
              border:1px dotted red;
              background: white; 
            }
      </style>

   </head>

   <body>
      Corps.

      <div id="division_une">
          Première division du corps.
      </div>

      <div id="division_deux">
          Seconde <a href="http://wikipedia.org"> <!-- une ancre balise un hyperlien -->
                   division 
                  </a>
          du corps.
      </div>
   </body> 

</html>

Le navigateur affiche le titre du document, alerte l'utilisateur, puis affiche le corps du document selon l'apparence déclarée. Félicitation, vous avez écrit votre premier document HTML, contenant des déclarations de style CSS et des instructions JavaScript[1] !


Vous pouvez partager ce document sur Internet, pour cela il vous faut un serveur, c'est-à-dire un logiciel qui "sert" les documents aux requêtes des visiteurs.

Votre ordinateur peut héberger votre serveur, ou vous pouvez utiliser un ordinateur distant. Il vous faut installer un serveur tel Apache ou nginx et l'exécuter. Un répertoire /public_html est alors servi par le logiciel lors de la requête http://votre_adresse_IP depuis Internet et http://localhost depuis votre ordinateur.


  1. ↑ (JavaScript est un langage exécuté par le navigateur à l'affichage d'une page web, du moins il est surtout utilisé pour ça)

L'index de votre site web

modifier

Disposez d'un serveur, c'est-à-dire d'un répertoire /public_html servi lors de requête http à votre ordinateur (distant ou local).

Créez un document (index.html) dans le répertoire /public_html et faites une requête http au serveur (via votre navigateur) : l'index du site est servi.


Si votre document est accessible sur Internet, vous pouvez le faire contrôler par le validator du w3c.

Programmer côté serveur

modifier

Renommez votre fichier (*.html) en (*.php) et ajoutez des instructions PHP - Hypertext Preprocessor, exécutées par le serveur et délivrant un document html. 

<? php

$titre="Titre du document"; 
$alerte="bonjour le monde !"; //l'alerte affichée entre les deux divisions du corps.

$msg=$_GET['msg'];
if (!isset($msg)) {$msg="Message par défaut."}

?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 

   <head>
      <title><?php echo $titre; ?></title>

      <script type="text/javascript">
          function Prompt_et_alerte() {
               alert(prompt("Votre souris est sortie de l'ancre !"));
          }
      </script> 

      <style type="text/css"> 
          body { 
              background: green; 
            } 
          #division_une {
              border:1px dotted red;
              background: white; 
            }
      </style>

   </head>

   <body>

      <div id="division_une">
          Première division du corps. <?php echo $msg; ?>
      </div>   
     
      <script type="text/javascript">
          alert(<?php echo $alerte; ?>);
      </script>

      <div id="division_deux">
          Seconde <a href="http://wikipedia.org" onmouseout="Prompt_et_alerte();"> <!-- la fonction Javascript est exécutée lorsque la souris sort de l'ancre -->
                   division 
                  </a>
          du corps.
      </div>
   </body> 

</html>

Faites une requêtes au serveur et lisez le code source (ctrl+U) de la page html servie.

Le PHP a été interprété par le serveur, le navigateur affiche la page html résultante.

Essayez la requête http://yourhost/index.php?msg=mon_message : le serveur affiche votre message dans le corps du document html.

Aller plus loin

modifier

Afin d'aller plus loin, munissez votre navigateur d'un outil tel Firebug.

Pour apprendre à manipuler cet outil, introduisez dans votre document plein de divisions et de déclarations de style associées, éventuellement des erreurs JavaScript, et vérifiez que vous savez utiliser l'outil pour retrouver l'identifiant et le style des divisions html, ainsi que les erreurs d'exécution JavaScript.

Félicitation, vous êtes paré pour enrichir votre site web de fichiers HTML, CSS, JavaScript et PHP !


Pour aller plus loin :


Voir aussi le livre : Programmer en deux minutes.
Récupérée de « https://fr.wikibooks.org/w/index.php?title=Programmation_Web/Programmer_en_deux_minutes&oldid=684240 »