Développement Web Html

(1)

Sommaire

Introduction ... 2

1. Structure d’une page Web : ... 2

2. Le formatage du texte : ... 3

3. Le texte ... 4

4. Niveaux de titre ... 4

5. Les images : ... 5

6. Les liens hypertextes ... 5

7. Les tableaux ... 6

8. Les listes et les définitions: ... 7

9. Les formulaires... 9

10. Les frames (Les cadres) ... 13

11. Divers (Le Multimédia) ... 15

(2)

LE PRESENT COURS N’EST PAS UNE PRESENTATION EXHAUSTIVE DE TOUTES LES POSSIBILITES DU LANGAGE HTML.

Introduction

Le langage HTML est le langage universel utilisé pour communiquer sur le web. C’est un

ensemble de balises et d’attributs qu’on utilise pour passer des indications aux logiciels clients qui recevront le document écrit au format texte.

Navigateur : Un logiciel permettant d’interpréter les commandes HTML et de surfer sur le web en affichant sur le moniteur les pages qu’il a interceptées.

Exemple : Internet explorer, Netscape, Mozilla Firefox,…

Balise : Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>). Par exemple « <H1> ».

Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est appelée « balise d'ouverture » et la seconde « balise de fermeture ». La balise fermante est précédé du caractère /) :

<marqueur> Votre texte formaté </marqueur>

A titre d'exemple, les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent :

<b> Ce texte est en gras </b>

Attribut : Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais certains attributs ne sont parfois définis que par la clé.

Voici un exemple d'attributs pour la balise <p> (balise définissant un paragraphe), permettant de spécifier que le texte doit être aligné sur la droite :

<p align="right">Exemple de paragraphe</p>

Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs.

1. Structure d’une page Web :

<TITLE>Exemple de structure de document HTML</TITLE> </HEAD> <BODY> ... ... Le document HTML ... </BODY> </HTML>

 La balise <HTML> : Indique que ce qui suit est écrit en HTML toutes les balises de la page Web doivent être écrites entre la balise <html> et </html>.

 L’entête :

Commence avec la balise <head> indique la présence du prologue, d’un titre compris entre le marqueur de début et de la fin.

Le titre est déclaré entre les deux balises <title> et </title> ce titre sera affiché dans la barre de titre du navigateur utilisé.

(3)

 Le corps :

Le corps de la page web doit être situé entre les deux balises <body> et </body>.

 Les attributs de la balise <body> Pour colorer le texte de votre page : L'attribut est : text="code_de_couleur" Exemple : <body text="#000000">

Pour colorer le fond d'écran de votre page : L'attribut est : bgcolor="code_de_couleur" Exemple : <body bgcolor="#0099CC"> Pour colorer les liens de votre page : L'attribut est : link="code_de_couleur" Exemple : <body link="#003366">

Pour colorer les liens actifs de votre page : L'attribut est : alink="code_de_couleur" Exemple : <body alink="#00FF00">

Pour colorer les liens visités de votre page : L'attribut est : vlink="code_de_couleur" Exemple : <body vlink="#CCFF66">

Pour mettre une image de fond d'écran sur votre page : L'attribut est : background="votre image "

Exemple : <body background="image.gif">

Remarque : Dans le texte que vous tapez, les espaces et les retours à la ligne ne sont pas interprétés

2. Le formatage du texte :

L'information que l'on veut faire passer doit toujours être ordonnée, hiérarchisée... de façon à attirer l'attention du lecteur. Nous allons voir comment il est possible de présenter l'information dans son ensemble :

<p>, <br> & <nobr></nobr> :

<p> marque un changement de paragraphe. <br> donne un simple changement de ligne.

Notez ici que les commandes <br> et <p> n'ont pas à être fermées. Vous pouvez utiliser plusieurs commandes <br> et <p> répétitivement pour augmenter l'espacement.

Il faut aussi préciser que le passage à la ligne est automatique en HTML. Pour éviter que les phrases ne soient tronquées arbitrairement, vous pouvez utiliser le marqueur <nobr> (qui lui, doit toujours être terminé par </nobr>)

<HR> insère une ligne :

(4)

On utilise le code suivant: <HR WIDTH=75%>. Cela donne une ligne de 75% de la largeur de l'écran (selon la largeur de la fenêtre du navigateur utilisée par l'usager).  Pour faire varier l'épaisseur de la ligne :

