Introduction à Apache, MySQL et PHP - Partie 1

Arnaud Fontaine

Le 28 juin 2003

Table of Contents

1  Introduction

Ce cours a été réalisé dans le cadre de l'association Tarentux (http://www.tarentux.org) le 28 juin 2003. N'hésitez pas à m'envoyer un mail pour me donner votre avis sur ce document ou pour apporter des modifications afin de le rendre plus clair. Cette article n'est pas du tout une documentation de référence sur l'HTML et encore moins sur Apache car nous n'aborderons que l'installation en local, mais plutôt une introduction à ce langage de programmation.

Un serveur web ou serveur http est un service sur une machine permettant de répondre aux demandes des navigateurs qui s'y connectent. Le protocole utilisé pour ce dialogue entre serveur et client est HTTP (pour HyperText Transfer Protocol). Apache est le serveur web le plus connu et le plus utilisé dans le monde. Il représente tout de même 63De plus, sa part de marché ne cesse d'augmenter. Il fonctionne sur de nombreuses plate-formes et systèmes d'exploitation différents mais c'est aussi un logiciel libre, ces deux raisons expliquent certainement son immense succès.

Dans ce cours nous n'aborderons que la programmation de pages web en html (statiques). Nous verrons plus tard comment créer des pages web dynamiques grâce au couple PHP/MySQL. En fait pour cette partie, nous n'avons pas nécessairement besoin d'apache car vous pourriez utiliser votre navigateur pour consulter les pages que vous allez composer.

2  Installation d'apache

L'installation d'apache sous Debian est très simple à réaliser si on utilise les paquets Debian. En effet, il vous suffit de taper :
#apt-get install apache

Le fichier de configuration principal d'apache est /etc/apache/httpd.conf. Nous n'aborderons que celui-ci car il suffit amplement pour la configuration d'un serveur web local. Nous allons donc modifier ce fichier afin qu'il convienne à nos besoins : Ensuite pour redémarrer votre service apache afin qu'il prenne en compte les modifications apportées au fichier de configuration, il vous suffit de taper :
# /etc/init.d/apache restart

Par défaut, la racine de votre site se situe dans le répertoire /var/www. Toutes vos pages web devront donc être placé dans ce dossier. Afin de vérifier que votre serveur web a bien démarré sans erreur, consultez le log qui se trouve par défaut dans /var/log/apache/error.log, normalement vous devriez avoir quelque chose comme ça :
# cat /var/log/apache/error.log
[notice] Apache/1.3.27 (Unix) Debian GNU/Linux PHP/4.1.2 configured -- resuming normal operations
[notice] suEXEC mechanism enabled (wrapper: /usr/lib/apache/suexec)
[notice] Accept mutex: sysvsem (Default: sysvsem)

3  Introduction à la composition de pages web

Il existe de nombreux logiciels permettant de réaliser vos pages web (OpenOffice, quanta). Mais nous allons nous passer de tels logiciels afin de bien comprendre la syntaxe et le fonctionnement du langage HTML (acronyme de « HyperText Markup Language ») . Derrière cette abréviation se cache un langage permettant de construire des documents hypertextes. Cela permet d'établir des relations entre les pages web destinées à permettre la navigation de l'une vers l'autre et vice-versa.

HTML est un standard international qui permet à tous les navigateurs existants d'accéder à tous les sites de la planète. C'est un langage interprété très tolérant comme vous pourrez le voir par vous même dans la suite de ce cours.

Avant de commencer le cours, commencez par créer un dossier qui contiendra vos pages en html et un dossier destiné à contenir des images que nous appelerons arbitrairement img :
# mkdir /var/www/monsite && mkdir /var/www/monsite/img

4  Les bases du HTML

