Version PDF - Bienvenue sur le site enseignement de Jean

Transcription

TP : XHTML et les feuilles de style CSS
1
Quelques liens utiles
Normes du W3C CSS1 1 [en français 2 ] et CSS2 3 [en français 4 ].
La norme HTML 4.01 du W3C 5 (version en français 6 ).
La norme XHTML 1.0 du W3C 7 (version en français 8 ).
Tutoriels CSS Alsa Créations 9 , W3schools 10 ou CSS Zen Garden 11 .
2
XHTML
Le langage XHTML 12 est la forme XML des anciennes pages HTML. L’objet de cette séance est de comprendre
ce format afin de pouvoir facilement produire des documents qui respectent la norme XHTML :
¿¿¿ La norme XHTML 1.0 du W3C 13 (version en français 14 ).
2.1
Validation XHTML
Commencez par écrire un petit document HTML :
<html>
<body>
<p>Éclipse</p>
</body>
</html>
En fait, ce document ne respecte ni la norme XHTML, ni la norme HTML. Corrigez le avec la commande tidy
(le validateur HTML/XHTML du W3C 15 ) pour obtenir un document qui respecte la norme HTML du W3C 16
(version en français 17 ) :
tidy -im votre-fichier.html
Produisez ensuite sa version XHTML˜1.0 18 (version en français 19 ) avec la même commande :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
http://www.w3.org/TR/REC-CSS1
ref:dil-norme-css1-fr
ref:dil-norme-css2-fr
http://www.w3.org/TR/html4/
http://www.la-grange.net/w3c/html4.01/
http://www.w3.org/TR/xhtml1/
http://www.la-grange.net/w3c/xhtml1/
http ://www.alsacreations.com/articles/
http://www.w3schools.com/css/
http://www.csszengarden.com/
http ://www.w3.org/People/Raggett/tidy/
http://www.w3.org/TR/html4/
http://www.la-grange.net/w3c/html4.01/
1
tidy -im -asxhtml -indent votre-fichier.html
On peut, sommairement, définir le langage XHTML par les points suivants :
• un document XHTML est un document XML 1.0,
. les éléments sont correctement fermés,
. les valeurs des attributs sont quotés,
. un document XHTML est un seul arbre,
• un document XHTML valide respecte l’un de ces DTD :
. Strict (pour les pages basées sur les CSS et débarrassées des éléments de présentation)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
. Transitional (pour les pages intégrants des éléments de présentation font, etc.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
. Frameset (pour la définition des frames)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• les éléments XHTML sont inspirés des éléments HTML, mais
. les éléments sont en minuscules ( <h1>hello</h1> ),
. les attributs sont en minuscules ( <img src="..." /> ),
. les attributs ont toujours une valeur ( <input readonly="readonly" /> ),
. l’attribut name est remplacé par l’attribut id ,
Retrouvez une description plus détaillée sur le site W3 Schools 20 .
2.2
La DTD XHTML en version stricte
• Essayez de modifier ce petit document en ajoutant des élements (liste ul non numérotée, tableaux, paragraphes). A partir de maintenant nous utiliserons le XHTML (de préférence en version stricte) pour coder
nos documents HTML. Vous pouvez récupérer la DTD du XHTML˜1.0 pour l’étudier 21 . Étudiez notamment les éléments que l’on peut placer comme fils de l’élément body. A chaque modification vous devez
valider le document à l’aide de tidy et le visualiser dans un navigateur. Vous pouvez également ajouter à
firefox un plugin de validation 22 .
• Dans un deuxième temps, utilisez l’attribut id pour placer un identifiant et faites y référence dans un lien
(en utilisant la syntaxe ci-dessous).
<a href="nom-de-page.html#identifiant">Lien à suivre</a>
• Dans un troisième temps, essayez d’utiliser une section littérale dans votre document XHTML.
• Dans un quatrième temps, faites en sorte que votre document soit accessible via le serveur WEB du
département :
20. http://www.w3schools.com/html/html xhtml.asp
21. xhtml1-strict.html
22. http://users.skynet.be/mgueury/mozilla/
2
mkdir -p "$HOME/public_html/tp-xml"
cp votre-fichier.html "$HOME/public_html/tp-xml/index.html"
chmod -R u=rwx,go=rX "$HOME/public_html/tp-xml"
chmod u=rwx,go=rx "$HOME/public_html"
chmod o+x "$HOME"
avec l’adresse :
http://prenom.nom.etu.perso.luminy.univ-amu.fr/tp-xml/
• Dans un cinquième temps, utilisez tidy pour modifier l’encodage de votre document (choisissez UTF-8 ).
Prenez soin de placer des caractères accentués dans votre document pour que le test soit intéressant. Si
vous utilisez l’adresse ci-dessus, la page est-elle correctement rendue ?
3
XHTML & CSS
Nous allons maintenant améliorer l’aspect des pages XHTML produites en utilisant une feuille de style CSS. Pour
ce faire, chaque page XHTML doit impérativement contenir dans son entête une référence vers la feuille de style
CSS :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Bienvenue au Département d’Informatique</title>
<link rel="stylesheet" type="text/css" href="monStyle.css"/>
</head>
<body>
... contenu de la page ..
</body>
</html>
3.1
Le principe des CSS
Pour améliorer l’aspect de vos pages, nous allons utiliser les articles qui présentent les CSS sur le site de Alsa
Créations 23 . Partons du code XHTML suivant :
<p class="centrer">paragraphe centré</p>
<div class="boite"><p>Dans une boite</p></div>
A l’aide d’une feuille CSS nous pouvons associer un ensemble d’attributs graphiques à une famille d’éléments
XML (ou HTML). Une règle CSS est composée d’un sélecteur et d’un ensemble d’attributs. Le sélecteur permet
de spécifier les éléments XML dont l’affichage va être modifié. Je vous encourage à lire la spécification 24 CSS
des sélecteurs de la norme CSS2 25 . Vous trouverez sur le site w3schools 26 une liste exhaustive des propriétés.
23.
24.
25.
26.
http ://www.alsacreations.com/articles/
http://www.w3.org/TR/REC-CSS2/selector.html
http ://www.w3schools.com/cssref/default.asp
3
/* propriétés des balises p, ul, ol et li */
p,ul,ol,li {
font-family: Arial;
font-size: medium;
}
/* propriétés de la classe "centrer" */
.centrer {
text-align: center;
}
div.centrer {
text-align: center;
border: solid 1px blue;
padding: 5px;
margin: 5px;
}
Pour compléter cette (rapide) présentation vous pouvez lire cette petite introduction sur CSS2 27 avec notamment
un tutoriel pour XML.
3.2
Mise en page en CSS
Vous pouvez suivre le cours ci-dessous pour construire un exemple complet :
¿¿¿¿ Réaliser un design complet XHTML/CSS en 5˜étapes 28
Vous pourrez ensuite choisir un modèle de mise en page (aussi appelé gabarit) avec au moins une entête, un
menu et une zone centrale en lisant le cours ci-dessous :
¿¿¿¿ Les modèles de mise en page en CSS 29
Terminez votre travail en changeant ou en améliorant le menu mis en place à l’étape précédente avec le cours
ci-dessous :
¿¿¿¿ Créer des menus simples en CSS 30
27.
28.
29.
30.
ref:dil-norme-css2-fr-intro
http://www.alsacreations.com/tuto/lire/555-design-css-complet-5-etapes.html
http://www.alsacreations.com/static/gabarits/
http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
4

Version PDF - Bienvenue sur le site enseignement de Jean

Transcription

Documents pareils

Son CV - David Marchesson

CV - Undergraphic, création de site Internet à Amboise (37)

1 Validation des documents HTML et XHTML Qu`est

Les entités html

XHTML et CSS - Nicolas JEAN

Structure de base d`un document XHTML 1.0 Strict (Balises de

Variantes de HTML Variantes de HTML - LabUnix

Fiche5TechnoWeb xml dtd xsl

!DOCTYPE et DTD

___CFE INFORMATION

Etape 1 : Quel statut adopter ? Etape 2

Tom Germain

Formation Web Adobe DREAMWEAVER PERFECTIONNEMENT

xhtml - Real Hackers