0% ont trouvé ce document utile (0 vote)
5 vues63 pages

HTML5

Le document présente une introduction au HTML5, expliquant sa structure et ses balises essentielles pour créer des pages web. Il couvre des éléments tels que les listes, les tableaux, les liens, et les médias, ainsi que les outils pour écrire et lire du HTML. Des exemples pratiques illustrent l'utilisation des balises et des attributs pour formater le contenu.

Transféré par

Anas Belkaddad
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
5 vues63 pages

HTML5

Le document présente une introduction au HTML5, expliquant sa structure et ses balises essentielles pour créer des pages web. Il couvre des éléments tels que les listes, les tableaux, les liens, et les médias, ainsi que les outils pour écrire et lire du HTML. Des exemples pratiques illustrent l'utilisation des balises et des attributs pour formater le contenu.

Transféré par

Anas Belkaddad
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Université Mohammed Premier

École Nationale de Commerce et de Gestion


d’Oujda
Niveau : S2 Tronc commun

HTML5
Hyper Text Markup Language 5

Contenu :
• Structure d’un document HTML
• Les balises de mise en valeur
• Les listes
• Les tableaux
• Les liens
• Les images, vidéo, audio
• IFrame Présenté par :
Redouane ESBAI
Année universitaire : 2017 / 2018
1
Le HTML (HyperText Markup Language) est un format de
présentation de données permettant de créer des pages web
pouvant être lues dans des navigateurs.

Il ne s'agit pas d'un langage de programmation : HTML permet


uniquement de structurer un document.

Un fichier HTML est un simple fichier texte que l'on peut


ouvrir et modifier avec un éditeur.
Ce fichier contient des balises qui vont préciser la structure ou
l'apparence du document.

2
Que choisir pour écrire de l' HTML?
A la main, avec un éditeur de texte
Bloc note, NotePad++, Bbedit, Emacs ,WordPad …

Avec un logiciel « assistant » au code HTML


PageSpinner sur MacIntosh, Amaya, HTML-Kit sur PC …

A l'aide d'un programme dit "WYSIWYG"


Dreamweaver , Golive, Netscape composer, FrontPage, Claris Homepage ...

Que choisir pour lire HTML?


L’utilisateur doit pouvoir interpréter HTML et afficher le résultat sur un
navigateur:
 Netscape Navigator, Mozilla FireFox, Internet explorer, Safari, Opéra,
Google Chrome …

3
Fi hier HTML ? .ht l; .ht ; . ht l; …

 Du texte brut

 Des commandes (balises) qui permettent d’organiser

la présentation

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

4
BALISES ET ATTRIBUTS
Une balise HTML est un élément que l'on va ajouter au texte pour dire au
navigateur de quelle manière l'afficher.
La balise n'est pas affichée telle quelle dans le navigateur, elle est interprétée par
celui-ci.
Elle est toujours délimitée par les signes < et >.
Exemple :
Une balise peut prendre trois formes :

Balise double: <balise> ici votre texte </balise>

Début de mise en forme Fin de mise en forme

Exemple
<i> Le cours HTML </i>

Le cours HTML
6
Balise Monolithique (simple) :
<balise />

Elle ne comporte qu’une seule balise


Elle est délimitée par les signes < et />

Exemple
Le cours HTML <HR />

Le cours HTML

7
Balise avec attributs :
<balise attribut1="valeur1" attribut2="valeur2" … > votre texte </balise>

OU
<balise attribut1="valeur1" attribut2="valeur2" … />

Exemple
Le cours HTML <HR SIZE="6" WIDTH="50%" />

Le cours HTML

8
Structure d'une page HTML

<HTML>
<HEAD>
…. L'en-tête du document
</HEAD>

<BODY>
••• Le corps de la page
</BODY>
</HTML>

9
Exemple simple

<html>
<head>
<title> Mon premier exemple </title>
</head>
<body>
<b>Mon premier essai de page web </b>
</body>
</html>

Exemple 1
10
E tête : <HEAD> … </HEAD>

 Position
 en début de document
(après la balise <HTML> et avant la balise <BODY>)
 Rôle
 Fournir des informations au sujet du document
 Contenu
 <TITLE>…</TITLE>
 Titre de la fenêtre dans laquelle la page s'affiche
 <META />
 Différentes informations sur le document ou pour la gestion
de celui-ci

