BDW-ProgWEB_P2.pdf

BDW :
BASES DE DONNÉES & PROGRAMMATION WEB
Nicolas Lumineau
nicolas.lumineau@univ-lyon1.fr
PARTIE
PROGRAMMATION WEB
Remerciements à Emmanuel Coquery et Fabien Duchateau

BDW
POUR RAPPEL
2
 Pour la structure et le contenu des pages :
➔ HTML
 Pour la mise en forme des pages :
➔ CSS
 Pour les traitements de génération de contenu (côté
serveur)
➔ PHP
 Pour interroger les données
➔ SQL

BDW
RAPPEL
 Au début d’HTML : contenu (structure + données) et
mise en forme sont mélangés
 utilisation de balises de mise en forme devenues obsolètes
 Maintenant : contenu et mise en forme séparées
 Adaptation de la mise en forme en fonction du média utilisé
(eg, écran ordinateur, écran smartphone, pour impression)
 Allègement du code définissant le contenu
 Simplification en cas de changement de charte graphique
3

BDW
CSS
 Cascading Style Sheets
 Langage de mise en forme et mise en page de document HTML
 Principe :
permet de personnaliser les éléments d’un document HTML
 Origine : 1994-1995 (standard W3C en 1996)
 Version : CSS3 (depuis 2010)
 Extension d’un fichier CSS : .css
 Tutoriaux et wikilivres disponibles
4

BDW
UN PAGE WEB ÇA PEUT ÊTRE ÇA …
5

BDW
…OU ÇA!
6
TOUT EST QUESTION DE MISE EN FORME !
Car il s’agit de la même page qu’au transparent précédent

CSS
Syntaxe et Niveaux d’insertion
Cascades et héritage
Pseudo-classe et quelques propriétés
Positionnement

BDW
CSS : COMMENT ?
 Principe de base :
 affectation d’une paire propriété/valeur séparée par :
et ponctuée par ;
propriété : valeur ;
 Exemple :
8
width : 100% ;
height : 60px ;
display : none ;
background-color : lightgray ;
color : #ff0000 ;

BDW
CSS : OÙ ?
 On dispose de 3 niveaux d’insertion :
 Niveau d’insertion « INLINE » :
 Les instructions sont intégrées dans la balise via l’attribut style
 Niveau d’insertion « INTERNE » :
 Les instructions sont dans un script intégré dans l’entête du
document WEB
 Niveau d’insertion « EXTERNE » :
 Les instructions sont dans un ou plusieurs fichiers .css
9
HORS BALISE ➔ Comment lier « mise en forme » et « balises » ?

BDW
CSS : COMMENT ? (BIS)
 Les sélecteurs:
 Nécessaires pour les niveaux interne et externe;
 Ils permettent de spécifier les éléments sur lesquels s’applique
chaque style
sélecteur { propriété1 : valeur1 ;
…
propriétén : valeurn ;
}
 Exemple :
p {
}
10
background-color : lightgray ;
color : #ff0000 ;

BDW
COMPARAISON DES 3 NIVEAUX D’INSERTION
 Niveau d’insertion « INLINE »
<h1 style="color:red;">Mon titre coloré</h1>
 Niveau d’insertion « INTERNE »
<head>
<style type="text/css">
h1{color:red;}
</style>
</head>
 Niveau d’insertion « EXTERNE »
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
11
avec un fichier styles.css dans le même répertoire que la page HTML
et qui contient : h1{Color:red;}
À privilégier

BDW
NOTION DE CASCADE
 Les styles peuvent être “en cascade”,
 i.e., possibilité de combiner des déclarations de styles
externe, interne ou inline
 Ordre de priorité :
 La priorité est accordée à la déclaration la plus « proche » de
l’élément à styliser
inline interne externe
12
+ -
Niveau de priorité

BDW
QUESTION !
13
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=" style.css"/>
<style type="text/css" title="styles">
h1{color:green;}
</style>
</head>
<body>
<h1 style="color:pink;">Mon titre principal</h1>
</body>
</html>
h1{color:yellow;}
index.html
styles.css
De quelle couleur est le titre principal ?

