Initiation à l’intégration XHTML/CSS - séance 10
jan
14
2010
Dixième séance de cours, dans le cadre de la formation proposée aux étudiants SRC Hunan, dispensée par l’IUT Michel de Montaigne, Bordeaux III.
Cette séance a pour objectif de :
- Reprendre des fondamentaux de l’intégration XHTML (révisions et rappels),
- Présenter comment intégrer d’autres éléments (formulaires,…),
Sources
- Nicolas Royackkers - Le langage XHTML/CSS - Université de Picardie Jules Verne. Nous le remercions pour l’aide fourni.
Rappels sur l’intégration XHTML
Un document XHTML est consultable sur des médias différents :

Le recours aux CSS permet de varier les mises en forme sans changer le contenu de la page Web :

Rappel : des aides mémoires pour s’y retrouver…
- Code XHTML : http://www.gosquared.com/images/help_sheets/HTML%20Help%20Sheet%2002.pdf
- Code CSS : http://www.gosquared.com/images/help_sheets/CSS%20Help%20Sheet%2002.pdf
Structure d’une page XHTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <code><html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "?//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1?strict.dtd">
<html>
<head>
<title>ici le titre de la page</title>
<style type="text/css">
.Style1 { font-weight: bold;
font-style: italic;}
</style>
</head>
<body>
<p>contenu de la page...</p>
</body>
</html></code> |
Le corps de la page
Le corps de la page est l’endroit où doit être placé l’ensemble du contenu du document. Le balisage XHTML
permet de décrire la structure et la sémantique de ce contenu.
Éléments bloc et éléments en ligne
L’élément body (corps du document) admet un grand nombre d’éléments d’enfants. Ils sont tous optionnels
et l’ordre de leur apparition n’est pas contraint.
Titres et paragraphes
Les éléments de base de toute page de texte, qu’elle soit publiée sur le web ou non, sont les titres et les
paragraphes.
Les titres
Il existe six niveaux de titres possibles en XHTML. Ce sont : h1, h2, h3, h4, h5 et h6 (h est ici
l’abréviation du mot anglais header). L’élément h1 est un titre de niveau 1, qui est le niveau le plus élevé
dans la hiérarchie des titres. On l’utilise en général pour titrer la page. Les éléments h2 peuvent être
considérés comme des titres de chapitres, h3 comme des titres de sections, h4 comme des titres de
sous-sections, etc.
Exemple :
1 | <code><h1>Présentation</h1></code> |
Les paragraphes
Un paragraphe de texte est défini par l’élément p.
Exemple :
1 2 | <code><p>A mi-chemin entre Paris et Lille (moins d’une heure de train chacune),à deux heures de Bruxelles, à quatre heures d’Amsterdam et à cinq heures de Londres, l’université de Picardie est au coeur de l’Europe.</p></code> |
Les titres et les paragraphes sont des éléments de type bloc. Par défaut, les navigateurs afficheront un
espacement après chaque titre et chaque paragraphe.
Exemple du corps d’une page comportant un titre
général et deux chapitres :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <code> <h1>Présentation</h1> <h2>Amiens au coeur de l’Europe</h2> <p> A mi-chemin entre Paris et Lille (moins d’une heure de train chacune),à deux heures de Bruxelles, à quatre heures d’Amsterdam et à cinq heures de Londres, l’université de Picardie est au coeur de l’Europe.</p> <h2>Les sites d’implantation</h2> <p> L’université de Picardie Jules Verne est présente dans six villes de la région : Amiens, Beauvais, Creil, Saint-Quentin, Laon, Cuffies-Soissons.</p> <p>Bienvenue à l’Université de Picardie !</p> </code> |
Observez le rendu de cet exemple dans votre navigateur préféré.
Les sauts de ligne
Pour provoquer un saut de ligne à l’affichage sans pour autant changer de paragraphe, on utilise l’élément
sans contenu br (abréviation de l’anglais break rule).
Exemple :<p>Bienvenue<br />
à l’Université de Picardie !</p>
Sémantique du texte
Dans le texte d’une page, certains mots ou certaines expressions ont un rôle particulier. XHTML offre de nombreuses balises ayant un rôle sémantique pour les repérer. Comme on peut s’y attendre, presque toutes délimitent des éléments en ligne.
Emphase
L’emphase consiste à mettre en avant une portion de texte. Il s’agit de montrer qu’un mot ou une expression
possèdent une importance particulière. XHTML offre deux niveaux de mise en valeur : faible, avec l’élément
em et forte avec l’élément strong.
Exemple :
1 | <code> <p><em>Ce texte</em> est important, mais <strong>celui-ci</strong> est encore plus important !</p> </code> |
Citations
Deux éléments permettent de définir des citations : l’élément en ligne q (pour quote en anglais) et l’élément
bloc blockquote. Le choix se fera selon la longueur de la citation et son rôle dans le texte.
Exemples :
1 2 3 4 5 6 7 8 | <code> <p>Boileau a écrit : <q>Ce qui se conçoit bien s’énonce clairement</q>.</p> <blockquote> <p> Posons pour maxime que les premiers mouvements de la nature sont toujours droits : il n’y a point de perversité originelle dans le coeur humain. Il ne s’y trouve pas un seul vice dont on ne puisse dire comment et par où il est entré. </p> </blockquote></code> |
Observez le rendu de cet exemple dans votre navigateur préféré.
Indice et exposant
XHTML n’est pas un langage adapté à l’écriture d’expressions mathématiques complexes. Il permet
cependant d’exprimer les notions d’indice et d’exposant grâce aux éléments sub et sup respectivement.
Exemples :
1 2 | <code><p>La formule chimique du dioxyde de carbone s’écrit CO<sub>2</sub>.</p> <p>y = x<sup>4</sup> - 3x<sup>2</sup> + 1</p></code> |
Abréviation, acronyme et définition
Terminons par trois balises en ligne dont le nom est assez facile à retenir : abbr identifie une abréviation,
acronym un acronyme
Exemples :
1 2 | <code><p><abbr title="france">fr</abbr> est une abréviation répertoriée par l’<acronym title="International Standards Organization">ISO</acronym> pour désigner la langue française.</p></code> |
Les listes
Les listes simples constituent des éléments "bloc" à vocation uniquement structurelle. On distingue les listes
non ordonnées ul (unordered list) et les listes ordonnées ol (ordered list). Une liste doit comporter un ou
plusieurs éléments enfants li (list item). Il s’agit des éléments de la liste, également de type bloc, qui
contiennent les différentes parties du texte.
Exemple de la recette de l’oeuf à la coque :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <code><h1>Recette de l’oeuf à la coque</h1> <h2>Ingrédients</h2> <ul> <li>un oeuf bien frais</li> <li>du pain</li> <li>du sel</li> </ul> <h2>Préparation</h2> <ol> <li>faire bouillir de l’eau</li> <li>y plonger l’oeuf et déclencher le minuteur</li> <li>découper le pain en mouillettes</li> <li>retirer l’oeuf après 2 minutes de cuisson</li> <li>dans un coquetier, casser son extrémité supérieure</li> <li>saler légèrement et déguster avec les mouillettes</li> </ol></code> |
Lors du rendu du document par défaut, une liste non ordonnée sera représentée par une liste à puces, tandis
qu’une liste ordonnée sera représentée sous la forme d’une liste numérotée. Observez le rendu de cet exemple dans votre navigateur préféré.
Les liens
Nous voici parvenus au coeur du langage XHTML : les liens hypertextes ou hyperliens ou tout simplement liens. Permettant de lier une page avec n’importe quel autre document, ils sont sans doute à l’origine du
formidable succès qu’a rencontré le web.
Un lien est inséré à l’aide de l’élément en ligne a (abréviation de l’anglais anchor). La balise ouvrante a comporte l’attribut obligatoire href, qui spécifie l’adresse de la page désignée par le lien (URL du document
cible). L’élément a possède également des attributs optionnels qui peuvent être utiles dans certains cas. Citons notamment le title : donne une brève description du document désigné par le lien, généralement affichée sous forme
d’une info-bulle lors du survol du lien par le pointeur de souris.
Exemple de lien vers un autre site, également appelé lien externe :
1 | <code><p>Pour plus d’informations, consultez le site du <a href="http://www.w3.org" title="le site du W3C">W3C</a>.</p></code> |
Terminons ce tour d’horizon avec les liens spéciaux. Ceux-ci n’utilisent pas le protocole HTTP et vont déclencher l’exécution d’un autre logiciel.
L’exemple le plus courant est celui d’un lien de type mailto, qui va ouvrir le logiciel de messagerie configuré par défaut :
1 | <code><p><a href="mailto:nicolas.royackkers AT u-picardie POINT fr ">Contacter l’auteur</a> du cours</p></code> |
Images
Les navigateurs sont capables d’afficher des images dans les pages web. Les formats d’image supportés nativement par tous les navigateurs sont au nombre de trois : GIF, PNG et JPEG. Les deux premiers sont des formats utilisant une compression sans perte, le troisième offre une compression bien supérieure (dont le taux est réglable), mais au prix de la perte de certains détails de l’image.
Il comporte deux attributs obligatoires :
- src : l’adresse du fichier contenant l’image à afficher
- alt : un texte court décrivant le contenu de l’image ; cet attribut est indispensable pour lespériphériques de sortie non visuels (plage Braille, synthétiseur vocal, etc.) ou encore les navigateurs
n’affichant pas les images
Exemple :
1 | <code><p><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="champ de tournesols" /></p></code> |
L’élément img comporte différents attributs optionnels, dont on peut citer :
- height : hauteur d’affichage de l’image, en pixels
- width : largeur d’affichage de l’image, en pixels
Il est facile de combiner des éléments a et img pour créer une image cliquable, c’est-à-dire un lien
hypergraphique et non hypertexte. Il suffit de placer une image comme contenu d’un lien.
Exemple :
1 | <code><p><a href="http://www.google.fr"><img src="http://www.google.fr/intl/fr_fr/images/logo.gif" alt="champ de tournesols" /></a></p></code> |
Un clic de souris en n’importe quel point de l’image entraînera le chargement de la page désignée par le lien. Observez le rendu de cet exemple dans votre navigateur préféré.
Tableaux
En matière de création web, les tableaux possèdent une réputation sulfureuse. En effet, ils ont longtemps été
détournés de leur emploi normal pour servir à agencer les pages. Ainsi, un document était souvent découpé
en une multitude de cellules de tableaux imbriqués, chacune d’elles permettant de positionner précisément unélément de la page. Bien qu’efficace sur le plan visuel, cette technique de mise en page bafouait le rôle sémantique des tableaux et produisait un code excessivement lourd et difficile à maintenir. Très populaire dans la seconde moitié des années 90, elle a été rendue obsolète par la généralisation des feuilles de style.
Pour en savoir plus, consultez par exemple cet excellent article : En quoi la mise en page par tableaux est-elle stupide ? (http://www.cybercodeur.net/weblog/presentations/seybold/everything.html)
Cela étant précisé, les tableaux restent utiles pour présenter des données naturellement tabulaires, que ce soit
dans un document bureautique ou une page web. En XHTML, on insère un tableau à l’aide de l’élément
table. Ensuite, on définit les lignes du tableau à l’aide d’éléments tr (table row). Enfin, on définit les
cellules de chaque ligne à l’aide d’éléments td (table data). Un tableau doit comporter au moins une ligne
(élément enfant tr) et une ligne doit compter au moins une cellule (élément enfant td).
Exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <code><table> <tr> <td>Allemagne</td> <td>82</td> </tr> <tr> <td>Danemark</td> <td>5</td> </tr> <tr> <td>Pays-Bas</td> <td>16</td> </tr> </table> </code> |
Consultez cet exemple dans votre navigateur
La représentation par défaut est minimaliste : l’affichage des données occupe la place strictement nécessaire et le contour (ou bordure) des cellules n’est pas dessiné par la plupart des navigateurs. On pourra facilement modifier cela grâce aux feuilles de styles. On peut également donner un titre au tableau grâce à l’élément caption, qui, s’il est employé, doit être le premier élément enfant de l’élément table.
Exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <code><table border="1"> <caption>Peuplement de trois pays d’Europe</caption> <tr> <th>Pays</th> <th>Population (en millions)</th> </tr> <tr> <td>Allemagne</td> <td align="right">82</td> </tr> <tr> <td>Danemark</td> <td align="right">5</td> </tr> <tr> <td>Pays-Bas</td> <td align="right">16</td> </tr> </table></code> |
Consultez cet exemple dans votre navigateur
Comme dans les logiciels tableurs, XHTML permet de créer des tableaux dont certaines cellules sont
fusionnées, c’est-à-dire réunies en une seule. Pour fusionner plusieurs cellules d’une même ligne, on utilise
l’attribut colspan d’un élément td (ou th). La valeur de cet attribut est le nombre de cellules situées à droite
de la cellule courante à réunir avec celle-ci.
Exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <code><table border="1"> <caption>Notes du second trimestre</caption> <tr> <th>Prénom</th> <th>Maths</th> <th>Français</th> </tr> <tr> <td>Bianca</td> <td align="right">15</td> <td align="right">12</td> </tr> <tr> <td>Mamadou</td> <td align="right">11</td> <td align="right">18</td> </tr> <tr> <td>Jules</td> <td colspan="2" align="center">absent</td> </tr> </table> </code> |
Consultez cet exemple dans votre navigateur
De manière similaire, il est possible de fusionner des cellules appartenant à une même colonne grâce à
l’attribut rowspan de l’élément tr.
Les éléments génériques div et span
Pour aller plus loin encore, le langage XHTML met à disposition des développeurs deux éléments génériques. L’un est un élément de type bloc, c’est div. L’autre est un élément en ligne, c’est span. Aucun rôle sémantique n’est attribué à ces éléments.
L’élément div
Reprenons l’exemple du menu principal d’une page web et imaginons qu’il n’est pas constitué seulement une
liste de liens, mais également d’un paragraphe de texte. Comment regrouper sémantiquement ces différents éléments pour signifier que, ensemble, ils forment le menu principal de la page ?
Tout simplement en les incluant dans un bloc div nommé de façon pertinente avec id :
1 2 3 4 5 6 7 8 9 10 | <code><div id="menu"> <p>ZeBootik vous propose :</p> <ul> <li><a href="accueil.html">Accueil</a></li> <li><a href="produits.html">Produits</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Nous contacter</a></li> </ul> </div> </code> |
Comme on le voit, l’utilisation combinée de l’élément div et de l’attribut id est particulièrement adaptée à la définition des grandes parties qui constituent généralement tout document web : entête, menu, zone principale, pied de page, éventuels encarts publicitaires, etc.
L’élément span
L’élément span, de part son type en ligne, sert naturellement à enrichir la sémantique du document de manière locale. Continuons avec notre exemple culinaire et imaginons que nous souhaitions repérer sémantiquement tous les termes désignant des fruits ou des légumes dans le texte des recettes. Évidemment, aucun élément du langage XHTML ne joue un rôle aussi spécialisé. C’est là que l’élément span intervient.
Exemple :
1 2 3 4 | <code> <ul><li>Couper les <span class="fruit">pommes</span>en quartiers</li> <li>Peler et émincer l’<span class="légume">oignon</span></li></ul> </code> |
L’élément span ayant une utilisation locale, il est probable qu’il soit utilisé pour repérer plusieurs fois le même rôle sémantique dans une même page. C’est pourquoi il est le plus souvent utilisé avec un attribut class. Ces mécanismes de balisage peuvent être adaptés à tout domaine. Ils constituent un moyen d’enrichir et de personnaliser la structure et la sémantique d’un document de manière illimitée.
Les formulaires en XHTML
Les formulaires permettent de saisir des données dans une page web. Celles-ci sont ensuite envoyées au serveur HTTP pour être traitées. Effectuer une recherche par mots-clés, s’inscrire à un site ou encore envoyer un courrier électronique depuis une page sont quelques utilisations des formulaires parmi les plus courantes.
L’élément form
On introduit un formulaire dans un document XHTML grâce à l’élément bloc form. Il possède un attribut obligatoire, action, dont la valeur est l’adresse du programme qui traitera le formulaire sur le serveur.
Il est recommandé de spécifier un autre attribut de l’élément form. Il s’agit de method, qui définit la méthode d’envoi des données vers le serveur. Deux valeurs sont possibles : get ou post. La méthode get est sélectionnée par défaut mais elle ne permet pas de transmettre plus de 255 caractères de données. La méthode post, qui ne souffre pas de cette limitation, est généralement la mieux adaptée aux formulaires. La balise ouvrante d’un formulaire s’écrira donc par exemple :
1 | <code><form method="post" action="traitement.php"></code> |
Input et label
Un formulaire est composé d’une ou plusieurs zones de saisie. Chacune d’elle est formée d’un champ de saisie et d’un texte indiquant
le rôle de ce champ. L’élément en ligne label définit ce texte. Quant au champ de saisie, il sera la plupart du temps introduit grâce à l’élément en ligne input. L’ensemble est contenu dans un élément bloc quelconque, comme un paragraphe.
Exemple d’un formulaire de recherche comportant une seule zone de saisie :
1 2 3 4 5 6 | <code><form method="post" action="rechercher.php">
<p>
<label for="recherche">Rechercher : </label>
<input type="text" name="recherche" id="recherche" />
</p>
</form></code> |
L’attribut name de l’input
L’attribut name de l’élément input permet de donner un nom au champ de saisie. Ce nom est indispensable au programme qui traitera les données du formulaire du côté serveur. L’attribut type définit
la nature du champ de saisie. Les valeurs les plus courantes de cet attribut sont les suivantes :
submit : bouton d’envoi du formulaire
text : saisie de texte sur une seule ligne
password : saisie d’un mot de passe
checkbox : case à cocher
radio : case d’option (ou bouton radio)
Un formulaire doit toujours comporter au moins un bouton d’envoi. Il permet de soumettre les données saisies dans le formulaire au programme destiné à les traiter sur le serveur. Un bouton d’envoi est un élément input de type submit. L’attribut value permet de préciser si besoin le texte affiché dans le bouton. Ce dernier peut éventuellement tenir lieu de seul texte indiquant le rôle du champ de saisie (omission de l’élément label).
Exemple :
1 2 3 4 5 6 7 8 | <code><form method="post" action="rechercher.php">
<p>
<label for="recherche">Rechercher : </label>
<input type="text" name="recherche" id="recherche" />
<input type="submit" value="Rechercher" />
</p>
</form>
</code> |
Un élément input de type checkbox définit une case à cocher dans un formulaire. Elle fournit à l’utilisateur un choix booléen sur une option (c’est-à-dire, un choix de type « vrai ou faux » ou « oui ou non »). L’attribut optionnel checked="checked" permet de spécifier si la case sera initialement cochée (elle ne l’est pas par défaut).
Exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <code><form method="post" action="traite_options.php">
<p>Choisissez vos options :</p>
<p>
<input type="checkbox" name="jantes_alliage" id="jantes_alliage" />
<label for="jantes_alliage" >Jantes alliage</label> <br />
<input type="checkbox" name="peinture_metal" id="peinture_metal" />
<label for="peinture_metal" >Peinture métallisée</label> <br />
<input type="checkbox" name="clim_auto" id="clim_auto" />
<label for="clim_auto">Climatisation automatique</label> <br />
<input type="checkbox" name="gps" id="gps" />
<label for="gps">Système GPS</label> <br />
<input type="checkbox" name="assistance" id="assistance" checked="checked" />
<label for="assistance">Assistance 24h/24 (gratuit)</label>
</p>
<p>
<input type="submit" value="Confirmer" />
</p>
</form>
</code> |
Comme on le voit, l’élément input est très polyvalent. Il existe toutefois deux autres éléments permettant
d’insérer des champs de saisie dans un formulaire.
Le premier s’appelle textarea et définit une saisie de texte sur plusieurs lignes. Les attributs rows et cols permettent éventuellement de spécifier respectivement le nombre de lignes du champ de saisie et le nombre de caractères de chaque ligne.
Exemple :
1 2 3 4 5 6 7 8 9 10 11 | <code>
<form method="post" action="remarques.php">
<p>
<label for="texte_reclamation">Vos remarques complémentaires :</label> <br />
<textarea name="texte_reclamation" id="texte_reclamation" rows="8" cols="50"></textarea>
</p>
<p>
<input type="submit" value="Valider" />
</p>
</form>
</code> |
Une liste déroulante joue le même rôle qu’une zone d’options : présenter une liste de valeurs parmi lesquelles une seule peut être sélectionnée. La différence réside dans le fait que la liste n’est ici affichée qu’à la suite d’une action de l’utilisateur (frappe sur la touche Entrée ou clic de souris). En général, on choisit une liste déroulante lorsque le nombre de valeurs possibles est grand (exemple courant : liste de tous les pays du monde). Une liste déroulante est introduite dans un formulaire grâce à un élément select, auquel on n’oubliera pas de donner un nom grâce à l’attribut name. La liste doit comporter au moins un élément enfant option, qui définit une valeur sélectionnable dans la liste. La valeur de l’attribut value permet de distinguer les éléments option les uns des autres. L’attribut selected="selected" permet éventuellement de présélectionner une des valeurs dans la liste.
Exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <code>
<form method="post" action="mois_naissance.php">
<p>
<label for="mois">Quel est votre mois de naissance ? </label> <br />
<select name="mois" id="mois">
<option value="1">Janvier</option>
<option value="2">Février</option>
<option value="3">Mars</option>
<option value="4">Avril</option>
<option value="5">Mai</option>
<option value="6">Juin</option>
<option value="7">Juillet</option>
<option value="8">Août</option>
<option value="9">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select>
</p>
<p>
<input type="submit" value="Valider" />
</p>
</form>
</code> |
Exercice n°1 :
La page exemple-10.html contient plusieurs éléments de formulaire, mais cette page contient également des erreurs, à vous de télécharger cette page et de repérer les erreurs avant de proposer des corrections à celles-ci :
Une fois la page réparée et enregistrée sur votre PC, la page devrait être validée à l’aide du formulaire http://validator.w3.org/#validate-by-upload
L’appel aux objets multimédias en XHTML
En XHTML, les objets sont des données dont le format n’est pas géré par le langage et ne seront pas affichables directement par les navigateurs.
Exemples : animations Flash, applets Java, vidéos, sons, images utilisant un format exotique, etc.
Le contenu des objets peut être affiché dans le navigateur grâce a un plug-in (ou greffon)… à condition que ce logiciel optionnel ait été préalablement installé par l’internaute ! On n’est donc jamais assuré que les données contenues dans les objets pourront être consultées par un visiteur du site. C’est pourquoi il vaut mieux y recourir avec prudence et prévoir dans la mesure du possible un contenu alternatif.
Un objet est inséré dans une page web grâce à l’élément en ligne object. Ses principaux attributs sont :
- data : l’adresse du fichier contenant l’objet
- type : le format de l’objet, exprimé sous forme d’un type MIME
- height et width : la hauteur et la largeur de la zone d’affichage de l’objet, en pixels
- standby : un message affiché pendant le chargement de l’objet (qui peut être long)
Si l’objet est un programme (par exemple une applet Java ou animation Flash) et accepte des arguments, il est possible de lui transmettre via le code XHTML. On utilise pour ce faire un ou plusieurs élément param, en les déclarant comme éléments enfants de l’élément object. Chaque élément param définit un paramètre à transmettre lors de l’exécution de l’objet. Son attribut name spécifie le nom du paramètre et son attribut value sa valeur.
Le contenu de l’élément object (situé entre sa balise ouvrante et sa balise fermante) ne sera affiché que si le
visiteur ne possède pas de plug-in adéquat pour visualiser l’objet. Il est donc recommandé d’y placer un texte avertissant l’internaute que son ordinateur ne pourra pas afficher ce contenu.
Exemple :
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="890" height="289">
<param name="movie" value="http://www.frenchwood.com/bandeau_frenchwood.swf" />
<param name="quality" value="high" />
<embed src="http://www.frenchwood.com/bandeau_frenchwood.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="890" height="289"></embed>
</object>
Cette page contient une animation Flash insérée à l’aide du code précédent.
Exercice n°2 :
- A partir de la page exemples/xhtml_objets.html que vous enregistrez sur votre PC, modifier le code source entre les balises body pour afficher l’animation flash disponible à l’adresse : http://www.pmu.fr/pmu/img/home/autopromo.swf
- Vérifier le bon affichage de l’animation sour IE et un autre navigateur.

