CHAPITRE 2:
LE LANGAGE HTML
Programmation WEB Dr. Manel FOURATI 1
Plan du chapitre:
1. Introduction au HTML
2. Historique de HTML
3. Syntaxe de HTML
4. Structure d’un document HTML
5. Validation d’une page Web par W3C
6. Eléments de structuration du contenu
7. Liens hypertextes
8. Les images
9. Les tableaux
10. Les formulaires
11. Quiz
Programmation WEB Dr. Manel FOURATI 2
▪ Le HTML (Hyper Text Markup Language) est un langage permettant de gérer et
organiser le contenu qui doit être affiché sur la page web (du texte, des liens, des
images…).
▪ HTML a été développé pour la présentation des données sur le point de se focaliser
sur leur apparence afin de créer des pages web pouvant être lues dans des
navigateurs.
▪ Standardisé par le W3C (World Wide Web Consortium)
▪ Le W3C, organisme de standardisation à but non-lucratif, fondé en octobre1994
comme un consortium chargé de promouvoir la compatibilité des technologies du
Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.
Programmation WEB Dr. Manel FOURATI 3
▪ Un document HTML doit avoir l’extension .html (ou .htm)
▪ HTML est un langage de balisages.
Exemple: <title>Titre de la page</title>
▪ Il permet :
o La mise en forme de documents (police, styles, tableaux, listes, ...)
o La création d’hyperliens.
o L’insertion d’images animées, réactives (i.e. jouant le rôle d’un lien)
o L’insertion d’autres composantes multimédia (sons, vidéo)
o La définition des formulaires de saisie
o L’insertion d’applications interactives (applets java, scripts,...) 4
Programmation WEB Dr. Manel FOURATI 4
▪ Un document HTML est structuré par des balises et interprété (visualisé) dans un
navigateur (Mozilla Firefox, Internet Explorer, Safari, etc.)
Programmation WEB Dr. Manel FOURATI 5
▪ HTML 1: la première version créée en 1990.
▪ HTML 2 (1994): Les règles et le fonctionnement de cette version sont donnés par le
W3C.
▪ HTML 3 (1996): Cette version rajoute de nombreuses possibilités au langage
comme les tableaux, les applets, les scripts, le positionnement du texte autour des
images, etc.
▪ HTML 4(1998): La version la plus répandue du HTML. Elle permet pour la
première fois d'exploiter des feuilles de style (CSS).
▪ HTML 5(2008): Elle apporte de nombreuses améliorations comme la possibilité
d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc.
Programmation WEB Dr. Manel FOURATI 6
▪ Principe de balise
▪ HTML est un langage de balisage:
o Une balise (Tag en anglais) est une suite de mots non sensible à la casse (pas de
différence entre majuscules et minuscules) entre < et >.
o Une balise donne des informations de structure ou de présentation du contenu de
la page (texte, images, etc.).
Balise
Balise
<p> Ecrire un paragraphe en HTML</p>
Contenu
Programmation WEB Dr. Manel FOURATI 7
▪ Il existe deux types de balises :
o Balises avec contenu (les balises en paires) :
✓ Elles s'ouvrent, contiennent du texte, et se ferment plus loin
Exemple : <title> Mon premier exemple</title>
✓ On distingue une balise ouvrante (<title>) et une balise fermante (</title>)
✓ La balise de fin doit utiliser la même casse que la balise de début
<NomBalise attributs> contenu…… </NomBalise>
Balise ouvrante Balise fermante
Programmation WEB Dr. Manel FOURATI 8
<NomBalise attributs> contenu…… </NomBalise>
Balise ouvrante Balise fermante
▪ NomBalise: mot clé désignant un élément particulier
▪ Contenu: peut contenir du texte ou d’autres balises
▪ Attributs: représente les différents paramètres associés à l’élément, sous la forme
d’une liste de nom="valeur", séparés par des espaces.
Programmation WEB Dr. Manel FOURATI 9
o Balises sans contenu (les balises orphelines ou vides) :
✓ Servent le plus souvent à insérer un élément à un endroit précis
N.B. le / de fin n'est pas obligatoire. On pourrait écrire seulement <img>
Programmation WEB Dr. Manel FOURATI 10
Remarque:
▪ Les noms des balises sont prédéfinis dans les spécifications HTML, on ne peut pas
définir de nouvelles balises!
▪ Quelques exemples: <html>, <body>, <img>, <p>, <a>, ...
Programmation WEB Dr. Manel FOURATI 11
Imbrication des balises:
▪ Les balises peuvent être imbriquées.
▪ Elles sont ouvertes et refermées dans l’ordre:
<b><i>…</i></b> et non <b><i>…</b></i>
▪ La première balise ouverte sera la dernière à être fermée.
Attention: Le chevauchement des balises est une grave erreur.
▪ Exemple de balises imbriquées :
<b><u>Ici les balises sont correctement imbriquées.</u></b>
▪ Exemple de balises chevauchées :
<b><u>Ici les balises ne sont</b> pas correctement imbriquées </u> 12
Programmation WEB Dr. Manel FOURATI 12
▪ Les attributs et les valeurs des balises
o Les attributs sont plus ou moins obligatoires pour préciser les propriétés des balises
o Exemples: adresse des liens, source d'une image, …
o L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur
o On peut mettre les valeurs des attributs entre simple cote (‘’), double cote (" " ) ou rien.
o Une balise peut contenir plusieurs attributs.
Exemple : <img src=“ImageFleur.png" width="400" height="250" />
13
Programmation WEB Dr. Manel FOURATI 13
Elément Racine de
tous les autres
éléments
Entête
Corps
Programmation WEB Dr. Manel FOURATI 14
Programmation WEB Dr. Manel FOURATI 15
<!doctype html>
<html>
<head>
<title>Ma première page web
</title>
</head>
<body>
<p>Bonjour!</p>
</body>
</html> <title>: Le titre d’une page web est affiché dans la barre de titre du
navigateur.
Programmation WEB Dr. Manel FOURATI 16
▪ Le DOCTYPE est la première ligne du document HTML.
▪ Il permet au navigateur de savoir quelle version de HTML est utilisée sur la page.
▪ Obligatoire pour valider une page (validateur W3C) et pour conserver la
compatibilité du rendu de votre page sur les différents navigateurs modernes.
Exemples:
▪ Doctype pour HTML 4: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
▪ Doctype pour HTML 5: <!doctype html>
Programmation WEB Dr. Manel FOURATI 17
▪ Tout document HTML commence par la balise <html> et se ferme en fin de
document par la balise </html>
▪ L’attribut lang peut être ajouté à cette balise: <html lang= "fr " >. Il permet de
spécifier la langue de traitement du document pour:
o Indexation dans la bonne langue par les moteurs de recherche
o Synthèse vocale
o Vérification orthographique des formulaires
▪ La balise <html> contient nécessairement deux balises définissant: l'entête
du document (<head>) et le corps du document (<body>)
Programmation WEB Dr. Manel FOURATI 18
▪ L’entête du document HTML peut contenir des méta-informations et elles
ne seront pas affichées sur la page :
o La balise <title>: son contenu est affiché dans l’onglet du navigateur
o La balise <meta>: sert à définir des attributs de description et de gestion
du document.
o Ces informations sont importantes pour l’indexation et le référencement
du document par les moteurs de recherche.
19
Programmation WEB Dr. Manel FOURATI 19
▪ La balise <meta>:
On distingue plusieurs applications, chacune définie par l’usage au choix :
o d’un attribut name, et content
o d’un attribut http-equiv et content
o d’un attribut charset seul
20
Programmation WEB Dr. Manel FOURATI 20
Attribut Valeurs Rôle
name application-name Nom de l’application web que la page représente
author Auteur du document
description description du contenu
generator Programme ou système ayant généré le contenu. Ne doit pas
être utilisé si le document est conçu à la main
keywords mots-clés relatifs au contenu
http-equiv refresh Rafraîchissement de la page
default-style Feuille de style préférée
content-type Déclaration du type MIME (text/html) et de l’encodage des
caractères du document
charset encodage des caractères Encodage des caractères utilisé
21
Programmation WEB Dr. Manel FOURATI 21
▪ L’élément <meta> : name
<meta name="author" content="Moi-même">
<meta name="description" content="On décrit le contenu
du site web ici">
<meta name="keywords" content="HTML, CSS, Javascript">
<meta name="generator" content="Mon éditeur HTML">
Programmation WEB Dr. Manel FOURATI 22
▪ L’élément <meta>: http-equiv
<!-- Rafraîchissement de la page toutes les secondes -->
<meta http-equiv="refresh" content="2" />
<!-- Redirection vers une autre URL au bout de 5 secondes -->
<meta http-equiv="refresh" content="5;url=http://www.eniso.rnu.tn" />
<!-- Déclaration de l’ensemble de style préféré -->
<style title="monstyle1"><!-- CSS --></style>
<meta http-equiv="default-style" content="monstyle1">
<!-- Déclaration de l’encodage des caractères -->
<meta http-equiv="content-type" content="text/html;charset=utf-8">
23
Programmation WEB Dr. Manel FOURATI 23
▪ L’élément <meta>: charset
<meta charset="UTF-8">
<meta charset="ISO-8859-1">
permet de définir l’encodage de
caractère de la page
(à mettre directement sous le <head>)
24
Programmation WEB Dr. Manel FOURATI 24
▪ Les balises <body> ... </body> délimitent le corps du document.
▪ Contient le corps du document html, c'est à dire toutes les informations
visibles par l'internaute.
▪ Le corps est structuré en sections, paragraphes, listes, etc.
Programmation WEB Dr. Manel FOURATI 25
<!-- Voici un commentaire en HTML-->
▪ Un document HTML peut contenir des commentaires,
▪ Tous les internautes peuvent voir votre code HTML ! N’écrivez donc pas d’infos
sensibles en commentaires comme des mots de passe !
▪ Mais: non affiché pour le client web.
▪ Ils sont utiles:
o pour le concepteur,
o et pour faciliter toute modification ultérieure notamment par une autre
personne.
Programmation WEB Dr. Manel FOURATI 26
▪ Deux validateurs de code source sont proposées par le W3C (World Wide Web
Consortium) :
o Validateur pour HTML : http://validator.w3.org
o Validateur pour CSS : http://jigsaw.w3.org/css-validator
Programmation WEB Dr. Manel FOURATI 27
▪ <PRE>: permet de représenter le texte préformaté de la façon dont il est
agencé dans le document HTML:
o sans modifier le nombre d'espaces
o en utilisant une police à chasse fixe (dont tous les caractères ont la
même largeur)
o en allant à la ligne au même endroit que dans le code source
Programmation WEB 28
▪ Exemple:
<!doctype html>
<html>
<head>
<title>Test de la balise PRE </title>
</head>
<body> Ceci
est un texte non
préformaté !
<pre>Ceci
est un texte
préformaté !</pre>
</body>
</html>
Programmation WEB 29
▪ Les balises <p> ... </p> permet de délimiter un paragraphe.
▪ Le retour à la ligne est automatique pour chaque paragraphe.
▪ Pour forcer un retour à la ligne dans un document, il faut utiliser la
balise vide <br/>
<!doctype html>
<html>
<head>
<title>Test de la balise P </title>
</head>
<body>
<p>Ceci est un premier paragraphe</p>
<p>Ceci est un deuxième paragraphe</p>
</body>
</html>
Programmation WEB 30
▪ <strong>… </strong>: permet de mettre en valeur le texte (en gras).
▪ <em>… </em>: permet de mettre le texte en italique.
▪ <mark>… </mark>: permet d’appliquer un style surligné sur le texte.
<!doctype html>
<html>
<head>
</head>
<body>
<strong>Ceci est un texte en gras</strong><br/>
<em>Ceci est un texte italique</em><br/>
<mark>Ceci est un texte surligné</mark><br/>
</body>
</html>
Programmation WEB 31
▪ <b> Ceci est un texte en gras </b> :Texte en gras
▪ <i> Ceci est un texte italique</i> :texte en italique
▪ <u> Ceci est un texte souligné</u> :texte souligné
▪ <s> Ceci est un texte barré</s> : texte barré
▪ Texte <sup>Ceci est un texte en exposant</sup>:
texte en exposant
▪ Texte <sub> Ceci est un texte en indice</sub> :
texte en indice
Programmation WEB Dr. Manel FOURATI 32
▪ La balise <hr/> (horizontal rule) indique une séparation majeure dans le
document: rendue graphiquement par une ligne horizontale.
<!doctype html>
<html>
<head>
</head>
<body>
<p>paragraphe1</p>
<hr/>
<p>paragraphe2</p>
</body>
</html>
Programmation WEB Dr. Manel FOURATI 33
▪ HTML 4 nécessite l’utilisation d’entités codés :
▪ HTML 5 supporte l’encodage : UTF-8
▪ L’encodage doit être défini à l’entête du document HTML:
▪ <meta charset= "utf-8" />
Programmation WEB Dr. Manel FOURATI 34
▪ Il existe 6 balises permettant de représenter les titres de sections, par
importance décroissante :
o <h1>Titre de niveau 1</h1>
o <h2>Titre de niveau 2</h2>
o <h3>Titre de niveau 3</h3>
o <h4>Titre de niveau 4</h4>
o <h5>Titre de niveau 5</h5>
o <h6>Titre de niveau 6</h6>
Programmation WEB Dr. Manel FOURATI 35
▪ HTML propose trois types de listes:
o Liste non ordonnée
o Liste ordonnée
o Liste de définitions (ou lexique)
Programmation WEB Dr. Manel FOURATI 36
▪ Liste non ordonnée:
<ul>
<li> élément1 </li>
<li> élément2 </li>
<li> élément3 </li>
</ul>
Attribut type pour la balise <UL>
▪ type="square" : les icônes prennent la forme de carrés.
▪ type="circle" : les icônes prennent la forme de cercles.
▪ type="disc" : les icônes prennent la forme de disques.
Programmation WEB Dr. Manel FOURATI 37
▪ Liste ordonnée:
<ol>
<li> élément1 </li>
<li> élément2 </li>
<li> élément3 </li>
</ol>
Attribut type pour la balise <oL>
▪ type="A" : numérotation en lettres majuscules A, B, C, ...
▪ type="a" : numérotation en lettres minuscules a, b, c, ...
▪ type="I" : numérotation en chiffres romains I, II, III, IV, ...
▪ type="i" : numérotation en chiffres romains i, ii, iii, iv, ...
▪ type="1" : numérotation par défaut 1, 2, 3, ...
▪ start="n" : définit la valeur de départ du marqueur de la liste en cours.
Programmation WEB Dr. Manel FOURATI 38
▪ Liste de définitions:
<dl>
<dt>HTML</dt>
<dd>Langage informatique</dd>
</dl>
▪ <dl> définit la liste de description
▪ <dt> définit le terme
▪ <dd> décrit chaque terme
Programmation WEB Dr. Manel FOURATI 39
▪ Un lien hypertexte est un texte cliquable et souligné en bleu.
▪ Les liens sont introduits par la balise <a> ... </a>.
▪ En cliquant sur un lien, on peut se déplacer vers :
o un autre site ou une autre page du même site (lien externe)
o une autre partie du même document (lien interne)
o vers des fichiers (image, .PDF, etc.)
Programmation WEB Dr. Manel FOURATI 40
▪ Pour définir un lien hypertexte externe, on utilise la syntaxe suivante:
<a href="Destination"> lien </a>
▪ href: attribut de la balise <a>
▪ La destination est l’adresse d’une ressource complète de destination du lien.
▪ Un lien vers un autre site
o <a href="http://www.eniso.rnu.tn/">Eniso</a>
o Par défaut, le lien s'affiche en bleu souligné. Avec CSS on peut changer cette
apparence.
Programmation WEB Dr. Manel FOURATI 41
▪ Un lien vers une autre page du site de :
o Même dossier : <a href="page2.html">
o Dossier parent: <a href="../page2.html">
o Sous-dossier: <a href="dossier2/page2.html">
Exemple:
Programmation WEB 42
Créer un lien interne: Les ancres
▪ Les ancres servent à atteindre un endroit précis dans le document.
▪ On commence par définir les ancres, soit sur une balise existant déjà grâce à
l’attribut id, soit avec un <a id="..."> :
o <h3 id="tutorials">Tutorials</h3>
o <a id="tutorials">
Un lien vers une ancre dans la même page web:
▪ On fait le lien avec cette ancre: l'attribut href contiendra un dièse (#) suivi du nom
de l'ancre
o <a href="#tutorials"> tutorials</a>
Programmation WEB Dr. Manel FOURATI 43
Lien vers une ancre située dans une autre page
▪ Il suffit d’ajouter le nom de la page avant l’id de l’ancre
Exemple : <a href=" page1.html#ancre1">
<body>
<h1>Les ancres</h1>
<p>Accès direct à <a href="#intro">l'introduction</a></p>
<p>Accès direct à <a href="#cha1">Chapitre 1</a></p>
<p>Accès direct à <a href="#cha2">Chapitre 2</a></p>
<h2 id="intro">Introduction</h2>
<h2 id="cha1">Partie 1</h2>
<h2 id="cha2">Partie 2</h2>
</body>
Programmation WEB Dr. Manel FOURATI 44
Un lien qui affiche une infobulle au survol
L'attribut title dans la balise <a > affiche une bulle d'aide lorsqu’on pointe sur le lien.
Exemple:
<a href="cours.html" title="suivre mon cours!">mon cours</a>
Programmation WEB Dr. Manel FOURATI 45
L’attribut target (emplacement cible) va nous permettre de choisir où
doit s’ouvrir notre page de destination:
o sa valeur « _blank » ouvre la page dans un nouvel onglet ou
dans une nouvelle fenêtre selon le navigateur utilisé.
o "_top" : Ouvre la page dans la même page ou dans la
même fenêtre
Programmation WEB Dr. Manel FOURATI 46
Un lien pour permettre l'envoi d'un mail en HTML
<a href="mailto:
[email protected]">
envoyer un mail </a>
Un lien pour télécharger un fichier
<p>Téléchargez <a href="cours.pdf"> le cours</a></p>
Programmation WEB Dr. Manel FOURATI 47
▪ Pour insérer des images dans les documents, il faut employer la balise
vide <img/> dont les attributs sont :
o src="url" (endroit où l'image se trouve)
o alt="description" (description de l'image). Un texte alternatif à
afficher lorsque l’image ne s’affiche pas.
o L'attribut title (facultatif) permettant d'afficher une bulle d'aide
lorsque la souris pointe sur l’image)
Syntaxe:
<img src="ref_image" alt="description de l’image" title= " desc" />
Programmation WEB Dr. Manel FOURATI 48
▪ width et height: attibut de positionnement en spécifiant la taille des images
(width et height),
▪ L’utilisation des attributs de positionnement accélère le chargement de
l’image.
▪ Exemple:
<img src=“eniso.png" width="200" height="400"/>
Programmation WEB Dr. Manel FOURATI 49
▪ Pour qu’une image soit un lien, il suffit d’écrire :
<a href="page cible"> <img src= "nom_image"> </a>
▪ Exemple:
<a href=" https://validator.w3.org/">
<img src= " w3c.jpg" alt=" logo de W3C" title="Cliquez pour
valider votre code" />
</a>
Programmation WEB Dr. Manel FOURATI 50
▪ La balise <figure> représente une section qui est censée proposer des
illustrations: images, photos, diagrammes, codes, …
▪ Si une image illustre le texte (et n'est pas seulement décorative), il est
conseillé de la placer au sein de l’élément <figure>
▪ L’élément <figcaption> permet d'écrire la légende de l'image.
▪ L’élément <figure> a un rôle sémantique: indique que l'image a du sens et
qu'elle est importante pour la bonne compréhension du texte
▪ Exemple:
<figure>
<figcaption> Un des logos html5 </figcaption><img src="html5.png" alt="figure html5" />
</figure>
Programmation WEB Dr. Manel FOURATI 51
▪ La balise <map> sert à définir des zones réactives sur une seule
image afin de définir plusieurs liens sur la même image:
o L’image est découpée en petites zones cliquable
o Les liens correspondants sont exécutés après un clic, en
fonction de la position de la souris.
o On appelle l'ensemble de ces zones une carte, ou map.
Programmation WEB Dr. Manel FOURATI 52
▪ Les balises qui permettent de faire ces zones réactives sont
<map> et <area> étroitement liées avec la balise <img>.
▪ L'attribut usemap de la balise <img> va contenir le nom de la map
dont elle fait référence.
▪ Le nom de cette map est précédé d’un dièse (#).
▪ Exemple: <img src="adresse/image" alt="Description_image"
usemap="#nomDeLaMap">
Programmation WEB Dr. Manel FOURATI 53
▪ La balise <map> va contenir l'ensemble des zones réactives pour
l’image.
▪ Elle doit avoir l'attribut name renseigné et qui aura pour valeur le
nom de la map, le même renseigné dans l'attribut usemap de
l’image.
▪ La balise <area> sera une zone réactive dans notre map (il y a une
balise area par zone).
Programmation WEB Dr. Manel FOURATI 54
▪ La balise<area>définit une zone cliquable dans une image
o toujours imbriquée dans la balise<map>
o Sa forme est définie par les attributs:
✓ shape: qui prend les valeurs circle(cercle), poly (polygone),
rect(rectangle) et default (toute l’image)
✓ coords: coordonnées de la forme choisie
Programmation WEB Dr. Manel FOURATI 55
Syntaxe :
▪ Les zones rectangulaires:
<area shape="rect"
coords="x1, y1, x2, y2" href="adresse/de/destination">
▪ Les zones circulaires:
<area shape="circ"
coords="x, y, rayon" href="adresse/de/destination">
▪ Les zones polygonales:
▪ <area shape="poly" coords="x1,y1,..,Xn,Yn" href="adresse/de/destination">
Programmation WEB 56
Programmation WEB 57
Exemple
<img src="logoWindows.jpg" width="145" height="145" alt="Plan" usemap="#logo"/>
<map name="logo">
<area shape="rect" coords="0,0,70,70" href="http://microsoft.com" alt="Microsoft" />
<area shape="rect" coords="80,0,145,70" href="http://google.com" alt="Google" />
<area shape="rect" coords="0,80,70,145" href="http://www.w3.org/" alt="W3C" />
<area shape="rect" coords="80,80,145,145" href="www.wikipedia.org" alt="wiki"/>
</map>
Programmation WEB 58
▪ Les tableaux en HTML doivent être utilisés pour organiser de façon logique des
données
▪ Pour créer un tableau simple, il faut utiliser:
o <table> </table> pour définir le tableau en soi
o <tr> </tr> (table row) pour introduire une nouvelle ligne dans le tableau
o <td> </td> (table data) pour ajouter des cellules dans nos lignes
o <th></th> (table header) (encadre une cellule d'en-tête)
o <caption></caption>donne une légende au tableau juste après la balise <table>
.
Programmation WEB Dr. Manel FOURATI 59
Programmation WEB Dr. Manel FOURATI 60
▪ Exemple:
<table>
<tr>
<td> Sara</td>
<td> 22</td>
<td>Tunisie</td>
</tr>
<tr>
<td> Carmen</td>
<td> 18 </td>
<td> Espagne</td>
</tr>
</table>
Programmation WEB Dr. Manel FOURATI 61
▪ Exemple:
Pas de bordure
L’entête est par défaut
en gras
Programmation WEB Dr. Manel FOURATI 62
▪ Pour ajouter des bordures aux tableaux, il faut utiliser la propriété
CSS border
▪ La propriété border peut être appliquer soit:
o à l’élément table pour créer une bordure autour du tableau
o aux éléments td pour créer des bordures autour de chaque
cellule
o aux deux afin d’avoir une double bordure extérieure
Programmation WEB Dr. Manel FOURATI 63
<table border=‘1’>
<caption> liste des personnes</caption>
<tr>
<th> Pré nom</th>
<th> Age</th>
<th>Pays</th>
</tr>
<tr>
<td> Sara</td>
<td> 22</td>
<td>Tunisie</td>
</tr>
<tr>
<td> farah</td>
<td> 18</td>
<td>Italie</td>
</tr>
</table>
Programmation WEB Dr. Manel FOURATI 64
▪ Si vous voulez créer des tableaux assez longs, il est possible de
les structurer en les subdivisant en plusieurs parties.
▪ On distingue 3 parties dans un tableau : le haut du tableau
contenant la ligne d’en tête, le corps du tableau contenant les
informations du tableau et le pied du tableau servant à calculer
des totaux
▪ Pour définir ces parties, nous disposons des balises HTML
spécifiques :
o thead pour la tête du tableau
o tbody pour le corps du tableau
o tfoot pour le pied du tableau
Programmation WEB Dr. Manel FOURATI 65
▪ Exemple: <tr>
<table border=‘1’> <td>Janvier</td>
<thead>
<td>450d</td>
<tr>
<th>Mois</th> </tr>
<th>Dépense</th> <tr>
</tr> <td>Février</td>
</thead>
<td>520d</td>
<tfoot>
<tr>
</tr>
<td>Somme</td> <tr>
<td>1350d</td> <td>Mars</td>
</tr> <td>380d</td>
</tfoot>
</tr>
<tbody>
</tbody>
</table>
Programmation WEB Dr. Manel FOURATI 66
▪ Le HTML permet d’arranger les tableaux et de combiner
certaines cellules entre elles, ou d'étendre la taille d'une cellule
sur plusieurs colonnes ou lignes
▪ Pour combiner plusieurs cellules adjacentes d’une même ligne
ou d’une même colonne entre elles il faut utiliser les attributs
HTML colspan et rowspan
▪ Ces deux attributs vont prendre comme valeur le nombre de
cellules à combiner entre elles
Programmation WEB Dr. Manel FOURATI 67
▪ La fusion de colonnes : s'effectue horizontalement en
rajoutant l'attribut colspan à la balise <td> (ou <th>)
▪ La fusion de lignes : s'effectue verticalement en utilisant
l'attribut rowspan à la balise <td> (ou <th>).
Programmation WEB Dr. Manel FOURATI 68
▪ Exemple:
<table border=‘1’>
<tr> <th colspan="3"> Entête du tableau</th></tr>
<tr> <td> cell1</td>…</tr>
<tr><td> cell4</td>…..</tr>
</table>
<table border=‘1’>
<tr> <td> cell1</td>…..</tr>
<tr> <td rowspan="2"> cell4</td>…</tr>
<tr><td> cell7</td>…..</tr>
</table>
Programmation WEB Dr. Manel FOURATI 69
▪ La balise <audio> permet d’ajouter un flux audio (mp3, wav,
etc.) à la page web.
▪ Syntaxe:
▪ Tous les navigateurs ne prennent pas tous les formats en
charge.
▪ Utiliser la balise <source> à l'intérieur de la balise <audio>
pour proposer différents formats. Le navigateur utilisera celui
qu'il reconnaît :
Programmation WEB Dr. Manel FOURATI 70
▪ Les attributs de la balise <audio>:
✓ src: spécifie la source du fichier audio à insérer
✓ controls: affiche les boutons de contrôle play/stop, volume, etc
✓ autoplay: lire l’audio automatiquement au chargement de la page
✓ loop: répète la lecture du fichier audio
✓ muted: coupe le son de l’audio au chargement de la page
Programmation WEB Dr. Manel FOURATI 71
▪ La balise <video> permet d’insérer une vidéo (MP4, etc) dans un document HTML.
▪ Syntaxe:
▪ Les attributs de la balise <video>:
✓ src: spécifie la source du fichier vidéo à insérer
✓ controls: affiche les boutons de contrôle play/stop, volume, etc
✓ autoplay: lire la vidéo au chargement de la page
✓ loop: répète la lecture du fichier vidéo
✓ muted: coupe le son de la vidéo au chargement de la page
✓ width et height: précisent la taille de la vidéo
✓ Poster: image affichée au moment du chargement de la vidéo
Programmation WEB Dr. Manel FOURATI 72
