XHTML et CSS

Transcription

XHTML et CSS

XHTML et CSS
17 et 18 mai 2006
CRI-IUT 2006 – METZ - Jérôme LANDRÉ - IUT Le Creusot
1
Sommaire
1) Introduction
2) HTML, XML
3) XHTML
4) CSS
5) Exemples
6) Outils
7) Conclusion
17 et 18 mai 2006
2
1) Introduction
17 et 18 mai 2006
3
Technologies Web
●
●
HTML est limité :
–
Manque de séparation entre le contenu et le
contenant
–
Manque de possibilité de représentation de
données complexes
–
Statique : non extensible
=> nouvelle façon de créer des sites
webs :
–
Évolutifs, extensibles
–
Portables (systèmes, navigateurs)
17 et 18 mai 2006
4
2) HTML, XML
17 et 18 mai 2006
5
HTML
●
HTML : HyperText Markup Language
●
Langage à balises
–
Exemple:
<html>
<head>
<title>Essai de page</title>
</head>
<body>
page HTML.
</body>
</html>
17 et 18 mai 2006
6
Langages à balises
●
SGML
●
HTML
XML
XHTML
17 et 18 mai 2006
●
●
SGML : Standard
Generalized
Markup Language
HTML : HyperText
Markup Language
XML : eXtensible
Markup Language
XHTML : HTML
réécrit en XML
7
XML
●
●
Langage à balises
extensible
<bibliotheque>
Norme =>
<titre>Germinal</titre>
–
Documents
structurés (arbre)
–
Règles strictes
–
Transmission et
échange
d'information
simples (texte)
<livre>
<auteur>Emile Zola</auteur>
</livre>
...
<livre>
<titre>La peste</titre>
<auteur>Albert Camus</auteur>
</livre>
</bibliotheque>
17 et 18 mai 2006
8
DTD
●
●
<!DOCTYPE bibliotheque [
DataType
Definition
C'est le DTD qui
défini le contenu
du document XML
<!ELEMENT livre ( titre, auteur )>
<!ELEMENT titre (#PCDATA)>
<!ELEMENT auteur (#PCDATA)>
]>
17 et 18 mai 2006
9
Validité des documents
●
Le DTD n'est pas obligatoire
●
Document valide s'il respecte une DTD
●
Document bien formé s'il respecte les
règles de base de XML
17 et 18 mai 2006
10
Espaces de noms
●
●
●
●
Un espace de noms est l'ensemble des
balises définies par une DTD
XML permet de mélanger des espaces de
noms dans un même document (à
condition de ne pas avoir de nom de
balise en double)
Un document XHTML peut mélanger
HTML, MathML, ChemicalML, ...
L'application chargée de décoder XML est
appelée un parseur (parser)
17 et 18 mai 2006
11
XSL et XSLT
●
XML
●
XSLT1
XSLT2
HTML
PDF
17 et 18 mai 2006
XSL (eXtensible
Stylesheets
Language)
XSLT (XSL
Transform) permet
de transformer
XML vers un autre
format
12
3) XHTML
17 et 18 mai 2006
13
XHTML
●
Réécriture de HTML en XML
●
=> Règles à suivre :
a) Documents bien formés
b) Eléments et attributs en minuscules
c) Toutes les balises doivent être fermées
d) Attributs entre guillemets
e) Eléments vides fermés
...
17 et 18 mai 2006
14
a) Documents bien formés
●
Document sous
forme d'arbre





...
Ceci est un
texte.

...
...
Ceci est un

texte.



17 et 18 mai 2006
...
15
b) Eléments en minuscules
<HTML>
<html>
<HEAD>
<head>
<TITLE>TEST</TITLE>
<title>TEST</title>
</HEAD>
</head>
<BODY>
<body>


Essai...
Essai...
</BODY>
</body>
</HTML>
</html>
17 et 18 mai 2006
16
c) Balises fermées
●
Toutes les balises
doivent être
fermées
paragraphe
<ul>liste
<li> Element 1,
<li>Element 2.
</ul>Autre paragraphe
paragraphe
<ul>liste
<li> Element 1, </li>
<li>Element 2.</li>
</ul>Autre
paragraphe
17 et 18 mai 2006
17
d) Attributs entre guillemets
 Ceci
est un texte noir
avec du
 Ceci
est un texte noir
avec du


rouge
rouge
 au milieu.
 au milieu.


17 et 18 mai 2006
18
e) Eléments vides fermés
●
●
Toutes les balises
doivent être
fermées
Test de saut
de ligne et image :
Utilisation de la
représentation
réduite XML :

<img src="toto.jpg">
 => 
Test de saut
de ligne et image :
<hr></hr> => <hr />
<img src="toto.jpg" />
...

