Title: Html, css, Xhtml
1Html, css, Xhtml
- Rappels Html
- Usages des css
- Vers le Xhtml
CPeyronnet UE13 - 140503
2Quest ce quest et nest pas le html ? Rappels
et constats.
- Le html est un langage de marquage utilisé pour
encoder les documents du World Wide Web.
- Le html n'est théoriquement pas un langage de
mise en page mais de structuration et de
spécification de liens hypertexte il est donc
souvent utilisé à contre-emploi !
- Le html, historiquement est une combinaison
de SGML et dASCII
CPeyronnet UE13 - 140503
3A quoi sert le html ?
- l'affichage des documents dans un navigateur (et
donc il permet de définir dans une moindre mesure
comment laffichage doit se réaliser mais ce
n'est pas son rôle initial)
- de créer des documents interactifs
- de structurer le contenu dun document (texte,
médias)
CPeyronnet UE13 - 140503
4Html les problèmes courants
- Par définition un langage de marquage est conçu
pour structurer le contenu d'un document (ici
donc pour le www) et non pour le formater en
vue d'un affichage précis le contenu devrait
donc théoriquement l'emporter sur l'apparence !
- Cest bien dans cet esprit que le html a été
originellement conçu mais son développement
quelque peu anarchique a fait que se sont
mélangés éléments de structuration, dinformation
et de mise en page dans un même langage gt exemple
CPeyronnet UE13 - 140503
5Html les problèmes courants
lth1gt est un élément de structuration
ltfontgt est un élément de mise en page
CPeyronnet UE13 - 140503
6Html les problèmes courants
- A partir des constats précédents, on ne
sétonnera pas
- quil soit impossible dafficher correctement un
document html de la même façon dans tous les
navigateurs / OS
- que certaines balises ne soient pas interprétées
ou soient mal interprétées
- quil soit impossible dobtenir des documents
sources utilisables par dautres applications
CPeyronnet UE13 - 140503
7Nos préoccupations en terme dinformation
- Dans le quotidien nous avons besoin
- dune information structurée, car plus facilement
lisible interprétable (humainement et
informatiquement)
- dune limitation des documents sources
- de documents multi-standards (Impression, web,
web léger, PAO.. )
Dès génération de linformation, dissocier
structure et mise en forme
CPeyronnet UE13 - 140503
8Structuration de linformation.
- Quest ce quun document structuré ?
- Cest un document qui comporte
- des éléments didentification
- des éléments de hiérarchie
- Ces éléments sont présents dans le html mais
aussi dans tout traitement de texte
CPeyronnet UE13 - 140503
9Structurer lanalogie avec les traitements de
texte.
Ici un document word en mode plan on peut voir
les différents niveaux de structuration
CPeyronnet UE13 - 140503
10Structurer lanalogie avec les traitements de
texte.
qui peuvent être indépendants de la présentation
CPeyronnet UE13 - 140503
11Sémantique (basique) des documents html
squelette html
- Déclarations lthtmlgt et DTD
- lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"gt - lthtmlgt
- ltheadgt
- lttitlegtdoc1lt/titlegt
- ltmeta http-equiv"Content-Type"
content"text/html charsetiso-8859-1"gt - lt/headgt
- ltbodygt
- lt/bodygt
- lt/htmlgt
CPeyronnet UE13 - 140503
12Sémantique (basique) des documents html balises
- en tête
- HTML lthtmlgt avec différents attributs possibles
(dir, lang - DTD lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"gt - HEAD
- TITLE
- META
- Autres marqueurs ltscriptgt, ltstylegt etc..
- corps
- BODY
- H
- P
- DIV ltdiv id"paragraphe_1"gt
- Listes
- BLOCKQUOTE
- élements
- IMG ltimg src"ZZZ"gt
- URL
- tableaux
CPeyronnet UE13 - 140503
13Exemples
CPeyronnet UE13 - 140503
14La mise en forme des documents utilisation des
css.
- Le html devrait être réservé à structuration de
linformation
- Il faut donc une technique qui permette
deffectuer des mise en page adaptées aux
différentes sorties (écran, papier, etc..)
- Cette technique dassociation de styles est déjÃ
depuis longtemps utilisé dans le domaine de la PAO
- Pour rappel, cette possibilité de dissocier
structure et mise en page via les css, existe
depuis 1997
CPeyronnet UE13 - 140503
15La mise en forme des documents utilisation des
css.
- Que sont les css (feuilles de style) ?
- Le terme de css désigne à la fois les règles
(styles) et les fichiers externes portant
lextension .css.
- Un style (css) nest quune règle qui indique au
navigateur (ou autre media) comment rendre
le contenu placé entre les marqueurs dun élément.
CPeyronnet UE13 - 140503
16La mise en forme des documents utilisation des
css.
- Un contrôle précis de tous les attributs de
présentation de tous les marqueurs dun document
ou plusieurs documents
- Un positionnement précis des éléments
- De créer des combinaisons de décoration inédites
en html
- De normaliser lensemble de la mise en page dun
site
CPeyronnet UE13 - 140503
17La mise en forme des documents utilisation des
css.
- Comment utiliser les css?
- Intégration des règles au cas par cas dans la
page html
-gt maintenance des pages difficile, on perd
lintérêt des css
- Intégration des règles dans len tête de la page
html
-gt valable pour des règles locales mais peu
recommandé dans la construction dun site
- Création dun fichier externe (.css), lié aux
différentes pages dun site
CPeyronnet UE13 - 140503
18Exemple de syntaxe de css.
- h1
- font-family Verdana, Arial, Helvetica,
sans-serif - font-size 18px
- font-weight bold
- color FF0000
CPeyronnet UE13 - 140503
19Syntaxe css les règles de construction
- SELECTEUR DECLARATION la DECLARATION est
construite sur la base PROPRIETEVALEUR.
Exemple h1 colorred - Sélecteurs
- Elements h1 ou groupe h1, h2
- Contextuels LI B colorred
- Classes .test colorred
- ID selectid colorred
- Declarations
- Propriété font-family
- Mots-clefs DOTTED, BORDER STYLE, etc...
- Valeurs
CPeyronnet UE13 - 140503
20Syntaxe css les règles de construction
Sélecteur
- h1
- font-family Verdana, Arial, Helvetica,
sans-serif - font-size 18px
- font-weight bold
- color FF0000
-
Propriété
Déclarations
Valeur
CPeyronnet UE13 - 140503
21Css éléments de positionnement
Chaque élément est entouré dune boite
CPeyronnet UE13 - 140503
22Css éléments de positionnement
soit, en langue anglaise
CPeyronnet UE13 - 140503
23Css éléments de texte
CPeyronnet UE13 - 140503
24Css application
- Cas de lintégration des règles au cas par cas
dans la page html
CPeyronnet UE13 - 140503
25Css application
- Intégration des règles dans len tête de la page
html
Déclaration de style
Application automatique
CPeyronnet UE13 - 140503
26Css application
- Création dun fichier externe (.css), lié aux
différentes pages dun site
CPeyronnet UE13 - 140503
27Xhtml pourquoi ?
- Nécessité de normalisation et d'harmonisation
face aux différents moyens d'accès à Internet
- XHTML est sur le fond identique à HTML 4.01 mais
reformulé comme application de XML - XHTML est donc le successeur de HTML 4.01
(théoriquement depuis janvier 2000) - Norme actuelle XHTML 1.0 XHTML 2.0 arrive
bientôt
CPeyronnet UE13 - 140503
28Xhtml quoi et comment
- Des éléments de réponse
- utilisation impérative des minuscules pour les
balises - toute balise ouverte doit être fermée
- les balises célibataires doivent aussi être
fermées exemple lthrgt en HTML donne lthr /gt en
XHTML - les attributs doivent toujours figurer entre
guillemets exemple lttable width"100"gt
CPeyronnet UE13 - 140503
29Xhtml quoi et comment
- Des éléments de réponse
- les imbrications doivent être correctes ...
exemple ltpgtltbgtparagraphe en graslt/pgtlt/bgt doit
être transformé en ltpgtltbgtparagraphe en
graslt/bgtlt/pgt - Utilsation des DTD XHTML
- strict
- transitional
- frameset
CPeyronnet UE13 - 140503