Cours de HTML Partie 1

Le Langage HTML
Le Langage HTML
ENSET RABAT LP-STE HTML 2013/2014 Page 1 / 27

Le Langage HTML
SOMMAIRE
1. Introduction
2. Rappels et définitions
3. Structure d'une page HTML
4. Les principales balises

4.1 La mise en page
4.2 Les styles
4.3 Les environnements
5. Listes d'éléments
5.1 Les listes numérotée
5.2 Liste non numérotées
5.3 les listes de définitions
6. Liens internes et externes

6.1 Liens externe
6.2 Liens local
6.3 Les ancres
7. Inclusion d'images
8. Les tableaux
9. Exemple Complet
10. Construction d’une image MAP
11. Les Frames
12. Les Formulaires
Annexe A : Créer votre site Internet

Annexe B : Liste des principales balises Html

Le Langage HTML
1. Introduction
Dans un document papier, il est courant de mélanger du texte, des images ou des
graphismes. Si le document est destiné à un support multimédia, il pourra également
contenir des animations, du son et des liens hypertextes.
Le codage des documents disponibles sur le Web est essentiellement basé sur le langage
HTML : HeperText Markup Language. Ce langage permet de représenter une page
structurée, contenant des images et des liens hypertextes.
Un lien hypertexte est un éléments du document (partie de texte ou image) qui
permet d’accéder simplement à un autre document, soit présent sur la même machine
que le document d’origine, soit sur une machine distante. Ce document peut-être une
autre page HTML, un programme, du son, de l’animation …
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 (Netscape, Internet Explorer, …). On a pas la
maîtrise totale de notre document, puisque on ne peut pas savoir exactement ce que le
browser du lecteur de notre page Web affichera sur l’écran de son ordinateur.
Pour transiter le plus rapidement possible sur les lignes téléphoniques, on a adopté un
format de texte très compact mais aussi peu sophistiqué. Ce format ASCII est sur 7 bits
uniquement, pour coder les caractères ‘ é ’ ‘ è ’ ‘ à ’ ‘ â ’ … on doit passer par des codes
particuliers.
Le point positif c’est que Html est un langage universel qui s’adopte à toutes les plates-
formes que ce soit Windows, Macintoch, Unix, …
2. Rappels et définitions
Avant d'aborder le langage HTML, rappelons quelques définitions et concepts liés
aux serveurs web.
Il existe, sur Internet (et maintenant en Intranet1), 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. Il existe principalement deux grands
navigateurs, à savoir Netscape, disponible sur un très grand nombre de plates-formes
(Windows, UNIX, Mac) et Internet Explorer, fourni par Microsoft pour ses systèmes
d'exploitation.
Un document, proposé par un serveur web, est toujours désigné par une "adresse" appelée
URL pour Universal Resource Locator. Une URL a la structure suivante :
protocole://adresse_machine[/répertoire/sous-
rep/.../nom_document] 2
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.

Le Langage HTML
1
c'est un réseau local propre à un organisme qui utilise les techniques de l'Internet.
2
Les crochets indiquent une zone optionnelle. Il ne faut jamais les indiquer dans une URL.
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 .html3. Notez que si aucun document n'est
spécifié, c'est une page par défaut, dite HomePage ou Page d'accueil qui est envoyée au
navigateur.
Voici un exemple d'URL
(fictive):
http://www.apple.com/index/download/drivers/list.html
Si vous demandez à votre navigateur Web d’afficher la page correspondante à cette

adresse :
1. Votre navigateur essaye de contacter, via l’Internet, l’ordinateur nommé :
www.apple.com
2. Sur www.apple.com un logiciel veille, c’est un serveur Web. Dès qu’il
repère la demande de votre navigateur, il envoi une confirmation qui précise
qu’il est bien vivant et qu’il est prêt à traiter une demande.
3. Votre navigateur envoie une demande pour le fichier
/index/download/drivers/list.html
4. Le serveur Web envoie le fichier demandé à votre navigateur.
5. Une fois ce fichier reçu, votre navigateur utilise le programme HTML du fichier
list.html pour construire le document.
6. Le navigateur Web affiche le résultat sur votre écran.
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.
Maintenant que nous avons fait ces quelques rappels, il est temps de définir ce
qu'est le langage HTML.
HTML signifie HyperText Markup Language. Comme son nom l'indique, c'est un langage
qui permet de définir l'habillage d'un document, c'est à dire la façon dont il doit s'afficher
à l'écran d'un navigateur.
Cette notion d'habillage est importante : elle signifie qu'une page écrite en HTML
comportera du texte, bien-sûr, mais aussi des codes ou balises permettant de modifier
l'affichage de ce texte, à savoir sa forme, sa taille, sa couleur. Le HTML permet
également d'inclure des images, du son ou des animations dans une page web.
Le HTML est très simple. Ce n'est pas un langage de programmation dans le sens où il
n'existe pas de variables, boucles, expressions conditionnelles. En fait, c'est plus un

Le Langage HTML
ensemble de codes comme on le conçoit en informatique4.
Il faut également signaler qu'un document HTML n'est autre qu'un fichier texte (i.e.
ASCII) auquel on a ajouté des balises HTML. Il est en effet parfaitement possible de
créer une page HTML avec un simple éditeur de texte comme Bloc-note ou Microsoft
Word sous Windows,
3
Parfois, on rencontre des pages avec l'extension .shtml (ce sont des pages dynamiques, Cf. dernier
chapitre).
4
Langage C, Pascal, etc.
à condition de sauver le fichier ainsi créé au format texte, avec une extension .html (ou
.htm pour les versions de Windows antérieures à Windows 95).
Dans les lignes qui suivent, nous n'allons présenter que certaines commandes du
langage HTML, dans sa version 3, dernière en date à avoir été "officialisée". En
pratique, les navigateurs récents exploitent déjà les fonctionnalités des versions 4.01
du langage. Historique du langage HTML :
HTML, versions expérimentales 1989
HTML 2.0
(1994)
HTML +
HTML avec
extensions
propriétaires
HTML 4.0 1997
HTML 5 (2007)
-à
3. Structure d'une page HTML
Nous avons vu dans le chapitre précédent qu'une page HTML était en fait un fichier
texte, enrichi d'un certain nombre de codes ou commandes, appelées balises.
Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères
" <" et ">". Exemple : <BALISE>.
Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même
nom,

