Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Programmation en HTML chapitre 9 Le multimédia Un fichier HTML peut incorporer

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>  <bgsound src="musiquefonds.mid" loop="infinite"> </head> <body>  <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 à uploads/Voyage/ programmation-en-html.pdf