Introduction Aux Systèmes d’Information et Multimédia T. Bourdeaud’huy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques Timothy Berners-Lee
Introduction Aux Systèmes d’Information et
Multimédia
Introduction Aux Systèmes d’Information et
Multimédia
T. Bourdeaud’huy S. Collart-Dutilleul
P. KubiakIG2I - Saison 2006/2007
(X)HTML / Pages Web Statiques
(X)HTML / Pages Web Statiques
Timothy Berners-Lee
Feuilles de Style en CascadeFeuilles de Style en Cascade
ISIM1 – Pages Web Statiques 3 T. Bourdeaud’huy – IG2I Saison 2006-2007
TESTTEST
QCM en début de séance 15 minutes
IntroductionIntroduction
ISIM1 – Pages Web Statiques 5 T. Bourdeaud’huy – IG2I Saison 2006-2007
Kezako ?Kezako ?
HTML = outil de structuration de documents– On indique le sens des éléments (titre, chapitre, citation, …)
– Le HTML permet aussi de spécifier une mise en forme, mais :
– ce n’est pas son objectif initial
– Le rendu sera différent suivant les navigateurs
CSS1 (W3C/1996) = outil de mise en forme de documents– Fichier texte séparé (1 seul téléchargement requis)
– Spécification de la forme des éléments (un titre est centré en haut de la page, une citation est en italique, …)
CSS2 (W3C/1998) =– CSS1 + formatage en fonction du périphérique d’affichage (pda,
imprimante,…)
ISIM1 – Pages Web Statiques 6 T. Bourdeaud’huy – IG2I Saison 2006-2007
RessourcesRessources Recommandations W3C
– http://www.w3.org/TR/ – Traduction FR : http://www.w3.org/2003/03/Translations/byLanguage?language=fr
Tutoriels– http://tecfa.unige.ch/guides/css/pointers.html– http://fr.selfhtml.org/css/proprietes/index.htm
Editeurs– http://www.w3.org/Style/CSS/#editors
Validation des feuilles de style– http://jigsaw.w3.org/css-validator/
Implementation CSS dans IE et Mozilla– http://www.quirksmode.org/css/contents.html
Exemple pratique– Site CSS ZEN GARDEN http://www.csszengarden.com/tr/francais/
ISIM1 – Pages Web Statiques 7 T. Bourdeaud’huy – IG2I Saison 2006-2007
Différents types de styleDifférents types de style
Style en ligne– Utilisation d’un style pour une étiquette donnée à l’intérieur même du– document– Ecriture dans l’étiquette même
Style de document– Utilisation de styles pour toutes les étiquettes d’un document donné– Définition au début d’un document
Style externe (Feuille de style)– Définition dans un fichier à part : utilisable par plusieurs documents– Extension .css
ISIM1 – Pages Web Statiques 8 T. Bourdeaud’huy – IG2I Saison 2006-2007
Principe de basePrincipe de base
Une feuille de style est composée d’un ensemble de règles qui s’appliquent à un ou plusieurs éléments
Chaque ligne est composée de– un sélecteur : sur quel(s) élément(s) s’applique la règle
– des propriétés : conditions du rendu physique (style, police, … )
– des valeurs : correspondent aux valeurs prises par les propriétés
Le nombre de couples propriété – valeur est illimité
Exemple :b { color : red; font-size : 14p }
/* Commentaires */
ISIM1 – Pages Web Statiques 9 T. Bourdeaud’huy – IG2I Saison 2006-2007
Style en ligneStyle en ligne
<h1 style="font-style:italic; font-family:helvetica; font-size:14px;">titre 1
</h1>
A éviter : ne respecte pas la séparation contenu/contenant
ISIM1 – Pages Web Statiques 10 T. Bourdeaud’huy – IG2I Saison 2006-2007
Style interneStyle interne
<html><head>
<style type="text/css">h1 { font-family:helvetica;
font-size:14px; font-style:italic;
}</style>
</head>
<body><h1>Titre 1 </h1><h2>Titre 2 </h2>
</body></html>
Déclaration dans <head>
ISIM1 – Pages Web Statiques 11 T. Bourdeaud’huy – IG2I Saison 2006-2007
Style externeStyle externe
<html><head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body><h1>Titre 1 </h1><h2>Titre 2 </h2>
</body></html>
Dans ce fichier : uniquement des déclations CSS
ISIM1 – Pages Web Statiques 12 T. Bourdeaud’huy – IG2I Saison 2006-2007
PrioritésPriorités
Cf. « Cascading » style sheets Plusieurs spécifications peuvent s’appliquer à un même
élément Dans ce cas, les priorités sont dans l’ordre croissant :
– Style externe < style interne < style en ligne
Ne pas écrire de texte directement au niveau body– Ecrire tout texte au moins dans un paragraphe
Il existe des balises spécifiques pour utiliser les feuilles de style– div : peut contenir les autres balises– span : changer une séquence de caractères à l’intérieur d’une
balise
ISIM1 – Pages Web Statiques 13 T. Bourdeaud’huy – IG2I Saison 2006-2007
ClassesClasses
Dans le cas ou les balises d’un même type ne sont pas toutes concernées par le style– Faire des styles en ligne : difficulté de maintenance– Déclarer des sous classes de la balise
Classes d’une balise– Déclaration nom.classe {…}– Utilisation <nom CLASS="classe"…>
Exemple<style>
h1.section {color:red;}</style>
<h1 class="section"> …</h1><h1 class="subsection"> …</h1>
ISIM1 – Pages Web Statiques 14 T. Bourdeaud’huy – IG2I Saison 2006-2007
Identificateur UniqueIdentificateur Unique
Dans le cas ou les classes ne sont pas suffisantes Identificateur unique :
– Déclaration #id {…}– Utilisation <nom id="identifiant"…>
Exemple<style>
#style1 {color:green;}
</style>
<h1 ID=“style1”>Titre 1</h1>
<h2 ID=“style2”>Titre 2</h2>
ISIM1 – Pages Web Statiques 15 T. Bourdeaud’huy – IG2I Saison 2006-2007
Héritage de propriétésHéritage de propriétés
Si elles ne sont pas redéfinies, les propriétés qui s’appliquent à une balise <X> s’appliquent également aux sous-classes <X>.class et sous-éléments <X>.id de cette balise
Ex : – h1 { color:red}
– h1.test {text-decoration:underline}
Une balise <X> utilisée dans une balise <Y> hérite de certaines de ses propriétés
Ex :– body {color:red}
Parfois : prise en compte de l’ordre des spécifications
ISIM1 – Pages Web Statiques 16 T. Bourdeaud’huy – IG2I Saison 2006-2007
Pseudo-classesPseudo-classes
a:link Lien non visité a:visited Lien visité a:active Lien actif a:hover Passage de la souris sur le lien a:focus Lien ‘sélectionné’ par tabulation
:first-line, :first-letter, :first-child – Pseudo-formats pour les paragraphes
:before, :after – Pseudo-formats pour le texte généré automatiquement– Numérotation automatique
Ex : – td.Prix:before { content:"Prix: "; }– td.Prix:after { content:",- EUR"; }– td.Produit:after { content:" "attr(title); }
ISIM1 – Pages Web Statiques 17 T. Bourdeaud’huy – IG2I Saison 2006-2007
SélecteursSélecteurs
Sélecteur universel : * * {border: 1px red solid}
Sélecteur d'élément : Eh1 {color: yellow; font-weight: bold}
Plusieurs sélecteurs E1, E2, E3h1,h2 {color: yellow; font-weight: bold}
Sélecteur d'identificateur : #id #myname {color: yellow; font-weight: bold}
Sélecteurs de classe : .class E.class .header {background-color: black; color: white}
Pseudo-classes : E:link E:visited E:active E:hover E:focus a:link {color: red}
ISIM1 – Pages Web Statiques 18 T. Bourdeaud’huy – IG2I Saison 2006-2007
Sélecteurs CSS2Sélecteurs CSS2
Sélecteur de descendance : E F (descendant) E > F (enfant direct) E:first-child ul ul {font-size: small}
Sélecteur de voisinage : E + F (éléments frères)div + p {margin-top: 2em}
Sélecteur d'attribut : E[att] E[att="val"] E[att~="val"]note[severity="warning"] {color: red; font-size: 16pt}
ISIM1 – Pages Web Statiques 19 T. Bourdeaud’huy – IG2I Saison 2006-2007
UnitésUnités
Les unités relatives :– em: la valeur du 'font-size' (largeur du m)– ex: la hauteur du x dans la fonte – px: pixels, relatif à la définition de l'écran – %: pourcentage
Les unités absolues :– in: inches -- vaut 2.54 centimètres – cm: centimètres – mm: millimètres – pt: points -- vaut 1/72ème de inch – pc: picas -- vaut 12 points
ISIM1 – Pages Web Statiques 20 T. Bourdeaud’huy – IG2I Saison 2006-2007
CouleursCouleurs
Il existe une liste de couleurs prédéfinies– aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, yellow et orange
Exemples :em {color: #ff0000} /* #rrvbb */
em {background-color: rgb(255,0,0)} /* intervalles entiers 0 - 255 */
em {background-color: rgb(100%, 0%, 0%)}
/* intervalles réels 0.0% - 100.0% */
ISIM1 – Pages Web Statiques 21 T. Bourdeaud’huy – IG2I Saison 2006-2007
Alignement et contrôle de paragraphe
Alignement et contrôle de paragraphe
text-indent : longueur – retrait à la première ligne d’un paragraphe
line-height : longueur– interligne
vertical-align : top, middle, bottom, baseline, sub, super, text-top, text-bottom– Alignement vertical
text-align : left, center, right, justify– Alignement horizontal
white-space : normal, pre, nowrap– Césure
ISIM1 – Pages Web Statiques 22 T. Bourdeaud’huy – IG2I Saison 2006-2007
BackgroundBackground
background-color : couleur– Transparent par défaut
background-image:url([URI]) background-repeat :repeat, no-repeat, repeat-x, repeat-y background-attachement : scroll, fixed, background-position : position de l’arrière-plan
– verticalement : top, center, bottom– horizontalement : left, center, right– verticalement ou horizontalement : longueur
ISIM1 – Pages Web Statiques 23 T. Bourdeaud’huy – IG2I Saison 2006-2007
TexteTexte
font-family : 'helvetica', 'arial', ''verdana', 'times', 'courier' et/ou une famille générique 'serif', 'sans-serif', 'cursive', 'fantasy' et 'monospace'.
font-style : valeurs 'normal', 'italic', 'oblique' font-variant : valeurs 'normal' ou 'small-caps' font-size : longueur, ‘xx-small', 'x-small', 'small',
'medium', 'large', 'x-large', 'xx-large', ‘smaller’, ‘larger’ font-weight : valeurs 'normal', 'bold', 'bolder', 'lighter',
'100', '200', '300', '400', '500', '600', '700', '800', '900’ font : ['font-style' 'font-variant' 'font-weight'] 'font-size'
[ /'line-height'] 'font-family'
ISIM1 – Pages Web Statiques 24 T. Bourdeaud’huy – IG2I Saison 2006-2007
TexteTexte
font-stretch : wider narrower condensed semi-condensed extra-condensed ultra-condensed expanded semi-expanded extra-expanded ultra-expanded normal
word-spacing : longueur letter-spacing : longueur text-align : left, right, center, justify text-decoration : underline, line-through, overline, blink,
none text-transform : uppercase, lowercase, capitalize text-shadow : couleur (ombrage)
ISIM1 – Pages Web Statiques 25 T. Bourdeaud’huy – IG2I Saison 2006-2007
BoîtesBoîtes
À chaque élément du document est associée une boîte qui possède– des marges (margin) – une bordure (border) – du remplissage (padding) – un contenu (content)
Des propriétés CSS contrôlent ces paramètres dans les quatre directions : – ‘margin−top', 'margin−right', 'margin−bottom','margin−left' et
'margin'– ‘padding−top', 'padding−right', 'padding−bottom', 'padding−left'
et 'padding‘
ISIM1 – Pages Web Statiques 26 T. Bourdeaud’huy – IG2I Saison 2006-2007
Anatomie d’une boîteAnatomie d’une boîte
ISIM1 – Pages Web Statiques 27 T. Bourdeaud’huy – IG2I Saison 2006-2007
Assemblage des boîtesAssemblage des boîtes
Les boîtes des élémentssuccessifs de la structure se juxtaposent avec fusion des marges verticales
contiguës
ISIM1 – Pages Web Statiques 28 T. Bourdeaud’huy – IG2I Saison 2006-2007
BorduresBordures
Épaisseur– border-top-width, border-right-width, border-bottom-width,
border-left-width, border-width Couleur
– border-top-color, border-right-color, border-bottom-color, border-left-color, border-color
Style– border-top-style, border-right-style, border-bottom-style, border-
left-style, border-style – Valeurs : none / hidden / dotted / dashed / solid / double /
groove / ridge / inset / outset
Raccourcis– border-top, border-bottom, border-right, border-left, border
ISIM1 – Pages Web Statiques 29 T. Bourdeaud’huy – IG2I Saison 2006-2007
Listes & TableauxListes & Tableaux
list-style-type: circle, disc, square list-style-image: URL ou chemin list-style-position : inside ou outside
caption-side – Position d'un titre de tableau
table-layout – largeurs fixe/variable
border-collapse – modèle de bordure
border-spacing – Espace entre les bordures dans un tableau avec quadrillage
empty-cells – Affichage ou non-affichage de cellules vides
ISIM1 – Pages Web Statiques 30 T. Bourdeaud’huy – IG2I Saison 2006-2007
CurseursCurseurs
Seule propriété pouvant être changée au niveau de la fenêtre d’affichage– auto = curseur automatique (réglage normal).– default = curseur standard indépendant de la plate-forme.– crosshair = curseur de la forme d'une simple croix.– pointer = curseur de la forme d'une flèche.– move = curseur de la forme d'une croix signalant la possibilité de
déplacer l'élément.– n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize , nw-
resize (nord, etc)– text = curseur sous une forme qui symbolise du texte normal.– wait = curseur sous la forme d'un symbole signalant l'attente.– help = curseur sous forme d'un symbole qui signale de l'aide pour
l'élément.– url([fichier]) = curseur au choix, [fichier] doit être un graphique GIF ou
JPG.
ISIM1 – Pages Web Statiques 31 T. Bourdeaud’huy – IG2I Saison 2006-2007
ScrollbarsScrollbars
scrollbar-base-color– couleur de base des barres de défilement
scrollbar-3dlight-color– couleur pour les effets de relief (3D)
scrollbar-arrow-color– couleur pour les pointeurs de défilement
scrollbar-darkshadow-color– couleur pour les ombres
scrollbar-face-color– couleur pour la surface
scrollbar-highlight-color– couleur pour le bord haut et le bord gauche
scrollbar-shadow-color– couleur pour le bord droit et le bord du bas
scrollbar-track-color– couleur pour la barre de défilement non-cachée par le pointeur de défilement
ISIM1 – Pages Web Statiques 32 T. Bourdeaud’huy – IG2I Saison 2006-2007
PositionnementPositionnement
Le positionnement est réalisé par la combinaison des règles suivantes :
position définit la boîte bloc qui sert de repère (containing block) – 'static' : positionnement normal– 'relative' : par rapport au conteneur (décalages de la position ‘static’)– 'absolute' : par rapport au conteneur du conteneur– 'fixed' : par rapport à la fenêtre (pas de scrolling)
left, right, top, bottom fixent un des bords de la boîte par rapport à la boîte racine.
width, height, min-width max-width min-height max-height fixent les dimensions de la boîte
Exemples : – http://tecfa.unige.ch/guides/css/ex/boxing1.html– http://www.brainjar.com/css/positioning/
ISIM1 – Pages Web Statiques 33 T. Bourdeaud’huy – IG2I Saison 2006-2007
PositionnementPositionnement
overflow – Passage d'élément au contenu trop important
direction : ltr, rtl– Sens de lecture (de gauche à droite ou droite à gauche)
z-index : entier – Position de la couche en cas de superposition (max = devant)
visibility : visible, hidden – Affichage ou non affichage avec réservation de place
clip : haut droite bas gauche– Limiter le domaine d'affichage
Display– Block : une nouvelle ligne est créée (P, DIV, TABLE)– Inline : pas de nouvelle ligne– None : pas d’affichage– D’autres sont disponibles : list-item, table-xxx …
ISIM1 – Pages Web Statiques 34 T. Bourdeaud’huy – IG2I Saison 2006-2007
CSS2 : Media TypesCSS2 : Media Types
La présentation peut varier selon les média :– aural, braille, embossed, handheld, print, projection, screen, tty, tv
Définition de feuilles alternatives selon les média :Persistante : <link href="standard1.css" rel="stylesheet"
type="text/css" />
Par défaut : <link href="standard2.css" rel="alternate stylesheet" type="text/css" title="mainstyle" />
Alternative : <link href="standard3.css" rel="alternate stylesheet" type="text/css" media="screen" title="screen" />
Alternative : <link href="standard3.css" rel="alternate stylesheet" type="text/css" title="print" media="print"/>
Il est également possible d’utiliser @media print
ExercicesExercices
ISIM1 – Pages Web Statiques 36 T. Bourdeaud’huy – IG2I Saison 2006-2007
Textes encadrésTextes encadrés
Un texte « encadre_a_droite » est un texte encadré dont la bordure droite est plus prononcé– Le fond sera gris, – La bordure droite noire, 5px– Autres bordures pointillées 1px– Utiliser une balise p en mode inline et block
Attention à l’ordre des spécifications Utiliser cela pour tester les propriétés « margin » Comparer le résultat dans des navigateurs différents
ISIM1 – Pages Web Statiques 37 T. Bourdeaud’huy – IG2I Saison 2006-2007
Arrière-planArrière-plan
Mettre le logo de l’IG2I en image de fond– En haut à gauche– Positionnement absolu
Deuxième version– Il ne bouge pas quand on scrolle
Troisième version – Il se répète sur toute la page
Tester en définissant l’image comme fond de la balise body ou comme fond d’une balise div bien placée– Comparer Firefox/IE6 : différences ?– Cf. http://www.quirksmode.org/css/contents.html
ISIM1 – Pages Web Statiques 38 T. Bourdeaud’huy – IG2I Saison 2006-2007
Liens hypertextes « extraordinaires »Liens hypertextes « extraordinaires »
Encadrés et allumés lorsque l’on passe dessus– Changement de la casse– Texte en gras– Curseur différent
Spécifiques pour les mails Rouge en cas de sélection par tabulation
ISIM1 – Pages Web Statiques 39 T. Bourdeaud’huy – IG2I Saison 2006-2007
Images cliquablesImages cliquables
Reproduire le comportement des zones cliquable d’images à l’aide de css– Amélioration : Quand on passera sur une zone, elle s’agrandira !
Comment faire ?– Un div a pour arrière plan l’image complète– Plusieurs liens sont créés dans le <div>
– Leurs propriétés de taille les font se superposer à l’image – Les pseudo-classes « hover » modifient les les arrières-plans
des liens
ISIM1 – Pages Web Statiques 40 T. Bourdeaud’huy – IG2I Saison 2006-2007
Structure de NavigationStructure de Navigation
Transformer un ensemble de liens en un « menu » à gauche et en une « bannière » en haut– Utiliser une structure de liste
Définir un format pour les actualités et le formulaire de recherche
Définir un pied de page
Définir trois feuilles de style– Principale– Flashy (couleurs vives)– Print (pour impression : ne pas afficher menus)
ISIM1 – Pages Web Statiques 41 T. Bourdeaud’huy – IG2I Saison 2006-2007
Exercice pratiqueExercice pratique
On fournit un texte brut Définir la sémantique des données Définir une feuille de style respectant la sémantique
http://www.w3.org/Style/Examples/011/firstcss.fr.html http://bluerobot.com/web/layouts/index.html http://www.glish.com/css/
ISIM1 – Pages Web Statiques 42 T. Bourdeaud’huy – IG2I Saison 2006-2007
CréditsCrédits
http://wam.inrialpes.fr/courses/CSSAmaya-Avr04
ISIM1 – Pages Web Statiques 43 T. Bourdeaud’huy – IG2I Saison 2006-2007
A ajouterA ajouter
CSS modulaires– @import
Remplacer la structure tableau par autre chose Menu qui ne bouge pas avec la page