(2é année) AU : 2017/2018

Pr : Laila Alami

LE LANGAGE HTML
Hyper Text Markup Language
SOMMAIRE
Avant Propos .........................................................................................................................2
1. Structure d’une page HTML .............................................................................................2
2. Notion de Balise .................................................................................................................3
3. Balises de mise en forme....................................................................................................3
4. Indices et exposants ...........................................................................................................5
5. Justification .......................................................................................................................5
6. Les listes.............................................................................................................................5
7. Les tableaux .......................................................................................................................6
7.1. Balises simples de tableau ......................................................................................................6
7.2. Options de la table .................................................................................................................6
7.3. Options des cellules: ...............................................................................................................7
8. Images ...............................................................................................................................8
9. Les liens hypertextes ..........................................................................................................8
10. Adresse relative et adresse Absolue ..................................................................................9
11. Options de la balise body................................................................................................ 10
12. Organisation du texte..................................................................................................... 10
12.1. Les paragraphes ................................................................................................................. 10
12.2. Les titres ............................................................................................................................. 10
<H3>Mon texte</H3> ......................................................................................................................... 10
12.3. Les séparateurs .................................................................................................................. 11
13. Les caractères spéciaux ................................................................................................. 11
14. Les frames...................................................................................................................... 12
15. Map, area et images réactives ........................................................................................ 13
16. La balise audio ............................................................................................................... 13
17. La balise vidéo ............................................................................................................... 14

1
Avant Propos

HTML est le langage de balisage hypertexte utilisé dans le Web (HyperText Markup
Language). Votre information sera ainsi transportée sur cette gigantesque toile de réseaux
interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un
programme appelé navigateur ou browser.

Ce logiciel, que l'on appelle un browser, vous permet de surfer sur le Net et d'afficher sur
votre écran les "pages" qu'il a interceptées. Il y a, hélas, beaucoup de marques et de types de
browsers différents. Des simples, des archaïques ou des sophistiqués... Les plus connus sont
Google Chrome, Netscape ainsi Internet Explorer de Microsoft mais il en existe beaucoup
d'autres.

Chaque browser a sa propre façon de travailler.

A la différence de votre traitement de texte préféré qui restitue exactement votre document sur
une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez
jamais exactement ce que le browser de votre lecteur du bout du monde affichera sur l'écran
de celui-ci.

HTML n'est pas un langage de programmation dans le sens ou il n’existe pas de variables,
boucles, expressions conditionnelles, …

Il utilise "simplement" des balises pour mettre en forme (avec des liens, en tableau, etc...) du
texte et des images.

Pour avoir une idée de l'aspect d'une page écrite en HTML, cliquez sur "Affichage" (ou
"View") dans votre navigateur, puis sélectionnez "page source".

Pour créer une page Web en HTML, nous avons besoin de:

1. Un navigateur (google Chrome, Netscape, ...), pour visualiser le résultat;

2. Un éditeur HTML (Notepad ou WordPad) pour créer votre page HTML;

A condition de sauvegarder le fichier ainsi créé au format texte, avec une extension .html (ou
.htm pour les versions de Windows antérieures à Windows 95).

NB: vous n'aurez pas besoin d'être connecté à Internet pour créer votre page Web.

1. Structure d’une page HTML

<html> < !--- première balise d’un fichier HTML--- !>
<head> < !--- entête --- !>
<title> Mon titre </title> < !--- titre --- !>
</head>
<body>
< !--- corp : tout le document à afficher contenant texte, images,… --- !>
Voici mon premier document!
</body>
</html> < !--- dernière balise d’un fichier HTML--- !>

2
Le document doit être sauvegardé avec l'extension ".htm" ou ".html".

Un double-clique sur le document : le navigateur par défaut sera alors ouvert sur la page.

Remarque :

<!-- ceci est un commentaire dans mon fichier HTML -->

<!-- il n'apparaitra donc pas dans le texte de mon document -->

2. Notion de Balise

Une balise est une "instruction" comprise entre les signes < et > qui possède un nom et
parfois des attributs.

La balise <Br> par exemple, permet de spécifier qu'il faut passer à la ligne.

La plupart des balises doivent être ouvertes puis fermées (début et fin).

Ouverture : <nomBalise>
Fermeture : </nomBalise>

Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse,
il peut être écrit indifféremment en majuscule, en minuscule ou en un mélange des 2.

L'attribut d'une balise est défini comme suit: nomAttribut="valeur"

3. Balises de mise en forme

Gras <B>...</B> Début et fin de zone en gras

