Sie sind auf Seite 1von 81

Université Mohammed V

Faculté des Sciences Rabat – Agdal


UFR SYSCOM 2

Langage HTLM
("Hyper Text Markup
Language")
lasfar@fsr.ac.ma

A. Lasfar 1
Langage HTLM

Est le langage universel utilisé pour


communiquer sur le Web.

A. Lasfar 2
Plan
1. Approche introductive au langage HTML
2. Réalisation d’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Tableau
ƒ Liste
ƒ Lien
ƒ Image
ƒ Frames
4. Résumé
A. Lasfar 3
Historique
Ce langage, créé par Berners Lee (créateur du
Web),

Ce langage est né dans sa première version en


1992, de manière concomitante avec d’autres
techniques telles que le protocole HTTP,
l’adresse URL, et les navigateurs.

IL est issu d’un langage déjà existant : le langage


SGML (Standard General Markup Language). Ce
dernier permet(tait) d’effectuer des échanges
de données informatiques (EDI) de manière
structurée et complexe.
A. Lasfar 4
Grâce à HTML votre information sera
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.

A. Lasfar 5
Vous avez donc deux interlocuteurs :

1. éditeur de texte tout simple comme par exemple


le Bloc-notes ou Notepad de Windows ou tout
autre équivalent dans votre système d'exploitation
tel que Vi ou Emacs sous UNIX .

2. browser soit Netscape Navigator , Microsoft


Explorer , Claris Home Page, Frontpage de
Microsoft, Hotdog, Hotmetal, WebExpert…

A. Lasfar 6
Les principes
Les Balises

ƒ Le HTML n'est pas un langage de


programmation, c'est un simple fichier
texte contenant des balises permettant de
mettre en forme le texte, les images ...

ƒ Une balise est une commande (un nom)


encadrée par le caractère inférieur (<) et
le caractère supérieur (>) par exemple
‘<H1>’.

A. Lasfar 7
Les principes
Les Balises

A. Lasfar 8
Les principes
Les attributs

ƒ Les balises HTML peuvent disposer d'un


certain nombre d'attributs paramétrables
dans un format spécifique.

ƒ Ces attributs sont insérés juste après le


nom de la balise de début de style, et
avant le signe ">" de fin de balise.

ƒ Chaque attribut est suivi du caractère “=”


et d’une valeur.

A. Lasfar 9
Les principes
Les attributs

A. Lasfar 10
Réalisation d’un
document HTML

A. Lasfar 11
La page HTML minimum
ƒ Une page HTML est un simple fichier texte
commençant par <HTML> et finissant par
</HTML>.
ƒ Il contient un en-tête décrivant le titre de la
page, puis un corps dans lequel on place le contenu
de la page

ƒ L'en-tête est délimité par les balises <HEAD> et


</HEAD>
Le corps est délimité par les balises <BODY> et
</BODY>
Ainsi la page minimum sera:

A. Lasfar 12
La page HTML minimum
Exemple
<HTML>
<HEAD>
<TITLE> Le titre </TITLE>
</HEAD>

<BODY>
Contenu de votre page
</BODY>
</HTML>

A. Lasfar 13
Voici vos premières balises
ou tags
<HTML> Ceci est le début d'un document de type HTML.
</HTML> Ceci est la fin d'un document de type HTML.
<HEAD> Ceci est le début de la zone d'en-tête(prologue au
document proprement dit contenant des informations
destinées au browser).
</HEAD> Ceci est la fin de la zone d'en-tête.
<TITLE> Ceci est le début du titre de la page.
</TITLE> Ceci est la fin du titre de la page.
<BODY> Ceci est le début du document proprement dit.
</ BODY> Ceci est la fin du document proprement
dit.l,m<,,l

A. Lasfar 14
Premier document HTML
ƒ Ouvrir l'éditeur de texte.
ƒ Ecrire les codes Html suivants:

A. Lasfar 15
Premier document HTML
„ Enregistrer le document avec l'extension .html ou
.htm.

