Formation Dev Web

Partie I - Front
Séance 1 : HTML / CSS

Ressources à télécharger sur http://forma-dev.viarezo.fr

 Introduction

2
Ressources à télécharger sur http://forma-dev.viarezo.fr
Organisation des formations
Dev Web – Front 1 EA007 22/09 et 01/10
SysAdmin EA007 29/09
Dev Web – Front 2 EA007 05/10
Bonnes pratiques et IDE Amphi I 08/10
Dev Web – Back 1 EA007 12/10 et 13/10
Git EA007 15/10
LaTeX Amphi I 19/10
Dev Web – Back 2 EA007 20/10

À partir de 18h, < 2h

Ouvert à tous⋅tes ! 3
 Processus d'affichage d'un site
http://mon-site.fr/section/page.html Serveur de mon-site.fr

Requête HTTP
/section/page.html
Réponse
Fichier HTML

Requêtes sur ressources associées Chargement des

Interprétation
Réponses ressources statiques et
(exécution et
génération des ressources
affichage) des
dynamiques par le serveur
ressources par le
navigateur 4
Les langages utilisés
En front :
• HTML (Hypertext Markup Language) pour la structure
• CSS (Cascading Style Sheets) pour la mise en page et
l'apparence
• JS (JavaScript) pour l'interactivité
(ou des langages qui s'y compilent)

5
Les langages utilisés
En back :
→ Presque n'importe lesquels
• Spécifiques au développement web : PHP
• Aussi possibles : Python, Java...
• Dans cette formation : JavaScript (ou JS)
(avec la plateforme Node.js)

6
Le HTML

7
Avant tout…
Si vous n'avez pas d'éditeur de texte qui gère le HTML (Visual Studio
Code, Notepad++, Sublime Text, emacs si vous êtes tarés… PyCharm
c'est pour Python !), installez-en un !

Par exemple, Sublime Text 3 (version d'essai infinie) :

https://www.sublimetext.com/3

8
Exemple
Un langage de balisage : Mélange de texte et de balises

9
 Anatomie d'une balise

Balise ouvrante : <balise attr="valeur">

(texte et/ou autres balises)
Balise fermante : </balise>

Balise auto-fermante : <balise attr="valeur"/>

10
Imbrication des balises
On « encapsule » les balises les unes dans les autres, on ne
peut pas fermer une balise parente avant sa balise fille.

<balise1> <balise1>
<balise2> <balise2>
Mon contenu Mon contenu
</balise2> </balise1>
</balise1> </balise2>
11
 Structure globale d'un fichier HTML

Contenu

12
Éléments et DOM (Document Object Model)

html

body
html
body/p p

(texte) i (texte) b (texte)

i b
(texte) (texte)
13
Éléments de formatage de texte
Note : tout cela peut être fait
avec du CSS, mais utiliser les
balises sémantiquement
appropriées est bon pour
l’accessibilité du site.
Par exemple, <i> et <em>, ou
<b> et <strong>, ont le même
effet, mais n'ont pas la même
sémantique.

14
 Éléments interactifs

15
Disclaimer : contient un peu de CSS, parce que c’est vraiment trop moche sans
 Éléments conteneurs et organisation

← table row

table header →

table data →

16
Disclaimer : contient un peu de CSS pour colorer, et pour rendre la table moins moche
Éléments multimédias

17
Éléments d’intégration de contenu

18
Éléments conteneurs sémantiques
- <nav>
- <header>
- <footer>
- <section>
- …et bien plus encore !

Pour en savoir plus, consultez la « Bible » du front :

MDN web docs (https://developer.mozilla.org)
(c’est mieux en anglais)

Et n’oubliez pas que Google et StackOverflow sont vos amis !

19
Exercice intermédiaire (15 min)
Avant de passer au CSS, vérifions que vous avez bien compris.

Exercice : Créer une page HTML simple pour vous présenter,

avec une photo et du texte formatté, ainsi qu’un formulaire de
contact (qui ne fait rien)

20
Time’s up!

21
Le CSS

22
Généralités
CSS : Cascading Style Sheets

→ Décrit la mise en page et l’apparence de la page

→ On l’a déjà utilisé sans le savoir !

23
Syntaxe de base
sélecteur {

propriété: valeur;

propriété: valeur;

sélecteur {

propriété: valeur;

24
Syntaxe de base
p {

color: red;

font-size: 15px;

div {

display: block;

background: blue;

}
25
Sélecteurs simples
- N’importe quel élément : *

- Par type d’élément : div, span, img

- Par valeur de l’attribut ‘id’ :

#mon-id ↔ <div id="mon-id">
(Attention, un élément ne peut avoir qu’un id, et chaque id ne doit correspondre qu’à un seul élément)

- Par valeur de l’attribut ‘class’ :

.ma-classe ↔ <div class="ma-classe (…)">
(Un élément peut appartenir à plusieurs classes séparées par des espaces, et chaque classe peut
contenir autant d’éléments que nécessaire)

- Les pseudo-éléments : (Plus avancé)

p::first-line, ::selection, div::after 26
Sélecteurs composés
- Combinaison de sélecteurs simples :
div.ma-classe = un div de la classe ma-classe

- Sélection par descendance :

div span = un span à l’intérieur d’un div

(Attention à ne pas mélanger div.ma-classe et div .ma-classe !)

- Sélection par descendance directe :

div > span = un span enfant direct d’un div

- Choix de plusieurs sélecteurs :

[a], [b] = [a] ou [b]

- Sélection par attribut :

a[href="https://www.google.fr"]
(D’autres comparaisons que l’égalité sont aussi possibles)

- Les pseudo-classes :
a:hover, a:visited, input:checked, :first-child, :not(…) 27
Modèle en boîte

28
Propriétés de dimensionnement
- padding: <✥> / <↕> <↔> / <↑> <↔> <↓> / <↑> <→> <↓> <←>
(Propriété "raccourci")
(Valeur = Longueur ou pourcentage de la largeur du bloc conteneur*)

- Similairement pour margin

(Il y a aussi une valeur "auto" qui est possible, parfois utile pour centrer un élément)
(Attention au margin collapse !)

- width, height: <longueur> / <pourcentage de la dimension

correspondante du bloc conteneur*>
La boîte dont la taille est définie par ces 2 propriétés dépend de cette autre propriété :

- box-sizing: content-box (par défaut) / border-box

29
Aparté sur les unités de longueur
Il y en a beaucoup, voici les plus courantes :

- 1px = 1 pixel logique (peut être égal à plusieurs vrais pixels si haute résolution) Unités
absolues

- 1em = hauteur de police de l’élément (ou du parent si utilisé dans font-size) Unités
1rem = hauteur de police de l’élément racine (<html>) relatives
(à privilégier)

- 1vw/vh = 1% de la largeur (resp. hauteur) de la fenêtre du navigateur

30
Propriétés de formatage de texte
- color: #rrggbb / <nom de couleur>
(Propriété héritable)

- font-size: <taille>

- font-family: Police1, Police2;

(Il existe aussi des valeurs "génériques" : serif, sans-serif, monospace, cursive, …)

- font-style, font-weight, text-decoration : Autre stylification du texte

- line-height: <multiplicateur>
(On peut aussi mettre une longueur ou un pourcentage, mais c'est déconseillé)

- text-align: left / center / right / justified

31
Bordure et fond
- border: <épaisseur> <style> <couleur>
style = solid, dotted, dashed

- border-radius: <longueur>
→ permet d'arrondir le bord apparent de l'élément avec un rayon donné

- background-color: <couleur> / background-image: url(<url>)

(background-position, background-repeat, background-size pour agencer l'image)

32
Position & display

- position: absolute / relative / fixed

- display: block / inline /inline-block / none

- Aussi : flex / grid → et toutes les propriétés en lien, très utile, à rechercher !
- Propriété vertical-align : top/bottom/middle pour des inline-block

33
Cascade, héritage, et spécificité
Si on précise plusieurs valeurs différentes pour une même propriété, laquelle est
choisie ? Une règle est prioritaire sur l’autre si : (à appliquer dans l’ordre)
• Elle est directement sur l’élément plutôt qu’héritée (pour les propriétés qui s’héritent)
• Elle contient le mot clé !important à la fin et pas l’autre (avant le ‘;’)

• Elle est spécifiée dans le HTML via l’attribut style plutôt que dans un fichier lié

• Son sélecteur contient plus de sélecteurs par id

Règles de
• Son sélecteur contient plus de sélecteurs par (pseudo-)classe / par attribut spécificité des
sélecteurs
• Son sélecteur contient plus de sélecteurs par (pseudo-)élément
• Si elle apparaît après dans le code

34
Exemple : index.html

div OU div.main OU div#global OU .main OU #global

div OU div#block1 OU div div#block1 OU div.main > div.block1

p OU div#block1 p OU div.main div#block1 > p

p span OU div#block1 p > span OU span.important

35
Exemple : style.css

36
Exemple : Résultat
#BLOCK1 #BLOCK2 #BLOCK3

37
#global
D'autres trucs en vrac
- z-index

- transition

- @media

- list-style

Référez-vous toujours à la documentation !

N'oubliez pas : MDN web docs (https://developer.mozilla.org) !

38
Le TD !
Votre tâche : Réaliser une jolie liste de tâches (pas interactive pour l'instant), un peu
comme ci-dessous (mais pas aussi joli, sinon on va être vexé⋅e⋅s) :

39
Ciao ! 😘

40