<STRONG>...</STRONG>
Italique <I>...</I> Début et fin de zone en italique
<EM>...</EM>
Taille de <FONT SIZE=?>...</FONT> Début et fin de zone avec cette
caractère taille

Couleur de <FONT COLOR="#$$$$$$"></FONT> Début et fin de zone en couleur

caractère
A la ligne <BR> Aller à la ligne

Centrage <CENTER></CENTER> Centrer

ACRONYM <ACRONYM Afficher la signification d'une

TITLE="signification..."> acronyme abréviation lorsqu'elle est survolée
</ACRONYM> par le curseur

3
Exemple Couleur

<font color="red">Mon texte</font>

<font color="#FF0000">Mon texte</font>

Le premier exemple est utilisable pour quelques couleurs prédéfinies: red, green, black...
Sinon, on peut utiliser le code commençant par #, basé sur le système "RGB" (Red-Green-
Blue): les 2 premiers chiffres (en base 16, donc allant de 0 à F) fournissent le taux de rouge,
les 2 suivants le taux de vert, et les 2 derniers le taux de bleu.

Par exemple, si vous voulez obtenir du rose, mélange du rouge et du bleu, tapez

<font color="#FF00FF">Mon texte</font>

Code de couleurs - extrait

Bleu #0000FF Vert #00FF00

Blanc #FFFFFF Violet #8000FF

Rouge #FF0000 Jaune #FFFF00

Gris clair #C0C0C0 Noir #000000

Exemple Taille
Taille absolue (de 1 à 7):

<font size=1>Mon texte</font>

<font size=2>Mon texte</font>
<font size=3>Mon texte</font>
<font size=4>Mon texte</font>
<font size=5> Mon texte</font>
<font size=6> Mon texte</font>
<font size=7> Mon texte </font>

Ou taille relative:

<font size=-2>Mon texte</font>

<font size=-1>Mon texte</font>
<font size=+1>Mon texte</font>
<font size=+2> Mon texte</font>

4
4. Indices et exposants

<SUB>indice</SUB> Exemple H<SUB>2</SUB>O donne : H2O

<SUP>exposant</SUP> Exemple : X<SUP>n</SUP> donne Xn

5. Justification

Justification à droite

<DIV ALIGN="right"> texte ou objets... </DIV>

Justification centrée

<DIV ALIGN= "center"> texte ou objets... </DIV>

Justification à gauche

<DIV ALIGN=" left"> texte ou objets... </DIV>

6. Les listes
<OL> correspond aux listes numérotées (Ordered List);
<UL> correspond aux listes à puces (Unordered List);
<LI> sert à spécifier qu'on démarre un nouvel élément de liste;

à noter que </LI> existe également, mais n'est pas nécessaire, car supposé à l'ouverture du
<LI> suivant, ou à la fermeture de liste </UL>

Exemple :
<html> Le résultat :
<head>
<title> Les mois de l’année </title>
</head>
<body>
<H1>Les mois du Printemps</H1>
<UL> <LI>avril
<LI>mai
<LI>juin
</UL>
<H3>Les mois de l’automne</H3>
<OL> <LI>octobre
<LI>novembre
<LI>décembre
</OL>

</body>
</html>

5
7. Les tableaux

L'usage des tableaux est très fréquent. Ils servent à aligner des chiffres mais surtout à placer
des éléments à l'emplacement que vous souhaitez.
Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau.

7.1. Balises simples de tableau

<TABLE> et </TABLE> servent respectivement à ouvrir une nouvelle table, et fermer la

table courante;

<TR> et </TR> servent à définir une ligne du tableau;

<TD> et </TD> servent à définir une cellule du tableau (à noter que </TD> n'est pas
indispensable, pour la même raison que </LI>).

<TH> et </TH> servent à définir un titre de ligne ou de colonne (le texte apparait alors centré
en gras dans la cellule correspondante);

<CAPTION> et </CAPTION> servent à définir un titre pour le tableau.

Exemple :
Code HTML Résultat Obtenu
<table> Mon titre
<caption>Mon titre</caption>
Nom 1 Nom 2
<tr>
<th>Nom 1 Cellule 1 Cellule 2
<th>Nom 2
</tr><tr>
<td>Cellule 1
<td>Cellule 2
</tr>
</table>

7.2. Options de la table

Border : spécifie l'épaisseur du cadre extérieur, en pixels. Avec la valeur 0, le cadre est
invisible;
Cellspacing : épaisseur en pixels autours de chaque cellule;
Cellpadding : épaisseur en pixels entre l'élément de la cellule et le cadre;
Width : largeur occupée par le tableau en pixels ou en pourcentages;
Align : l'alignement du tableau: center, right ou left.