A. Lasfar 16
Premier document HTML
ƒ Ouvrir le navigateur.
ƒ Afficher le document via le menu File/Open file...
ƒ Admirer votre premier document Html.

A. Lasfar 17
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 18
Les Paragraphes
<br> (break rule) spécifie au navigateur un saut de ligne.
</br> est facultative.
<p> définit un paragraphe. Le navigateur interprète
cette balise en effectuant un saut de ligne et un retour
à la ligne.
</p> est obligatoire dans la mesure où le paragraphe
court sur plus d'une ligne.
<hr> (horizontal rule). Celle ci dessine une ligne de
séparation horizontale et retourne à la ligne. La largeur
du trait horizontal peut être fixée grâce à l'attribut
width.
</hr> est facultative.
A. Lasfar 19
Les Paragraphes

Voici un exemple avec deux paragraphes insérés après


une ligne couvrant 75% de la largeur de la page:

A. Lasfar 20
Les Paragraphes

Voici le résultat :

Hello world !

Premier paragraphe
Second paragraphe

A. Lasfar 21
Alignement des paragraphes

„ On utilise la balise <p> avec l’attribut align


et l’une des trois valeurs suivantes left,
center ou right.

„ La valeur left est utilisée par défaut si


l’attribut align est inutilisée.

A. Lasfar 22
Alignement des paragraphes
Exemple:

Donne le résultat:

Ce paragraphe est aligné sur le bord droit de la page

A. Lasfar 23
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 24
Les textes
quelques Balises élémentaires :
Couleur de [ Font color] Début et fin de
caractère <FONT COLOR= zone en couleur
“#$$$$$$”></FONT>

Gras [BOLD] Début et fin de


<B>…</B>
zone en gras
<STRONG>…</STRONG>

Italique [ Italic] <I>…</I> Début et fin de


<EM>…</EM> zone en italique

Taille de [Font size] <FONT Début et fin de


caractère SIZE=?>…</FONT> zone avec cette
taille

A. Lasfar 25
Les textes
quelques Balises élémentaires :

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

Commentaires [ Comments] <!--***--> Ne pas


afficher

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

A. Lasfar 26
Le texte
„ Ouvrir l’éditeur texte :

A. Lasfar 27
Le texte
„ Ouvrir le Browser :

A. Lasfar 28
Quelques commentaires
s’ imposent

Le texte tout simple s'écrit


sans balises. Il sera repris par
le browser avec la police et
taille de caractères choisies
dans sa configuration par
défaut.

A. Lasfar 29
Quelques commentaires
s’ imposent

Le browser ne tient compte que d'un seul


espace entre les mots. Ainsi pour lui :

<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en
bleu</FONT> est équivalent à:

<FONT SIZE=5>texte</FONT> <FONT


COLOR="#0000FF">en bleu</FONT>

A. Lasfar 30
Quelques commentaires
s’ imposent
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.

A. Lasfar 31
Quelques commentaires
s’ imposent

La taille dans <FONT SIZE=?> peut être


indiquée de deux façons :

1. avec un nombre de 1 à 7. La valeur


par défaut étant 3

2. de façon relative par rapport à la


valeur par défaut (ici 0). Soit -3 -2
-1 0 +1 +2 +3.

A. Lasfar 32
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 33
Les listes
Une liste est un paragraphe
structuré contenant une suite
d'articles.
Il en existe trois types:
Ordonnée
Non ordonnée
De définition
A. Lasfar 34
Les listes
Contenue Type de liste Effet visuels

<ol> Ordonnée 1. article1


<li> article1 </li> 2. article2
<li> article2 </li> 3. article3
<li> article3 </li>

</ol>

<ul> Non ordonnée ●article1


<li> article1 </li> ●article2
<li> article2 </li> ●article3
</ul>

A. Lasfar 35
Les listes

<di>
De définition 1.article1
<dt>terme</dt> définition1
<dd>definition</dd> 2. article2
définition2
</di>

