Programmation Web/Programmer en deux minutes

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.

↑ (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

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

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

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 :

Tout un site web dans un seul document HTML grâce à JavaScript.
/Un wiki en JavaScript et PHP.
/Un site web avec trois fichiers et une base de donnée. (une base de donnée MySQL, un fichier .php, un .js et un .css)

Voir aussi le livre : Programmer en deux minutes.

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

[1]