HTML & TECHNOLOGIES INTERNET

1. Introduction

Le but de ce cours est de :
- vous faire comprendre le fonctionnement du réseau internet et ses applications
- vous apprendre à créer et diffuser un site internet

1.1. La technologie client/serveur

Supposons que vous installiez un logiciel sur votre ordinateur et que vous ne le fassiez fonctionner que sur cet ordinateur. Si d'autres personnes veulent utiliser votre logiciel en même temps que vous, depuis d'autres ordinateurs reliés au vôtre par un réseau, cela va créer des conflits. En effet, plusieurs personnes risquent de modifier en même temps les mêmes informations dans un fichier ou d'effacer les modifications faites par d'autres personnes. Pour éviter cela, le logiciel est séparé en deux parties distinctes : la partie serveur et la partie cliente. La partie serveur va être exécutée en permanence sur un ordinateur spécifique. Elle va authentifier les accès des différents utilisateurs, examiner leurs demandes et y répondre en gérant les différents flux d'informations pour ne pas perdre ni mélanger les données. Il y a un partage intelligent de l'information. La partie cliente du logiciel va être exécutée sur l'ordinateur de chaque utilisateur. Elle ne sera exécutée qu'à la demande de l'utilisateur, elle n'a pas besoin de fonctionner en permanence. Elle va permettre à l'utilisateur de faire des demandes (des requêtes) au logiciel serveur et d'en recevoir les réponses.

Par extension, on appelle poste client (ou client) l'ordinateur sur lequel s'exécute la partie cliente du logiciel et poste serveur (ou serveur) l'ordinateur sur lequel s'exécute la partie serveur du logiciel.

Exemples :
- un serveur de bases de données avec un logiciel serveur de comptabilité va être interrogé par chaque poste client situé dans l'entreprise (application intranet) ou depuis l'extérieur, en passant par le réseau internet (application extranet).
- lorsque vous consultez un site internet, vous utilisez sur votre ordinateur un logiciel client appelé navigateur internet. Celui-ci demande à un serveur internet l'envoi de pages internet.

1.2. Le réseau internet

Le réseau internet est un gigantesque ensemble de serveurs et de réseaux reliés dans le monde entier par des câbles, des fibres optiques... Toutes ces connexions se font par l'intermédiaire de routeurs et de passerelles . Les routeurs servent à inter-connecter des réseaux utilisant les mêmes technologies, les passerelles sont utilisées pour connecter des réseaux de technologie différente. Chaque routeur, passerelle et serveur du réseau internet est identifié par un nom unique (l'URL) et un numéro d'identification unique (l'adresse IP). La correspondance entre chaque URL et son adresse IP est enregistrée sur des serveurs spécialisés : les serveurs DNS (Domain Name Service). Ces serveurs permettent d'aiguiller correctement les informations qui transitent dans le réseau vers les machines concernées. Chacun peut accéder à un serveur du réseau depuis son ordinateur en utilisant des applications clientes spécifiques : navigateur internet, lecteur de messagerie électronique... Chacune de ces applications se servira des URL ou des adresses IP pour adresser ses requêtes.

Pour vous connecter au réseau, vous devez louer un accès à un fournisseur d'accès à internet (FAI). En anglais : internet service provider (ISP). Selon vos besoins et vos moyens financiers, vous pourrez choisir un accès plus ou moins rapide. Attention, certains fournisseurs ne limitent pas le nombre d'octets reçus mais limitent la quantité d'octets que vous envoyez.

• Connexion par ligne téléphonique analogique (RTC ou Réseau Téléphonique Commuté) : nécessite un simple modem. Débit de l'ordre de 4 Ko/s. La connexion occupe la ligne, vous ne pouvez pas téléphoner en même temps.

• Connexion par modem câble : beaucoup plus rapide (50 à 250 Ko/s).

• Connexion par ADSL : débit de de 512 Ko/s à 4 Mo/s. Utilise la ligne téléphonique sans la monopoliser, on peut téléphoner en même temps. Nécessite d'être proche d'un central téléphonique pour garder les performances (moins de 5 km).

• Par ligne numérique RNIS. Nécessite une carte RNIS. Débit jusqu'à 128 Ko/s si deux lignes sont utilisées simultanément.

• Par fibre optique. Débit > 125 Mo/s.

• Par satellite. Intéressant en couplage avec une boucle locale WiFi (quelques Mo/s) pour couvrir une zone urbaine.

• La boucle locale radio (BLR) consiste à raccorder par voie hertzienne des abonnés équipés d'une antenne, à un point d'accès du réseau Internet. Débits de 1 à 20 Mo/s.

• Courants Porteurs en Ligne : les données sont transportées sur le réseau électrique. Débit de 500 ko/s à 6 Mb/s.

1.3. La licence d'un logiciel

Chaque programme informatique est créé par un ou plusieurs personnes qui en sont les auteurs. Comme pour un livre ou pour une oeuvre d'art, les auteurs sont propriétaires des droits relatifs à ce logiciel : droit d'utiliser le logiciel, droit de le copier, de le modifier, de l'intégrer dans un autre programme, droit de le rediffuser... En France (et de façon générale en Europe), les auteurs peuvent protéger leurs droits grâce au Droit d'Auteur ou Code de la Propriété Intellectuelle (à ne pas confondre avec le Code de la Propriété Industrielle). Dans les pays de droit Anglo-Saxon, les droits sont assurés par le système du Copyright, similaire au Droit d'Auteur. Chaque auteur est libre de céder en partie ou en totalité certains de ces droits, gratuitement ou non. Il diffuse alors son logiciel en l'accompagnant d'un texte qui explique quels droits sont accordés, à qui, sous quelles conditions.

Avant d'installer ou d'utiliser un logiciel, vous lisez les conditions de distribution qui l'accompagnent. En général, les conditions de distribution figurent dans une licence.

On distingue deux grandes familles de logiciels :

• les logiciels libres : le code source du logiciel est disponible, vous avez le droit d'examiner le logiciel, de le modifier pour l'adapter à vos besoins, de le rediffuser tel quel ou avec vos modifications, de l'utiliser dans tous les environnements. C'est le logiciel le plus intéressant pour l'utilisateur. La plupart des logiciels libres sont diffusés sous licence libre GPL. Pour les autres licences libres, voir http://www.fsf.org/philosophy/license-list.fr.html

• les logiciels propriétaires : une au moins des libertés du logiciel libre n'est pas accordée. Par exemple, l'utilisation sera limitée à un usage personnel ou vous ne pourrez pas modifier le programme.

Remarques : quelle que soit la licence, le logiciel peut aussi bien être gratuit que payant.
On utilise parfois le terme Open Source pour désigner un logiciel libre. Mais ce terme est souvent utilisé abusivement pour désigner un logiciel dont le code source est rendu disponible par ses auteurs, sans pour autant que le logiciel soit libre.

Suivant les droits accordés par la licence, la façon de diffuser le logiciel, de le faire payer... on distinguera plusieurs catégories pour désigner ces logiciels. Pour plus de détails sur les différentes catégories de logiciels, voir http://www.gnu.org/philosophy/categories.fr.html.

Pour protéger votre logiciel, mentionnez tout simplement que vous en êtes l'auteur (© Copyright Adam BROS 2001). Accompagnez-le d'un texte mentionnant les droits accordés.

2. Le langage HTML

2.1. Historique

Pour avoir un aperçu de ce qu'est le langage HTML, consultez un site internet avec votre navigateur. Dans les menus de votre navigateur, vous trouverez une fonction du style 'Afficher le code HTML' ou bien 'Voir le contenu de la page'. Une nouvelle fenêtre s'ouvrira alors, remplie de code HTML qui consiste en une succession de fonctions entourées par les signes < , </ et >. Par exemple, <TABLE>,</TD> ...
Ces fonctions sont appelées des 'tags' HTML ou 'balises' HTML. On distingue les balises d'ouverture et les balises de fermeture qui sont presque identiques, les balises de fermeture comportent une barre oblique / après le signe<.
Par exemple, <TD> est une balise d'ouverture, </TD> est une balise de fermeture. Une balise de fermeture est toujours utilisée avec la balise d'ouverture qui lui correspond.
Le texte à afficher dans les pages HTML est encadré par ces balises d'ouverture et de fermeture, ce qui permet de lui attribuer des caractéristiques de mise en forme, de position dans la page...

Cette technique est issue du journalisme où les correcteurs annotaient les textes des rédacteurs en encadrant les passages à souligner, à mettre en gras... par des 'tags', sortes de signes ayant chacun une signification bien précise.

Des spécifications de description, de formatage de documents ont donc été définies sur ce principe, donnant naissance au SGML (Structured Generalized Markup Language). Trop complexe à utiliser, un langage plus simple en a été extrait : le HTML (HyperText Markup Language), dont nous allons étudier les fonctions à travers l'utilisation de ses différentes balises. De nouvelles spécifications issues aussi de SGML commencent à être utilisée, elle apporte des outils complémentaires à HTML : il s'agit du XML. Nous en verrons le principe plus loin.

Remarque : afin de rendre votre code HTML compatible avec la norme XML, respectez ces consignes lorsque vous écrivez du code HTML :

• à chaque balise d'ouverture doit correspondre une balise de fermeture (sauf cas particuliers qui seront abordés plus loin)

• les balises peuvent être écrites en minuscules ou en majuscules mais une balise de fermeture doit impérativement être écrite de la même façon que la balise d'ouverture qui lui correspond.

• les valeurs des attributs contenus dans les balises doivent toujours être écrites entres guillemets "".

Un attribut est une option ajoutée à l'intérieur d'une balise d'ouverture et qui permet de moduler l'effet de cette balise sur les zones de texte qui suivent. Par exemple, pour la balise de début de paragraphe <P>, on peut utiliser l'attribut align pour définir la position du paragraphe :
<P align="center">

2.2. Le navigateur

Le navigateur internet est un logiciel client qui est installé sur votre ordinateur. Il transmet votre demande de consultation d'un site, aux serveurs DNS, en utilisant le protocole de communication HTTP. Les serveurs DNS relaient cette demande au serveur qui héberge le site demandé. Ce serveur vous renvoie du code HTML. Ce code est reçu par votre navigateur qui l'interprète et vous affiche alors une page internet.

Il existe différents navigateurs :

• internet Explorer (Windows. Licence propriétaire. Gratuit)

• Netscape Navigator (Linux, Windows, MacOS. Utilisation libre avec restrictions. Gratuit) est développé à partir de Mozilla. Voir http://www.netscape.fr

• Mozilla (Linux, Windows, MacOS. Licence libre. Gratuit), voir http://www.mozilla.org

• Konqueror (Linux. Licence libre. Gratuit), voir http://www.konqueror.org

• Galéon (Linux. Licence libre. Gratuit), voir http://galeon.sourceforge.net

• Opera (Linux, Windows, MacOS. Licence propriétaire. Payant), voir http://www.opera.com

• Lynx (Linux et Windows. Licence Libre. Gratuit), voir http://lynx.browser.org. C'est un navigateur en mode texte.

• Links, un équivalent de Lynx (Linux, Window et Mac OS. Licence Libre. Gratuit) Voir http://links.sourceforge.net

et bien d'autres encore...

Les modules : certains navigateurs n'intègrent pas toutes les technologies (animations au format Flash ou RealVideo...) et ne comprennent donc pas toutes les commandes contenues dans les pages internet. Soit parce que cette technologie est trop récente, soit pour des raisons commerciales. On peut pallier à cela en ajoutant les fonctionnalités manquantes au navigateur, sous forme de petits programmes qui lui sont ajoutés. Ces programmes seront chargés en mémoire en même temps que le navigateur ou uniquement lorsqu'on en a besoin. On appelle ces programmes des modules ou plug-ins. Chaque navigateur utilise son propre système de plug-ins, certains navigateurs acceptent aussi les plug-ins d'autres navigateurs. En tapant about:plugins dans la barre de navigation de certains navigateurs (Netscape, Mozilla, Galeon), vous verrez la liste des plug-ins disponibles.

La syntaxe du code HTML est définie dans les recommandations éditées par le W3C Consortium (voir http://www.w3.org). Quand on consulte la même page HTML sur un site internet, avec différents navigateurs, on constate de légères différences à l'affichage. Pourquoi ces différences ?
- chaque navigateur a été écrit différemment et interprète donc avec plus ou moins de bonheur le code HTML qui lui est envoyé par le serveur.
- certaines pages sont parfois écrites avec du code HTML un peu fantaisiste (à cause du créateur ou du logiciel de création utilisé) et les pages sont mal interprétées par certains navigateurs.
- ces normes ont évolué avec l'ajout de nouvelles fonctions HTML. Si vous utilisez un navigateur ancien qui n'interprète pas ces fonctions, vous observerez donc des bizarreries, votre site sera parfois impossible à consulter.

Quelques conseils pour concevoir un bon site Internet :

• utilisez du code HTML simple, évitez les fonctions trop compliquées, les technologies qui ne sont pas intégrées dans tous les navigateurs ou qui nécessitent l'ajout de modules. Ou alors, concevez un site qui puisse être consulté à la fois avec et sans l'activation de ces technologies.

• après avoir créé votre site, consultez-le avec un maximum de navigateurs différents, sur plusieurs systèmes (Unix, Windows et Mac) et sous des résolutions d'écran différentes. Consultez-le aussi avec un navigateur en mode texte (Lynx ou Links), couplé avec une commande vocale pour les malvoyants.

Ces recommandations peuvent paraître très contraignantes mais nous allons voir qu'il est possible de faire de magnifiques sites internet de façon simple en n'utilisant que les fonctions de base du HTML et en ne choisissant que certaines technologies. Tenez-en compte surtout si votre site n'est pas qu'une simple vitrine mais par exemple un site d'achat en ligne.

A retenir : la visualisation d'une page en langage HTML est indépendante du système d'exploitation, elle ne dépend que du navigateur qui l'interprète. HTML est un standard ouvert, implémentable dans tous les logiciels. Il est donc très intéressant à utiliser pour diffuser des documents lisibles par tout le monde (notion d'interopérabilité).

2.3. La conception des pages

Avant de se lancer dans l'écriture d'un site internet, il faut définir sa finalité puis sa structure et les fonctions proposées et enfin, préparer une maquette.

La finalité : un site peut servir à présenter une association, à faire du commerce électronique, à informer, à recueillir des pétitions, à enseigner, à jouer, à proposer des réservations...

La structure : il pourra être composé d'une seule page de présentation, de plusieurs pages reliées par un menu commun, d'un catalogue avec une base de donnée, de formulaires à remplir, d'espaces de discussion....

La maquette : pas besoin d'être un artiste, il suffit de dessiner rapidement à la main les différentes pages du site, d'y décrire les fonctions évoluées, de faire un schéma décrivant le fonctionnement pour passer d'une page à l'autre... La présentation et le graphisme peuvent aussi faire l'objet d'essais plus poussés (croquis en couleur).

