Chapitre1-XHTML-INTRODUCTION ET CONCEPTS.ppt

Technologie Web 2.0 :
Technologie Web 2.0 :
XHTML Introduction et
XHTML Introduction et
concepts
concepts
Pr. Omar ACHBAROU
Pr. Omar ACHBAROU
Technologie web 2.0 2019
Technologie web 2.0 2019

HTML = HyperText Markup
HTML = HyperText Markup
Language ?
Language ?
 Hyper : Non linéaire, liens entre nœuds
Hyper : Non linéaire, liens entre nœuds
 Text : Composé de texte
Text : Composé de texte
 Markup : Marqué, balisé
Markup : Marqué, balisé
 Language : Langage
Language : Langage

 Langage à balises de
Langage à balises de
description de documents
description de documents
hypertextes
hypertextes
3

Qu’est-ce que HTML ?
Qu’est-ce que HTML ?
 Langage de présentation de documents
Langage de présentation de documents
 N’est
N’est PAS
PAS un langage de programmation
un langage de programmation
 Langage : syntaxe STRICTE
Langage : syntaxe STRICTE
 Utilisé pour construire les pages Web
Utilisé pour construire les pages Web
 Navigation hypertexte : ancres, liens
Navigation hypertexte : ancres, liens
 Utilise des balises
Utilise des balises
 Documents exploités par des agents utilisateurs
Documents exploités par des agents utilisateurs
 Navigateur pour « visualiser » le résultat
Navigateur pour « visualiser » le résultat
 Robots des moteurs de recherche pour indexer
Robots des moteurs de recherche pour indexer
 Automates divers pour traiter les données
Automates divers pour traiter les données
4

Structurer un document ?
Structurer un document ?
12:16:50
12:16:50
Programmation Web 2012-2013
5
Mettre en forme ?
1- Structurer (HTML)
2
-
A
p
p
l
i
q
u
e
r
u
n
s
t
y
l
e
(
C
S
S
)

Structurer le document
Structurer le document
12:16:51
12:16:51
6
Titre du document
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Paragraphe
…
Repérer les structures :
Marquer leur
début/fin
Utilisation de balises

Appliquer une feuille de style
Appliquer une feuille de style
12:16:51
12:16:51
7
Style :
Police de base : 8pt
Titre de niveau 1
•Bleu, majuscules
•Bords haut et bas
Paragraphes
•Justifier
Style :
Titre de niveau 1
•Rouge
Paragraphes
•Justifier
1ère
lettre paragraphe
•Gros, gris, italique

Balises (tags, marqueurs) HTML
Balises (tags, marqueurs) HTML
 Texte entouré par
Texte entouré par <
< et
et >
>
 Balises insensibles à la casse :
Balises insensibles à la casse :
 <
<BALISE
BALISE>
>
 <
<balise
balise>
>
 <
<Balise
Balise>
>
 <
<bAlIsE
bAlIsE>
>
 Ouvrante :
Ouvrante : <
<balise
balise>
>
 Fermante :
Fermante : </
</balise
balise>
> (éventuellement optionnelle)
(éventuellement optionnelle)
 Non visibles dans le rendu du navigateur
Non visibles dans le rendu du navigateur
 attributs/options :
attributs/options : <
<balise
balise attr
attr=
="
"val
val"
" option
option >
>
8
Équivalent
mais XHTML  minuscules
Encadrement d'un bloc

Utilisation des balises
Utilisation des balises
 Utilisation
Utilisation CORRECTE
CORRECTE
 <i>Texte<b>Texte Texte</b></i>
<i>Texte<b>Texte Texte</b></i>
 Utilisation
Utilisation INCORRECTE
INCORRECTE
 <i>Texte<b>Texte Texte</i></b>
<i>Texte<b>Texte Texte</i></b>
 Jamais de chevauchement (pile d’états)
Jamais de chevauchement (pile d’états)
9

Document HTML
Document HTML
 Document texte ASCII
Document texte ASCII .htm
.htm ou
ou .html
.html
 Structure de base :
Structure de base :
1.
1. Information sur la version de HTML utilisée
Information sur la version de HTML utilisée
2.
2. En-tête déclaratif
En-tête déclaratif
3.
3. Corps, contenu du document
Corps, contenu du document
10
12:16:51
12:16:51
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
Salut !
</body>
</html>
1.
2.
3.

Document HTML
Document HTML
.htm ou
ou .html
.html
Structure de base :
1.
1.Information sur la version de HTML utilisée
2.
3.
11
12:16:51
12:16:51
<html>
<head>
</head>
<body>
Salut !
</body>
</html>
1.
2.
3.

Structure d’un document HTML
Structure d’un document HTML
 DTD
