Diapositive 1

1
HTML CSS
2
HTML

• HTML est un langage Universel de description
  textuelle destinée à Internet.
• Le créateur d'une page WEB définit la structure
  ou l'organisation d'une page en utilisant des
  balises.

3
CSS

• Le World Wide Web a introduit les feuilles de
  styles en cascade pour compléter la langage HTML.
• Les CSS permettent de gérer l'apparence des
  documents.
• Les feuilles indiquent aux balises HTML leur
  comportement ou style.

4
Les styles

• Un style rassemble tous les attributs que l'on
  peut appliquer à des types de textes similaires.
• Attribut taille,format
• Textes similaires titres, en-têtes, pied de
  page
• Les styles donnent un nom commun à des groupes
  d'attributs

5
Les styles de Word
Applique le style Titre 1
6
Avantage du CSS

• Une CSS est constituée de code séparé qui
  améliore les possibilités du HTML en permettant
  de redéfinir la façon dont fonctionnent les
  balises HTML existantes.
• L'avantage par rapport à la création de nouvelles
  balises HTML repose sur le fait qu'en modifiant
  la définition d'une seule règle CSS centralisée,
  l'apparence de toutes les balises contrôlées par
  cette règles est modifiée.

7
Style dans la page

• ltstyle type"text/css"gt
• body
• margin 10px 0
• padding 0
• text-align center
• font 0.8em "Trebuchet MS", helvetica,
  sans-serif
• background indianred
• lt/stylegt

8
Du HTML au CSS Principe
ltHTMLgt ltHEADgt ltTITLEgtLe CSSlt/TITLEgt
lt/HEADgt ltBODYgt ltH1gtIntroductionlt/H1gt ...
lt/BODYgt lt/HTMLgt
.HTML
ltlink rel"stylesheet" type "text/css" href
"fichier.css"gt
Le Résultat
Introduction
_at_charset "iso-8859-1" H1 color red
Sélecteur simple
Fichier.CSS
9
Les règles

• Une règle définit l'apparence et le comportement
  du code HTML.
• Un règle indique à une balise HTML comment
  afficher son contenu.
• La création de règles générique permet également
  de les appliquer à plusieurs balises.

10
Syntaxes
Règle
valeur
propriété
Selecteur
Sélecteur HTML
définit la propriété
attribut à définir
11
Syntaxes

• Les propriétés identifient ce qu'il faut définir.
  Elles caractérisent l'apparence du contenu.
• Les valeurs sont assignées à une propriété pour
  définir sa nature
• Vari Faux
• Nombre
• Pourcentage

12
Types de règles

• Les sélecteurs sont des caractères
  alphanumériques qu'identifie la règle.
• Sélecteur HTML
• La classe
• L'ID

13
Sélecteur HTML

• La partie textuelle d'une balise HTML est appelé
  sélecteur
• H1 est le sélecteur de ltH1gt
• Le sélecteur est exploité pour redéfinir le style
  de l'affichage de la balise.

14
Syntaxe générale utilisée

• Les styles d'une balise

Sélecteur HTML
Propriété
Valeur
p font-size 12px
Définition
15
Propriétés héritées d'un parent

• Toutes balises ont un parent une balise
  conteneur qui les encadre.
• Les balises HTML s'approprient généralement les
  styles des balises imbriquées dans leur parent
  c'est l'héritage de style

ltbodygt ltb colorredgt ltigt Denis
lt/igt lt/bgt lt/bodygt
16
Propriétés héritées d'un parent

• Toutes balises ont un parent une balise
  conteneur qui les encadre.
• Les balises HTML s'approprient généralement les
  styles des balises imbriquées dans leur parent
  c'est l'héritage de style

ltbodygt ltb colorredgt ltigt Denis
lt/igt lt/bgt lt/bodygt
17
Propriétés héritées d'un parent

• Toutes balises ont un parent une balise
  conteneur qui les encadre.
• Les balises HTML s'approprient généralement les
  styles des balises imbriquées dans leur parent
  c'est l'héritage de style