<HR SIZE="5"> donne une ligne d'une épaisseur de 5 pixels

3. Le texte

Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par quelques balises élémentaires.

Gras [Bold] <B>...</B> _{<STRONG>...</STRONG>} Début et fin de _{zone en gras} Italique [Italic] <I>...</I> _<EM>...</EM> Début et fin de _{zone en italique} Souligné [underline] <U>…</U> Début et fin de _{zone soulignée} Taille de caractère [Font size] <FONT SIZE=?>... _</FONT> Début et fin de _{zone avec cette taille} Couleur de caractère [Font color] <FONT COLOR="#$$$$$$"> _</FONT> Début et fin de _{zone en couleur}

A la ligne [Line break] <BR> Aller à la ligne

Commentaires [Comments]  Ne pas afficher

Centrage [Center] <CENTER></CENTER> Centrer

Exemple :

Soit le code suivant :

<HTML> <HEAD><TITLE></TITLE></HEAD> <BODY>texte simple<BR> <B>texte en gras</B><BR> <STRONG>texte en gras</STRONG><BR> <I>texte en italique</I><BR> <EM>texte en italique</EM><BR>

<B><I>texte en gras et en italique</I></B><BR> <FONT SIZE=5>texte</FONT>

</BODY> </HTML>

Qui donnera l'affichage suivant : Texte simple texte en gras texte en gras texte en italique texte en italique

texte en gras et en italique

texte

en bleu

(5)

Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte :

Balise Effet Visuel

Test

Test

Test

Test

<H5> Test</H5> Test <H6> Test</H6> Test

5. Les images :

Afin d'illustrer le contenu de vos pages Web, il vous est possible d'y insérer des images. Les formats d'images reconnus par les navigateurs HTML sont :

 Les images JPEG (.JPG) : les images ayant un grand nombre de couleurs seront bien compressées, c'est-à-dire qu'elles prendront moins de place, donc nécessiteront un temps de chargement moindre)

 Les images PNG : Leur taille est faible dans le cas d'images avec peu de couleurs avec des tons uniformes, ce format permet en outre d'avoir des images entrelacées (qui s'affichent progressivement) avec une profondeur de couleurs de 24 bits et des images dont on définit une couleur comme transparente.

 Les images GIF : Elles possèdent les mêmes atouts que les images PNG, si ce n'est que le format GIF est limité à 256 couleurs maximum.

<IMG> : est la balise permettant d’insérer une image dans un document HTML, Ces principaux attributs sont les suivants :

 SRC: Indique l'emplacement de l'image (il est obligatoire)

 ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs: TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous)

 ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.

 TITLE: Permet d'afficher une info bulle lors du survol de l'image par le curseur.

 WIDTH: Permet de spécifier la largeur de l'image.

 HEIGHT: Permet de spécifier la hauteur de l'image.

Ainsi pour insérer une image, il faudra saisir une balise du type suivant :

6. Les liens hypertextes

Les liens hypertextes (ancrages) est la propriété la plus importante du langage HTML, ce sont des

éléments d'une page HTML (soulignés lorsqu'il s'agit de texte) permettant aux internautes de naviguer vers une nouvelle adresse lorsque l'on clique dessus. Ce sont les liens hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de naviguer :

 vers un autre endroit du document

(6)

 vers une autre machine

L'attribut principal des ancrages est href. Il s'écrit sous la forme suivante : <a href="Adresse ou URL">…. </a>

 Lien externe

Un lien externe est un lien vers une page pointée par son URL Par exemple :

<a href="http://www.fps.ucam.ac.ma"> Faculté polydisciplinaire de Safi </a>

 Lien local

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par le fichier cible.

Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si le fichier cible est "index.html" situé dans le répertoire parent, son lien s'écrira:

Ce lien peut aussi être défini de façon absolue, en écrivant l'adresse du fichier cible de façon locale: <a href="file:///lecteur:/répertoire/index.html"> ... </a>

 Les signets

Il est également possible de créer un signet dans une page, c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte. Les signets se définissent grâce à l'attribut NAME ou ID. La syntaxe est la suivante :

<a id="signet"> ... </a> L'appel d'un signet se fait de la manière suivante :

Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien d'accéder à une section particulière d'une autre page :

