Vous êtes sur la page 1sur 35

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
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 2 / 35
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]/>
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 3 / 35
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.

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


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>

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


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

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


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>
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 7 / 35
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.
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 8 / 35
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">

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


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 / ">

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


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>

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


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>
<h2> T i t r e de niveau 2</ h2>
<h3> T i t r e de niveau 3</ h3>
<h4> T i t r e de niveau 4</ h4>
<h5> T i t r e de niveau 5</ h5>
<h6> T i t r e de niveau 6</ h6>
</ body>

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


la mise en forme du texte les titres

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

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


la mise en forme du texte les titres

Balises de structuration du texte


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.

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


la mise en forme du texte les titres

Balises de structuration du texte

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.

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


la mise en forme du texte les titres

Balises de structuration du texte

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.

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


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.
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 17 / 35
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>

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


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 >
< l i > C o n q u é r i r l e monde</ 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>

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


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>
< l i > C o n q u é r i r l e monde</ 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>

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


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>

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


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 :

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


les Liens Hypertexte

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.
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 23 / 35
les Liens Hypertexte

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>
B.GUIZANI (MP-Telecom/FSM) HTML5 21 avril 2019 24 / 35
les Liens Hypertexte

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

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


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.

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


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.

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


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 ">

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


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

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


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>
< td> C e l l u l e 2 ligne 1 </ td>
< td> C e l l u l e 3 ligne 1 </ td>
</ t r >
< t r>
< td> C e l l u l e 1 ligne 2 </ td>
< td> C e l l u l e 2 ligne 2 </ td>
< td> C e l l u l e 3 ligne 2 </ td>
</ t r >
< t r>
< td> C e l l u l e 1 ligne 3 </ td>
< td> C e l l u l e 2 ligne 3 </ td>
< td> C e l l u l e 3 ligne 3 </ td>
</ t r >
</ t a b l e>

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


les tableaux Exemples de tableaux

Exemple simple d'un tableau


<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>

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


les tableaux Exemples de tableaux

Exemple simple d'un tableau

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


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 .</ >

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


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)

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


Structuration page web Sections

Structure standard d'une page web

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

Vous aimerez peut-être aussi