ltbodygt ltb colorredgt ltigt Denis
lt/igt lt/bgt lt/bodygt
18
Propriétés héritées d'un parent

• Toutes balises ont un parent une balise
  conteneur qui les encadre.
• Les balises HTML s'approprient généralement les
  styles des balises imbriquées dans leur parent
  c'est l'héritage de style

ltbodygt ltb colorredgt ltigt Denis
lt/igt lt/bgt lt/bodygt
19
Propriétés héritées d'un parent

• Toutes balises ont un parent une balise
  conteneur qui les encadre.
• Les balises HTML s'approprient généralement les
  styles des balises imbriquées dans leur parent
  c'est l'héritage de style

ltbodygt ltb colorredgt ltigt Denis
lt/igt lt/bgt lt/bodygt
times times bold red times bold
reditalics
Denis Denis Denis
20
Définition de règles identiques pour plusieurs
basiles
Liste de sélecteurs séparés par les virgules
Propriété
Valeur
h1,h2,h3,p font-size 12px
Définition
p margin-top 25px
21
La classe

• Une classe est un style indépendant que l'on peut
  appliquer à toute balises HTML.
• Chaque classe se voit attribuée un nom unique
  spécifié ensuite dans la ou les balises HTML qui
  l'utilise par le biais de l'attribut style.
• Les règles de classe peuvent être définies entre
  les balises ltstylegt lt/stylegt
• dans l'en-tête ou dans un fichier CSS en ligne.
• Elle permettent aux fonctions Javascript
  d'identifier un objet unique, elles sont très
  utilisées en DHTML.
• Les id sont comme les classes définit dans
  l'entête ou exportées d'un fichier CSS externe ou
  liés au document HTML.

22
Syntaxe générale d'une classe CSS

• Le sélecteur de classe permet de définir un style
  applicable à toutes balises HTML.
• Une sous class possède un nom unique précédé dun
  point.

23
Syntaxe générale d'une classe CSS

• Les styles d'une balise

.copy font-size 12px
utilisation ltp class"copy"gt lt/pgt
24
Exemple sous class indépendante

• .nav colorred

ltulgt ltli class"nav"gtnomlt/ligt ltli
class"nav"gtprenomlt/ligt ltli class"nav"gtagelt/ligt
lt/ulgt
Factorisation importante
ltul class"nav"gt ltligtnomlt/ligt ltligtprenomlt/ligt
ltligtagelt/ligtlt/ulgt
25
héritage sous class indépendante

• .nav licolorred

ltul class"nav"gt ltligtnomlt/ligt ltligtprenomlt/ligt
ltligtagelt/ligtlt/ulgt
Cela va affecter tous les éléments li dans la
classe .nav
li sera enfant de la classe .nav
26
Ecriture

• .nav licolorred

ltulgtltdiv class"nav"gt ltligtnomlt/ligt ltligtprenomlt
/ligt ltligtagelt/ligtlt/divgtlt/ulgt
27
suite

• .nav ul ulcolorred

ltdiv class"nav"gt ltulgt ltligtnom ltulgt
ltligtdupontlt/ligt ltligtmartinlt/ligt lt/ulgt lt
/ligt ltligtprenom ltulgt
ltligtdenislt/ligt ltligtgerardlt/ligt lt/ulgt lt/
ligt lt/ulgtlt/divgt
28
Sous class dépendante

• li.navcolorred

ltulgt ltli class"nav"gtnomlt/ligt ltli
class"nav"gtprenomlt/ligt ltli class"nav"gtagelt/ligt
lt/ulgt
29
Sous class dépendante
ltdiv class"nav"gt lt/divgt
30
Bilan
ltBODYgt ltul class"niveau1"gt ltligtExemple
1lt/ligt ltligtListe simplelt/ligt lt/ulgt ltdiv
class"italic_rouge"gt Exemple 2 lt/divgt lt/BODYgt
.HTML
Le Résultat

• Exemple 1
• Liste simple