DTD
 D
Document
ocument T
Type
ype D
Definition
efinition
 Description d’un langage particulier
Description d’un langage particulier
 Permet à l’agent utilisateur d’interpréter correctement le document
Permet à l’agent utilisateur d’interpréter correctement le document
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 Le <! DOCTYPE> doit être la première chose dans votre document HTML, avant
la balise <html>.
 La déclaration n'est pas une balise HTML <! DOCTYPE>; il est une instruction au
navigateur web sur la version de la page HTML est écrit dans.
 Dans HTML 4.01, la déclaration <! DOCTYPE> fait référence à une DTD, parce
que le HTML 4.01 était basé sur SGML. La DTD spécifie les règles pour le
langage de balisage, de sorte que les navigateurs affichent correctement le
contenu.
 HTML5 ne repose pas sur SGML, et ne nécessite donc pas une référence à une
DTD.
 Astuce: Toujours ajouter la déclaration à vos documents HTML, de sorte que le
navigateur sait quel type de document à attendre <! DOCTYPE>.
12

DTD HTML
DTD HTML
 Il y a trois <! DOCTYPE> déclarations en HTML
4.01. En HTML5, il n'y a qu'un seul:
 HTML 4.01 Strict
HTML 4.01 Strict
 HTML 4.01 Transitional
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
"http://www.w3.org/TR/html4/loose.dtd">
 HTML 4.01 Frameset
HTML 4.01 Frameset
Frameset//EN"
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
 <!DOCTYPE html>
<!DOCTYPE html>
 Les éléments HTML - DOCTYPES valides
https://www.w3schools.com/tags/ref_html_dtd.asp
https://www.w3schools.com/tags/ref_html_dtd.asp
13

Document HTML
Document HTML
.htm ou
ou .html
.html
Structure de base :
1.
2.
2.En-tête déclaratif
3.
14
12:16:51
12:16:51
<html>
<head>
</head>
<body>
Salut !
</body>
</html>
1.
2.
3.

Structure et contenu de l’en-
Structure et contenu de l’en-
tête
tête
 Informations sur le document
Informations sur le document
 Titre du document (obligatoire)
Titre du document (obligatoire)
<
<title
title>
> …
… </
</title
title>
>
 Méta données
Méta données
<
<meta
meta name
name=
="
"nom
nom"
" content
content=
="
"valeur
valeur"
">
>
<
<meta
meta http-equiv
http-equiv="
="content-type
content-type" content="
" content="text/html
text/html; charset=
; charset=utf-
utf-
8
8" />
" />
<
<meta
meta name
name=
="Author"
"Author" content
content=
="J. Cutrona"
"J. Cutrona">
>
<
<meta
meta name
name=
="keywords"
"keywords" lang
lang=
="fr"
"fr" content
content=
="cours, HTML"
"cours, HTML">
>
<
<meta
meta name
name=
="keywords"
"keywords" lang
lang=
="en"
"en" content
content=
="course, HTML"
"course, HTML">
>
<
<meta
meta name
name=
="copyright"
"copyright" content
content=
="2005 IUT Reims"
"2005 IUT Reims">
>
 Autres informations
Autres informations
 Styles
Styles
 Scripts
Scripts
15

Entités HTML (dans
Entités HTML (dans <
<body
body>
>)
)
 Représentation spécifique des
Représentation spécifique des
 Symboles
Symboles
 Caractères accentués
Caractères accentués
 Forme générale des entités HTML
Forme générale des entités HTML
 &
&code
code;
;
 Quelques exemples
Quelques exemples
 é
é "é"
"é" 
 é
é
  
  " "
" " 
 espace insécable
espace insécable
 <
< "<"
"<" 
 <
<
 &
& "&"
"&" 
 &
&
16

Document HTML
Document HTML
.htm ou
ou .html
.html
Structure de base :
1.
2.
3.
3.Corps, contenu du document
17
12:16:51
12:16:51
<html>
<head>
</head>
<body>
Salut !
</body>
</html>
1.
2.
3.

Utilisation et utilité des balises
Utilisation et utilité des balises
dans
dans <
<body
body>
>
 Initialement :
Initialement : mise en page
mise en page du document
du document
 Police, couleur, taille, alignement du texte, …
Police, couleur, taille, alignement du texte, …
 Maintenant :
Maintenant : structuration logique
structuration logique du document
du document
 Titres de différents niveaux
Titres de différents niveaux
 Paragraphes, citation, exemple, code, …
Paragraphes, citation, exemple, code, …
 Listes
Listes
 Tableaux, …
Tableaux, …
 Si le
