Html, css, Xhtml

1
Html, css, Xhtml

• Rappels Html
• Usages des css
• Vers le Xhtml

CPeyronnet UE13 - 140503
2
Quest 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
3
A quoi sert le html ?

• Le html permet

• 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
4
Html 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
5
Html les problèmes courants
lth1gt est un élément de structuration
ltfontgt est un élément de mise en page
CPeyronnet UE13 - 140503
6
Html 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
7
Nos 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.. )

• La solution

Dès génération de linformation, dissocier
structure et mise en forme
CPeyronnet UE13 - 140503
8
Structuration de linformation.

• Quest ce quun document structuré ?

• Cest un document qui comporte

• des éléments didentification

• des titres, sous titres

• des paragraphes

• 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
9
Structurer 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
10
Structurer lanalogie avec les traitements de
texte.
qui peuvent être indépendants de la présentation
CPeyronnet UE13 - 140503
11
Sémantique (basique) des documents html
squelette html

• Déclarations lthtmlgt et DTD

• En tête ltheadgt

• Corps ltbodygt

• 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
12
Sé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
13
Exemples

• Demo

CPeyronnet UE13 - 140503
14
La mise en forme des documents utilisation des
css.

• Pourquoi les 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
15
La 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
16
La mise en forme des documents utilisation des
css.

• Que permettent les 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
17
La 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
18
Exemple de syntaxe de css.

• h1
• font-family Verdana, Arial, Helvetica,
  sans-serif
• font-size 18px
• font-weight bold
• color FF0000

CPeyronnet UE13 - 140503
19
Syntaxe 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
20
Syntaxe 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
21
Css éléments de positionnement
Chaque élément est entouré dune boite
CPeyronnet UE13 - 140503
22
Css éléments de positionnement
soit, en langue anglaise
CPeyronnet UE13 - 140503
23
Css éléments de texte

• Voir la référence

CPeyronnet UE13 - 140503
24
Css application

• Cas de lintégration des règles au cas par cas
  dans la page html

CPeyronnet UE13 - 140503
25
Css application

• Intégration des règles dans len tête de la page
  html

Déclaration de style
Application automatique
CPeyronnet UE13 - 140503
26
Css application

• Création dun fichier externe (.css), lié aux
  différentes pages dun site

CPeyronnet UE13 - 140503
27
Xhtml 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
28
Xhtml 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
29
Xhtml 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