Insertion d'Objets Multim

1
Insertion d'Objets Multimédias
2 balises

1. Balise ltobjectgt lt/objectgt

Cet élément permet d'inclure un objet arbitraire
dans un document HTML Control ActiveX (MIE
propriétaire), Objets multimédia (images, son et
vidéo), document HTML, applet Java

1. Utilisation de l'attribut data

Utilisation de la balise ltobjectgt
attributs data, type , width et height
data URL de l'image, de la page web type type
MIME de l'objet width, height largeur et hauteur
de l'objet (px, )
Comparaison avec la balise ltimggt classique
2
Type MIME de l'Objet
MIME Multipurpose Internet Mail Extension

• Le type MIME est utilisé pour
• Spécifier le type d'un document attaché à un
  courriel
• Spécifier le type du document transféré par le
  protocole HTTP (le serveur envoie en premier le
  type MIME d'un objet au navigateur, afin que ce
  dernier puisse le réceptionner et le traiter)

Le type MIME s'écrit de la façon suivante
type_mime_principal / sous_type_mime
http//www.commentcamarche.net/systemes/mime.php3
http//fr.selfhtml.org/divers/typesmime.htm
3

1. Balise ltobjectgt lt/objectgt

1. Utilisation de l'attribut classid

Quelques attributs classid, width et height,
codebase.
La valeur de l'attribut classid (CLasSIDentifier)
est de la forme classid"clsidobject-id" , est
indique quel software / player doit être utilisé,
ou fait référence à un contrôle ActiveX
L'attribut codebase"url" indique au navigateur
l'URL de téléchargement du contrôle ActiveX, ou
du plug-in. Exemple pour le plug-in Flash
http//fpdownload.macromedia.com/pub/shockwave/c
abs/flash/swflash.cabversion7,0,0,0
Télécharger ActiveX helper http//www.nirsoft.ne
t/utils/axhelper.html
4

1. Balise ltembedgt lt/embedgt

Quelques attributs src, width et height,
pluginspace.
L'attribut src (source) contient l'URL du fichier
joué par le plug-in (ex. fichier flash joué par
le plug-in Flash)
L'attribut pluginspage"url" indique au
navigateur l'URL de téléchargement du plug-in.
Exemple pour le plug-in Flash http//www.macrom
edia.com/go/getflashplayer
5

1. Contrôle des paramètres de l'objet multimédia

1. Balise ltembedgt lt/embedgt

Les paramètres de l'objet sont passés directement
dans la balise ltembedgt suivant la syntaxe
Les paramètres dépendent du type d'objet inséré,
et seules certaines valeurs sont permises. Liste
des paramètres/attributs, et de leurs valeurs,
pour l'intégration d'un objet Flash à l'aide la
la balise ltembedgt
http//wiki.media-box.net/tutoriaux/html/integrati
on_flash
6

1. Balise ltobjectgt

Ici, une balise dédiée pour le passage des
paramètres, est imbriquée entre la balise
ltobjectgt lt/objectgt
2 attributs name et value.
La valeur de l'attribut name est le nom de la
propriété.
L'attribut value contient la valeur de la
propriété défini.
Chargement d'une animation flash La valeur
movie de l'attribut name permet de spécifier
l'URL du fichier .swf comme valeur de l'attribut
value, définition équivalente à l'URL de
l'attribut src de la balise ltembedgt.
Liste des propriétés de l'ActiveX Shockwave.Flash
http//www.tekool.net/flash/fscommand/02_page.ht
ml
7
En général, on précise les 2 balises ltobjectgt et
ltembedgt pour insérer un objet multimédia dans une
page HTML. Notez la correspondance entre les
valeurs des attributs name et value de la balise
ltparamgt, et les propriétés / attributs de la
balise ltembedgt. Attention la balise ltembedgt
serait obsolète en XHTML, donc déconseillée!
EX. Flash
8
Exemples d'insertion d'objets (contrôle ActiveX)
par la balise ltobjectgt

• Insertion d'une image

ltobject data"europe.jpg" type"image/jpeg"
width"243px" height"181px" gt lt/objectgt
Comparaison avec la balise img classique

• Insertion d'une page web

ltobject data"http//www.depulp.com"
height"100" width"100"gt lt/objectgt

• Insertion d'un son

ltobject classid"clsid22D6F312-B0F6-11D0-94AB-008
0C74C7E95"gt ltparam name"FileName"
value"drums.wav" /gt lt/objectgt

• Insertion d'une vidéo

ltobject classid"clsid22D6F312-B0F6-11D0-94AB-008
0C74C7E95"gt ltparam name"FileName"
value"numberULmpeg1.mpg" /gt lt/objectgt

• Insertion d'un control d'un curseur

ltobject classid"clsidF08DF954-8592-11D1-B16A-00C
0F0283628" id"Slider1" width"100"
height"50"gt ltparam name"BorderStyle" value"1"
/gt ltparam name"MousePointer" value"0" /gt ltparam
name"Enabled" value"1" /gt ltparam name"Min"
value"0" /gt ltparam name"Max" value"10"
/gt lt/objectgt
9

• Affichage d'un calendrier