Amusez-vous à consultez quelques sites au hasard. Définissez leur(s) finalité(s), analysez leur structure et leurs fonctionnalités. Notez les astuces de présentation et d'organisation qui vous paraissent originales, qui améliorent la consultation (effet visuels, choix de la résolution, des couleurs, ergonomie...).

2.4. Les commandes HTML

2.4.1. Quelques commandes pour commencer

Nous allons créer notre première page (la 'page d'index') avec un simple éditeur de texte. Nous allons l'enregistrer en l'appelant index.htm (notation issue du monde Microsoft) ou index.html (notation issue du monde UNIX), peu importe. Le nom 'index' est important car lorsqu'un navigateur accède à un site internet, c'est la page index.html ou index.htm qui est envoyée en premier par le serveur. Si le serveur utilise le langage PHP, il recherche en premier une page appelée index.php ou index.php3, s'il ne les trouve pas, il recherche ensuite une page index.html ou index.htm.

Un premier exemple de page :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Ceci est un commentaire -->
<HTML>

<HEAD>
<!--
Encore un commentaire
sur plusieurs lignes.
-->
<TITLE>Ma première page</TITLE>
</HEAD>

<BODY topmargin="0" leftmargin="0">
Ce texte s'affichera dans le navigateur.
<!-- On peut mettre des commentaires où on veut, de toute façon, ils n'apparaîtront pas sur le site internet.
-->
</BODY>

</HTML>

La première ligne indique au navigateur que le document respecte la norme HTML 4.01 Transitional, c'est-à-dire :
- que le document respecte la norme HTML 4.01.
- que le document peut aussi contenir certaines instructions issues des normes HTML précédentes, qui ne sont plus recommandées dans la norme HTML 4.01 mais tout de même tolérées et donc à prendre en compte.
Toutes les instructions HTML que nous allons étudier respectent la norme HTML 4.01 Transitional, sauf indication contraire. Cette norme est intéressante car elle assure une bonne compatibilité avec la plupart des navigateurs internet.

Une page en HTML est encadrée par les balises d'ouverture <HTML> et de fermeture </HTML> . Elle est composée de deux grandes parties : l'en-tête et le corps. L'en-tête est encadré par les balises <HEAD> et </HEAD>. L'en-tête contiendra divers paramètres destinés au navigateur et aux robots d'indexage. Le texte contenu entre les balises <TITLE> et </TITLE> sera affiché tout en haut de la fenêtre du navigateur. Le corps est encadré par les balises <BODY> et </BODY>. Dans le corps, nous placerons tout ce que nous voulons voir sur la page affichée par le navigateur. Vous pouvez ajouter des commentaires dans votre code HTML en les plaçant entre les balises <!-- et -->, ils ne seront pas affichés par le navigateur mais rendront votre code plus lisible.

Pour la balise <BODY>, on peut utiliser les attributs topmargin et leftmargin pour définir l'épaisseur en pixels des marges à gauche et en haut de la page qui sera affichée par le navigateur. Ces 2 attributs ne font pas partie de la norme HTML 4.01 Transitional, ils sont ignorés par certains navigateurs.

Nous allons d'abord étudier le code HTML qui peut être placé dans le corps. Nous pouvons y placer n'importe quel texte :

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

<HEAD>
<TITLE>Ma première page</TITLE>
</HEAD>

<BODY>
Ceci est mon CV. Vous y lirez la description de mes formations, de mes expériences
professionnelles

stages, jobs d'été, emplois...
</BODY>

</HTML>

Enregistrez votre document index.html et ouvrez-le avec un navigateur pour visualiser le résultat. Vous verrez que le texte est automatiquement mis bout à bout et qu'il est positionné par défaut à gauche. Les espaces supplémentaires, les tabulations, les passages à la ligne suivante sont ignorés.
Si vous voulez que votre texte commence à la ligne suivante, vous pouvez utiliser la balise <BR>. C'est une des rares balises HTML qui ne nécessite pas de balise de fermeture. Vous pouvez afficher plusieurs passages à la ligne suivante en cumulant les balises :

Ceci est mon CV.<BR><BR><BR>Vous y lirez la description de mes formations, de mes expériences
professionnelles<BR><BR>
stages, jobs d'été, emplois...

Pour voir les changements effectués, n'oubliez pas à chaque fois d'enregistrer votre fichier dans votre éditeur et de cliquer sur l'icone 'Actualiser' ou 'Recharger' dans votre navigateur.
Remarque : si plusieurs balises <BR> se succèdent, écrivez-les toujours accolées, sans passer de ligne. Par exemple :

Ceci est une bonne syntaxe (affichera 2 passages à la ligne)<BR><BR>
Ceci est une mauvaise syntaxe<BR>
<BR>
(n'affichera qu'un seul passage à la ligne avec certains navigateurs).

Vous pouvez aussi structurer votre texte en paragraphes en utilisant les balises <P> ET </P> :

<P>Ceci est mon CV.</P>
<P>Vous y lirez la description de mes formations, de mes expériences
professionnelles :<BR><BR>
stages, jobs d'été, emplois...</P>

Remarquez qu'au début et à la fin de chaque paragraphe, le navigateur ajoute automatiquement un saut d'une ligne (équivalent à 2 passages à la ligne suivante <BR><BR>). Pour délimiter un paragraphe sans saut de ligne avant et après, on peut utiliser les balises <DIV> et </DIV> :

<DIV>Ceci est mon CV.</DIV>
<DIV>Vous y lirez la description de mes formations, de mes expériences
professionnelles :<BR><BR>
stages, jobs d'été, emplois...</DIV>

Vous pouvez aussi forcer le navigateur à prendre en compte le formatage de votre texte en l'encadrant par les balises <PRE> et </PRE>. Votre texte apparaît alors tel que vous l'écrivez, les espaces, tabulations, et passages à la ligne suivante sont conservés :

<PRE>
Ceci est mon CV.

Vous y lirez la description de mes formations, de mes expériences
professionnelles :
stages, jobs d'été, emplois...
</PRE>

Notez que le texte est affiché dans ce cas avec une police différente de la police par défaut. La balise <PRE> est très peu utilisée car elle empêche le texte de s'adapter à la taille de la fenêtre du navigateur, ce qui le rend inconfortable à lire. On ne l'utilise par exemple que pour afficher dans une page des listings informatiques, des extraits de programmes...

Lorsque vous écrivez une phrase qui dépasse la largeur de l'écran, le navigateur l'affiche automatiquement sur plusieurs lignes pour qu'elle soit complètement visible à l'écran. Si vous diminuez par exemple la taille de le fenêtre d'affichage du navigateur, le texte s'adapte instantanément à cette nouvelle taille. Très pratique, cela vous évite de déplacer la zone d'affichage avec la barre de défilement de la fenêtre du navigateur. Si vous voulez absolument que votre texte garde toujours la même largeur, au risque de dépasser la taille de la fenêtre, vous devez l'encadrer avec la balise<NOBR> :

<NOBR>Cette phrase dépasse la largeur de l'écran, elle devrait s'afficher sur plusieurs lignes mais en réalité, elle s'affichera sur une seule ligne car elle est encadrée par la balise NOBR. Pour la lire jusqu'à la fin, vous devez utiliser la barre de défilement du navigateur, ce qui n'est pas très<BR><BR> pratique.</NOBR>

2.4.2. Les couleurs

En HTML, il est possible de définir une couleur par défaut pour le fond de la page et pour le texte affiché, en utilisant les attributs bgcolor et text de la balise <BODY> :

<BODY bgcolor="#EEEEEE" text="#000022">

Chaque couleur est codée en hexadécimal sur six caractères. Le système de codage utilisé est le RVB. Les deux premiers caractères indiquent la quantité de rouge, les caractères 3 et 4 indiquent la quantité de vert, les 2 derniers caractères indiquent la quantité de bleu. Chaque composante rouge, vert ou bleu peut donc prendre une valeur de 0 à 255, on peut donc définir 256³= 16 777 216 couleurs.

Exemples : le blanc se code #FFFFFF, le noir #000000, le rouge#FF0000, le vert #00FF00, le bleu #0000FF.

Pour connaître le code d'une couleur, on peut télécharger des petits utilitaires de dessin qui indiquent le code correspondant. Tout les bons logiciels de dessin proposent aussi cette fonction : Photoshop, Gimp (voir http://www.gimp-fr.org/.

On peut aussi coder certaines couleurs en utilisant son nom anglais :

<BODY bgcolor="white" text="darkblue">

Mais les navigateurs ne reconnaissent pas tous les noms et affichent parfois une couleur différente. A éviter donc.

Il est recommandé de définir un fond de page très légèrement coloré (gris ou jaune très pâle..) à la place d'un fond blanc qui donne un contraste trop fort avec un texte noir et fatigue la vue. La couleur du fond sera ignorée si on imprime la page, elle n'est donc pas gênante.

Après avoir défini la couleur par défaut du texte, il est possible de changer la couleur de certaines portions du texte en utilisant l'attribut COLOR dans la balise <FONT> :

<BODY bgcolor="#EEEEEE" text="#000000">
<P>
<FONT COLOR="#000033">
Ce texte est affiché en bleu clair.
</FONT>
Ce texte est en noir.
</P>
</BODY>

2.4.3. L'affichage de caractères spéciaux

L'internationalisation du langage HTML a amené à établir une norme pour l'affichage des caractères spécifiques à chaque langue (caractères accentués en français, alphabet cyrillique, chinois, arabe...). C'est la norme UNICODE ou ISO/CEI 10646 ou i18n. Elle définit l'affichage de plusieurs milliers de caractères (le codage ASCII ne définissait que 128 caractères, le codage ANSI ou ASCII étendu n'en définissait que 256). La syntaxe pour afficher des caractères ISO en HTML est :
En notation décimale : l'esperluette & puis le dièse # suivi du code ISO en notation décimale puis un point-virgule.
En notation hexadécimale : l'esperluette & puis le dièse # puis x ou X suivi du code ISO en notation hexadécimale puis un point-virgule.

Exemples :

L'utilisation de cette norme évitera à un norvégien qui consulte votre page, de voir des signes cabalistiques à la place des caractères é, è, à...
Les caractères les plus utilisés peuvent aussi être représentés par une abréviation (on dit aussi une entité) précédée d'une esperluette et suivie d'un point-virgule. Par exemple, l'espace sera représenté par &nbsp; le caractère é par &eacute; ou bien le caractère à par &agrave; etc...
Cette notation est plus facile à retenir.

Voici un extrait des codes ISO :

Vous pouvez consulter les autres abbrévations sur le site http://www.w3.org/TR/html401/sgml/entities.html et les autres codes sur le site http://www.unicode.org/charts/.

2.4.4. Les titres

Pour rendre le texte plus lisible, nous allons ajouter des titres en les encadrant avec les balises <H1>, <H2>...jusqu'à<H6>. Le texte placé entre ces balises apparaîtra plus grand. La taille la plus grande est obtenue en utilisant la balise<H1> (titre de premier niveau), la taille la plus petite est obtenue avec la balise <H6> (titre de sixième niveau) :

<BODY>
<H1>Ceci est mon CV</H1>
<H3>Formations</H3>
Dans ce chapitre, vous lirez la description de mes formations.
<H3>Expériences professionnelles</H3>
Dans ce chapitre, vous lirez la description de mes expériences
professionnelles (stages, jobs d'été, emplois...).
</BODY>

Remarquez que le navigateur ajoute automatiquement un espacement d'une ligne avant et après chaque titre, tout comme avec la balise<P>.

2.4.5. Les listes

L'HTML propose aussi des balises pour présenter une liste d'énumérations de façon automatique. Plusieurs présentations sont possibles.

a) La liste de définition (Definition List) ou glossaire :
Le titre de la liste est encadré par des balises <DT> (Definition List Title). Les termes de la liste sont encadrés par des balises <DD> (Definition List Data), ils sont décalés vers la droite.

<DL>
<DT><B>Titre de la liste</B></DT>
<DD>Première ligne de la liste, décalée vers la droite.</DD>
<DD>Deuxième ligne de la liste, décalée vers la droite.</DD>
<DT><B>Un autre titre</B></DT>
<DD><IMG src="images/petit_point_rond.gif">Deuxième ligne, précédée d'une petite image.</DD>
<DD>Quatrième ligne de la liste, décalée vers la droite.</DD>
</DL>

b) La liste non-ordonnée (Unordered List) ou liste à puce : une puce est placée devant chaque ligne. On peut afficher la puce sous forme d'un rond noir, d'un carré noir ou d'un cercle vide :

<UL type="disc">
<LI>Ligne précédée d'une puce sous forme d'un rond noir.</LI>
<LI>Encore une ligne précédée d'une puce sous forme d'un rond noir.</LI>
</UL>

<UL type="square">
<LI>Ligne précédée d'une puce sous forme d'un carré noir.</LI>
</UL>

<UL type="circle">
<LI>Ligne précédée d'une puce sous forme d'un cercle vide.</LI>
</UL>

c) La liste ordonnée (Ordered List) ou liste numérotée : un numéro est placé devant chaque ligne. On peut commencer à la valeur de son choix avec l'attribut start.

<OL type="1" start="0">
<LI>Ligne précédée du chiffre 0.</LI>
<LI>Ligne précédée du chiffre 1.</LI>
</OL>

