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