11
Corps du document : <BODY> ... </BODY>
 Position
 placé immédiatement après la balise </HEAD>
 Rôle
 Délimiter le corps du document
 Permet de définir l'apparence du fond de l'écran
et la couleur des éléments textuels
 Attributs
 bgcolor="couleur" : Couleur qui sera utilisé pour l'arrière plan.
 background="fichierimage" : Image d'arrière-plan (BMP, JPG ou GIF).
 Remarques
– 1 seule balise <BODY> par page
– La balise peut s'employer seule ou avec des attributs
– </BODY> est placé immédiatement avant la balise </HTML>

12
Mise en forme simple du texte

Titres

 <Hx> : Balise double qui saute la ligne et laisse de


l’espace avant et après le titre

 6 niveaux de titres avec 6 tailles  :


<H1> Titre1 </H1>
<H2> Titre2 </H2>

<H6> Titre6 </H6>

Exemple 2
13
Mise en forme simple du texte

Styles gras, italique et souligner

 Style Gras : 2 balises doubles <B> et <STRONG>


<B> texte en gras </B> ou
<STRONG> texte en gras </STRONG>

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


<I> texte en gras </I> ou
<EM> texte en gras </EM>
 Style Souligner: balise double <U>
<U> texte souligné </U> Exemple 3
14
Mise en forme simple du texte

Saut de ligne

 Marquer explicitement le saut de ligne par une balise :


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

Exemple 4
15
Mise en forme simple du texte

Traçage de ligne horizontale


 <HR/> : Balise monolithique qui trace une ligne
Horizontale

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

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

Exemple 5
16
Mise en forme des caractères

 Spécification d’une police


<FONT FACE="police" SIZE="taille" COLOR="#RRVVBB"> Texte </FONT>

 FACE : la police utilisée.


Ne proposer que des polices dont on est sûr qu'elles sont disponibles
sur l'ordinateur de consultation :
 Arial/Helvetica
 Times New Roman/Times

 SIZE : la taille de la police


 1 … 7 taille absolue

 COLOR: la couleur de la police

Exemple 6
17
Mise en forme des paragraphes
Insertion et Alignement des paragraphes

<P ALIGN="LEFT|CENTER|RIGHT|JUSTIFY"> Texte </P>

Exemple 7

18
Les listes
Une liste est un paragraphe structuré contenant une suite d’ l e ts.
Le langage HTML définit trois principaux types de listes :
Listes non ordonnées (listes à puces) Exemple liste non ordonnée:
• Pique
• Cœur
• Carreau
• Trèfle
Listes ordonnées (listes numérotées)
Exemple liste ordonnée:
1. Pique
2. Cœur
3. Carreau
4. Trèfle
Listes de définitions (glossaire)
Exemple liste de définition:
HTML
est un langage de représentation des données
CSS
est langage qui décrit la présentation des documents HTML

19
Liste non ordonnée ( à puce )

La balise double <UL> </UL>


La balise <UL> encadre la balise double <LI> élément </LI>
Avec <LI> : Précède chaque l’élément de la liste
Exemple

<UL>
<LI> Pique </LI> • Pique
<LI> Cœur </LI> • Cœur
<LI> Carreau</LI> • Carreau
<LI> Trèfle</LI> • Trèfle
</UL>

20
Liste non ordonnée ( à puce )
Attribut TYPE de la balise <UL> : Permet de modifier l'apparence de la liste.
Les différents valeurs de l’attribut TYPE :
TYPE="square" : les icônes prennent la forme de carrés.
Exemple:
<UL type="square" >
<LI> Pique </LI>
 Pique
<LI> Cœur </LI>  Cœur
<LI> Carreau</LI>  Carreau
<LI> Trèfle</LI>  Trèfle
</UL>

TYPE="circle" : les icônes prennent la forme de cercles.


Exemple:
<UL type="circle" >
<LI> Pique </LI> o Pique
<LI> Cœur </LI> o Cœur
<LI> Carreau</LI> o Carreau
<LI> Trèfle</LI> o Trèfle
</UL>
Liste non ordonnée ( à puce )
TYPE="disc" : les icônes prennent la forme de disques.

Exemple:

<UL type=" disc" >


<LI> Pique </LI>
• Pique
<LI> Cœur </LI> • Cœur
<LI> Carreau</LI> • Carreau
<LI> Trèfle</LI>
</UL>
• Trèfle
Liste ordonnée (numérotée)

La balise double <OL> </OL>