On peut afficher des chiffres romain en minuscule (attention, la valeur 0 n'existe pas en chiffre romain) :

<OL type="i" start="10">
<LI>Ligne précédée du chiffre x.</LI>
<LI>Ligne précédée du chiffre xi.</LI>
</OL>

On peut afficher des chiffres romain en majuscule :

<OL type="I">
<LI>Ligne précédée du chiffre I.</LI>
<LI>Ligne précédée du chiffre II.</LI>
</OL>

On peut afficher des lettres en minuscule :

<OL type="a" start="3">
<LI>Ligne précédée de la lettre c.</LI>
<LI>Ligne précédée de la lettre d.</LI>
</OL>

On peut afficher des lettres en majuscule :

<OL type="A" start="2">
<LI>Ligne précédée de la lettre B.</LI>
<LI>Ligne précédée de la lettre C.</LI>
</OL>

On peut bien sûr imbriquer à volonté les différentes listes, ce qui donne parfois une présentation très agréable, par exemple pour faire un sommaire.

2.4.6. La ligne horizontale

Vous pouvez séparer des zones de texte par une ligne horizontale. La syntaxe est :

<HR width="87" size="3" color="#454545" noshade>

Remarquez qu'il n'y a pas de balise de fermeture, tout comme avec <BR>. L'attribut width détermine la largeur de la ligne en pixels. On peut aussi indiquer une largeur en pourcentage de la largeur de la fenêtre du navigateur :

<HR width="60%">

L'attribut size détermine l'épaisseur de la ligne. On peut utiliser des valeurs de 1 à ...beaucoup. Par défaut, la valeur est 2.

L'attribut color permet de définir la couleur de la ligne. Il ne fait pas partie de la norme HTML 4.01 Transitional, il sera ignoré par certains navigateurs.

L'attribut noshade permet de supprimer l'effet d'ombrage sur la ligne horizontale.

REMARQUES : Nous venons d'étudier un bon nombre d'attributs. TOUS les attributs des balises sont bien entendu facultatifs. Libre à vous de décider quels attributs vous souhaitez utiliser ou non dans chaque balise.

2.4.7. L'alignement des objets

Jusqu'à présent, tout ce que nous avons écrit est affiché par défaut sur la gauche de la fenêtre du navigateur, sauf les lignes de séparation qui sont centrées. Nous pouvons forcer l'affichage du texte à gauche, au centre ou à droite avec l'attribut align. Cet attribut peut s'utiliser avec les balises <P>, <DIV>, <H1> à <H6>, <HR>  :

<H3 align="center">Ceci est mon CV</H3>
<P align="right">Ce texte-ci est placé à droite.<BR>
<HR align="center" width="50%">Celui-ci est centré</HR>
</P>
<DIV align="center">Ce texte simple est centré.</DIV>
<DIV align="left">
<H1>Ceci est mon CV</H1>
<H3>Formations</H3>
Dans ce chapitre, vous lirez la description de mes formations.
<P align="right">Ce texte-ci est placé à droite.</P>
<P>Et celui-ci reste à gauche</P>
<FONT color="#000033">C'est logique, non ?</FONT>
</DIV>

2.4.8. Le formatage du texte

Pour mettre du texte en gras (bold) :

<B>Ce texte s'affiche en gras</B>

Pour mettre du texte en italique et en gras :

<B><I>Ce texte s'affiche en gras et en italique</I></B>
ou bien :
<I><B>Ce texte s'affiche en gras et en italique</B></I>
Attention à la syntaxe. Les balises doivent toujours être imbriquées, elles ne doivent jamais se croiser :
<B><I>Cette syntaxe est fausse.</B></I>

Pour souligner (underlined) un texte en gras et en italique :

<U><I><B>Ce texte est en gras, italique et souligné.</B></I></U>

Pour mettre du texte en exposant :

a<SUP>n</SUP> + b<SUP>n</SUP> = c<SUP>n</SUP>

Pour mettre du texte en indice :

2 H<SUB>2</SUB> + O<SUB>2</SUB> = 2 H<SUB>2</SUB>O

Pour augmenter et diminuer la taille du texte :

Texte normal<BR><BR>
<SMALL>Texte plus petit<BR><BR>
<SMALL>Encore plus petit</SMALL></SMALL><BR><BR>
<BIG><BIG><BIG><BIG><BIG><BIG><BIG>Bien plus grand</BIG></BIG></BIG></BIG></BIG></BIG></BIG>

Pour afficher du texte barré (strike) :

<S>Ce texte s'affiche barré</S>

Pour afficher du texte qui clignote (attention ! ce n'est pas reconnu par tous les navigateurs et ça peut être énervant à regarder) :

<BLINK>Ce texte clignote à l'écran</BLINK>

2.4.9. La police et la taille des caractères

Il est possible de choisir la police et la taille des caractères avec les attributs face et size de la balise FONT :

<FONT face="Arial" size="2" color="#008000">Ce texte s'affiche en Arial, taille 2</font>

Un navigateur n'intègre pas les fichiers de description des polices, il fait appel aux polices déjà installées sur l'ordinateur où il est exécuté. Il vaut donc mieux utiliser des polices de caractères qui sont en général installées sur tous les ordinateurs : Arial, Courier, Comic Sans MS...
Si la police mentionnée n'est pas installée sur l'ordinateur où s'exécute le navigateur, celui-ci va utiliser la police par défaut qui a été définie dans ses paramètres de réglage.

La taille du texte est définie avec l'attribut SIZE qui a pour valeurs 1 à 7. La valeur 1 correspond à la plus petite taille. On peut aussi utiliser la notation :

<FONT size="+4" >Ce texte s'affiche 4 tailles au-dessus de la valeur de référence, donc à la taille 7</font>
ou bien :
<FONT size="-2" >Ce texte s'affiche 2 tailles en-dessous de la valeur de référence, soit à la taille 1</font>

Dans ce cas, on se réfère à une valeur de référence qui est par défaut 3. On peut changer cette valeur de référence ave la balise BASEFONT :

<BASEFONT size="7">
<FONT size="-2" >Ce texte s'affiche 2 tailles en-dessous de la valeur de référence, soit à la taille 5</font>

L'inconvénient est que nous ne disposons que de 7 tailles différentes. Pour obtenir d'autres tailles, il faudra utiliser d'autres méthodes que nous verrons plus loin.

2.4.10. Insérer des images dans une page

Supposons que vous voulez afficher dans votre page l'image appelée ma_photo.jpg, enregistrée dans le même répertoire que votre page HTML. La syntaxe est :

<IMG src="ma_photo.jpg">

Pour mieux structurer vos données, regroupez vos images dans un sous-répertoire 'images', vos vidéos dans un sous-répertoire 'video'... Vous écrirez alors :

<IMG src="images/ma_photo.jpg">

On dit que le chemin qui indique l'emplacement de l'image est relatif. En effet, il est décrit par rapport au répertoire où est enregistré le fichier HTML qui fait appel à l'image. L'intérêt est qu'on peut déplacer l'ensemble fichier HTML+sous-répertoire contenant les images sans perturber le fonctionnement.
On peut aussi indiquer l'emplacement de l'image de façon absolue, mais cela est déconseillé :

<IMG src="/mes_documents/html/images/ma_photo.jpg">

Si l'image est enregistrée sur un autre site internet :

<IMG src="http://www.laboiboitaCV/images/ma_photo.jpg">

Par défaut, la taille de l'image s'affiche à sa taille normale. Vous pouvez la forcer à s'afficher à une échelle différente en indiquant soit sa hauteur, soit sa largeur (ou bien les deux dimensions, ce qui permet par exemple de déformer l'image). Cette indication se fait en nombre de pixels :

<IMG src="ma_photo.jpg" width="250" height="200">

Remarque : même si vous voulez afficher l'image à sa taille normale, indiquez tout de même sa hauteur et sa largeur. Cela évite au navigateur de calculer sa taille et accélère l'affichage. Ce conseil est plus particulièrement utile si vous décidez de placer toute une galerie de photos sur votre page. Pour connaître la taille de votre image, ouvrez-la dans un logiciel de dessin, il vous l'indiquera.

En prévision des navigateurs qui refusent d'afficher une image ou sur lesquels l'affichage a été désactivé, il faut toujours prévoir un descriptif de l'image, qui sera affiché à sa place. On l'ajoute avec l'attribut alt :

<IMG src="ma_photo.jpg" alt="Une photo de ma maison">

Pour entourer votre image avec un cadre, vous pouvez utiliser l'attribut border (l'épaisseur de la bordure est en pixels) :

<IMG src="ma_photo.jpg" border="5" alt="Une photo de ma maison">

L'espace entre le texte et les bords de l'image peut être défini en pixels avec les attributs hspace et vspace :

<DIV>
Cette image est alignée par défaut sur la gauche, elle réserve un espace avec son environnement de 30 pixels sur les côtés et de 40 pixels sur le haut et le bas.
<IMG src="ma_photo.jpg" hspace="30" vspace="40">Ma cabane au Canada.
Dans certains navigateurs, ce texte sera disposé sur tout le côté de l'image, dans d'autres, il sera placé à côté et en-dessous.
</DIV>

Vous pouvez donner une légende à votre image et l'aligner en haut, au milieu ou en bas par rapport à l'image. La légende sera placée à droite de l'image, si elle est trop longue, la partie qui dépasse est automatiquement affichée en-dessous de l'image, ce qui n'est parfois pas très esthétique.

<IMG src="ma_photo.jpg" align="top">Légende en haut, à droite de l'image
<IMG src="ma_photo.jpg" align="middle">Légende au milieu, à droite de l'image
<IMG src="ma_photo.jpg" align="bottom">Légende en bas, à droite de l'image

Vous pouvez afficher une image en arrière-plan de votre page HTML (image de fond). Pour cela, utilisez la balise <BODY> avec l'attribut background pour définir quelle image utiliser et l'attribut bgproperties pour obliger l'image de fond à rester fixe lorsque la page défile vers le haut ou le bas. L'attribut bgpropertiesne fait pas partie de la norme HTML 4.01 Transitional, il sera ignoré par certains navigateurs.

<BODY background="fond_dégradé.png" bgproperties="fixed">

Vous pouvez afficher des images aux formats BMP, JPEG (extension .jpg), GIF, PNG et MNG. Certains formats (BMP, MNG...) ne sont pas reconnus par tous les navigateurs et nécessitent l'ajout d'un module externe (plug-in).

Le format (Graphics Interchange Format) :
Ce format apparaît en 1987. Il est utilisé pour stocker des images ayant jusqu'à 256 couleurs. Il comprime les données de l'image sans perte d'information en utilisant l'algorithme de compression sans perte LZW (Lempel-Ziv-Welch). Il permet aussi d'enregistrer une image ayant par exemple seulement 35 couleurs en ne stockant que ces 35 couleurs dans sa table de couleurs (sa 'palette'), ce qui diminue la taille du fichier. Il permet d'afficher des images entrelacées (affichage de l'image en plusieurs balayages, avec une amélioration de la définition à chaque balayage).
A partir de 1989, une version améliorée (GIF89a) permet d'enregistrer des images détourées avec un fond transparent, ce qui évite par exemple d'afficher une image avec un détourage blanc sur une page à fond bleu, la partie détourée de l'image aura la même couleur que le fond de la page.
Il est possible de créer des images animées avec le format GIF89a : on dessine une succession d'images qui sont affichées pendant un temps déterminé pour chaque image. Vous pouvez créer des images animées au format GIF directement depuis le site internet http://www.gifworks.com ou avec un logiciel tel que Microsoft GIF Animator. Le format GIF est soumis à un brevet et son utilisation est susceptible d'être subordonnée au versement de royalties.

Le format JPEG (Joint Experts Photographic Group) :
A utiliser pour les images ayant jusqu'à 2²⁴=16,7 millions de couleurs (photographie amateur). Il comprime les données de l'image avec perte d'information, le taux de compression est réglable. Il ne permet pas d'avoir des fonds d'images transparents, ni d'enregistrer des images animées, ni d'afficher des images entrelacées.

Le format PNG (Portable Network Graphics) :
A utiliser pour les images ayant jusqu'à 2⁴⁸ couleurs ou 2¹⁶ niveaux de gris (photographie professionnelle). Il comprime les données de l'image sans perte d'information. Il permet d'afficher des images entrelacées. Il permet d'enregistrer les images avec plusieurs niveaux de transparence, on peut avoir par exemple des détourages transparents avec des bords en dégradé ou des ombrages, on peut lisser les bords des textes (anti-aliasing). Il ne permet pas d'enregistrer des images animées. Le format PNG est libre d'utilisation. C'est un avantageux remplaçant du format GIF pour les images ayant moins de 256 couleurs, comme le recommande d'ailleurs le W3C Consortium. Il peut aussi remplacer aussi le format TIFF, utilisé dans l'industrie graphique. Au-delà de 256 couleurs, il est aussi le plus intéressant si on souhaite une compression sans perte, sinon, choisir le JPEG.
Voir http://www.libpng.org/pub/png/.

Le format MNG (Multiple-image Network Graphics) :
C'est un format de la même famille que PNG, il peut en plus contenir des animations. Voir http://www.libpng.org/pub/mng/.

Pensez aux personnes qui consulteront vos pages en se connectant à internet avec un simple modem. Evitez de créer des pages ayant une taille de plus de 50 Ko, images comprises, ou votre page sera trop longue à s'afficher.

2.4.11. Les liens hypertextes

L'une des particularités des pages internet est qu'on peut, en cliquant sur certaines zones d'une page (texte, image...), provoquer le déplacement vers une autre zone de cette page, vers une autre page du site ou même vers une page d'un autre site. Cette possibilité de naviguer d'un endroit à l'autre est obtenue en définissant dans la zone à cliquer des liens vers les zones cibles. Par exemple, nous allons placer en haut de notre page un menu avec la liste des chapitres. Chaque ligne du menu comportera un lien vers le chapitre concerné. Quand nous cliquerons sur cette ligne, le chapitre correspondant s'affichera :

<BODY>
<P>
<A name="Menu">Menu :</A><BR><BR>
1. <A href="#Chapitre 1"> Introduction</A><BR><BR>
2. <A href="#Chapitre 2"> La syntaxe</A><BR><BR>
3. <A href="#Chapitre 3"> Exemple</A>
</P>
<P>&nbsp;</P>
<P>&nbsp;</P>

'
'
(à répéter une bonne quarantaine de fois pour laisser des lignes vides)
'
'
<P>&nbsp;</P>
<P>
<A name="Chapitre 1">Introduction</A><BR><BR>
Le langage HTML permet de décrire des pages internet.<BR><BR>
<A href="#Menu">Retour au menu.</A>
</P>
<P>&nbsp;</P>
<P>&nbsp;</P>

'
'
(à répéter une bonne quarantaine de fois pour laisser des lignes vides)
'
'
<P>&nbsp;</P>
<P>
<A name="Chapitre 2">La syntaxe</A><BR><BR>
Le langage HTML consiste à encadrer le texte par des balises pour lui donner des propriétés d'affichage.<BR><BR>
<A href="#Menu">Retour au menu.</A>
</P>
<P>&nbsp;</P>
<P>&nbsp;</P>

'
'
(à répéter une bonne quarantaine de fois pour laisser des lignes vides)
'
'
<P>&nbsp;</P>
<P>
<A name="Chapitre 3">Exemple</A><BR><BR>
&#139;P&#155;Ceci est la balise pour définir un paragraphe.&#139;/P&#155;<BR><BR>
<A href="#Menu">Retour au menu</A>
</P>
</BODY>

Lorsque vous visualiserez ce code dans le navigateur, vous verrez les zones de texte 'Introduction', 'La syntaxe', 'Exemple' et 'Retour au menu' soulignées en couleur. Cela indique qu'elles comportent un lien. Si vous cliquez sur 'Exemple', la page va s'afficher dans le navigateur à partir du chapitre 3.

La syntaxe est donc :

<A name="Chapitre 3">Exemple</A>

pour définir l'endroit vers lequel pointe le lien. On appelle cet endroit une 'ancre'. Le nom de l'ancre (dans ce exemple, 'Chapitre 3') sera utilisé quand on définira un lien vers cette ancre. Le texte situé entre les balises <A Name=...> et </A> est facultatif.

<A href="#Chapitre 3"> Exemple</A>

permet de définir un lien à partir du texte ' Exemple', ce lien pointe vers l'ancre nommée 'Chapitre 3'. On peut bien sûr faire pointer plusieurs lien vers une même ancre.

On peut aussi faire pointer le lien vers une ancre nommée 'Chapitre 3' placée dans une autre page appelée par exemple 'page2.html', située dans le répertoire '../../HTML/cours' (../ désigne un répertoire situé à un niveau supérieur dans l'arborescence des répertoires) :

<A href="../../HTML/cours/page2.html#Chapitre 3"> Exemple</A>

Si en plus cette page est située sur un autre site internet, par exemple le site http://www.enim.fr :

<A href="http://www.enim.fr/cours/HTML/page2.html#Chapitre 3"> Exemple</A>

Si on veut tout simplement pointer au début de cette page, on n'indiquera aucune ancre :

<A href="http://www.enim.fr/cours/page2.html"> Exemple</A>

Si on veut tout simplement pointer sur la page d'accueil du site http://www.enim.fr (par défaut, la page 'index.htm' ou 'index.html') :

<A href="http://www.enim.fr"> Exemple</A>

Si on veut que la page vers laquelle pointe le lien s'affiche dans une seconde fenêtre du navigateur :

<A href="http://www.enim.fr" target="_blank"> Exemple</A>

Vous pouvez placer un lien sur autre chose que du texte. Par exemple, placez un lien sur une petite image appelée 'petit_logo.gif' et faites pointer ce lien vers une page qui contient la même image de taille plus grande, appelée 'grand_logo.gif' (ce procédé est utilisé par exemple pour faire une page avec une galerie d'images) :

<A href="images/grand_logo.gif"><IMG src="images/petit_logo.gif">Photo de vacance n°45</A>

L'image 'petit_logo.gif' devient cliquable, cela est indiqué par le navigateur qui ajoute une bordure autour de l'image. Pour supprimer la bordure ou changer son épaisseur, utilisez l'attribut border :

<A href="images/grand_logo.gif"><IMG src="images/petit_logo.gif" border="0">Photo de vacance n°45</A>

Un lien peut aussi renvoyer vers un serveur FTP, une adresse de messagerie, un fichier vidéo, un programme CGI.... Lorsqu'on clique dessus, il active alors le logiciel nécessaire : protocole de téléchargement FTP intégré au navigateur, logiciel client de messagerie, lecteur multimédia... Attention, tous les navigateurs ne permettent pas d'utiliser ces fonctions. Exemples :

1) Vous placez sur le serveur qui héberge votre site le fichier compressée FileZilla.zip, dans le sous-répertoire 'archives'. Sur une de vos pages, vous placez un lien qui pointe vers ce fichier :

<A href="archives/FileZilla.zip">Téléchargez FileZilla</A>

Lorsque vous cliquerez sur le lien 'Téléchargezilla', votre navigateur utilisera le protocole de transfert de fichiers FTP, il affichera une fenêtre vous demandant où vous voulez enregistrer le fichier téléchargé puis commencera le téléchargement.

2) Vous voulez proposer aux personnes qui visitent votre site d'accéder à un serveur FTP pour y télécharger des fichiers :

<A href="ftp://www.ciril.fr/">Accédez au serveur du Ciril</A>

Lorsque vous cliquerez sur le lien 'Accédez au serveur du Ciril', votre navigateur vous demandera de vous identifier (sauf s'il s'agit d'un serveur proposant un accès FTP anonyme) puis affichera les répertoires et fichiers disponibles sur le serveur.

3) Même procédure pour se connecter à un serveur Telnet, Gopher ou USENET :

<A href="telnet://tagada.new.fr/">Accédez au serveur Telnet tagada.new.fr</A>

L'affichage se fait en général en mode texte.

<A href="gopher://tagada.new.fr/">Accédez au serveur Gopher tagada.new.fr</A>

<A href="news://fr.comp.os.linux">Accédez au serveur de news fr.comp.os.linux</A>

Le navigateur affiche les messages placés dans ce groupe de discussion ou bien exécute un logiciel de news.

4) Vous voulez permettre l'envoi de messages depuis votre site :