7. Les tableaux

En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc TRES fréquent. Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau. Les balises de base sont donc

<table></table> : Cette commande est la commande principale pour ouvrir une zone de tableau. <table> </table> encadrent les limites d'un tableau.

<th></th> : De l'anglais table header, permet d'ajouter une rangée en en-tête. C'est le titre de la colonne. Les paramètres par défaut sont l'usage du caractères gras et la position centrée. <tr></tr> :De l'anglais table row, marque le début d'une nouvelle ligne. <tr> </tr> permet de définir une rangée.

<td></td> : De l'anglais table data, est placé devant les informations qui composent les cellules. Les paramètres par défaut sont l'alignement à gauche et l'alignement vertical au centre.

(7)

Soit le code HTML suivant : <table> <tr> <th> A </th> <th> B </th> <th> C </th> <th> D </th> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr> </table>

Affichera sous un logiciel client (Navigator ou Internet Explorer) :

A B C D

1 2 3 4 5 6 7 8

8. Les listes et les définitions:

Cette partie décrit comment il est possible d'afficher des listes & définitions. Cela consiste à présenter de l'information, avec une indentation comme on peut le voir dans les sommaires des ouvrages papier... Les listes peuvent être programmées de plusieurs façons :

 Listes ordonnées:

Ce type de listes est parfois appelé liste numérotée. Les termes insérés dans cette liste seront numérotés. Lorsqu'un navigateur interprète une liste ordonnée, il numérote (et souvent indente) chaque terme séquentiellement. Ce n'est pas à vous d'ajouter une numérotation et si vous ajoutez ou supprimez des termes, la numérotation de l'ensemble restera correcte.

<ol></ol>

De l'anglais, Ordered-List, ces marqueurs encadrent les termes à numéroter. Cette commande est terminée par </ol>.

<li>

De l'anglais, List-Item, est placé au début de chaque ligne, pour indiquer le premier terme à définir.

Exemple :

Soit le code suivant : <ol>

<lh>Formation au HTML</lh> <li>Introduction

<li>A la découverte du HTML <li>La page HTML

<li>Le formatage du texte <li>Les listes & définitions <li>Les liens HyperTexte <li>...

</ol>

Qui donnera l'affichage suivant : Formation au HTML 1. Introduction

(8)

2. A la découverte du HTML 3. La page HTML

4. Le formatage du texte 5. Les listes & définitions 6. Les liens HyperTexte 7. ...

 Listes non ordonnées:

<ul></ul> : De l'anglais, unumbered-List, ces marqueurs encadrent les termes à présenter.

Cette commande est terminée par </ul>.

<li> : De l'anglais, List-Item, est placé au début de chaque ligne, pour indiquer le premier terme à définir.

Les attibuts

Il est possible de changer la forme des différentes puces grâce à l'attribut type, qui peut recevoir la commande disc (rond noir), circle (carré blanc) ou square (carré noir). Dans l'exemple suivant, vous pourrez constatr les effets de cet attributs. Exemple :

Soit le code suivant : <ul type=disc>

<lh>Formation au HTML</lh> <li>Introduction

<li>A la découverte du HTML <li>La page HTML

<li>Le formatage du texte <li>Les listes & définitions <li>Les liens HyperTexte <li>...

</ul>

Qui donnera l'affichage suivant : Formation au HTML

o Introduction

o A la découverte du HTML o La page HTML

o Le formatage du texte o Les listes & définitions o Les liens HyperTexte o ...

 les définitions :

<dl></dl> : De l'anglais, Definition-List, indique que ce qui suit est une liste de définitions. Cette commande est terminée par </dl>.

<dt> : De l'anglais, Definition-Term, est placé pour indiquer le premier terme à définir. <dd> : De l'anglais, Definition-Data, est placé au début du texte qui compose la définition. Exemple :

(9)

<dl>

<lh>Formation au HTML</lh> <dt>Les tableaux

<dd>Les commandes de base <dd>Les attributs

<dt>Les listes & définitions <dd>Les listes non ordonnées <dd>les listes ordonnées <dd>les définitions </dl>

Qui donnera l'affichage suivant : Formation au HTML Les tableaux

Les commandes de base Les attributs