La balise <OL> encadre la balise double <LI> élément </LI>
Avec <LI> : Précède chaque l’élément de la liste
Exemple

<OL>
<LI> Pique </LI> 1. Pique
<LI> Cœur </LI> 2. Cœur
<LI> Carreau</LI> 3. Carreau
<LI> Trèfle</LI> 4. Trèfle
</OL>

23
Liste ordonnée (numérotée) : Les attributs de la balise <OL>
Attribut TYPE : Permet de modifier l'apparence de la liste.
Les différents valeurs de l’attribut TYPE :
TYPE="A" : numérotation en lettres majuscules A, B, C, ...
Exemple:
<OL TYPE="A" >
<LI> Pique </LI> A. Pique
<LI> Cœur </LI> B. Cœur
<LI> Carreau</LI> C. Carreau
<LI> Trèfle</LI> D. Trèfle
</OL>

TYPE="a" : numérotation en lettres minuscules a, b, c, ...


Exemple:
<OL TYPE="a" >
<LI> Pique </LI> a. Pique
<LI> Cœur </LI> b. Cœur
<LI> Carreau</LI> c. Carreau
<LI> Trèfle</LI> d. Trèfle
</OL>
Liste ordonnée (numérotée) : Les attributs de la balise <OL>
TYPE="I" : numérotation en chiffres romains I, II, III, IV, ....
Exemple:

<OL TYPE="I" >


<LI> Pique </LI> I. Pique
<LI> Cœur </LI> II. Cœur
<LI> Carreau</LI> III. Carreau
<LI> Trèfle</LI> IV. Trèfle
</OL>

TYPE="i" : numérotation en chiffres romains i, ii, iii, iv, ...


Exemple:
<OL TYPE="i" >
<LI> Pique </LI> i. Pique
<LI> Cœur </LI> ii. Cœur
<LI> Carreau</LI> iii. Carreau
<LI> Trèfle</LI> iv. Trèfle
</OL>
Liste ordonnée (numérotée) : Les attributs de la balise <OL>

TYPE="1" : numérotation par défaut 1, 2, 3, ...

Exemple:
<OL TYPE="1" >
<LI> Pique </LI> 1. Pique
<LI> Cœur </LI> 2. Cœur
<LI> Carreau</LI> 3. Carreau
<LI> Trèfle</LI>
4. Trèfle
</OL>
Liste ordonnée (numérotée) : Les attributs de la balise <OL>

Attribut START: définit la valeur de départ du marqueur de la liste.


START="n"

Exemple: <OL START="10" >


<LI> Pique </LI> 10. Pique
<LI> Cœur </LI>
11. Cœur
<LI> Carreau</LI>
<LI> Trèfle</LI> 12. Carreau
</OL> 13. Trèfle

Attribut REVERSED: précise que les éléments sont affichés par un ordre inversé.

Exemple:
<OL REVERSED >
<LI> Pique </LI> 4. Pique
<LI> Cœur </LI>
3. Cœur
<LI> Carreau</LI>
<LI> Trèfle</LI> 2. Carreau
</OL> 1. Trèfle
Liste de définition (Glossaire)
La balise double <DL> </DL>
La balise <DL> encadre les balises doubles :
<DT> terme </DT>
<DD>Définition du terme </DD>

Exemple
<DL>
<DT> HTML</DT>
<DD> est un langage de représentation des données </DD>
<DT> CSS</DT>
<DD> est langage qui décrit la présentation des documents HTML </DD>
</DL>

HTML
est un langage de représentation des données
CSS
est langage qui décrit la présentation des documents HTML
28
Combiner les types de listes (Listes imbriquées)
Le HTML supporte les sous-listes de type différents dans la même liste.
Par exemple dans un document avoir besoin d'une liste numérotée qui
inclut à l'intérieur de chaque élément une liste non numérotée ou une liste
définition.

<OL>
<LI>Développement
<UL>
<LI>EasyPHP</LI>
<LI>Dev-C++</LI>
<LI>Crimson Editor</LI>
</UL>
</LI>
<LI>Sécurité
<UL>
<LI>Ad-Aware</LI>
<LI>ZoneAlarm</LI>
<LI>Kerio Personal FireWall</LI>
</UL>
</LI>
</OL>

29
Combiner les types de listes (Listes imbriquées)

