Vous êtes sur la page 1sur 56

HTML

MST Informatique

Said.Najah 1
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 2
Introduction

Problématique de ? Afficher doc1 de la même façon


Communication entre #‚ sur d’autres plates-formes
plates-formes
? Permettre un parcours non linéaire
du document
Said.Najah 3
Introduction
Solution
• Editer le document avec un éditeur
bas niveau (code ASCII 7 bits)
• Accompagner ce texte avec des
commandes explicites de mise en
forme compréhensibles pour
toutes les plates-formes
• Enrichir le document par des liens HTML
hypertextes… Hyper Text Markup Language

Accéder et afficher le
document avec un navigateur
web : IE, Opera, Firefox,
Netscape
Said.Najah 4
Fichier HTML ?
Du texte brut

Des références aux objets( images, audio, liens…)

Des commandes ( balises ou tags) qui permettent


d’organiser la présentation

Deux types de balises monolithique et double

Monolithique : <balise>

Double :<balise> texte </balise>


Said.Najah 5
HTML :Historique
1990 : Première version de l’HTML (par Tim BERNERS
BERNERS-LEE au CERN)

1994 : HTML HTML2.0 norme IETF( Internet Engeneering


Task Force)

1996 : HTML HTML3 2 norme W3C HTML3.


Tableaux, Applet.

1997 : HTML HTML4.0 norme W3C


Javascript, feuilles de style, nouvelles
possibilités multimédias
•2008 : HTML 5
Said.Najah 6
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 7
Structure d'une page HTML

<HTML>
<HEAD>
<TITLE> Titre de la page</TITLE> L'en-tête du document
</HEAD>

<BODY>
••• Le corps de la page

</BODY>
</HTML>

Said.Najah 8
Exemple simple

<html>
<head>
<title>
Mon premier exemple
</title>
</head>
<body>
Mon premier essai de page web
filière d’ingénieur SiCom
</body>
</html>

Exemple

Said.Najah 9
Caractères accentués

Code reconnu par toutes les plates


plates- formes : l’ ASCII (7 bits, 128 caractères)

Problème : ? Représenter les accentués caractères

Said.Najah 10
Caractères accentués
Solution : Représentation particulière

Said.Najah 11
Caractères clés de l’HTML

Représentation particulière des caractères clés

Said.Najah 12
Mise en forme simple du texte
Saut de ligne

Un saut de ligne dans un fichier source HTML est


remplacé par un espace.

Marquer explicitement le saut de ligne par la balise :


<BR>
La balise <BR> est monolithique (pas de </BR>)
Exemple

Said.Najah 13
Mise en forme simple du texte
Insertion de paragraphe

<p> : Saute une ligne et laisse une ligne vide avant


d’afficher le paragraphe .

La balise <p> est monolithique (pas de </>)

Exemple

Said.Najah 14
Mise en forme simple du texte
Titres

<Hx> : Balise double qui saute la ligne et laisse de l’espace


avant et après le titre

6 niveaux de titres avec 6 tailles :


<H1> Titre1 </H1>
<H2> Titre2 </H2>
| | |
<H6> Titre6 </H6>

Exemple

Said.Najah 15
Mise en forme simple du texte
Style Gras et Italique
Style Gras : 2 balises doubles <B> et <STRONG>
<B> texte en gras </B> ou
<STRONG> texte en gras </STRONG>

Style Italique : 2 balises doubles <I> et <EM>


<I> texte en gras </I> ou
<EM> texte en gras</EM>

<STRONG> et <EM> : Distinguer le texte gras du reste


si le navigateur ne permet pas le gras et/ou l’italique

Combinaison avec d’autres balises :


<H1> Page de <B> Michel DUPONT</B></H1>
<H3> Equation <I> b X +c =0 </I> </H3>
Said.Najah 16
Mise en forme simple du texte
Traçage de ligne horizontale

<HR> : Balise monolithique qui trace une ligne Horizontale

Attributs optionnels :
SIZE : épaisseur (en pixel 1-15)
WIDTH :largeur (en % ou en pixel)
ALIGN : alignement (right, left et center)
Par défaut SIZE =2 et WIDTH =100%

EX:<HR SIZE=10 WIDTH= 80% ALIGN ="center">


Exemple