ltobject width"100" height"80"
classid"clsid8E27C92B-1264-101C-8A2F-040224009C0
2"gt ltparam name"BackColor" value"14544622"gt ltpar
am name"DayLength" value"1"gt lt/objectgt

• Dessiner un graphique

ltobject width"200" height"200"
classid"CLSID369303C2-D7AC-11D0-89D5-00A0C90833E
6"gt ltparam name"Line0001" value"setFillColor(255
, 0, 255)"gt ltparam name"Line0002"
value"Oval(-100, -50, 200, 100, 30)"gt lt/objectgt

• Insertion d'une animation flash

ltobject width"400" height"40"
classid"clsidD27CDB6E-AE6D-11cf-96B8-44455354000
0" codebase"http//download.macromedia.com/pub/s
hockwave/cabs/flash/swflash.cab4,0,0,0"gt ltparam
name"SRC" value"fichier.swf"gt lt/objectgt
10
Les tableaux HTML lttablegt lt/tablegt
5 premiers attributs width, height, border,
cellspacing et cellpadding
Dimension de la bordure (border), espacement
entre les cellules (cellspacing), et marges pour
le contenu d'une cellule (cellpadding).
Dimensions du tableau par rapport à son conteneur
(fenêtre du navigateur, une cellule d'un
tableau).
Valeurs en pixel.
La longueur (width) et la hauteur (height)
s'exprime en pixel ou en de la dimension du
conteneur.
11
Lignes du tableau lttrgt lt/trgt
Principaux attributs height, align et valign. Les
autres étant obsolètes !
Left center rigth justify
top middle bottom baseline
Alignement horizontale et vertical des contenus
des cellules du tableau, qui seront définies dans
cette ligne.
12
Cellule d'une ligne lttdgt lt/tdgt
T.O.M
Ordre de déclaration (structure) tableau ?
ligne ? cellule
Contenu de la cellule (tout code HTML)
Déclaration d'une cellule.
Déclaration d'une ligne.
Déclaration du tableau.
Dans une ligne, le nombre de cellules déclarées
impose le nombre de colonnes. Il doit donc y
avoir autant de cellules de déclarées dans chaque
ligne, sauf ...
13
Les balises lttdgt lt/tdgt déclaration d'une
cellule
Les 4 principaux attributs width, height, colspan
et rowspan
Fusion de cellules sur une ligne (colspan - la
cellule s'étend sur nb colonnes), ou sur une
colonne (rowspan - la cellule s'étend sur nb
lignes).
La largeur (width) et la hauteur (height)
s'exprime en pixel ou en de la dimension du
conteneur.
La cellule la plus large impose la largeur de la
colonne, la cellule la plus haute impose la
hauteur de la ligne. La dimension de la cellule
dépendra alors de son contenu. Le contrôle de la
dimension sera une étape délicate et importante
de la conception et du design.
Note le contenu d'une cellule ne doit jamais
être vide. Astuce utiliser nbsp (no break
space) qui est un vide. Mais la cellule n'est
plus vide! Ou insérer une image à fond
transparent de taille 1x1 pixels, et en forçant
une largeur égale à la largeur de cellule
voulue. Attention dans le cas de nbsp , la
hauteur de cellule est forcée à celle de la
taille d'un caractère! Une image de taille 1 x 1
pixel est alors préférable, et permet une hauteur
de ligne de 1 pixel par ex.
14
Design d'une page par la technique des tableaux
HTML
Novos Excludat iurgia finis, Est vetus atque
probus, centum qui perficit annos. Quid, qui
deperiit minor uno mense vel anno, inter quos
referendus erit Veteresne poetas.
Novos Excludat iurgia finis, Est vetus atque
probus, centum qui perficit annos. Quid, qui
deperiit minor uno mense vel anno, inter quos
referendus erit Veteresne poetas, an quos et
praesens et postera respuat aetas Iste quidem
veteres inter ponetur honeste, quirendus erit
Veteresne poetas, an quos et praesens et postera
respuat el mense brevi vel toto est iunior anno.
Utor permisso, caudaeque pilos ut equinae
paulatim vello unum, demo etiam unum, dum cadat
elusus ratione ruentis acervi, qui redit in
fastos et virtutem, equinae paulatim vello unum,
demo etiam unum, dum cadat elusus ratione ruentis
acervi, qui redit in fastos et virtual.
Novos Excludat iurgia finis, Est vetus atque
probus, centum qui perficit annos. Quid, qui
deperiit minor uno mense vel anno, inter quos
referendus erit Veteresne poetas, an quos et
praesens et postera respuat aetas Iste quidem
veteres inter ponetur honeste, quirendus erit
Veteresne poetas, an quos et praesens et postera
respuat el mense brevi vel toto est iunior anno.
Utor permisso, caudaeque pilos ut equinae
paulatim vello unum, demo etiam unum, dum cadat
elusus ratione ruentis acervi, qui redit in
fastos et virtutem.
Novos Excludat iurgia finis, Est vetus atque
probus, centum qui perficit annos. Quid, qui
deperiit minor uno mense vel anno, inter quos
referendus erit Veteresne poetas, an quos et
praesens et postera respuat aetas Iste quidem.