Vous êtes sur la page 1sur 41

Technologies Internet

Les balises HTML


introduction
Olivier Gerbé
Copyright 2008, Olivier Gerbé
Le langage HTML

 Un document HTML est défini comme un ensemble


d’éléments.
 Exemples d’éléments:
– Paragraphe, image, tableau, liste, formulaire, etc…
 Pour identifier un élément:
– on utilise une balise (Tag en anglais) qui se définit
comme un marqueur de début de l’élément et un
marqueur de fin de l’élément.
• Balise de début: <balise>
• Balise de fin : </balise>
– Note: IL N’Y A PAS D’ESPACE entre le signe < et balise
2
Les balises

 De façon générale, un élément a une balise de début et


une balise de fin.
 Il y a des exceptions:
• Ligne horizontale
• Image
• Retour à la ligne
• Meta, Link, Base, …

3
Éléments de niveau « bloc » et de « caractère »

 Élément de niveau bloc (block level element):


– Il a comme caractéristique de terminer automatiquement
le paragraphe qui précède et de faire un retour de
paragraphe.
– Exemples: tableau, formulaire liste, paragraphe
 Élément de niveau caractère:
– Il inclut le texte lui-même, les polices, le gras, l’italique, le
souligné, l’hyperlien, l’image.

4
Le caractère
« espace blanc non sécable»
 Espace blanc :
– L’espace blanc est considéré comme un séparateur de 2
mots.
– Pour ajouter un espace blanc, utiliser le code spécial
suivant: &nbsp;

– Exemple: &nbsp;&nbsp; ajoute 2 espaces blancs

– À noter le point virgule qui est obligatoire

5
Structure formelle d’un document HTML

 Tout document commence avec l’élément HTML qui


contient un élément HEAD et un élément BODY.
 L’élément HEAD contient de l’information sur le
document lui-même et spécifie les liens généraux vers
d’autres documents.
 L’élément BODY contient les éléments de texte
d’images, de liens hypertextes, de tableaux, etc…

6
Structure formelle d’un document HTML
(suite)
<html>
<head>
<title>Le titre du document</title>
…autres éléments de la section HEAD
</head>
<body>
Les éléments du BODY du document
</body>
</html>

7
Le standard HTML 4

 Pour se conformer au standard HTML 4, tout document


HTML doit contenir au début du document la déclaration
suivante:
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN">

8
L’encodage des caractères

 Il est conseiller de spécifier comment l’encodage des


caractères a été fait.
 Exemple:
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

9
Le document HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type« 
content="text/html;charset=UTF-8" />
<title>Le titre du document</title>
</head>

<body>

</body>
</html>

10
La syntaxe des attributs des balises

 Les balises peuvent avoir des attributs pour spécifier


certaines caractéristiques de présentation ou de mise en
page.
– <balise attribut="valeur">
 Une balise peut contenir plusieurs attributs:
– <balise attribut="valeur" attribut="valeur">

11
Les balises

 Balises de structure
 Balises de niveau paragraphe
 Balises d'hyperlien
 Balises de niveau texte
 Balises de liste
 Balises d'images
 Balises de tableaux

12
Balises de structure

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 transitional//EN">


<html>
<head>
<title>mon titre… </title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME= "Description" CONTENT= "consulting group, groupe de consultation">
<META NAME= "Keywords" CONTENT= "consultation, publicité, marketing">

</head>
<body>
document HTML
</body>
</html>

13
Balises de structure
(suite)
 <BODY> … </BODY>
– BGCOLOR="black" couleur du fond
– BACKGROUND="hec.gif" image de fond
– TEXT="yellow"
– LINK="blue"
– ALINK="red"
– VLINK="pink" 
 Exemple:
<body bgcolor="red"  text="white" >
 

14
Balises de titre dans le document:
H1 à H6 (Header)
<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>

<h4>Titre de niveau 4</h4>

<h5>Titre de niveau 5</h5>

<h6>Titre de niveau 6</h6>

Les balises <h1> à <h6> acceptent l'attribut align = "left" | "center" | "right" .
Exemple : <h2 align="right">Titre 2 aligné à droite.</h2>

15
Balises de niveau paragraphes

 <P> … </P>
balise de paragraphe
– ALIGN=LEFT/RIGHT/CENTER/JUSTIFY

16
Balises de niveau phrase

 EM  ADDRESS
 STRONG  INS, DEL
 DFN  BLOCKQUOTE, Q
 CODE  PRE
 SAMP  SUB, SUP
 KBD  TT
 VAR  VAR
 CITE
 ABBR
 ACRONYM

17
Les liens hypertextes

 Un des aspects les plus importants de la programmation