BDW
NOTION DE CASCADE
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=" style.css"/>
<style type="text/css" title="styles">
h1{color:green;}
</style>
</head>
<body>
<h1 style="color:pink;">Mon titre coloré</h1>
</body>
</html>
h1{color:yellow;}
index.html
styles.css
Mon titre coloré

BDW
DECLARATION DE PLUSIEURS FEUILLES
EXTERNES DE CSS
 Possibilité de décomposer le CSS en plusieurs fichiers
➔ Gain en lisibilité
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css"/>
<link rel="stylesheet" type="text/css"
href="./impr/style2.css"/>
<link rel="stylesheet" type="text/css" href="style3.css"/>
<head>
<body>
…
</body>
</html>
15

BDW
NOTION DE MEDIA
 Il est possible de modifier le CSS en fonction du
contexte de visualisation de la page
 On ne souhaite pas forcément afficher les composants
d’une page de la même manière si:
 On dispose d’un écran
de bureau pour visualiser
le document
 On dispose d’une écran
de smartphone pour visualiser
le document
 On souhaite imprimer le document
16
Une page Web
Une page
Web
Une page
Web

BDW
DEFINIR UN MÉDIA
 Les principaux medias sont :
 screen : media associé à une visualisation sur écran
 print: media associé à une impression du document
 all (par défaut) : quelque soit le media
 Il est possible de regrouper des propriétés CSS de
deux manières:
 En définissant un fichier CSS par média et en
déclarant le type de média dans le lien externe
 En définissant des blocs étiquetés dans le CSS
17

BDW
MEDIA : UN MEDIA PAR FICHIER
<!DOCTYPE html>
<html>
<head>
href="style1.css" media="all"/>
href="./impr/style2.css" media="print"/>
href="style3.css" media="screen"/>
<head>
<body>
…
</body>
</html>
18

BDW
MEDIA : BLOC ETIQUETE
 La définition d’un ensemble de propriétés lié à un média se
défini dans le CSS par :
@media contexte {
ensemble_des_propriétés_associées
}
 avec, contexte qui vaut:
 screen : pour les propriétés CSS à appliquer en cas de
visualisation sur écran
 print: pour les propriétés CSS à appliquer en cas d’impression
du document
 all (par défaut) : pour les propriétés CSS à appliquer dans
tous les cas
 (condition_logique_sur fenêtre) : pour les propriétés CSS à
appliquer dans le cas où la fenêtre de visualisation vérifie un
condition logique
 @media ( width < 400px ) { …}
19

BDW
BONNES PRATIQUES
 Utilisation d’une feuille externe par média
 Même si en pratique on regroupe tout dans une seule
feuille externe.
 Limiter l’utilisation des niveaux d’insertion
« INLINE » et « INTERNE »
 Commenter votre CSS avec /* … */
21

BDW
RETOUR SUR LES SELECTEURS
 Un sélecteur est un motif (‘pattern’) qui
sélectionne l’élément ou le groupe d’éléments sur
lesquels va s’appliquer le style
 Il existe différentes catégories de sélecteurs
 Les sélecteurs de base
 Les sélecteurs basés sur la structure
 Les sélecteurs basés sur les attributs
 Il est possible d’associer plusieurs sélecteurs à un
même groupe de propriétés
23

BDW
LES SÉLECTEURS DE BASE
 Ces sélecteurs permettent de référencer
directement un élément ou un ensemble
d’éléments :
 On distingue 3 types de sélecteurs de base:
 Un sélecteur peut être :
 le nom d’une balise
 le nom d’un identifiant préfixé par #
 le nom d’une classe préfixé par .
24

BDW
SELECTEUR DE BASE : TYPE BALISE
 Le sélecteur de type balise
 Sélecteur = html, body, section, article, h1, p, div, span…
 Exemple:
html { font-family: Arial;
font-size: 18px;
font-style:italic;
}
p { color : yellow;
background-color : red;
}
25

BDW
SELECTEUR DE BASE : TYPE IDENTIFIANT
 Le sélecteur de type identifiant
 Sélecteur = #nom_identifiant
 Exemple:
Dans index.html :
<p>bla bla bla bla</p>
<p id="conclusion">Lorem ipsum…. </p>
Dans style.css:
#conclusion { font-weight : bold; }
26