<UL>
<LI>Développement
<OL>
<LI>EasyPHP</LI>
<LI>Dev-C++</LI>
<LI>Crimson Editor</LI>
</OL>
</LI>
<LI>Sécurité
<OL>
<LI>Ad-Aware</LI>
<LI>ZoneAlarm</LI>
<LI>Kerio Personal FireWall</LI>
</OL>
</LI>
</UL>

30
Combiner les types de listes (Listes imbriquées)

<UL>
<LI>Développement
<UL>
<LI>EasyPHP</LI>
<LI>Dev-C++</LI>
<LI>Crimson Editor</LI>
</UL>
</LI>
<LI>Sécurité
<UL>
<LI>Ad-Aware</LI>
<LI>ZoneAlarm</LI>
<LI>Kerio Personal FireWall</LI>
</UL>
</LI>
</UL>

31
Combiner les types de listes (Listes imbriquées)

<OL TYPE ="I">


<LI>Développement
<OL>
<LI>EasyPHP</LI>
<LI>Dev-C++</LI>
<LI>Crimson Editor</LI>
</OL>
</LI>
<LI>Sécurité
<OL>
<LI>Ad-Aware</LI>
<LI>ZoneAlarm</LI>
<LI>Kerio Personal FireWall</LI>
</OL>
</LI>
</OL>

32
Tableaux
La balise double <TABLE> créer le cadre du tableau
Les sous-balises :
La balise double <CAPTION> : afficher la légende du tableau, la légende peut être assimilée à
un titre principal de tableau (balise facultative)
La balise double <THEAD> : Définir les titres de colonnes (balise facultative)
Les sous-balises :
 La balise double <TR> pour créer la ligne ;
 La balise double <TH> pour renseigner le titre de chaque colonne.
La balise double <TBODY> : Ajouter les données au tableau (balise facultative)
Les sous-balises :
La balise double <TR> pour créer la ligne de donnée;
La balise double <TD> pour créer une cellule contient une donnée du tableau
La balise double <TFOOT> : ajouter un pied du tableau (balise facultative)
La balise double <TR> pour créer la ligne de donnée;
La balise double <TD> pour créer une cellule contient une donnée du tableau
33
Exemple 8

34
Exemple simple (3 lignes, 3 colonnes)
<TABLE>
<TR>
<TD> Cellule 11 </TD>
<TD> Cellule 12 </TD>
<TD> Cellule 13 </TD>
</TR>
<TR>
<TD> Cellule 21 </TD>
<TD> Cellule 22 </TD>
<TD> Cellule 23 </TD>
</TR>
<TR>
<TD> Cellule 31 </TD>
<TD> Cellule 32 </TD>
<TD> Cellule 33 </TD>
</TR>
</TABLE>

35
Tableaux : Mise en forme
 Attributs de la balise <TABLE>
 BORDER : épaisseur de la bordure
<TABLE BORDER = "1">
<TR>
<TD> Cellule 11 </TD>
<TD> Cellule 12 </TD>
<TD> Cellule 13 </TD>
</TR>
<TR>
<TD> Cellule 21 </TD>
<TD> Cellule 22 </TD>
<TD> Cellule 23 </TD>
</TR>
<TR>
<TD> Cellule 31 </TD>
<TD> Cellule 32 </TD>
<TD> Cellule 33 </TD>
</TR>
</TABLE>
Exemple 9

36
Tableaux : Mise en forme
<TABLE BORDER = "1" WIDTH= "60%" >
 Attributs de la balise <TABLE> <TR>
<TD> Cellule 11 </TD>
 WIDTH : Largeur du tableau en % ou en pixel <TD> Cellule 12 </TD>
<TD> Cellule 13 </TD>
</TR>
<TR>
<TD> Cellule 21 </TD>
<TD> Cellule 22 </TD>
<TD> Cellule 23 </TD>
</TR>
<TR>
<TD> Cellule 31 </TD>
<TD> Cellule 32 </TD>
<TD> Cellule 33 </TD>
</TR>
</TABLE>
Exemple 10

37
Tableaux : Mise en forme
 Attributs de la balise <TABLE> <TABLE BORDER = "1" WIDTH= "60%" CELLSPACING= "15" >
<TR>
CELLSPACING : espace entre bordures
<TD> Cellule 11 </TD>
(en pixel) <TD> Cellule 12 </TD>
<TD> Cellule 13 </TD>
</TR>
<TR>
<TD> Cellule 21 </TD>
<TD> Cellule 22 </TD>
<TD> Cellule 23 </TD>
</TR>
<TR>
<TD> Cellule 31 </TD>
<TD> Cellule 32 </TD>
<TD> Cellule 33 </TD>
</TR>
</TABLE>
Exemple 11