Si le document
document est
est correctement structuré
correctement structuré, chaque
, chaque
élément structurel pourra est
élément structurel pourra est mis en forme via
mis en forme via une feuille
une feuille
de style
de style CSS
CSS
18

Mise en page Structuration
 Titres (6 niveaux de hiérarchie) :
Titres (6 niveaux de hiérarchie) :
 <
<h1
h1>
> …
… </
</h1
h1>
>
 <
<h2
h2>
> …
… </
</h2
h2>
>
 <
<h3
h3>
> …
… </
</h3
h3>
>
 <
<h4
h4>
> …
… </
</h4
h4>
>
 <
<h5
h5>
> …
… </
</h5
h5>
>
 <
<h6
h6>
> …
… </
</h6
h6>
>
 Paragraphes
Paragraphes
 <
<p
p>
> …
… [
[</
</p
p>
>]
]
 Saut de ligne :
Saut de ligne :
 <
<br
br>
>
19

 Ligne de séparation horizontale :
Ligne de séparation horizontale :
 <
<hr
hr>
>
 Texte préformaté (brut) :
Texte préformaté (brut) :
 <
<pre
pre>
> …
… </
</pre
pre>
>
 Retours à la ligne et espaces multiples apparaissent
Retours à la ligne et espaces multiples apparaissent
 Groupe « mode en ligne »
Groupe « mode en ligne » 
 structuration pure
structuration pure
 <
<span
span>
> …
… </
</span
span>
>
 Groupe « mode bloc »
Groupe « mode bloc » 
 structuration pure
structuration pure
 <
<div
div>
> …
… </
</div
div>
>
20

Mise en forme Structuration
Mise en forme Structuration
 Styles physiques logiques
Styles physiques logiques
 Gras :
Gras : <
<b
b>
> …
… </
</b
b>
>
 Italique :
Italique : <
<i
i>
> …
… </
</i
i>
>
 Souligné :
Souligné : <
<u
u>
> …
… </
</u
u>
>
 Styles logiques
Styles logiques
 Citation :
Citation : <
<cite
cite>
> …
… </
</cite
cite>
>
 Code :
Code : <
<code
code>
> …
… </
</code
code>
>
 Mise en valeur :
Mise en valeur : <
<em
em>
> …
… </
</em
em>
>
 Mise en valeur :
Mise en valeur : <
<strong
strong>
> …
… </
</strong
strong>
>
 Exemple :
Exemple : <
<samp
samp>
> …
… </
</samp
samp>
>
 …
…
21

Eléments de regroupement
Eléments de regroupement
 Mécanisme générique de structuration du document
Mécanisme générique de structuration du document
 Utilisation conjointe avec les feuilles de style
Utilisation conjointe avec les feuilles de style
 Groupe en ligne
Groupe en ligne
 <
<span
span>
> …
… </
</span
span>
>
 Groupe en bloc
Groupe en bloc
 <
<div
div>
> …
… </
</div
div>
>
22

Classe, identification et
Classe, identification et
description
description
 Affecter une balise à une classe
Affecter une balise à une classe
 Attribut
Attribut class
class
 <
<p
p class
class=
="
"ma_classe
ma_classe"
">
>
 Donner un identifiant à une balise
Donner un identifiant à une balise
 Attribut
Attribut id
id
 Identifiant doit être unique (charge du concepteur)
Identifiant doit être unique (charge du concepteur)
 <
<p
p id
id=
="
"mon_id_unique
mon_id_unique"
">
>
 Décrire un élément
Décrire un élément
 Attribut
Attribut title
title pour la plupart des éléments HTML
pour la plupart des éléments HTML
 Texte affiché sous forme d’info-bulle (tooltip)
Texte affiché sous forme d’info-bulle (tooltip)
23
Sous-groupe de
l'ensemble des balises
<p>
Une balise <p> repérée de
façon unique

Liens et ancres
Liens et ancres
 Base de la navigation hypertexte
Base de la navigation hypertexte
 Lien (
Lien (ancre source d’un
ancre source d’un) : zone active cliquable
) : zone active cliquable
 <
<a
a href
href=
="
"URL
URL"
">
>support du lien
support du lien</
</a
a>
>
 Support : texte, image, contenus entre
Support : texte, image, contenus entre <
<a
a>
> et
et </
</a
a>
>
 Ancre (nommée) : point cible
Ancre (nommée) : point cible
 <
<a
a name
name=
="
"nom
nom"
">
>point d’ancrage
point d’ancrage</
</a
a>
>
 name
name=
= nom unique (à la charge du concepteur)
nom unique (à la charge du concepteur)
 Comment cibler l’ancre dans un lien ?
Comment cibler l’ancre dans un lien ? 
 URL