Le Langage HTML
mais précédé du caractère "/". Exemple : </BALISE>. La commande spécifiée
s'applique donc uniquement au texte situé entre le couple de balises ainsi formé.
Exemple:
<HTML>
...
</HTML>
Notons que :
• une balise peut indifféremment être indiquée en minuscules ou en majuscules,
• le formatage "manuel" du document (espaces, sauts de lignes,...) est toujours ignoré.
Par exemple : <HTML>...</HTML> est interprété de la même façon par le navigateur
Web que la syntaxe sur plusieurs lignes indiquée ci-dessus.
Nous venons de découvrir, sans le savoir, un des éléments de la structure d'une page HTML
:
toute page doit en effet débuter par la balise <HTML> et se finir par </HTML>.
Entre ces deux balises, on définit deux zones : l'en-tête, spécifié par les commandes
<HEAD> et </HEAD>, ainsi que le corps, délimité par: <BODY> et </BODY>. Ce qui
donne, comme structure de base :
<HTML>
<HEAD> L’entête sert à donner des informations qui n’apparaîtrons pas

sur le document. Dans l'en-tête, on met le titre du document qui sera
affiché
... en haut de la fenêtre du navigateur. Ce titre est indiqué entre les
balises
<TITLE> et </TITLE>. On met aussi le nom de l’auteur ou bien
des
</HEAD> des mots clefs décrivant la page pour les navigateurs (<META>).
<BODY> Dans le corps, on met en fait tout le document à afficher

... (Textes, Images, Sons, etc.)
</BODY>
</HTML>
En résumé, la structure générale d'une page HTML est la suivante.
<HTML>
<HEAD>
<META name=”Author” content=”ENSET” >
<META name=”Date” content=”2003-10-07T09:37:23+00:00”>
<META name=”keywords” lang=”fr”content=”vacances, Maroc, Al Houceima” >
<META name=”keywords” lang=”an”content=”vacation, Morroco, Al Houceima” >

Le Langage HTML
<TITLE> Mes vacances à Al Houceima </TITLE>

</HEAD>
<BODY>
Al Houceima est une très belle ville située sur la côte
Méditerranée … Elle est située sur les montagnes du Rif ...
…
</BODY>
</HTML>
Notez que l'indentation facilite la lecture du code mais n'est pas reproduite par le
browser. Lorsqu’un navigateur lira cette page, il connaîtra son auteur et la date de
création. Il pourra les communiquer à la demande de son utilisateur.
De même lorsqu’un moteur de recherche voudra cataloguer cette pages, il saura
immédiatement que les mots clefs, fixé par l’auteur lui même, sont selon les langues
utilisées : vacances, vacation, Maroc, Al Houceima, Morroco.
Les champs META sont loin d’être standards et, donc, sont tout à faits optionnels, mais
cela permet souvent aux navigateurs de disposer de plus d’informations et aux
moteurs de recherche de mieux cibler votre page.
Le HTML 3 ajoute des possibilités à certaines commandes, et en apporte des nouvelles.

Par exemple, il est possible d'ajouter des options à la balise <BODY> afin de spécifier
la couleur des caractères, des liens, voire même une image de fond. On peut donc
réécrire la balise
<BODY> comme suit :
<BODY TEXT= "#000000" BGCOLOR="#00FF00"
LINK=#0000EE VLINK="#551A8B ALINK="#FF0000">
• L’attribut TEXT= "#000000" : le texte courant sera affiché en noir, de code RGB
(0,
0, 0),
• L’attribut BGCOLOR="#00FF00" : le fond de la page est vert de code RGB (0,
255,
0), (en hexadécimal "00" représente l’intensité du rouge, "FF" représente
l’intensité du vert, "00" représente l’intensité du bleu),
• L’attribut LINK=#0000EE : les liens hypertexte non encore visités seront
affichés en bleu assez vif de code RGB (0, 0, 238), (en hexadécimal 0, 0, EE),
• L’attribut VLINK="#551A8B : les liens hypertextes déjà visités seront
affichés en bleu-gris foncé de code RGB (85, 26, 139), (en hexadécimal 55,
1A, 8B),
• L’attribut ALINK="#FF0000" : les liens hypertextes actifs, c’est à dire en
cours de chargement, seront affichés en rouge vif, de code RGB (255, 0, 0), (en
hexadécimal FF, 0, 0).

Le Langage HTML
Voici les codes de quelques couleurs basiques :
Couleurs Colors Code en GRB

blanc white #FFFFFF
noir black #000000
bleu blue #0000FF
rouge red #FF0000
vert green #00FF00
jaune yellow #FFFF000
violet purple #8000FF
gris clair silver #C0C0C0
marron maroon #800000
aqua #00FFFF
gray #808080
Bleu ciel cyan
Lien internet pour les codes couleurs : http://www.toutes-les-couleurs.com/code-couleur-html.php
4. Comment utiliser les marqueurs ?

Les marqueurs peuvent être uniques par exemple <br> qui signifie un retour à la ligne
ou par paire pour agir sur le texte qu'ils encadrent (le marqueur de fin est alors précédé
d'un /) :
<marqueur> Votre texte formaté </marqueur>
par exemple le marqueur <b> qui met un texte en gras:
<b> Ce texte est en gras </b>

Remarques importantes :
• Les marqueurs ne sont pas sensibles à la casse, c'est-à-dire qu'on peut les
écrire indifféremment en minuscules ou en majuscules
• Beaucoup de marqueurs acceptent des attributs. Ce sont eux qui vous

donneront les effets que vous souhaitez. La syntaxe est la suivante :
<marquer attribut1=argument1 attribut2=argument2 …>
• On ferme le marqueur sans ses attributs, exemple : </body>
• Les attributs sont souvent facultatifs. Certains, comme NAME sont très
conseillés voire obligatoires !
• Il est possible de superposer des effets : gras et italique. Dans ce cas,