Les listes & définitions Les listes non ordonnées Les listes ordonnées Les définitions

9. Les formulaires

Jusqu'à présent nous avons vu les différents moyens de diffuser de l'information et de la présenter. Mais sur le Web, l'information ne circule pas qu'en sens unique. Il est possible de faire circuler l'information dans les deux sens et de récolter diverses données et requêtes, en offrant la possibilité à l'utilisateur de renseigner des formulaires de saisie.

Les applications sont très variées : sondage, réserver une chambre ou un billet de train, louer une voiture, faire une recherche à partir d'une base de données, etc...

Tous les éléments d'un formulaire HTML doivent obligatoirement être encadrés par les marqueurs <form> et </form> Exemple : <form> <input ... > <input ... > <input ... > ... </form>  Les zones de saisie

Grâce à la commande <input>, il est possible de créer des formulaires. Deux attributs sont toujours associés à ce marqueur :

1. name : qui sert d'étiquette aux informations qui vont être saisies ou sélectionnées (par exemple, une zone de saisie pourra être reliée à un champ d'une base de données). C'est le nom du champ.

2. type : permet de définir la nature du champ de saisie. Il est suivi d'une valeur et d'un certain nombre d'options pour donner une forme de saisie ou de sélection.

(10)

 type=text

Cette valeur permet de recevoir du texte. Il est possible de définir le nombre de caractères grâce à l'attribut size :

Le code suivant : <form>

Nom : <input type="text" name="nom" size=30> Prénom : <input type="text" name="prenom" size=15> </form>

donnera à l'écran :

Nom : Prénom :

 type=password

Similaire à la valeur précédente, excepté que les données saisies n'apparaissent pas "en clair" à l'écran. Il est possible de définir le nombre de caractères grâce à l'attribut size :

Votre mot de passe : <input type="password" name="mot_de_passe" size=10> </form>

donnera à l'écran

Votre mot de passe :

 type=checkbox

Fait apparaître une zone de sélection qui prend la forme d'une case cochable. La variable value permet d'attribuer une étiquette à la variable name la valeur de la case sélectionnée. L'option checked fait apparaître une case cochée par défaut :

<input type="checkbox" name="viennoiserie" value="croissant" checked>Croissant <input type="checkbox" name="boisson" value="cafe">Café

<input type="checkbox" name="boisson" value="jus_de_fruit" checked>Jus de fruit </form>

donnera à l'écran

Croissant Café Jus de fruit

 type=radio

Identique à l'option précédente. Seul point différent, une seule sélection pourra être validée (avec checkbox, on peut sélectionner plusieurs choix en même temps) :

Le code suivant :

(11)

<input type="radio" name="civil" value="Mr">Monsieur

<input type="radio" name="civil" value="Mme" checked>Madame <input type="radio" name="civil" value="Mlle">Mademoiselle </form>

Donnera à l'écran

Monsieur Madame Mademoiselle

 type=range

range permet à l'utilisateur d'entrer un nombre dont les limites sont fixées par 2 variables : min et max.

Donnez maintenant une note entre 0 et 20 :

<input type="range" name="note" min=0 max=20 size=2> </form>

Donnera à l'écran :

Donnez maintenant une note entre 0 et 20 :

 type=submit

Submit est un des deux boutons se trouvant au bas de tout formulaire de saisie. Il permet

d'envoyer les informations saisies vers le serveur (donc de valider la saisie). L'attribut value permet de spécifier les mots figurant sur le bouton :

<input type="submit" value="Valider la saisie"> </form>

Donnera à l'écran :

Valider la saisie

 type=reset

Idem au bouton précédent mais réinitialise tous les champs de saisie (annule la saisie) : Le code suivant :

<form>

<input type="reset" value="Effacer et recommencer"> </form>

Donnera à l'écran

Effacer et recommencer

(12)

Pour créer une zone de saisie comportant plusieurs lignes, on utilise les marqueurs <textarea></textarea>.

Deux attributs permettent de définir la taille de la zone de saisie en nombre de lignes rows et en nombre de colonnes cols.

Vos commentaires :

<textarea name="comments" rows=10 cols=20> </textarea>

</form> Donnera à l'écran

Vos commentaires :

 Les menus déroulants

<select> </select> permettent de créer des menus déroulants comportant deux ou plusieurs options.

