Vous êtes sur la page 1sur 10

   

    Programmation en HTML
    chapitre 9
  Le multimédia
     
   
Un fichier HTML peut incorporer autre chose que du texte et des images : on
peut y trouver des sons et des animations vidéo.
Dans certains cas ceux-ci seront chargés dans des fenêtres distinctes de celle du
navigateur.
Un logiciel dit "programme d' accompagnement" sera lancé parce que le navigateu
ne peut reproduire tous les sons ou animations lui-même.

Les trames sonores

Pour placer des sons dans un document HTML, vous devez d' abord choisir et travailler
(éventuellement) vos sons dans votre logiciel de traitement sonore et sauvegarder les
fichiers produits dans un format compatible (
WAVE : ".wav",
".aiff"
,".au",
MIDI : ".mid").

La commande pour insérer un son peut être du même type que les pointeurs déjà vus. On
peut ainsi mettre un son "derrière" un lien ou une image. Voici les deux commandes :

==> Pour assigner un son à un lien :


<a href="son/foudre.wav">Ecoutez la foudre(Attention : 26Ko)</a>
Nota : (le fichier foudre.wav se trouve dans le sous-répertoire "son")

donne : Ecoutez la foudre(Attention : 26Ko)

==> Pour une image "sonore" :


<a href="son/foudre.wav"> <img src="image/orage.jpg></a>

donne : 

Les séquences vidéo


L' intégration de séquences vidéo est possible en HTML par le biais d' animations en format
Quicktime, MPEG ou AVI.
Dans l' exemple qui suit, le code utilisé est:

==>   <a href="multimedia/voyager.avi">Cliquez ici pour voir Star Trek Voyager


(Attention : 358 Ko)</a>

donne à l' écran : Cliquez ici pour voir Star Trek Voyager (Attention : 358Ko)

L'utilisateur doit cliquer sur la phrase contrastée "Cliquez ici pour voir Star Trek
Voyager" pour déclencher le téléchargement du fichier sur le disque dur de l'utilisateur.

On peut également choisir de mettre une image comme déclencheur de la commande en


inscrivant une image source comme référence au lieu de texte comme ceci :

==>   <a href="multimedia/voyager.avi">


                                                  <img src="image/voyager.gif"></a>

donne :

L'animation se déclenchera d'elle-même par le biais du programme d'accompagnement


choisi.

Nota :
Il est à noter, qu'il faut toujours nommer les fichiers en privilégiant les noms en minuscule e
sans accent, bannir les signes particuliers, et remplacer les espaces par "  _  " et si possible
utiliser des noms de 1 à 8 caractères.

Ouvrir une page avec un fond sonore


<html>
<head>
<title>Texte du titre</title>
<!-- Microsoft: -->
<bgsound src="musiquefonds.mid" loop="infinite">
</head>
<body>
<!-- Netscape: -->
<embed src="musiquefonds.mid" autostart="true" loop="true" hidden="true" height="0"
width="0">
<h1>Contenu de la page</h1>
</body>
</html>

BGSOUND insère un son dans une page Web ( Internet Explorer seulement)

Dans la partie HEAD de la page, ajouter la ligne suivante :


<BGSOUND src="nom.mid">
En théorie mettre uniquement des fichiers .WAV et .MID (midi). En pratique certains
fureteurs admettront plus de type que cela (Par exemple .ASF, le format de Microsoft).
Essayer de se restreindre à ces deux formats pour que tout le monde bénéficie de la
création. Les fichiers midi sont très avantageux pour le Web, leur qualité sonore n'est pas
parfaite loin de là, mais on peut assez facilement créer une mélodie qui ne tienne qu'en
quelques kilos-octets.

Les balises <EMBED> et <NOEMBED>

La balise <EMBED> permet l'intégration de fonds sonores, et est recommandée dans bien
des cas. Toutefois, elle n'est pas reconnue par tous les navigateurs. Il faut utiliser la balise
<NOEMBED> en cas de remplacement.

Joindre donc toujours la balise <NOEMBED> après une balise <EMBED> avec un message
s'affichant sur certains navigateurs du type :

<EMBED src="loop.wav" width="100" height="32" hidden="false" autostart="true"


loop="true"></EMBED>
<NOEMBED>Votre navigateur ne peut lire le fond sonore de cette page</NOEMBED>

Exemples

BGSOUND n'est reconnu que par Internet Explorer.


<BGSOUND SRC="son.mid" > joué une fois
<BGSOUND SRC="son.wav" LOOP=-1> joué à l'infini "-1". Si "LOOP=5" joué 5 fois

EMBED a été créé à l'origine par Netscape :


il est aujourd'hui partiellement reconnu par Internet Explorer.
<EMBED src="son.mid width=0 height=0 "></EMBED>
joué une fois, sans affichage du contrôle du son
<EMBED src="son.mid " width=300 height=25></EMBED>
joué une fois, avec affichage du contrôle du son
<EMBED src="son.mid " width=0 height=0 LOOP=true></EMBED>
joué à l'infini, sans affichage du contrôle du son

