1. Université Abdelmalek Essaâdi
Faculté des Sciences et Techniques d’Al-Hoceima
Département de Mathématiques et
Informatique
Filière : LST-MI – S6
Année universitaire : 2021- 2022
Module M31 : Technologies du Web
Chapitre 1 : Langage HTML
Pr . A. Zannou FST d’ Al-Hoceima
1
Pr. Abderrahim zannou
a.zannou@uae.ac.ma
2. Pr . A. Zannou FST d’ Al-Hoceima
2
Généralités sur HTML
o Le langage de balisage d'hypertexte ou HTML (HyperText Markup
Language) est un langage permettant de créer des pages web pouvent
être lues dans des navigateurs.
o HTML est d'un langage de description (et non pas d'un langage de
programmation) qui va nous permettre de décrire l'aspect d'un
document, d'y inclure des informations variées (textes, images, sons,
animations etc.) et d'établir des relations cohérentes entre ces
informations grâce aux liens hypertextes.
o Html est un langage universel qui s'adapte à toutes les plate-formes que
ce soit Windows, Macintoch, Unix, OS/2, etc.
3. Pr . A. Zannou FST d’ Al-Hoceima
3
Généralités sur HTML
• Les versions de HTML
HTML1 : C'est la toute première version créée par TimBerners-Lee
en 1991.
HTML2 : la deuxième version du HTML apparaît en 1994 et prend fin
en 1996 avec l'apparition du HTML 3.0. C'est cette version qui posera
en fait les bases des versions suivantes du HTML. Les règles et le
fonctionnement de cette version sont donnés par le W3C (tandis que
la première version a été créée par un seul homme).
HTML3 : apparue en 1996, cette nouvelle version du HTML rajoute
de nombreuses possibilités au langage comme les tableaux, les
applets, les scripts, le positionnement du texte autour des images, etc.
4. Pr . A. Zannou FST d’ Al-Hoceima
4
Généralités sur HTML
• Les versions de HTML
HTML4 : il s'agit de la version la plus répandue du HTML (plus
précisément, il s'agit de HTML 4.01). Elle apparaît pour la première
fois en 1998 et propose l'utilisation de frames (qui découpent une
page web en plusieurs parties), des tableaux plus complexes, des
améliorations sur les formulaires, etc. Mais surtout, cette version
permet pour la première fois d'exploiter des feuilles de style, notre
fameux CSS !
5. Pr . A. Zannou FST d’ Al-Hoceima
5
Généralités sur HTML
• Les versions de HTML
HTML5 : c'est la dernière version. Encore assez peu répandue, elle
fait beaucoup parler d'elle car elle apporte de nombreuses
améliorations comme la possibilité d'inclure facilement des vidéos,
un meilleur agencement du contenu, de nouvelles fonctionnalités
pour les formulaires, etc. C'est cette version que nous allons
découvrir ensemble.
6. Pr . A. Zannou FST d’ Al-Hoceima
6
Pour créer une page HTML, on utilise des éditeurs de texte comme:
Bloc-notes
Notepad++
Sublime text
L’enregistrement du fichier se fait sous l’extension html.
L'extension .html permet au système d'exploitation de savoir que le
fichier sur lequel vous travaillez est une page web.
Généralités sur HTML
• Editeur de création d’une page Web
7. Pr . A. Zannou FST d’ Al-Hoceima
7
<HTML>
<HEAD>
<TITLE> Le titre de page Web </TITLE>
</HEAD>
<BODY>
Le corps de page Web
</BODY>
</HTML>
Structuration d’un document
• Structure d’une page Web
o La balise <HTML> est obligatoire et permet d'indiquer qu'on code en
HTML.
o La balise <HEAD> détermine l’entête du document et contient les
méta-informations.
o La balise <TITLE> est le titre du document. Elle sert en
référencement (repris dans les résultats de recherche) et affichée
dans l’onglet du navigateur.
o La balise <BODY> est le corps du document. Elle affiche le contenu
dans la fenêtre/l’onglet du navigateur.
8. Pr . A. Zannou FST d’ Al-Hoceima
8
Structuration d’un document
• En-tête HEAD
o L'en-tête HEAD dans un document HTML est une partie du document
qui n'est pas affichée par le navigateur au chargement de la page.
o L'en-tête HEAD contient des informations comme:
• Le titre (<TITLE>) de la page.
• Des liens aux CSS (si vous souhaitez composer le contenu HTML
avec des CSS).
• Des liens aux favicons personnalisés.
• Des métadonnées (auteur du document, mots-clés décrivant le
document, etc.).
9. Pr . A. Zannou FST d’ Al-Hoceima
9
Structuration d’un document
• En-tête HEAD: métadonnées
<HTML>
<HEAD>
<META CHARSET="UTF-8" >
< META NAME="DESCRIPTION" CONTENT="Site de formations en
Informatique">
< META NAME ="KEYWORDS " CONTENT="HTML, JAVA, C">
< META NAME ="AUTHOR" CONTENT="Université Abdelmalek Essaadi">
</HEAD>
</HTML>
o Les balises <META> (ou Meta tags) sont des balises qui contiennent
les métadonnées. Il s'agit de données supplémentaires qui aident à
l’exécution correcte de la page ou fournissent des informations
additionnelles lors de l’exécution.
o Les balises <META> sont déclarées dans l'entête du document
HTML (entre les balises <HEAD> et </HEAD>). Son contenu n'est
donc pas affiché sur la page.
10. Pr . A. Zannou FST d’ Al-Hoceima
10
Structuration d’un document
• Codage des caractères
o L’attribut CHARSET spécifie l’encodage des caractères utilisé. Cette
déclaration doit être unique pour l’ensemble d’un document.
<HTML>
<HEAD>
<META CHARSET="ASCII" >
</HEAD>
<BODY>
سالم
</BODY >
</HTML>
11. Pr . A. Zannou FST d’ Al-Hoceima
11
Structuration d’un document
• À quoi servent les balises META ?
À qui sont destinées ces informations? Eh bien, à tous les outils susceptibles
de les exploiter. Et notamment:
Aux navigateurs web
aux moteurs de recherche;
Plus largement, à tous les outils d’indexation, c’est-à-dire tous les outils
qui analysent vos pages pour y identifier diverses informations.
12. Pr . A. Zannou FST d’ Al-Hoceima
12
Structuration d’un document
• Codage des caractères
Le codage ANSI / ASCII : Ce système utilise 7 bits pour coder 128
caractères (2^7 ). Il a été développé aux états-unis et provient de la
standardisation du standard ASCII. Mais, il n’ y a pas de gestion des
accents.
La norme ISO-8859-1 (ISO-8859-15): Cette norme permet de
coder les caractères accentués. Cette norme est spécifique aux
langues de l'Europe de l'ouest. On utilise 8 octets. Il y a
correspondance entre les caractères ASCII et ceux de codé en ISO-
8859-1.L'extension (ISO-8859-15) rajoute le symbole euro €.
L'Unicode: Pour pouvoir coder toutes les langues, comme l'arabe ou
le chinois, il est nécessaire d'utiliser plus d'octets. Unicode ne
précise le nombre d'octets utilisé pour coder un caractère (point de
code). C'est le type d'encodage (UTF-8, UTF-16, ...) qui le définit.
13. Pr . A. Zannou FST d’ Al-Hoceima
13
Structuration d’un document
• Codage des caractères
L'encodage UTF-8 : UTF-8 est un encodage des caractères, basé sur
UNICODE, de longueur variable qui utilise de 1 à 4 octets par
symbole.
14. Pr . A. Zannou FST d’ Al-Hoceima
14
Il existe six niveaux de titres de différentes tailles:
<H1> …</H1> : Titre de niveau 1
<H2> …</H2> : Titre de niveau 2
<H3> …</H3> : Titre de niveau 3
<H4> …</H4> : Titre de niveau 4
<H5> …</H5> : Titre de niveau 5
<H6> …</H6> : Titre de niveau 6
Organisation d’un texte
• Titres
<HTML>
<BODY>
<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>
</BODY >
</HTML>
15. Pr . A. Zannou FST d’ Al-Hoceima
15
Pour créer un paragraphe, on utilise la balise <P>
<P> Ceci est mon premier paragraphe. </P>
<P> Ceci est mon deuxième paragraphe. </P>
On peut aussi faire de simples sauts de ligne à l'intérieur d'un paragraphe
avec la balise orpheline </BR> (il n'y aura pas d'espace entre les deux
lignes, contrairement à <P> ).
Organisation d’un texte
• Paragraphes et simples sauts de ligne
16. Pr . A. Zannou FST d’ Al-Hoceima
16
Organisation d’un texte
• Paragraphes et simples sauts de ligne
<HTML>
<BODY>
<P>Ceci est mon premier
paragraphe. <BR/>J'y mets une partie à la
ligne</P>
<P>Ceci est mon deuxième
paragraphe.</P>
</BODY >
</HTML>
On ne peut pas inclure un paragraphe à l'intérieur d'un paragraphe.
17. Pr . A. Zannou FST d’ Al-Hoceima
17
Indentations et commentaires servent au webmaster pour mieux lire le
code qu'il écrit dans son éditeur de texte.
Les indentations sont des tabulations qui permettent de hiérarchiser les
lignes de code. Cela permet de repérer les balises qui se trouvent
encadrées par d'autres balises.
Les commentaires sont des textes qui ne sont pas traduits par le
navigateur, mais qui donnent des informations au webmaster sur le code
qu'il a écrit (pour s'y retrouver plus facilement par la suite, comme une
page web html peut faire plusieurs centaines de lignes). On écrit le
commentaire entre <!-- et -->
Organisation d’un texte
• Indentations et commentaires
18. Pr . A. Zannou FST d’ Al-Hoceima
18
Organisation d’un texte
• Indentations et commentaires
<HTML>
<BODY>
<!-- Ici c'est le corps de la page, je le mets en
commentaire -->
</BODY >
</HTML>
Cela peut aussi servir à d'autres personnes, comme tout le monde peut voir le
code html d'une page, en cliquer droit dans le navigateur et en choisissant
[Afficher le code source de la page] ou [Code source de la page].
Quand on veut vraiment tenir secret le code, on peut utiliser le PHP.
19. Pr . A. Zannou FST d’ Al-Hoceima
19
Une liste ordonnée permet de créer une liste d'éléments numérotés.
Pour créer une liste ordonnée en HTML on utilise la balise <OL>.
Pour créer un élément de la liste on utilise la balise <LI>.
Organisation d’un texte
• Liste ordonnée
<HTML>
<BODY>
<H1> Liste de chapitres de ce module</H1>
<OL TYPE="1">
<LI> Les protocoles du WEB</LI>
<LI> HTML</LI>
<LI> CSS</LI>
<LI> Java Script</LI>
<OL>
</BODY >
</HTML>
20. Pr . A. Zannou FST d’ Al-Hoceima
20
Une liste non ordonnée permet de créer une liste d'éléments non
numérotés.
Pour créer une liste ordonnée en HTML on utilise la balise <UL>.
Pour créer un élément de la liste on utilise la balise <LI>.
Organisation d’un texte
• Liste non ordonnée
<HTML>
<BODY>
<H1> Liste de chapitres de ce module</H1>
<UL TYPE="SQUARE">
<LI> Les protocoles du WEB</LI>
<LI> HTML</LI>
<LI> CSS</LI>
<LI> Java Script</LI>
<UL>
</BODY >
</HTML>
21. Pr . A. Zannou FST d’ Al-Hoceima
21
Pour choisir le type de puce, on utilise l'attribut type de la balise <OL> ou
<UL>.
Pour une liste ordonnée (OL), l'attribut TYPE peut prendre les valeurs
suivantes:
TYPE="1" => suite numérique.
TYPE="a" => suite alphabétique.
TYPE="A" => suite alphabétique en majuscule.
TYPE="I" => suite numérique en chiffres romains.
Pour une liste non-ordonnée (UL), l'attribut type peut avoir les valeurs :
TYPE= "DISC" => rond plein.
TYPE="CIRCLE" => rond vide.
TYPE="SQUARE" => carré
Organisation d’un texte
• Liste : attribut TYPE
22. Pr . A. Zannou FST d’ Al-Hoceima
22
Structurer le contenu d’une page web
• Introduction
HTML offre un ensemble d’éléments qui délimitent les zones du
document possédant une valeur sémantique particulière. Leur rôle est de
structurer la page en plusieurs grandes zones dont le simple nom
de l’élément est évocateur de son utilité. Il s’agit des éléments:
<header>, <nav> , <section>, <article>, <aside> , et <footer>.
23. Pr . A. Zannou FST d’ Al-Hoceima
23
Structurer le contenu d’une page web
• Les sections
Les avantages sont évidents : le code source est plus clair, les différentes
parties composant un document sont clairement identifiées. En
accroissant la valeur sémantique, on augmente aussi les possibilités
d’analyse et d’indexation du contenu et de référencement.
24. Pr . A. Zannou FST d’ Al-Hoceima
24
Structurer le contenu d’une page web
• Introduction
Exemple:
<html>
<body>
<header>
<h3> Logo</h3>
<nav>
<ul>
<li> <a href="lien1.html"> Homme </a></li>
<li> <a href="lien2.html"> CV </a></li>
<li> <a href="lien3.html"> Contacte-nous </a></li>
</ul>
</nav>
</header>
<section>
<article> News 1 </article>
<article> News 2 </article>
</section>
<section>
<Article> Sport 1 </article>
<Article> sport 2 </article>
</section>
<aside>
<h3> Plus d'informations</h3>
</aside>
<footer>
<h3> Copyright</h3>
</footer>
</body >
</html>
25. Pr . A. Zannou FST d’ Al-Hoceima
25
Structurer le contenu d’une page web
• Elément <header>
Comme son nom le suggère, <header> correspond à un en‐tête de section. Il
peut s’agir de l’en‐tête d’introduction (d’un document, d’une autre section,
d’un article) pouvant contenir – selon le contexte –titres, navigation,
formulaire de recherche, table des matières, logo, etc.
26. Pr . A. Zannou FST d’ Al-Hoceima
26
Structurer le contenu d’une page web
• Elément <nav>
Les niveaux de navigation peuvent être multiples sur un site web ou une
application. Il peut s’agir de liens portant sur l’intégralité du site, sur une
sous‐partie de l’arborescence en particulier, vers des pages communes et
transversales, ou bien encore vers des sections du même document.
L’élément <nav> est un choix de prédilection pour la navigation principale
(souvent dans <header> ) et éventuellement pour les navigations annexes de
moindre valeur (souvent dans <footer>).
27. Pr . A. Zannou FST d’ Al-Hoceima
27
Structurer le contenu d’une page web
• Elément <section>
Élément fondamental de l’approche de découpe sémantique des documents,
<section> regroupe un contenu relatif à une même thématique ou une
même fonctionnalité.
Ses cas d’utilisation sont multiples, on peut l’envisager pour scinder un
document en plusieurs chapitres, pour découper un contenu présenté dans
différents onglets ou différentes vues, voire pour délimiter les thématiques
d’un élément <article>.
28. Pr . A. Zannou FST d’ Al-Hoceima
28
Structurer le contenu d’une page web
• Elément <article>
Section de contenu dans un document ou une application web, dont la
composition peut être indépendante du reste de la page et extraite
individuellement .
L’élément <article> est une spécialisation de <section>. Il possède une plus
forte valeur sémantique, et pour cela il faut le considérer comme une
portion de document qui se suffit à elle‐même, par exemple une entrée
distincte parmi d’autres (une actualité, une fiche d’informations, etc.). On
peut extraire son contenu sans que celui‐ci perde son sens .
29. Pr . A. Zannou FST d’ Al-Hoceima
29
Structurer le contenu d’une page web
• Elément <aside>
Une page web est bien souvent dotée d’un contenu principal et
d’informations connexes qui ne sont pas essentielles à sa compréhension. On
parle alors de contenu tangentiel, et l’élément <aside> est destiné à
l’abriter. Il ne s’agit pas simplement de le considérer comme une section
vouée à être rendue graphiquement à gauche ou à droite du contenu
principal, mais bien d’un point de vue sémantique comme une section
possédant une substance périphérique ou ampliative. On peut considérer
comme répondant à ces critères : une définition d’un des termes utilisés dans
le contenu, une biographie, un glossaire, une chronologie apportant un fond
historique, voire d’autres éclaircissements, astuces, notes, etc.
30. Pr . A. Zannou FST d’ Al-Hoceima
30
Structurer le contenu d’une page web
• Elément <footer>
Pied de page, de section ou d’article – selon son plus proche ancêtre – visant
à contenir les informations que l’on peut habituellement placer en fin de
section, telles que des mentions légales, des informations de contact ou les
sources d’une actualité, et éventuellement une navigation.
31. Pr . A. Zannou FST d’ Al-Hoceima
31
HTML propose plusieurs balises pour introduire des styles de mise en
forme.
Mettre en gras un texte : <B>, <STRONG>.
Mettre en italique un texte : <I>, <EM>.
Souligner un texte : <U>.
Sur-biller un texte : <MARK>.
Mettre en plus grand un texte : <BIG>.
Mettre en plus petit un texte : <SMALL>.
Mise en forme de texte
• Styles simples
<B> Texte en gras</B><BR/>
<STRONG> Texte en gras</STRONG><BR/>
<I> Texte en italique</I><BR/>
<EM> Texte en italique</EM><BR/>
<U> Texte souligné</U><BR>
<MARK> Sur-biller un texte</MARK><BR/>
<BIG> Mettre en plus grand un texte </BIG><BR/>
<SMALL> Mettre en plus petit un texte</SMALL><BR/>
32. Pr . A. Zannou FST d’ Al-Hoceima
32
Les balises <P>, <H1>, <H2>, .. supportent un attribut ALIGN qui permet
de modifier l'alignement horizontal du texte. Cet attribut peut prendre
les valeurs suivantes :
LEFT : aligné à gauche (par défaut).
RIGHT : aligné à droite.
CENTER : centré.
JUSTIFY : justifié (aligné à droite et à gauche).
Mise en forme de texte
• Alignement
<HTML>
<BODY>
<P ALIGN="CENTER"> Paragraphe centre</P><BR/>
<P ALIGN="RIGHT"> Paragraphe aligné à droite </P><BR/>
<P ALIGN="LEFT"> Paragraphe aligné à gauche</P><BR/>
</BODY >
</HTML>
La balise <CENTER> texte </CENTER> permet également de centrer un texte
33. Pr . A. Zannou FST d’ Al-Hoceima
33
Les balises <P>, <H1>, <H2>, .. supportent un attribut ALIGN qui permet
de modifier l'alignement horizontal du texte. Cet attribut peut prendre
les valeurs suivantes :
LEFT : aligné à gauche (par défaut).
RIGHT : aligné à droite.
CENTER : centré.
JUSTIFY : justifié (aligné à droite et à gauche).
Mise en forme de texte
• Alignement
<HTML>
<BODY>
<P ALIGN="CENTER"> Paragraphe centre</P><BR>
<P ALIGN="RIGHT"> Paragraphe aligné à droite </P><BR>
<P ALIGN="LEFT"> Paragraphe aligné à gauche</P><BR>
</BODY >
</HTML>
La balise <CENTER> texte </CENTER> permet également de centrer un texte
34. Pr . A. Zannou FST d’ Al-Hoceima
34
Il est possible de modifier la forme des caractères d'un texte avec la
balise <FONT>.
Utiliser <FONT> Mon texte </FONT> seul n'aura aucun effet. Ce sont les
attributs de cette balise qui sont intéressants :
SIZE : permet de préciser la taille du texte allant de "1" à "7".
FACE : permet de préciser la police utilisée (" CAMBRIA", "TIMES",...).
COLOR : précise la couleur du texte ("RED", "BLUE", "GREEN"…)
Mise en forme de texte
• Forme des caractères : exposant et indice
<HTML>
<BODY>
<P>
<FONT SIZE="5" FACE="CAMBRIA"
COLOR="GREEN"> Paragraphe avec la balise FONT
</FONT>
</P>
</BODY >
</HTML>
35. Pr . A. Zannou FST d’ Al-Hoceima
35
<SUP> : pour mettre un mot en exposant.
<SUB> : pour mettre un mot en indice
Mise en forme de texte
• Forme des caractères : exposant et indice
<HTML>
<BODY>
<P>
Résoudre l’équation x <SUP>2</SUP> =0
<BR>
Calculer x <SUB>2</SUB> <BR>
</P>
</BODY >
</HTML>
36. Pr . A. Zannou FST d’ Al-Hoceima
36
L’entité HTML (« non breaking space ») va nous permettre d’ajouter
une espace simple dit espace « insécable » ;
L’entité HTML   (« en space ») va nous permettre de créer une espace
double ;
L’entité HTML   (« em space ») va nous permettre de créer une espace
quadruple ;
L’entité HTML   (« thin space ») va nous permettre de créer un espace
très fin (demi-espace)
Mise en forme de texte
• Espaces
37. Pr . A. Zannou FST d’ Al-Hoceima
37
Mise en forme de texte
• Espaces
<HTML>
<BODY>
<P>
Espace simple: Bonjour à tous </BR>
Espace double: Bonjour   à tous </BR>
Espace quadruple: Bonjour   à tous </BR>
Espace très fin: Bonjour   à tous </BR>
</P>
</BODY >
</HTML>
38. Pr . A. Zannou FST d’ Al-Hoceima
38
Pour insérer un texte pré-formaté et l’afficher tel quel, on utilise la balise
<PRE>.
La balise <PRE> permet de restituer le texte dans le code source de la
même manière qu'il a été tapé : les espaces multiples, tabulations et sauts
de ligne avec la touche « Entrée » seront préservés.
Mise en forme de texte
• Texte pré-formaté
<HTML>
<BODY>
<PRE>
........................................
A B
........................................
C
........................................
</PRE>
</BODY >
</HTML>
39. Pr . A. Zannou FST d’ Al-Hoceima
39
La balise HR permet de faire une ligne horizontale.
align="..." : Contrôle l'alignement ( left, center, right, justify ).
noshade="..." : affiche la règle en couleur unie
size="..." : spécifie la taille de la règle.
width="..." : spécifie la largeur de la règle.
color="..." : spécifie la couleur de la règle.
Mise en forme de texte
• Les règles horizontales
<HTML>
<BODY>
<HR width="30%" size="2" align="left" ></HR></br>
<HR width="30%" size="2" align="left"
noshade></HR>
</BODY >
</HTML>
40. Pr . A. Zannou FST d’ Al-Hoceima
40
En, HTML, pour créer un lien hypertexte vers une autre page on utilise la
balise <A> (anchor en anglais = ancre en francais)
Pour indiquer vers quelle page le lien doit conduire, on spécifie l’URL de
la page à l’aide de l’attribut href (hypertext reference).
Les liens
• Création d’un lien
<HTML>
<BODY>
<P>
Site officiel de la <A
HREF="https://fsth.ma/"> FST </A> d'Al
hoceima.
<P>
</BODY >
</HTML>
Par défaut, le lien s'affiche en bleu souligné. Si la page est déjà visitée, le
lien s'affiche en violet souligné.
41. Pr . A. Zannou FST d’ Al-Hoceima
41
L'attribut TITLE=" ……" affiche une bulle d'aide lorsqu'on pointe sur le
lien.
Les liens
• Création d’un lien: TITLE
<HTML>
<BODY>
<P>
Site officiel de la <A HREF= "
www.fsth.com" TITLE="Faculté des
sciences et techniques d'Al Hoceima" > FST
</A> d'Al hoceima.
<P>
</BODY >
</HTML>
42. Pr . A. Zannou FST d’ Al-Hoceima
42
Une ancre : c’est un point de repère mis dans les pages HTML lorsqu'elles
sont très longues. Elle permet de faire un lien vers le bas dans la même
page.
Pour cela, il faut que l’ancre soit déjà créée. La valeur de HREF est :
HREF =#id-ancre. Une ancre est créée à l’aide de l’attribut id d’une balise.
Les liens
• Ancre
<HTML>
<BODY>
<A HREF="#ancre1"> Aller vers
l’ancre</A>
<P ID="ancre1" > Ce paragraphe
ancré</P>
</BODY >
</HTML>
43. Pr . A. Zannou FST d’ Al-Hoceima
43
Un lien pour envoyer un e-mail :
Il suffit de faire commencer le lien par MAILTO: suivi de l'adresse e-mail.
Un lien pour télécharger un fichier :
On procède exactement comme si on fait un lien vers une page web, mais
en indiquant cette fois le nom du fichier à télécharger.
Les liens
• E-mail à envoyer et télécharger un fichier
<HTML>
<BODY>
<P>
<A HREF="MAILTO: a.zannou@uae.ac.ma">
Envoyez-moi un e-mail</A><BR><BR>
<A HREF="lefichier.pdf">
Cliquez ici pour télécharger le fichier</A>
</P>
</BODY >
</HTML>
44. Pr . A. Zannou FST d’ Al-Hoceima
44
Pour insérer une image dans un document HTML on utilise la balise <IMG>.
La balise <IMG> doit être accompagnée de deux attributs obligatoires :
SRC : permet d'indiquer la source où se trouve l'image que l'on veut
insérer.
ALT : un texte alternatif qui décrit ce que contient l'image. Ce texte sera
affiché à la place de l'image si celle-ci ne peut pas être téléchargée.
Les images
• Insérer une image : SRC et ALT
<HTML>
<BODY>
<IMG SRC="image1.JPG" ALT=" Photo de
chat" />
</BODY >
</HTML>
45. Pr . A. Zannou FST d’ Al-Hoceima
45
L'attribut TITLE affiche une bulle d'aide lorsqu'on pointe sur l’image.
Cet attribut est facultatif (contrairement à l'attribut ALT).
L'attribut BORDER permet de spécifier la largeur de la bordure de l'image
(de 0 à n).
Les images
• Insérer une image: TITLE et BORDER
<HTML>
<BODY>
<IMG SRC="image1.JPG" ALT=" Photo de
chat" TITLE =" Ce que les chats pensent
de nous" />
</BODY >
</HTML>
46. Pr . A. Zannou FST d’ Al-Hoceima
46
Les attributs WIDTH et HEIGHT permettent de spécifier respectivement la
largeur et la hauteur de l'image.
Si ces attributs ne sont pas renseignés, le navigateur calculera lui même la
taille des images.
Les images
• Insérer une image: HEIGHT et WIDTH
<HTML>
<BODY>
<IMG SRC="image1.JPG" ALT=" Photo de
chat" TITLE =" Ce que les chats pensent
de nous" BORDER ="4" HEIGHT ="200"
WIDTH= " 500" />
</BODY >
</HTML>
47. Pr . A. Zannou FST d’ Al-Hoceima
47
le nom de l'image dans l'attribut SRC doit être identique au nom du fichier
image.
si l'image n'est pas situé dans le même répertoire, il faut préciser le chemin
pour y accéder : SRC="images/image1.jpg".
Il faut préciser l'extension du fichier image et respecter la casse des
caractères
Les images
• Insérer une image: HEIGHT et WIDTH
48. Pr . A. Zannou FST d’ Al-Hoceima
48
Les figures
• Ajout d’un gif
<HTML>
<Body>
<img src="cat.gif">
</BODY >
</HTML>
49. Pr . A. Zannou FST d’ Al-Hoceima
49
Une figure vient enrichir/illustrer le texte pour compléter les informations
de la page.
Une figure peut être de différents types :
Images
codes source
citations, …
Pour insérer une figure en HTML on utilise la balise <FIGURE>.
Pour ajouter une légende, on utilise la balise <FIGCAPTION> à l'intérieur de
la balise <FIGURE>.
Les figures
• FIGURE et FIGCAPTION
50. Pr . A. Zannou FST d’ Al-Hoceima
50
Les figures
• FIGURE et FIGCAPTION
<HTML>
<BODY>
<FIGURE>
<img src="image1.jpg" height ="200"
width= "500" />
<figcaption>
figure 1: image d'un chat
</figcaption>
</FIGURE>
</BODY >
</HTML>
51. Pr . A. Zannou FST d’ Al-Hoceima
51
La balise HTML <marquee> permet de faire défiler un texte/une image.
L'attribut HTML <behavior> de la balise HTML MARQUEE définit le type
de glissement peut prendre:
Slide
Alternate
Mise en forme de texte
• Défiler un texte
<HTML>
<BODY>
<marquee behavior="slid"> Texte défilant: slid</marquee>
<marquee behavior="alternate"> Texte défilant : alternate</marquee>
</BODY >
</HTML>
52. Pr . A. Zannou FST d’ Al-Hoceima
52
L'attribut DIRECTION de la balise MARQUEE définit le type de
glissement.<MARQUEE DIRECTION="left"> </MARQUEE>
Il peut prendre la valeur de :
right, défile vers la droite.
left, défile vers la gauche.
down, défile vers le bas.
up, défile vers le haut.
Mise en forme de texte
• Défiler un texte
53. Pr . A. Zannou FST d’ Al-Hoceima
53
La balise HTML <marquee> permet également de faire défiler des autres
formes: une image/ un flash/ une video/ un audio/ .
Exemple:
Défiler des autres formes
<HTML>
<BODY>
<marquee behavior="slid"> <img src="cat.jpg"></marquee>
</BODY >
</HTML>
54. Pr . A. Zannou FST d’ Al-Hoceima
54
Il y a aussi des autres attributs qui sont liés à la balise marque :loop,
scrollamount, bgcolor, height, width, vspace, hspace.
Exemple:
Défiler des autres formes
<html>
<body>
<marquee loop="2" scrollamount="10" behavior="slid" bgcolor="geen"
height="60px" width="500" direction="right" vspace="30px"
hspace="30px">
la forme
</marquee>
</body >
</html>
55. Pr . A. Zannou FST d’ Al-Hoceima
55
La balise <TABLE> permet de créer un TABLEAU.
La balise <TR> (table row) permet de créer une nouvelle ligne dans le
tableau.
Dans une ligne <TR> … </TR>, on crée des cellules grâce aux balises <TD>
(table data) .
Dans une cellule <TD> et </TD>, on met le contenu de la case (texte,
image...).
La balise <TD> peut être remplacée par <TH> (table head) si la case est un
intitulé de colonne.
Les tableaux
• Principe balises
57. Pr . A. Zannou FST d’ Al-Hoceima
57
Les tableaux
• Balise <TH>
<HTML>
<BODY>
<TABLE>
<TR>
<TH> Nom </TH>
<TH> Prénom </TH>
<TH> Note</TH>
</TR>
<TR>
<TH> mazin</TH>
<TH> mohamed</TH>
<TH> 12</TH>
</TR>
<TR>
<TH>sabi</TH>
<TH> karim </TH>
<TH> 13</TH>
</TR>
</TABLE>
</BODY >
</HTML>
Les balises <TH> (intitulés de colonne)
peuvent être placée n'importe où dans le
tableau.
58. Pr . A. Zannou FST d’ Al-Hoceima
58
Les tableaux
• Attribut BORDER
L'attribut BORDER de la balise <TABLE>
permet d’afficher les bordures des cellule.
<HTML>
<BODY>
<TABLE BORDER=“2”>
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
59. Pr . A. Zannou FST d’ Al-Hoceima
59
Les tableaux
• Attribut cellpadding
L'attribut cellpadding de la balise
<table> permet de modifier l'espacement
entre le texte et les bords des cellules.
<HTML>
<BODY>
<TABLE BORDER=“2”
CELLPADDING=“12”>
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
60. Pr . A. Zannou FST d’ Al-Hoceima
60
Les tableaux
• Attribut cellspacing
<HTML>
<BODY>
<TABLE BORDER=“2”
CELLSPACING=“12”>
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
L'attribut cellspacing de la balise
<table> permet de modifier l'espacement
entre cellules .
61. Pr . A. Zannou FST d’ Al-Hoceima
61
Les tableaux
• Attribut width
<HTML>
<BODY>
<TABLE BORDER="1" WIDTH="40%"
HEIGHT="30%">
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
L'attribut width de la balise <table>
permet de spécifier la largeur du tableau.
Cette valeur est indiquée en pixel
(width="400") ou en pourcentage
(width="100%").
62. Pr . A. Zannou FST d’ Al-Hoceima
62
Les tableaux
• Attribut width avec td et th
L'attribut width de la balise <td> ou <th> permet de spécifier la
largeur de la cellule.
La largeur peut être spécifiée en pixel (width="100") ou en %
(width="33%").
Si on utilise des pourcentages, le total doit être égal à 100%
Si on utilise des pixels, le total ne doit pas dépasser la largeur du tableau.
63. Pr . A. Zannou FST d’ Al-Hoceima
63
Les tableaux
• Attribut width avec td et th
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TD WIDTH="10%"> Nom </TD>
<TD WIDTH=“20%"> Prénom </TD>
<TD WIDTH=“70%"> Note</TD>
</TR>
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
Il n'est pas utile de préciser la
largeur de chaque cellule. On
donne la largeur de la 1ère cellule
d'une colonne, et celle ci sera
valable pour toute la colonne.
65. Pr . A. Zannou FST d’ Al-Hoceima
65
Les tableaux
• Attributs pour les cellules td et th : align
L'attribut align permet de préciser l'alignement horizontal du texte
d’une cellule.
align peut prendre les valeurs suivantes :
left (texte aligné à gauche).
center (texte aligné au centre).
right (texte aligné à droite).
justify (texte justifié, peut utilisé sur le web car pas bien rendu).
67. Pr . A. Zannou FST d’ Al-Hoceima
67
Les tableaux
• Attributs pour les cellules td et th : valign
L'attribut valign permet de préciser l'alignement vertical du texte d’une
cellule.
valign peut prendre les valeurs suivantes :
top (texte aligné en haut)
middle (texte aligné au milieu)
bottom (texte aligné en bas)
68. Pr . A. Zannou FST d’ Al-Hoceima
68
Les tableaux
• Attributs pour les cellules td et th : valign
<HTML>
<BODY>
<TABLE BORDER="1" WIDTH="30%"
HEIGHT="30%">
<TR>
<TD VALIGN="top"> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD VALIGN="Middle"> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD VALIGN="bottom">sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
69. Pr . A. Zannou FST d’ Al-Hoceima
69
Les tableaux
• Fusion de colonnes
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%">
<TR>
<TD Nom </TD>
<TD > Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD COLSPAN="2"> mazin</TD>
<TD> mohamed</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
L'attribut colspan de la balise <td>
permet de fusionner un nombre de
colonnes.
colspan prend comme valeur le
nombre de colonnes à fusionner
70. Pr . A. Zannou FST d’ Al-Hoceima
70
Les tableaux
• Fusion de colonnes
<HTML>
<BODY>
<TABLE BORDER="1" WIDTH="50%" >
<TR>
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Note</TD>
</TR>
<TR>
<TD rowspan="2"> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
L'attribut rowspan de la balise <td>
permet de fusionner un nombre de
lignes.
rowspan prend comme valeur le
nombre de lignes à fusionner
71. Pr . A. Zannou FST d’ Al-Hoceima
71
Les tableaux
• Couleurs
Principaux attributs de mise en forme d’un tableau et des cellules:
Couleur du fond du tableau <TABLE BGCOLOR="GREEN"">
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%“
BGCOLOR="GREEN">
<TR>
<TD> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD> karim </TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>
75. Pr . A. Zannou FST d’ Al-Hoceima
75
Les formulaires
• Présentation
Un formulaire HTML permet de saisir et de transmettre des informations. Il est
composé d'un ou plusieurs éléments.
Les éléments d’un formulaire peuvent être des zones de texte, des boîtes à
sélection, des cases à cocher, des boutons radio, fichiers, date, heure, …
76. Pr . A. Zannou FST d’ Al-Hoceima
76
Les formulaires
• Créer un formulaire : <FORM>
Un formulaire est déclaré grâce à la balise <form> dont on précisera
généralement trois attributs :
name : nom du formulaire
action : chemin vers la page ou les données du formulaire seront envoyées
(script php, script asp …).
method : la méthode d'envoi des données qui est soit "POST" soit "GET".
<html>
<body>
<form
name="questionnaire" action="page_envoi.html"
method=“post">
</form>
</body >
</html>
77. Pr . A. Zannou FST d’ Al-Hoceima
77
Les formulaires
• Champs de saisie : <INPUT> : champ de texte
Un champ de texte est inséré grâce à la balise <input> en précisant les
attributs :
type="texte ": précise qu’il s’agit d’un champ de texte.
name : permet de spécifier le nom de la variable qui sera envoyée.
value : permet de spécifier une valeur par défaut (valeur avec laquelle le
champ sera affiché pré-rempli).
78. Pr . A. Zannou FST d’ Al-Hoceima
78
Les formulaires
• Champs de saisie : <INPUT> : champ de texte
<html>
<body>
<h2>Une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html"
method=“post">
saisir votre nom : <input type="text" name="le_prenom" value="">
</form>
</body >
</html>
79. Pr . A. Zannou FST d’ Al-Hoceima
79
Les formulaires
• Champs de saisie : <INPUT> : champ de mot de passe
Un champ de mot de passe est inséré avec la balise <input> en précisant les
attributs:
type="password": précise qu’il s’agit d’un champ de mot de passe.
name : permet de spécifier le nom de la variable qui sera envoyée.
value : permet de spécifier une valeur par défaut (valeur avec laquelle le
champ sera affiché pré-rempli).
80. Pr . A. Zannou FST d’ Al-Hoceima
80
Les formulaires
• Champs de saisie : <INPUT>: champ de mot de passe
<html>
<body>
<h2>Une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html" method=“post">
saisir votre mot de passe: <input type="password" name="mot_passe" value="">
</form>
</body >
</html>
81. Pr . A. Zannou FST d’ Al-Hoceima
81
Les formulaires
• Champs de saisie : <INPUT> : Bouton d’envoi
Bouton d'envoi : inséré grâce à la balise <input> en précisant les attributs :
type="submit": pour un bouton d’envoi .
value : pour spécifier le texte qui sera affiché sur le bouton.
Lors du clique sur ce bouton, les données du formulaires seront envoyées à la
page précisée par l'attribut action du formulaire
83. Pr . A. Zannou FST d’ Al-Hoceima
83
Les formulaires
• Champs de saisie : <INPUT> : case à cocher
Une case à cocher est insérée grâce à la balise <input> en précisant les attributs :
type="checkbox" : précise qu’il s’agit d’une case à cocher.
name : permet de spécifier le nom de la variable qui sera envoyée.
value : permet de spécifier la valeur qui sera envoyée si la case est cochée
On peut afficher une case pré-cochée en précisant l’attribut checked="checked".
84. Pr . A. Zannou FST d’ Al-Hoceima
84
Les formulaires
• Champs de saisie : <INPUT>: case à cocher
<html>
<body>
<h2>une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html" method=“post">
cocher qualité de produit<br/>
<input type="checkbox" name="choix_qualié" value="">bien
<input type="checkbox" name="choix_qualié" value="">mouvais
</form>
</body >
</html>
85. Pr . A. Zannou FST d’ Al-Hoceima
85
Les formulaires
• Champs de saisie : <INPUT>: case à cocher
<html>
<body>
<h2>Une questionnaire <h2>
<form
cocher qualité de produit<br/>
<input type="checkbox" name="choix_qualié" value="“ checked="checked">bien
<input type="checkbox" name="choix_qualié" value="“ checked="checked" > mouvais
</form>
</body >
</html>
86. Pr . A. Zannou FST d’ Al-Hoceima
86
Les formulaires
• Champs de saisie : <INPUT> : Bouton radio
Une bouton radio est inséré grâce à la balise <input> en précisant les attributs :
type="radio": précise qu’il s’agit d’un bouton radio.
name : permet de spécifier le nom de la variable qui sera envoyée.
value : permet de spécifier la valeur à envoyer si l'option est sélectionnée.
NB: Les boutons radios n'autorisent qu'un seul choix (les checkbox permettent de
cocher plusieurs cases).
On peut afficher un bouton radio pré-coché en précisant l’attribut
checked="checked"
87. Pr . A. Zannou FST d’ Al-Hoceima
87
Les formulaires
• Champs de saisie : <INPUT>: Bouton radio
<html>
<body>
<h2>Une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html" method="get">
cocher qualité de produit<br/>
<input type=“radio" name="choix_qualié" value="“ checked="checked">bien
<input type=“radio" name="choix_qualié" value="“ checked="checked" > mouvais
</form>
</body >
</html>
88. Pr . A. Zannou FST d’ Al-Hoceima
88
Les formulaires
• Champs de saisie : <INPUT> : Date
Les éléments <input> dont l'attribut type vaut date permettent de créer des
champs permettant de saisir des dates (composées d'une année, d'un mois et d'un
jour mais pas d'une heure.
<html>
<body>
<h2>Une questionnaire <h2>
<form name="questionnaire"
action="page_envoi.html" method="post">
date de naissance
<input type="date" name="date_na">
</body >
</html>
89. Pr . A. Zannou FST d’ Al-Hoceima
89
Les formulaires
• Champs de saisie : <INPUT> : Time
Les éléments <input> dont l'attribut type vaut time permettent de créer des
contrôles où l'utilisateur peut saisir une heure.
<html>
<body>
<h2>une questionnaire <h2>
<form
name="questionnaire« action="page_envoi.html"
method="post">
Heure: <input type="time" name=="heure_p">
</body >
</html>
90. Pr . A. Zannou FST d’ Al-Hoceima
90
Les formulaires
• Champs de saisie : <INPUT> : Bouton d’annulation (reset)
Bouton d'annulation (reset) : inséré grâce à la balise <input> en précisant les
attributs :
type="reset": pour un bouton reset.
value : pour spécifier le texte qui sera affiché sur le bouton
92. Pr . A. Zannou FST d’ Al-Hoceima
92
Les formulaires
• Champs de saisie : <INPUT> : Bouton simple
Bouton simple : inséré grâce à la balise <input> en précisant les attributs :
type="botton": pour un bouton simple.
value : permet de spécifier le texte qui sera affiché sur le bouton.
On peut attribuer à ce type de bouton une action avec une commande
JavaScript
94. Pr . A. Zannou FST d’ Al-Hoceima
94
Les formulaires
• Champs de texte : <TEXTAREA>
Un champs texte est une «zone de texte» sur plusieurs lignes.
Un champ texte est insérée grâce à la balise <TEXTAREA> en précisant les
attributs :
name : spécifie le nom de la variable qui sera envoyée.
rows : permet de préciser le nombre de lignes de la zone de texte.
cols : permet de préciser le nombre de caractère par ligne de la zone de texte.
Le texte placé entre les balises <textarea> et </textarea> permet de spécifier
une valeur par défaut (valeur avec laquelle le champ sera affiché pré-rempli)
96. Pr . A. Zannou FST d’ Al-Hoceima
96
Les formulaires
• Champs de sélection (liste déroulante ): <select>
Les champs de sélection permettent de proposer une liste déroulante de choix.
Un champ de sélection est inséré grâce à la balise <select> en précisant
l’attribut name permettant de spécifier le nom de la variable qui sera envoyée.
La balise <select> doit contenir autant de couple <option> et </option> que
nous avons de choix dans la liste déroulante .
Pour chaque balise <option>, nous précisons :
L’attribut value : qui précise le nom de la variable qui sera envoyée.
Le texte : qui sera affiché pour l'utilisateur (placé entre <option> et </option>).
L’attribut selected="selected" : qui affiche le champ présélectionnée
97. Pr . A. Zannou FST d’ Al-Hoceima
97
Les formulaires
• Champs de sélection (liste déroulante ): <select>
<html>
<body>
<br/><br/>
choisir votre ville
<select name="ville">
<option value="hoc">
hoceima</option>
<option value="nad">
nador</option>
<option value="rab">
rabat</option>
</select>
</body >
</html>
98. Pr . A. Zannou FST d’ Al-Hoceima
98
Les formulaires
• Autres valeurs pout le Type - autres attributs
Il y a des autres valeurs pour l’attribut type comme: email, number, file, etc.
On peut spécifier aussi autres attributs come: size, checked, min, max,
maxlength, multiple, etc.
On peut aussi utiliser la balise <label> un texte </label> pour les textes des
inputs.
99. Pr . A. Zannou FST d’ Al-Hoceima
99
Les formulaires
• Regrouper les éléments du formulaire : <fieldset>
La balise <fieldset> permet de regrouper plusieurs éléments d’un formulaire.
<fieldset> créé un contour autour des balises du formulaire qu'elle regroupe.
La balise <legend> (placée dans la balise <fieldset>) permet d’ajouter une
légende décrivant le groupe d’éléments du formulaire
<html>
<body>
<fieldset>
<legend> identification</legend>
</fieldset>
</body >
</html>
100. Pr . A. Zannou FST d’ Al-Hoceima
100
Les frames
• Présentation
Avec le langage HTML, il es possible de diviser une fenêtre en cadres ou
plusieurs zones appelées frames (cadres).
Grâce aux frames (cadres), il est possible d'afficher plusieurs pages HTML,
chacune dans un frame (zone ou cadre) différent.
101. Pr . A. Zannou FST d’ Al-Hoceima
101
Les frames
• Créer des frames
La balise <frameset> permet de définir le nombre de frames et leurs
dimensions.
Les deux principaux attributs sont :
rows="H1,H2,...Hn" : permet de créer des frames horizontales
cols="L1,L2,...Ln" : permet de créer des frames verticales.
102. Pr . A. Zannou FST d’ Al-Hoceima
102
Les formes
• Créer des frames
<html>
<frameset rows="20%, 30%, 50%">
<frame>
<frame>
<frame>
</frameset>
</html>
<html>
<frameset cols="20%, 30%, 50%">
<frame>
<frame>
<frame>
<frameset>
</html>
103. Pr . A. Zannou FST d’ Al-Hoceima
103
Les formes
• Créer des frames
Les balises <frameset> peuvent être imbriquées
<html>
<frameset rows="20%,70%">
<frame>
<frameset cols="30%,70%">
<frame>
<frame>
</frameset>
</frameset>
</html>
104. Pr . A. Zannou FST d’ Al-Hoceima
104
Les formes
• Créer des frames
Pour ajouter le contenu de chacun des cadres, la balise <frame> doit
contenir les deux attributs :
src=url : pour indiquer le fichier à placer dans la zone.
name : le nom de la zone
105. Pr . A. Zannou FST d’ Al-Hoceima
105
Les formes
• Créer des frames
<html>
<body>
<frameset rows="20%,70%">
<frame src="chapitre 2_essai20.html" name="framea">
<frameset cols="30%,70%">
<frame src="chapitre 2_essai7.html" name="frameb">
<frame src="chapitre 2_essai23.html" name="framec">
</frameset>
</frameset>
</body>
</html>
106. Pr . A. Zannou FST d’ Al-Hoceima
106
<iframe> : l'élément de cadre intégré
L'élément HTML <iframe> représente un contexte de navigation imbriqué qui
permet en fait d'obtenir une page HTML intégrée dans la page courante.
Exemple: intégrer une page web
<html>
<body>
Vous êtes sur la page d'accueil
<iframe src="https://fsth.ma/"
width="100%" height="60%" >
</iframe>
</body >
</html>
107. Pr . A. Zannou FST d’ Al-Hoceima
107
<iframe> : l'élément de cadre intégré
Exemple: intégrer une vidéo de Youtube
<HTML>
<Body>
Vous êtes sur la page d'accueil
<iframe width="560" height="315"
src="https://www.youtube.com/embed/Z-
pT0XDYvDM"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</BODY >
</HTML>
108. Pr . A. Zannou FST d’ Al-Hoceima
108
<iframe> : l'élément de cadre intégré
Exemple: intégrer de google map
<HTML>
<Body>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3
!1d2789.942740016715!2d-
3.8658833410883586!3d35.17400160863369!2m3!1f0!2f0!3f0!3
m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd742cdfd0bf6e4f%3A0x5e
bd9a70303984f3!2sFacult%C3%A9%20des%20Sciences%20et%2
0Techniques%20d'Al%20Hoceima!5e1!3m2!1sfr!2sma!4v16
45138468991!5m2!1sfr!2sma" width="400" height="300"
style="border:0;" allowfullscreen="" loading="lazy" ></iframe>
</BODY >
</HTML>
109. Pr . A. Zannou FST d’ Al-Hoceima
109
Multimédia
• Audio et vidéo
Le HTML5 a apporté son lot de nouveautés, notamment au niveau du contenu
multimédia.
En effet, avant, il était bien souvent nécessaire de faire appel à des
conteneurs lourds comme Flash.
Dorénavant, des balises dédiées à ces usages ont été introduites :
<audio> Pour les contenus audio uniquement.
<video> Pour les contenus audio ET vidéo ;
110. Pr . A. Zannou FST d’ Al-Hoceima
110
Multimédia
• Audio et vidéo
<HTML>
<BODY>
<audio controls=“controls”>
<source src="audio1.mp3“ >
</audio>
</BODY>
</HTML>
<HTML>
<BODY>
<video controls=“controls” width="400" height="200" >
<source src=“video1.mp4“ >
</video >
</BODY>
</HTML>
controls : Affichage des contrôles. La présence de l’attribut controls affiche les
contrôles natifs du navigateur (lancement de la lecture, arrêt, progression,
volume, etc.)
width, height : Dimensions. Spécifie les dimensions d’affichage de la zone
vidéo.
111. Pr . A. Zannou FST d’ Al-Hoceima
111
Multimédia
• Audio et vidéo
<HTML>
<BODY>
<audio controls=“controls” autoplay="autoplay" >
<source src="audio1.mp3“ >
</audio>
</BODY>
</HTML>
<HTML>
<BODY>
<video width="400" height="200" controls=“controls”
autoplay="autoplay" >
<source src=“video1.mp4“ >
</video >
</BODY>
</HTML>
autoplay : Lecture automatique. Active la lecture dès le
chargement de la page.
113. Pr . A. Zannou FST d’ Al-Hoceima
113
Multimédia
• Audio et vidéo
<html>
<body>
<video width="400" height="200"
controls=“controls” loop=“loop”
poster=“image1.jpg”>
<source src=“video1.mp4“ >
</video >
</body>
</html>
loop : Lecture en boucle. Active la lecture en boucle.
poster: Aperçu par défaut. Indique l’adresse de l’image d’aperçu à charger
pour occuper la zone d’affichage lorsque la vidéo n’est pas jouée.
114. Pr . A. Zannou FST d’ Al-Hoceima
114
Intégration du document utilisant la balise <embed>
Exemple: intégrer un document pdf dans une page Web
<HTML>
<Body>
Intégrer un document PDF dans une page web !!
<br><br>
<embed src="html_partie2.pdf" width="30%"
height="40%"> </embed> <br/> <br/>
<a href="html_partie2.pdf"> Télécharger le
docuement</a>
</BODY >
</HTML>
115. Pr . A. Zannou FST d’ Al-Hoceima
115
Carte cliquable
Un élément <map> est utilisé en conjonction avec une image <img> pour
concevoir une carte cliquable appliquée sur celle‐ci.
Le résultat consiste en des zones distinctes et transparentes, de formes
variées, équipées de liens.
En anglais, on emploie plus couramment le terme d’image map. L’attribut
name est requis pour cet élément, car il permet de l’associer à l’élément
image <img> via son attribut usemap .
L'attribut coords spécifie les coordonnées d'une zone dans une image
cliquable.
L ’attribut shape spécifie le placement d'une zone.
116. Pr . A. Zannou FST d’ Al-Hoceima
116
Carte cliquable
• Valeurs d’attribut: coords
Valeur description
Coords="x1,y1,x2,y2" Spécifie les coordonnées des coins supérieur
gauche et inférieur droit du rectangle
(shape="rect").
Coords="x,y,rayon" Spécifie les coordonnées du centre du cercle et
le rayon (shape="circle").
Coords="x1,y1,x2,y2,..,xn,yn" Spécifie les coordonnées des bords du polygone.
Si les première et dernière paires de
coordonnées ne sont pas identiques, le
navigateur ajoutera la dernière paire de
coordonnées pour fermer le polygone
(shape="poly").
117. Pr . A. Zannou FST d’ Al-Hoceima
117
Carte cliquable
Exemple : intégrer une carte cliquable (code source)
<html>
<body>
<img src="mon_image.jpg" usemap="#nom_image">
<map name="nom_image">
<area shape="rect" coords="100,50,350,200" href=“autre1.html">
<area shape="circle“ coords="400,50,50" href="https://fsth.ma/">
<area shape="poly" coords="380,150,430,150,380,200,430“
href=“autre2.html">
</map>
</body >
</html>
118. Pr . A. Zannou FST d’ Al-Hoceima
118
Carte cliquable
Exemple : intégrer une carte cliquable (affichage)