UFR d'Économie et de Gestion Cyril Randriamaro  
  TD d'Informatique Licence 1ère année  

Support du TD n°1
Conception d'un site Web
Introduction - HTML

1. Introduction

Un site internet est constitué de pages liées les unes aux autres.
Ces pages sont pour la plupart réalisées en utilisant un langage de mise en page appelé HTML (Hyper Text Markup Language ou Langage de balises hypertexte).

Vous pouvez avoir un aperçu de ce langage en affichant le code HTML de cette page (Menu Affichage / Code source de la page).

1.1. Hypertexte

Un système hypertexte est un système contenant des documents liés entre eux par des hyperliens permettant de passer automatiquement (en pratique grâce à l'informatique) du document consulté à un autre document lié. Un document hypertexte est donc un document qui contient des hyperliens.

Lorsque les documents ne sont pas uniquement textuels, mais aussi audiovisuels, on peut parler de système et de documents hypermédias.

1.2. Hyperlien

Un hyperlien ou lien hypertexte ou simplement lien, est une référence dans un système hypertexte permettant de passer automatiquement d'un document consulté à un document lié.

1.3. Hypermedia

On parle d'hypermédia lorsque les informations hypertextuelles sont multimodales, c'est-à-dire qu'elles contiennent des textes, des images (fixes ou animées), des sons et/ou des vidéos.

2. Les balises HTML

2.1. Ecriture des balises

Les balises HTML sont reconnaissables par le fait qu'elles sont entourées des signes inférieur "<" et supérieur ">". Elles peuvent être écrite en minuscules ou en majuscules.
Par exemple <balise> ou <BALISE>.

Certaines balises sont associées à une balise de fin qui s'écrit </BALISE> comme par exemple la mise en italique (début d'italique et fin d'italique), d'autres se suffisent à elle même comme les sauts de ligne (il n'y a pas de début de saut de ligne et de fin de saut de ligne, juste un saut de ligne).

Exemples

Mise en italique :

Le code HTML : Ce <i>mot</i> est en italique.
Le résultat : Ce mot est en italique.

Saut de ligne :

Le code HTML : Cette ligne est<br>coupée en deux.
Le résultat : Cette ligne est
coupée en deux.

2.2. Paramètres de balises

Certaines balises ont des paramètres, optionnels ou obligatoires.
Ces paramètres s'écrivent comme ceci : <balise nomparametre>
ou comme ceci : <balise nomparametre="valeur parametre">

Attention :

2.3. Ecriture du code HTML

Les balises servent à délimiter le code et à opérer la mise en page du document.
Tout caractère blanc (espace, tabulation, saut de ligne) est considéré comme étant un seul et unique espace. C'est pourquoi vous pouvez aérer le code HTML pour le rendre plus lisible.

Les deux codes suivants ont le même résultat bien que le premier est nettement plus lisible que le second.

1 :

<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Première page</h1>
<p>Ceci est ma première page</p>
</body>
</html>

2 :

<html><head><title>Titre de la page</title></head><body><h1>Première
page</h1><p>Ceci est ma première page</p></body></html>

3. Structure d'un document HTML

Le document HTML est composé de deux parties, l'en-tête et le corps du document.
L'entête va définir des informations telles que le titre du document qui apparaît dans la barre de titre du navigateur.

Voici la structure minimale d'un document HTML :

<html>
<head>
<title>Titre de la page</title>
</head>
<body>
</body>
</html>

3.1. Balise <html>

Le document doit toujours commencer par <html> et se terminer par </html>.

3.2. Balise <head>

Cette balise situe l'en-tête du document. Elle doit se placer juste après la balise <html>.
L'en-tête se termine avec la balise </head>.

3.3. Balise <title>

Cette balise permet de définir le titre du document. Elle doit obligatoirement se trouver dans l'en-tête, c'est à dire entre <head> et </head>.

3.4. Balise <body>

Cette balise situe le corps du document. Elle doit se placer juste après la fin de l'en-tête </head>.
Le corps du document se termine avec la balise </body>.

Cette balise accepte plusieurs paramètres :

Les couleurs peuvent s'exprimer de trois façons.

Voici un tableau des principales couleurs.

Exemple

Document jaune avec du texte bleu :

<html>
<head>
<title>Titre de la page</title>
</head>
<body bgcolor="yellow" text="blue">
</body>
</html>

4. Les paragraphes

Le langage HTML contient un certain nombre de balises de paragraphes permettant de structurer le document. Il y a plusieurs types de paragraphes, chacun ayant une fonction ou un affichage particulier.

4.1. Paragraphe normal <p>

La balise <p> permet de délimiter un paragraphe standard précédé et suivit d'un saut de ligne. Le paragraphe se termine obligatoirement par la fin de paragraphe </p>.

Cette balise accepte le paramètre align qui permet de déterminer l'alignement horizontal du paragraphe. Il peut prendre les valeurs suivantes :

Exemple :

<p align="center">Un paragraphe centré</p>

4.2. Les titres <h1> à <h6>

Le HTML permet de définir 6 niveaux de titres, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

Comme le paragraphe <p>, il accepte le paramètre align avec les mêmes valeurs :

Exemple :

<h1>Titre principal</h1>

4.3. Paragraphe avec retrait <blockquote>

La balise <blockquote> permet de définir un retrait à gauche et à droite sur un paragraphe.

Exemple :

<blockquote>Paragraphe avec retrait</blockquote>

Comme le paragraphe <p>, il accepte le paramètre align avec les mêmes valeurs :

4.4. Liste à puce <ul>

Le paragraphe <ul> permet de créer une liste à puce.

Il s'utilise avec la balise <li> qui permet de définir les lignes de la liste :

<ul>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
<li>Ligne 4</li>
<li>Ligne 5</li>
</ul>

Paramètres :

4.5. Liste numérotée <ol>

Le paragraphe <ol> permet de créer une liste numérotée.

Il s'utilise avec la balise <li> qui permet de définir les lignes de la liste :

<ol>
<li>Ligne 1</li>
<li>Ligne 2</li>
<li>Ligne 3</li>
<li>Ligne 4</li>
<li>Ligne 5</li>
</ol>

Paramètres :

4.6. Liste de définitions <dl>

Le paragraphe <dl> permet de définir une liste de paires terme/définition.

Il s'utilise avec les balises <dt> et <dd>, <dt> indique le terme à définir, <dd> indique la définition.

<dl>
<dt>Terme 1</dt>
<dd>Ligne de définition 1</dd>
<dt>Terme 2</dt>
<dd>Ligne de définition 2</dd>
<dt>Terme 3</dt>
<dd>Ligne de définition 3</dd>
</dl>

4.7. Ligne horizontale <hr>

La balise <hr> dessine une ligne horizontale.

Paramètres :

Exemples :

<hr width="500" size="6">

<hr align="center" width="300" size="3" noshade color="#009900">

5. Mise en forme des caractères

5.1. Mise en gras <b>

La balise <b> permet la mise en gras des caractères. Elle est obligatoirement associée à la balise de fin de gras </b>.

Le code HTML : Des <b>mots en gras</b> !
Le résultat : Des mots en gras !

5.2. Mise en italique <i>

La balise <i> permet la mise en italique des caractères. Elle est obligatoirement associée à la balise de fin d'italique </i>.

Le code HTML : Des <i>mots en italique</i> !
Le résultat : Des mots en italique !

5.3. Mise en souligné <u>

La balise <u> permet de souligner des caractères. Elle est obligatoirement associée à la balise de fin de souligné </u>.

Le code HTML : Des <u>mots soulignés</u> !
Le résultat : Des mots soulignés !

5.4. Mise en exposant <sup>

La balise <sup> permet la mise en exposant des caractères. Elle est obligatoirement associée à la balise de fin d'exposant </sup>.

Le code HTML : Licence 1<sup>ère</sup> année.
Le résultat : Licence 1ère année.

5.5. Mise en indice <sub>

La balise <sub> permet la mise en indice des caractères. Elle est obligatoirement associée à la balise de fin d'indice </sub>.

Le code HTML : F<sub>n+2</sub> = F<sub>n+1</sub> + F<sub>n</sub>
Le résultat : Fn+2 = Fn+1 + Fn

5.6. Police plus petite <small>

La balise <small> permet de diminuer la taille des caractères. Elle est obligatoirement associée à la balise de fin </small>.

Le code HTML : Du texte <small>plus petit</small> !
Le résultat : Du texte plus petit !

5.7. Police plus grande <big>

La balise <big> permet d'augmenter la taille des caractères. Elle est obligatoirement associée à la balise de fin </big>.

Le code HTML : Du texte <big>plus grand</big> !
Le résultat : Du texte plus grand !

5.8. Police télétype <tt>

La balise <tt> permet d'afficher les caractères en police non proportionnelle (télétype). Elle est obligatoirement associée à la balise de fin </tt>.

Le code HTML : Tapez la commande : <tt>dir /b C:\</tt>
Le résultat : Tapez la commande : dir /b C:\

5.9. Choix de police <font>

La balise <font> est plus complexe que les précédentes. Elle permet de choisir :

5.9.1. Nom de police

Le nom à utiliser est celui indiqué dans le choix des polices de votre système d'exploitation.
Il faut néanmoins veiller à rester compatible avec les différentes plateformes (PC, Apple Machintosh, Unix) et les différents navigateurs. Pour ce faire il est possible de proposer plusieurs noms de polices, séparés par une virgule, pour que le système puisse utiliser la première police qu'il connait.

Il y a trois types de polices classiques :

On peut proposer des polices plus exotiques mais il faut cependant proposer en second choix une police plus classique.

Exemple : <font face="Comic Sans MS, Arial, Helvetica, sans-serif">Du texte</font>

5.9.2. Taille de police

Il y 7 tailles de police possibles, de 1 à 7, 1 étant la police la plus petite, 7 étant la plus grande.
Le navigateur fait automatiquement la conversion vers une taille de police réelle, dépendante du système.
Par exemple, sous MS Windows en configuration classique, 1 correspond à une taille de 8 points, 2 à une taille de 10 points, 3 à une taille de 12 points, etc.

La taille peut être exprimée de manière absolue (1, 2, 3) ou de manière relative (-1, +2).

Exemple : <font size="2">Du texte</font>

Notes :

La taille par défaut du navigateur est 3.
<font size="+1"> est l'équivalent de <big>.
<font size="-1"> est l'équivalent de <small>.

5.9.3. Couleur de police

La couleur peut s'exprimer de trois façons.

Voici un tableau des principales couleurs.

Exemple : <font color="#669999">Du texte</font>


Les trois paramètres peuvent être utilisés conjointement.

Exemple : <font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="firebrick">Du texte</font>

5.10. Association de mises en forme

Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi <b><i>...</i></b> est correct et <b><i>...</b></i> risque de vous créer des ennuis.

6. Saut de ligne

Les sauts de ligne dans le texte sont considérés par le navigateur comme des espaces.

Pour demander au navigateur d'effectuer un saut de ligne, utilisez la balise <br>.
Il n'y a pas de balise </br>.

Le code HTML : Première ligne.<br>Deuxième ligne.
Le résultat : Première ligne.
Deuxième ligne.