TD2 : Langage HTML
I. Iframe
La balise <iframe> permet d’incorporer une page web à l’intérieur d’une autre. On pourra grâce à elle
récupérer une vidéo YouTube ou Dailymotion, une carte Google Maps ou encore un album Picasa.
Cherchez une vidéo sur YouTube. En dessous de la vidéo, vous trouverez un bouton ‘Partager’. Cliquez
dessus et choisissez ‘Intégrer’.
On y trouve la balise iframe avec les attributs suivants :
• Height et width précise la taille en pixels du cadre qui incorporera la page. On peut les modifier
à notre guise.
• Src indique la page qui va être incorporée. Il s’agit ici d’une page YouTube épurée qui ne
contient que la vidéo.
• Frameborder indique la taille de la bordure du cadre en pixels.
• Et enfin allowfullscreen précise que la vidéo peut être vue en plein.
1- Ajoutez la vidéo en bas de votre page [Link].
2- Insérer une deuxième vidéo à partir du fichier fourni sur Icampus.
Il est tout autant possible d’insérer une piste audio dans votre site web. Veuillez insérer la piste audio
à partir du fichier fourni sur Icampus.
Il est également possible d’intégrer des éléments d’autres sites de la même manière. Un autre exemple
classique sont les cartes Google Maps.
Allez dans Google Maps. Cherchez Faculté de Gestion, Économie & Sciences de l’Université
Catholique de Lille. Allez dans Partager / Intégrer une carte. Cliquez sur ‘Copiez le contenu HTML’
pour copier le code <iframe>. Insérez ce contenu en bas de votre page [Link].
II. Object
Créez une nouvelle page web et insérez un lecteur de PDF à l’aide de la balise <object>. A l’aide de
l’attribut target, ajoutez deux liens pour l’ouverture de la liseuse de PDF : (1) au sein de la même page ;
(2) dans un nouvel onglet en utilisant l’attribut target et les valeurs suivantes : _blank et _self.
<object data="[Link]" width="500" height="500"></object>
1
III. Tableaux
En HTML, un tableau est décrit ligne par ligne, de haut en bas. On retrouve quatre balises.
• La balise <TABLE> marque le début du tableau.
• La balise <TR> (pour Table Row) décrit une ligne
• La balise <TD> (pour Table data) décrit une cellule de données.
• On trouve également <TH> (Table Header) qui décrit une cellule de titre, qui peut donc être
utilisée à la place de <TD> et qui sera affichée différemment (en gras normalement).
Ainsi un tableau ayant la forme suivante :
Nom Prénom
Marie Dupont
Jean Durant
S’écrirait ainsi en HTML :
<TABLE>
<TR> <TH> Nom </TH> <TH> Prénom </TH> </TR>
<TR> <TD> Marie </TD> <TD> Dupont </TD> </TR>
<TR> <TD> Marie </TD> <TD> Dupont </TD> </TR>
</TABLE>
A noter que le tableau s’affichera sans bordure. Là encore, ne vous inquiétez pas. Il s’agit de l’affichage
par défaut, nous verrons un peu plus bas comment modifier ceci. Notez aussi la possibilité de fusionner
des cellules horizontalement avec l’attribut COLSPAN et en indiquant le nombre de colonnes à
fusionner. Par exemple, le tableau suivant :
Liste de clients
Marie Dupont
S’écrirait :
<TABLE>
<TR> <TH COLSPAN=’2’>Liste de clients</TH> </TR>
<TR> <TD> Marie </TD> <TD> Dupont </TD> </TR>
</TABLE>
On trouve aussi l’attribut ROWSPAN qui permet de faire des fusions verticales, et qui fonctionne d’une
manière similaire.
2
Ouvrez le dossier « Tableau » disponible sur ICampus. Utilisez le fichier « [Link] » pour
reproduire le tableau ci-dessous :
▪ Balises sémantiques :
Nous pouvons convenir que le tableau ci-dessus est assez peu lisible, en HTML, nous avons à notre
disposition des éléments de tables avancés :
o <thead> : regroupe un ensemble de lignes composant l’entête des colonnes d’un tableau ;
o <tbody> : regroupe un ensemble de lignes composant le corps d’un tableau ;
o <tfoot> : regroupe un ensemble de lignes composant la conclusion d’un tableau, il peut être
par exemple utilisé pour synthétiser des colonnes en sommes ;
o <th> : définit une cellule d’en-tête d’un groupe de cellule qui peut être disposé en ligne ou en
colonne;
o <caption> : doit être le premier enfant de <table> et permet d’en définir la légende.
<thead>, <tbody>, <caption> et <tfoot> sont des éléments sémantiques destinés à des facilités
d'interprétation. A ce titre, elles ne sont pas obligatoires mais leur utilisation est vivement encouragée.
Améliorez le tableau précédemment écrit pour obtenir le résultat suivant :
Vous pouvez remarquer que certaines données sont dupliquées. Il peut être intéressant de regrouper
ces cellules afin d’alléger le tableau.
Utilisez les attributs “rowspan” et “colspan” pour fusionner les données dupliquées
3
A l’aide de toutes les notions précédemment abordées, établissez une classification des
planètes du système solaire :