<p>Sélectionnez un jour de la semaine : <select name="jour_semaine"> <option>Lundi <option>Mardi <option>Mercredi <option>Jeudi <option>Vendredi <option>Samedi <option>Dimanche </select> </form> Donnera à l'écran :

Sélectionnez un jour de la semaine : Lundi

On peut aussi spécifier la taille de la fenêtre de sélection en ajoutant la variable size. Dans le cas où size=6, la fenêtre de sélection fera apparaître les six premières options du menu.

Sélectionnez un jour de la semaine :

Lundi Mardi Mercredi Jeudi Vendredi Samedi

(13)

Sélectionnez un ou des jours de la semaine : Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

En rajoutant, l'option selected au marqueur <option>, l'information qui suit sera sélectionnée par défaut.

Sélectionnez un jour de la semaine :

Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

Récupération et exploitation des données

Les données bien évidemment, à un moment ou à un autre devront être récupérées et enregistrées par le serveur en vue de leur traitement. Les possibilités qui sont offertes dans ce domaine sont très nombreuses. Elles n'entrent pas dans les spécifications du langage HTML puisque ce dernier se borne uniquement à définir l'aspect des pages Web. Un programme informatique traitant les données transmises par un formulaire doit être, à cet effet, mis en place sur le serveur qui abrite le dit formulaire.

10. Les frames (Les cadres)

Grâce à la technologie des frames (en français "cadres") il est désormais possible d'afficher plusieurs pages HTML dans différentes zones (ou cadres).

 Créer des frames :

Afin de créer un site contenant des cadres, il suffit de créer un fichier contenant l'agencement des cadres : ce fichier HTML a pour particularité d'avoir un conteneur <FRAMESET> à la place du jeu de balises <BODY>. C'est cette balise qui définit les cadres par leur dimension en pixels ou en pourcentage (%).

Voyons ceci sur 3 exemples:  2 cadres verticaux  2 cadres horizontaux

 2 cadres horizontaux et un vertical Exemple n°1 :

(14)

Exemple n°2

Exemple n°3

 Les attributs de la balise <FRAMESET> :

Attribut Valeur Action

Rows

pourcentage (entre 1 et 100) valeur en pixels

En fixant une seules des valeurs et en donnant à l'autre la valeur *, la valeur s'ajuste automatiquement

Cadre horizontal

Cols pourcentage (entre 1 et 100) valeur en pixels

(15)

valeur *, la valeur s'ajuste automatiquement

Frameborder YES _NO Indique si le cadre a _{une bordure ou non}

Border=n n est une valeur définissant la taille de la bordure Indique la taille de la _bordure Bordercolor Nom de la couleur _{Valeur de la couleur en hexadécimal} Indique la couleur de _{la bordure}

 Les attributs de la balise <FRAME> :

La balise <FRAME> permet de définir un ou plusieurs cadres au sein de la balise <FRAMESET>

Attribut Valeur Action

Src URL Définit l'emplacement de la page à afficher dans le cadre

Name "nom" Définit un nom qui permettra d'afficher un autre document _{dans le cadre gâce à l'attribut Target} Frameborder YES _NO Détermine si les cadres auront ou non une bordure

Noresize (Aucune) Interdit à l'utilisateur de redimensionner les cadres (Ce n'est _{pas la valeur par défaut)} Scrolling YES NO

AUTO

Permet ou non l'affichage d'une barre de défilement (Auto laisse le navigateur décider de son utilité)

 Désigner un cadre avec un lien hypertexte

Pour afficher des liens dans un des cadres, il suffit d'utiliser l'attribut target dans la balise <A> Pour spécifier le nom du cadre qui a été spécifié dans la balise <FRAME> par l'attribut NAME. Par exemple: <A HREF="page.htm" TARGET="gauche">

Valeur Action

_self Affiche la cible dans le même cadre que le lien _parent Affiche la cible dans le cadre de niveau supérieur _blank Affiche la cible dans une nouvelle fenêtre

_top Affiche la cible dans la fenêtre entière du navigateur

Remarque : On peut toujours utiliser la notion de l’hypertexte pour pouvoir adresser un mail électronique :

<a href="mailto:adresse_mail "> lien </a> ou

11. Divers (Le Multimédia)