Sous Class indépendante
Sous Class dépendante
.italic_rouge colorred font-styleitalic

.CSS
ul.niveau1 list-style-typesquare colorblue

.CSS
31
Du HTML au CSS Sélecteurs
ltBODYgt ltul class"niveau1"gt ltligtExemple
1lt/ligt ltligtListe simplelt/ligt lt/ulgt ltdiv
class"italic_rouge"gt Exemple 2 lt/divgt lt/BODYgt
.HTML
Le Résultat

• Exemple 1
• Liste simple
• Exemple 2

Sous Class indépendante
Sous Class dépendante
.italic_rouge colorred font-styleitalic

.CSS
ul.niveau1 list-style-typesquare colorblue

.CSS
32
ID

• Très utile pour spécifier des règles qui ne
  s'appliquent qu'à un élément avec un ID unique
  donné défini par l'attribut id en HTML.
• Pas plus d'un élément ne doit avoir un ID donné.
• utilisé avec Javascript pour repérer et traiter
  un élément particulier.

33
Syntaxe générale d'une ID

• des styles UNIQUE indépendants de toute balise
  HTML
• utilisation ltp id"area"gt lt/pgt

Sélecteur d'ID
Propriété
Valeur
area font-size 12px
Définition
34
Du HTML au CSS Sélecteurs
Le Résultat
ltBODYgt ltdiv id"bloc_unique"gt Bloc
A lt/divgt lt/BODYgt
.HTML
Bloc A
Le sélecteur id
Lélément devient unique, il est utilisé une
seule fois dans la page.
bloc_unique background-colorblack
colorwhite
.CSS
35
Lecture

• ltli class"submenu"gt
• li a un attribut class de valeur submenu
• divnav ul.niv1 li.submenuhover ul.niv2

la liste de la classe niv2
qui descend d'un élément de liste survolé
qui descend d'une liste niv1
qui descend d'un div id nav
36
Positionnement et Flux en CSS

• Vue densemble des méthodes de positionnement

37
Le flux

• On oubliera les tableaux !

38
Les modes de positionnement

• Flux ordre daffichage des éléments
• 4 méthodes de positionnementnormal float
  relatif absolu
• Quels sont les différences ?

39
La fenêtre

• C'est dans la fenêtre du navigateur que se
  déroule l'action des pages Web.
• Elle est l'ultime élément de conception le
  parent de tous les éléments.
• Avec CSS, on définit la fenêtre par le biais de
  la balise ltbodygt

hauteur du navigateur
Origine (0,0)
hauteur réelle
40
Définition du type de positionnement

• Lorsque vous définissez les attributs d'une
  balise vous désignez ce qui se trouve dans le
  conteneur de la balise en tant qu'élément unique
  de la fenêtre.
• Il est possible d'attribuer différents types de
  positionnement
• relatif c'est le comportement par défaut,
  l'élément se positionne après ce qui le précède
  et avant ce qui le suit.
• absolu le positionnement crée un élément
  indépendant, un agent libre, séparé du reste du
  document, que l'on peut compléter par le code
  HTML de notre choix. L'élément qui l'héberge
  représente son origine.
• on peut déplacer sa position depuis
  l'emplacement naturel dans la fenêtre par le
  biais des propriétés top et left.