BDW
SELECTEUR DE BASE : TYPE CLA SSE
 Le sélecteur de type identifiant
 Sélecteur = .ma_classe
 Exemple:
Dans index.html :
<p class="section_imp">Ta ta ta taaaa</p>
<p>Taaa ta ta ta taaaa ta</p>
<p class="section_imp">Ta ta ta ta taa</p>
Dans style.css:
.section_imp { color : red;
font-size : 1.2em;
}
27

BDW
REGROUPEMENT DE SÉLECTEURS
 Il est possible d’associer plusieurs sélecteurs à un
même groupe de propriétés.
 Les sélecteurs sont séparés par ,
 Exemple:
h1, h3 { font-family: Helvetica;
font-size: 22px;
font-style:italic;
}
.section_imp, #conclusion {
font-weight:bold;
font-size: 1,1em;
}
28

BDW
LES SÉLECTEURS BASÉS SUR LA STRUCTURE
 Lien d’imbrication entre sélecteurs
 Il est possible de référencer un élément en fonction de son
imbrication avec d’autres.
 On sépare les sélecteurs avec un espace
 Exemple
 Je souhaite sélectionner uniquement les paragraphes qui sont
imbriqués dans un article
article p { font-style : italic ; }
 Je souhaite sélectionner uniquement les paragraphes de classe
para_imp qui sont imbriqués dans la section identifiée par
conclusion:
#conclusion .para_imp {
font-weight : blod ; }
29

BDW
LES SÉLECTEURS BASÉS SUR LA STRUCTURE
 Lien de descendance directe entre sélecteurs
 Il est possible de référencer un élément en fonction de
l’élément parent .
 On sépare les sélecteurs avec >
 Exemple
 Je souhaite sélectionner uniquement les articles de classe
art_sciences ayant pour parent la section identifiée par s_rec
#s_rec > .art_sciences {
font-size : 1.3em ; }
 Je souhaite sélectionner uniquement les div filles des div de
classe div_niv2 :
.div_niv2 > div {
border : 1px solid green ; }
30

BDW
LES SÉLECTEURS BASÉS SUR LES ATTRIBUTS
 Existence d’attribut pour un sélecteur
 Il est possible de référencer un élément en fonction de
l’existence d’un attribut
 On spécifie le nom de l’attribut entre crochets
 Exemple
 Je souhaite sélectionner uniquement les ancres qui ont
un attribut name:
a[name] { text-decoration:none; }
31

BDW
LES SÉLECTEURS BASÉS SUR LES ATTRIBUTS
 Valeur d’attribut pour un sélecteur
 Il est possible de référencer un élément en fonction de la
valeur d’un attribut
 On spécifie la paire attribut/valeur entre crochets
 Exemple
 Je souhaite sélectionner uniquement les inputs de type
texte :
input[type=‘text’] {
font-weight:bold;
}
32

BDW
NOTION D’HÉRITAGE
 Imbrication des éléments HTML :
 La balise html contient les balises head et body, la
balise body contient des balises p, ul, etc.
 En CSS, un élément imbriqué hérite des
propriétés de son/ses parents, sauf les
propriétés redéfinies pour cet élément
 Exemple d’héritage
 Si on déclare une balise body avec une couleur de
fond bleue, un paragraphe, sans style spécifique et
dont le parent direct est la balise body, aura une
couleur de fond bleue
33

BDW
GESTION DES PRIORITÉS
 Plusieurs insertions de CSS, plusieurs types de sélecteurs... Qui a la
priorité ?
 Du plus prioritaire au moins prioritaire :
 Style dans la balise HTML
<p style="color : red">…</p>
 Utilisation d’un identifiant
<p id="mompar">…</p> + #monpar{color:red;}
 Utilisation d’une classe
<p class="mespar">…</p> + .mespar{color:red;}
 Imbrication d’éléments
<div> <p>…</p></div> + div p {color:red;}
 Elément HTML
<p>…</p> + p{color:red;}
 Il est possible de modifier une priorité avec !important
 La déclaration avec !important devient la déclaration à appliquer :