Said.Najah 17
Mise en forme simple du texte
Logo textuel et la balise <PRE>
Exemple
<HTML>
Problème : déformé Problème : déformé Train
<HEAD> • Sauts de ligne ignorés
<TITLE> • Caractères proportionnelles p
Exemple de logo
</TITLE>
</HEAD>
<BODY>
Rajouter des sauts de lignes
<H3> Logo Train</H3>
explicites : <BR>
__ ___ __________
_||___|O| |homepage|
<_ __ _|--|_ ____ __|
OO OO O O
Le problème n’est pas résolu
</BODY>
</HTML>
Said.Najah 18
Mise en forme simple du texte
Logo textuel et la balise <PRE>

Problème : Train déformé


• Sauts de ligne ignorés
• Caractères proportionnelles

Utilisation de la balise double <PRE> :


Maintient les sauts de ligne et garde la propriété non
proportionnelle des caractères

Said.Najah 19
Mise en forme simple du texte
Logo
Exemple:
<HTML>
<HEAD>
<TITLE>
Exemple de logo
</TITLE>
</HEAD>
<BODY>
<H3>LogoTrain</H3>
<PRE> Exemple
_||___|O| |homepage|
<_ __ _|--|_ ____ __|
OO OO O O
</PRE>
</BODY>
</HTML>
Said.Najah 20
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 21
Liste de définition : mise en retrait

La balise double <DL> :


crée une liste d’éléments avec ou sans retrait
saute la ligne et laisse une ligne vide avant et après

La balise <DL> encadre 2 types de balises doubles : <DT> et <DD>


<DT> : Saute la ligne et affiche l’élément de la liste sans retrait
< DD> :Saute la ligne et affiche l’élément de la liste avec retrait

Pratique pour les glossaires


HTML : HyperText Markup Language
HTTP : Hyper Texte Transfer Protocol

Exemple

Said.Najah 22
Liste non numérotée
La balise double <UL> :
Crée une liste d’éléments avec retrait
Met une puce devant chaque élément de la liste
Saute la ligne et laisse une ligne vide avant et après

La balise <UL> encadre la balise monolithique <LI>


<LI> : Précède chaque l’élément de la liste

Exemple

Said.Najah 23
Liste numérotée
La balise double <OL> :
Crée une liste d’éléments avec retrait
Numérote les éléments de la liste
Saute la ligne et laisse une ligne vide avant et après

La balise <OL> encadre la balise monolithique <LI>

<LI> : Précède chaque l’élément de la liste


Un saut de ligne <BR>dans un élément de la liste
conserve le retrait
Exemple

Said.Najah 24
Listes imbriquées

• Elément 1
• Liste non numérotée • Elément 2
dans une autre liste non • Elément 21
Numérotée • Elément 22

1. Elément 1
• Liste numérotée dans 2. Elément 2
une autre liste numérotée 1. Elément 21
2. Elément 22

Said.Najah 25
Listes imbriquées

1. Elément 1
• Liste non numérotée 2. Elément 2
dans une liste Numérotée • Elément 21
• Elément 22

Elément 1
• Liste numérotée dans Elément 2
une autre liste non 1. Elément 21
numérotée 2. Elément 22

Said.Najah 26
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 27
Tableaux

Un tableau est structuré de manière hiérarchique.

La balise double <TABLE> encadre tout le tableau:


La balise double <TH> encadre le titre du tableau
La balise double <TR> encadre une ligne du tableau
La balise double <TD> encadre une cellule du tableau
Le nombre de <TD> dans <TR> =nombre de colonne du
tableau
Le nombre de <TR> dans <TABLE> = nombre de ligne du
tableau
Said.Najah 28
Tableaux
Exemple (3 lignes, 3 colonnes)
<TABLE>
<TH> Titre du tableau </TH>
<TR>
<TD> Cellule11 </TD>
<TD> Cellule12 </TD>
<TD> Cellule 13 </TD>
</TR>
<TR>
<TD> Cellule21 </TD>
<TD> Cellule22 </TD>
<TD> Cellule 23 </TD>
</TR>
<TR>
<TD> Cellule31 </TD>
<TD> Cellule32 </TD>
<TD> Cellule 33 </TD>
</TR>
</TABLE>
Said.Najah 29
Tableaux

Exemple
Liste des etudiants

Said.Najah 30
Forme Tableaux : Mise en Forme

Attributs de la balise <TABLE>