38
Tableaux : Mise en forme
<TABLE BORDER = "1" WIDTH= "60%" CELLPADDING = "20" >
Attributs de la balise <TABLE> <TR>
CELLPADDING : <TD> Cellule 11 </TD>
<TD> Cellule 12 </TD>
espace entre le texte et la bordure <TD> Cellule 13 </TD>
(en pixel) </TR>
<TR>
<TD> Cellule 21 </TD>
<TD> Cellule 22 </TD>
<TD> Cellule 23 </TD>
</TR>
<TR>
<TD> Cellule 31 </TD>
<TD> Cellule 32 </TD>
<TD> Cellule 33 </TD>
</TR>
Exemple 12
</TABLE>

39
Attributs des balises <TH> et <TD>
 Fusionner les Cellules avec COLSPAN
 Fusionner les titres des colonnes : <TH COLSPAN = " nb de colonnes " >
Exemple : <TH COLSPAN = "3" >

Exemple 13

40
Attributs des balises <TH> et <TD>
 Fusionner les Cellules avec COLSPAN
 Fusionner les cellules d’une ligne : <TD COLSPAN= " nb de cellules fusionnées ">

Exemple : <TD COLSPAN = "2" >

Exemple 14

41
 Fusionner les Cellules avec ROWSPAN
 Fusionner les cellules d’une Colonne: <TD ROWSPAN= " nb de cellules fusionnées ">

Exemple : <TD ROWSPAN = "3" >

Exemple 15

42
Les liens hypertextes (hyperliens)
Ils donnent l’acc s à une autre page html, une photo, un
document, une adresse de courriel, un fichier…etc.

La balise double <A> …. </A>

Principaux attributs
HREF = url ou l'adresse de destination
NAME / ID = étiquette de l'ancre (chaîne de caractères )

Exemple simple

<A HREF = "[Link] visitez le site ENCGO</A>

43
Les liens hypertextes (hyperliens)

Il existe 3 types de liens :

Les liens externes : Ces liens vous amène à un autre site

Les liens internes : Ces liens vous amène à une autre page dans le même site.

Les ancres : Ce sont généralement des liens qui vous amène à un endroit précis
de la page courante, ou d'une autre page.

44
Les liens hypertextes (hyperliens)

• Lien Global (externe)


– La cible est n’importe où sur le net
– <A HREF = " URL " > cliquer ici </A>

Exemple 16

45
Les liens hypertextes (hyperliens)

Lien Local (Interne)


la page cible est sur la même machine

– La cible est un fichier dans le même dossier


– <A HREF = " nom du [Link] " > cliquer ici </A>

– La cible est un fichier dans un autre dossier


– <A HREF = " chemin/nom du [Link] " > cliquer ici </A>

Exemple 17

46
Les liens hypertextes (hyperliens)

• Ancrage (Liens vers à un endroit précis de la page courante)

Il met en rapport deux balises.


La balise appelante :

<A HREF="#nom_de_la_balise_appelee"> lien appelant </A>

La balise appelée :
<A NAME="nom_de_la_balise_appelee"> Texte cible </A>

Exemple 18

47
Liens vers des ressources utilisant:

Courrier électronique
L’utilisation de « mailto: » provoque l'ouverture de l'application
correspondant au courrier

• lien e-mail sans sujet :


href="[Link]

• lien e-mail avec sujet :


href="[Link] d’info"

• lien e-mail avec sujet et texte dans le corps du message :


href="[Link] a de d’i fo& od =Bo jour"

• lien e-mail avec sujet, envoyé à deux personnes :


href="[Link]

Exemple 19
48
Liens vers des ressources utilisant:

Autres objets

Vous pouvez également proposer un fichier (.EXE ou .ZIP ou .docx ou .pdf


ou …) en téléchargement...

Exemple:
<a href="[Link]">Téléchargement du fichier</a>

Exemple 20

49
Images dans l’HTML
 Une page html peut contenir des images

 L’image est un fichier indépendant de la page HTML


 Dans le même répertoire, ou dans un autre.

 Formats largement supportés : gif, jpg, jpeg, png, svg,…

50
Images dans l’HTML
 L’image est insérée dans une page html par la balise simple

