Chapitre 2 HTML 1

Chapitre 2 :
Le langage du web : HTML 5
ISGB 1
Définition
• Un site Internet est un ensemble de pages web, reliées entre elles, constitue
l'outil le plus moderne de communication et de publication. Pour la
réalisation d'une page web on a besoin d'un langage spécialisé, le langage
HTML "Hyper Text Markup Language".
• Le HTML est un langage dit de "marquage" (de structuration ou de
balisage) dont le rôle est de formaliser l'écriture d'un document avec des
balises de formatage. Les balises permettent d'indiquer la façon dont doit
être présenté le document et les liens qu'il établit avec d'autres documents.
Généralement, ces balises sont incorporées dans le texte du document et
sont interprété par un navigateur web.
ISGB 2
Historique
• 1986 : création du premier langage de balisage SGML (Standard Generalized Markup Language)
pour structurer des contenus très divers.
• 1991 : création de la première version du langage HTML
• 1994 : apparition de la deuxième version du langage HTML (HTML 2.0), cette version a posé les
bases des versions suivantes du HTML.
• 1996 : apparition de la version HTML 3.0. Cette version rajoute de nombreuses possibilités au
langage comme les tableaux, les scripts, le positionnement du texte autour des images, etc.
• 1998 : appariation de la version la plus répandue du langage HTML (HTML 4.01)Cette version
propose l'utilisation des frames (qui découpe une page web en plusieurs parties)
ISGB 3
Syntaxe et lexique du langage HTML 5
• Le HTML5 est un langage créé pour structurer et donner du sens au

contenu des pages web. Son lexique s'articule essentiellement autour
de trois termes : élément, balise et attribut.
ISGB 4
Les éléments
• Les éléments sont des indicatifs définissant des objets (texte, image ou
objet multimédia) dans une page web, comprenant la structure et le
contenu.
• Exemple
• <p> : pour désigner un paragraphe
• <a> : pour désigner un lien
ISGB 5
Les Balises (Tag en anglais)
• Le terme balise définit un des concepts de base du

langage HTML. Les éléments en HTML sont souvent
faites de plusieurs ensembles de balises.
ISGB 6
Les balises
• On distingue généralement deux types balises :
• Balises en paires : formées d'une balise d'ouverture et d'une balise de

fermeture. La balise d'ouverture commence par le signe < et se termine par le
signe >. La balise de fermeture suit la même règle mais le nom de l'élément est
précédé d'un slash (/).
• Balises orphelines : Ce sont des balises qui servent le plus souvent à insérer
un élément à un endroit précis. Il n'est pas nécessaire de délimiter le début et la
fin de cet élément.
ISGB 7
Les balises
• Exemple : Balises en paires Attention

• <strong> afficher un texte en • Pour ne pas confondre balises et
gras </strong> éléments, considérer l'exemple suivant :
• <p> L'élément P contient des mots en
• Exemple : Balises orphelines <strong>Gras</strong>. </p>
• <img /> • L'élément P contient du texte et des
balises alors que l'élément STRONG ne
contient que du texte.
ISGB 8
Les attributs
• Les attributs sont des propriétés utilisées pour fournir des instructions supplémentaires à un
élément donné (un identifiant (id), une source (src), une référence de lien hypertexte (href), etc.).
Ils sont toujours définis dans la balise d'ouverture et doivent être séparés les uns des autres par au
moins un espace typographique. Chaque attribut a généralement une valeur définie entre
guillemets.
• La syntaxe d'un élément ayant des attributs est donc la suivante :

<nom_element attribut1="valeur1" attribut2="valeur2" > Contenu de l'élément </nom_element>
ISGB 9
Règles de base HTML 5
• Un document HTML doit respecter certaines règles simples.

Les éléments et les attributs sont insensibles à la casse. Par exemple,
<body> et <BODY> sont acceptés.
Les éléments non vides doivent avoir une balise d'ouverture et une balise de fermeture. Cela
facilite la tâche des navigateurs. Par exemple, plutôt que d'écrire :
<ol>
<li>Item 1
<li>Item 2
On préférera le code suivant :
<ol>
<li>Item 1 </li>
<li>Item 2 </li>
</ol>
ISGB 10
Les balises
•Les éléments ne doivent pas se chevaucher et donc obéi au principe premier

