Apprendre le langage HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre le langage HTML (HyperText Markup Language) Niveau recommandé pour le cours de Apprendre le langage HTML (HyperText Markup Language) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 13: Balises spéciales: marquee, iframe et object

Toutes les pages

Balise <marquee>

La balise <marquee> permet de faire défiler un objet HTML (texte, image...). Elle a été développé par Microsoft et intégrée initialement à son navigateur "Interner Explorer". Cependant, d'autre navigateurs l'on également pris en charge, à l'exception de "Netscape Navigator" qui affiche le contenu de la balise sans le faire défiler.

Le comportement et l'allure de la balise <marquee> peuvent être personnalisés grâce à de nombreux attributs.

attribut behavior

L'attribut <behavior> agit sur le style d'animation souhaité. Il peut avoir trois valeurs différentes:
  • scroll: C'est le comportement par défaut. Il permet de faire défiler l'objet d'un coté à un autre. Quand l'objet disparaît, il réapparaît à l'endroit initial et refait le cycle.
  • slide: L'objet défile d'un coté vers l'autre, quand il atteint la position finale il s'arrête et l'animation est interrompue.
  • alternate: L'objet défile en va-et-vient entre la position 1 et la position 2.

Exemple:
<marquee behavior="alternate">
   Texte défilant en va-et-vient
</marquee>
Le code donne ceci:
Texte défilant en va-et-vient

Les attributs width et height

Désignent respectivement la largeur et la hauteur de la zone de défilement. Ils sont exprimés en pixel (px) qui est implicite (la valeur est déclarée sans l'unité).

L'attribut bgcolor

Comme pour les tableau et la balise <body>, l'attribut bgcolor spécifie la couleur d'arrière plan de la zone de défilement. Elle est exprimée en nom anglais de la couleur ou code de celle ci.

L'attribut direction

L'attribut direction spécifie la direction du défilement. Elle peut avoir 4 valeurs:
  • left: Signifie vers la gauche. L'objet défile de droite à gauche.
  • right: L'objet défile de gauche à droite.
  • up: L'objet défile du bas vers le haut
  • down: L'objet défile du haut vers le bas

Exemple:
<marquee behavior="scroll" direction="left" width="100%" bgcolor="#EEEEEE">
   <h2>Texte défilant horizontalement</h2>
</marquee><br>
<marquee behavior="scroll" direction="down" width="100%" height="200" bgcolor="#EEEEEE">
   <h2>Texte défilant verticalement</h2>
</marquee>
Après exécution on obtient ceci:

Texte défilant horizontalement


Texte défilant verticalement

Attribut scrollamount

L'attribut scrollamount signifie le pas de défilement. Entre l'instant t et t+1 l'objet parcours une distance appelée pas de défilement. Plus le pas est grand plus le défilement aura l'air rapide et inversement. Il accepte une valeur numérique qui désigne le nombre de pixels à parcourir.

Attribut scrolldelay

L'attribut scrolldelay signifie le délai de défilement. Il s'agit de la durée pendant laquelle l'objet reste dans la même position. Plus il est grand plus le défilement est lent. Il a comme valeur un nombre entier qui désigne le nombre de millisecondes (l'unité ms est implicite).

Attribut loop

L'attribut loop indique combien de fois le défilement sera répété. Par défaut il vaut la valeur -1 qui signifie à l'infini.

Exemple:
<marquee width="100%" scrollamount="2" scrolldelay="10">
   <!-- L'objet parcourt 2px chaque 10ms -->
   <img src="http://www.chiny.me/images/footerlogo.png">
</marquee>
Ce qui donne ceci:

Balise <iframe>

La balise <iframe> permet d'insérer une page web au sein d'une autre. Elle peut être insérée n'importe où entre les balises <body> et </body>.
De nombreux attributs peuvent être appliqués à la balise, en voici les plus importants:

Attribut src

Vous l'avez deviné. L'attribut src permet d'indiquer le chemin (ou l'URL) de la page web à insérer dans la balise <irfame>. Il n'est pas nécessaire que la page à insérer appartienne au même site Web. On peut toujours appeler une page appartenant à autre site.

Attributs width et height

Comme pour les images ou les tableaux, les attributs width et height permettent d'indiquer, respectivement, la largeur et la hauteur de l'iframe.

Attribut frameborder

L'attribut frameborder permet de spécifier l'épaisseur de la bordure de l'iframe. Elle est utilisée exactement comme l'attribut border sur les images ou les tableaux.

Attribut scrolling

Si vous définissez yes comme valeur de l'attribut scrolling alors, une barre de défilement s'affichera sur l'iframe si la page appelée est plus grande que les dimensions de celle ci.

Attribut name

L'attribut name permet d'identifier une iframe par un nom unique.

Exemple:
<iframe name="moniframe" width="100%" height="400" src="https://www.chiny.me" frameborder="0" scrolling="yes">
</iframe>
Ce qui donne le résultat suivant:

Balise <object>

La balise <object> a été inclues au langage HTML pour permettre au navigateur d'afficher tout type de documents (que, normalement, il ne peut pas comprendre) comme du contenu multimédia (audio ou vidéo) ou encore des documents PDF...

La balise <object> dispose de nombreux attributs dont certains sont un peu compliqués à coder. Cependant, nous allons voir les attributs de base pour que vous compreniez l'utilité de cette balise et ce dont elle est capable de faire.

Attributs width et height

Ces deux attributs vous sont familier non? En effet, leur rôle reste inchangé; spécifier la largeur et la hauteur de la zone d'affichage de la balise <object>. On peut leur donner des valeurs en pixel (unité implicite qu'on ne doit pas déclarer) ou en pourcentage.

Attribut type

Cet attribut a pour rôle d'indiquer le type de données à insérer dans la balise <object> comme par exemple text/html qu'on a déjà vu et qui signifie document texte écrit en HTML ou encore application/pdf qui désigne un document PDF.

Attribut data

L'attribut data spécifie le chemin (ou URL) du contenu à insérer dans la balise <object>.

Voici une exemple d'affichage d'un document PDF sur le navigateur:
<object data="docs/ExemplePDF.pdf" type="application/pdf" width="100%" height="400">
   <a href="docs/ExemplePDF.pdf">Le PDF</a>
</object>
Cela donne le résultat suivant:
Vous avez certainement remarqué dans le code un lien hypertexte qui pointe sur le document PDF. Ce lien s'affichera au cas où le navigateur ne peut pas afficher correctement le contenu. En effet, il existe des contenus qui nécessitent des plugins spéciaux. Si le navigateur n'en dispose pas alors il ne pourra pas afficher convenablement le contenu de la balise <object>