A. Lasfar 36
A. Lasfar 37
A. Lasfar 38
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 39
Les Liens
Html 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.
A. Lasfar 40
Les Liens

La syntaxe de ces liens entre plusieurs


pages, est simple :

<A HREF="URL ou adresse">...</A>

A. Lasfar 41
Exemple

- Dans l'éditeur de texte,


nous allons créer deux fichiers Htlm.

ƒ le fichier 1.htm:
<A HREF="2.HTM">Aller vers le
document 2</A>

ƒ le fichier 2.htm:
<A HREF="1.HTM">Retour au document
1</A>

A. Lasfar 42
Exemple

- On sauve ces deux fichiers dans un même


répertoire.

A. Lasfar 43
Exemple

Le browser vous affichera :

A. Lasfar 44
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 pointeurs

A. Lasfar 45
Les ancres
Point <A NAME="***">...</A> Ceci est une
d'ancrage cible

Lien vers une <A HREF="#***">...</A> Lien vers la


ancre dans la cible *** dans la
même page même page

Lien vers une ancre <A HREF="URL#***">...</A> Lien vers la


dans une autre page cible ***
dans une page

A. Lasfar 46
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 47
Les images
„ Il y a deux formats d'images que vous pouvez
inclure dans votre page:

„ 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 GIF: Leur taille est faible dans le