On peut incorporer autre chose que du texte et des images à un fichier HTML : les sons et les animations vidéo sont aussi les bienvenus. Ils viendront se charger dans des fenêtres distinctes de celle du navigateur. Un logiciel dit "programme d'accompagnement" sera lancé parce que le navigateur ne peut reproduire tous les sons ou animations lui-même.

(16)

Pour placer des sons dans un document HTML, vous devez d'abord choisir et travailler (éventuellement) vos sons dans votre logiciel de traîtement sonore et sauvegarder les fichiers produits dans un format compatible (WAV, AIFF, AU).

La commande pour insérer un son est du même type que les pointeurs déjà vus. On peut ainsi mettre un son "derrière" un lien ou une image. Voici les deux commandes :

Pour assigner un son à un lien :

<a href="bebe.wav">Ecoutez le bébé (Attention : 48Ko)</a> Donne : Ecoutez le bébé (Attention : 48Ko)

Pour une image "sonore" :

<a href="bebe.wav"> <img src="eric_bebe.jpg></a>  Les séquences vidéo

L'intégration de séquences vidéo est possible en HTML par le biais d'animations en format Quicktime, MPEG ou AVI.

Dans l'exemple qui suit, le code utilisé est:

<a href="st_voyager.avi">Cliquez ici pour voir Star Trek Voyager (Attention : 358 Ko) </a> Donne à l'écran : Cliquez ici pour voir Star Trek Voyager (Attention : 358Ko)

L'utilisateur doit cliquer sur la phrase contrastée "Cliquez ici pour voir Star Trek Voyager" pour déclencher le téléchargement du fichier sur le disque dur de l'utilisateur.

On peut également choisir de mettre une image comme déclencheur de la commande en inscrivant une image source comme référence au lieu de texte comme ceci :

<a href="st_voyager.avi"> <img src="voyager.gif"></a> .

(17)

Annexe

Un serveur HTTP est un logiciel servant des requêtes respectant le protocole de

communication client-serveur Hypertext Transfer Protocol (HTTP), qui a été développé pour le Web, les pages Web sont en pratique toujours servies avec ce protocole. D'autres ressources du Web comme les fichiers à télécharger ou les flux audio ou vidéo sont en revanche

fréquemment servis avec d'autres protocoles.

Un ordinateur sur lequel fonctionne un serveur HTTP est appelé serveur Web. Les serveurs HTTP les plus utilisés sont :

 Apache HTTP Server de la Apache Software Foundation (60 % des serveurs web)  Internet Information Services (IIS) de Microsoft

 Le serveur Web Zeus de Zeus Technology

Il existe, sur Internet, un nombre important de serveurs proposant des documents multimédia c'est-à-dire composés de texte, images, sons, animations etc. Ces documents, appelés pages web sont visualisés grâce à un programme appelé browser ou navigateur en Français.

Un document, proposé par un serveur web, est toujours désigné par une "adresse" appelée URL pour Universal Resource Locator(localisateur de ressource universel). Une URL a la structure suivante :

protocole://adresse_machine[/répertoire/sous-rep/.../nom_document

Le protocole HTTP (HyperText Transfert Protocol) est utilisé pour transmettre une page au format HTML (que nous allons définir tout de suite). Il est cependant possible d'indiquer un autre protocole comme ftp, telnet etc. C'est pourquoi on parle de localisateur de ressource universel.

La machine sur laquelle fonctionne le serveur web est spécifiée soit par son adresse IP

numérique (ex : 147.25.48.54) soit par son adresse DNS alphanumérique (ex : www.ibm.com). Dans le dernier cas, le premier terme de l'adresse DNS est généralement "www" (mais ce n'est pas une obligation).

Enfin, le document demandé est identifié par son chemin d'accès (path) et son nom. Pour une page HTML, son nom se termine par .html. Notez que si aucun document n'est spécifié, c'est une page par défaut, dite HomePage ou Page d'acceuil qui est envoyée au navigateur.

Voici un exemple d'URL (fictive):

http://www.apple.com/index/download/drivers/list.html

Précisons que les pages HTML utilisent la technique de l'hypertexte, permettant de spécifier des URL au sein des pages, vers d'autres pages. Cela crée une structure, au niveau mondial, qui peut être vue comme une toile d'araignée, d'où le terme de World Wide Web.