SlideShare une entreprise Scribd logo
1  sur  118
Télécharger pour lire hors ligne
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
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.
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.
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 !
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.
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
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.
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.).
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.
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>
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.
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.
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.
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>
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
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.
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
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.
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>
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>
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
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>.
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.
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>
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.
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>).
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>.
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 .
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.
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.
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/>
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
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
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>
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>
Pr . A. Zannou FST d’ Al-Hoceima
36
 L’entité HTML &nbsp; (« 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 &thinsp; (« thin space ») va nous permettre de créer un espace
très fin (demi-espace)
Mise en forme de texte
• Espaces
Pr . A. Zannou FST d’ Al-Hoceima
37
Mise en forme de texte
• Espaces
<HTML>
<BODY>
<P>
Espace simple: Bonjour &nbsp; à tous </BR>
Espace double: Bonjour &ensp; à tous </BR>
Espace quadruple: Bonjour &emsp; à tous </BR>
Espace très fin: Bonjour &thinsp; à tous </BR>
</P>
</BODY >
</HTML>
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>
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>
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é.
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>
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>
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>
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>
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>
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>
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
Pr . A. Zannou FST d’ Al-Hoceima
48
Les figures
• Ajout d’un gif
<HTML>
<Body>
<img src="cat.gif">
</BODY >
</HTML>
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
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>
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>
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
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>
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>
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
Pr . A. Zannou FST d’ Al-Hoceima
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>
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.
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>
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>
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 .
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%").
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.
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.
Pr . A. Zannou FST d’ Al-Hoceima
64
Les tableaux
• Attribut width avec td et th
<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>
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).
Pr . A. Zannou FST d’ Al-Hoceima
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>
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)
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>
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
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
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>
Pr . A. Zannou FST d’ Al-Hoceima
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>
Pr . A. Zannou FST d’ Al-Hoceima
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>
Pr . A. Zannou FST d’ Al-Hoceima
74
Les tableaux
• Couleurs
 Couleur de la bordure (quadrillage) <TABLE BORDERCOLOR=“GREEN"">
<HTML>
<BODY>
<TABLE BORDER="1" WIDTH="50%"
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>
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, …
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>
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).
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>
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).
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>
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
Pr . A. Zannou FST d’ Al-Hoceima
82
Les formulaires
• Champs de saisie : <INPUT> Bouton d’envoi
<html>
<body>
<h2>Une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html" method=“post">
cocher qualité de produit<br/>
<input type=“submit" value= " cliquez">
</form>
</body >
</html>
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".
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>
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>
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"
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>
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>
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>
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
Pr . A. Zannou FST d’ Al-Hoceima
91
Les formulaires
• Champs de saisie : <INPUT>: Bouton d’annulation (reset)
<html>
<body>
<h2>une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html"
method=“post">
cocher qualité de produit<br/>
<input type= " reset" value= " annuler">
</form>
</body >
</html>
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
Pr . A. Zannou FST d’ Al-Hoceima
93
Les formulaires
• Champs de saisie : <INPUT> : Bouton simple
<html>
<body>
<h2>Une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html"
method=“post">
<input type=“button" value=“Déja inscrit“">
</form>
</body >
</html>
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)
Pr . A. Zannou FST d’ Al-Hoceima
95
Les formulaires
• Champs de saisie : <INPUT> : Bouton simple
<html>
<body>
<h2>Une questionnaire <h2>
<form name="questionnaire" action="page_envoi.html" method=“post">
envoyer votre message/>
<textarea name="msg" rows="4" cols="20"> écrire ici</textarea>
</form>
</body >
</html>
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
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>
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.
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>
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.
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.
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>
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>
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
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>
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>
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>
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&#39;Al%20Hoceima!5e1!3m2!1sfr!2sma!4v16
45138468991!5m2!1sfr!2sma" width="400" height="300"
style="border:0;" allowfullscreen="" loading="lazy" ></iframe>
</BODY >
</HTML>
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 ;
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.
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.
Pr . A. Zannou FST d’ Al-Hoceima
112
Multimédia
• Audio et vidéo
<HTML>
<BODY>
<audio controls=“controls” autoplay="autoplay"
muted=“muted”>
<source src="audio1.mp3“ >
</audio>
</BODY>
</HTML>
<HTML>
<BODY>
<video width="400" height="200" controls=“controls”
autoplay="autoplay" muted=“muted”>
<source src=“video1.mp4“ >
</video >
</BODY>
</HTML>
 muted : Silencieux. Active le mode silencieux (volume nul).
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.
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>
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.
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").
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>
Pr . A. Zannou FST d’ Al-Hoceima
118
Carte cliquable
 Exemple : intégrer une carte cliquable (affichage)

Contenu connexe