URL
12:16:51
12:16:51
24

Marque de fragment
Marque de fragment
 Faire référence à un emplacement repéré dans une
Faire référence à un emplacement repéré dans une
ressource
ressource
 Atteindre une ancre…
Atteindre une ancre…
<
<h1
h1><
><a
a name
name=
="
"x1
x1"
">
>txt
txt</
</a
a></
></h1
h1>
>
 …
…ou atteindre un élément identifié
ou atteindre un élément identifié
<
<h1
h1 id
id=
="
"x1
x1"
">
>txt
txt</
</h1
h1>
>
 URL se terminant par
URL se terminant par #
#nom_de_l_ancre
nom_de_l_ancre
http://www.w3.org/TR/html4/…
http://www.w3.org/TR/html4/…
intro/intro.html#fragment-uri
intro/intro.html#fragment-uri
25

Cadres (frames)
Cadres (frames)
 Déprécié mais intéressant !
Déprécié mais intéressant !
 Diviser la fenêtre du navigateur en cadres
Diviser la fenêtre du navigateur en cadres
 Utiliser la DTD HTML 4.01 Frameset
Utiliser la DTD HTML 4.01 Frameset
<
<frameset
frameset rows
rows=
="
"liste
liste"
">
> …
… </
</frameset
frameset>
>
<
<frameset
frameset cols
cols=
="
"liste
liste"
">
> …
… </
</frameset
frameset>
>
 Liste : espacements des colonnes ou des lignes
Liste : espacements des colonnes ou des lignes
 en pixels :
en pixels : 30,
30, en % :
en % : 20%,
20%, ce qu’il reste :
ce qu’il reste : *
*
 <
<frameset
frameset>
> peut contenir
peut contenir
 <
<frameset
frameset>
>
 <
<frame
frame>
>
 <
<noframes
noframes>
>
26

Cadres (frames)
Cadres (frames)
 Comment définir ce qui doit être affiché
Comment définir ce qui doit être affiché
dans les cadres ?
dans les cadres ?
<
<frame
frame name
name=
="
"nom
nom"
" src
src=
="
"URL
URL"
">
>
 name
name=
=
 Nom du cadre / de la fenêtre
Nom du cadre / de la fenêtre
 Utilisé pour qu’il soit la cible de liens :
Utilisé pour qu’il soit la cible de liens :
 <
<a
a href
href=
="
"URI
URI"
" target
target=
="
"nom
nom"
">
> …
… </
</a
a>
>
 src
src=
=
 URL de la page à afficher dans le
URL de la page à afficher dans le
cadre
cadre
27

Cadres : exemple
Cadres : exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
<
<html
html>
>
<
<head
head>
>
<
<meta
meta http-equiv
http-equiv=
="Content-Type"
"Content-Type" content
content=
="text/html; charset=utf-8"
"text/html; charset=utf-8">
>
<
<title
title>
>Cadre principal
Cadre principal</
</title
title>
>
</
</head
head>
>
<
<frameset
frameset cols
cols=
="200,*"
"200,*">
>
<
<frame
frame name
name=
="menu"
"menu" src
src=
="menu.html"
"menu.html">
>
<
<frameset
frameset rows
rows=
="30%,*"
"30%,*">
>
<
<frame
frame name
name=
="titre"
"titre" src
src=
="titre.html"
"titre.html">
>
<
<frame
frame name
name=
="principal"
"principal" src
src=
="principal.html"
"principal.html">
>
</
</frameset
frameset>
>
<
<noframes
noframes>
>
Texte pour les moteurs de recherche
Texte pour les moteurs de recherche
</
</noframes
noframes>
>
</
</frameset
frameset>
>
</
</html
html>
>
28
2 colonnes
2 lignes

Cadre en mode ligne (iframe)
Cadre en mode ligne (iframe)
 Permet de définir un cadre en mode ligne et d’y charger un
Permet de définir un cadre en mode ligne et d’y charger un
document
document
 Balise :
Balise :
<
<iframe
iframe width
width=
="
"largeur
largeur"
"
height
height=
="
"hauteur
hauteur"
"
src
src=
="
"url_page
url_page"
"
frameborder
frameborder=
="
"0|1
0|1"
"
scrolling
scrolling=
="
"yes|no|auto
yes|no|auto"
" >
>
Texte de substitution
Texte de substitution
</
</iframe
iframe>
>
29

Chapitre1-XHTML-INTRODUCTION ET CONCEPTS.ppt

Contenu connexe

Similaire à Chapitre1-XHTML-INTRODUCTION ET CONCEPTS.ppt

Chapitre1-XHTML-INTRODUCTION ET CONCEPTS.ppt