6
Exemple

En remplaçant la balise <table> de l'exemple précédent par:

<table border=1 cellpadding=2 cellspacing=5>, on obtient:

Mon titre
Nom 1 Nom 2
Cellule 1 Cellule 2

7.3. Options des cellules:

<Td colspan=2> : fusion horizontale de 2 cellules;

<Td rowspan=2> : fusion verticale de 2 cellules.

Exemple :

<CENTER>
<TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
</TABLE>
</CENTER>

Résultat :

7
8. Images

<IMG SRC="chemin_d_acces_a_l_image">

Attributs:
Align : alignement désiré de l'image (de même que pour les tableaux)
 Align = top / middle / botton / left / right
Width : longueur
Height : hauteur
Alt : texte associé à l'image (apparait quand la souris passe au dessus, ou en remplacement
de l'image si celle-ci n'existe pas)
Border = ? (en pixels)

9. Les liens hypertextes

<A HREF="chemin_d_acces_a_la_page">Texte du lien</A>

Liens à l'intérieur d'une même page:

Placer: <a name="myRef"></a> à l'intérieur de votre document

<a href="#myRef">Texte du lien</a> désigne alors l'emplacement nommé « myref »

A utiliser par exemple en bas de page pour proposer de revenir en haut de page.

Les chemins d'accès peuvent être:

Absolu : c'est-à-dire qu'on spécifie l'adresse complète de ce à quoi on fait référence:

par exemple C:/images/[Link] pour une image, ou [Link] pour un site;

Relatif : la référence est faite par rapport à l'endroit où l'on se trouve:

"." désigne le répertoire courant,

".." désigne le répertoire père

Par exemple

8
10. Adresse relative et adresse Absolue

Exemple1 : Le fichier [Link] se trouve dans le répertoire « yasmin »

Etablir un lien dans le fichier [Link] vers le fichier [Link]:

Exemple2 : Le fichier [Link] se trouve dans le répertoire « temp »

Etablir un lien dans le fichier [Link] vers le fichier [Link] :

Exemple3 : Le fichier [Link] se trouve dans le répertoire « temp »

Etablir un lien dans le fichier [Link] vers le fichier [Link] :

9
11. Options de la balise body
Les principales options de la balise body:
 Attribut  Signification
 bgcolor  Couleur de fond de page
 background  Image de fond de page
 text  Couleur du texte
 Bordercolor  Couleur de bordure
 border  Dimension de la bordure
 width  Permet de changer la largeur
 height  Permet de changer la hauteur
 Précise l’alignement (left, center,
 Align
right)

12. Organisation du texte

12.1. Les paragraphes

<p> paragraphe</p>

<p align=justify>paragraphe</p>
<p align=left>paragraphe</p>
<p align=center>paragraphe</p>
<p align=right>paragraphe</p>

12.2. Les titres

de <H1> à <H6>:

<H1>Mon texte</H1>
<H2>Mon texte</H2>
<H3>Mon texte</H3>

<H4>Mon texte</H4>
<H5>Mon texte</H5>
<H6>Mon texte</H6>

10
12.3. Les séparateurs

<HR size=?> Epaisseur en pixels

<HR width=?> Largeur en pixels

<HR width="%"> Largeur en % de la fenêtre

<HR align=left> Alignement gauche

<HR align=right> Alignement droite

<HR align=center> Alignement centré

Exepmle : <HR width="50%">

13. Les caractères spéciaux

Les caractères tels < et > étant interprétés par votre navigateur comme marqueurs de balises,
Pour cela, il existe les caractères spéciaux. Ceux-ci commencent par le signe "&" et finissent
par un point-virgule ";".

 &lt; pour: <

 &gt; pour: >
 &amp; pour: &
 &quot; pour: "

Cette liste est également utile pour afficher des caractères n'existant pas sur notre clavier.
Ainsi, par exemple, pour obtenir le caractère €, il faut écrire &euro;

De plus dans certaines versions il faut remplacer les caractères accentués:

11
14. Les frames
Permettent de diviser l'écran en plusieurs fenêtres, les balises de division sont :

<FRAMESET>.......</FRAMESET>

Les attributs ROWS, COLS permettent d’indiquer si les frames sont horizontales ou verticales :

<FRAMESET ROWS="..."> Fenêtres horizontales

<FRAMESET COLS="..."> Fenêtres verticales

Pour remplir les frames

<FRAME SRC="URL ou adresse du document à afficher dans la fenêtre">