41
Le Flux normal
ltBODYgtltdiv class"conteneur"gt ltdiv
class"normalA"gt Bloc A lt/divgt ltdiv
class"normalB"gt Bloc B lt/divgtlt/divgtlt/BODYgt
.normalA width150pxheight150pxbackground-
colorredborder1px solid black .normalB
width250px height100px background-colorgr
eenborder1px solid black
Bloc conteneur
Bloc A
Bloc B
42
Le Flux normal en bloc
ltBODYgtltdiv class"conteneur"gt ltdiv
class"normalA"gt Bloc A lt/divgt ltdiv
class"normalB"gt Bloc B lt/divgtlt/divgtlt/BODYgt
.normalA width150pxheight150pxbackground-
colorredborder1px solid black .normalB
width250px height100px background-colorgr
eenborder1px solid black
Bloc A
Bloc B
Bloc conteneur
Flux normal en bloc Succession verticale
43
Le Flux normal en ligne
ltBODYgtltdiv class"conteneur"gt ltspan
class"normalC"gt Bloc C lt/spangt ltspan
class"normalD"gt Bloc D lt/spangtlt/divgtlt/BODY
gt .normalC width150pxheight150pxbackground
-colorredborder1px solid black .normalD
width250px height100px background-colorgr
eenborder1px solid black
Bloc conteneur
Bloc C
Bloc D
44
Le Flux normal en ligne
ltBODYgtltdiv class"conteneur"gt ltspan
class"normalC"gt Bloc C lt/spangt ltspan
class"normalD"gt Bloc D lt/spangtlt/divgtlt/BODY
gt .normalC width150pxheight150pxbackground
-colorredborder1px solid black .normalD
width250px height100px background-colorgr
eenborder1px solid black
Bloc C
Bloc D
Bloc conteneur
Flux normal en-ligne Succession horizontale
45
Le Flux relatif
ltBODYgtltdiv class"conteneur"gt ltdiv
class"bloc_marge"gt Bloc A lt/divgt css css
css css... lt/divgtlt/BODYgt .conteneur
width800pxborder1px solid
black .bloc_marge positionrelativewidth
300pxtop20pxleft30pxborder1px solid
black
Bloc A
Top 20px
Left 30px
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
css css
Bloc conteneur
46
rappel marge
ltBODYgtltdiv class"conteneur"gt ltdiv
class"bloc_relatif"gt Bloc A lt/divgt css css
css css... lt/divgtlt/BODYgt .conteneur
width800pxborder1px solid
black .bloc_relatif width300pxmargin-top
20pxmargin-left30pxborder1px solid black
Bloc A
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
Css css css css css css css css Css css css css
css css css css Css css css css css css css css
css css
Top 20px
Left 30px
Bloc conteneur
47
Le Flux flottant
ltBODYgtltdiv class"conteneur"gt ltdiv
class"flotteA"gt Boîte A lt/divgt ltpgt
Texte...blabla ... lt/pgtlt/divgtlt/BODYgt .flotteA
floatleftwidth500pxbackground-coloryello
wborder1px solid black
Bloc conteneur
Boîte A floatleft
48
Le Flux flottant
ltBODYgtltdiv class"conteneur"gt ltdiv
class"flotteA"gt Boîte A lt/divgt ltpgt
Texte...texte ... lt/pgtlt/divgtlt/BODYgt .flotteA
floatleftwidth650pxbackground-coloryellow
border1px solid black
Boîte A floatleft
Textetextetexttexte texte
textetextetextetextetextetextetextetextete
xtetexte textetextetextetextetextetextetex
tetexttextetexte textetextetextetextetexte
textetextetexttextetexte textetextetextet
extetextetextetextetexttextetexte
textetextetextetextetextetextetextetextte
xtetexte textetextetextetextetextetextetex
tetexttextetexte
Bloc conteneur
49
Le Flux flottant/relatif
ltBODYgtltdiv class"conteneur"gt ltdiv
class"flotteA"gt Boîte A lt/divgt ltpgt
Texte...texte ... lt/pgtlt/divgtlt/BODYgt .flotteA
position relatif top100pxfloatleftwidth
650pxbackground-coloryellowborder1px solid
black
Boîte A floatleft
Textetextetexttexte texte
textetextetextetextetextetextetextetextete
xtetexte textetextetextetextetextetextetex
tetexttextetexte textetextetextetextetexte
textetextetexttextetexte textetextetextet
extetextetextetextetexttextetexte
textetextetextetextetextetextetextetextte
xtetexte textetextetextetextetextetextetex
tetexttextetexte
Bloc conteneur
50
Le Flux flottant
ltBODYgtltdiv class"conteneur"gt ltdiv
class"flotteA"gt Boîte A lt/divgt ltdiv
class"flotteB"gt Boîte B lt/divgt
lt/divgtlt/BODYgt .conteneur width800pxborder1
px solid black .flotteA floatleftwidth65
0pxbackground-coloryellowborder1px solid
black .flotteB floatleftwidth100pxback
ground-colorblueborder1px solid black
Bloc conteneur - 800px de large
Boîte A 650px
51
Le Flux flottant
ltBODYgtltdiv class"conteneur"gt ltdiv
class"flotteA"gt Boîte A lt/divgt ltdiv
class"flotteB"gt Boîte B lt/divgt
lt/divgtlt/BODYgt .conteneur width800pxborder1
px solid black .flotteA floatleftwidth65
0pxbackground-coloryellowborder1px solid
black .flotteB floatleftwidth100pxback
ground-colorblueborder1px solid black
Boîte A 650px
Bloc conteneur - 800px de large
Boîte B 100px
52
Le Flux flottant
ltBODYgtltdiv class"conteneur"gt ltdiv
class"flotteA"gt Boîte A lt/divgt ltdiv
class"flotteB"gt Boîte B lt/divgt
lt/divgtlt/BODYgt .conteneur width800pxborder1
px solid black .flotteA floatleftwidth65
0pxbackground-coloryellowborder1px solid
black .flotteB floatleftwidth600pxback
ground-colorblueborder1px solid black
Boîte A 650px
Bloc conteneur - 800px de large
Boîte B 600px
53
Le Flux flottant
ltBODYgtltdiv class"conteneur"gt ltdiv
class"flotteA"gt Boîte A lt/divgt ltdiv
class"flotteB"gt Boîte B lt/divgt
lt/divgtlt/BODYgt .conteneur width800pxborder1
px solid black .flotteA floatleftwidth65
0pxbackground-coloryellowborder1px solid
black .flotteB floatleftwidth600pxback
ground-colorblueborder1px solid black
Boîte A 650px
Boîte B 600px
Bloc conteneur - 800px de large
54
Le Flux absolu
ltBODYgtltdiv class"conteneur"gt ltdiv
class"bloc_absolu"gt Bloc A lt/divgt css css
css css css... lt/divgtlt/BODYgt .conteneur
width800pxborder1px solid black
.bloc_absolu positionabsolutewidth300pxm
argin-top20pxmargin-left30pxborder1px
solid black
Bloc A
Top 20px
Css css css css css css css css Css css css css
css css css css Css css css css css
css css css css css css css Css css css
css css css css css Css css css css css css css
css Css css css css css css css css Css css css
css css css css css Css css css css css css css
css Css css css css css css css css
Left 30px
Bloc conteneur
Bloc A
55
Le Flux absolu
ltBODYgtltdiv class"conteneur"gt css css css css
css... ltdiv class"bloc_absolu"gt Bloc A
lt/divgt ddddddd..dddd lt/divgtlt/BODYgt .conteneur
width800pxborder1px solid black
.bloc_absolu positionabsolutewidth300pxm
argin-top20pxmargin-left30pxborder1px
solid black
56
Création d'un site
57
Exemple complet
Bloc conteneur
Bloc Header flux normal
58
Exemple complet
Header_gauche - float left
Header_droit float left
59
Exemple complet
Header_gauche - float left
Header_droit float left
Bloc Menu Header flux normal
60
Exemple complet
Header_gauche - float left
Header_droit float left
Bloc Menu Header flux normal
Bloc Menu - Float left
61
Exemple complet
Header_gauche - float left
Header_droit float left
Bloc Menu Header flux normal
Bloc Menu - Float left
Bloc contenu float right
62
Les contrôle de visibilité et affichage d'un
élément