<A href="mailto:marc.tapage@tuxfamily.org">Ecrivez moi</A>
ou encore mieux :
<A href="mailto:marc.tapage@tuxfamily.org?subject=Demande de renseignement&cc=toto@enim.fr, titi@enim.fr&bcc=tutu@enim.fr&from=moi@enim.fr&body=coucou">Ecrivez moi</A>

En cliquant sur ce lien, vous provoquez l'exécution du logiciel de messagerie défini par défaut dans les paramètres du navigateur internet, le sujet du message est automatiquement rempli avec 'Demande de renseignement', une copie est envoyée à toto enim.fr et à titienim.fr , une copie cachée est envoyée à tutu, l'expéditeur indiqué est moi@enim.fr et le contenu du message 'coucou'. Certains de ces paramètres seront ignorés par certains clients de messagerie, il faudra donc indiquer sur votre site quel lociciel de messagerie il faut utiliser.

Il est possible de changer la couleur de tous les liens d'une page grâce aux attributs link, vlink et alink de la balise BODY :

<BODY link="#550000" alink="#000055" vlink="#005500">

link indique la couleur d'un lien sur lequel on n'a pas encore cliqué, alink la couleur d'un lien qui est actif (sur lequel on vient juste de cliquer et dont l'action résultante est encore en cours), vlink indique la couleur d'un lien déjà visité (dont l'action résultante est finie, par exemple l'envoi d'un mail a été fait, le lecteur de messagerie est fermé).

2.4.12. Les images réactives

Il est possible d'afficher une image 'découpée' virtuellement en plusieurs zones cliquables. Dans chaque zone, on définit un lien. Une fois l'image affichée par le navigateur, on peut cliquer sur chaque zone de l'image, ce qui activera le lien associé.
Pour faire cela, on utilise les balises <MAP> et <AREA>.

Les balises <MAP> et </MAP> encadrent la définition des différentes zones. L'attribut name permet de donner un nom à cette définition.
La balise <AREA> sert à définir les zones cliquables de l'image. Elle n'a pas de balise de fermeture. Ses attributs sont  :
- shape : définit la forme de la zone. Il prend les valeurs "rect" (forme rectangulaire), "circle" (forme circulaire) ou "poly" (forme polygonale).
- coords : indique les coordonnées des coins supérieurs gauche et inférieur droit d'une forme rectangulaire ou les coordonnées du centre et le rayon d'une forme circulaire ou les coordonnées de chaque angle d'une forme polygonale. Chaque coordonnée est définie par rapport au point supérieur gauche de l'image.
- href pour définir le lien.

Exemple d'une image réactive, composée d'un rectangle et d'un cercle :

<MAP name="decoupage1">
<AREA shape="rect" coords="10,9,58,27" href="villes/metz.html#presentation">
<AREA shape="circle" coords="104,18,14" href="http://www.lorraine.fr">
</MAP>
<IMG src="images/carte_France.png" border="0" width="144" height="150" usemap="#decoupage1" alt="Carte de france">

L'affichage de l'image se fait avec la balise <IMG>. L'attribut usemap="#decoupage1" permet d'associer à cette image les zones cliquable définies dans la balise correspondante : <MAP name="decoupage1">.

2.4.13. Les tableaux

Jusqu'à présent, nous avons utilisé des balises qui permettent de mettre en forme du texte et des paragraphes. Nous allons voir comment placer ces divers éléments de façon plus précise dans notre page, afin d'avoir une présentation plus élaborée. Pour cela, nous allons créer des tableaux composés de cellules de tailles variées. Nous placerons ensuite tous les éléments (images, paragraphes, liens, listes...) dans certaines cellules des tableaux, obtenant ainsi une mise en page plus élaborée.

Exemple de tableau comprenant 2 lignes de 3 cellules chacune :

<TABLE>
<CAPTION valign="top">Le titre du tableau s'affiche au-dessus.</CAPTION>
<CAPTION valign="bottom">Le titre du tableau s'affiche en-dessous.</CAPTION>
<TR>
<TD>Ceci est le contenu de la cellule 1, ligne 1 </TD>
<TD><A href="fichiers/menu.html">Ceci est le contenu de la cellule 2, ligne 1</A></TD>
<TH>Ceci est le titre de la cellule 3, ligne 1</TH>
<TR>
<TR>
<TD><IMG src="images/graoully.gif">Ceci est le contenu de la cellule 1, ligne 2</TD>
<TD>Ceci est le contenu de la cellule 2, ligne 2</TD>
<TD align="center"><B>Ceci est le contenu de la cellule 3, ligne 2</B></TD>
<TR>
</TABLE>

On remarque que la balise <TABLE> indique le début du tableau, la balise <TR> indique le début d'une ligne, la balise <TD> indique le début d'une cellule. On peut remplacer les balises <TD> par des balises <TH>. Le contenu de la cellule sera alors considéré comme un titre est sera automatiquement affiché en gras et centré. Mais <TH>est très peu utilisé en pratique, on obtient la même chose avec <TD align="center"><B>Titre</B></TD>.
La balise <CAPTION> permet de donner un titre au tableau. Ce titre sera affiché juste au-dessus (valeur "top") ou juste en-dessous du tableau (valeur "bottom"). Cette balise n'est pas reconnue par tous les navigateurs.

Vous pouvez définir :

- l'épaisseur de la bordure du tableau, en pixels : attribut border . Si le tableau est utilisé uniquement pour mettre en page les différents partie (paragraphes, images...), choisissez une épaisseur nulle, le tableau deviendra invisible.

- la largeur du tableau, en pixels ou en pourcentage de la largeur de la fenêtre du navigateur : attribut width

- la hauteur du tableau, en pixels ou en pourcentage de la hauteur de la fenêtre du navigateur : attribut height. Cet attribut ne fait pas partie de la norme HTML 4.01 Transitional, il sera ignoré par certains navigateurs.

- l'affichage d'une image en fond de tableau : attribut background