L'HTML repose sur un système de balises qui permet d'indiquer la fonction de chaque partie du texte. Ainsi, un document HTML comporte nécessairement deux parties : Les balises fermantes de balises courantes telles que <HTML> ne sont pas obligatoires. Si vous les oubliez la plupart des navigateurs corrigeront l'erreur et afficheront toute même la page mais il vaut mieux fermer cette balise </HTML> pour que votre code soit lisible sur n'importe quel navigateur. Il en sera de même pour les balises <HEAD> et <BODY>.

Afin de bien comprendre comment cela fonctionne nous allons écrire une page web qui affichera "Coucou !" :
<!--- /var/www/monsite/exemple1.html (http://localhost/monsite/exemple1.html) --->

<!--- Ceci est un commentaire. Il marque le début de la page --->
<HTML>

<!--- Ouverture du conteneur HEAD : en-tête de la page--->
<HEAD>
<!--- Ouverture du conteneur TITLE : titre du document--->
<TITLE>
Titre de votre document
</TITLE>
<!--- Fermeture du conteneur TITLE --->
</HEAD>
<!--- Fermeture du conteneur HEAD --->

<!--- Ouverture du conteneur BODY : corps du document --->
<BODY>
Coucou !
</BODY>
<!--- Fermeture du conteneur BODY --->


</HTML>
<!--- Fin du document --->

Vous pouvez écrire vos balises en minuscule ou en majuscule afin de le rendre plus lisible, je vous conseille tout de même de le mettre en majuscule comme dans l'exemple précédent. On appelle conteneur une partie de texte sur laquelle s'applique des caractéristiques de mises en forme. Les balises <CENTER> et </CENTER> constituent un conteneur qui permettra de centrer la partie du texte entre ces deux balises. On distingue aussi un élément vide qui n'affecte pas le texte du document. La balise <HR>, par exemple, est un élément vide car elle permet de tracer une ligne horizontale et n'affecte donc pas le texte du document.

Convention : le code en rouge est destiné aux balises d'entête, le code en vert désigne les balises du corps du document, le code en gras désigne les deux balises (ouvrantes et fermantes) d'un conteneur tandis que les éléments vides seront en italique. Enfin le texte s'affichant dans le cadre de votre navigateur sera en bleu. Les commentaires se suivent, c'est à dire si on marque le début du document dans le premier exemple, ceci ne sera pas systématique dans les exemples suivants afin de rendre l'exemple donné un peu plus lisible.

Désormais nous préciserons le type des balises : élément vide (sans balise fermante) et conteneur.

4.1  Mise en forme de texte

Nous allons aborder dans cette partie la mise en forme de texte (couleur, taille, style des polices de votre document). Je rappelle que ces balises sont à utiliser entre le conteneur <BODY></BODY>. Une application de ce que nous venons de voir :
<!--- /var/www/monsite/exemple2.html (http://localhost/monsite/exemple2.html) --->

<HTML>

<HEAD>
<TITLE>
Titre de votre document
</TITLE>
</HEAD>

<!--- La couleur de fond appliqué à tout le document sera du jaune --->
<BODY BGCOLOR="yellow">
<!--- On applique différents styles et couleurs au texte --->
Coucou, ce texte est en <B>gras</B>, celui-ci en <I>italique</I> et celui là est <U>souligné</U>. Et tout ça avec des polices de <FONT COLOR="yellow" SIZE="1">tailles</FONT> et de <FONT COLOR="red" SIZE="5">couleurs</FONT> différentes et avec un saut de ligne juste après cette phrase.
<BR>
<CENTER><U>Ce texte est centré et souligné</U></CENTER>
</BODY>

</HTML>


Remarque : grâce à l'agument "BGCOLOR" de la balise "<BODY>" on a spécifié le fond d'écran qui sera utilisé pour tout le document.

Attention : toutes les balises fermantes telles que </FONT> n'admettent aucun argument. Ne mettez donc pas </FONT COLOR="white">, c'est inutile. De plus les options de toutes les balises que nous verrons, par exemple COLOR pour <FONT>, sont à mettre absolument après le nom de la balise et avant le caractère >. Ne mettez pas : <FONT><COLOR="white">votre texte</FONT> mais plutôt <FONT COLOR="white">votre texte</FONT>.

4.2  Les images

Il est possible d'intégrer des images dans vos pages HTML à l'aide de l'élément vide <IMG> qui peut prendre différents arguments possibles. Ainsi, on a par exemple :
<IMG SRC="images/logo.gif" ALT="logo" ALIGN="center|left|right|top|bottom" BORDER="0" WIDTH="150" HEIGHT="150">

On peut définir le texte qui s'affichera si l'image n'est pas disponible ("ALT"), l'alignement de l'image par rapport au document (centré, gauche, droite, haut, bas), la taille des bords autour de l'image (BORDER en pixel), la largeur ("WIDTH en pixel ou en pourcentage) et la hauteur ("HEIGHT" en pixel ou en pourcentage) de l'image. Il est conseillé de spécifier les arguments HEIGHT et WIDTH pour accélérer le chargement des images de votre page. Notez également que vous ne devez pas fermer cette balise, </IMG> est complètement inutile car c'est un élément vide.

4.3  Les listes

Le langage HTML vous permet aussi de lister facilement une suite d'argument, de mots, d'objets... Il existe différents types de listes :
On peut aisément « mixer » les listes à puces numérotées et non-ordonnées. Enfin pour créer un nouvel élément dans les deux types de listes à puces, il vous suffit d'utiliser le conteneur <LI>. Je ne pense pas que ce utile de mettre des commentaires dans l'exemple qui va suivre car il vous suffit de le recopier puis de voir le résultat.

Voyons tout de suite un exemple :
<!--- /var/www/monsite/exemple3.html (http://localhost/monsite/exemple3.html) --->

<HTML>

<HEAD>
<TITLE>
Titre de votre document
</TITLE>
</HEAD>

<BODY>
<B>Liste à puces numérotées :</B>
<OL>
    <LI>1. élément n°1</LI>
        <OL>
            <LI>1. sous_élément n°1</LI>
            <LI>2. sous_élément n°2</LI>
            <LI>3. sous_élément n°3</LI>
        </OL>
    </LI>
    <LI>2. élément n°2</LI>
    <LI>3. élément n°3</LI>
    <LI>4. élément n°4</LI>
    <LI>5. élément n°5</LI>
</OL>

<U>Liste à puces non-ordonées :</U>
<UL>
    <LI>* élément n°1</LI>
    <LI>* élément n°2</LI>
    <LI>* élément n°3
        <UL>
            <LI>- sous_élément n°1</LI>
            <LI>- sous_élément n°2</LI>
            <LI>- sous_élément n°3</LI>
        </UL>
    </LI>
    <LI>* élément n°4</LI>
    <LI>* élément n°5</LI>
</UL>

<I>Liste à puces non-ordonées et numérotées:</I>
<UL>
    <LI>* élément n°1</LI>
    <LI>* élément n°2
        <OL>
            <LI>1. sous_élément n°1</LI>
            <LI>2. sous_élément n°2</LI>
            <LI>3. sous_élément n°3</LI>
        </OL>
    </LI>
    <LI>* élément n°3</LI>
    <LI>* élément n°4</LI>
</UL>
</BODY>

</HTML>

4.4  Les tableaux

Nous allons maintenant aborder un élément très utilisé pour la mise en page : les tableaux. Ils permettent par exemple de créer des colonnes afin de mieux ordonner votre page ou aussi de spécifier une couleur de fond pour le texte contenu dans ce tableau.

Voici les différentes balises permettant de créer un tableau : Cette notion de tableau est très important, en voici donc un exemple :
<!--- /var/www/monsite/exemple4.html (http://localhost/monsite/exemple4.html) --->

<HTML>

<HEAD>
<TITLE>
Titre de votre document
</TITLE>
</HEAD>

<BODY>
<B>Tableaux :</B>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="400" HEIGHT="300" ALIGN="center" BGCOLOR="red">
    <TR>
        <TD VALIGN="top" ALIGN="center" WIDTH="100" HEIGHT="100%" BGCOLOR="yellow">
        Colonne 1 ligne 1 de taille 100 pixel et 100% de la hauteur du tableau.
        </TD>

        <TD VALIGN="top" ALIGN="center" WIDTH="100" HEIGHT="100%" BGCOLOR="black">
        <FONT COLOR="white">Colonne 2 Ligne 1 de taille 100 pixel et 100% de la hauteur du tableau.</FONT>
        </TD>
    </TR>

    <TR>
        <TD VALIGN="top" ALIGN="center" WIDTH="100%" HEIGHT="100%" BGCOLOR="blue">
        Colonne 1 ligne 2 de taille 100% de l'espace du tableau restant et 100% de la hauteur du tableau.
        </TD>
    </TR>
</TABLE>
</BODY>

</HTML>
Tout comme les listes que nous avons vu précédemmment, il est également possible « d'imbriquer » un tableau à l'intérieur d'un autre tableau. Nous verrons ça dans la rubrique Application du cours.

4.5  Les liens

Nous allons désormais finir par le conteneur le plus important du langage sans lequel le HTML ne mériterait pas son nom. Le conteneur <A></A> qui permet de faire des liens vers d'autres pages web. Tout comme les autres balise, <A> admet différents arguments. On a par exemple :
<A HREF="mailto:adresse_email|http://page.html|page.html"></A>

Comme on peut le deviner, le lien va pointer vers une page quelconque défini par l'option HREF. De plus, l'objet contenu entre les balises de ce conteneur peut être aussi bien du texte qu'une image. Vous pouvez aussi faire pointer votre lien vers un fragment de votre document, très utilisé dans les tables des matières (comme pour cet article), dans ce cas on spécifie l'option NAME et le symbole #.

Un exemple de ce que nous venons de voir :
<!--- /var/www/monsite/exemple5.html (http://localhost/monsite/exemple5.html) --->

<HTML>

<HEAD>
<TITLE>
Titre de votre document
</TITLE>
</HEAD>

<BODY BGCOLOR="green">
<!--- On fait un lien vers Tarentux --->
<A HREF="http://www.tarentux.org/">Exemple de lien vers Tarentux</A>
<BR>
<!--- On fait un lien vers Tarentux mais cette fois-ci en utilisant une image plutôt que du texte --->
<A HREF="http://www.tarentux.org/"><IMG SRC="logo.jpg" BORDER="0" HEIGHT="75" WIDTH="100" ALT="LOGO"></A>
<!--- On fait un lien vers un fragment du document (pour une table des matières par exemple --->
<A HREF="#objet">Objet 1</A>
<!--- Lorsqu'on cliquera sur le lien ci-dessus, on se retrouvera dans cette partie --->
<A NAME="#objet">Objet 1</A>
Texte du document accessible plus simplement en étiquetant un fragment de document.
</BODY>

</HTML>

5  Application du cours

Maintenant que nous avons vu les principales balises et leurs options, nous allons désormais créer une page web avec des tableaux que je vais commenter au fur et à mesure (les sources de cette page proviennent principalement d'un des sites web que j'ai fait : http://www.andesi.org). Dans cet exemple, les balises <TABLE></TABLE> seront en marron, les balises <TR></TR> en jaune et les balises <TD></TD> en violet pour plus de lisibilité.
<!--- /var/www/monsite/exemple6.html (http://localhost/monsite/exemple6.html) --->

<!--- Début du document --->
<HTML>

<HEAD>
<TITLE>
Application du cours sur le langage HTML
</TITLE>
</HEAD>

<!--- Le fond du document sera en blanc --->
<BODY BGCOLOR="#EFEFEF" topmargin="10" leftmargin="10" marginwidth="10" marginheight="10">
<!--- Tableau, avec un fond gris (#EFEFEF), destiné au logo --->
<TABLE CELLPADDING="0" CELLSPACING="10" BGCOLOR="#EFEFEF" WIDTH="100%">
    <TR>
        <!--- Cellule contenant le logo proprement dit --->
        <TD ALIGN="center" BGCOLOR="#EFEFEF" HEIGHT="70">
        <A HREF="http://www.andesi.org"><IMG SRC="img/logo.jpg" BORDER="0" ALT="Logo du site"></A>
        </TD>

        <!--- Cellule de la largeur du menu de droite pour centrer le menu par rapport au-dessus de l'article --->
        <TD WIDTH="160" BGCOLOR="#EFEFEF">
        &nbsp;
        </TD>
    </TR>
</TABLE>

<!--- Début du tableau principal avec un fond gris (#EFEFEF) --->
<TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" BGCOLOR="#EFEFEF" WIDTH="100%" VALIGN="top">
    <TR>
        <!--- Cellule contenant le tableau de liens rapides et de l'article --->
        <TD VALIGN="top" WIDTH="100%">
        <!--- Tableau contenant le tableau de liens rapides et de l'article avec un fond bleu navy (#000483) --->
        <TABLE VALIGN="top" BGCOLOR="#000483" CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%">
            <TR>
                <!--- Cellule pour les liens rapides avec un fond bleu navy (#000483), de hauteur 40 pixel et de largeur 100% du tableau ci-dessus --->
                <TD height="40" BGCOLOR="#000483" WIDTH="100%" ALIGN="center" VALIGN="middle">
                <!--- Quelques liens pointant vers un fragment du document (en l'occurence les rubriques de l'article) --->
                :: <A HREF="#htoc1">Introduction</A>
                :: <A HREF="#htoc2">Installation d'apache</A>
                :: <A HREF="#htoc3">Introduction à la composition de pages web</A>
                :: <A HREF="#htoc4">Les bases du HTML</A>
                :: <A HREF="#htoc10">Application du cours</A>
                :: <A HREF="#htoc11">Liens</A>
                :: <A HREF="#htoc12">Conclusion</A>
                :: <A HREF="#htoc13">Licence de ce document</A>
                :: <A HREF="http://www.tarentux.org">Tarentux</A> ::
                </TD>
            </TR>

            <TR>
                <!--- Cellule et tableau de l'article, le fond est blanc (#FFFFFF), les bords de 1 pixel en bleu navy (#000483) grâce à CELLPADDING=1 --->
                <TD WIDTH="100%">
                <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="30" WIDTH="100%">
                    <TR>
                        <TD WIDTH="100%" VALIGN="top" BGCOLOR="#FFFFFF">
                        <FONT>
                        <!--- Mettez l'article en entier ici (en enlevant bien entendu les conteneurs <HTML>, <HEAD> et <BODY>) --->
                        </FONT>
                        </TD>
                    </TR>
                </TABLE>
                </TD>
            </TR>
        </TABLE>
        </TD>

        <!--- Espace de 1 pixel (taille de l'image) entre la cellule principal (liens rapides et articles) et le menu de droite --->
        <TD ALIGN="center">
        <IMG SRC="img/espace.jpg" HEIGHT="5" ALT="espace">
        </TD>

        <!--- Cellule et tableau destinés aux menus de droite tout entier de largeur 160 pixel --->
        <TD WIDTH="160" VALIGN="top">
        <TABLE WIDTH="160" VALIGN="top" BGCOLOR="#000483" CELLSPACING="0" CELLPADDING="0" BORDER="0">
            <TR>
                <!--- Cellule pour l'en-tête du menu de droite (rubrique « Les bases du HTML ») avec un fond bleu navy (#000483 et de hauteur 40 pixel --->
                <TD ALIGN="center" BGCOLOR="#000483" HEIGHT="40">
                <B><FONT COLOR="#FFFFFF" SIZE="4">
                BASES
                </FONT></B>
                </TD>
            </TR>

            <TR>
                <!--- Cellule et tableau pour le contenu du menu de droite (contenu de la rubrique « Les bases du HTML ») en procédant exactement de la même manière pour les bords et le fond que ci-dessus --->
                <TD>
                <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="5"WIDTH="100%">
                    <TR>
                        <TD VALIGN="top" BGCOLOR="#bddeff">
                        <!--- Quelques liens pointant vers un fragment du document (en l'occurence les sous rubriques de la rubrique « Les bases du HTML » dans l'article) --->
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="#htoc5">Mise en forme de texte</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="#htoc6">Les images</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="#htoc7">Les listes</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="#htoc8">Les tableaux</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="#htoc9">Les liens</A><BR><BR>
                        </TD>
                    </TR>
                </TABLE>
                </TD>
            </TR>

            <TR>
                <TD WIDTH="100%" ALIGN="center" BGCOLOR="#EFEFEF">
                <IMG src="img/espace.jpg" height="5">
                </TD>
            </TR>

            <TR>
                <!--- Cellule pour l'en-tête du menu de droite (exercice) avec un fond bleu navy (#000483 et de hauteur 40 pixel --->
                <TD ALIGN="center" BGCOLOR="#000483" HEIGHT="40">
                <B><FONT COLOR="#FFFFFF" SIZE="4">
                EXERCICES
                </FONT></B>
                </TD>
            </TR>

            <TR>
                <!--- Cellule et tableau pour le contenu du menu de droite (exercices) en procédant exactement de la même manière pour les bords et le fond --->
                <TD>
                <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="5"WIDTH="100%">
                    <TR>
                        <TD VALIGN="top" BGCOLOR="#bddeff">
                        <!--- Quelques liens pointant vers les exercices que vous avez fait précédemment --->
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="exercice1.html">Exercice n°1</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="exercice2.html">Exercice n°2</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="exercice3.html">Exercice n°3</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="exercice4.html">Exercice n°4</A><BR>
                        <BR><IMG SRC="img/puce.gif" BORDER="0" ALT="puce"><A HREF="exercice5.html">Exercice n°5</A><BR><BR>
                        </TD>
                    </TR>
                </TABLE>
                </TD>
            </TR>

        </TD>
        </TABLE>
    <!--- On ferme le tableau et la cellule principal --->
    </TR>
</TABLE>
</BODY>

</HTML>
<!--- Fin du document --->

6  Ressources

Voici quelques livres ou liens qui vous seront particulièrement utiles :

7  Conclusion

Maintenant que vous avez créer votre propre site web, vous vous demandez certainement comment le publier sur Internet. Pour cela il vous suffit d'ouvrir un compte chez un hébergeur (Free, Multimania, wanadoo, etc...) puis de suivre les instructions données par ceux-ci.

J'espère que cette courte introduction à l'HTML vous aura permis d'apprendre ce langage de pogrammation assez simple mais toute fois très utile. Lorsque vous ferez vos pages web, je vous conseille fortement, dès que vous ouvrez une balise de la refermer aussi tôt, puis d'y mettre le contenu, ça peut paraître un peu bête comme ça mais cela s'avère finalement très utile.

Lors du prochain cours, nous aborderons PHP qui nous permettra de faire des pages web dynamiques. D'ici là, familiarisez vous déjà bien avec le HTML et si vous avez des problèmes, n'hésitez pas à m'envoyer un mail à l'adresse suivante : arnaud@tarentux.org.

8  Licence de ce document

Permission vous est donnée de copier, distribuer et modifier ce document selon les termes de la licence GNU pour les documentations libres, version 1.1 ou toute autre version ultérieure publiée par la Free Software Foundation.

Cette licence est disponible à l'adresse suivante :
http://www.gnu.org/copyleft/fdl.html

This document was translated from LATEX by HEVEA.