Académique Documents
Professionnel Documents
Culture Documents
1
Conception et développement web
5
Conception et développement web
6
Conception et développement web
7
Conception et développement web
– Décoration de texte (soulignement, etc.) • Positionnement CSS : les flottants pour placer des
images
– Changer les icônes d'une liste à puce
– Les flottants et le flux
• Bordures et arrières plans – Ferrer les images à gauche et à droite
– Nettoyer les flottants avec clear
– Bordures et styles, bords arrondis CSS3 – Notion de contexte de formatage de bloc et gestion des
conflits de flottants
– Arrière-plan et propriétés background
8
Conception et développement web
9
Les bases du
développement web
10
Une page Web c’est …
• Au format .html
• Peut contenir du texte, des images, des liens,
des médias, etc.
11
Un site Web c’est ...
12
Mais pas que ...
14
Mettre son site en ligne
15
Le principe de « serveur web »
Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web
16
Transférer un fichier sur le serveur
Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et mot de passe pour y
17
accéder.
1
8
Le client FTP
19
Le HTML - généralités
20
HTML : définition
21
Générer du HTML avec un éditeur
24
Brackets.io
• http://brackets.io/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source
2
5
Atom
• https://atom.io/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc.
• Gratuit pour Mac et Windows – open source
2
6
Les éditeurs de texte plus avancés et spécialisés
• http://www.sublimetext.com/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne,
colorisation syntaxique
• Plugins, snippets, mode « sans
distraction »
• 30 jours essai Windows/Mac/ Linux
puis payant
27
D’autres éditeurs
28
Les éditeurs « WYSIWYG »
29
Générer du HTML depuis un CMS
30
Générer du HTML depuis un langage côté serveur
31
32
La syntaxe HTML : balises,
éléments et attributs
33
Le principe de balise
<
> *
o
n
a
l
o t a
e l
34
i n n
Le principe de balise
• On peut imbriquer les balises (on y reviendra) les unes dans les
autres
35
Le principe de balise
36
Le principe de balise
<
i
g
37
Attributs et valeurs
38
Attributs et valeurs
39
Exemples d’attributs
40
Exemples d’attributs
! class=" " : donner une classe à l’élément que l’on pourra utiliser en
CSS.
Les classes peuvent être dupliquées sur la page
– <p class="maclasse"> contenu </p>
41
Doctype, html, body : structure
d'un document valide
42
Structure d’un document HTML simplifié
43
La notion de doctype
<!doctype html>
44
Le doctype HTML5
45
La balise <html>
46
L'attribut lang
– Synthèse vocale
<html lang="fr">
47
La balise <head>
48
La balise <title>
49
La balise <head> : les balises meta
50
La balise <head> : les balises meta
51
La balise <body>
<body>
Contenu de la page
</body>
52
En résumé
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title> Titre de ma page </title>
</head>
<body>
Contenu de la page
</body>
</html>
53
C’est valide !
Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un
commentaire
55
Les éléments de structuration
du contenu
56
La balise « division » <div>
57
La balise « division » <div>
58
Grille en div
59
La balise paragraphe <p>
60
La balise paragraphe <p>
61
Espaces insécables
62
Espaces insécables
63
Les titres h1 – h6
65
Les titres h1 – h6
66
Blockquote, une citation
67
Blockquote, une citation
68
Exemple de blockquote stylée
https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
69
Les éléments de « mise en
forme » de texte
70
Éléments en ligne « inline »
71
L’ élément <strong>
72
L’ élément <strong>
73
L’ élément <em>
74
L’ élément <em>
75
L’ élément <span>
76
L’ élément <span>
77
D’autres éléments
78
Les liens dans les documents
HTML
79
Fonction d'un lien
80
La balise <a>
81
La balise <a> pour les liens
82
Lien externe vers un autre site
83
Liens internes et hiérarchisation du site
84
Liens internes et hiérarchisation du site
85
Exercice !
8
6
Lien vers un fichier du même répertoire
87
Mon premier site
88
Exercice !
89
Exercice !
90
Exercice !
91
Liens vers un autre répertoire
92
Descendre dans un sous répertoire
93
Remonter d’un répertoire
94
Mon premier site
95
Exercice !
96
Exercice !
97
Ouvrir un lien dans un nouvel onglet
98
Des liens « internes » ou ancres internes
https://fr.wikipedia.org/wiki/
Hypertext_Markup_Language#Description_de_HTML
99
Un lien vers une adresse mail
101
Les éléments de liste
102
Les listes non ordonnées <ul>
103
Les listes non ordonnées <ul>
104
Les listes ordonnées <ol>
105
Les listes ordonnées <ol>
106
Contenu d’une liste
107
Exemple d’imbrication
108
Exemple d’imbrication
109
Les listes en pratique – les onglets
http://getbootstrap.com/javascript/#tabs
110
Les listes en pratique – les navigations
http://www.mobify.com/
111
Les listes en pratique – • http://
les navigations flexslider.woothemes.com/
112
Ajouter des images avec la
balise <img>
113
Le format JPEG- Joint Photographic Experts Group
=> Pour la compression avec pertes très efficace pour des images
photographiques
114
Le format GIF - Graphics Interchange Format
http://lesjoiesducode.tumblr.com/
115
Quelques jolis GIFs
http://bisouslescopains.tumblr.com/
116
Le format PNG - Portable Network Graphics
117
En résumé
118
Compresser une image JPEG outils
• En ligne :
– https://imagify.io/ outil en ligne avec traitement par lots
• En Local :
– https://imageoptim.com/fr.html sur mac PNG et JPG
– http://luci.criosweb.ro/riot/ sur windows, PNG et JPG
119
La balise <img>
• Balise auto-fermante
120
La balise <img> et source de l'image
– url de stockage
– même principe que pour les liens
121
La balise <img> et attribut « alt »
122
La balise <img> et attribut « alt »
• L'attribut est obligatoire, mais il peut être vide pour les images
décoratives
123
Attributs width et height
• Les attributs width et height peuvent être ajoutés pour donner une
taille à l’image
• Sans width/height le navigateur « devine » la taille ce qui crée des
sauts de page quand l’image se charge
• En général, il vaut mieux la redimensionner avant dans un logiciel,
plutôt que charger une grande image et la rétrécir (performance)
124
Exemple
127
Bonus : intégrer une vidéo
128
Bonus : intégrer du son
129
Bonus : intégrer du son
130
D’autres types d’iframe
131
Les tableaux HTML
132
Les tableaux, introduction
133
Créer un tableau : <table>
134
Exemple de tableau simple
135
Exemple de tableau simple
136
Un avant-goût de CSS
• Pour la suite et y voir plus clair, nous allons ajouter une bordure à
notre tableau avec la propriété CSS
137
Ajouter une entête avec ! <th> peut remplacer <td>
<th> pour créer une cellule
d’entête au tableau
138
Ajouter un titre au ! On utilise <caption> pour
tableau donner un titre au tableau
! La balise se place au
début du tableau
139
Bonus - Fusion de ! Il est possible de fusionner
cellules certaines cellules entre elles avec
l’attribut colspan="
nombredecellules" qui se place
sur la cellule (th ou td)
140
Bonus - Fusion de • Il est possible de fusionner
lignes des lignes avec l’attribut
rowspan="
nombredelignes" qui se
place sur la cellule (th ou td)
141
Les formulaires
142
Les formulaires sont partout autour de nous
143
La balise <form>
Par défaut si elle est vide, c’est comme n’importe quel élément, rien n’est affiché
145
La zone de texte monoligne <input>
146
Le label
147
Associer le label au champ
148
L'attribut « value »
149
L'attribut « value »
150
En résumé pour n'importe quel champ il faut toujours au
moins
151
Attributs supplémentaires
152
Les placeholder (ne sont pas des labels ! )
! placeholder=" " : attribut HTML5, donne une indication de ce que devrait contenir le champ.
Attention, ne remplace PAS le label
! Pas supportés partout (IE10+) => ne PAS utiliser sans label visuel pour l'utilisateur (ou un polyfill)
153
Zone de texte multiligne <textarea>
154
Attributs utiles pour textarea
• PAS de value= " ", le texte par défaut se met entre les deux balises
ouvrante et fermante
155
Les cases à cocher <input type="checkbox">
156
Les cases à cocher <input type="checkbox">
157
Les cases à cocher <input type="checkbox">
159
Les boutons radio <input type="radio">
160
Groupe de boutons radio
! Pour que le navigateur comprenne que des éléments forment un groupe, il faut leur donner le
même attribut name
161
Les listes déroulantes <select>
162
Les listes déroulantes <select>
163
Bouton d’envoi input type="submit"
164
Petit résumé des
champs
select + option
textarea
165
Bouton de reset, input type="reset"
166
Bouton <button type="button">
167
Bouton <button type="button">
http://getbootstrap.com/javascript/#modals
168
Désactiver un champ : disabled="disabled"
169
Désactiver un champ : disabled
170
Les champs de mot de passe <input type="password">
171
Uploader un fichier : type = file
172
Cacher un champ type="hidden"
173
Liste non exhaustive de quelques balises
! body ! form
! div ! table
! p ! iframe
! h1- h6 etc.
!
! ul
! ol
! li
!
blockquote
174
CSS : Introduction et notions
de base
175
CSS : Cascading Style Sheets
176
CSS : Cascading Style Sheets
177
En bref
178
Un peu d’histoire
• CSS1, CSS2
• CSS3 : aujourd'hui
179
Différents rendus entre les navigateurs
R
e
n
d
u
180
d
Différents degrés de compréhension
181
Tester sur différents navigateurs
https://www.browserstack.com/
182
Et pour Internet Explorer ?
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
183
Console de debug : clic droit + inspecter
185
Web Developer
187
Le CSS “en ligne” dans la balise HTML
! Attribut style = …;
! « Je veux des titres roses » :
<h1 style="color:pink;" >
188
Problèmes de maintenabilité
189
Le CSS « interne» dans l’entête du HTML
<style type="text/css">
h2{
color: #fff;
}
</style>
190
Le CSS « interne» dans l’entête du HTML
! Avantage :
– Possibilité d’appliquer une règle sur tous les mêmes éléments d’un
même document
! Inconvénient :
– Ne s’applique qu’à ce document, et non au site en entier
– Il faut donc modifier le CSS sur chaque page (ex : si on a 10 pages,
modifier les styles sur les 10 fichiers)
191
La/les feuille(s) de style externe(s)
192
La feuille de style externe
index.html
styles.css
193
La feuille de style externe
• Avantages :
– Séparation totale de la structure
et de la présentation : possibilité
d’avoir des présentations
alternatives
– Possibilité d’appliquer la même
feuille de style sur plusieurs
pages (donc le site en entier)
sans devoir la dupliquer
– Cohérence de la présentation sur
tout le site et les pages futures.
194
Récapitulatif
! index.html : pour le
contenu
195
La syntaxe CSS
196
La syntaxe de base
selecteur {
propriete: valeur
propriete: valeur
...
}
197
La déclaration CSS
s
e
l
e
c
t
e
198
u
Les commentaires CSS
199
Généalogie et différents
types de sélecteurs
200
Le sélecteur usuel d'élément HTML
p{
color : blue;
}
201
Hiérarchie et généalogie
202
Hiérarchie et généalogie
203
Notion d’enfant et de descendance
204
Notion de parent et d'ancêtre
205
Sélecteur de hiérarchie
! Pour sélectionner le a
descendant de p, nous allons
pouvoir écrire :
pa{…}
(notez l’espace entre le p et le
a)
206
Sélecteur de groupe
207
Les sélecteurs de classe
! class=" " est un attribut qui peut se mettre sur n’importe quelle
balise
208
Les sélecteurs de classe
209
Classes multiples
210
Classes multiples
211
Classes multiples
! Une même classe peut être utilisée sur plusieurs balises dans le
même document
212
Classes multiples
213
Cibler une classe indépendamment de la balise
.nomdeclasse { }
214
Cibler une classe indépendamment de la balise
Une même classe peut être utilisée sur plusieurs balises HTML
215
Cibler une balise HTML avec une classe
element.maclasse { }
216
Cibler une balise HTML avec une classe
! Et button.btn.btn-default{ } va cibler
http://getbootstrap.com/css/#buttons
217
L’id (identifiant)
! Il a le même rôle qu’une classe, mais doit être unique sur la page
(donc on va moins l’utiliser)
! Un seul attribut id par balise est possible
! On le note <element id="monid">
! On le cible en CSS avec #monid { }
218
Un joyeux mélange !
219
Espace ou pas ?
220
Espace ou pas ?
221
Convention de nommage
222
En résumé
223
Qui est ciblé ?
div {
...
}
.first {
...
}
p.first {
...
}
224
Qui est ciblé ?
.sugar {
...
}
.sugar p {
...
}
p.sugar {
...
}
225
Qui est ciblé ?
h1 #hautpage {
...
}
h1#hautpage {
...
}
226
Qui est ciblé ?
.first a {
...
}
.first .sugar {
...
}
.important, #toffee {
...
}
227
flukeout.github.io
22
8
Les pseudos-classes sur les liens
229
Démonstration de :hover sur du bouton
http://tympanus.net/Development/CreativeButtons/
230
Les autres pseudo-classes
! :hover peut être appliqué sur d’autres éléments que des liens (à
partir de IE6).
! On peut écrire p:hover pour créer un effet au survol d’un
paragraphe par exemple
231
Subtle Hover effects
232
:focus sur les liens et inputs
233
Couleurs et unités CSS
234
La synthèse additive des couleurs
235
Les couleurs en CSS
236
Les couleurs en CSS
E
237
http://colours.neilorangepeel.com/
238
Les couleurs en CSS
– background
– border
– …
239
Récupérer une couleur
• Colozilla ou Rainbow
240
Le Pixel - px
• Unité « fixe »
• Dépendance à la résolution du périphérique
• Valeur « compilée » finale en CSS
241
Le cadratin - em
242
Le cadratin - em
243
Conversion d'em
http://pxtoem.com/
244
Le pourcentage : %
245
En web, quelle unité utiliser ?
P
o
246
Propriétés de typographie,
polices et puces
247
Font-family
body {
font-family: Arial, Helvetica, sans-
serif;
248
Font-family
249
Polices utilisables
250
Police utilisables
251
Polices utilisables
252
Polices utilisables
• http://www.fontsquirrel.com
• Autre outil : https://
everythingfonts.com/font-face
• Autre fonderie intéressantes :
https://typekit.com/
253
Font-size
body {
font-size: 18px;
}
254
Font-size
255
Mettre un
paragraphe en gras
p{
font-weight: bold;
}
256
Font weight
257
Mettre le paragraphe
en italique
p{
font-style: italic;
}
258
Font-style
259
Augmenter
l’interlignage
body {
line-height: 1.5;
}
260
Line-height
261
Color
h1 {
color: #008499;
}
262
Color
263
Text-align
264
Text-align
p{ p{
} }
265
Text-align
p{ p{
} }
266
Astuce : centrer une image
267
Text-transform
! uppercase
! lowercase
268
Text-transform
h2 { h2 {
} }
269
Text-transform
h2 { h2 {
} }
270
Font-variant
! normal
! small-caps
271
Font-variant
h2 { h2 {
} }
272
Text-decoration
! Valeurs possibles :
– none: permet d'empêcher l'héritage de la propriété et plus
particulièrement de supprimer le soulignement par défaut des liens
– overline : surlignement
– underline : soulignement
273
Enlever le soulignement des liens et le remettre au survol
a{ a:hover {
} }
/* enlever le soulignement des liens par défaut */ /* remettre le soulignement pour les liens survolés */
274
Text-indent
275
Indentation de 10px
p{
text-indent: 10 px;
}
276
Listes à puces
• Valeurs possibles
– none (pas de puce), disc, circle, square
277
Listes ordonnées
• Valeurs possibles
– decimal (1.), decimal-leading-zero (01.), lower-roman (vii), upper-roman (VII),
etc.
278
Retirer les puces
ul {
list-style-type: none;
}
279
Utiliser une image comme puce
ul {
list-style-image: url("img/liste.png");
}
280
Utiliser une image comme puce
281
Bordures et arrières plans
282
Les bordures
283
Les bordures
h2 {
border: 2px solid #009860 ;
}
284
Les bordures
border-right: …;
border-bottom: …;
285
Les bordures
h2 {
border-top: 1px solid gray;
}
286
Style de bordure
! dashed : tirets;
! groove : en relief;
287
Des bords arrondis : CSS3 !
288
Des bords arrondis : CSS3 !
div { div {
289
Background-color
! background-color : valeur permet de donner une couleur de
fond.
! Valeurs : n’importe quelle couleur CSS
! Sur un élément bloc (prend toute la largeur) ou inline (prend la
largeur du contenu)
290
Background-color
body {
background-color: #E6E6E6;
}
291
Background-image
292
Background-image
body {
background-image: url("img/bg.png");
}
293
Background-repeat
! background-repeat permet de définir la façon dont l’image va se
répéter.
294
Background-repeat
! Valeurs possibles :
– no-repeat : l’image ne sera pas répétée
– repeat-x : l’image sera répétée horizontalement
n repeat-x repeat-y
o
-
295
r
Background-repeat en pratique
! Quelques exemples
– http://kellianderson.com/blog/
– http://launchfactory.org/
297
Background-position
298
Une étoile alignée en
bas à droite
.backgroundposition {
background-color: #A4D0F2;
background-image: url('img/
etoile.png');
background-repeat: no-repeat;
background-position: right bottom;
299
Background-attachment
300
Background-attachment
301
Tout dans une ligne !
Il est possible de combiner toutes ces propriétés dans une seule et même ligne :
background : propriete1 propriete2 propriete3;
h2 {
302
Dimensions, margin et
padding
303
Petit rappel inline et block
304
Largeur et hauteur d'un élément : width et height
305
Max et min
! Valeurs : numériques
! Permet par exemple de gérer un débordement d’image :
img { max-width: 100%; } : les images sont limitées à la taille de leur
parent
306
Marges
! Il existe deux types de marges : intérieure appelée padding, et extérieure appelée margin
(s'il y a une bordure elle est elle aussi ajoutée à la largeur effective des éléments)
307
Marge extérieure « margin »
308
Marge extérieure « margin »
309
Ajouter une marge
sous un paragraphe
p{
margin-bottom: 30px;
}
310
Ajouter une marge
sous un titre
h2 {
margin: 50px 0;
}
311
Centrer horizontalement à l’aide de margin
312
Margin et éléments inline
313
Padding : la marge « intérieure »
314
Padding : la marge « intérieure »
315
Ajouter du padding au body
body {
padding: 10px 15px;
}
31
6
Ajouter du padding à
un titre pour décoller la
bordure
h2 {
padding-bottom: 10px
15px;
317
Padding sur élément en inline
318
Retirer les marges et padding par défaut du navigateur
319
Retirer les marges et padding par défaut du navigateur
320
Padding et calcul de dimension d’élément
321
Padding et calcul de dimension d’élément
322
Box-sizing:border-box - changer le modèle de boîte
.element {
box-sizing: border-box;
}
323
Box-sizing:border-box - changer le modèle de boîte
body { Valeur affichée de body :
width: 800px; 800px
padding: 10px 15px;
box-sizing: border-box;
324
Overflow : pour éviter que ça dépasse
325
Overflow: hidden - cacher ce qui dépasse
326
Overflow: auto - afficher une barre de défilement
327
Positionnements CSS
328
Les « flottants » et le flux
329
Float:left
330
Float right;
331
Problème des flottants
332
Clear : bloquer le dépassement des flottants
! Valeurs possibles :
– clear: left permet d’empêcher le contournement des blocs flottants à gauche
– clear: right permet d’empêcher le contournement des blocs flottants à droite
– clear : both permet d’empêcher le contournement des blocs flottants à
gauche et à droite
333
Clear : bloquer le dépassement des flottants
334
Problème des flottants
335
BFC et contenir les flottants dans un bloc
336
BFC et contenir les flottants dans un bloc
337
Overflow : hidden
! Ajouter overflow:hidden au
parent des flottants permet
de créer un « contexte de
formatage de bloc » et
résoudre notre problème
338
Overflow : hidden
.parent {
overflow : hidden;
}
339
Les flottants appliqués à la mise en page
• Il est possible d'utiliser des flottants pour créer une mise en page en
colonnes. C’est notamment utilisé dans d’anciennes versions de
bootstrap et ressemble à ça. On privilégie cependant flexbox
aujourd’hui pour une mise en page de site web.
340
Positionnements CSS
341
La propriété « display » pour mise en page
342
Display:block
! Il est possible de transformer un élément inline en élément de bloc
avec display: block
! Il a alors toutes les propriétés d’un élément de bloc : par défaut, il
prend toute la largeur de son parent, on peut en changer la
dimension ET est suivi d’un retour à la ligne. On peut alors lui
appliquer des marges.
343
Display:block
344
Display:block
Exemple : transformer les liens de la
navigation en éléments de bloc
.header a,
.header li {
display: block;
}
.header a {
background: #98C9E2;
margin-bottom: 5px;
width: 150px;
345
Display:inline
346
Display:inline
347
Display:inline-block
348
Display:inline-block et
navigation horizontale display: inline-block sur une liste de liens
permet par exemple de créer une
navigation horizontale
.header li {
display: inline-block;
}
.header li a{
display: block;
padding: 5px;
349
Display:inline-block et bugs connus
• La propriété crée une colonne blanche entre les éléments. Plus sur
ce problème ici
350
Display:none
351
Positionnement CSS
352
Positionnement CSS
353
Position:static;
354
Position:relative;
355
Position:relative;
position:relative;
top:-15px;
}
356
Position:relative;
.picto {
position: relative;
top:5px;
357
Position:relative;
358
Position: fixed
359
Position :fixed
360
Position :fixed
.nav {
Sortir la navigation du flux
position: fixed;
}
361
Position :fixed
.nav {
La positionner en haut à 0px des 3 coins
position: fixed;
pour qu’elle s’affiche toujours
top: 0;
left: 0;
right: 0;
}
362
Position: fixed dans la vraie vie
– http://www.lesechos.fr/
http://www.marketingmag.stfi.re/hubs-c/smartphone-addiction-nomophobia/ ?sf=ozpplo
364
Position: absolute;
! Par défaut, si aucun ancêtre n’est positionné (et qu’on a modifié top, left,
right ou bottom) il se positionne par rapport à l'élément racine <html>.
365
Position: absolute;
366
Centrer une légende d’image
367
Position: absolute;
368
Position: absolute;
.caption {
Préparer le positionnement de l’image
position: absolute;
bottom: 150px;
left: 0;
right: 0;
}
369
Position: absolute;
370
CSS et mise en page
• Pendant longtemps nous avons utilisé des fottants pour faire des
mises en page. Vous retrouvez encore cette technique sur
beaucoup de sites développés jusqu’il y a encore quelques années.
• Aujourd’hui, la mise en page de sites web moderne se fait avec
deux techniques : flexbox (pour des mises en page fluides) et grid-
layout (plus récent et moins bien supporté mais qui permet de créer
facilement des sites sur des principes de grilles.
371
CSS et mise en page avancée : Flexbox
– https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-
module.html
372
CSS et mise en page avancée : Grid Layout
– https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
– https://css-tricks.com/snippets/css/complete-guide-grid/
373
Adapter son site au mobile : le responsive webdesign
• http://mediaqueri.es/
374
Rapide aperçu de la syntaxe
display:block;
375
Liens utiles pour aller plus loin
376