Mettre un fichier en téléchargement


Pour proposer le téléchargement d'un fichier, il suffit simplement de "zipper" le fichier.
par l'intermédiaire d'un logiciel de compression, pour réduire au minimum son volume, puis
d'utiliser la balise <a href="...> (identique à un lien hypertexte). Lors d'un clic sur ce lien, le
navigateur proposera le téléchargement de ce fichier.
Ex : <a href="fichier.zip">Télécharger ce fichier</a>

On peut utiliser :

 Winzip qui est un logiciel payant.


 PowerArchiver 6 est gratuit et disponible en français, on le charge sur internet sur
le site http://www.powerarchivaer.com/download .
Une fois sur le site, cliquer sur la ligne PowrArchiver2000 version 6.00, french version
6.00 et lancer le téléchargement de powarc60f.exe.
 ZIP rapide est distribué gratuitement sur le site de Kiriasse Logiciel
Introduction | Découvrez le HTML | La page HTML | Les liens hypertextes | Formater le texte
Mettre des images | Les tableaux | Les listes & définitions | Les formulaires | Le multimédia

   
    Programmation en HTML
    chapitre 5
  Les images
     
   

Afin d'illustrer le contenu des pages Web, il est possible d'y insérer des images.
Les formats d'images reconnus par les navigateurs HTML sont :
-les images en .GIF (Graphic Interchange Format) format breveté donc payantes en principe
-les images en .JPEG (Joint Photographic Experts Group),
-les images en .PNG (Portable Network Group) c'est un format de remplacement non breveté
pour les fichiers .GIF.

Ces formats sont intéressants car ils compriment les images; il ne faut pas oublier que sur
Internet, le poids est l'ennemi de la vitesse d'affichage...
 

Les fonds d'écran


On peut définir un fond de page en associant des attributs au marqueur <body>.
Ces attributs sont soit bgcolor, background.

 bgcolor :

associé au marqueur <body>, reçoit en variable un code hexadécimal qui


définira la couleur du fond :

<body bgcolor=#FFFFCC> :
c'est la couleur de fond de cette page

 background :

associé au marqueur <body>, reçoit en variable une image


"fond_gouttes_d_eau.gif" qui sera répétée autant de fois sur la page,
jusqu'à que le fond soit uniforme :

<body background="fond_gouttes_d_eau.gif">
Cliquer sur l'image pour voir l'effet de cette image
 

Insérer une image au fil du texte

Il est possible d'insérer des images dans une phrase :

Vous voyez que cette image  se trouve dans le milieu de la phrase.
 

align=bottom

L'image peut être alignée à la base du texte grâce l'attribut align (placé dans le marqueur
<img src="">) qui reçoit la variable bottom :

L'image "pin-up.gif" est  alignée à sa base.

<img src="image/pin-up.gif" width="150" height="75" align="bottom">  

align=top

L'image peut être alignée à la tête du texte grâce la variable top :

L'image "pin-up.gif" est  alignée à sa tête.

<img src="image/pin-up.gif" width="150" height="75" align="top">

align=middle

L'image peut être alignée au centre du texte grâce la variable middle :


L'image "pin-up.gif" est  alignée au centre.

<img src="image/pin-up.gif" width="150" height="75" align="middle">

Mettre une image à côté d'un texte

<align=left>

  Il est possible de positionner des images sur le côté d'un paragraphe


grâce à l'attribut align. Il est à noter qu'il n'est bien évidemment pas
possible de combiner ces deux attributs dans le même marqueur.
 <==   <align=left> donne :
 

<align=right>

  Il est possible de positionner des images sur le côté d'un paragraphe,


grâce à l'attribut align. Il est à noter qu'il n'est bien évidemment pas
possible de combiner ces deux attributs dans le même marqueur.

<align=right> donne : ==>

Autres commandes

Sous les navigateurs Netscape Navigator et Microsoft Internet Explorer, il est possible à part
d'une image, de réduire ou d'augmenter sa taille grâce à l'attribut width et height qui
doivent recevoir une taille en nombre de pixels.

Par exemple :

<img src="image/pin-up.gif" width="150" height="75">

Cette image donnerait avec width=300 et height=150


<img src="image/pin-up.gif" width="300" height="150">

Nota :
Il est à noter, qu'il faut toujours nommer les fichiers en privilégiant les noms en minuscule e
sans accent, bannir les signes particuliers interdit par Windows:

/,\,:,*,?,",<,>,

et remplacer les espaces par "  _  " et si possible utiliser des noms de 1 à 8 caractères.