BORDER : épaisseur de la bordure

WIDTH : Largeur du tableau

CELLSPACING : espace entre bordures (en pixel) p

CELLPADDING : espace entre le texte et la bordure (en pixel)

Said.Najah 31
Tableaux
Fusion des Cellules

Centrage du titre : COLSPAN =nb de colonnes


<TH COLSPAN = 3>

Fusion des cellules d’une ligne : COLSPAN= nb de


cellules fusionnées
<TD COLSPAN = 2>

Fusion des cellules d’une colonne : ROWSPAN= nb


de cellules fusionnées
<TD ROWSPAN= 2>

Said.Najah 32
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 33
Liens Hypertextes

Un hyper lien est défini par la balise double <A>

Un hyper lien est caractérisé par :


La référence de la cible : où on veut aller
Elément pointeur ou lien : sur quoi on clique (avec une
couleur distinguée)

Texte :Souligné et avec une couleur différente


Image
Le pointeur de la souris change de forme sur un lien

Said.Najah 34
Liens Hypertextes
Lien dans la même page : Ancrage

<a name="Ancre1"> Texte cible </a>


<a href="#Ancre1"> lien vers le texte cible de la même page</a>
Exemple

Lien Local :la page cible est sur la même machine

La cible est un fichier dans le même dossier


<AHREF =" fichier.html "> cliquer ici pour la suite </A>
cible est un fichier dans un autre dossier
<AHREF ="chemin/fichier.html ">cliquer ici pour la suite</A>

Said.Najah 35
Liens Hypertextes
Lien Global
La cible est n’importe sur le n importe où net
<A HREF ="URL ">cliquer ici </A>

URL
Service : HTTP,FTP, TELNET, MAILTO…)
Serveur
Le chemin de la ressource

Affichage de la cible dans une nouvelle Fenêtre


Avec l’attribut TARGET new
Syntaxe :
<A HREF “URL” TARGET="new"> cliquer ici </A>

Exemple
Said.Najah 36
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 37
Images dans l’HTML
Une page html peut contenir des images
L’image est un fichier indépendant de la page HTML
Dans le même répertoire, ou dans un autre
Formats largement supportés :.gif .jpg

L’image est insérée dans une page html par la balise


<IMG>
Attributs:
SRC :Chemin du fichier image
ALIGN: Position par rapport au texte
HSPACE, VSPACE : Espacements
WIDTH, HEIGHT : Modification de la taille d’image
LOWSRC :Chemin d’image alternative

Said.Najah 38
Images dans l’HTML
Exemple simple:
Le fichier image est dans le même répertoire de page HTML

L’image n’est pas accompagnée d’un texte


Images dans l’HTML
La légende peut être affichée :
En haut (ALIGN="TOP")
Au milieu (ALIGN="MIDDLE")
En bas, le cas par défaut (ALIGN="BOTTOM")

La légende d’une image ne dépasse pas une ligne