17 et 18 mai 2006
19
DTD disponibles
●
●
●
XHTML Strict
–
Règles XHTML strictes
–
Ex. : <applet> n'existe plus => <object>
XHTML Transitional
–
Règles XHTML compatibles avec HTML 4.01
–
Ex. : <applet> est autorisé
XHTML Frameset
–
Adapté pour prendre en compte les frames
17 et 18 mai 2006
20
Exemple de fichier XHTML
<!--
<!--
Extensible HTML version 1.0
Transitional DTD ...
<!ELEMENT img EMPTY>
Extensible HTML version 1.0 Strict DTD
...
<!ELEMENT img EMPTY>
<!ATTLIST img
<!ATTLIST img
%attrs;
src
%URI;
#REQUIRED
%attrs;
alt
%Text;
#REQUIRED
src
%URI;
#REQUIRED
alt
%Text;
#REQUIRED
name
longdesc
NMTOKEN
#IMPLIED
%URI;
#IMPLIED
longdesc
height
%Length;
#IMPLIED
width
%Length;
#IMPLIED
%URI;
#IMPLIED
usemap
ismap
align
(ismap)
#IMPLIED
%ImgAlign;
#IMPLIED
border
%Length;
#IMPLIED
hspace
%Pixels;
#IMPLIED
vspace
%Pixels;
#IMPLIED
%URI;
#IMPLIED
height
%Length;
#IMPLIED
width
%Length;
#IMPLIED
%URI;
#IMPLIED
usemap
ismap
(ismap)
#IMPLIED
>
>
17 et 18 mai 2006
21
Exemples
...
<a href="http://www.google.fr" target="_blank">
Google
</a> ...
...
<a href="http://www.google.fr"
onclick="target='_blank';">
Google
</a>
17 et 18 mai 2006
22
Exemples
<applet align="middle"
code="viewdb.class" codebase= "./"
width="320" height="240">
</applet>
<object classid="java:viewdb.class"
type="application/x-java-applet"
height="240" width="320">
</object>
17 et 18 mai 2006
23
Exemples
<SCRIPT LANGUAGE="javascript"
SRC="fonctions.js">
</SCRIPT>
<script type="text/javascript"
src="fonctions.js">
</script>
17 et 18 mai 2006
24
4) CSS
17 et 18 mai 2006
25
Feuille de styles
●
Définir les styles des éléments dans un
seul endroit : la feuille de styles
●
CSS Cascading Style Sheet
●
Styles des éléments et positionnement
●
L'ordre de priorité des styles est :
local > page > externe
local : bleu
page : <style>...</style> dans l'entête
externe : <link href="style.css" ... />
17 et 18 mai 2006
26
Format de style
Sélecteur { propriété: valeur; }
Ex. :
p { font-family: sans-serif; font-size: 24px; }
a{
font-family: verdana;
font-size: 16px;
color: green;
}
h1 { font-family: sans-serif, arial, courier; }
17 et 18 mai 2006
27
Sélecteurs spéciaux
●
●
●
Sélecteur universel
–
* { /* style */ }
–
Ex. : * { font-family: sans-serif; }
Sélecteurs multiples
–
balise1, balise2 { /* style */ }
–
Ex. : h2, h3 { align: center; color: red; }
Sélecteurs imbriqués
–
balise1 balise2 { /* style */ }
–
Ex. : p b { color: green; align: left; }
17 et 18 mai 2006
28
Classes
●
●
Classes génériques
–
.classe { /* style */ }
–
Ex. :
●
.rouge { color: red; }
●
Le texte en rouge
●
<h1 class="rouge">Titre 1</h1>
Classes ciblées
–
balise.classe { /* style */ }
–
Ex. :
●
p.bleu { color: blue; }
●
Le texte en bleu
17 et 18 mai 2006
29
Identifiants
●
Un seul identifiant (id) par page pour
appliquer un style à un seul élément
●
#id { /* style */ }
●
Ex. :
#titre { color: green; }
Le titre
Le contenu du document...
17 et 18 mai 2006
30
5) Exemples
17 et 18 mai 2006
31
Document XHTML Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Exemple XHTML Strict</title>
</head>
<body>
Un exemple de fichier XHTML strict.

