Généralités | (Haut de page) |

L'Internet est un très grand réseau permettant de nombreuses chose différentes comme de s'envoyer des mails, des fichiers ou de communiquer de manière instantanée. On désigne par web l'ensemble des sites offrant un contenu public (avec éventuellement des restrictions d'accès).

La navigation sur le web se fait à l'aide d'un logiciel particulier que l'on appelle navigateur. Il peut s'agir par exemple de Mozilla, d'Opera, de Lynx ou d'Internet Explorer pour n'en citer que quelques uns. Ces navigateurs permettent (dans la théorie) d'accéder de manière semblable à différents contenu.

Le contenu des pages web est matérialisé sous formes de différentes pages que l'on peut consulter les unes à la suite des autres. La manière dont ces pages sont organisées et aussi affichées chez la personne les regardant, est définie par des langages de description qui seront abordés ensuite.

Parmis toutes ces pages, on en distingue principalement deux types. Celles statiques et celles qui sont dynamiques.

Une page statique sera toujours la même. Si vous demandez à votre navigateur de l'afficher à nouveau (à l'aide d'un bouton Actualiser par exemple ou d'une commande spécifique), elle sera alors identique. Bien sûr elle pourra être différente un mois plus tard si le responsable du site la change, mais elle ne changera pas d'elle même.

Les pages dynamiques ont justement cette faculté. Elles peuvent être différentes à chaque rafraichissement, mais aussi varier selon les choix de l'utilisateur ou simplement dans le temps. Une page qui par exemple afficherait l'heure courante à la minute près, aurait un contenu différent toutes les 60 secondes. Sur ce site de nombreux cas de pages dynamiques sont observables. Si vous changez le thème choisi, les pages ne s'afficheront pas de la même manière. Egalement si quelqu'un rajoute un message dans un des forums, il sera affiché ensuite. Le contenu de la page ne seront donc plus exactement le même.

Fonctionnement client/serveur | (Haut de page) |

Il y a deux parties distinctes permettant à un utilisateur de voir une page s'afficher chez lui.

Entre tout d'abord en jeu le serveur. Il s'agit d'un ordinateur qui stocke le contenu et va le fournir à qui le demande. Un exemple : www.linux.org. Lorsque l'on tape le nom de ce serveur dans le navigateur, on dit à ce dernier d'aller chercher des pages sur ce site.

Le navigateur constitue justement le client de ce mode de fonctionnement. On pourrait en fait considérer que le client est l'ordinateur complet de la personne parcourant le web, mais seul le logiciel utilisé est ici intéressant.

C'est le client qui est à l'origine d'un échange. Il demande au serveur une page web. Ce dernier lui envoie alors. Le client à la reception de la page web va la lire, l'interpreter, et selon son contenu l'afficher à l'écran de l'utilisateur.

Les langages de description | (Haut de page) |

Une page web n'est rien d'autre qu'un fichier texte. On l'appelle le fichier source. La plupart des navigateurs proposent une fonctionnalité permettant de le voir.

Celui-ci va décrire la page en utilisant un langage particulier, le HTML. Dans celui-ci, on va trouver des indications du genre : "Ici se trouve une liste", "Ceci est un tableau", "Ce texte est en fait un titre". Tout ce qui fait en fait l'organisation du document est donc donné ici.

Ces indications sont faites au moyen de balises. Il s'agit de texte particulier encadrant l'élément qui est décrit. On distingue la balise de début (ou balise d'ouverture) se trouvant avant le texte utile et la balise de fin (ou balise de fermeture) se trouvant après ce texte. En HTML, les balises sont de la forme <nom> pour celle de début et </nom> pour celle de fin.

Voici un extrait d'une page HTML fictive afin de mieux comprendre cela :

Et voilà ce que cela pourrait donner dans le navigateur de la personne consultant la page :

Liste des courses

A acheter avant demain

• Sabre de type Shirasaya
• Lunettes de soleil pour pingouin
• Nouveau clavier

Le but n'est pas ici de donner toutes les balises possibles, mais de montrer un exemple d'utilisation.

La première ligne contient un texte (Liste des courses) qui est encadrés par deux balises : <h4> qui est celle d'ouverture et </h4> celle de fermeture. Ceci permet de définir un titre de niveau 4 (en anglais titre se dit heading d'où le h). Le niveau 1 étant le plus haut, on a une hierarchie de titres dans un document. Le navigateur va donc interpréter ceci comme suit :