Said.Najah 39
Images dans l’HTML
Position de l’image par rapport au texte
Image gauche du texte à
ALIGN="LEFT"
Image à droite du texte
ALIGN="RIGHT"
Créer un espacement autour de l’image
HSPACE (Horizontalement avec l attribut en (pixel)
l’attribut VSPACE (en Verticalement avec l attribut
(pixel)

Créer une bordure autour de l’image


L’attribut BORDER= valeur définit la taille de la bordure
de l’image

Said.Najah 40
Images dans l’HTML
Changement de la taille de l’image
Modifier ( Agrandir ou réduire) la taille l’image en % par
rapport à la d’affichage fenêtre d affichage
L’attribut WIDTH =*% modifie la largeur de l’image
L’attribut HEIGH =*% modifie la hauteur de l’image

Agrandir ou réduire l’image en pixel


L’attribut WIDTH =* fixe la largeur de l’image en pixel
L’attribut HEIGH =* fixe la hauteur de l’image en pixel
Peut causer des Pbs liés à la résolution de la carte
graphique

Changement de la taille de l’image


Le fichier image chargé est toujours le même
Réduire la présentation de l’image ne veut pas dire réduire
le fichier image téléchargé
Said.Najah 41
Images dans l’HTML

Intérêt de la spécification des dimensions réelles de l’image en


pixel
WIDTH=x
HEIGHT=y
Des fichiers images relativement volumineux peuvent
nécessiter un temps considérable pour les télécharger .
En attendant, il est préférable d’afficher le texte
accompagnant.
La connaissance des dimensions réelles de l’image permet
de prévoir la zone d’affichage de l’image en cours de
téléchargement et d’afficher entre temps le texte
accompagnant
Said.Najah 42
Images dans l’HTML
Image de substitution temporaire

D’un fichier image volumineux attendant le


téléchargement En d un volumineux, nous pouvons
afficher une image de remplacement généralement de
petite taille ( ex : noir et blanc)

A la fin du téléchargement, l’image réelle est affichée

L’attribut LOWSRC indique le chemin de l’image de


remplacement

Said.Najah 43
Image comme lien hypermédia

Image dans un lien

Placer la balise <IMG> dans la balise lien <A>

<A HREF="lien" > <IMG SRC="image"> </A>

Said.Najah 44
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 45
En-tête
Contient des informations, généralement non affichés, utiles pour
les moteurs de recherche
<TITLE> : balise double délimitant le titre de la page
<META> : balise monolithique avec un couple (attribut, valeur)

Déclarer et indexer la page web dans les moteurs de


recherche :Balise<META>
NAME="description" CONTENT="Texte affiché par le
moteur"
Indique le texte qui sera affiché par le moteur de
recherche résumant le contenu de la page
Tous les mots de texte sont considérés comme mots clés

NAME="keywords" CONTENT="mot1, mot2, …"


Définit les mots clés additionnels
Les mots clés sont séparés
Said.Najah
par une virgule et un espace46
En-tête
Rafraîchissement automatique de la page :
Balise <META>

HTTP-EQUIV="Refresh" CONTENT="x"

Permet de recharger la même page toutes les x


secondes
Utile pour les pages web mises à jour à des intervalles
de temps réguliers

Said.Najah 47
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 48
Frames

Un moyen de diviser l’écran du


navigateur en plusieurs zones
(cadres ou fenêtres), où chaque
zone est susceptible de contenir
une page HTML

Said.Najah 49
Frames
La balise double <FRAMSET> permet de diviser l’écran en
plusieurs fenêtres
Remplace la balise <BODY>
Attributs
ROWS : division horizontale
COLS : division verticale
Pas les deux en même temps
Spécification des tailles des fenêtres en (% ou en pixel)
La balise <FRAME > correspond à une fenêtre donnée et
doit apparaître autant de fois qu’il y a de fenêtres

Said.Najah 50
Frames
Exemples

Diviser l’écran en deux fenêtres horizontales(40% 60%)


Diviser l’écran en deux l écran fenêtres verticales (20%,80%)
Diviser l’écran en quatre fenêtres verticales (25% 25% 25%
25%) égales 25%,25%,25%,

Said.Najah 51
Imbrication des frames
Une frame peut être également divisée en plusieurs frames

Exemple :
Diviser l’écran du navigateur en deux fenêtres horizontales
de tailles respectives (20%,80%)
Diviser la deuxième fenêtre (80%) en deux autres fenêtres
verticales de tailles (40%,60%)

Rq : à la différence de la balise <BODY>, la balise


<FRAMESET> peut apparaître plusieurs fois dans le même
document

Said.Najah 52
Utilisation des frames
Fichier0.htm
Fichier1.htm Fichier2.htm

Contenu Contenu
de frame de frame
gauche droite

Pour une page à deux frames nous avons besoin de trois


fichiers :
Fichier0.html définit les frames
Fichier1.html sera affiché dans la frame gauche
Fichier2.html sera affiché dans la frame droite

Said.Najah 53
Utilisation des frames

Afficher la page correspondant à un lien d’une frame 1


dans une autre frame 2

Attribuer un nom à la frame 2


Dans nous spécifions le lien, la frame 2 comme
fenêtre d’affichage de la page résultante
L’attribut TARGET=nom_frame2

Said.Najah 54
Alternatives des frames

Si le navigateur ne permet pas les frames, nous pouvons


prévoir une autre alternative après </FRAMESET> par :

La balise <NOFRAME>
La balise <BODY>

Said.Najah 55
Plan

Introduction
Balises de mise en forme
Listes
Tableaux
Liens hypertextes
Images et liens hypermédias
En En-tête
Frames
Formulaires
Said.Najah 56

Vous aimerez peut-être aussi