cas d'images avec peu de couleurs, ce format
permet en outre d'avoir des images entrelacées
(qui s'affichent progressivement) et des images
dont on définit une couleur comme transparente

A. Lasfar 48
Lien sur les images
ƒ On utilise le marqueur <IMG> pour inclure une image, il ne
crée pas de retour à la ligne.
ƒ Ses trois principaux attributs sont:

ƒ 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 lorsque l'image ne
s'affiche pas

A. Lasfar 49
Lien sur les images

Ainsi pour insérer une image, il faudra


saisir un marqueur du type suivant :

<IMG SRC="url/image.gif|url/image.jpg »
ALT="Texte remplaçant l'image">

A. Lasfar 50
Exemple

A. Lasfar 51
A. Lasfar 52
Les arrières plans

La Balise à utiliser :

Couleur d'arrière-plan
<BODY BGCOLOR="#$$$$$$">

A. Lasfar 53
Les arrières plans
Exemple

A. Lasfar 54
Les arrières plans
Exemple

La lisibilité n'est pas parfaite Æ des balises sont


prévues pour modifier les couleurs utilisées par
défaut par le browser pour le texte et les
liens.

Couleur de texte <BODY TEXT="#$$$$$$">


Couleur de lien <BODY LINK="#$$$$$$">
Lien visité <BODY VLINK="#$$$$$$">
Lien actif <BODY ALINK="#$$$$$$">

A. Lasfar 55
Les arrières plans
Exemple
Reprenons notre exemple;

A. Lasfar 56
Les arrières plans
Exemple

„ On peut aussi prévoir un fond en image.


Cette image est affichée en mosaïque par
le browser.

„ Texture d'arrière-plan
<BODY BACKGROUND="Adresse">

A. Lasfar 57
Les arrières plans
Exemple
Ce qui nous donne :

A. Lasfar 58
Les couleurs

Les couleurs sont définies par 6 chiffres


hexadécimaux représentant 2 à 2 les
tons de Rouge, de Vert et de Bleu.

couleur="#RRVVBB" où R, V et B
représentent respectivement un chiffre
hexadécimal entre 0 et F pour le Rouge,
le Vert et le Bleu

A. Lasfar 59
Les couleurs
Voici les codes de quelques couleurs basiques:

Bleu #0000FF Blanc #FFFFFF


Rouge #FF0000 Gris clair #COCOCO
Vert #00FF00 Violet #8000FF
jaune #FFFF00 Noir #000000

A. Lasfar 60
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 61
Les tableaux
En Html, les tableaux servent non
seulement à aligner des chiffres mais
surtout à placer des éléments à
l'emplacement que vous souhaitez.

Les tableaux sont définis comme étant


des suites de lignes

A. Lasfar 62
Les tableaux
„ <TABLE> et </TABLE> ces marqueurs encadrent Le
tableau.

„ <CAPTION> et </CAPTION> encadrent le titre du


tableau.

„ <TR> et </TR> (Table row) encadrent les lignes.

„ <TH> et </TH> (Table header) encadrent les


cellules d'en-tête.

„ <TD> et </TD> (Table Data) encadrent les


cellules de valeur.
A. Lasfar 63
<TABLE
BORDER="1">
<Caption> le titre du </Caption>
tableau
<TR>
<TH> TitreA1 </TH>
<TH> TitreA2 </TH>
<TH> TitreA3 </TH>
<TH> TitreA4 </TH>
</TR>
<TR>
<TH> Titre B1 </TH>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</Table>

A. Lasfar 64
Les tableaux
„ donne le résultat suivant:

„ le titre du tableau

Titre A1
Titre A2
Titre A3
Titre A4
Titre B1
Valeur B2
Valeur B3
Valeur B4

A. Lasfar 65
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 66
Les Frames

Grâce à la technologie des frames (en


français "cadres") il est désormais
possible d'afficher plusieurs page
HTML dans différentes zones ou
cadres.

A. Lasfar 67
Les Frames

Pour ce faire il faut un fichier qui


contiendra l'agencement des cadres,
c'est un fichier HTML qui a pour
particularité d'avoir sa balise <BODY>
remplacée par le conteneur
<FRAMESET>. C'est cette balise qui
définit les cadres par leur dimension
en pourcentage (%).

A. Lasfar 68
Les Frames

Voyons ceci sur 3 exemples:


· 2 cadres verticaux
· 2 cadres horizontaux
· 2 cadres horizontaux et un
vertical

A. Lasfar 69
Les Frames

Exemple 1:
<FRAMESET COLS="20%,80%">

<FRAME SRC="frame1.htm">

<FRAME SRC="frame2.htm">

</FRAMESET>

A. Lasfar 70
A. Lasfar 71
Les Frames

Exemple 2:
<FRAMESET ROWS="20%,80%">

<FRAME SRC="frame1.htm">

<FRAME SRC="frame2.htm">

</FRAMESET>

A. Lasfar 72
A. Lasfar 73
Les Frames
Exemple 3:
<FRAMESET COLS="20%,80%">

<FRAME SRC="frame1.htm">

<FRAMESET Rows="50%, 50%">

<FRAME SRC="frame2.htm">

<FRAME SRC="frame3.htm">

</FRAMESET>

A. Lasfar 74
A. Lasfar 75
Plan
1. Approche introductive au langage HTML
2. Réalisation d ’un document HTML
3. Mise en page du document HTML
ƒ Texte
ƒ Paragraphe
ƒ Liste
ƒ Lien
ƒ Image
ƒ Tableau
ƒ Frames
4. Résumé
A. Lasfar 76
Résumons-nous

HTML est bien un langage qui comprend


une série de balise, qui servent à donner
une certaine apparence au texte, aussi
permettent de créer des liens et de
transformer ainsi le texte en
hypertexte. Les pages produites avec ce
langage porte le nom de page HTML.
Elles sont en général, stockées sur un
serveur web, qui les fournira à la
demande.

A. Lasfar 77
Résumons-nous

De l’autre côté, nous avons un


navigateur et un logiciel spécialisé
dans l’interprétation des pages HTML
et dans leur affichage. Ce navigateur
est aussi capable de faire des
requêtes(via internet) à des serveur
web.

A. Lasfar 78
Résumons-nous

Page HTML ou page web cela dépend


de quel côté on regarde !

A. Lasfar 79
Côté Côté
HTML navigateur
Page HTML Page Web

Exemple
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>exemple</P>
</BODY>
</HTML>

A. Lasfar 80
À suivre …

A. Lasfar 81