• La propriété display est utile pour définir si un
  élément comprend des retours chariot avant et
  après, s'il se trouve dans d'autres éléments,
  s'il fait partie d'une liste.
• voir menu.ppt
• Les contrôles de visibilité d'un élément sont
  très utiles avec JavaScript.

63
Conclusion et Ouverture

• Liberté dans la mise en page des sites web.
• La présentation est beaucoup simple.
• Nombreux problèmes de compatibilité.

64
Exemples

• ltstyle type"text/css"gt
• .abs
• position absolute
• top25pxleft25px
• colorblue borderblue solid 1px
• .rel
• positionrelative
• top25px left25px
• colorred
• borderred solid 2px
• lt/stylegt

65

• ltbodygtSous le pont mirabeaultdiv class"abs"gt
  coule lt/divgtla Seinelt/bodygt

66
Sous le pont Mirabeau
coule
la Seine
coule
67
abs
68

• ltbodygtSous le pont mirabeau ltdiv class"rel"gt
  coule lt/divgt la Seinelt/bodygt

69
.rel position relative top0px left0px
colorred borderred solid 2px
70
Avec le décalage
Sous le pont Mirabeau la Seine
coule
71
Avec le décalage
72

• ltbodygtSous le pont mirabeaultspan class"rel"gt
  coule lt/spangtla Seinelt/bodygt

