Chapitre 1_HTML_complet_version1.pdf

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
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
• 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
 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
 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
 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.
• Editeur de création d’une page Web

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
• 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
• 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
• 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
• À 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
 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
 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
 Il existe six niveaux de titres de différentes tailles:
 <H1> …</H1> : Titre de niveau 1
Organisation d’un texte
• Titres
<HTML>
<BODY>
<H1>Titre de niveau 1</H1>
</BODY >
</HTML>

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> ).
• Paragraphes et simples sauts de ligne

16
• 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
 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 
• Indentations et commentaires

18
• Indentations et commentaires
<HTML>
<BODY>

</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
 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>.
• 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
 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>.
• 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
 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é
• Liste : attribut TYPE

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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
 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
 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).
• 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
 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).
• 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
 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"…)
• 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
 <SUP> : pour mettre un mot en exposant.
 <SUB> : pour mettre un mot en indice
• 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
 L’entité HTML   (« non breaking space ») va nous permettre d’ajouter
une espace simple dit espace « insécable » ;
 L’entité HTML &ensp; (« en space ») va nous permettre de créer une espace
double ;
 L’entité HTML &emsp; (« 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)
• Espaces

37
• Espaces
<HTML>
<BODY>
<P>
Espace simple: Bonjour   à tous </BR>
Espace double: Bonjour &ensp; à tous </BR>
Espace quadruple: Bonjour &emsp; à tous </BR>
Espace très fin: Bonjour   à tous </BR>
</P>
</BODY >
</HTML>

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.
• Texte pré-formaté
<HTML>
<BODY>
<PRE>
........................................
A B
........................................
C
........................................
</PRE>
</BODY >
</HTML>

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.
• 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
 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
 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
 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
 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
 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
 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>
chat" TITLE =" Ce que les chats pensent
de nous" />
</BODY >
</HTML>

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>
chat" TITLE =" Ce que les chats pensent
de nous" BORDER ="4" HEIGHT ="200"
WIDTH= " 500" />
</BODY >
</HTML>

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
Les figures
• Ajout d’un gif
<HTML>
<Body>
<img src="cat.gif">
</BODY >
</HTML>

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
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
 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
• 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
 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.
• Défiler un texte

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
 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
 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

56
Les tableaux
• Balise <TD>
<HTML>
<BODY>
<TABLE>
<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>

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
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
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
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
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
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
Les tableaux
<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.

64
Les tableaux
<HTML>
<BODY>
<TABLE BORDER="1">
<TR>
<TH WIDTH="10%"> Nom </TH>
<TH WIDTH=“20%"> Prénom </TH>
<TH WIDTH=“70%"> 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>

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).

66
Les tableaux
• Attributs pour les cellules td et th : align
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%">
<TR>
<TD WIDTH="10%“ ALIGN="CENTER"> Nom
</TD>
<TD WIDTH=“20%“ ALIGN=“RIGHT"> Prénom
</TD>
<TD WIDTH=“70%“ ALIGN=“LEFT"> 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>

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
Les tableaux
• Attributs pour les cellules td et th : valign
<HTML>
<BODY>
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
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
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
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>

72
Les tableaux
• Couleurs
 Couleur du fond des cellules <TR BGCOLOR=“GREEN"">
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%“>
<TR BGCOLOR="GREEN">
<TD > mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD BGCOLOR="GREEN"> karim
</TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>

73
Les tableaux
• Couleurs
 Couleur du fond d’une cellule <TD BGCOLOR=“GREEN"">
<HTML>
<BODY>
<TABLE BORDER="1“ WIDTH="50%“>
<TR>
<TD BGCOLOR="GREEN"> mazin</TD>
<TD> mohamed</TD>
<TD> 12</TD>
</TR>
<TR>
<TD>sabi</TD>
<TD BGCOLOR="GREEN"> karim
</TD>
<TD> 13</TD>
</TR>
</TABLE>
</BODY >
</HTML>

74
Les tableaux
• Couleurs
 Couleur de la bordure (quadrillage) <TABLE BORDERCOLOR=“GREEN"">