ouvert, dernier fermé. Dans ce cas, le premier élément est le parent du second et
celui-ci est enfant du premier. Par exemple, le code suivant est incorrect :
• <div> Cette division contient un titre <h1> Important ! </div> </h1>
• Et doit être remplacé par :
• <div> Cette division contient un titre <h1> Important ! </h1></div>
ISGB 11
Les balises
Tous les attributs doivent avoir une valeur incluse entre guillemets ("). Les
différents attributs du même élément doivent être séparés par au moins un espace.
Par exemple, plutôt que d'écrire :
• <p class=styleperso title=attention> Texte important</p>

• On préférera le code suivant :
• <p class="styleperso" title="attention" > Texte important</p>
ISGB 12
Un document conforme
• Un document HTML 5 doit également respecter les règles d'inclusion des éléments les
uns dans les autres : un élément donné ne peut inclure que l'un de ses éléments enfants
et ne peut être s'inclure que dans l'un de ses éléments parents. Par exemple, plutôt que
d'écrire :
<form>
<body> </body>
</form>
On préférera le code suivant :
<body>
<form>  <form>
</body>
ISGB 13
Environnement de travail
• Pour créer des pages web avec HTML 5, il

faut être doté d'un environnement de travail
adapté. On distingue deux types d'éditeurs
• Les éditeurs classiques (Bloc note ou Notepad

++ cas de Windows) : ce sont des outils
gratuits qui offrent aux utilisateurs la
possibilité de saisir le code HTML
ISGB 14
Structure d'un document HTML 5
<!DOCTYPE html> (1)

<html> (2)
<head>(3)
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"
/> (4)
<title> Cours HTML 5 </title> (5)
</head>
<body> (6)
 (7)
<h1>Le corps de la page minimale</h1>
</body>
</html>
ISGB 15
Signification DOCTYPE
• La déclaration DOCTYPE
<!DOCTYPE html> (1)
• C'est une déclaration
obligatoire qui précise le
type de document qui va
être créé.
ISGB 16
Signification html
<html> (2) • L'élément racine <html>
• C'est l'élément racine du document.
• Il possède deux éléments enfants : <head> &
<body>
• Il possède des attributs comme :
• o lang : dont la valeur est un code de langue
normalisée qui indique la langue utilisée par
défaut dans la page
• o dir : indique le sens de lecture du texte de la
page. Il peut prendre les valeurs « ltr » pour le
texte qui se lit de gauche à droite (langues
européennes) ou « rtl » pour le texte qui se lit
de droite à gauche (langues orientales :
hébreu, arabe).
• Exemple :
• <html lang="fr" dir="ltr">
•  17
Signification head
<head>(3) • Il englobe un certain nombre d'informations utiles
au bon affichage de la page web : Ces
informations dites métadonnées sont contenues
dans les éléments suivants :
• o <base /> : il s'agit d'un élément vide possédant

les attributs suivants :
• id : un attribut qui joue le rôle d'un identifiant
pour l'élément.
• href : c'est un attribut obligatoire dont le
contenu est une URL qui fournit l'adresse de
base de tous les fichiers utilisés dans la page
web.
• Exemple :
• Si nous écrivons le code suivant :
• <base id="I1" href="http://www.funhtml.com/" />
ISGB 18
Signification title
<title>(5) • C'est le titre de la page web.

• Toute page web doit avoir un
titre pour décrire son
contenu.
• Le titre doit être assez court
(moins de 100 caractères).
• Le titre s'affiche en haut de la
page web.
ISGB 19
Signification body
• C'est le conteneur de
body l'ensemble des éléments
textuels et graphiques d'une
page web.
• C'est la partie principale de la
page, tout son contenu sera
affiché à l'écran.
ISGB 20
Les commentaires
• Les commentaires • Les commentaires

• Un commentaire en HTML est un
texte qui sert simplement de
mémo.
• Un commentaire ne sera jamais
affiché au niveau d'une page web :
il est ignoré par le navigateur.
• Un commentaire respecte toujours
la syntaxe suivante :
• < ! - - ceci est un commentaire
HTML 5 - ->
ISGB 21
La balise <header> : l'entête
• La plupart des sites web

possèdent en général un en-tête,
appelé header en anglais. Une
telle entête peut généralement
regroupe un logo, une bannière,
le slogan du site, etc. Ce genre
d'information doit être placé à
l'intérieur de la balise
<header>.
<header>

</header>
ISGB 22
La balise <footer> : le pied de page
• À l'inverse de l'en-tête, le pied de page se

trouve en général tout en bas du document. On
y trouve des informations comme des liens de
contact, le nom de l'auteur, les mentions
légales,etc.
<footer>

</footer>
ISGB 23
La balise <nav> : principaux liens de navigation
• La balise <nav> doit regrouper tous les principaux liens de navigation du

site. Elle peut par exemple contenir le menu principal du site. Généralement,
le menu est réalisé sous forme de liste à puces à l'intérieur de la balise nav.
<nav>
<ul>
<li> <a href =index.html> ‫< اﻟﻮﻟﻰ‬/a> </li>
<li> <a href=politique.html> ‫< اﻟﺴﯿﺎﺳﻲ‬/a> </li>
<li> <a href = sport.html> ‫< اﻟﺮﯾﺎﺿﺔ‬/a> </li>
</ul>
</nav>
ISGB 24
La balise <section> : une section de la page
• La balise <section> sert à regrouper des

contenus en fonction de leur thématique.
Elle englobe généralement une portion
du contenu au centre de la page.
<section>
<h1> Ma section de page </h1>
< ! - - le contenu de ma section - - >
</section>
ISGB 25
La balise <div>
• L'élément <div> peut être directement inclus dans le corps du document <body>. Il crée une
division de la page. Ce type de division (également section) permet de grouper dans un seul
bloc une très grande variété d'élément HTML (texte, liste, formulaire, etc....) auquel il est
possible d'appliquer par la suite des propres et des positions précises.
La balise <div>
• Exemple
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type"
content="text/html;charset=UTF-8" />
<title> La balise div </title>
</head>
<body>
<div id="baniere">
<img src=
"C:\Users\Hassen\Desktop\baniere.jpg"
height="100" width="500">
</div>
<div id="menu">
<imgsrc= "C:\Users\Hassen\Desktop\menu.jpg"
height="100" width="500">
</div>
</body>
</html>
La balise <aside> : informations complémentaires
• La balise <aside> est conçue pour contenir des

informations complémentaires au document
que l'on visualise. Ces informations sont
généralement placées sur le côté (bien que ce
ne soit pas une obligation).
<aside>
< ! - -placer des ici des informations
complémentaires - - >
</aside>
ISGB 28
La balise <article> : un article indépendant
• La balise <article> sert à englober une

portion généralement autonome de la
page. C'est une partie de la page qui
pourrait ainsi être reprise sur un autre
site. C'est le cas par exemple des
actualités (articles de journaux ou de
blogs).
ISGB 29
La balise <p>
• Un contenu textuel gagne en lisibilité
et compréhension lorsqu'il est divisé
en différents paragraphes. Pour
définir un paragraphe, le langage
HTML propose la balise <p> ...</p>
pour délimiter les paragraphes.
exemple
<body >
<p> Bienvenue à ISGB ! </p>
<p> Je vous souhaite une excellente
année universitaire 2022-2023 </p>
</body >
ISGB 30
La balise <q>
• La balise <q> est réservée aux
citations courtes. Il est encadré
automatiquement par des
guillemets dans tous les
navigateurs, sauf Internet Explorer
7 et versions inférieures.
Exemple
<body >
Un vieux sage disait :
<q>
Plus tard que jamais.
</q>
</body >
ISGB 31
La balise <strong>
• La balise <strong> confère au texte

une forte importance. Visuellement, il
est représenté par un corps de police
plus gras.
exemple
<body >
<p> La <strong> prise de décision
</strong> est un processus cognitif
complexe visant à la sélection d'un type
d'action parmi différentes alternatives.
</P>
</body >
ISGB 32
La balise <em>
• La balise <em> utilisé dans un
paragraphe pour mettre une partie de
texte en emphase. Le texte encadré
par <em>...</em> est affiché en
italique.
• Exemple
<body >
<p> Bonjour et bienvenue !<br />
Ceci est mon premier test alors
<em >soyez indulgents
</em>.</p>
</body >
ISGB 33
La balise <b>
• C'est une balise historique sert à

afficher une partie de texte en
gras.
exemple
<body >
<p> Bonjour Mr : <b> Hassen
</b>, vous êtes le bienvenu </p>
</body >
ISGB 34
La balise <i>
C'est une balise historique utilisé

pour afficher une partie de texte en
italique.
exemple
body >
<p> Bonjour Mr : <i> Hassen
</i>, vous êtes le bienvenu </p>
</body >
ISGB 35
La balise <small>
• C'est une balise qui sert à diminuer la taille du

texte. Elle est surtout utilisée pour du contenu • Exemple
secondaire : annotations, mentions légales
body >
• <p> Ce support de cours est conçu pour les
étudiants de la première année de l'enseignement
supérieur des ISETS <br> spécialité informatique.
</p>
• <p> Nous espérons que ce support vous apportera
beaucoup d'aide et d'information en matière «
Programmation web ».<br> Nous vous serons bien
reconnaissants de nous faire part de vos remarques
et vos suggestions.</p>
• <small> Hassen BEN REBHA & Hafedh
BOUKTHIR © 2014-2015 </small>
</body >
ISGB 36
La balise <abbr>
• La balise <abbr> définit une abréviation ou un acronyme. Le marquage des

abréviations grâce à la balise <abbr> peut ainsi donner des informations utiles aux
navigateurs et aux moteurs de recherches.
Exemple
<body >
<abbr title="Institut Supérieur des Études Technologiques"> ISET
</abbr> est un établissement universitaire.
</body>
ISGB 37
La balise <code>
• La balise <code> est utilisée pour englober un fragment de code informatique quel que
soit le langage. En général la balise <code> ne dispose pas de règle de style par défaut.
exemple
<body >
<p> Le code Pascal suivant permet de calculer la somme de deux entiers
</p>
<code> Begin
Readln(a,b); s:= a+b;
writeln('la somme est ',s); end;
</code>
</body>
ISGB 38
La balise <var>
• La balise <var> est utilisée pour indiquer
que son contenu est une variable. Un
effet italique est appliqué au texte
contenu dans la balise.
exemple
<body >
Le résultat de multiplication de <var> x
</var> par <var> y </var> est:
</body>
ISGB 39
La balise<sub>
• La balise <sub> est utilisée pour afficher du

texte en indice (plus bas et généralement plus
petit) par rapport au bloc de texte environnant.
Exemple
<body>
<p> La molécule d'eau est symbolisée par
H<sub>2</sub>O. </p>
</body>
ISGB 40
La balise<sup>
• La balise <sup> représente un morceau de

texte qui devrait être sur une ligne plus haute
et souvent plus petit que le texte principal.
• Exemple
<body>
<p>Ce texte est mis en
<sup>exposant</sup></p>
</body>
ISGB 41
La balise<time>
• La balise <time> représente soit une

heure sur une horloge fonctionnant sur
24 heures ou une date précise du
calendrier grégorien. Cette balise est
conçue pour permettre l'utilisation
d'informations temporelles dans un
format interprétable par un ordinateur.
ISGB 42
Exemple
• <body>
• <p>Le concert commence à
<time>20:00</time>.</p>
• </body>
ISGB 43
Exemple : avec datetime
body>
<p>Le concert
eu lieu le <time
datetime="2001-05-15
19:00">15
mai</time>.</p>
</body>
ISGB 44
La balise <hr/>
• La balise <hr /> est une balise
orpheline qui consiste en une
séparation horizontale qui
marque un changement dans
le contenu.
<body>
<p>Mon premier
paragraphe</p>
<hr />
<p> Mon deuxième paragraphe
</p>
</body>
ISGB 45
La balise <br/>
• La balise <br /> est une balise
orpheline qui produit un retour à
la ligne dans le texte. C'est utile
dans le cas de poèmes ou
d'adresses, où les séparations de
lignes sont importantes.
• Exemple
• <body>
<p>Ceci est la première ligne <br />
et ceci la seconde</p>
</body>
ISGB 46
La balise<s>
• La balise <s> permet d'afficher
du texte barré au sens où
celui-ci n'est plus d'actualité ou
n'est plus pertinent à la
différence de la balise <del> qui
concerne un morceau de texte
ayant été supprimé car il était
incorrecte. visuellement est
représentée par un texte barré.
• Exemple
<body>
<p>Notre club d'informatique est
forméde<s>cinq</s>personnes
</p>>
</body>
ISGB 47
La balise<mark>
• Un texte contenu entre les balises <mark> et

</mark> est considéré comme marqué ou
"surligné". Il signale et met en valeur une
portion du document sur laquelle on veut attirer
l'attention, dans un contexte particulier. Son
apparence par défaut consiste en une couleur de
fond jaune vif et un texte noir.
Exemple
<body>
<p> Mahdia est une zone <mark> touristique
</mark></p>
</body>
La figure suivante montre le résultat obtenu.
ISGB 48
Les listes à puces
• Les listes HTML sont prévues pour dresser des énumérations possédant une
valeur sémantique.
• Les structures disponibles pour une liste ordonnée (liste numérotée) et non
ordonnée (liste à puces) sont constituées par les éléments <ol> et <ul> au sein
des quels chaque élément individuel est un <li>. Elles sont couramment
employées pour la conception de menus de navigation, qui ne sont en réalité que
des énumérations de liens.
ISGB 49
La balise<ol>
• La balise <ol> représente une liste
d'éléments ordonnée. Les éléments d'une
telle liste sont généralement affichés avec
un nombre cardinal associé pouvant prendre
la forme de nombres, de lettres, de chiffres
romains ou depoints.
Exemple
<body>
<p> Le cours programmation web 1 est formé
de quatre chapitres</p>
<ol>
<li> Généralité et notion de base </li>
<li> Le language du web : HTML 5 </li>
<li> Les fuilles de style : CSS 3 </li>
<li> Conception et réalisation d'un site web
</li>
</ol>
ISGB 50
</body >
exemple
<body>
de deux grandesparties</p>
<ol start="2" Type="A">
</ol>
</body >
ISGB 51
La balise<ul>
• La balise <ul> représente une liste
d'éléments non ordonnés. C'est une
collection d'éléments qui n'ont pas d'ordre
numérique et dont leur position dans la liste
n'a pas d'importance. En règle générale une
liste d'éléments non ordonnée est affichée
avec une puce qui peut prendre plusieurs
formes : un simple point, un cercle ou un
carré.
• Exemple
<body>
de quatre chapitres </p>
<ul>
<li> Généralité et notion de base </li>
<li> Conception et réalisation d'un site web
</li>
</ul> ISGB 52
• La balise<li>
• La balise <li> est utilisée pour représenter un élément d'une liste. Il doit appartenir à
une liste ordonnée <ol>, à une liste non-ordonnée <ul>, dans lesquels il désigne un
élément unique de cette liste.
• La balise<dl>
• La balise <dl> permet de définir une liste de définition, elle regroupe une liste de
paires associant des termes et leurs descriptions.
• On peut la comparer à un dictionnaire associant la définition <dd> au mot <dt>..
ISGB 53
• La balise<dd>
• La balise <dd> indique la définition d'un terme au sein d'une liste de
définitions (balise <dl>). Cet élément ne peut apparaître qu'en tant
qu'élément appartenant à une liste de définitions et doit être précédé d'un
élément <dt>.
• La balise<dt>
• La balise <dt> identifie un terme dans une liste de définition. Cet élément
n'apparaît qu'en tant qu'élément enfant d'un élément <dl>. Il est
généralement suivi d'un élément <dd>.
ISGB 54
Exemple
• Exemple
<body >
<dl>
<dt>Firefox : </dt>
<dd> Un navigateur Web libre, open-source,
multi-plateforme dévelopé par la Mozilla Corporation
et
des centaines de volontaires.</dd>
<dt>Google chrome : </dt>
<dd> Chrome est un navigateur web développé par
Google basé sur le projet libre Chromium fonctionnant
sous Windows, Mac, Linux,Android et ios .</dd>
</dl>
/body>
ISGB 55
La balise<hx>
• Les balises de type <hX> où X représente un chiffre
entre 1 et 6 correspondent à des titres de niveaux
différents. <h1> est un titre de premier niveau, <h2>
un titre de deuxième niveau, et ainsi de suite jusqu'au
petit dernier <h6>.
Exemple
<body>
<h1>Titre de niveau1</h1>
</body >
•
ISGB 56
Création des liens hypertexte
• Un lien hypertexte est un élément graphique ou textuel

d'une page web qui sous l'action d'un clic de souris
peut amener l'utilisateur vers un autre site web, vers
une autre page d'un même site web ou vers un endroit
précis d'une même page.
ISGB 57
La balise<a>
• La balise <a>..</a> est la balise de

base permettant la création d'un lien
hypertexte. Cette balise admet la liste
des attributs suivante :
ISGB 58
Attribut :rel
ISGB 59
Attribut :target
ISGB 60
Attribut download
ISGB 61
Types des liens hypertexte : Lien absolu
Exemple
• Un lien absolu est un
lien qui comprend <body>
l'adresse complète pour <p> Bonjour , lien vers un site externe
accéder à un document pour consulter le site de notre
(cas d'un lien menant institut cliquer<a
vers un autre site href="www.isgb.rnu.tn">ici </a></p>
hébergé sur un autre nom </body >
de domaine.
ISGB 62
Lien relative
• Exemple 1 : lien entre deux pages situées

• Un lien relatif est un lien dans le même dossier
comme son nom l'indique
relatif à un chemin de <body>
référence. Il fait référence à <p>
un document stocké au même
niveau que le fichier source ou Bonjour, souhaitez – vous consulter <a
dans un niveau différent (sous href="page2.html"> la page 2
répertoire, répertoire parent, </a> ?
répertoire racine).
</p>
</body >
ISGB 63
Lien relative
Exemple 2 : lien entre deux pages situées dans deux

dossiers différents
<body>
<p>
Bonjour, souhaitez – vous consulter <a
href="nom_dossier/page2.html"> la page 2 </a> ?
</p>
ISGB 64
Lien relative
lien vers un fichier placé dans un dossier parent
Exemple 3 : lien vers un fichier placé dans un dossier parent
<body>
<p>
Bonjour, souhaitez – vous consulter <a href=". . /page2.html"> la
page 2 </a> ?
</p>
</body >
ISGB 65
Lien à l'intérieur d'une même page web
Exemple
Dans une page d'une certaine importance, il est

intéressant de pouvoir mener l'utilisateur à un Pour créer une ancre, il suffit de rajouter l'attribut
endroit précis du document. On utilise alors id à une balise qui va alors servir de repère.
la technique des ancres ou des signets. <body>
<h2 id="ancre1">Texte 1 </h2>
Ce lien à l'intérieur de la page s'exécute en deux </body >
temps :
Ensuite, il suffit de créer un lien comme d'habitude,
mais cette fois l'attribut href contiendra un dièse (#)
suivi du nom de l'ancre.
• La déclaration de l'ancre.
<body>
• Le lien vers l'ancre.
<a href ="#ancre1"> Lien vers Texte 1 </a>
</body >
NB:Il est possible de créer un lien hypertexte vers
une ancre situé dans une autre page : il suffit de
taper le nom de la page, suivi d'un dièse (#), suivi
du nom del'ancre.
ISGB 66
<body>
Lien vers une adresse mail
• Pour créer un lien Exemple

vers une adresse mail,
il suffit d'utiliser avec
<body>
l'attribut href la
valeur mailto suivi de <a href ="mailto
l'adresse mail de :ben_rebah_h@yahoo.fr">Co
destination. ntactez moi par mail </a>
</body >
ISGB 67
Insertion des images et des objets multimédia
• L'insertion d'une image stockée dans

fichier externe à l'intérieur d'un
document web est obtenue grâce à la
balise orpheline <img />. La balise
<img> possède la liste des attributs
suivants:
ISGB 68
Les formats d'images supportés par le web
Exemple :
<body>
<h1> Nouvelle Kia Rio 2012 </h1>
<img src="C:\Users\Hassen\Desktop\car.jpg“ alt=”Kia Rio 2012”width=”400”
height=”200”/>
</body
Format supporté: GIF, PNG,JPEG
ISGB 69
L'insertion d'un lien sur une image
Exemple
• Les liens à partir d'une image se
<body>
réalisent simplement en entourant <h1> Nouvelle Kia Rio 2012 </h1>
celle-ci par la balise de lien <a> ... <a href="page2.html">
</a>. Ces liens hypertextes revêtent <img src="C:\Users\Hassen\Desktop\car.jpg" alt=”Kia
Rio 2012” width=”400” height=”200”/>
les mêmes caractéristiques que les
</a>
liens sur le contenu texte. </body >
L'intégralité de la surface de l'image
est alors cliquable.
ISGB 70
Les images réactives
• Les images réactives permettent d'effectuer des liens distincts en

fonction d'une partie d'image ou d'une zone (area) prédéfinie de
celle-ci. Ainsi, par exemple, sur une carte de la Tunisie, on peut
imaginer qu'un clic sur une zone (ville) mènerait le visiteur vers un
fichier ou une page web avec le nom et les informations de cette ville.
ISGB 71
• Pour développer un tel exemple, on a besoin de l'utilisation de la balise
<map> en conjonction avec une image <img> de la façon suivante :
• Définition de la balise de l'image réactive:
<img src="fichier_image" usemap="#nom_de_la_carte">
• En fait, on ajoute simplement à la balise classique de l'image <img> l'attribut
usemap pour avertir le navigateur qu'il doit employer pour celle-ci une carte
(usemap) et le nom de la carte en question. Cette carte sera alors incluse
directement dans le fichier, un peu comme une ancre de lien. Le code reprend
d'ailleurs la notation avec le dièse #, propre auxancres.
• Définition des balises de la carte :
• Une carte (<map>) contient un ou plusieurs éléments <area> qui définissent
chacun une zone cliquable d'après une forme (shape), des coordonnées pour
cette forme (coords) et une adresse(href)
<map>
<mapname="nom_de_la_carte">(1)
<area shape="forme" coords="coordonnées" href="destination">(2)
< !-- autres balises area -->
</map>
ISGB 72
ISGB 73
Exemple
<body>
<p>
<img src="cubes.gif" usemap="#cartons" height="121"
width="136"/>
</p>
<map name="cartons">
<area shape="rect" coords="37,9,72,40" href="a.htm" >
<area shape="rect" coords="18,46,47,79" href="b.htm">
<area shape="rect" coords="61,43,93,78" href="c.htm">
<area shape="rect" coords="9,84,36,119" href="d.htm">
<area shape="rect" coords="48,85,77,116" href="e.htm" >
<area shape="rect" coords="89,81,123,115" href="f.htm" >
</map>
</body>
ISGB 74
Les média audio et vidéo
La balise<audio>
• L'intégration d'un fichier audio dans
un document HTML s'effectue grâce à
la balise <audio> ... </audio>.
ISGB 75
La balise<video>
• L'intégration d'un fichier vidéo

dans un document HTML
s'effectue grâce à la balise <video>
... </video>.
ISGB 76
Les média audio et vidéo
ISGB 77
La balise<table>
• La balise <table> est destinée à contenir des données tabulaires. Par

cela, on désigne un ensemble d'informations qui peuvent ou qui
doivent être présentées dans une structure formatée en colonnes et en
lignes.
ISGB 78
La balise<table>
body>
<table>
<! - - Liste des lignes et des
colonnes - - >
</table>
</body>
La balise <caption>
La balise <caption> représente le titre d'un tableau. Elle doit être insérée
immédiatement après la balise ouvrante <table>, et ne doit être utilisé
qu'une seule fois au sein de cet élément.
ISGB 79
La balise<table>
• La balise <tr>
• La balise <tr> représente une ligne de tableau. Elle contient un ou plusieurs éléments
<td> et/ou <th>.
• La balise <td>
• Une cellule <td> peut contenir du texte des liens, des images, des listes, etc. Elle est
toujours imbriquée dans un élément <tr>.
ISGB 80
La balise<table>
• Exemple
• <body>
• <table>
• < tr>
• <td>France</td>
• <td>Canada</td>
• <td>Tunisie</td>
• </tr>
• </table>
• </body>
ISGB 81
La balise<td>
ISGB 82
La balise<th>
• La balise <th> est une cellule

spécialisée qui joue le rôle d'en-tête
de colonne (ou de ligne) dans un
tableau. Il doit être imbriqué dans une
balise <tr>.
• La balise <th> possède la liste des
attributs suivants :
ISGB 83
Exemple
• < table border = “1” >
• <tr>
• <th colspan="2">Animal et groupe</th>
• <th scope="col">Classe</th>
• </tr>
• <tr>
• <td>Kangourou</td>
• <td>Lapin</td>
• <td rowspan="2">mammifère</td>
• </tr>
• <tr>
• <td>Baleine</td>
• <td>Chien</td>
• </tr>
• </table>
ISGB 84

Chapitre 2 HTML 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Chapitre 2 HTML 1

Transféré par

Droits d'auteur :

Formats disponibles

Chapitre 2 :

Le langage du web : HTML 5

• Le HTML5 est un langage créé pour structurer et donner du sens au

• Le terme balise définit un des concepts de base du

• On distingue généralement deux types balises :

• Balises en paires : formées d'une balise d'ouverture et d'une balise de

• Exemple : Balises en paires Attention

• La syntaxe d'un élément ayant des attributs est donc la suivante :

• Un document HTML doit respecter certaines règles simples.

•Les éléments ne doivent pas se chevaucher et donc obéi au principe premier

• <p class=styleperso title=attention> Texte important</p>

• Pour créer des pages web avec HTML 5, il

• Les éditeurs classiques (Bloc note ou Notepad

<!DOCTYPE html> (1)

• o <base /> : il s'agit d'un élément vide possédant

<title>(5) • C'est le titre de la page web.

• Les commentaires • Les commentaires

• La plupart des sites web

• À l'inverse de l'en-tête, le pied de page se

• La balise <nav> doit regrouper tous les principaux liens de navigation du

• La balise <section> sert à regrouper des

• La balise <aside> est conçue pour contenir des

• La balise <article> sert à englober une

• La balise <strong> confère au texte

• C'est une balise historique sert à

C'est une balise historique utilisé

• C'est une balise qui sert à diminuer la taille du

• La balise <abbr> définit une abréviation ou un acronyme. Le marquage des

• La balise <sub> est utilisée pour afficher du

• La balise <sup> représente un morceau de

• La balise <time> représente soit une

• Un texte contenu entre les balises <mark> et

• Un lien hypertexte est un élément graphique ou textuel

• La balise <a>..</a> est la balise de

• Exemple 1 : lien entre deux pages situées

Exemple 2 : lien entre deux pages situées dans deux

Dans une page d'une certaine importance, il est

• Pour créer un lien Exemple

• L'insertion d'une image stockée dans

• Les images réactives permettent d'effectuer des liens distincts en

• L'intégration d'un fichier vidéo

• La balise <table> est destinée à contenir des données tabulaires. Par

• La balise <th> est une cellule

Vous aimerez peut-être aussi