</body>
</html>
17 et 18 mai 2006
32
Inclusion d'une feuille de styles
<head>
<title>Exemple XHTML Strict</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
Un exemple de fichier XHTML
strict.
</body>
</html>
17 et 18 mai 2006
33
Fichier "style.css"
/* fichier de styles */
p{
font-family: sans-serif, arial, times;
font-size: 12px;
}
a:hover {
background-color: yellow;
font-size: 133%;
}
.bleu { color: blue; }
17 et 18 mai 2006
34
Positionnement
●
Deux façons de
placer les éléments
–
Absolue par rapport
à l'origine de
l'élément
contenant
–
Relative par
rapport à l'élément
précédemment
placé
17 et 18 mai 2006
Page XHTML
main
35
Positionnement
#main
{
position: absolute;
top: 10px;
Page XHTML
main
margin-left: auto;
margin-right: auto;
width: 400px;
height: 200px;
padding: 4px;
background-image:
url(./images/fond.jpg);
}
17 et 18 mai 2006
36
Positionnement
#titre
{
position: relative;
top: 10px;
Page XHTML
main
titre
left: 100px;
width: 300px;
height: 80px;
padding: 4px;
background-image:
url(./images/fond.jpg);
}
17 et 18 mai 2006
37
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" httpequiv="content-type" />
<title>Ma page XHTML</title>
</head>
<body>
<div id="main">
<div id="titre">Bienvenue</div>
</div>
</body></html>
17 et 18 mai 2006
38
6) Outils
17 et 18 mai 2006
39
Outils
●
●
Développement de pages web conformes
XHTML/CSS :
–
Outils du commerce récents : Frontpage,
Dreamweaver, ...
–
Outils gratuits : Amaya, Nvu, ...
Visualisation de pages XHTML/CSS :
–
Internet Explorer 7
–
Mozilla Firefox (versions 1.0 et +)
17 et 18 mai 2006
40
Services de validation
●
Sur le site en ligne du w3c
–
Validation XHTML
●
–
Vérifie la conformité avec la DTD définie dans le
document XHTML
Validation CSS
●
Vérifie la conformité avec la DTD des CSS
17 et 18 mai 2006
41
Validation XHTML
17 et 18 mai 2006
42
Validation XHTML
<html>
<head>
<title>Le titre</title>
</head>
<body>
Test HTML...
</body>
</html>
17 et 18 mai 2006
43
17 et 18 mai 2006
44
17 et 18 mai 2006
45
17 et 18 mai 2006
46
Validation XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<head>
<meta content="text/html; charset=ISO-8859-1" httpequiv="content-type" />
<title>Le titre</title>
</head>
<body>
Test HTML...
</body>
</html>
17 et 18 mai 2006
47
17 et 18 mai 2006
48
Exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<head>
<title>test</title>
</head>
<body>
La couleur rouge.
<img src="image.jpg" />
</body>
</html>
17 et 18 mai 2006
49
Exemple
17 et 18 mai 2006
50
Exemple
<head>
<title>test</title>
</head>
<body>
La couleur rouge.<img
src="image.jpg" alt="mon image" />
</body></html>
17 et 18 mai 2006
51
Validation CSS
17 et 18 mai 2006
52
Validation CSS
body {
font-family: sans-serif; font-size: 14px;
color: black; background-color: #ffffff;
background-image: url(./images/fond/carre_bg.jpg);
background-repeat: repeat;
background-attachment: fixed;
margin-top: 10px; margin-bottom: 10px;
margin-left: 10px; margin-right: 10px;
}
h1 {
font-size: 24px; letter-spacing: 0em;
}
a{
color: blue; background-color: inherit;
text-decoration: none;
}
17 et 18 mai 2006
53
Validation CSS
17 et 18 mai 2006
54
7) Conclusion
17 et 18 mai 2006
55
XHTML et CSS
●
●
Avantages :
–
Assure une compatibilité des navigateurs
Internet
–
Indépendant du format de sortie : HTML, PDF,
imprimante, téléphone portable...
–
Gestion de styles => flexibilité
Inconvénients :
–
Nécessite la refonte des sites webs
–
Apprentissage parfois difficile
17 et 18 mai 2006
56
Merci pour votre attention
●
W3C : http://www.w3.org
–
Validation XHTML :
●
–
Validation CSS :
●
–
http://validator.w3.org
http://jigsaw.w3.org/css-validator
Amaya : http://www.w3.org/amaya
●
Nvu : http://www.nvu.org
●
Firefox : http://www.mozilla.org
●
Infos : http://www.commentcamarche.net
17 et 18 mai 2006
57

XHTML et CSS

Transcription

Documents pareils

Metz - Lyon Description

Finale Académique 2015 16 avril à l`ALTO au Creusot Finale

Nu signé Louise Landré (1852-?) Huile sur toile

Festival des lycéens - Lycée Léon Blum LE CREUSOT

JSL Le Creusot, édition du 10-12-2012 : la maison de la parentalité

écomusée creusot-montceau fiche de réservation de visite pour les

L`IUT de Metz organise une course de Pocket Bikes dans le cadre

Offre stage