Part1 - HTML

Le langage HTML5
Partie 1
Badreddine GUIZANI
Faculté des Sciences de Monastir
21 avril 2019
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 1 / 35

Plan
1 la structure d'une page
2 Présentation HTML
3 la mise en forme du texte
4 les listes
5 les Liens Hypertexte
6 les images
7 les tableaux
Présentation HTML
Le langage HTML
HTML (HyperText Markup Language) : langage de mise en forme
de documents hypertextes (texte + liens vers d'autres documents).
Permet de créer des documents reconnus et mis en forme par tous les
navigateurs.
Distinction entre le texte du document (contenu) et sa mise en forme
(présentation).
Instructions de mise en forme indiquées explicitement par des balises
au sein du texte
Les balises sont entourées par des signes '<' et '>'
Ces balises peuvent contenir des attributs sous la forme nom="valeur"
Syntaxe des balises

Il existe deux types de balise :
<balise [Attributs + Valeurs]> texte </balise>
<balise [Attributs + Valeurs]/>
Présentation HTML
Utilisation des balises HTML
Imbrication des balises

IL est possible de dénir une balise à l'intérieur d'une autre balise.
L'ordre de fermeture de balises doit être à l'inverse de l'ordre de
fermeture.
C-à-d la dernière balise ouverte doit se fermer en premier.
Exemple 1 : <b><a> Text </b></a>
Exemple 2 : <b><a> Text </a></b>
Exemple 3 : <b><a><c> Text </a></b></c>
Exemple 3 : <b><a><c> Text </c></a></b>
Écriture du bon code

Pour une meilleure lecture et compréhension du code, utiliser l'indentation
et les retours à la ligne.

Présentation HTML
Structure générale d'un document HTML

<! DOCTYPE html>
< !−− DOCTYPE I n d i q u e le type de la page
( sans paramètres c ' est la version5 ) −−>
< html l a n g=" f r ">

< !−− C e t élément définit la racine du d o c u m e n t . −−>
< !−− Obligatoire au début et à la fin du fichier HTML−−>
< head>
< !−− Partie en − t ê t e d ' un fichier HTML
contient les metatdonnées correspondants à la
page −−>
web
<meta c h a r s e t =" u t f −8" />
< t i t l e >P a g e HTML5</ t i t l e>
</ head>
< body>
< !−− le contenue de la page web −−>
</ body>
</ html>

Présentation HTML
Les balises de la partie <head>
Élément Occ Rôle

<title> 1 Titre du document
<meta> 0 ou + Méta-informations
<link> 0 ou + Relations vers des ressources externes (par
exemple des feuilles de style CSS)
<style> 0 ou + Styles CSS embarqués dans le document
<script> 0 ou + Scripts embarqués dans le document
<base> 0 ou + Base d'adresses par défaut et de cible pour
tous les liens du document

Présentation HTML
Exemple d'utilisation de <head>

< head>
< !−− E n c o d a g e des caractères −−>
<meta c h a r s e t =" u t f −8">
< !−− Base g é n é r a l e d e s l i e n s d e n a v i g a t i o n −−>
< base h r e f =" h t t p : / / h t t p : / / www . f s m . r n u . t n / p h y s i q u e /
T e l e c o m ">
< !−− Titre du document ( page web )−−>
< t i t l e >Ma page sur les technologies Web</ t i t l e>
< !−− Inserer une feuille de style à partir d ' un fichier
−−>
< l i n k r e l =" s t y l e s h e e t " h r e f =" c s s / s c r e e n . c s s " type=" t e x t
/ c s s " media=" s c r e e n ">
< !−− Des styles complémentaires −−>
< s t y l e type=" t e x t / c s s ">
p { f o n t −f a m i l y : Sans− s e r i f ;
t e x t −a l i g n : c e n t e r ; }
</ s t y l e>
< !−− Importer un fichier JavaScript −−>
< s c r i p t s r c =" j s / g l o b a l . j s "></ s c r i p t>
< !−− Ecrire des fonctions JavaScript −−>
< s c r i p t> al e r t ( ' Hello world ! ' ) ; </ s c r i p t>
</ head>
Présentation HTML
Les attributs de la balise <meta>
Attribut valeur Rôle

name application- Méta-informations relatives à la page :
name author nom de l'application web, auteur, des-
description cription du contenu, programme de
generator conception utilisé, mots-clés relatifs au
keywords contenu.
http-equiv refresh default-
Rafraîchissement de la page. Feuille de
style content-
style préférée. Déclaration de la page de
type code et du type MIME.
content texte En combinaison avec name et http-
equiv, confère sa valeur à la balise.
charset encodage des Déclaration de la page de code qui
caractères doit être utilisée pour l'interprétation, si
celle-ci est diérente de l'ASCII.
Présentation HTML
Exemples de la balise meta

< !−− Placer des informations à propos de la page web −−>
<meta name=" a u t h o r " content="B . g u i z a n i ">
<meta name=" d e s c r i p t i o n " content=" T o u t s a v o i r sur les
technologies web ">
<meta name=" k e y w o r d s " content="FSM , Web , T e l e c o m ">
<meta name=" g e n e r a t o r " content=" B r a c k e t s ">
<meta name=" a p p l i c a t i o n −name " content=" G e s t i o n s t o c k ">
< !−− Rafraîchissement de la page toutes les minutes −−>

< meta h t t p − e q u i v=" r e f r e s h " content=" 6 0 " />
< !−− Redirection vers une autre URL au bout de 5 secondes −−>
< meta h t t p − e q u i v=" r e f r e s h " content=" 5 ; u r l =h t t p : / / www . f s m . r n u . t n
" />
< !−− Déclaration d e l ' e n s e m b l e d e s t y l e p r é f é r é −−>
<s t y l e t i t l e =" m o n s t y l e 1 ">< !−− CSS −−></ s t y l e >
<meta h t t p − e q u i v=" d e f a u l t − s t y l e " content=" m o n s t y l e 1 ">
< !−− Déclaration de l ' encodage des caractères −−>
< meta h t t p − e q u i v=" c o n t e n t − t y p e " content=" t e x t / h t m l ; c h a r s e t =UTF
−8">

Présentation HTML
Exemples de la balise link
< !−− Icône associée au document −−>

< l i n k r e l =" i c o n " h r e f =" i c o n e . g i f " type=" i m a g e / g i f " s i z e s =" 3 2 x 3 2 ">
< !−− F e u i l l e d e s t y l e p o u r l a f f i c h a g e −−>
< l i n k r e l =" s t y l e s h e e t " type=" t e x t / c s s " h r e f =" c s s / s t y l e s . c s s " media=
" s c r e e n ">
< !−− F e u i l l e d e s t y l e p o u r l i m p r e s s i o n −−>
< l i n k r e l =" s t y l e s h e e t " type=" t e x t / c s s " h r e f =" c s s / p r i n t . css " media="
p r i n t ">
< !−− Autre icône associée au document −−>
< l i n k r e l =" i c o n " h r e f =i c o n e . s v g s i z e s =" a n y " type=" i m a g e / s v g+x m l ">
< !−− Flux de syndication −−>
< l i n k r e l =" a l t e r n a t e " type=" a p p l i c a t i o n / r s s +x m l " h r e f =" f l u x . rss"
t i t l e =" A c t u a l i t é s ">
< !−− Licence d' utilisation GPL −−>
< l i n k r e l =" l i c e n s e " h r e f =" h t t p : / / c r e a t i v e c o m m o n s . o r g / l i c e n s e s / by−n c
/ 2 . 0 / f r / ">

la mise en forme du texte les paragraphes
Mise en forme de base
les paragraphes
<p> marque le début d'un nouveau paragraphe qui se voit fermé par
</p>. Son contenu est de type phrasé, c'est-à-dire qu'il contient
eectivement du texte, potentiellement des sauts de ligne <br>, mais aussi
d'autres éléments de phrasé pouvant contribuer à la sémantique de ce
texte, par exemple <em>, <strong>, <abbr>, <ins>, <del>, <q>, etc.
Exemple d'usage de <p>

<p>Ceci est mon premier paragraphe.</p>
<p>Ceci est mon deuxième paragraphe.</p>

la mise en forme du texte les titres
Les balise de <h1> à <h6>
Les éléments de type <hX> où X représente un chire entre 1 et 6

correspondent à des titres (heading en anglais) de niveaux diérents. <h1>
est un titre de premier niveau, <h2> un titre de deuxième niveau, et ainsi
de suite jusqu'au petit dernier <h6>.
<body>
<h1> T i t r e de niveau 1</ h1>
</ body>

Balises de structuration du texte
Balise Utilisation
<i> Assure la mise en forme en italique
<b> b pour bold ce qui signie gras
<s> pour un texte barré
<br> Correspond à un saut de ligne (line break)
<hr> Consiste en une séparation horizontale qui marque un
changement dans le contenu.
<strong> confère au texte une forte importance.
<em> Il s'agit d'un procédé linguistique qui donne de l'impor-
tance ou une aectation pompeuse au discours.
<sub> Un fragment de texte peut être placé en indice
<sup> L'opposé de <sub> pour placer cette fois-ci le texte en
exposant est


Balise Utilisation
<var> Une variable dans une expression mathématique ou infor-
matique ou un espace réservé à un texte que le lecteur
du document peut mentalement remplacer par une autre
valeur.
<samp> La balise <samp> délimite un exemple ou un échantillon
de sortie produite par un programme ou un système.
<code> Un fragment de code informatique quel que soit le lan-
gage
<cite> L'élément cite représente le titre d'une ÷uvre. Cette caté-
gorie englobe le titre d'un ouvrage, d'une chanson, d'une
pièce de théâtre, d'un opéra, d'un lm, d'une émission de
télévision, d'un jeu, d'une ÷uvre d'art, d'une exposition,
ou plus couramment d'une autre page web, etc.

Balise Utilisation
<blockquote> Un bloc de citation représente une section du do-
cument qui est extraite d'une autre source(un ou
plusieurs paragraphes, mais aussi des titres et des
images).
<q> Petit frère de <blockquote>, est réservé aux citations
courtes. Il est encadré automatiquement par des guille-
mets
<ins> indique un contenu texte ayant été inséré ou ajouté
dans le document après sa publication.
<kbd> représente une entrée au clavier voire au moyen
d'autres périphériques d'entrée.
<pre> utilisé pour des blocs de texte préformatés.

Balise Utilisation
<mark> Il signale et met en valeur une portion du document sur
laquelle on veut attirer l'attention, dans un contexte par-
ticulier.
<bdo> surclasse le sens de lecture, [dir="rtl" (de gauche à droite
left to right) ; et dir="rtl" ( de droite à gauche right to
left).
<abbr> gérer les abréviations
<dfn> représente un terme déni. Il doit gurer à l'endroit où
l'explication d'un mot, d'un concept ou d'une association
d'idées est évoquée.
<small> utiliser pour diminuer la taille du texte.

les listes Types de listes
Les listes d'éléments

Une liste ordonnée <ol> (liste numérotée)
les listes est équipée de puces numérotées automatiquement par le
navigateur. Ces listes sont composées par des éléments individuel entourer
par la balise <li>.
La liste non ordonnée <ul> (liste à puces)

Comme son nom l'indique, son contenu n'est pas spécialement trié et son
ordre peut être changé sans altérer signicativement son sens. Ces listes
sont composées par des éléments individuel entourer par la balise <li>.
La liste de dénitions <dl>

répond au besoin de lister des paires de termes et de descriptions qui leur
sont liées. On peut la comparer à un dictionnaire associant la dénition
<dd> au mot <dt>. Aucun tri alphabétique n'est dénit, il appartient à
l'auteur de la liste de l'ordonner dans le code source.
les listes Listes ordonnées
Exemples de listes ordonnées
p
< >P l a n A :</ >p
<o l>
< l i >S t o c k e r tout le parmesan de
l ' u n i v e r s</ l i>
< l i >L a n c e r u n e n o u v e l l e p i z z a</
l i>
< l i > C o n q u é r i r l e monde</ l i >
</ o l>
p
< >P l a n B :</ >p
<ol s t a r t =" 2 " type="A">
< l i >S t o c k e r t o u t l e jambon de l
' u n i v e r s</ l i >
< l i >L a n c e r u n e p i z z a a u
parmesan et au j a m b o n </ l i>
< l i >C o n q u é r i r le monde</ l i>
</ o l>

les listes Listes ordonnées
Exemples de listes ordonnées

p
< >P l a n C :</ > p
<ol s t a r t =" 3 " type=" i ">
< l i >S t o c k e r t o u t l e r i z de l '
u n i v e r s</ l i >
< l i >L a n c e r R i s o t t o a u p a r m e s a n
e t a u j a m b o n </ l i >
</ o l>
p
< >P l a n D :</ > p
<o l>
< l i v a l u e=" 1 ">P r e m i e r é l é m e n t</
l i>
<l i v a l u e=" 3 ">D e u x i è m e é l é m e n t</
l i>
< l i > T r o i s i è m e é l é m e n t</ l i >
<l i v a l u e=" 1 ">Q u a t r i è m e é l é m e n t<
/ l i>
< l i >C i n q u i è m e é l é m e n t</ l i >
</ o l>

les listes Listes non ordonnées
Exemple de liste non ordonnées
p
< >P l a n A :</ >p
<u l>
< l i >S t o c k e r tout le parmesan de
l u n i v e r s </ l i>
< l i >L a n c e r u n e n o u v e l l e p i z z a</
l i>
</ u l>
p
< >P l a n B :</ p>
<u l type=" s q u a r e ">
< l i >S t o c k e r t o u t l e jambon de
l u n i v e r s </ l i >
une nouvelle pizza
< l i >L a n c e r une pizza au parmesan
et au j a m b o n </ l i>
< l i >C o n q u é r i r le monde</ l i>
</ u l>

les listes Listes de dénitions
Exemple de liste de dénitions

p
< >Mots− c l é s pour media queries :</ p
>
< d l>
< dt> s c r e e n</ dt>
<dd>É c r a n s</ dd>
< dt>h a n d h e l d</ dt>
<dd> P é r i p h é r i q u e s mobiles ou
de petite t a i l l e </ dd>
< dt> p r i n t</ dt>
<dd> I m p r e s s i o n</ dd>
< dt> p r o j e c t i o n</ dt>
<dd> P r o j e c t e u r s ( ou
présentations avec slides
)</ dd>
< dt> t v</ dt>
<dd> T é l é v i s e u r</ dd>
< dt> a l l </ dt>
<dd>T ou s l e s p r é c é d e n t s</ dd>
</ d l>

les Liens Hypertexte
Les liens Hypertexte
Balise <a> <\a>

Activer un lien (cliquer dessus) signie au navigateur que l'on souhaite
changer d'adresse de navigation et consulter une autre ressource web.
Le lien peut être absolu, ou relatif.

Lien externe ou interne.
D ans le cas d'un site externe on précisera le protocole (http ://,
ftp ://, etc.)
Une adresse e-mail, on utilise mailto :
Une numéro téléphone, on utilise tel :

Attributs Hypertexte
Attribut Valeurs Rôle

href URL Cible du lien.
hreang code de langue Langage de base de la cible du lien.
target _blak, _parent, Attribue un contexte de navigation
_self, _top dans lequel suivre le lien.
rel alternate, archives, Spécie la relation établie par le lien,
author, bookmark, entre le document courant et la cible.
external etc.
media media query Spécie une requête de média pour
laquelle la cible est optimisée
type type MIME Le type MIME de la destination du
lien.
download nom du chier après Indique que la ressource liée est pré-
téléchargement vue pour être téléchargée.
Exemples d'utilisation des liens

< !−− L i e n v e r s u n e a u t r e p a g e html −−>
<a h r e f =" c o n t a c t . h t m l ">C o n t a c t e z −n o u s</ a>
< !−− Lien vers une image −−>
<a h r e f =" m a p h o t o . j p g ">A d m i r e z ma p h o t o</ > a
< !−− Lien relatif vers un fichier dans le sous−r é p e r t o i r e

images −−>
<a h r e f =" i m a g e s / s c h e m a . p n g "> V o i r l ' i l l u s t r a t i o n </ > a
< !−− Lien relatif vers une page hébergée dans le répertoire
parent −−>
<a h r e f =" . . / c a t e g o r i e . h t m l "> R e v e n i r à la a
c a t é g o r i e</ >
< !−− Lien absolu vers une page hébergée à la racine du site −−>
<a h r e f =" / I n d e x . h t m l ">P a g e d ' a c c u e i l</ > a
< !−− Lien absolu vers la racine du site −−>
<a h r e f =" / "> A c c u e i l du s i t e </ > a
< !−− Lien externe ou absolu −−>
<a h r e f =" h t t p : / / www . Fsm . r n u . t n / "> S i t e FSM</ > a

< !−− Lien pour adresse e− m a i l −−>
<a h r e f =" m a i l t o : j a m e s @ b o n d . com "> c o n t a c t me</ > a
< !−− Lien pour un telephone téléphone −−>
<a h r e f =" t e l : + 2 1 6 5 5 4 4 3 3 2 2 ">P h o n e</ a>
id et ancres
Une ancre (hash), permet à un lien de cibler directement une portion de

document lui même désignée par son identiant unique id.
le navigateur sera chargé d'accéder directement à l'élément désigné par cet

id, ce qui se traduit par un délement automatique vers la portion
concernée.
< !−− Lien vers l ' a n c r e #s e c t i o n 4 −−>
<a h r e f ="#s e c t i o n 4 ">A c c é d e r directement à la section 4 </ > a
< !−− Lien vers l ' a n c r e #c o n c l u s i o n −−>
<a h r e f ="DevWeb . h t m l#c o n c l u s i o n ">A c c é d e r directement à la
p a r t i e C o n c l u s i o n</ a>
< !−− Lien vers le début du document −−>

<a h r e f ="#">H a u t de p a g e</ >a

les images
Insertion d'image
La balise <img>
La balise <img> embarque une image stockée dans un chier externe à
l'intérieur d'un document web.
Formats de compression d'images :
GIF : Petits éléments graphiques, icônes, petites images animées.
PNG : Format ouvert(recommandation W3C), Images de haute qualité
avec niveaux de transparence.
JPEG : Photographies pas de transparence.

les images
Attributs spéciques à <img>
Attribut Valeurs Rôle

src URL Adresse du chier image.
alt texte Texte alternatif à utiliser en cas d'ab-
sence de la ressource.
width nombre entier posi- Largeur de l'image en pixels.
tif
height nombre entier posi- Hauteur de l'image en pixels.
tif
ismap ismap ou "" ou Indique que l'élément image donne
(vide) accès à une image map côté serveur.
usemap chaîne de texte Nom de l'élément <map> à utili-
ser pour la dénition des zones cli-
quables de l'image map côté client.

les images
Exemple d'images
<img s r c =" i m a g e s / h t m l . g i f " width=" 1 0 0 " h e i g h t=" 1 0 0 ">

<img s r c =" i m a g e s / h t m l . j p g " width=" 1 0 0 " h e i g h t=" 1 0 0 ">
<img s r c =" i m a g e s / h t m l . p n g " width=" 1 0 0 " h e i g h t =" 1 0 0 ">

les tableaux les balises d'un tableau
Données tabulaires
La balise <table>
Un élément <table> est destiné à contenir des données tabulaires.
Il contient un ensemble d'informations dans une structure formatée en
colonnes et en lignes.
Élément Occ Rôle

<caption> 0 ou 1 Titre du tableau
<tr> 1 ou + dénit une ligne du tableau
<td> 1 ou + Colonnes du tableau
<th> 1 ou + tel-que td mais identie la cellule comme une
cellule particulière ( cellule d'en-tête ).
<colgroup> 0 ou + Propriétés pour un groupe de colonnes.
<thead> 0 ou 1 En-tête du tableau

les tableaux Exemples de tableaux
Exemple simple d'un tableau
<t a b l e b o r d e r=" 1 ">

< t r>
< td> C e l l u l e 1 ligne 1 </ td>
</ t r >
< t r>
</ t r >
< t r>
</ t r >
</ t a b l e>


<table>
<caption> L i s t e des p r i n c i p a u x navigateurs</ caption>
<tbody>
< tr>
<th>Navigateur</ th>
<th>Environnements</ th>
<th>D es c ri pt i on</ th>
</ tr>
< tr>
<td>Edge</ td>
<td>Windows</ td>
<td>Développé par Microsoft</ td>
</ tr>
< tr>
<td> S a f a r i</ td>
<td>MacOS</ td>
<td> I n s t a l l é par défaut pour Mac OS X ( Apple )</ td>
</ tr>
< tr>
<td>FireFox</ td>
<td>Windows , Mac <abbr>OS</ abbr> X et GNU/ Linux</ td>
<td>Navigateur Open Source , développé par l a Mozilla</ td>
</ tr>
</ tbody>
</ table>


Structuration page web Groupements
Groupent <div> <span>

<div> représente une division de document. D'un point de vue
sémantique, il n'a aucune valeur et n'est voué qu'à regrouper des éléments
ayant des propriétés communes.
<span> est spéciquement dédié au contenu phrasé. Il peut être utilisé

également pour grouper des éléments ou une portion de texte à des ns
d'aectation de styles ou de partage d'attributs.
< d i v l a n g=" f r " c l a s s =" i n t r o d u c t i o n ">
p
< >P a r a g r a p h e d â i n t r o d u c t i o n </ p>
</ d i v>
< d i v c l a s s =" s u i t e ">
<p>Un a u t r e p a r a g r a p h e</ p>
</ d i v>
p
< >HTML signifie < span l a n g=" e n "> H y p e r t e x t Markup L a n g u a g e</
span> en p
a n g l a i s .</ >

Structuration page web Sections
Les par défauts HTML5
Balise Rôle
<section> Section générique regroupant un même sujet, une même fonc-
tionnalité.
<article> Section de contenu indépendante, pouvant être extraite indi-
viduellement du document sans pénaliser sa compréhension
<aside> Section dont le contenu est un complément par rapport à ce
qui l'entoure, qui n'est pas forcément en lien direct avec le
contenu mais qui peut apporter des informations supplémen-
taires.
<header> Section d'introduction d'un article, d'une autre section ou du
document entier (en-tête de page).
<footer> Section de conclusion d'une section ou d'un article, voire du
document entier (pied de page).
<nav> Section possédant des liens de navigation principaux (au sein
du document ou vers d'autres pages)

Structuration page web Sections
Structure standard d'une page web

Part1 - HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Part1 - HTML

Загружено:

Авторское право:

Доступные форматы

Le langage HTML5

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 1 / 35

3 la mise en forme du texte

5 les Liens Hypertexte

Syntaxe des balises

Utilisation des balises HTML

Imbrication des balises

Écriture du bon code

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 4 / 35

Structure générale d'un document HTML

< html l a n g=" f r ">

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 5 / 35

Les balises de la partie <head>

Élément Occ Rôle

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 6 / 35

Exemple d'utilisation de <head>

Les attributs de la balise <meta>

Attribut valeur Rôle

Exemples de la balise meta

< !−− Rafraîchissement de la page toutes les minutes −−>

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 9 / 35

Exemples de la balise link

< !−− Icône associée au document −−>

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 10 / 35

Mise en forme de base

Exemple d'usage de <p>

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 11 / 35

Les balise de <h1> à <h6>

Les éléments de type <hX> où X représente un chire entre 1 et 6

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 12 / 35

Balises de structuration du texte

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 13 / 35

Balises de structuration du texte

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 14 / 35

Balises de structuration du texte

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 15 / 35

Balises de structuration du texte

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 16 / 35

Les listes d'éléments

La liste non ordonnée <ul> (liste à puces)

La liste de dénitions <dl>

Exemples de listes ordonnées

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 18 / 35

Exemples de listes ordonnées

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 19 / 35

Exemple de liste non ordonnées

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 20 / 35

Exemple de liste de dénitions

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 21 / 35

Les liens Hypertexte

Balise <a> <\a>

Le lien peut être absolu, ou relatif.

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 22 / 35

Attribut Valeurs Rôle

Exemples d'utilisation des liens

< !−− Lien relatif vers un fichier dans le sous−r é p e r t o i r e

<a h r e f =" h t t p : / / www . Fsm . r n u . t n / "> S i t e FSM</ > a

Une ancre (hash), permet à un lien de cibler directement une portion de

le navigateur sera chargé d'accéder directement à l'élément désigné par cet

< !−− Lien vers le début du document −−>

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 25 / 35

B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 26 / 35

Attributs spéciques à <img>

Les éléments de type <hX> où X représente un chire entre 1 et 6

La liste de dénitions <dl>

Exemple de liste de dénitions

Attributs spéciques à <img>

<span> est spéciquement dédié au contenu phrasé. Il peut être utilisé