respectez la règle : le premier ouvert est le dernier fermé.
Exemple d’emboîtement : <b><i> Emboîtement
</i></b>
• Plusieurs caractères blancs sont remplacés par un seul caractère blanc.
• Les retours chariot ne sont pas prises en compte il faut les expliciter par la balise :
<p> : changement de paragraphe.

Le Langage HTML
<br> :changement de ligne.
• Quelle que soit la partie HTML considérée, il vous est possible de commenter
votre code HTML. Tout texte inclut entre  sera considéré comme
étant un commentaire, et ne sera donc pas affiché dans le document. Un
commentaire peut servir pour laisser une indication sur votre code HTML.

• Les normes HTML demandent de respecter le codage des caractères ASCII 7 bits,
c'est-à-dire que les caractères accentués ne sont pas autorisés. Pour coder un
caractère accentué, on entre une combinaison précédée du caractère & et terminée
par un point- virgule (;). Exemple : pour afficher le caractère ‘à ‘ on utilise la
séquence à. Pour afficher le mot ‘Noël’ on écrit ‘ Noël ‘.
4. Les principales balises

On va s’intéresser au contenu d’un document.
4.1 Style des caractères

Les marqueurs de style modifient la typographie du texte. Ils peuvent être imbriqués
dans d'autres marqueurs de style de la même façon qu'on le ferait avec un traitement de
texte. Noter que chacun des browsers à sa façon si bien que certains ne font pas la
différence entre ces styles).
Voici une liste de marqueurs de style reconnus par la plupart des browsers :
Style Syntaxe Effet

<b>Gras</b> Gras
Gras <strong>Gras</strong> Gras
Italique <i>Italique</i> Italique
Souligné <u>Souligné</u> Souligné
<b><i>Gras et Gras et
Combiné Italique</i></b> Italique
Exposant Base<sup>Expo</sup> Expo
Base
Indice Base<sub>Ind</sub> BaseInd
Petit <small>Petit</small> Petit
Grand <big>Grand</big> Grand
Clignotant <blink>Clignotant</blink> Clignotant
<s>Barré</s> Barré
Barré
<strike>Barré</strike> Barré
Machine <tt>Machine</tt> Machine
Code <code>Code</code> code
Citation <cite>Citation</cite> Citation
Adresse <address>Adresse</address> Adresse
Variable <var>Variable</var> Variable