HTML est la capacité de faire des liens entre des
documents qui sont conservés sur un même ordinateur
ou sur tout autre ordinateur accessible via Internet.

 Pour bien utiliser le concept d’hypertexte, il faut maîtriser


le concept de fichiers/répertoires d’ordinateurs.

18
Les liens hypertextes (suite)

 L’adresse d’un fichier (page Web) sur un ordinateur relié à


l’Internet fait intervenir l’adresse internet de l’ordinateur. Cette
adresse est appelée une URL
(Uniform Resource Locator).
– Exemple: http://www.hec.ca/index.html
 À noter que les URL utilisent la convention UNIX pour indiquer le
chemin d’accès à un fichier et nommer les fichiers:
– La règle est d’utiliser la barre oblique ( / ) pour séparer les niveaux de
répertoires.
– Les espaces blancs ne sont pas acceptés dans les noms de fichiers.
– NE PAS utiliser de lettres accentuées dans les noms de fichiers ou
de répertoire
– La plupart des serveurs Web font la différence entre les lettres
minuscules et majuscules.

19
Syntaxe de balise d’hyperlien

 <A HREF= "valeur">le libellé du lien</A>


 La balise <A> … </A> est l’élément d’ancrage utilisée
pour définir un hyperlien.
 HREF est l’attribut de l’élément d’ancrage.
 valeur : détermine la destination du lien;
 le libellé du lien : les mots qui composent le lien
hypertexte visible à l’écran.
 Exemple: <a href="http://www.hec.ca" >HEC Montréal</a>

20
Les types d’hyperliens

 Il y a 2 types de lien: absolu ou relatif.

 On peut faire

– Un lien à un document sur un autre ordinateur;

– Un lien à un document sur le même ordinateur;

– Un lien à l’intérieur du même document;

21
Balises d’hyperlien (suite)

 Lien à un document sur un autre ordinateur;


– Lien absolu:

– La valeur de l’attribut href est l’adresse internet du


document;
– Exemple:
<a href="http://www.hec.ca/meublo/index.html" >Le cas Meublo</A>

22
Balises d’hyperlien (suite)

 Lien à un document sur le même ordinateur


– Lien relatif:
• Cas 1:
• le document de lien (la page Web) est dans le même dossier
(courant) que la page Web qui est à l’écran (courante).
• Alors on indique le nom du fichier comme « valeur » de l’attribut
HREF;
• Exemple: <a href="chap1.htm">chapitre 1</a>

23
Balises d’hyperlien (suite)

 Lien à un document sur le même ordinateur


– Lien relatif:
• Cas 2:
• le document de lien (la page Web que l’on veut atteindre) est dans
un sous-répertoire du répertoire (courant) où est située la page Web
qui est à l’écran (courante).
• Alors, la valeur de l’attribut HREF doit faire apparaître le chemin
d’accès au répertoire visé.

• Exemple#1: <a href="chapitre/chap1.htm">chapitre 1</a>

Ce qui signifie: aller(descendre) au sous-répertoire chapitre et


choisir le fichier chap1.htm

24
Balises d’hyperlien (suite)

 Lien sur un document sur le même ordinateur


– Lien relatif:
• Cas 2 (suite):

Exemple#2: <a href="../livre/chapitre/chap1.htm>chapitre 1</a>

Ce qui signifie: remonter au répertoire « parent », puis aller au répertoire


« livre », puis au répertoire « chapitre » et choisir le fichier chap1.htm

 Note: « .. » signifie "aller au répertoire parent"


« / » signifie "aller au répertoire dont le nom suit" ou "aller au document
dont le nom suit, dans le répertoire courant"»

25
Balises d’hyperlien (suite)

 Lien à l’intérieur du même document:


– Ce type de lien est utile dans le cas où le document est très long.
Avant de créer le lien, il faut donner un nom à la section du document
que l’on veut atteindre.
• Se placer immédiatement devant le mot ou les mots qu’on veut identifier
par un nom;
• On utilise l’attribut « name » de l’élément <a>… </a>
• <a name="valeur">lieu à atteindre</a>
• Où valeur est le nom donné à la chaîne de caractères (lieu ) à
atteindre par l’hyperlien
• Exemple: <a name="oiseaux">Les oiseaux du Québec</a>
 Exemple de lien:
<a href="animaux.htm#oiseaux">informations sur les oiseaux</a>
À noter le signe « # » utilisé pour le lien à l’intérieur du document.

26
Balises d’hyperlien (suite)

 Autre façon de créer un lien hypertexte à un point


spécifique dans un document:
 Il s’agit de l’attribut «  ID  »
– <id ="nom" >  
– Cet attribut assigne un nom à un point précis dans le
document. Ce nom doit être unique dans le document.
– Exemples:
<id="monparagraphe"> Ceci est le début de ce texte
<id= "autreplace"> Détails de la pièce