propriete : valeur !important ;
34

BDW
PSEUDO-CLASSES
 Les actions des utilisateurs peuvent modifier l’état
d’un élément (par exemple, une image survolée par le
curseur de la souris)
 Une pseudo-classe permet d’exprimer l’état d’un
élément pour pouvoir lui associer une mise en forme
particulière. La pseudo-classe est placée au niveau du
sélecteur et est séparé par : de celui-ci.
sélecteur:pseudoclasse{
propriété1 : valeur1;
propriété2 : valeur2;
…
}

36

BDW
PSEUDO-CLASSES
 Parmi les pseudo-classes les plus utilisées:
 :hover pour le survol de l’élément
 :visited pour un lien hypertexte visité
 :focus pour un élément qui a le focus
 :active pour une élément activé par l’utilisateur
 …
37

BDW
DES PROPRIÉTÉS ET DES VALEURS
 Quelles propriétés, quelles valeurs pour une
déclaration CSS ?
 Nombreuses propriétés disponibles en CSS3
 Une majorité de ces propriétés possède une liste restreinte
de valeurs
 On peut appliquer ces couples {propriété, valeur} à de
nombreux éléments HTML pour les besoins suivants :
 choix des couleurs (texte, arrière plan, . . .)
 choix des polices de caractères
 . . .
➔ Propriétés de texte, puis quelques exemples pour les
bordures, liens, . . .
38

BDW
PROPRIÉTÉ DE FOND
 Couleur de l’arrière-plan :
background-color: <color>;
➔ donne la couleur <color> à l’arrière plan
 Image en arrière-plan:
background-image: url(‘<urlimg>’);
➔ met l’image se trouvant à l’adresse <urlimg> en
l’arrière plan
 Il est possible d’appliquer un traitement à l’image par:
background-repeat: no-repeat | repeat |
repeat-x | repeat-y;
39

BDW
PROPRIÉTÉS DE POLICE ET TEXTE
 Taille de police :
font-size : 100% ;
➔ Taille de police à 100%
Utiliser les % ou em comme mesure (pas de px, cm, pt
car non redimensionnables)
 Famille de police:
font-family : arial, sans-serif ;
➔ Fonte de police en Arial, famille sans serif
 Important de spécifier la famille, car si la fonte n’est
pas trouvée sur le système/navigateur, remplacement
par une fonte de la même famille
40

BDW
 Style de fonte:
font-style : normal | italic | oblique ;
➔Style de police en normal, italique, oblique
 Variante de fonte:
font-variant : normal | small-caps ;
➔ Style de police en petites majuscules ou normal
41

BDW
 Couleur de police:
color : #000000 ;
➔Police de couleur noire (#000000 en code hexa)
 Epaisseur de fonte:
font-weight : normal | bold | bolder | lighter ;
➔Style de police en normal, gras ou très gras ou peu gras
 Alignement (de texte, mais aussi de contenu quelconque):
text-align : left | right | center | justify
➔Alignement à gauche, droite, centré ou justiﬁé
42

BDW
 Décoration du texte:
text-decoration : none | underline | overline
| line-through | blink ;
➔Aucune décoration, souligné, surligné, barré, clignotant
 Transformation de texte:
text-transform : none | capitalize | uppercase
| lowercase ;
➔ Aucune transformation, tout en capitalisé, tout en
majuscules, tout en minuscules
 Hauteur de ligne:
line-height : normal | nombre | % ;
➔ Hauteur de la ligne, en normal, valeur numérique ou pourcentage
43

BDW
PROPRIÉTÉ DES LIENS HYPERTEXTES
 Il est possible d’affecter une mise en forme
différente en fonction que le lien soit:
 non déjà visité (link)
 visité (visited)
 survolé par le curseur de la souris (hover)
 En train d’être activé (active)
44
<!DOCTYPE html>
<html>
<head>
<title>Exo cours CSS</title>
<link rel="stylesheet" ype="text/css"
ref="styles.css">
</head>
<body>
<a href="./uneAutrePage.html">
lien vers une autre page
</a>
</body>
</html>
index.html
a:link{color:blue;}
a:visited{color:green;}
a:hover{color:red;}
a:active{color:pink;}
styles.css

BDW
LES « BOITES »
 Toutes les balises HTML sont contenues dans des
“boîtes” :
 Ces boîtes sont invisibles la plupart du temps
(bordure non tracée)
 Possibilité de configurer leurs propriétés (bordure,
marge, espacements, etc.)
45
Un contenu
padding
margin
bordure

BDW
MARGIN ET PADDING
 margin:
 Espace entre la bordure et un autre élément
 padding:
 Espace entre le contenu et sa bordure
46
Un contenu
margin-top
margin-bottom
margin-left margin-right
bordure

BDW
MARGIN ET PADDING
 margin:
 Espace entre la bordure et un autre élément
 padding:
 Espace entre le contenu et sa bordure
47
Un contenu
padding-bottom
bordure
padding-top
padding-right
padding-left

BDW
EXEMPLE
 Que représente
le code suivant ?
49
<!DOCTYPE html>
<html>
<head>
<title>Exo cours CSS</title>
<link rel="stylesheet" ype="text/css"
ref="styles.css">
</head>
<body>
<div id="carble">
<ul>
<li class= "ligita">Pim</li>
</ul>
</div>
</body>
</html>
index.html
html {
background-color: white;
}
body { color: #656563;
font-family: verdana, sans-serif;
font-size: 100%;
background-color: yellow;
margin-left: 5%;
margin-top: 2.5%;
padding: 5px 5px 5px 5px;
}
#carble{
border-color: darkblue;
border-style: dotted;
background-color: cyan;
margin-left: 3em;
width:200px;
padding-left: 10px;
}
ul{
font-style: bold;
border: solid 4px;
border-color: black;
}
.ligita{
font-style: italic;
color:white;
}
styles.css

BDW
POSITION DES ÉLÉMENTS
 Il existe aussi des couples propriété/valeur pour la
mise en page :
 Organisation des différentes parties d’une page (menu,
bannière, contenu, pied de page, etc.)
 Positionnement des éléments les uns par rapport aux
autres
52

BDW
AFFICHAGE D’UN ELEMENT HTML
 L’affichage d’un élément dépend de quatre
paramètres optionnels appliqués à la boîte qui le
contient.
 Son ordre d’apparition dans le flux
 Ses dimensions (hauteur, largeur, marges)
 Son type de boîte
 ce qui détermine le comportement de l’élément HTML en
termes d’affichage et de relation avec ses éléments voisins
 Son positionnement
53

BDW
NOTION DE FLUX
 Le flux est l’ordre dans lequel les éléments HTML
sont lus par le navigateur et affichés :
 selon le type d’élément :
 block (p, div) :
 éléments les uns en dessous des autres (succession verticale)
 inline (span, a, img):
 éléments les uns à côté des autres (succession horizontale)
 Selon les propriétés de style CSS display
 Remarque : il est possible de sortir un élément du flux
naturel, dans ce cas, l’espace libéré reste vacant
54

BDW
TYPE DE BOÎTE
 Types de rendu pour la propriété display :
 block
 inline
 inline-block
 list-item
 table, table-row, table-cell
 Les éléments bloc ont par défaut un type de
rendu block, et les éléments inline ont par défaut
un rendu inline
 Mais un élément peut être “reclassé” grâce à la
propriété display
55

BDW
TYPE DE BOÎTE
 Type non affiché
display : none ;
➔ n’est pas affiché
 Type de rendu block
display : block ;
➔ Elément placé sous un autre (succession verticale) :
 Occupe toute la largeur de son conteneur
 Redimensionnable avec les propriétés width, height, min-
width ou min-height
 Peut avoir des marges verticales
 Elements HTML block ont par défaut ce type de rendu CSS
56

BDW
TYPE DE BOÎTE
 Type de rendu inline
display : inline ;
➔ Elément placé à côté d’un autre (succession
horizontale) :
 Largeur déterminée par leur contenu (texte, image, etc.)
 Pas redimensionnables (en théorie)
 Eléments HTML inline ont par défaut ce type de rendu
CSS
 Type de rendu inline-block
display : inline-block ;
➔Identique au rendu inline, mais les éléments sont
redimensionnables
 Cas des balises <input>