73
Sous le pont Mirabeau la Seine
coule
74
(No Transcript)
75

• ltbodygtSous le pont mirabeaultdiv class"rel"gt
  coule lt/divgtltdiv class"rel"gt la Seine lt/divgtet
  nos amourslt/bodygt

76
(No Transcript)
77

• ltbodygtSous le pont mirabeaultdiv class"abs"gt
  coule lt/divgtltdiv class"abs"gt la Seine lt/divgtet
  nos amourslt/bodygt

78
idem avec span
79

• ltbodygtSous le pont mirabeaultspan class"rel"gt
  coule lt/spangtltspan class"rel"gt la Seine
  lt/spangtet nos amours

80
(No Transcript)
81

• ltbodygtSous le pont mirabeaultdiv class"rel"gt
• coule ltdiv class"rel"gt la Seine
  lt/divgtlt/divgtet nos amours
• lt/bodygt

ltbodygtSous le pont mirabeaultdiv class"rel"gt
couleltdiv class"rel"gt la Seine lt/divgtlt/divgtet
nos amours lt/bodygt
82
Sous le pont Mirabeau
coule
la Seine
et nos amours
83
(No Transcript)
84
(No Transcript)
85

• ltbodygtSous le pont mirabeaultdiv class"abs"gt
  coule ltdiv class"abs"gt la Seine lt/divgtlt/divgtet
  nos amourslt/bodygt
• ltbodygtSous le pont mirabeaultdiv class"abs"gt
  coule ltdiv class"abs"gt la Seine
• lt/divgt
• lt/divgtet nos amourslt/bodygt

1
1
86
(No Transcript)
87

• lt/headgtltbodygtSous le pont mirabeaultdiv
  class"rel"gt couleltspan class"rel"gt la Seine
  lt/spangtlt/divgtet nos amourslt/bodygt

88
(No Transcript)
89

• ltbodygtSous le pont mirabeaultdiv class"rel"gt
  couleltspan class"rel"gt la Seine ltspan
  class"rel"gt et nos amourslt/spangtlt/spangtlt/divgtlt/
  bodygt

90
(No Transcript)
91

• ltstyle type"text/css"gt.rel positionrelative
  floatleft top25px left25px colorred
  borderred solid 2px lt/stylegt
• ltbodygtSous le pont mirabeaultdiv class"rel"gt
  couleltdiv class"rel"gt la Seinelt/divgtlt/divgtltdiv
  class"rel"gt et nos amourslt/divgtlt/bodygt

92
Sous le pont Mirabeau
coule
et nos amours
la Seine
93
(No Transcript)
94

• .rel positionrelative floatleft top25px
  left25px colorred borderred solid 2px
• .rel1 positionrelative floatleft top0px
  left0px colorred borderblue solid 2px
  lt/stylegt
• ltbodygtSous le pont mirabeaultdiv class"rel"gt
  couleltdiv class"rel"gt la Seinelt/divgtlt/divgtltdiv
  class"rel1"gt et nos amourslt/divgtlt/bodygt

95
(No Transcript)