Lien hypertexte: <A HREF= "#autreplace">Pour plus de détails</A>

27
Balises d’hyperlien (suite)

 Lien vers une adresse E-mail (Pour envoyer un message)


 On utilise la balise <A> avec l'attribut href :
<a href="mailto:E-mail de la persone"> Contacter moi</a>
Exemple: <a href="mailto:olivier.gerbe@hec.ca">Contacter moi</a>
– Résultat : Contacter moi
 
On peut aussi contraindre l'objet du message :
<a href="mailto:E-mail de la personne?subject=sujet_du_message" >Contacter moi</a>
Exemple :
<a href="mailto:olivier.gerbe@hec.ca?subject=4-720-00">Contacter moi</a>
– Résultat : Contacter moi

28
Couleurs des liens

 Par défaut un lien non visité est en bleu et un lien visité est
en violet.
 La couleur de l’état d’un lien est identifiée par l’attribut « link »de <body>
i.e. <body link=" couleur">

– Lien non visité :


<body link="blue"> les liens hypertextes avant le clic sont en bleu.
– Lien activé :
<body alink="yellow"> le lien hypertexte est en jaune pendant le clic.
– Lien visité :
<body vlink="red"> les lien hypertextes visités sont en rouge.

29
Balises de niveau paragraphes
(suite)
 <br> ou <br/>
Saut de ligne
 <hr> ou <hr/>
Ligne horizontale
– ALIGN=LEFT/RIGHT/CENTER
– NOSHADE
– SIZE=2
– WIDTH=50%

30
Balises de liste

 Liste à puces
 Liste numérotée
 Liste de définitions

 Note: Les listes peuvent être imbriquées

31
Liste à puces

UL Unordered (bulleted or simple) list


<UL>
<LI> premier élément
<LI> deuxième élément
</UL>
Ce qui donne:
• premier élément
• deuxième élément

32
Liste numérotée

OL ordered (numbered) list

<OL>
<LI>pomme
<LI>orange
<LI>raisin
</OL>
Ce qui donne:
1. pomme
2. orange
3. raisin
33
Liste de définitions

DL definition list
DT definition term
DD definition itself <DL>
<DT>Orange</DT>
<DD>Fruit comestible de l'oranger, de
forme sphérique à ovale, d'un jaune
<DL> mêlé de rouge, et dont la pulpe est
<DT> … </DT> juteuse et sucrée.</DD>
</DL>
<DD> … </DD>
</DL>

34
Attributs de liste numérotée

 Attributs: TYPE, START, COMPACT


<ol type="A" | "a" | "I" | "i" | "1" start="..." compact>

Exemple:
<ol type="i"> ce qui donne
<li>orange i. orange
<li>pomme ii. pomme
<li>raisin iii. raisin
<li>poire iv. poire
</ol>

35
Attributs de liste à puces

 Attributs: TYPE, COMPACT


<ul type="disc" | "square" | "circle">

Exemple:
<ul type= "square "> Ce qui donne:
<li>étudiant ▪ étudiant
<li>professeur ▪ professeur
</ul>

36
Listes imbriquées

<ol type="I">
I. JANVIER
<li>JANVIER
a. Lundi <ol type="a">
<li> Lundi
b. Mardi <li> Mardi
</ol>
II. FEVRIER
<li>FEVRIER
a. Lundi <ol type="a">
<li> Lundi
▪ 8h <ul>
<li> 8h
▪ 9h <li> 9h
b. Mardi. </ul>
<li> Mardi.
III. MARS... </ol>
<li>MARS...
</ol>

37
Balises d'images

 <img>
Insertion d'une image
– src="hec.gif"

Note: les autres attributs de IMG seront vus ultérieurement


38
Balises de tableaux

<table>
<tr> a1 a2
<td> b1 b2

</td>
</tr> <table>
<tr><td>a1</td><td>a2</td></tr>
</table> <tr><td>b1</td><td>b2</td></tr>
</table>

Note: les autres attributs de tableaux seront vus ultérieurement


39
Sommaire

 Balises de structure
<html>, <head>, <title>, <meta>, <body>
 Balises de niveau paragraphes
<h1> à <h6>, <p>, <br>, <hr>
 Balise d'hyperlien
<a>
 Balises de niveau phrase
<em><strong><dfn><code><samp><kbd><var><cite>, …
 Balises de liste
<ul>, <ol>, <li>, <dl>, <dt>, <dd>
 Balises d'images
<img>
 Balises de tableaux
<table><tr><td>
40
Exercice

 Écrire un document HTML mettant en œuvre toutes les


balises HTML vues pendant la séance.
 Le document doit être réaliste.

41

Vous aimerez peut-être aussi