Similaire à Chapitre 1_HTML_complet_version1.pdf

Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfAnouAr42
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies webIrinaTsimpilova1
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocpriscilla_mommessin
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoccdi-0450786k
 
UElibre_Internet.pdf
UElibre_Internet.pdfUElibre_Internet.pdf
UElibre_Internet.pdfAliELKSIMI1
 
UElibre_Internet.ppt
UElibre_Internet.pptUElibre_Internet.ppt
UElibre_Internet.pptshikaneza
 
Outils de publication pour e-sidoc
Outils de publication pour e-sidocOutils de publication pour e-sidoc
Outils de publication pour e-sidocStéphanie Tricard
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du WebPatrick Vincent
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Fnot
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation webMOHAMMED MOURADI
 

Similaire à Chapitre 1_HTML_complet_version1.pdf (20)

Chapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdfChapitre 1 - Introduction générale.pdf
Chapitre 1 - Introduction générale.pdf
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutes
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
XHL8
XHL8XHL8
XHL8
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
UElibre_Internet.pdf
UElibre_Internet.pdfUElibre_Internet.pdf
UElibre_Internet.pdf
 
UElibre_Internet.ppt
UElibre_Internet.pptUElibre_Internet.ppt
UElibre_Internet.ppt
 
UElibre_Internet.ppt
UElibre_Internet.pptUElibre_Internet.ppt
UElibre_Internet.ppt
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Outils de publication pour e-sidoc
Outils de publication pour e-sidocOutils de publication pour e-sidoc
Outils de publication pour e-sidoc
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 

Chapitre 1_HTML_complet_version1.pdf

  • 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 &nbsp; (« 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 &thinsp; (« 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 &nbsp; à tous </BR> Espace double: Bonjour &ensp; à tous </BR> Espace quadruple: Bonjour &emsp; à tous </BR> Espace très fin: Bonjour &thinsp; à 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
  • 56. Pr . A. Zannou FST d’ Al-Hoceima 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. 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.
  • 64. Pr . A. Zannou FST d’ Al-Hoceima 64 Les tableaux • Attribut width avec td et th <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. 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).
  • 66. Pr . A. Zannou FST d’ Al-Hoceima 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. 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>
  • 72. Pr . A. Zannou FST d’ Al-Hoceima 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. Pr . A. Zannou FST d’ Al-Hoceima 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. Pr . A. Zannou FST d’ Al-Hoceima 74 Les tableaux • Couleurs  Couleur de la bordure (quadrillage) <TABLE BORDERCOLOR=“GREEN""> <HTML> <BODY> <TABLE BORDER="1" WIDTH="50%" 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. 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
  • 82. Pr . A. Zannou FST d’ Al-Hoceima 82 Les formulaires • Champs de saisie : <INPUT> Bouton d’envoi <html> <body> <h2>Une questionnaire <h2> <form name="questionnaire" action="page_envoi.html" method=“post"> cocher qualité de produit<br/> <input type=“submit" value= " cliquez"> </form> </body > </html>
  • 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
  • 91. Pr . A. Zannou FST d’ Al-Hoceima 91 Les formulaires • Champs de saisie : <INPUT>: Bouton d’annulation (reset) <html> <body> <h2>une questionnaire <h2> <form name="questionnaire" action="page_envoi.html" method=“post"> cocher qualité de produit<br/> <input type= " reset" value= " annuler"> </form> </body > </html>
  • 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
  • 93. Pr . A. Zannou FST d’ Al-Hoceima 93 Les formulaires • Champs de saisie : <INPUT> : Bouton simple <html> <body> <h2>Une questionnaire <h2> <form name="questionnaire" action="page_envoi.html" method=“post"> <input type=“button" value=“Déja inscrit“"> </form> </body > </html>
  • 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)
  • 95. Pr . A. Zannou FST d’ Al-Hoceima 95 Les formulaires • Champs de saisie : <INPUT> : Bouton simple <html> <body> <h2>Une questionnaire <h2> <form name="questionnaire" action="page_envoi.html" method=“post"> envoyer votre message/> <textarea name="msg" rows="4" cols="20"> écrire ici</textarea> </form> </body > </html>
  • 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&#39;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.
  • 112. Pr . A. Zannou FST d’ Al-Hoceima 112 Multimédia • Audio et vidéo <HTML> <BODY> <audio controls=“controls” autoplay="autoplay" muted=“muted”> <source src="audio1.mp3“ > </audio> </BODY> </HTML> <HTML> <BODY> <video width="400" height="200" controls=“controls” autoplay="autoplay" muted=“muted”> <source src=“video1.mp4“ > </video > </BODY> </HTML>  muted : Silencieux. Active le mode silencieux (volume nul).
  • 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)