<IMG />

 Attributs

 SRC : Chemin du fichier image

 ALT / TITLE: afficher un texte lorsque l'image n'est pas affichable ou


lorsque la souris reste pointée dessus.

 WIDTH : largeur de l’mage

 HEIGHT : hauteur de l’image

 BORDER : bordure de x pixels.

 ALIGN : aligner l'image en haut|au milieu|en bas|à gauche|à droite.

51
Images dans l’HTML
 Exemple simple
 Le fichier image est dans le même répertoire avec la page HTML

Exemple 21

52
Images dans l’HTML
 Exemple simple
 La photo est dans un sous répertoire de la page HTML

Exemple 22
53
Image comme lien hypérmédia
Image dans un lien : Placer la balise <IMG> dans la balise lien <A>

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

Exemple 23
54
Intégrer une Vidéo dans une page HTML

 Une des nouveautés majeures de HTML5 est la


balise <VIDEO> qui offre une solution simple, native pour
les navigateurs pour l'intégration d'une vidéo dans une page
web.

 Elle permet également de proposer une alternative à


l'utilisation de Flash pour les plate-formes ne le supportant
pas (iOS par exemple avec iPhone, iPod, iPad…)

55
La vidéo est un fichier indépendant de la page HTML
Dans le même répertoire, ou dans un autre.

Formats largement supportés : WebM/VP8 , H.264 / MP4 et Ogg/Theora

Navigateurs H.264/MP4 OGG Theora WebM

Firefox 34+ Firefox 3.5+ Firefox 4+

Opera 25+ Opera 10.5+ Opera 10.6+

Internet Explorer 9+ non si les codecs sont installés

Google Chrome 4+ Google Chrome 4+ Google Chrome 6+

Safari 5+ non non

56
 La vidéo est insérée dans une page html par la balise double

<VIDEO> ….</VIDEO>

 Syntaxe minimale

<VIDEO SRC="[Link]" CONTROLS> Texte alternatif </VIDEO>

Exemple Exemple 24

 Pour des sources multiples


<VIDEO CONTROLS POSTER="images/[Link]" >
<SOURCE SRC="video.mp4" TYPE="video/mp4" />
< SOURCE SRC ="[Link]" TYPE ="video/webm" />
< SOURCE SRC ="[Link]" TYPE ="video/ogg" />
Votre navigateur ne supporte pas l'élément video.
</VIDEO> Exemple 25
57
 Attributs
 CONTROLS : donne accès aux contrôles de lecture (boutons lecture
et pause, volume, barre de progression, mode plein écran)
 SRC : chemin du fichier vidéo.
 TYPE="video/format" indique le type du format de la vidéo.
 POSTER="url de l'image" : permet d'indiquer une image à afficher
par défaut dans l'espace réservé à la vidéo avant que la lecture de
celle-ci ne soit lancée
 AUTOPLAY : permet de lancer la lecture automatiquement, au
chargement de la page HTML.
 LOOP indique que la lecture se fait en boucle. Il est utile dans le
cas d'une courte boucle vidéo insérée dans une bannière.
 WIDTH et HEIGHT permettent de préciser en pixels la taille de la
vidéo en largeur et en hauteur.
58
59
Intégrer l’audio dans une page HTML
La balise double <AUDIO>
La balise <audio> du HTML5 s'utilise à peu près de la même manière que la
balise <video>.

<AUDIO CONTROLS>
<SOURCE SRC="thievery_corp.ogg" TYPE="audio/ogg" />
<SOURCE SRC="thievery_corp.mp3" TYPE="audio/mpeg" />
Votre navigateur ne supporte pas l'élément audio.
</AUDIO>

Exemple 26

60
Les formats audio supportés par cette balise sont MP3, OGG et WAV

61
Le Conteneur IFRAME
La balise double <IFRAME> est utilisée pour introduire une page HTML au sein
d’un document html.
Exemple : <IFRAME >….. </IFRAME>

Attributs
NAME: nom de la frame (identifiant de
la fenêtre)
SRC : Chemin de la page à afficher
WIDTH : largeur de frame
HEIGHT : hauteur de frame
Exemple 27
IFRAME
Charger une fenêtre en cliquant sur un lien.
Ajouter l’attribut TARGET (dans la balise <A>) utilisée avec HREF.
< A TARGET="nom de la frame" HREF="url" > texte …</A>

Exemple :

Exemple 28

63

Vous aimerez peut-être aussi