De la même manière, La ligne suivante définit un paragraphe (à l'aide de <p> et </p>) contenant le texte "A acheter avant demain".

La ligne suivant contient la balise <ul> qui permet de commencer une liste non numérotée, appellée parfois aussi liste à puces. On remarque que la balise de fermeture associée ne se trouve que plusieurs lignes en dessous. Et qu'il y a d'autres balises entre celles-ci.

Cela met en évidence la possibilité d'imbrication des balises qui peuvent être les unes dans les autres. Toutefois, il faut bien que l'ordre de fermeture soit l'exact inverse de celui d'ouverture. Chaque élément doit être totalement dans celui qui le contient.

Pour le cas de cette liste, les lignes suivantes sont les différents éléments de la liste. Chacun d'entre eux est encadré par <il> et <il>.

Les balises peuvent aussi avoir des attributs auxquels on donne des valeurs. Ces attributs se trouvent à l'intérieur de la définition de la balise et permettent de préciser des paramètres de celle-ci ou de modifier leur comportement. Une des balises les plus fréquentes est celle permettant de créer un lien hypertexte. Il s'agit d'un texte sur lequel on peut cliquer pour aller sur une autre page. En voici un exemple :

Ce qui donnera :

Site d'Aide Informatique de Tian

Pour la balise a nous avons donc défini l'attribut href. Tous les attributs se définissent de la même manière : on donne son nom, puis vient le signe = et enfin la valeur qu'il doit prendre entre guillemets.

Le langage qui a suivi HTML est le XHTML. Il fonctionne de la même manière, à l'aide de balises. Il présente l'intérêt d'être plus strict que l'HMTL. Ce langage est en fait basé sur l'XML qui est un langage de balisage d'usage général mais duquel nous ne parlerons pas ici.

La mise en forme | (Haut de page) |

Une fois le contenu de la page créé en (X)HTML, le navigateur est en mesure de l'afficher. Mais chaque logiciel pourra le faire de manière différente. Le créateur de la page peut souhaiter avoir plus de contrôle là-dessus, pour par exemple afficher le titre de niveau 4 au milieu de la page ou écrire en rouge le paragraphe. Pour cela il va utiliser les feuilles de style appelées aussi feuilles CSS.

Il s'agit là encore d'un fichier contenant du texte, mais avec une syntaxe différente. Ce fichier est organisé par blocs définissant l'aspect d'un élément en particulier. Un exemple permettra de mieux expliquer cela.

Ce fichier sera utilisé par la page (X)HTML qui l'indiquera au moyen d'une balise spéciale. Il existe aussi des moyens d'inclure directement ces définitions dans la page (X)HTML elle-même.

Le début définit le style à utiliser pour ce qui est contenu dans des balises h4 (c'est à dire les titres de niveau 4). On trouve ensuite à partir de la deuxième ligne les valeurs des propriétés spécifiées. Il y en a un très grand nombre et elles ne seront pas énumérées ici. Toutefois, le fait de parlais anglais peut être très utile car leurs noms sont explicites dans cette langue.

La seule propriété indiquée ici est l'alignement du texte (text-align). La valeur center indique au navigateur qu'il doit centrer le texte inclus entre <h4> et </h4>. Les propriétés non spécifiées sont laissées au libre choix du navigateur.

On trouve ensuite deux propriétés pour les paragraphes (texte entre les balises <p> et </p>). La première donne la couleur du texte qui sera ici rouge. La seconde permet d'indiquer l'épaisseur du trait pour avoir du texte en gras.

Appliquée à l'exemple du chapitre précédent, cette feuille de style donnerait cela :

Liste des courses

A acheter avant demain

• Sabre de type Shirasaya
• Lunettes de soleil pour pingouin
• Nouveau clavier

Ce qu'il est important de voir, c'est que la structure du document est ici complètement séparée de sa mise en forme. Ce site permet de s'en rendre compte : Si vous changez de thème (à l'aide par exemple de la page des préférences), la structure restera exactement la même, mais seule la feuille de style sera changée.

Les pages dynamiques côté client | (Haut de page) |

Ce qui a été vu précédemment ne permet que de créer des pages statiques. Mais le créateur de celles-ci peut vouloir permettre au visiteur d'interagir avec. Pour cela, il y a des langages permettant d'ajouter des éléments réactifs et modifiables.

Le plus utilisé est probablement le Javascript. Ce langage a été implémenté de manière différente par tous les navigateurs. Il existe donc actuellement une tentative d'uniformisation en créant l'ECMAScript

Ce langage permet de programmer des fonctions devant être executées lorsque des événements surviennent (on parle de programmation événementielle). Par exemple, je peux vouloir souhaiter que lorsque l'utilisateur clique sur un bouton, un message apparaisse dans une boîte de dialogue. Voici comment cela pourrait être fait :

Ce qui produirait le résultat suivant :

Cliquez ici

On utilise ici une balise HTML appelée button qui permet d'insérer un bouton. Pour celle-ci on définit un attribut particulier, onclick, qui correspond à l'évènement "L'utilisateur a cliqué sur cet élément". La valeur qui lui est donnée est l'action à effectuer. C'est ici qu'intervient le Javascript. C'est le langage qui permet de décrire le comportement. Dans ce cas, le code Javascript est donc le suivant :

Ce qui a pour effet de faire afficher la fenêtre avec le message indiqué.

Les possibilités offertes par le Javascript sont bien plus grandes, car il permet d'agir sur tous les éléments de la page. Il peut changer dynamiquement les valeurs des attributs des différentes balises et même ajouter ou supprimer des balises dans la page. Il utilise pour cela une interface que l'on appelle le DOM et qui doit être plus ou moins considérée comme une arborescence de tous les éléments de la page avec les moyens de les modifier.

Les pages dynamiques côté serveur | (Haut de page) |

Le contenu de la page peut varier selon ce que fait l'utilisateur comme vu précédemment. Mais il peut aussi dépendre d'informations qui ne sont disponibles que sur le serveur. Dans ce cas, il y aura un mécanisme côté serveur qui permettra cela.

D'une manière très générale, il suffira que le serveur lance l'exécution d'un programme qui se chargera de lui donner les informations nécessaires. Ce dernier peut alors être écrit dans n'importe quel langage.

Il faut pouvoir passer des paramètres à ce programme. Cela se fait au moyen de CGI qui est une définition du moyen de passer les paramètres (une interface).

Pour illustrer ceci, prenons le cas du moteur de recherche Google. Lorsque l'on fait une recherche on accède à une adresse ressemblant à cela :

Les paramètres CGI sont constitués par tout ce qui se trouve après le ? (point d'interrogation). Dans ce cas, un programme va être lancé sur le serveur de Google en lui passant le paramètre "q" qui aura comme valeur "tian". Il va aller chercher les pages contenant ce mot et renvoyer le résultat qui sera ensuite envoyé au client.

Comme dit précédemment, ces programmes peuvent être développé avec n'importe quel langages. Toutefois certains ont la faveur des programmeurs car ils s'adaptent mieux à de telles situations. Perl fait partie de ceux-ci car il sait très bien manipuler des chaînes de caractères.

Mais celui que l'on rencontre souvent, est le PHP. D'une part parce qu'il est plutôt simple à utiliser. Mais aussi parce qu'il existe des moyens de l'intégrer très facilement dans une page web. On peut en fait mettre des morceaux de PHP dans une page statique. Et ceux-ci seront remplacés avant d'envoyer la page.

Voici un extrait d'une page fictive :

Ce qui donnerait :

Aujourd'hui nous somme le 21/11/2024

Le code PHP est inclus entre les éléments <? et ?>. Le code PHP exécuté ici est donc :

Cela demande à afficher la date courante. Par afficher, il faut comprendre "Afficher dans la page renvoyée". Ceci signifie que la page qui arrivera chez le client (donc dans le navigateur de l'utilisateur) sera ceci :

Il n'y a donc plus aucune trace du code PHP. La page est bien générée dynamiquement au niveau du serveur.

Ce genre de page peut être très utilisé pour les forums par exemple. On a alors une base de données qui contient les messages des forumeurs. Le programme PHP (ou autre langage) va les récupérer, les traiter, pour ensuite les envoyer au client.

Les normes | (Haut de page) |

De par son fonctionnement, le web fait en sorte que le serveur n'a acune connaissance a priori du client. Le concepteur du site ne peut donc pas savoir qui va y accéder pour y lire des informations. Même les pages dynamiques côté client contiennent du code écrit par le développeur du site.

Dans ce cas, il se pose un problème : Il faut être bien sûr que ce qu'envoie le serveur soit bien compris par le client. Si pour celui qui a créé le site, un texte à l'intérieur des balises <h1> et </h1> désigne un titre de niveau 1, mais que pour le navigateur utilisé (qui se chargera de la mise en forme), cela correspond à un tableau. Le résultat ne sera alors pas correct.

C'est pour cela que ces langages sont normalisés. L'organisme responsable de la normalisation du (X)HTML et du CSS (entre autres) est le W3C. Il publie des documents qui définissent les syntaxes à utiliser.

Il y aussi des normes pour le DOM utilisé par les pages dynamiques côté client. Pour celles côté serveur, c'est en revanche moins important étant donné que l'on maîtrise tout ce qui s'y passe.

Il est donc important pour un concepteur de site de se conformer à ces standards. Les éditeurs de navigateurs web ont eu tendance par le passé (et parfois encore maintenant) à avoir certains attributs ou balises spécifiques. Dès lors que quelqu'un utilise un autre navigateur, il ne pourra pas pleinement profiter du contenu publié.