<HTML>
<BODY>
BORDERCOLOR="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
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
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
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
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
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.
 value : permet de spécifier une valeur par défaut (valeur avec laquelle le
champ sera affiché pré-rempli).

80
Les formulaires
• Champs de saisie : <INPUT>: champ de mot de passe
<html>
<body>
<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
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

82
Les formulaires
• Champs de saisie : <INPUT> Bouton d’envoi
<html>
<body>
cocher qualité de produit<br/>
<input type=“submit" value= " cliquez">
</form>
</body >
</html>

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.
 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
Les formulaires
• Champs de saisie : <INPUT>: case à cocher
<html>
<body>
<h2>une questionnaire <h2>
<input type="checkbox" name="choix_qualié" value="">bien
<input type="checkbox" name="choix_qualié" value="">mouvais
</form>
</body >
</html>

85
Les formulaires
• Champs de saisie : <INPUT>: case à cocher
<html>
<body>
<form
<input type="checkbox" name="choix_qualié" value="“ checked="checked">bien
<input type="checkbox" name="choix_qualié" value="“ checked="checked" > mouvais
</form>
</body >
</html>

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.
 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
Les formulaires
• Champs de saisie : <INPUT>: Bouton radio
<html>
<body>
<form name="questionnaire" action="page_envoi.html" method="get">
<input type=“radio" name="choix_qualié" value="“ checked="checked">bien
<input type=“radio" name="choix_qualié" value="“ checked="checked" > mouvais
</form>
</body >
</html>

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>
<form name="questionnaire"
action="page_envoi.html" method="post">
date de naissance
<input type="date" name="date_na">
</body >
</html>

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>
<form
name="questionnaire« action="page_envoi.html"
method="post">
Heure: <input type="time" name=="heure_p">
</body >
</html>

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

91
Les formulaires
• Champs de saisie : <INPUT>: Bouton d’annulation (reset)
<html>
<body>
method=“post">
<input type= " reset" value= " annuler">
</form>
</body >
</html>

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

93
Les formulaires
<html>
<body>
method=“post">
<input type=“button" value=“Déja inscrit“">
</form>
</body >
</html>

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)

95
Les formulaires
<html>
<body>
envoyer votre message/>
<textarea name="msg" rows="4" cols="20"> écrire ici</textarea>
</form>
</body >
</html>

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
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
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
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
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
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
Les formes
<html>
<frameset rows="20%, 30%, 50%">
<frame>
<frame>
<frame>
</frameset>
</html>
<html>
<frameset cols="20%, 30%, 50%">
<frame>
<frame>
<frame>
<frameset>
</html>

103
Les formes
 Les balises <frameset> peuvent être imbriquées
<html>
<frameset rows="20%,70%">
<frame>
<frameset cols="30%,70%">
<frame>
<frame>
</frameset>
</frameset>
</html>

104
Les formes
 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
Les formes
<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
<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
 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
 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
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
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
Multimédia
• Audio et vidéo
<HTML>
<BODY>
<audio controls=“controls” autoplay="autoplay" >
</audio>
</BODY>
</HTML>
<HTML>
<BODY>
<video width="400" height="200" controls=“controls”
autoplay="autoplay" >
</video >
</BODY>
</HTML>
 autoplay : Lecture automatique. Active la lecture dès le
chargement de la page.

112
Multimédia
• Audio et vidéo
<HTML>
<BODY>
<audio controls=“controls” autoplay="autoplay"
muted=“muted”>
</audio>
</BODY>
</HTML>
<HTML>
<BODY>
<video width="400" height="200" controls=“controls”
autoplay="autoplay" muted=“muted”>
</video >
</BODY>
</HTML>
 muted : Silencieux. Active le mode silencieux (volume nul).

113
Multimédia
• Audio et vidéo
<html>
<body>
<video width="400" height="200"
controls=“controls” loop=“loop”
poster=“image1.jpg”>
</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
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
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
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
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
Carte cliquable
 Exemple : intégrer une carte cliquable (affichage)

Chapitre 1_HTML_complet_version1.pdf

Contenu connexe

Similaire à Chapitre 1_HTML_complet_version1.pdf

Chapitre 1_HTML_complet_version1.pdf