Introduction | Découvrez le HTML | La page HTML | Les liens hypertextes | Formater le texte
Mettre des images | Les tableaux | Les listes & définitions | Les formulaires | Le multimédia

   
    Programmation en HTML
    chapitre 3
  Le lien Hypertexte :
     
   
Ce qui est agréable sur le Web, c'est la possibilité de circuler entre les différentes pages.
cette circulation s'effectue à l'aide de liens hypertextes, contenus dans les documents eux-
mêmes. Grâce à ces liens, la personne qui consulte des données n'a aucun besoin de
connaître l'adresse d'un site Web, pas plus que les URL (Uniform Ressource Locator) des
fichiers qu'il contient. Pour rendre leur présence explicite, les clients WEB (navigateurs) leur
associent une couleur particulière et/ou une mise en forme telle que par exemple le
soulignement.

Couleur des liens

La définition des couleurs des liens se fait en associant des attributs au marqueur <body>
(que nous avons vu au chapitre 3, "La page HTML"). Les couleurs sont attribuées à l'aide de
codes hexadécimaux.

 text

sert à définir la couleur du texte par défaut.


Par exemple : <body text="#000000">

 link

sert à définir la couleur des liens.


Par exemple : <body link="#0033FF">

 vlink

sert à définir la couleur des liens déjà visités.


Par exemple : <body vlink="#A100A1">

 alink

sert à définir la couleur d'un lien en cours de sélection.


Par exemple : <body alink="#FF0000">

Le tag <body> devient


<body text="#000000" link="#0033FF" vlink="#A100A1" alink="#FF0000">

Lien avec une page d'un autre site

Pour insérer un lien, il faut indiquer une référence (URL) et un élément, texte ou image,
visible à l'écran sur lequel on doit cliquer pour y accéder. Voici un exemple de code pour
obtenir un lien :

<a href="ex_page1.htm">une page toute simple</a>

Le lien apparaît alors en couleur contrastée et souligné dans le navigateur et donne: une pag
toute simple.

Les liens peuvent diriger le navigateur vers des sites HTTP, FTP, MAILTO... (vous pouvez en
effet, lier un élément avec une boîte aux lettres, un transfert...). Pour créer un lien, il s'agit
tout simplement de définir le type de document dans la commande A HREF comme dans
l'exemple qui suit :

<a href="http://www.moreaux.nom.fr">Venez sur mon site</a>

Ce qui aura pour résultat :

Venez sur mon site

Remarquez que lorsque vous survolez avec votre souris le lien hypertexte, (la souris devient
une main), vous pouvez lire sur la barre d'état (en bas de la fenêtre de votre navigateur)
l'adresse du lien auquel il se réfère.
 

Lien avec une page sur le même site

Le code :
<a href="page.html">Voici mon lien sur une autre page !!!</a>

donne tout simplement accès à une page HTML située au même niveau hiérarchique que la
page actuellement ouverte sur le serveur (la page appelée se situe dans le même dossier qu
la page contenant le lien).

 
 Lien avec une page sur le même site, mais dans un autre dossier

Le code :

<a href="dossier_b/page_n.html">Voici mon lien sur une page d'un autre dossier!!!</a
donne accès à une page HTML située à un autre niveau hiérarchique que la page
actuellement ouverte sur le même serveur (la page appelée se situe dans le dossier "b" ).
Liens sur une même page (les ancres ou sections)
La commande a name enregistre une encre à l'intérieur d'un document HTML. On
peut ensuite référer directement à ce point précis avec une commande a href. Dès
que vous cliquerez sur le lien visant une ancre, le navigateur ira se positionner
directement sur la ligne de texte où aura été placée l'encre. La commande peut se
taper directement comme ceci :
<a name="nom_de_l_ancre"></a>

ce qui indique au navigateur où se trouve la section (l'ancre) visée. Pour se rendre à cet
endroit, il faut taper la référence comme ceci : 

<a name="couleur"></a>

et le lien hypertexte

<a href="hypertexte.htm#couleur">Couleur des liens</a>


ou plus simplement
<a href="#couleur">Couleur des liens</a>

Pour essayer cette commande, cliquez sur le lien Couleur des liens et vous devriez vous
rendre à la section concernée de cette page.

Les liens a name fonctionnent aussi d'un document HTML à un autre. Ainsi, après avoir
identifié les sections d'un document avec <a name="generalites"></a>, il s'agit de taper la
commande complète

<a href="caracteres.htm#generalites">Caractères(Généralités)</a>

Ainsi, le lien indique d'abord le nom du fichier HTML dans lequel il faut se rendre et ensuite l
nom de la section à l'intérieur de ce fichier. Le nom du fichier et l'ancre sont séprarés par un
dièse ( # ).

Exemple : " Caractères (Généralités) ".


Introduction | Découvrez le HTML | La page HTML | Les liens hypertextes | Formater le texte
Mettre des images | Les tableaux | Les listes & définitions | Les formulaires | Le multimédia

Vous aimerez peut-être aussi