Le Langage HTML
4.2 La mise en page
La mise en page regroupe tout ce qui sert à formater le document. A savoir les sauts à la
ligne, les paragraphes, etc.
• <BR> : Cette balise ponctuelle (on a pas besoin de la fermer) sert à forcer le saut
à la ligne (BReak).
• <P> : Cette balise sert à notifier un début de paragraphe (Paragraph). On
peut y préciser le paramètre align=left|center|right|justify qui permet,
respectivement, de positionner le paragraphe aligné à gauche, centré, aligné à
droite ou justifié.
• <Hn>...</Hn> n = 1 … 6 : Ces balises servent à changer la taille de la police
de caractères (dans l'ordre décroissant de taille), afin de mettre en valeur des
titres, sous- titres etc.
• <HR> : Cette balise ponctuelle permet d’afficher une ligne de séparation (Horizon
Rule). On peut fixer les paramètres :
o align = left|center|right Permet d’aligner la ligne de
séparation à gauche, au centre ou à droite.
o noshade : Est un paramètre booléen qui enlève l’ombrage de la barre
s’il est présent.
o size : Ajuste la taille de la ligne de séparation. On peut avoir deux
unités de mesure. L’une absolue, en pixel, il suffit de ne mettre qu’un
chiffre (size="49"). L’autre relative à la largeur de la fenêtre du
navigateur qui visualise la page, en pourcentage (size="50%").
o width : Ajuste la hauteur de la ligne de séparation. On peut aussi

utiliser des pixels ou des pourcentages.
• Pour aligner du texte, on utilise l’attribut ALIGN ou le tag <CENTER>. Il existe
une balise permettant d’aligner différents éléments. C’est le tag :
o <DIV align=left> … </DIV>
o <DIV align=center> … </DIV>
o <DIV align=right> … </DIV>
• é, è et &agrave ; sont des caractères spéciaux utilisés
pour représenter respectivement le é, le è et le à.
• <FONT SIZE= ?>…</FONT> : Pour changer la taille des caractères (Font size).
• <FONT COLOR="******">…</FONT> : Pour changer couleur des caractères
(Font color).
•  | Nom | Prenom | Note / 20 |
<br> -------------------------------------
<PRE> | Atta | Mohamed | 14 |
----------------------------------------------------- | Bayed | Fatiha | 17 |
| Nom | Prenom | Note / 20 | | Karoum | Ali | 09 |
----------------------------------------------------- | ... | ... | ... |
| Atta | Mohamed | 14 | -------------------------------------
| Bayed | Fatiha | 17 |
| Karoum | Ali | 09 |
| … | …. | … |
-----------------------------------------------------
</PRE> </BODY></HTML>

Le Langage HTML
5. Listes d'éléments
Le langage HTML permet de définir trois styles de listes : les listes numérotées ( OL,
Ordered List), les listes non numérotées (UL, Unordered List) et les listes de
définitions ( DL, Definition List).
Le tableau suivant présente des attributs spécifiques aux listes :
Attribut Valeur Effet Visuel

compact resserre l'interligne
plain supprime les puces
seqnum définit le premier numéro
start définit le premier numéro
repart du numéro où il s'était
continue
arrêté à la liste précédente
numérotation chiffrée (par défaut)
1
numérotation en capitales
A
type (pour numérotation en bas de casse
a
les listes numérotation en chiffres romains
I
ordonnées) (I, II, III, IV ...)
numérotation en chiffres romains en
i
bas de casse
type (pour
circle puce circulaire
les listes
square puce carrée
non
disc puce en disque (par défaut)
ordonnées)
5.1 Les listes numérotées

Une liste numérotée est délimitée par les balises <OL> et </OL> entre lesquelles
chaque élément de la liste est précédé de la balise <LI>.
Les paramètres sont :
• type=1|a|A|i|I : Qui permet de fixer le symbole qui apparaît devant les
items. 1 pour une numérotation classique (1, 2, 3, …), a ou A pour une
numérotation alphabétique (a, b, …), i ou I pour une numérotation latine (i, ii, iii,
…). Par défaut c’est la numérotation classique (1, 2, 3, …).
• compact : Qui permet de tasser un peu la liste.
• Start = valeur : on commence la liste à partir de cette valeur.

Le Langage HTML
Exemple 5.1 :
Texte HTML Page Web
<HTML>
1. élément 1,
<HEAD></HEAD>
<BODY>
<OL>
2. élément 2,
<LI>élément 1,
<LI>élément 2,
3. élément 3.
<LI>élément 3. avec l'attribut start on a :
</OL>
avec l’attribut start on a : 4. élément 1,
<OL start=4>
<li> élément 1, 5. élément 2,
<li> élément 2,
<li value=1> élément 3. 1. élément 3.
</OL>
</BODY></HTML>
5.2 Liste non numérotées

Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les
balises
<UL> et </UL>.
Les paramètres sont :
• type=disc|circle|square : Qui permet de fixer le symbole qui
apparaît devant les items,
• compact : Qui permet de tasser un peu la liste.
Exemple 5.2 :
Texte HTML Page Web
<HTML>
<HEAD></HEAD> • élément 1,
<BODY>
<UL> • élément 2,
<LI>élément 1,
<LI>élément 2, • élément 3.
<LI>élément 3. avec des valeurs différentes on a :
</UL>
avec des valeurs différentes on a : o circle,
<UL>
<LI type=circle><b>circle</b>,
o disque,
<LI><b>disque</b>, square.
<LI type=square><b>square</b>.
</UL>
</BODY></HTML>

Le Langage HTML
Notez qu'il est tout à fait possible d'imbriquer des listes du même type ou de types
différents.
Exemple 5.3 :
Texte HTML Page Web

<HTML> • élément 1 :
<HEAD></HEAD>
<BODY> 1. sous-élément A,
<UL type=disc compact>
2. sous-élément B.
<LI>élément 1 : • élément 2,
<OL>
<LI>sous-élément A, • élément 3.
<LI>sous-élément B.
</OL>
<LI>élément 2,
<LI>élément 3.
</UL>
</BODY></HTML>
5.3 les listes de définitions

Enfin, il est possible de définir des listes spéciales, permettant de faire des glossaires, en
utilisant les balises suivantes : <DL> et </DL> pour encadrer la liste, <DT> pour
spécifier un élément et <DD> pour indiquer sa définition.
Exemple 5.4 :
Texte HTML Page Web
<HTML><HEAD></HEAD> HTML
<BODY> HyperText Markup Language
<DL> XML
<DT>HTML eXtensible Markup Language
<DD>HyperText Markup Language HTTP
<DT>XML HyperText Transfert Protocol
<DD>eXtensible Markup Language WWW
<DT>HTTP Word Wide Web
<DD>HyperText Transfert Protocol
<DT>WWW
<DD>Word Wide Web
</DL>
</BODY></HTML>

Le Langage HTML
Remarque :
Il n'est pas nécessaire de baliser la fin des conteneurs <li>, <dt> et <dd>.Par contre
les conteneurs <ol>, <ul> et <dl> doivent être marqués par </ol>, </ul> et
</dl> (pour sauter une ligne).
5.4 Listes emboîtées

Les listes peuvent être imbriquées l’une dans l’autre pour constituer des sous-listes.
Exemple 5.5 :
Texte HTML Page Web

<HTML> I. Langage de programmation
<HEAD>
</HEAD> a. C++
<BODY>
<ol type="I"> b. Java
<li>Langage de programmation
<ol type="a"> II. Méthodes d’analyse
<li> C++ a. Merise
<li> Java Introduction
</ol>
<li>Méthodes d'analyse Modèles
<ol type="a"> b. UML.
<li> Merise III. Traitement de texte
<ul>
<li> Introduction
<li> Modèles
</ul>
<li> UML.
</ol>
<li>Traitement de texte
</ol>
</BODY>
</HTML>
6. Liens internes et externes

Html (Heper Text Markup Language) est un langage hypertexte (et hypergraphique) qui
vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous
transporter ;
• Vers un autre endroit du document.
• Vers un autre fichier Html situé sur votre ordinateur.
• Vers un autre ordinateur situé sur le Web.
Ce système d’hypertexte est également utilisé par les fichiers d’aide de Windows. Ce
sont ces liens qui vous permettent de surfer de page en page.

Le Langage HTML
La syntaxe de ces liens entre plusieurs pages est simple :
<A HREF= "URL ou adresse "> … </A>
6.1 Liens externe
Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL (Universal Ressource
Locator). Html permet d’accéder à toutes les machines et toutes les ressources du Net. Ce sont les
adresses de type :
http://serveur/chemin…/fichier
ftp://serveur/chemin…/fichier
mailto:utilisateur@hote
Exemple 6.1 : <A HREF="mailto : ENSET@gmail.com"> ENSET RABAT </A>
Donne : ENSET RABAT
6.2 Liens local
L’organisation classique, et conseillé, d’un site Web consiste à regrouper l’ensemble des éléments
de celui-ci (fichiers html, images, …) dans un même répertoire. Vous pourrez ainsi "transporter"
aisément votre site pour le présenter sur un autre ordinateur et le charger sur un serveur. L’adresse
du lien sera alors tout simplement : Fichier.html
Exemple 6.2 :
Dans l’éditeur de texte, nous allons créer deux fichiers Html.
• Le fichier fichier1.html dans lequel on va écrire :
<A HREF="fichier2.html"> Aller vers le document 2 </A>
• Le fichier fichier2.html dans lequel on va écrire :
<A HREF="fichier1.html"> Aller vers le document 1 </A>
Ensuite on sauve ces deux fichiers dans le même répertoire. Le browser affichera :
fichier1.html fichier2.html
Aller au document 2 Aller au document 1
6.3 Les ancres
Des liens peuvent aussi pointer vers un endroit précis du même document ou d’un autre fichier.
C’est ce qu’on appelle les ancres, ancrages ou pointeur.
Point d’ancrage <A NAME="***"> …</A> Ceci est une cible
Lien vers une ancre dans la même page <A NAME="#***">…</A> Lien vers la cible ***
dans la même page
Lien vers une ancre dans une autre page <A NAME="URL#***">…</A> Lien vers la cible ***
dans une autre page
Plusieurs liens à l’intérieur d’un même document supposent que le document est assez long (et
donc un temps de chargement assez long). Ainsi, on préférera généralement à cette technique le
découpage d’une longue page en un ensemble de plusieurs pages de dimension plus réduite.

Le Langage HTML
Exemple 6.3 :
<HTML>
<HEAD></HEAD>
<BODY>
<A name="Début"></A>
<H1 align=center> Cours d'HTML</H1>
<H4 align=center> Par license fue ste enset RABAT </H4>
<P>
<A href="#chapitre1">Chapitre 1 : Introduction</A><BR>
<A href="#chapitre2">Chapitre 2 : Rappels et définitions
</A><BR>
<A href="#chapitre3">Chapitre 3 : Structure d'une page HTML
</A><BR>
<A href="#chapitre4">Chapitre 4 : Les principales balises
</A><BR>
<A href="#chapitre5">Chapitre 5 : Listes d'éléments</A><BR>
<A href="#chapitre6">Chapitre 6 : Liens internes et externes
</A><BR>
<A href="#chapitre7">Chapitre 7 : Inclusion d'images</A><BR>
<A href="#chapitre8">Chapitre 8 : Les tableaux</A><BR>
...
<H2><A name="chapitre1">Chapitre 1 : Introduction</A></H2>
Dans un document papier, il est courant de mélanger du
texte, des images ou des graphismes<br>
...
<H2><A name="chapitre2">Chapitre 2 : Rappels et
définitions</A></H2>
Avant d'aborder le langage HTML, rappelons quelques
définitions et concepts liés aux serveurs Web<br>
...
<H2><A name="chapitre3">Chapitre 3 : Structure d'une page
HTML </A></H2>
Nous avons vu dans le chapitre précédent qu'une page HTML
était en fait un fichier texte, enrichi d'un certain nombre
de codes ou commandes, appelées balises<br>
...
<H2><A name="chapitre4">Chapitre 4 : Les principales
balises</A></H2>
<H3>4.1 La mise en page</A></H3>
<H3>4.2 Les styles</A></H3>.
<H3>4.3 Les environnements</A></H3>.
<H2><A name="chapitre5">Chapitre 5 : Listes d'éléments
</A></H2>
Le langage HTML permet de définir trois styles de listes :
<H3>5.1 Les listes numérotées</A></H3>
Une liste numérotée est délimitée par les balises ...<br>
...
<H3>5.2 Les listes non numérotées</A></H3>
Une liste non numérotée est définie de la même façon, sauf

Le Langage HTML
qu'elle est encadrée par les balises ...<br>
...
<H3>5.3 Les listes de définitions</A></H3>
Enfin, il est possible de définir des listes spéciales,
permettant de faire <BR>
des glossaires, en utilisant les balises suivantes : <br>
...
<H2><A name="chapitre6">Chapitre 6 : Liens internes et
externes</A></H2>
Html (Heper Text Markup Language) est un langage hypertexte
(et hypergraphique) qui vous permet <br>
en cliquant sur un mot, généralement souligné (ou une image)
de vous transporter ; ...<br>
...
<UL>
<li>Vers un autre endroit du document.
<li>Vers un autre fichier Html situé sur votre ordinateur.
<li>Vers un autre ordinateur situé sur le Web.
</ul>
...
<H2><A name="chapitre7">Chapitre 7 : Inclusion
d'images</A></H2>
Dans le chapitre précédent, nous avons décrit comment
définir un lien vers une page HTML ou une image.
Dans ce dernier cas, l'image ainsi désignée s'affiche seule
à l'écran du navigateur,
sans qu'il ne soit possible d'y associer du texte, dans la
même page.
Nous allons donc voir comment insérer une image dans une
page HTML.<br>
...
<H2><A name="chapitre8">Chapitre 8 : Les tableaux</A></H2>
Les tableaux sont des structures importantes en HTML. Elles
servent non seulement à faire
des tableaux comme on a l'habitude d'en voir, mais aussi à
gérer la mise des documents.
Les différentes balises qui permettent de construire un
tableau sont : <br>
... <br>
<br>
<A href="#Début">Retour</A> au début de la page<BR>
</BODY>
</HTML>

Le Langage HTML
On obtient la page Web suivante :
Cours d'HTML
Chapitre 1 : Introduction
Chapitre 2 : Rappels et définitions
Chapitre 3 : Structure d'une page
HTML Chapitre 4 : Les principales
balises Chapitre 5 : Listes
d'éléments
Chapitre 6 : Liens internes et
externes Chapitre 7 : Inclusion
d'images Chapitre 8 : Les
tableaux
... ...
Chapitre 1 : Introduction
Dans un document papier, il est courant de mélanger du texte, des images ou des graphismes
...
Chapitre 2 : Rappels et définitions

Avant d'aborder le langage HTML, rappelons quelques définitions et concepts liés aux serveurs web
...
Chapitre 3 : Structure d'une page HTML

Nous avons vu dans le chapitre précédent qu'une page HTML était en fait un fichier texte, enrichi
d'un certain nombre de codes ou commandes, appelées balises
...
Chapitre 4 : Les principales balises

4.1 La mise en page
...
4.2 Les styles

...

...
Chapitre 5 : Listes d'éléments

Le langage HTML permet de définir trois styles de listes :
5.1 Les listes numérotées

Une liste numérotée est délimitée par les balises ...
...
5.2 Les listes non numérotées

Une liste non numérotée est définie de la même façon, sauf qu'elle est encadrée par les balises ...
...
5.3 Les listes de définitions

Enfin, il est possible de définir des listes spéciales, permettant de
faire des glossaires, en utilisant les balises suivantes :
...

Le Langage HTML
Chapitre 6 : Liens internes et externes

Html (Heper Text Markup Language) est un langage hypertexte (et hypergraphique) qui vous
permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter ; ...
...
• Vers un autre endroit du document.
• Vers un autre fichier Html situé sur votre ordinateur.
• Vers un autre ordinateur situé sur le Web.
Chapitre 7 : Inclusion d'images

Dans le chapitre précédent, nous avons décrit comment définir un lien vers une page HTML ou une
image. Dans ce dernier cas, l'image ainsi désignée s'affiche seule à l'écran du navigateur, sans qu'il ne
soit possible d'y associer du texte, dans la même page. Nous allons donc voir comment insérer une
image dans une page HTML.
...
Chapitre 8 : Les tableaux

Les tableaux sont des structures importantes en HTML. Elles servent non seulement à faire des
tableaux comme on a l'habitude d'en voir, mais aussi à gérer la mise des documents. Les différentes
balises qui permettent de construire un tableau sont :
...
Retour au début de la page
Nous verrons dans le chapitre suivant comment définir un lien accessible en cliquant sur
une image.
7. Inclusion d'images
Dans le chapitre précédent, nous avons décrit comment définir un lien vers une page
HTML ou une image. Dans ce dernier cas, l'image ainsi désignée s'affiche seule à
l'écran du navigateur, sans qu'il ne soit possible d'y associer du texte, dans la même
page. Nous allons donc voir comment insérer une image dans une page HTML.
Pour ce faire, on utilise la balise dont la syntaxe est la suivante :
<IMG SRC=/rep/sous-rep/.../image.gif>.
On peut également faire référence à une image se trouvant sur un autre serveur en
indiquant son URL.
Exemple 7.1 :
<IMG SRC="http://www.microsoft.com/images/logo.jpg">
Mais attention, ici il ne s'agit pas d'un lien mais toujours d'une inclusion. La seule
différence par rapport à la syntaxe précédente est que dans le dernier cas, l'image ne se
trouve pas sur le même serveur que la page qui y fait appel : le navigateur doit donc aller
chercher cette image avant de pouvoir l'afficher.
La balise <IMG SRC...> possède une option permettant de spécifier une contrainte
d'alignement par rapport au texte de la ligne où l'on désire insérer l'image. Cet
argument estdéfini par le mot clé ALIGN=mode, où mode correspond à TOP

Le Langage HTML
(alignement sur le haut de l'image), MIDDLE (sur le milieu) et BOTTOM (bas).
Exemple 7.2 :
Texte HTML Page Web

<HTML>
<HEAD></HEAD>
<BODY>
Voici un avion Mirage
<img src="Mirage2.jpg" align=TOP
width=20%> <BR>
Voici un avion F161
<img src="F161.jpg" align=Middle
width=20%>
<BR>
Voici des avions Apaches
<img src="Apache2.jpg" align=BOTTOM
width=20%> <BR>
</BODY>
</HTML>
Voyons maintenant comment définir un lien auquel on accède en cliquant sur une
image plutôt que sur une portion de texte. En fait, c'est très simple : il suffit de
remplacer le texte définissant le lien par la balise d'inclusion d'une image.
Exemple 7.3 :
<A HREF="http://www.microsoft.com" ><IMG SRC=/images/logo.jpg></A>
Dans cet exemple, le fait de cliquer sur l'image affiche la Home page du serveur de
Microsoft. Notez qu'une image définissant un lien est différenciée des autres images
par le fait qu'elle est entourée d'un cadre et que le curseur de la souris change de
forme lorsqu'on le positionne sur cette image.
Les attributs :
Une info-bulle (ALT) : L’attribut alt permet de faire une info-bulle lorsque le
lecteur laisse sa souris un certain temps au dessus de l’image. Mais cet attribut
permet également d’écrire un texte à la place de l’image, lorsque celle-ci n’a pas été
chargée à cause du sur-traffic ou bien parce que le visiteur les a tout simplement
désactivées. Le moteur de recherche Lycos refuse de référencer une page dont les
images n’ont pas leur attribut alt rempli.
L’emploi est simple :
<img src="image.gif" alt="le message">

Le Langage HTML
Les dimensions (height et width) : Lorsqu’une image est trop grande pour rentrer
dans l’emplacement qui lui était alloué au départ, on peut modifier son format, soit
en l’agrandissant, soit en la réduisant, par le biais des attributs height et width.
La valeur de ces deux attributs peut être de deux types :
• En pixels : les dimensions sont représentées en pixels.
• En pourcentages : ici, l’image est redimensionnée en fonction du calcul
d’un pourcentage.
Exemple : on peut utiliser la hauteur et la largeur :

<img src="RealMadrid.gif" height=100
width=100>
ou bien le pourcentage :
<img src="RealMadrid.gif"
width=="25%">
Une bordure (Border) : On peut au choix, faire apparaître autour de l’image une
bordure autour de l’image avec l’attribut border. La valeur est exprimée en pixels :
<img src="http://www.RealMadrid.com/Photos/Zidane.gif"
border="1">
Les marges (hspace et vspace) : On peut définir les espaces verticaux et horizontaux
à laisser entre l’image et le reste du document. On utilise pour cela l’attribut hspace
pour l’espace Horizontal et l’attribut vspace pour l’espace Vertical. Là aussi, la valeur à
spécifier est en pixels.
Exemple :
Ceci est une phrase au dessus de l’image <br>
<img src="http://www.RealMadrid.com/Photos/Zidane.gif"
hspace="20" vspace="20">.
8. Les tableaux
On a souvent besoin de présenter des informations mieux structurées qu'avec des listes.
Les tableaux permettent deux choses importantes :
• L’organisation du texte avec ou sans visualisation de cadre.
• Mise en page d’un document HTML.
En effet, comme nous allons le voir, à partir de l'exemple suivant, en HTML, un

tableau est constitué de lignes. Dans chaque ligne, on peut y placer un certain nombre
de cellules. Le nombre de cellule pour chaque ligne est égale au nombre de cellule de
la ligne qui en
comporte le plus (dans l’exemple le nombre de cellules est de trois). Si pour une ligne
donnée, toutes les cellules ne sont pas définies, elles existeront mais leur contenu sera
vide (voir la troisième cellule de la troisième ligne de l’exemple. Par contre La première
cellule de la
même ligne existe, elle est crée mais son contenu est la chaîne vide).

Le Langage HTML
Exemple :
Texte HTML Page Web
Elément 1 Etat 1
<HTML><HEAD></HEAD><BODY>
Elément 2 Valeur 2 Etat 2
<TABLE BORDER=3 WIDTH="50%">
<TR> Valeur 3
<TD WIDTH="33%">Elément 1</TD> Ceci est le titre du tableau !
<TD WIDTH="33%"></TD>
<TD WIDTH="33%">Etat 1</TD>
</TR>
<TR>
<TD>Elément 2</TD>
<TD>Valeur 2</TD>
<TD>Etat 2</TD>
</TR>
<TR>
<TD></TD>
<TD>Valeur 3</TD>
</TR>
<CAPTION
Align="bottom">Ceci est le titre du
tableau !</CAPTION>
</TABLE>
</BODY>
</HTML>
Le paragraphe suivant va définir chacun des marqueurs utilisables pour la définition

d’un tableau HTML.
8.1 Les différentes balises d’un tableau HTML

8.1.1 La balise <table>..</table>
Cette balise permet d’introduire un tableau dans le document HTML. Elle possède
plusieurs attributs, dont voici la description des principaux :
Border : ce paramètre permet de définir l'épaisseur de la bordure du tableau, il est en
nombre de pixels. Par défaut c’est zéro.
Width : on utilise ce paramètre pour déterminer la largeur du tableau, soit en
nombre de pixels soit en pourcentage de la zone utilisable.
BgColor : ce paramètre permet de définir une couleur de font (par défaut) pour les
cellules du tableau. On peut aussi définir une couleur de fond sur une ligne et sur chaque
cellule. C'est la couleur définie le plus localement qui l'emporte.
CellSpacing : ce paramètre permet de déterminer le nombre de pixels qui vont
séparer les cellules du tableau. Par défaut c’est deux.
CellPadding : ce dernier sert à fixer la taille (en pixels) de la zone séparant le contenu
d'une cellule d'avec son cadre. En quelque sorte, une marge interne. Par défaut c’est un.
8.1.2 La balise <caption>..</caption>

Cette balise permet de donner un titre au tableau en cours de définition. Le marqueur
<caption> admet un paramètre Align qui peut prendre comme valeurs soit ‘top’ (par

Le Langage HTML
défaut)
soit ‘bottom’, pour que le titre apparaisse respectivement en haut ou en bas du tableau.
8.1.3 La balise <tr>..</tr>

Cette balise permet d’insérer une nouvelle ligne dans le tableau. Elle possède
différents attributs :
Align = ‘left | right | center | justify’ : ce paramètre permet de fixer l’alignement du
texte. Valign=’top | middle | bottom’ : ce paramètre permet de fixer l’alignement
vertical du texte. Bgcolor=’couleur ‘ : ce paramètre permet de choisir une couleur de
font pour les cellules.
8.1.4 La balise d’insertion d’une cellule

L’insertion d’une cellule d’entête (Table Header) se fait avec la balise <th>..</th>.
Pour définir une cellule (de donnée : Table Data) de la ligne en cours, on utilise la
balise
<td>..</td>.
Ces deux balises possèdent les mêmes attributs :
Align = ‘left | right | center | justify’ : ce paramètre permet de fixer l’alignement du texte
dans la cellule.
Valign=’top | middle | bottom’ : ce paramètre permet de fixer l’alignement vertical du
texte dans la cellule.
ColSpan=’nombre’ : permet d'étendre la cellule en cours sur les cellules voisines de
droite. Ce paramètre détermine le nombre de cellules occupées (y compris celle
concernée).
ROWSPAN=nombre
L'attribut ROWSPAN permet de définir le nombre de lignes de tableau que devra
occuper la cellule
Width=’nombre’ : de même que pour le marqueur <TABLE>, ce paramètre fixe la
largeur de la cellule (si on utilise les pourcentages, ils s'expriment en rapport à la largeur
de la table). BgColor=’couleur’ : spécifie la couleur de fond de la cellule.
Background : permet de définir un motif de fond pour la cellule (attention uniquement
pour les nouveaux navigateurs ; faire les tests qui s'imposent).
Remarques :
Une cellule d'en-tête a, par défaut, son texte centré et mit en gras.
Toutes les balises qu’on vient de définir se situées à l’intérieur du couple
<table>..</table>. Il est possible d’imbriquer des tableaux.

Le Langage HTML
Exemple 8.1 :
Texte HTML Page Web
<HTML> Ceci est un exemple

<HEAD></HEAD><BODY> Première case Deuxième case
<TABLE width="50%" border=”1”>
<CAPTION> Ceci est un exemple </CAPTION>
Troisième case Quatrième case
<TR>
<TD align=center>Première case</TD>
<TD align=center>Deuxième case</TD>
</TR>
<TR>
<TD align=center>Troisième case</TD>
<TD align=center>Quatrième case</TD>
</TR></TABLE></BODY></HTML>
Exemple 8.2 :
Il est aussi possible de changer la couleur de la cellule. Couleur de la
cellule <TD BGCOLOR="#$$$$$$"> :
Texte HTML Page Web
<HTML><HEAD></HEAD><BODY>
<CENTER><TABLE width=60% border=1>
<TR> Tarif au 31/12/02
<TD colspan=3 align=center bgcolor="#FFFF00">
Tarif au 31/12/02 </TD> Article 1 Ref 002 300DH
</TR>
<TR>
<TD width=33% >Article 1</TD><TD width=33%>
Ref 002 </TD>
<TD width=34% align=right>300DH</TD>
</TR></TABLE></CENTER></BODY></HTML>

Le Langage HTML
Exemple 8.3 :
Un exemple plus compliqué :
Texte HTML Page Web
<HTML><HEAD></HEAD><BODY> Partiel Janvier 2003

<TABLE width="100%" border="1">
<CAPTION><B> Partiel Janvier 2003 </B> Matières Classement
Nom
</CAPTION> Mathématiques Informatique sur 25
<TR><TH rowspan="2">Nom<TH colspan="2">
El Fath
Matières <TH rowspan="2">Classement<BR>sur 25 16/20 15/20 1
Mohamed
<TR><TH>Mathématiques<TH>Informatique
<TR><TH>El Fath Mohamed <TD align=center> Jelali
14/20 14/20 2
16/20<TD align=center>15/20<TD align=center> 1 Latifa
<TR><TH>Jelali Latifa <TD align=center>14/20 Bouazza
<TD align=center>14/20<TD align=center>2 13/20 14/20 3
Mourad
<TR><TH>Bouazza Mourad <TD align=center>
13/20<TD align=center>14/20<TD align=center>3 ... ... ... ...
<TR><TH> ... <TD align=center> ... <TD
align=center> ... <TD align=center> ...
</TABLE></BODY></HTML>
9. Exemple Complet
Faisons ensemble notre premier document Html
- Ouvrir l’éditeur de texte.
- Ecrire le code Html suivants :
<html>
<HEAD>
<META name=”Author” content=”ENSET” >
<META name=”Date” content=”2002-12-30T09:37:23+00:00”>
<META name=”keywords” lang=”fr”content=”vacances, Maroc, Al Houceima”>
<META name=”keywords” lang=”an”content=”vacation, Morroco, Al Houceima”>
<TITLE>La ville d’Al Houceima la perle de la méditerranée </TITLE>

</HEAD>
<BODY>
<table border=0 width=100%>
<tr>
<td colspan=2 align=CENTER bgcolor=0055ff><font size=8
color=red> Mes vacances à Al Hoceima </font> </td>
</tr>
<tr>
<td rowspan=2 width=30% bgcolor=00FFFF>
<UL><LI> Le <a href=plan.html>plan </a> de la ville Al Houceima
<LI> <a href=histoire.html> L'histoire </a> de la ville Al Hoceima
<LI> <a href=emplacement.html>Emplacement</a> géographique
d’AlHouceima

Le Langage HTML
<LI> Quelques <a href=photos.html>photos </a> d’Al Houceima
<LI> Les endroits à ne pas rater à Al Houceima
<LI> Quelques chansons folkloriques d’Al Houceima
<LI> Des liens sur d’autres villes touristiques au Maroc
</UL>
<td bgcolor=eeeeee background=image.gif> </td>
</tr>
</table>
<BODY></HTML>
- Enregistrer le document avec l’extension .html.

- Ouvrir le navigateur.
- Afficher le document via le menu File/Open file …
- Admirer votre premier document Html.

Langue

Cours de HTML Partie 1

Transféré par

Informations du document

Titre original

Copyright

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Cours de HTML Partie 1

Titre original :

Transféré par

Droits d'auteur :

Le Langage HTML

ENSET RABAT LP-STE HTML 2013/2014 Page 1 / 27

3. Structure d'une page HTML

4. Les principales balises

6. Liens internes et externes

10. Construction d’une image MAP

11. Les Frames

12. Les Formulaires

Annexe A : Créer votre site Internet

ENSET RABAT LP-STE HTML 2013/2014 Page 2 / 27

Il existe, sur Internet (et maintenant en Intranet1), un nombre important de serveurs

ENSET RABAT LP-STE HTML 2013/2014 Page 3 / 27

Si vous demandez à votre navigateur Web d’afficher la page correspondante à cette

Précisons que les pages HTML utilisent la technique de l'hypertexte, permettant

ENSET RABAT LP-STE HTML 2013/2014 Page 4 / 27

HTML 4.0 1997

ENSET RABAT LP-STE HTML 2013/2014 Page 5 / 27

<HEAD> L’entête sert à donner des informations qui n’apparaîtrons pas

<BODY> Dans le corps, on met en fait tout le document à afficher

En résumé, la structure générale d'une page HTML est la suivante.

ENSET RABAT LP-STE HTML 2013/2014 Page 6 / 27

<TITLE> Mes vacances à Al Houceima </TITLE>

Le HTML 3 ajoute des possibilités à certaines commandes, et en apporte des nouvelles.

ENSET RABAT LP-STE HTML 2013/2014 Page 7 / 27

Couleurs Colors Code en GRB

Lien internet pour les codes couleurs : http://www.toutes-les-couleurs.com/code-couleur-html.php

4. Comment utiliser les marqueurs ?

par exemple le marqueur <b> qui met un texte en gras:

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

• Beaucoup de marqueurs acceptent des attributs. Ce sont eux qui vous

• On ferme le marqueur sans ses attributs, exemple : </body>

• Il est possible de superposer des effets : gras et italique. Dans ce cas,

• Plusieurs caractères blancs sont remplacés par un seul caractère blanc.

ENSET RABAT LP-STE HTML 2013/2014 Page 8 / 27

4. Les principales balises

4.1 Style des caractères

Style Syntaxe Effet

ENSET RABAT LP-STE HTML 2013/2014 Page 9 / 27

o width : Ajuste la hauteur de la ligne de séparation. On peut aussi

ENSET RABAT LP-STE HTML 2013/2014 Page 10 / 27

4.3 Les environnements

void main() { #include

ENSET RABAT LP-STE HTML 2013/2014 Page 11 / 27

Attribut Valeur Effet Visuel

5.1 Les listes numérotées

ENSET RABAT LP-STE HTML 2013/2014 Page 12 / 27

5.2 Liste non numérotées

ENSET RABAT LP-STE HTML 2013/2014 Page 13 / 27

Texte HTML Page Web

5.3 les listes de définitions

ENSET RABAT LP-STE HTML 2013/2014 Page 14 / 27

5.4 Listes emboîtées

Texte HTML Page Web

6. Liens internes et externes

ENSET RABAT LP-STE HTML 2013/2014 Page 15 / 27

6.1 Liens externe

6.2 Liens local

Aller au document 2 Aller au document 1

6.3 Les ancres

ENSET RABAT LP-STE HTML 2013/2014 Page 16 / 27

ENSET RABAT LP-STE HTML 2013/2014 Page 17 / 27

ENSET RABAT LP-STE HTML 2013/2014 Page 18 / 27

Chapitre 2 : Rappels et définitions

Chapitre 3 : Structure d'une page HTML