- une couleur de fond (peut être cumulée avec l'image de fond si celle-ci est détourée par exemple) : attribut bgcolor

- la couleur des bordures (du tableau et des cellules) : attribut bordercolor.

- pour donner un effet d'ombrage aux bordures (du tableau et des cellules), on peut distinguer la couleur des parties supérieure et gauche des bordures (attribut bordercolorlight) et la couleur des parties inférieure et droite (attribut bordercolordark). Cela ne marche pas avec tous les navigateurs.

- l'espacement en pixels entre les cellules (c'est-à-dire l'épaisseur du quadrillage entre les cellules) : attribut cellspacing

- l'espacement en pixels entre le bord intérieur des cellules et son contenu : attribut cellpadding

Exemple :

<TABLE border="7" width="60%" height="150" bgcolor="#FFFFFF" background="images/graoully.jpg" bordercolor="#00FF00" bordercolorlight="#00FFFF" bordercolordark="#000080" cellspacing="4" cellpadding="10">

Vous pouvez aussi utiliser l'attribut align avec les valeurs "right","center" et "left" pour positionner le tableau à droite, au milieu ou à gauche. Mais le résultat est désastreux avec certains navigateurs. Il vaut mieux positionner le tableau en l'encadrant dans des balises <DIV align="left"> ou <P align="center">.
Remarquez qu'un saut de ligne est affiché avant et après un tableau.

Maintenant, nous allons nous intéresser au contenu des cellules. Vous pouvez mettre en forme l'intérieur d'une cellule en ajoutant des attributs aux balises <TD> ou <TH>:

- align aligne horizontalement le contenu de la cellule. Il prend les valeurs "left", "center" ou "right" .

- valign aligne verticalement le contenu de la cellule. Il prend les valeurs "top", "middle" ou "bottom" .

- width fixe la largeur de la cellule, en pixels ou en pourcentage de la largeur du tableau.

- height fixe la hauteur de la cellule, en pixels ou en pourcentage de la hauteur du tableau.

- bgcolor indique la couleur de fond de la cellule.

- background affiche une image comme fond de la cellule.

- bordercolor indique la couleur de la bordure.

- bordercolorlight indique la couleur des parties supérieure et gauche de la bordure.

- bordercolordark indique la couleur des parties inférieure et droite de la bordure.

- nowrap force le texte à s'afficher sur une seule ligne, le renvoi automatique à la ligne est supprimé. Ne marche pas si la largeur de la cellule a été définie en pixels.

Exemple:

<TD align="left" valign="top" width="40%" height="30" bgcolor="#FFFFFF" background="images/graoully.jpg" bordercolor="#00FF00" bordercolorlight="#00FFFF" bordercolordark="#000080" nowrap >

Il est parfois utile d'avoir certaines cellules du tableau plus grandes que les autres. Pour cela, on fusionne alors plusieurs cellules ensembles, horizontalement ou/et verticalement. Par exemple, pour obtenir le tableau suivant:

<TABLE border ="1" width="100%">
<TR>
<TD width="50%" colspan="2" align="center">1 + 2</TD >
<TD width="25%" align="center">3</TD >
<TD width="25%" align="center">4</TD >
</TR>
<TR>
<TD width="25%" align="center">5</TD >
<TD width="25%" rowspan="3" align="center">6 + 10 + 14</TD >
<TD width="50%" colspan="2" rowspan="2" align="center">7 + 8 + 11 + 12</TD >
</TR>
<TR>
<TD width="25%" align="center">9</TD >
</TR>
<TR>
<TD width="25%" align="center">13</TD >
<TD width="25%" align="center">15</TD >
<TD width="25%" align="center">16</TD >
</TR>
</TABLE >

L'attribut colspan permet de réunir des cellules horizontalement, rowspan permet de réunir les cellules verticalement. La combinaison des 2 fusionne les cellules verticalement et horizontalement. La méthode pour écrire un tel tableau est d'abord de le dessiner, de numéroter chaque cellule comme ci-dessus puis de le parcourir case par case, de gauche à droite et du haut vers le bas. On écrit une balise <TR> dès qu'on passe à une nouvelle ligne, une balise <TD> dès qu'on passe à une nouvelle cellule ou à nouvel ensemble de cellules fusionnées. Chaque ensemble de cellules fusionnées ne sera indiqué que dans une seule balise <TD> , on n'écrit pas une deuxième balise si on l'a déjà fait dans une ligne précédente.

Pour des mises en pages avec des tableaux très complexes (tableaux imbriqués dans d'autres tableaux, fusions complexes...), on fera d'abord une ébauche avec un éditeur HTML graphique.
Les tableaux sont aussi utilisés pour faire des présentations graphiques complexes, composées de plusieurs morceaux d'images. On place chaque morceau d'image dans une cellule. On peut ainsi combiner du texte ou des liens avec ces images et créer par exemple des menus très esthétiques. Pour découper une image en plusieurs morceaux et placer chaque morceau dans une cellule, on peut utiliser des logiciels qui font cela de façon automatique tels que SplitImage (Windows. Freeware. Téchargeable sur le site http://www.thecastle.com).

2.4.14. Les frames

Avec des balises spécifiques, on définit plusieurs zones (des ' frames') dans une page. Dans chacune de ces zones, une autre page HTML pourra être affichée. Cela permet d'afficher plusieurs pages dans une seule fenêtre. Si une page est plus grande que la zone qui lui est attribuée, elle sera bordée par des barres de défilement. On pourra donc la faire défiler à l'intérieur de sa zone sans faire bouger les pages des autres zones, chaque zone est indépendante. Une page peut être affichée dans plusieurs zones de la page principale.

La personne qui visualise la page dans le navigateur pourra modifier la taille des frames avec sa souris, en cliquant puis en déplaçant les lignes qui séparent chaque frame.

Cette technique permet de n'écrire qu'une seule fois le code HTML des parties communes à toutes les pages d'un site (zone de titre, zone de menu, zone de copyright...). Ce code est écrit dans plusieurs fichiers HTML qui seront affichés dans les frames de chaque page du site.
Certains navigateurs interprètent mal les frames et les personnes qui utilisent internet pour la première fois sont désorientés lorsqu'elles consultent des sites construits avec des frames. Tous les sites commerciaux ne les utilisent d'ailleurs plus. Il est préférable de remplacer les frames par une construction dynamique des pages avec des langages tels que le PHP, que nous découvrirons plus loin.

Exemple de fichier découpé en frames:

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

<HEAD>
<TITLE>Cette page HTML est découpée en plusieurs frames</TITLE>
</HEAD>

<FRAMESET cols="150,*,30%">

<FRAME src="frames/page1.html" name="zone1">
<FRAME src="frames/page2.html" name="zone1">

<!-- On divise la troisième frame en 2 autres frames -->
<FRAMESET rows="250, *">
<FRAME src="frames/page3.html" name="zone3">
<FRAME src="frames/page4.html" name="zone4">
</FRAMESET>

</FRAMESET>

</HTML>

La page est alors divisée en 3 zones verticales. La zone de gauche a une largeur de 150 pixels, la zone de droite a une largeur de 30% de largeur de la page, la zone centrale occupe le reste de la fenêtre (on utilise la valeur*).
La zone de droite est elle-même divisée en 2 zones horizontales: celle du haut occupe les 250 premiers pixels en hauteur, celle du bas occupe le reste.

ATTENTION : il n'y a pas de balises <BODY> et </BODY> dans un document décrivant des frames. Ces 2 balises sont remplacées par <FRAMESET> et </FRAMESET>. La déclaration du type de document (DOCTYPE) est spécifique.

Vous pouvez donner des attributs à la balise <FRAME>:

- marginwidth et marginheight indiquent la distance en pixels entre les bords de la frame et son contenu.
- scrolling force ou non l'ajout de barres de défilement autour de la frame. Prend les valeurs yes ou no.
- frameborder force ou non l'ajout d'un bord de séparation avec la ou les frame(s) adjacentes. Prend les valeurs 1 ou 0.
- noresize interdit le redimensionnement de la frame avec la souris.

Il ne reste plus qu'à créer les fichiers page1.html, page2.html, page3.html et page4.html.

Dans ces fichiers figurent certainement des liens qui pointent vers d'autres pages. Lorsque vous cliquerez sur un de ces liens, la page appelée s'affichera toujours dans la même frame. Vous pouvez aussi afficher la page appelée dans une autre frame ou dans une autre fenêtre en ajoutant l'attribut target à la balise <A href="..."> du lien. Cet attribut accepte les valeurs suivantes:

- "_self": la page appelée s'affiche dans la même frame que celle du lien.

- "_parent": la page appelée s'affiche dans la frame parente. Si la frame parente n'existe pas, elle s'affiche dans une nouvelle fenêtre.

- "_blank": la page appelée s'affiche dans une nouvelle fenêtre.

- "_top": la page s'affiche dans toute la fenêtre du navigateur et fait disparaître toutes les frames.

Vous pouvez aussi utiliser comme valeur le nom d'une autre frame. La page appelée s'affiche alors dans cette frame. Exemple:

<A href="sommaire.html" target="zone1">

Si tous les liens d'une page pointent vers la même frame, vous pouvez définir par défaut dans cette page le nom de la frame. Cela évite de l'indiquer dans chaque lien:

<HEAD>
<BASE target="zone4">
</HEAD>

Il existe une autre utilisation des frames, qui permet d'insérer une page HTML à un endroit précis d'une autre page HTML. Il suffit d'appeler la frame à insérer avec la balise <IFRAME>:

<IFRAME src="page_à_insérer.html" frameborder="1" scrolling="yes" width="250" height="150">
</IFRAME>

- frameborder définit l'épaisseur de la bordure, en pixels.
- scrolling force ou non l'ajout de barres de défilement autour de la frame. Prend les valeurs yes ou no.
- width indique la largeur de la frame insérée dans la page, en pixels.
- height indique la hauteur de la frame insérée dans la page, en pixels.

Certains navigateurs ne comprenant pas le code HTML situé entre les balises <FRAMESET> et </FRAMESET>, il est important de dupliquer ce code juste après, pour qu'il y ait au moins quelque chose qui s'affiche dans le navigateur. Au cas où le navigateur interprète correctement les frames, il faut lui indiquer qu'il ne doit pas tenir compte de ce texte situé après, sinon il sera affiché deux fois de suite. On encadre donc ce texte avec les balises <NOFRAMES> et </NOFRAMES>:

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

<HEAD>
<TITLE>Cette page HTML est découpée en plusieurs frames</TITLE>
</HEAD>

<FRAMESET cols="150,*,300">
<FRAME src="frames/page1.html" name="zone1">
<FRAME src="frames/page2.html" name="zone1">
</FRAMESET>

<!-- Ce qui suit ne sera affiché que si le navigateur ne peut interpréter correctement les frames -->

<NOFRAMES>
Ici est placé le même texte que le texte contenu dans page1.html et page2.html.
</NOFRAMES>

</HTML>

2.4.15. Le formulaire de saisie

Un formulaire est constitué de champs de saisie qui permettent à la personne qui consulte le site d'écrire des informations (nom, prénom, adresse...) et d'envoyer ces informations au serveur en validant le formulaire. On peux afficher divers types de champs de saisie: zones de texte, case à cocher, liste d'éléments à sélectionner...

On définit un formulaire avec les balises d'encadrement <FORM> et </FORM>. Entre ces deux balises, on définit ensuite les différents champs de saisie, de validation ou d'effacement. Exemple:

<!--
    action désigne le programme (un script CGI ou un langage serveur comme PHP) qui
    sera exécuté après validation du formulaire et qui va traiter les différentes données
    récupérées dans les variables définies par chaque attribut NAME.
    On pourrait par exemple envoyer un message avec
    <FORM action="mailto:toto@free.fr" method="POST">
-->
<FORM action="php/inscription.php" method="post">
    <INPUT name="c_est_quoi" type="hidden" value="inscription">
    Votre nom : <INPUT name="nom" value="(En majuscules SVP)" type="text" size="20" maxlength="50">
    Voulez-vous être contacté ?<BR>
    oui: <INPUT name="contact" type="radio" value="oui" value="checked">
    non: <INPUT name="contact" type="radio" value="non">
    Voulez-vous une réponse par :<BR>
    Téléphone: <INPUT name="phone" type="checkbox" value="checked">
    Télécopie: <INPUT name="fax" type="checkbox">
    Messagerie électronique: <INPUT name="mail" type="checkbox">
    Votre adresse: <TEXTAREA name="adresse" cols="50" rows="6" value="(N'oubliez pas le pays)."></TEXTAREA>
    Choisissez un ou plusieurs cadeaux:<BR>
    <SELECT name="cadeau" size="3" multiple>
        <OPTION value="cadeau1">Un nounours</OPTION>
        <OPTION value="cadeau2">Une barbie</OPTION>
        <OPTION value="cadeau3">Un livre pour programmer en Perl (beurk)</OPTION>
    </SELECT>
    <INPUT type="submit" value="Valider vos données">
    <INPUT type="reset" value="Tout effacer">
</FORM>

2.4.16. La musique

Vous pouvez diffuser une musique de fond lorsque quelqu'une personne consulte votre page. Elle doit bien sûr utiliser un ordinateur équipé d'une sortie son et de haut-parleurs. Il peut être utile d'ajouter un texte informant qu'il faut les allumer.

<BGSOUND src="fichier_son.mid" loop="3">

L'attribut src indique le fichier son à jouer. Ce fichier peur être aux formats MIDI, AU ou WAV. Le format wav est la reproduction fidèle du son gravé sur un CD, il génère des fichiers volumineux. Utilisez plutôt le format midi, il ne contient que les notes à jouer par chaque instrument. C'est la carte audio qui se charge de les convertir en sons.
L'attribut loop indique le nombre combien de fois le fichier doit être joué successivement. La valeur "infinite" indique une répétition sans fin.

Cette balise ne marche pas avec tous les navigateurs.

2.4.17. L'en-tête

L'en-tête d'une page HTML contient plusieurs instructions qui décrivent les propriétés générales de la page. Elles sont utilisées par le navigateur et aussi par les robots (voir plus loin le chapitre 'Moteurs de recherche').
Il est important de bien utiliser ces instructions pour que votre site soit bien affiché par les navigateurs et bien référencé par les moteurs de recherche.
Exemple d'en-tête:

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<META http-equiv="Content-Language" content="fr">
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="cache-control" content="no-cache">
<META http-equiv="expires" content="0">
<META name="author" content="David VANTYGHEM">
<META name="owner" content="David VANTYGHEM">
<META name="description" content="Ce site propose un cours d'HTML.">
<META name="Identifier-URL" content="http://www.cours-html.fr">
<META name="keywords" content="cours, html, cours, xls, java, javascript">
<META name="language" content="fr">
<META name="revisit-after" content="14 days">
<META name="robots" content="index, follow">
<META name="rating" content="general">
<META name="reply-to" content="arthur.martin@free.fr">
<TITLE>
Cours sur HTML -Présentation d'internet.
</TITLE>
<LINK rel="SHORTCUT ICON" href="http://www.cours-html.fr/images/logo.ico">
</HEAD>

La première ligne indique au navigateur le contenu du document (html) et l'alphabet à utiliser pour afficher la page (iso-8859-15 = alphabet latin avec le signe Euro).
Les lignes 3 à 5 désactivent le cache du navigateur et le force à aller consulter la dernière version du site stockée sur le serveur.
La ligne 10 est très importante, elle contient jusqu'à 256 mots clés qui sont lus par les robots d'indexage. Lorsque quelqu'un tapera un de ces mots clés dans le moteur de recherche qui a indexé la page, celle-ci a de fortes chances d'apparaître dans le résultat de la recherche.
La ligne 12 indique aux robots qu'ils doivent ré-indexer la page tous les 14 jours.
La ligne 13 indique aux robots qu'ils doivent indexer tout le contenu de la page et qu'ils doivent aussi indexer les autres pages vers lesquelles pointent les liens contenus dans cette page.
La ligne 14 indique aux robots dans quelle catégorie classer ce site (ici, la catégorie générale).
La ligne 15 permet aux robots de vous envoyer un message lorsqu'ils ont indexé votre page.
La ligne 19 permet d'afficher dans la barre de navigation un petit icone. Pour créer de tels icones, téléchargez Icon Studio (Windows. Freeware. Téléchargeable sur http://www.coffeecup.com/freestuff/) ou utilisez png2ico (Linux et Windows. Licence Libre. Gratuit) téléchargeable sur http://www.winterdrache.de/freeware/png2ico/.

On peut aussi provoquer le chargement automatique d'une autre page au bout d'un certain temps. L'exemple suivant provoquera le chargement automatique, au bout de 3 secondes, de la page d'accueil du site http://charger.free.fr. Cette page d'accueil remplacera dans la fenêtre du navigateur la page qui contenait cette instruction.

<META http-equiv="refresh" content="3;url=http://charger.tuxfamily.org/">

Nous avons passé en revue les options les plus courantes, pour les autres options, voir http://www.w3.org/TR/html401/.

2.4.17. Conseils finaux

Pour concevoir des sites internet compliqués, il est recommandé d'utiliser d'abord des éditeurs graphiques qui permettent de dessiner vos pages comme avec un traitement de texte et qui génèrent le code HTML correspondant. Aucun éditeur ne génère le même code, il est plus ou moins correct suivant l'éditeur. Il faut donc ensuite corriger ce code quand chaque page est terminée.

Quelques éditeurs graphiques: Microsoft FrontPage (Windows; Licence propriétaire; La version FrontPage Express est gratuite), DreamWeaver (Windows; Licence propriétaire), Netscape Composer (Linux, Windows et MacOS; Licence propriétaire; Gratuit), Mozilla Composer (Linux, Windows et MacOS; Licence libre; Gratuit) téléchargeable sur le site http://www.mozilla.org., OpenOffice (Linux, Windows et Mac OS) téléchargeable sur http://fr.openoffice.org, NVU (Linux, Windows et Mac OS) téléchargeable sur http://www.nvu.com

D'autres éditeurs non graphiques : Quanta+ (Linux. Licence libre. Gratuit) téléchargeable sur le site http://quanta.sourceforge.net) supporte la coloration syntaxique du PHP, Screem (Linux. Licence libre. Gratuit) téléchargeable sur http://www.screem.org ) édite le PHP et le Javascript, Bluefish (Linux. Licence libre. Gratuit), téléchargeable sur http://bluefish.openoffice.nl édite l'HTML et le PHP...

Si vous n'arrivez pas à détecter des erreurs dans votre code HTML, vous pouvez utiliser des logiciels qui vérifient votre code, certains navigateurs intègrent même cette fonction. Si vos pages sont déjà placées sur internet, vous pouvez utiliser les outils de vérification du W3C Consortium: http://validator.w3.org.

3. Les autres technologies utilisables dans un site internet

3.1. Les feuilles de style

Une CSS (Cascading Style Sheet) ou 'feuille de style en cascade' permet de définir les styles (taille, position, police, couleur, bordure...) que vous voulez appliquer à certains éléments de votre page ou à la totalité de votre page.

Un style est définit par une règle de style. Elle est composée d'un objet, de propriétés et de valeurs.

Exemple de règle de style:

TD { font-size: large; color: #542356 }

TD est l'objet, font-size et color sont des propriétés, large et #542356 sont des valeurs. Chaque propriété d'un objet est séparée par un point-virgule. A chaque fois que le navigateur rencontre du texte compris entre les balises <TD> et </TD>, il lui applique les propriétés de mise en forme et les valeurs définies dans la règle de style. On comprend bien l'intérêt de ce système, il suffit de définir une fois pour toute les règles de style et on obtiendra automatiquement des pages de présentation homogène sur tout notre site internet.

Les feuilles de style en cascade permettent de redéfinir les propriétés des balises HTML classiques, mais aussi, de définir les propriétés de nouveaux objets que vous réutiliserez dans certaines parties de votre texte. Par exemple:

<STYLE>
<!--
.titre_de_page { text-align: center; font-size: 14 pt; font-weight: bold }
-->
</STYLE>

Les tags <!-- et --> permettent aux navigateur qui n'interprètent pas les CSS de considérer la règle de style comme un simple commentaire.
.titre_de_page est le nouvel objet, text-align, font-size et font-weight sont les propriétés, center, 14 pt et bold sont les valeurs. On appliquera la règle de style à une zone de page en encadrant cette zone par les balises <DIV class="titre_de_page"> et </DIV>. Si la règle ne s'applique qu'à une portion de texte, on l'encadre par les balises <SPAN class="titre_de_page"> et </SPAN>.

<HTML>

<HEAD>
<TITLE>Nouvelle page 1</TITLE>
<STYLE>
<!--
.image1 { position: absolute; top: 80px; left: 100px; width: 103px; height: 61px }
-->
</STYLE>
</HEAD>

<BODY>
<P class="titre_de_page">Ceci est le titre de la page.</P>
</BODY>

</HTML>

L'exemple que nous venons de voir est une 'feuille de style incorporée', car elle est écrite dans la page où on applique les styles. Elle définit les coordonnées d'une image par rapport au coin supérieur gauche de la fenêtre du navigateur, ainsi que la taille d'affichage de l'image.

Les propriétés que vous pouvez définir sont plus étendues que les propriétés des balises HTML classiques. Exemple de propriétés:

• propriétés de police (taille, couleur, majuscule, espacement de caractères...)

• propriétés de paragraphe (interligne, espacements, retrait...)

• propriétés de bordure et de trame (couleur d'arrière-plan, encadré...)

• propriétés de positionnement

• etc...

Par exemple, consultez http://www.commentcamarche.net/html4/property.php3.

Vous pouvez appliquer une ou plusieurs feuilles de style à:

• certains éléments d'une page (comme dans l'exemple que nous venons de voir)

• une page entière

• plusieurs pages entières

Pour le dernier cas, ont utilise une feuille de style externe: toutes les règles de styles seront regroupées dans un fichier séparé, ayant généralement comme extension .css (exemple : feuille1.css). On intègre alors cette feuille de style à (aux) page(s) HTML en y ajoutant la commande:

<HEAD>
<TITLE>Nouvelle page 1</TITLE>
<LINK rel="stylesheet" type="text/css" href="feuille1.css">
</HEAD>

Si une page HTML fait appel à une feuille de style externe et qu'elle contient aussi une feuille de style incorporée, ce sont les propriétés définies dans la feuille de style externe qui sont appliquées en priorité.

La majorité des navigateurs interprète les feuilles de style en cascade. N'hésitez donc pas à utiliser cette technologie.

3.2. Le Javascript

Ce langage permet de modifier les propriétés des objets, définies dans les règles de style. Les instructions en Javascript sont ajoutées dans les pages HTML. Elles sont donc lues et exécutées par le navigateur.

Le Javascript intègre des fonctions de test, de comptage... comme les langages de programmation classique. Il permet donc de faire des animations sur la page, sans qu'il soit nécessaire de la recharger sans cesse.

L'inconvénient du Javascript est qu'il doit s'écrire différemment suivant le navigateur qui sera utilisé. Il faut donc détecter avec des instructions en JavaScript quel type et quelle version de navigateur est utilisé puis prévoir en fonction de cela les différentes syntaxe à exécuter.

L'autre inconvénient est que bon nombres de programmes en Javascript font planter les navigateurs, il n'est pas rare de voir sa fenêtre se fermer brusquement ou rester figée lorsqu'on consulte des sites contenant du Javascript.

Pour insérer du code Javascript à l'intérieur d'un document, il suffit d'ajouter entre les balises <BODY> et </BODY>:

<SCRIPT type="text/javascript">
<!--

Placez ici votre script...

//-->
</SCRIPT>

Ou si on appelle un programme en Javascript situé dans un autre fichier:

<SCRIPT type="text/javascript" src="divers/fichier.js"></SCRIPT>

3.3. Les animations

Vous pouvez intégrer des animations, des vidéos à vos pages. Le mécanisme est simple, il suffit d'ajouter un lien vers le fichier multimédia. Par exemple :

<A href="videos/presentation.avi">Cliquez ici pour voir la vidéo au format AVI</A>

Lorsqu'on clique sur le lien, la vidéo apparaît dans la page ou provoque l'exécution d'un programme externe, si celui-ci est nécessaire pour visualiser ce type de vidéo.

On peut aussi utiliser la balise <EMBED> avec des attributs qui permettent de paramétrer l'affichage :

• align permet d'aligner l'animation à droite ("right"), à gauche ("left"), en haut ("top") ou en bas ("bottom") du lien.
  - border définit l'épaisseur en pixels de la bordure autour de l'animation.
  - width définit la largeur en pixels de la fenêtre d'animation.
  - height définit la hauteur en pixels de la fenêtre d'animation.
  - src définit l'emplacement (URL) du fichier.
  - autostart indique si l'animation est affichée automatiquement ("true") ou non ("false"). "true" est la valeur par défaut.
  - autoload indique si le fichier est chargé automatiquement dès l'affichage de la page HTML ("true") ou non ("false"). "true" est la valeur par défaut.
  - loop indique combien de fois l'animation doit être affichée. Elle est affichée indéfiniment si la valeur est égale à 1.
  - controls indique si le panneau de contrôle (boutons 'lecture', 'pause', 'avance rapide'...) est affiché ("true") ou non ("false")."true" est la valeur par défaut.
  - type indique le type MIME du fichier. Le type MIME est une nomenclature qui définit le type de fichier (texte, audio, video, image, application...) et le format du fichier. Elle est aussi utilisée par les clients de messagerie pour afficher les fichiers envoyés par messagerie électronique. Par exemple: video/mpeg désigne un fichier vidéo au format MPEG.

3.3.1. Flash (fichiers au format SWF), Shockwave

Langages de création d'animations développés par la société Macromédia. Voir http://www.macromedia.com/fr/ . Pour visualiser les animations créées, il faut ajouter un plug-in au navigateur. Vous insérez l'animation dans votre page avec la balise <EMBED>. Par exemple:

<EMBED src="animation.fla">

3.3.2. QuickTime (fichiers au format MOV)

Idem, mais développé par Apple. Voir http://www.apple.com/quicktime/. Vous insérerez l'animation dans votre page avec la balise <EMBED> et ses attributs classiques. Il y a des attributs spécifiques pour ce type de vidéo:

- type indique si l'animation est affichée automatiquement ("true") ou non ("false"). "true" est la valeur par défaut.
- controller affiche le panneau de contrôle ("true") ou non ("false"). "true" est la valeur par défaut. Si le panneau est affiché, augmentez la valeur de l'attribut height de 24 pixels.
- loop indique si l'animation est affichée en boucle.
- playeveryframe indique si l'animation est affichée au fur et à mesure de son téléchargement ("true") ou non ("false").
- target permet d'afficher l'animation dans une autre fenêtre, une frame...
- href définit le lien vers le fichier d'animation.
- pan, tilt, fov, nod et correction sont utilisés pour la diffusion de films VR (panoramique).

Exemple:

<EMBED href="videos/presentation.mov" width="320" height="250" controller="false">

3.3.3. RealPlayer (fichiers au format RPM, RA ou RM)

Vous pouvez intégrer le lecteur multimédia RealPlayer à votre navigateur sous forme de plug-in. Il vous permettra de visualiser des vidéos au format RealVideo ou d'écouter de la musique au format RealAudio, diffusées depuis un serveur de streaming (voir plus loin le chapitre concernant ces serveurs). Cette diffusion est faite en continu ou à la demande du visiteur. Voir http://france.real.com/. Vous pouvez intégrez la musique ou la vidéo avec un lien ou avec la balise <EMBED> et ses attributs classiques. Seul l'attribut controls a des valeurs spécifiques pour ce type de vidéo:

- "all" affiche le panneau de contrôle complet.
- "controlpanel" affiche les boutons 'lecture', 'pause', 'stop' et le curseur de position.
- "infovolumepanel" affiche une fenêtre d'information et le curseur de volume.
- "infopanel" affiche une fenêtre d'information.
- "statusbar" affiche une barre d'état.
- "playbutton" affiche les boutons 'lecture' et 'pause'.
- "stopbutton" affiche le bouton 'stop'.

Vous pouvez créer un fichier de streaming au format RealVideo avec Real Encoder, téléchargeable gratuitement. Cet utilitaire permet de transformer un fichier vidéo (par exemple au format .avi) en fichier au format.ra. Il faut ensuite créer, avec un simple éditeur de texte, un fichier ayant l'extension .ram et contenant l'URL où sera placé le fichier .ra. Par exemple :

http://www.enim.fr/CVs/videos/presentation.ra

Il suffit ensuite d'indiquer dans le lien ou dans la balise <EMBED> le nom du fichier .ram. Par exemple, si le fichier s'appelle toto.ram:

<A href="CVs/toto.ram">Cliquez ici pour voir la video de présentation au format RealVideo</A>

3.3.4. Le VRML (Virtual Reality Modeling Language)

C'est un langage permettant d'afficher des objets en 3 dimensions, de les manipuler dans l'espace. Nécessite des débits de transmission élevés.

Voir http://apia.u-strasbg.fr/vrml/.

3.3.5. Le X3D

Un nouveau format graphique, plus souple à gérer que le VRML. Permet d'intégrer facilement des objets 3D dans des vidéos. Il faut un débitde transmission élevé pour que cela soit utilisable.

Voir http://www.web3d.org.

3.4. JAVA

C'est un langage de programmation objet créé par SUN, qui ressemble au C++. On le rencontre aussi sous forme de petits programmes placés sur le serveur et exécutés par le navigateur (applet JAVA) lorsqu'on consulte des pages HTML qui font appel à ces programmes . Pour que les servlet JAVA soient exécutées lorsqu'on consulte une page, il faut que le navigateur intègre un interpréteur Java ('machine virtuelle').

Une applet Java permet de faire des animations, des calculs..., c'est un langage de programmation complet. Il fonctionne sur toute sorte d'ordinateur (à condition d'être intégré par le navigateur). Son inconvénient est qu'il est très long à charger par le navigateur et lent à l'exécution.

Exemple d'appel à une applet Java par une page HTML:

<DIV>
<APPLET codebase="http://www.enim.fr/html/applets" CODE="Bonjour.class" width="200" height="150"></APPLET>
</DIV>

codebase indique le répertoire où est enregistrée l'applet. "Bonjour.class" est le nom de l'applet. width et height indiquent la taille de la zone de page dans laquelle l'applet sera exécutée.

3.5. Le protocole CGI (Common Gateway Interface)

Ce protocole permet la communication entre une page en HTML affichée dans un navigateur et des programmes écrits en C, C++, Java, Pascal ou avec un langage de script (commandes DOS, Shell, Perl, Python, TCL...). On parle alors soit de 'programme CGI' ou de 'script CGI'. Ces programmes CGI sont stockés sur le serveur HTTP. Lorsque le serveur reçoit du navigateur un appel à des programmes CGI, il transmet aux programmes CGI les paramètres envoyés par le navigateur sous forme de variables. Les scripts sont exécutés sur le serveur, ils envoient le résultat au serveur HTTP qui le retransmet au navigateur sous forme de code HTML.

L'utilisation des scripts CGI est intéressante car toute la partie calcul se passe sur le serveur, le fonctionnement est donc assuré avec tous les navigateurs qui se contentent eux d'envoyer et de recevoir des données.

L'appel aux scripts se fait:

• à travers un formulaire, par exemple:

<HTML>
<HEAD>
<TITLE>Appel à un CGI écrit en Perl qui renvoie la liste des variables d'environnement CGI du serveur</TITLE>
</HEAD>
<BODY>
<FORM ACTION="cgi-bin/liste_variables_CGI.pl" method="post">
<INPUT type="submit">
</FORM>
</BODY>
</HTML>

Cette page HTML va déclencher l'appel au script CGI 'liste_variables_CGI.pl'écrit en Perl et placé sur le serveur dans le répertoire cgi-bin/. Ce script va renvoyer au serveur HTTP le résultat dans les variables $key et $value par exemple:

#!/usr/local/bin/perl
while (($key,$value)=each %ENV) {
print "$key=$value <BR><BR>\n";
^}

• à travers un lien sur lequel on va cliquer, par exemple:

<A href="cgi-bin/liste_variables_CGI.pl">Cliquez ici</A>

• à travers une image lors de son affichage, par exemple:

<IMG src="cgi-bin/liste_variables_CGI.pl">

Cette dernière méthode est utilisée par exemple pour les compteurs de nombre de visites.

Pour faire un appel à un CGI en lui passant des paramètres dans des variables, on utilise un formulaire:

<HTML>
<HEAD>
<TITLE>Appel à un CGI en lui envoyant des paramètres</TITLE>
</HEAD>
<BODY>
<FORM action="cgi-bin/inscription.pl" method="post">
<P>Nom:&#160;<INPUT name="Nom"><BR><BR>
<P>Prénom:&#160;<INPUT name="Prénom"><BR><BR>
<P>Adresse:&#160;<INPUT name="Adresse"><BR><BR>
<INPUT type="submit" VALUE="Transmettre les données">
</FORM>
</BODY>
</HTML>

Cette page HTML envoie au script 'inscription.pl' le contenu du formulaire qu'on a rempli dans le navigateur (Nom, Prénom, adresse).

Dans le script CGI, on utilise la variable $FORM pour récupérer les données:

#!/usr/local/bin/perl
$nom=$FORM{'Nom'};
$prenom=$FORM{'Prenom'};
$adresse=$FORM{'Adresse'};
...
on écrit ces données dans une base par exemple, puis on remercie:
...
print "Merci, données enregistrées";

Certains hébergeurs permettent d'exécuter des programmes ou des scripts CGI sur leur serveur, gratuitement ou non. Ils précisent alors dans le contrat le langage que vous pouvez utiliser.

L'utilisation des CGI tend à être remplacée par le langage PHP, que nous verrons plus loin.

3.6. Les langages embarqués sur les serveurs

Le PHP (Personnal Home Page) fonctionne sous Linux, Windows, MacOS, l'ASP (Advanced Server Programming) fonctionne sous Windows, le JSP est la version des ASP réécrites par SUN.

Ils permettent de générer dynamiquement des pages HTML sur le serveur avant de les envoyer au navigateur. L'usage le plus courant est la génération de pages HTML à partir d'une base de données. PHP est gratuit et aussi performant que les autres langages. Pas de problème de compatibilité avec les navigateurs car tout se fait sur le serveur. A UTILISER SANS MODERATION pour des sites compliqués, surtout avec des bases de données.

Voir:

• Le site officiel de PHP: http://www.php.net

• La documentation de PHP et mySQL sur le site de NEXEN : http://dev.nexen.net

• Un tutorial PHP3: http://lwest.free.fr/doc/php/tutorial.php3

• PHP Scripts, quelques exemples de scripts en PHP: http://www.phpscripts-fr.net

• PHPIndex :http://www.phpindex.com

• PHPFrance : http://www.phpfrance.com

Pour les bases de données, voir:

• PostGreSQL : http://www.postgresql.org

• MySQL: http://www.mysql.com

• PHPmyAdmin: http://phpmyadmin.sourceforge.net

3.7. Le DHTML

Le DHTML (Dynamic HTML) est une version améliorée de l'HTML 4.0. Il utilise les feuilles de style en cascade, le javascript, de nouvelles fonctions HTML permettent des effets visuels comme par exemple l'animation du texte, des effets de transition de pages...

A utiliser avec précaution, seules les versions récentes des navigateurs peuvent interpréter plus ou moins bien ces commandes.

3.8. Le XHTML

Suite à l'utilisation un peu anarchique du DHTML, Il est apparu nécessaire de revenir aux sources de l'HTML : décrire le contenu d'une page, indépendamment de sa mise en forme. Le W3C a donc créé la nouvelle norme XHTML, servant à préparer la transition avec XML. XML est un nouveau langage de description de pages qui permet de séparer le contenu (les pages XML) du contenant (les DTD). En effet, jusqu'à présent, nous avons écrit dans la même page HTML le contenu (texte, images, sons...) et le contenant (mise en forme du texte et des paragraphes).

XML permet de créer ses propres balises pour encadrer chaque élément du contenu. On appelle ces balises des balises sémantiques. Exemple:

<INTRODUCTION>
Ceci est le texte de l'introduction.
</INTRODUCTION>

Les propriétés de mise en forme qui se rapportent à ces balises sont enregistrées dans un document séparé : la DTD. Cela rappelle le principe des feuilles de style. Mais les DTD peuvent contenir des propriétés bien plus poussées comme par exemple l'ordre d'enchaînement des balises, des tests conditionnels sur le contenu pour déterminer l'affichage ou non du contenu, l'affichage du texte de gauche à droite ou de haut en bas, etc...

La norme XHTML sépare aussi le contenant du contenu en ne gardant que les balises HTML de description et en plaçant toutes les informations de mise en page dans des feuilles de style en cascade externes (CSS). L'intéret est qu'on peut facilement donner plusieurs aspects visuels à une même page, y compris des mises en page spécifiques pour les personnes malvoyantes, pour le matériel portable ou embarqué...

4. L'hébergement de site

Pour que tout le monde puisse consulter le site internet que vous avez créé, il faut placer les pages de votre site sur un ordinateur connecté en permanence au réseau internet. Si vous possédez ou si vous avez accès à une telle machine, c'est gagné. Sinon, il vous faudra soit louer les services d'un 'hébergeur', soit mettre en place votre propre serveur d'hébergement.

4.1. L'hébergeur

Il est propriétaire d'ordinateurs reliés en permanence au réseau internet. Il loue des espaces restés libres sur les disques durs de ses ordinateurs. Vous pouvez y placer toutes vos données: site internet, applications, musique, vidéo, logiciels en téléchargement... Ces données seront alors accessibles par internet.
Chaque hébergeur propose des services plus ou moins performants et complets selon les machines dont il dispose et les logiciels serveurs qu'il utilise. Il peut aussi être spécialisé (par exemple dans l'hébergement de musique) ou bien il doit respecter certaines réglementations propres à son pays (certains hébergeurs refusent les fichiers au format MP3). La sécurité entre aussi en compte. Certains hébergeurs refusent les sites contenant du CGI ou désactivent certaines fonctions qui pourraient autoriser le piratage du serveur.

Avant de choisir un hébergeur, vous devez connaître parfaitement vos besoins et à partir de ces besoins, définir exactement les caractéristiques de l'offre que vous rechercherez. Vous devez examiner très attentivement les offres de plusieurs hébergeurs et surtout les fonctionnalités proposées. Rien ne vous empêche d'utiliser les services de plusieurs hébergeurs: votre site internet chez l'un, votre messagerie chez un autre...

Les technologies évoluent très vite en informatique et de ce fait, ce ne sont pas forcément les plus grands hébergeurs qui sont les plus adaptés à vos besoins. Prenez le temps de comparer (recherche sur internet, salons, test sur des sites déjà hébergés).

Critères à prendre en compte:
a) Le prix : ce ne sont pas les plus chers qui sont les plus performants. Certains sont gratuits et ne placent pas de publicité sur votre site, comme free (http://www.free.fr), freesurf (http://www.freesurf.fr).. Mais dans ce cas, le nom de votre site contiendra toujours le nom de l'hébergeur, par exemple http://monsite@free.fr.
b) les performances des serveurs:
- tester la rapidité d'affichage en consultant un site 'léger' (quelques pages HTML sans photos) avec une connexion par modem simple. Certains hébergeurs ont beaucoup de clients et malgré une bonne passante, ils sont très lents à certaines heures ou coupent régulièrement leur connexion.
- exécution rapide des applications (CGI, accès aux bases de données)
- les messages sont bien transmis et ne restent pas bloqués lorsqu'ils sont d'une taille importante (photos, vidéos)
c) la sécurité et la fiabilité des serveurs. Certains serveurs ont souvent des pannes techniques, 'perdent' les courriers électroniques, sont faciles à pirater, sensibles aux virus, sont facilement hors service suite à un 'plantage' ou une surcharge, ne sont pas régulièrement sauvegardés... Préférez des serveurs fonctionnant sous un système de type UNIX (BSD, Linux...), il sont plus fiables, gèrent mieux la surcharge (surtout s'ils ont un logiciel de 'load balancing' qui permet de répartir la charge sur plusieurs serveurs), sont insensibles aux virus et résistent mieux aux tentatives de piratage par l'extérieur.

L'Uptime:
L'Uptime est la durée écoulée depuis le dernier redémarrage du serveur. Cette durée peut varier de quelques heures à plus d'un an. Certains organismes testent en permanence l'Uptime des serveurs qui composent le réseau internet et informent des logiciels qui font fonctionner ces serveurs. Exercice: avec votre navigateur, connectez-vous au site de Netcraft http://uptime.netcraft.com/up/today/top.avg.html.
Sur ce site, vous obtiendrez la liste des serveurs qui ont l'Uptime le plus élevé. Vous constaterez que les meilleurs Uptime sont obtenus pour les serveurs fonctionnant avec un système d'exploitation BSD et un serveur HTTP Apache. Les logiciels utilisés ont donc une grande importance sur la fiabilité du serveur, tout autant que la qualité du matériel.
Intéressant à consulter: la répartition des systèmes et des machines utilisées sur internet: http://www.netcraft.net/survey/ .

Une règle d'or (qu'on applique malheureusement rarement): faites régulièrement au moins 2 sauvegardes de vos données et stockez ces données dans 2 endroits différents. N'attendez pas de tout perdre, même les hébergeurs "oublient" parfois de faire des sauvegardes et la loi de Murphy est souvent vérifiée en informatique.

4.2. Le transfert des données sur le serveur distant

Le protocole FTP (File Transfert Protocole) ou protocole de transfert de fichier vous permet de transférer vos fichiers depuis votre ordinateur vers le serveur de votre hébergeur ou vers tout autre machine distante connectée à votre ordinateur. Il vous faut utiliser un logiciel client FTP.

Exemple de logiciel client FTP pour Windows, sous licence libre et gratuit:

- FileZilla téléchargeable à http://sourceforge.net/projects/filezilla/

Sous Linux, outre la foule de logiciels graphiques, le protocole FTP est disponible en 'ligne de commande'. Il suffit de taper dans une console:
ftp
Puis pour avoir la liste des commandes FTP:
help
Pour avoir de l'aide sur une des commandes FTP:
help nom_de_la_commande

L'excellent gestionnaire de fichier Midnight Commander intègre aussi le protocole FTP. Démarrez MC en tapant:
mc
Pour accéder à un serveur, il ne vous reste plus qu'à taper:
cd ftp://nom_d'utilisateur:mot_de_passe@nom_du_serveur/répertoire/
Par exemple:
cd ftp://charger:8t5d2sd5@ftpperso.free.fr/CV/groupe1/TD/
Si l'accès est anonyme (sans mot de passe), il suffit de taper:
cd ftp://nom_du_serveur/répertoire/sous-répertoire/etc...
Par exemple:
cd ftp://akela.tuxfamily.org
Les noms des fichiers situés sur le serveur apparaissent, vous pouvez alors les transférer, les modifier, renommer, supprimer... Pour qu'on puisse consulter votre site, veillez à ce que tous les répertoires accordent des droits en lecture+exécution pour tout le monde et que vos fichiers accordent des droits en lecture pour tout le monde.

4.3. Avoir son propre serveur

Vous pouvez choisir de placer votre site internet sur votre propre serveur. Il vous suffit alors de le relier au réseau internet en louant un accès permanent à un FAI, qui vous attribuera une adresse IP fixe. Selon votre budget, vous pouvez louer un accès par modem câble, ADSL, RNIS...

Pour un usage personnel, un simple ordinateur compatible PC fera l'affaire. Vous pouvez le faire fonctionner avec des logiciels gratuits sous licence libre. Installez:
- un système d'exploitation Mandrake Linux.
- LinuxEasyInstaller (voir le site http://www.phpmylinux.net). Ce programme installera le serveur HTTP Apache, le langage PHP, la base de données MySQL et l'outil d'administration de bases de données PHPmyadmin.
- un outil graphique pour gérer votre espace d'hébergement, par exemple VHFFS (voir le site http://www.vhffs.org ) ou AlternC (voir le site http://www.alternc.org). Il vous permet de gérer facilement vos adresses de messageries, vos accès FTP, vos sous-domaines... avec un simple navigateur, depuis n'importe quel ordinateur connecté à internet. Sous Windows, il existe un équivalent de LinuxEasyInstaller: EasyPHP (voir le site http://www.easyphp.org ).

L'installation et le paramétrage de ces logiciels nécessite de connaître les commandes UNIX, mais vous économiserez l'achat de logiciels et vous pourrez alors vous payer une machine de bonne qualité (bien ventilée, avec des composants robustes), voire même des disques supplémentaires avec un système de haute disponibilité RAID, un système de sauvegarde automatique (disque dur amovible, serveur de sauvegarde, clé USB...). Il vaut mieux investir à l'installation, vous économiserez sur les coûts de maintenance et d'administration, qui sont bien plus élevés.

Pour une utilisation plus professionnelle, le choix du matériel et des solutions de sauvegarde est encore plus important. Privilégiez un système BSD ou Debian Linux.

Si votre site comporte des fichiers nominatifs (liste de noms, d'adresses de messagerie dans une liste de diffusion...), vous devez le déclarer à la Commission Nationale de l'Informatique et des Libertés (http://www.cnil.fr).
Vous devez aussi informer les personnes de l'existence et des modalités d'exercice du droit d'accès aux informations qui les concernent et du droit de les faire modifier (changement de nom, d'adresse, de fonction...), rectifier ou supprimer.

Si vous voulez accéder à votre site en tapant dans votre navigateur une adresse internet simple (par exemple http://www.tagada.com au lieu de http://www.bidule.perso.machin.kx), vous devez enregistrer cette adresse (ce 'nom de domaine') auprès d'un organisme agréé. La liste des organismes agréés pour les adresses se terminant par .org, .net, .com, .biz, .info ou .name est disponible sur le site de l'InterNIC (http://www.internic.com).
Pour le dépôt de noms de domaine en .fr, il faut s'adresser à un 'registrar' agréé par l'Association Française pour le Nommage internet en Coopération (http://www.afnic.fr).

Vous devez indiquer sur votre site :
- en tant que personne physique agissant à titre professionnel : nom, prénom et domicile, nom du directeur ou du codirecteur de la publication et le cas échéant, nom du responsable de la rédaction, nom+dénomination ou raison sociale+adresse de l'hébergeur
- en tant que personne morale : dénomination ou raison sociale et siège social, nom du directeur ou du codirecteur de la publication et le cas échéant, nom du responsable de la rédaction, nom+dénomination ou raison sociale+adresse de l'hébergeur
- en tant que non-professionnel, vous pouvez n'indiquer que le nom, la dénomination ou la raison sociale et l'adresse de votre hébergeur, sous réserve de lui avoir auparavent communiqué vos coordonnées personnelles.

5. Les autres outils du Web

5.1. Les moteurs de recherche

Ce sont des serveurs qui lisent en permanence les millions de sites internet grâce à des programmes spéciaux, appelés des robots. Il trient et indexent l'adresse internet (l'URL) et le contenu des sites et stockent ces index. Ils permettent ensuite de chercher rapidement un site à partir de mots clés. Exemple de moteurs de recherche : http://www.google.fr, http://www.yahoo.fr, http://www.alltheweb.com. Il existe aussi des méta-moteurs qui font appels à plusieurs moteurs de recherche. On les utilise sous forme de programme à installer sur votre ordinateur ou à partir d'un site internet. Exemple: http://www.trouvez.com.
Vous pouvez aussi intégrer à votre site un moteur de recherche qui permettra aux visiteurs de trouvez certains mots dans vos pages. Il suffit d'appeler à partir d'une page de votre site un moteur existant, en écrire un en langage Perl par exemple ou bien utiliser un moteur proposé par votre hébergeur, s'il propose ce service.

Si vous créez un nouveau site, il est important de signaler son existence aux moteurs de recherche, pour qu'il soit répertorié et indexé. Sinon, personne ne saura que votre site existe. Ceci doit être fait manuellement pour certains moteurs de recherche. Pour les autres, vous pouvez utiliser un logiciel spécialisé à installer sur votre ordinateur ou disponible depuis un site internet. Certaines sociétés se chargent aussi de ce travail.

Vous pouvez limiter ou forcer l'indexation des pages de votre site en plaçant un fichier nommé robots.txt à la racine de votre site. Il contiendra des instructions que le robot doit respecter. Par exemple :

User-agent: *
Disallow: /commun/
Disallow: /forums/

interdit à tous les robots de fureter dans les répertoires /commun/ et /forums/. Ces directives doivent aussi être respectées par les aspirateurs de sites, ces logiciels qui vous servent à rapatrier l'intégralité des pages d'un site Internet sur votre propre ordinateur, de façon automatique et programmée. Parmi ces logiciels, on peut citer wget (Linux et Windows. Licence libre. Gratuit) téléchargeable sur http://www.gnu.org/software/wget/wget.htmlet httrack (Linux et Windows. Licence libre. Gratuit) téléchargeable sur http://www.httrack.com.

5.2. Les portails

Un portail est un site internet qui rassemble tout un ensemble d'informations classées par thèmes (météo, horoscope, actualité...) et des systèmes de communication tels qu'un système de publication d'articles en ligne (CMS ou Content Management System), un système d'agrégation de nouvelles, un abonnement à une lettre d'information, des listes de discussion... Il intègre aussi en général un moteur de recherche. Il est facile de se créer son propre portail avec des logiciels tels que PHPNuke (voir http://www.phpnuke.org/), ZOPE (voir http://www.zope.org/), SPIP (voir http://www.spip.net/)...

5.3. La messagerie électronique

C'est le même fonctionnement que pour le courrier papier. Chaque destinataire possède une ou plusieurs 'adresses de messagerie' (ou adresse électronique ou adresse d'e-mail ou adresse de boîte aux lettres) et chacun peut envoyer un message (un e-mail) avec du texte, des photos, de la vidéo... à l'adresse de son choix.
Une adresse se présente sous la forme nom_que_vous_avez_choisi@nom_serveur_messagerie. Pour envoyer un message ou lire les messages que d'autres personnes envoient à votre adresse, il vous faut utiliser un logiciel client, appelé 'lecteur de messagerie'. Par exemple Netscape Messenger (Windows, Linux), Outlook (Windows), KMail (Linux)...

Ce client va se connecter à un serveur de messagerie où sont stockés tous les messages en attente d'être lus et qui retransmet tous les messages destinés à d'autres serveurs. Pour récupérer vos messages sur le serveur ou pour lui en envoyer, il faut vous identifier en donnant un nom d'utilisateur ('identifiant') et un mot de passe ('code'). Ces informations vous sont fournies par le FAI auprès duquel vous devez demander l'ouverture d'une boîte aux lettres. Vous devez aussi avoir paramétré au préalable votre client de messagerie en lui indiquant quel est votre propre adresse électronique, sur quel serveur de messagerie vous voulez vous connecter, quel protocole de transmission est utilisé (POP3 ou IMAP pour lire les mails, SMTP pour les envoyer), le numéro de téléphone à éventuellement composer... Le protocole POP3 vous permet de rapatrier vos messages du serveur vers votre ordinateur. Le protocole IMAP vous permet de lire vos messages directement sur le serveur, depuis votre ordinateur (ils sont donc consultables depuis n'importe quel ordinateur, même après avoir été lus).

Certains serveurs proposent d'accéder à vos mails depuis un simple navigateur internet, grâce à une interface spécifique installée sur le serveur. Par exemple IMP, un logiciel sous licence libre pour Linux(voir http://www.horde.org/imp/).

Attention: l'utilisation de la messagerie est la principale source de transmission de virus sous Windows. Même si votre informatique est sous Windows, rapatriez et consultez vos messages avec un logiciel client sous Linux. Ne stockez ensuite que les fichiers joints dont vous avez besoin sur les postes Windows, après les avoir contrôlés avec un antivirus fonctionnant sous Linux. Cela n'est pas sûr à 100% mais limitera efficacement la casse.

5.4. Les listes de diffusion

Le réseau internet propose un autre outil pour communiquer: la liste de diffusion ou Mailing List.
Vous vous inscrivez à une liste en y indiquant votre adresse de messagerie et parfois un mot de passe. Vous recevez ensuite dans votre boîte aux lettres électronique tous les messages envoyés par les autres personnes inscrites sur cette même liste.
A chaque liste correspond une adresse de messagerie pour diffuser les messages. Si vous envoyez un message à cette adresse de diffusion, toutes les personnes inscrites sur la liste recevrons votre message.

Il existe beaucoup de listes de diffusion. Chaque liste traite d'un sujet particulier. Pour choisir une liste de diffusion francophones, consultez l'annuaire Francopholistes sur http://www.francopholistes.com .

5.5. Les news (réseau USENET)

Le réseau USENET est un réseau de serveurs qui stockent temporairement les courriers qui leur sont envoyés. Ces courriers sont organisés par thèmes ou groupes de discussion (newsgroup). Vous pouvez consulter ces courriers et y répondre, votre message (votre News) est alors stocké et apparaît à la suite du courrier auquel vous avez répondu.

Des modérateurs lisent les courriers, ils regroupent les questions souvent posées dans des fichiers appelés FAQ (Frequent Asked Questions ou Foire aux Questions). Les FAQ sont aussi régulièrement stockées sur le forum concerné. Le groupe fr.news.reponses stocke l'ensemble des FAQ françaises.

Les newsgroups sont regroupés dans des catégories, par exemple:

comp groupes de discussion en rapport avec l'informatique
soc groupes de discussion en rapport avec la société, les cultures
fr groupes de discussion francophones

Le contenu des discussions est archivé sur certains serveurs, par exemple ceux de google (voir le site http://www.google.fr/grphp?hl=fr).

Pour lire les nouvelles, il vous faut un logiciel client, appelé lecteur de news. Certains clients de messagerie intègrent aussi un lecteur de news comme par exemple Netscape Communicator.

Conseil: si vous postez une nouvelle sur un serveur de news, utilisez une adresse de messagerie différente de votre adresse courante car vous pouvez être sûr qu'elle sera récupérée par des spécialiste en tout genre de la publicité. Ils vont la rediffuser et vous serez inondé(e) de messages en tout genre, vous allez rejoindre la liste bien longue des victimes duspamming (publipostage sauvage).

5.6. Les Bavardages (Chat)

Une multitude de protocoles permettent de dialoguer en direct sur internet. Certains permettent la connexion directe entre deux internautes, d'autres créent des 'chambres de discussion' ('Chat Rooms') ou fonctionnent sur le principe de 'canaux' ou bien encore annoncent l'arrivée d'un membre de votre 'tribu' avant de vous permettre de le contacter en ligne...

5.6.1. L'IRC

Le protocole IRC (internet Relay Chat) ou dialogue en direct permet à plusieurs personnes de dialoguer en même temps. Après connexion à un serveur IRC, on choisit un canal, chaque canal ayant ses habitués et ses propres règles de discussion.

Pour communiquer par IRC, il faut utiliser un logiciel client IRC. Par exemple, mIRC (pour Windows), X-Chat (pour Linux, voir http://xchat.org ). Il faut d'abord définir son surnom (nickname ou nick) et les adresses des serveurs IRC (par exemple irc.tuxfamily.org, port 6667). Vous devez aussi définir le canal (channel) en rapport avec le sujet de discussion qui vous intéresse, par exemple #linuxfr.

Il existe plusieurs réseaux de serveurs IRC: Undernet, Dalnet, IRCnet... Pour plus d'informations, voir le site http://www.hiersay.net.

5.6.2. L'ICQ

L'ICQ ("I Seek You" signifie en français "je te cherche") est un protocole de messagerie qui permet de communiquer avec un certain nombre de personnes de votre choix. Pour utiliser ICQ, il faut demander un numéro d'identification unique gratuit (UIN) à la société Mirabilis (voir http://web.icq.com ). Il faut ensuite utiliser un client ICQ comme Kicq pour Linux (voir http://kicq.sourceforge.net ) ou ICQ pour Windows (voir le site http://www.icq.com/download/).

Lorsque vous utilisez un client ICQ, il faut d'abord définir votre surnom ('nickname'), un mot de passe, les adresses des serveurs ICQ (par exemple icq1.mirabilis.com, port 4000) et la liste des numéros ICQ des personnes avec qui vous voulez discuter. Après connexion au serveur, le logiciel client vous indique quelles personnes parmi votre liste sont connectées en même temps que vous.

Yahoo ! Messenger, AOL Instant Messenger (AIM) et MSN Messenger sont des concurrents d'ICQ. Les protocoles de communication utilisés sont tous différents et les clients utilisés sont incompatibles entre eux. Pour pouvoir converser avec des personnes de tous ces réseaux, il faut utiliser un client Jabber. Le protocole Jabber permet d'accéder aux serveurs Jabber et aux autres réseaux (MSN, Yahoo, AIM...) via des passerelles. Vous pouvez télécharger des clients Jabber libres pour Linux, Windows et Macintosh sur http://www.jabber.org.

5.7. Les serveurs FTP:

On peut accéder à ces serveurs pour y télécharger des fichiers de toute sortes (musique, programmes, données...) en utilisant le protocole de communication FTP. L'accès se fait sans identification (accès anonyme) ou nécessite un nom d'utilisateur ('login') et un mot de passe ('password').
On peut utiliser un simple navigateur ou un logiciel client FTP. Avec un navigateur, il suffit d'écrire l'adresse du serveur FTP dans la barre de navigation, par exemple :
ftp://ftp.ciril.fr

5.8. Le peer-to-peer (pair-à-pair ou P2P)

Le P2P consiste à créer un réseau entre les différents clients connectés. Les connexions se font directement, sans serveur, sans autorité centrale ni intermédiaire. Ces réseaux servent à échanger des fichiers, à faire du stockage distribué, de la messagerie instantanée, de la diffusion de musique en flux continue (streaming), à désengorger les serveurs téléphoniques, ou faire du calcul distribué (grâce à 75 000 internautes, le projet Decrypton a permis de comparer 500 000 protéines du monde vivant pour mettre au point des thérapigénies. Les recherches ont duré quelques mois au lieu de 1170 ans). Un logiciel qui fait office à la fois de client et de serveur doit être installée sur chaque ordinateur. Exemples : Napster (voir http://www.napster.com), Gnutella (voir http://www.gnutelliums.com ), KaZaa (voir http://www.kazaa.com), Morpheus (voir http://www.morpheus.com/), PeerCast (voir http://www.peercast.org/) permet de faire du streaming audio et de créer sa propre radio, BitTorrent (voir http://bittorrent.com) permet de proposer le téléchargement massif et soudain de très gros fichiers, la charge étant répartie sur chaque client qui télécharge, c'est une excellente alternative au FTP.

5.9. Les serveurs de développement collaboratif

CVS (Concurrent Version System) permet d'avoir une traçabilité lors de l'écriture d'un logiciel, même si plusieurs personnes y travaillent en même temps. Vous pouvez télécharger CVS sur http://www.cvshome.org/ et l'installer sur votre ordinateur personnel, sur un des ordinateur de votre réseau Intranet ou bien utiliser un serveur CVS distant, par exemple Sourceforge (voir http://sourceforge.net ) ou Savannah (voir http://savannah.gnu.org ).

Grâce à CVS, il vous est possible de retrouver à tout moment quels modifications ont été apportées au code du logiciel, de reprendre l'écriture depuis une sauvegarde quelconque, de créer des 'branches' de développement, c'est-à-dire des versions différentes... Il existe d'autres alternatives à CVS, comme Subversion (voir http://subversion.tigris.org/).

5.10. L'internet mobile

C'est un protocole d'échange d'informations pour les mobiles. Il y a plusieurs technologies concurrentes.
 - le WAP : un serveur WAP envoie des pages au format WML (Wireless Markup Language) à une passerelle qui compresse et transmet ces données à un téléphone portable, un agenda électronique portable. Utilise le réseau de téléphonie mobile traditionnelle GSM. Débit d'environ 1,5 ko/s. Cette technologie a été un échec.
- i-mode : technologie développée par le japonais DoCoMo, utilisée par Bouygues Télécom. i-mode est basée sur une transmission de données par paquets de 128 octets à 1,2 ko/s. Utilise le réseau de téléphonie mobile PHS (Personal Handyphone System) de DoCoMo. Il se base sur le réseau PDC (Personal Digital Cellular - la norme Japonaise correspondant au GSM) auquel DoCoMo ajoute une sur-couche de communication par paquets (PDC-P).
I-mode utilise le langage cHTML (Compact HTML), un sous-ensemble de HTML, auquel il rajoute quelques symboles prédéfinis.
Les requêtes HTTP émises par les téléphones sont acheminées vers les serveurs internet via les passerelles i-mode de DocoMo, un peu comme les passerelles WAP.
- le GPRS est une norme de transmission de données en mode "paquet " qui augmente sensiblement les débits disponibles. Le GPRS permet d'accéder à internet avec un débit de quelques ko/s. Utilise le réseaux GSM.
- l'UMTS devrait progressivement remplacer la norme GSM. Il sera possible d'accéder à internet avec des débits de plusieurs dizaines de ko/s.

5.11. Le cryptage

Gnu Privacy Guard (GPG) est le logiciel de cryptage le plus sûr à deux niveaux :
- il utilise des techniques de cryptage fort, impossibles à contourner
- il est sous licence libre, ce qui garantit l'absence de portes dérobées. GnuPG respecte les spécifications du standard OpenPGP.

GnuPG est disponible pour les systèmes UNIX (MacOS X, Linux, OpenBSD, FreeBSD, SunOS, HP-UX, IBM-AIX, IRIX) et pour les systèmes Windows (XP, 95/98/Me, NT/2000). Voir le site http://www.gnupg.org/(fr)/.

Avec GPG, vous générez une clé privée et une clé publique. Vous pouvez diffuser votre clé publique dans vos messages électroniques, sur certains serveurs: http://www.keyserver.net,http://pgp.mit.edu ou http://www.mandrakesecure.net/en/cks/. Cette clé sera utilisée par vos correspondants pour crypter les messages qu'ils vous enverrons. Vous pourrez décrypter ces messages avec votre clé privée.

5.12. Les serveurs de streaming

Ces serveurs diffusent de l'audio et de la vidéo à la demande et en continu, on n'est pas obligé de télécharger toute la vidéo pour la regarder, le flux est géré en temps réel. C'est la base de la future télévision numérique. Les futurs téléviseurs numériques seront connectés en permanence au réseau internet et la télécommande permettra de sélectionner le site internet où se connecter et le film à visionner... Ces services seront certainement payants et chaque abonnement ne permettra d'accéder qu'à certains serveurs. Voir par exemple VidéoLAN sur le site http://www.videolan.org.

6. Bibliographie, sites à consulter

Pour plus d'information sur internet, consultez les RFC (Request for Comments), élaborés par l'IAB (internet Activities Board). Ce sont des documents qui décrivent, spécifient, aident à l'implémentation, standardisent et débattent de la majorité des normes, standards, technologies et protocoles liés à internet et aux réseaux en général: http://abcdrfc.free.fr.

Version 0.31 du 17 octobre 2004. Merci de signalez les erreurs et de proposez vos améliorations à david.vantyghem@ANTISPAMfree.fr (enlevez ANTISPAM dans l'adresse de messagerie).