Admin CliCours
Support de cours HTML5 intégrer un média dans une page, tutoriel & guide de travaux pratiques HTML5 en pdf.
Conseil d’expert
Afin d’adapter la nouvelle définition sémantique de la balise <hr>, vous pouvez utiliser les CSS pour modifier son apparence. Notez l’exemple suivant :
hr{
height: 15px;
background: url(’decorative.gif’);
no-repeat 50% 50%;
}
Mais vous devez être prudent avec cette démarche. Au moment où nous écrivons cet ouvrage, si Safari et Firefox remplacent bien la ligne horizontale avec l’élément graphique de ce code, ce n’est pas le cas d’Internet Explorer, lequel entoure l’élément graphique de lignes horizontales.
Solution 2.2 – Utiliser la balise <iframe>
Vous pouvez choisir la balise <iframe> pour créer un navigateur au sein d’un autre navigateur et ouvrir ainsi des documents provenant d’autres localisations (voir Figure 2.2).
Ouverture de deux sites web externes avec la balise <tag>.
À la Figure 2.2, nous avons ouvert deux sites web séparés avec deux balises <iframe>. Cette balise a une importance particulière car le HTML5 ne prend pas en charge les attributs scrolling, frameborder et marginheight, alors qu’ils l’étaient tous dans les versions antérieures.
Tour d’horizon
L’une des spécifications proposées de la balise <iframe > est l’attribut seamless. Il permet à une source extérieure d’être intégrée dans le document hôte sans qu’il y ait de bordure ou de barre de défilement. Cela signifie que la source extérieure apparaîtra comme si elle appartenait au document hôte. Malheureusement, aucun navigateur ne prend cet attribut en charge au moment où nous écrivons cet ouvrage.
Mise en œuvre
Le code suivant a été utilisé pour créer l’exemple visible à la Figure 2.2 :
<!DOCTYPE html >
<html>
<head>
<title>Utilisation de la balise <iFrame></title>
</head>
<body>
<strong> Utilisation de la balise iFrame</strong><hr>
<iframe src= »http://www.apress.com/ » width= »600″ height= »250″ seamless>
➥ </iframe><br>
<iframe src= »http://www.friendsofed.com/ » width= »600″ height= »250″ seamless>
➥ </iframe><br>
</body>
</html>
Notez que, bien que l’attribut seamless ait été utilisé dans ce code, vous voyez toujours les barres de défilement ainsi que les bordures. Cela confirme que le navigateur ne le prend pas en charge.
Conseil d’expert
Dès lors qu’un contenu a une source extérieure, la sécurité est un facteur important. En HTML5, la balise <iframe> dispose d’un bac à sable qui lui permet d’améliorer sa sécurité. Les attributs du bac à sable incluent :
• allow-scripts. Bloque ou autorise l’exécution d’un script, y compris en JavaScript.
• allow-forms. Bloque ou autorise la soumission de formulaire.
• allow-same-origin. Force le contenu du document extérieur à provenir la même origine que celui qui l’affiche. Ainsi, une page ne peut recevoir de données depuis une origine et écrire ensuite une donnée vers une autre origine.
• allow-top-navigation. Bloque ou autorise la navigation vers l’élément parent ’_top’.
Solution 2.3 – Intégrer un média dans une page
Tout comme la balise <iframe> de la section précédente, la balise <embed> sert à intégrer un contenu externe dans une page web hôte. Cependant, l’accent est porté ici sur les médias tels que des photos, des vidéos, des sons et, malgré les nombreuses rumeurs affirmant le contraire, du contenu Flash. La Figure 2.3 est un exemple du résultat que l’on peut obtenir (en supposant qu’une photographie ait été appelée depuis une source extérieure).
……….
Télécharger le cours complet