57

BDW
TYPE DE BOÎTE
 Type de rendu list-item
display : list-item ;
➔ Elément de type block qui bénéficie des propriétés liées
aux puces
 Cas de la balise <li>
 Type de rendu table, table-row, table-cell
display : table | table-row | table-cell ;
➔ Même comportement que les balises HTML table, tr, td
 Peuvent être utilisées pour la mise en page
58

BDW
POSITIONNEMENT
 On considère la page comme un repère orthonormé :
 Point de coordonnées d’origine (0, 0) en haut à gauche
 Possibilité de placer des éléments en indiquant leurs
coordonnées dans ce repère
 Méthode très précise, mais fastidieuse selon le nombre
d’éléments
59
Ma page
HTML
0,0

BDW
POSITIONNEMENT ABSOLU
 Positionnement absolu
position : absolute ;
➔L’élément déclaré en position absolue est
totalement retiré du flux :
 Positionnement par rapport au premier ancêtre
positionné rencontré (sinon la fenêtre du navigateur)
 Propriétés top, left, bottom, right pour indiquer l’écart
entre le côté représenté par la propriété et l’élément
60

BDW
POSITIONNEMENT ABSOLU
61
http://www.pompage.net/IMG/html/page_modele09.html

BDW
POSITIONNEMENT FIXE
 Positionnement fixe
position : fixed ;
➔ Idem que la position absolue, mais :
 Positionnement par rapport à la fenêtre du
navigateur suivant un ou plusieurs côtés
 Propriétés top, left, bottom, right pour indiquer
l’écart entre le côté représenté par la propriété et
l’élément
 Même avec une barre de défilement, l’élément fixe
gardera toujours la même position dans la page
62

BDW
POSITIONNEMENT RELATIF
 Positionnement relatif
position : relative ;
➔Décale l’élément par rapport à sa position dans le
flux
 Les autres éléments considèrent que celui-ci est
toujours à sa position initiale dans le flux
 Utile pour servir de référence ancêtre à un élément
positionné en absolu
 Utile pour utiliser la superposition d’éléments avec la
propriété z-index
63

BDW
PROPRIÉTÉ FLOAT
 Positionnement flottant
float : left | right | none | initial ;
➔Indique qu’un élément s’enroule à son voisin par le
gauche ou la droite
 Effet “d’habillage”
 Largeur dictée par son contenu
64
Bla bla bla
bla bla bla
bla bla bla
bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla
float:
left;
float:
left;

BDW
FLEXBOX
 Modèle de boîtes « flex » proposée dans CSS3
 Agencement automatique et adaptatif à
l’intérieur d’un contenant
 Avantage: moins contraignant que la gestion des
positionnement
 Bientôt complété par une grille (principe utilisé
dans les frameworks CSS)
65

BDW
ADAPTATIVITÉ DE LA FLEXBOX
66

BDW
PRINCIPES DE LA FLEXBOX
 Un container ‘flex’ définit un agencement pour les
éléments de type flex qu’il contient
 L’agencement se fait selon l’axe principal des
éléments et un axe secondaire (perpendiculaire à
l’axe principal)
 Les autres éléments de la page sont affichés
normalement.
67

BDW
DÉCLARATION D’UNE FLEXBOX
 Propriété display :
display: flex ; (pour un container en mode bloc)
display: inline-flex; (pour un container en mode inline)
Remarque : tous les enfants directs du container sont des
éléments flex
68

BDW
ALIGNEMENT SUR L’AXE PRINCIPAL
 Propriété justify-content :
justify-content : flex-start | flex-end | center | space-
between | space-around ;
69

BDW
ALIGNEMENT SUR L’AXE SECONDAIRE
 Propriété align-item :
align-item : flex-start | flex-end | center | strech | baseline ;
70

BDW-ProgWEB_P2.pdf

Recommandé

Recommandé

Contenu connexe

Similaire à BDW-ProgWEB_P2.pdf

Similaire à BDW-ProgWEB_P2.pdf (20)

Plus de RihabBENLAMINE

Plus de RihabBENLAMINE (20)

BDW-ProgWEB_P2.pdf