Exemple : On suppose trois fichiers [Link] contenant « A », le fichier [Link] contenant « B » et

le fichier [Link] contenant « C »,

RESULTAT :
Fichier [Link]
<HTML>
<HEAD>
<TITLE>Frames</TITLE>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="[Link]">
<FRAMESET COLS
="30%,70%">

<FRAME
SRC="[Link]">
<FRAME
SRC="[Link]">
</FRAMESET>
</FRAMESET>
</HTML>

Remarque : Un fichier contenant des frames ne doit pas contenir la balise <BODY>

Référence entre pages

Name : Indique le nom de la fenêtre de telle sorte que cette frame puisse être utilisée comme
cible d'un lien hypertexte.

Exemple : Dans le fichier [Link] : <FRAME SRC="[Link]" NAME=“Cible">

On met un lien vers [Link] dans le fichier [Link] en désignant comme cible la frame C :

<HTML><BODY>
<A HREF=“[Link]" TARGET=“Cible"><H1>B</H1></A>
</BODY></HTML>

12
15. Map, area et images réactives
<img src="[Link]" usemap="#mymap" width="300" height="50">
<map name="mymap">
<area shape="rect" coords="0,0,100,50" href="[Link]" alt="zone 1">
<area shape="rect" coords="100,0,200,50" href="[Link]" alt="zone 2">
<area shape="rect" coords="200,0,300,50" href="[Link]" alt="zone 3">
</map>

3 types de formes peuvent être utilisés:

La forme rectangulaire, comme dans l'exemple :

shape="rect" → coords="left-x, bottom-y, right-x, top-y"

La forme sphérique :
shape="circle" → coords="center-x, center-y, radius"

Ou la forme polygonale :
shape="poly" → coords="x1, y1, x2, y2, ..., xN, yN"

16. La balise audio

La balise <audio> permet de lire des fichiers sons ou des flux audio directement dans la
page en proposant un lecteur intégré avec des contrôles génériques tels que lecture, pause et
contrôle du volume. Lorsque le fichier audio n'est pas trouvé ou que son format n'est pas
supporté, le lecteur n'est pour certains navigateurs pas visibles.

Exemple :
<audio controls="controls">
<source src="[Link]" type="audio/ogg" />
<source src="chanson.mp3" type="audio/mp3" />
Votre navigateur ne supporte pas la balise AUDIO.
</audio>

La balise <source> permet de définir au sein de l'élément <audio> plusieurs ressources

alternatives au cas où le navigateur ne supporte pas le format initialement spécifié dans
l'attribut "src" (il faut alors supprimer l'attribut "src" et spécifier les différents fichiers par
ordre de priorité dans les balises <source>).

Le support des formats audio les plus courants par les navigateurs est le suivant :

V 14 et + V 20 et + V. 9 V 5.1 et + 12 et +
mp3
ogg
wav

13
Remarque : la balise object permet également de lire des fichiers audio, et prend parfois en
charge certains formats non supportés par la balise <audio> (comme le mp3 avec Firefox par
exemple).

Propriétés :

Attribut Valeur Description

autoplay autoplay Indiquez si la lecture doit se lancer automatiquement
Indiquez si les boutons de controls (lecture, arret …)
controls controls doivent apparaitre
Indiquez si le fichier doit redémarrer (boucle) lorsque sa
loop Loop lecture est terminée
auto
preload metadata Indiquez si et comment les fichiers seront pré-chargés
none
Src url Indiquez l’adresse de voter fichier audio

17. La balise vidéo

L'élément <video> offre en HTML5 une solution simple, native pour les navigateurs pour
l'intégration d'une vidéo dans une page web.
Syntaxe : <video controls src="[Link]">Ici la description alternative</video>

Sources multiples

On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant
les types MIME grâce à l'attribut type :

<video width = "400" height – "200" controls ="controls">

<source src="video.mp4" type="video/mp4" />
<source src="[Link]" type="video/webm" />
<source src="[Link]" type="video/ogg" />
Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>

Les navigateurs ne pouvant pas lire le MP4/H.264 ni la version WebM nativement (comme
Firefox 3.6 par exemple) prendront la version au format Ogg Theora. Cela vous oblige
néanmoins à encoder le fichier avec différents codecs.

Les propriétés autoplay, controls, loop, preload et src sont les mêmes que celles utilisées
pour la balise audio, il faut ajouter l'attribut Poster = "[Link]" : une image à afficher
par défaut dans l'espace réservé par la vidéo, avant que la lecture de celle-ci ne soit lancée.

14
15