Orange Digital Center
Développement web Full Stack JS :
Initiation
Pour bien créer votre site web
1
Formateur
Anis ASSAS
• Ingénieur en informatique
• Enseignant universitaire (Maitre Technologue à l’ISET Djerba)
• Formateur et conseiller expert
Email : assas_anis@[Link]
2
Fiche formation
o Durée : 3 jours
o Prérequis :
• Concepts de base de la programmation : variables, opérateurs, fonctions, classes/objets, tableau, …
o Objectifs :
• Différencier les notions de base telles que : Internet et Web et découvrir le fonctionnement du Web.
• Apprendre les bases de HTML et être capable de construire des squelettes de sites Web et des
structures essentielles.
• Créer des mises en page avec CSS
• Apprendre les fondamentaux de JavaScript.
o Méthodes pédagogiques :
• Notions théoriques et notes de cours
• Démonstrations et activités pratiques
3
Plan de la formation
1 Les fondements du développement web
2 Le langage HTML
3 Les feuilles de styles CSS
4 Le langage Java Script
4
Les feuilles de styles
5
Les feuilles du style : Plan
Introduction
Intégration de CSS dans HTML
Sélecteurs CSS
CSS3
Les unités de mesure
Formatage de texte
Couleurs et fonds de page
Manipulation des listes
Propriétés des tableaux
Modèle des boîtes
Autres propriétés
6
CSS : Introduction
CSS : Cascading Style Sheets
Langage permettant de compléter le langage HTML
Permettant la mise en forme d’un document HTML
Standardisé par W3C
Evolution:
CSS 1: introduit en 1996. Début très difficile à cause de la guerre entre les navigateurs (IE, Netscape...).
CSS 2: apparue en 1998, environ 70 nouvelles propriétés par rapport à CSS 1.
CSS 3: version officiellement non finalisée mais plusieurs nouvelles propriétés prises en charge par les
navigateurs.
En parallèle de CSS 3, on parle de CSS 4 qui a débuté en 2010
7
Intégration de CSS dans HTML
Trois inclusions différentes d’un code CSS :
1. En utilisant l’attribut style dans des balises HTML classiques <p style="color:red;">
Bonjour
<tag style="property: value;"> </p>
Le head
<style type="text/css">
2. En ajoutant une balise <style> dans <head> p{
color: red;
<style type="text/css"> }
selector { </style>
property: value;
} Le body
</style> <p>
Bonjour
</p>
Avec HTML 5, Plus besoin de préciser le type pour la balise style.
8
Intégration de CSS dans HTML
3. En plaçant le contenu de style dans un fichier d’extension .css (par exemple [Link]) puis en
référençant ce dernier dans un fichier d’extension .html (par exemple [Link]) par la balise <link>
[Link]
p{
color: red;
}
[Link]
…
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p> je m’affiche en rouge </p>
<p style="color:blue;"> je m’affiche en bleu </p>
</body>
</html>
9
Sélecteurs CSS
Syntaxe d’écriture d’un style :
Sélecteur { propriété 1 : valeur1 ; Exemple :
propriété 2 : valeur2 ; div { color : red ;
… background-color :yellow ; }
propriété n : valeur n ;
}
=> Avec sélecteur c’est la balise à laquelle s’applique le style
4 Types de sélecteurs :
Une balise
Une classe (class)
Un identifiant (id)
Une combinaison de sélecteurs
10
Sélecteurs CSS
1. Une balise
Fichier CSS
Fichier HTML
p{
<p> bonjour </p> color: red;
}
2. Une classe (class)
regroupe plusieurs éléments (pas forcément de même type) dans une même famille.
Fichier HTML Fichier CSS
<h1 class=bleu> titre </h1> .bleu {
<p class=rouge> bonjour </p> color: blue;
<p class=bleu> bonsoir </p> }
.rouge {
color: red;
}
11
Sélecteurs CSS
3. Un identifiant (id)
concerne un seul élément de la page
Fichier CSS
Fichier HTML
#gras {
<p id=gras> bonsoir </p>
font-weight: bold;
}
4. Une combinaison de sélecteurs
* tous les éléments
h1, p les h1 et p <h1>...<p>...<p>...<h1>
div p les p situés dans div <div>oui<p>... <span>non<p>
p#gras les p ayant un id gras <p id=’gras’>oui <p>non
#gras tout élément ayant un id gras <p id=’gras’>oui <p>non
[Link] les p de la classe bleu <p class=’bleu’>oui <p>non
12
Sélecteurs CSS
4. Une combinaison de sélecteurs
h1 + p le p directement après h1 <h1>...</h1><p>oui</p> <p>non</p>
<div>...<p>oui</p>… </div>
div > p le p enfant direct de div
<div>...<span>... <p>non
le p après div (avec p et div ont le même <ul>...</ul> <p>non</p>
div ~p
parent) <div>...</div><p>oui</p>
• Règle générale : CSS donne la priorité au sélecteur le plus spécifique. (identifiant > class >
balise)
o Entre identifiant et classe : identifiant
o Entre classe et balise : classe
o Entre identifiant et balise : identifiant
o Entre deux sélecteurs (qui sont ni identifiant, ni classe) : le dernier dans le fichier CSS si aucun des deux
est plus spécifique que l’autre. 13
Gestion des conflits
• Le poids du sélecteur se calcule de gauche à droite et la valeur de chaque sélecteur s'accumule.
o sélecteur d'éléments (balises) 0-0-1
o sélecteur de classe 0-1-0
o sélecteur d'id 1-0-0
• Exemples :
o p {...} /* 0-0-1 */ a un poids moins important que
o p.classe1 {...} /* 0-1-1 */ qui a lui même moins d'importance que
o p#id1 {...} /* 1-0-1 */
o div p {...} /* 0-0-2 */ l'emporte sur
o p {...} /* 0-0-1 */
o p.class1#id1 {...} /* 1-1-1 */ l'emporte sur
o div p.class1 {...} /* 0-1-2 */
14
Gestion des conflits
• Exemple :
p{ /* |0|0|1 */
border:1px solid yellow; <body>
}
<p id="id-css" class="class-css">
.class-css{ /* |0|1|0 */ Les propriétés css de l'id écrasent
border:1px solid green; celles de la classe et celles de la balise
} </p>
</body>
#id-css{ /* |1|0|0 */
border:1px solid red;
}
15
Les pseudo-sélecteurs
• Pseudo-sélecteurs (liens) <div>
o a:hover les liens survolés <p class="survol">
o a:visited les liens visités La Reine devint pourpre de colère
o a:active les liens actifs </p>
<p>
o a:link les liens non visités
« Quelle idée ! » dit Alice très-haut
• Pseudo-sélecteurs (formulaires) et d’un ton décidé. </p>
o input:optional les inputs sans la propriété required </div>
o input:required les inputs avec la propriété required .survol:hover {
o input:read-only les inputs avec la propriété readonly background-color: palegreen;
o input:read-write les inputs sans la propriété readonly }
o input:valid les inputs avec une valeur valide
o input:invalid les inputs avec une valeur invalide
o input:checked les inputs cochés <div>
o input:enabled les inputs activés <input type="email" name=test>
</div>
o input:disabled les inputs désactivés
o input:focus les inputs ayant le focus input:invalid {
background-color: pink;
} 16
Les pseudo-sélecteurs
• Autres pseudo-sélecteurs d’usage général <div>
o a:first-child : premier enfant de la balise précisée <p>Les standards tels que
<div>XHTML</div>
o a:lang(code) : si son attribut lang a la valeur précisée par et
son code de langue <div>CSS</div>
s’imposent aujourd’hui
Exemple : </p>
o p:lang(fr) { color: black; } </div>
o p:lang(en-us) { color: gray; }
p:first-child {
background-color: red;
⇒ Les paragraphes ayant l’attribut lang="fr" ont un texte en noir
color : white;
et ceux ayant l’attribut lang="en-us" seront en gris
}
• Les pseudo-éléments
Ils agissent sur une partie du contenu d’une balise comme s’il
était contenu dans une nouvelle balise
17
Les pseudo-sélecteurs
• Pseudo-éléments
<div>
o :first-letter : affecte un style à la première lettre du contenu
<p>
de la balise indiquée avant ce sélecteur
Bonjour tout le monde ☺
Exemple : p:first-letter {font-size: 300%; color: blue;}
</p>
</div>
o :first-line : affecte un style à la première ligne du contenu
de la balise indiquée
p:first-letter {
Exemple : div:first-line {font-size: 150%; font-weight: bold;}
font-size: 300%;
color : blue;
o :before : insère un contenu doté d’un style particulier avant }
le contenu réel de l’élément précisée
Exemple : cite:before{content:">>"; font-weight: bold;}
<p><cite>Etre ou ne pas être</cite> est une citation<p>
o :after : même rôle que le pseudo élément « :before » sauf
que c’est après le contenu de la balise précisée
18
Les unités de mesure
La spécification de certaines valeurs en CSS nécessite l'utilisation d'un certain nombre d'unités de mesure.
Unités absolues :
Unités relatives :
19
Formatage de texte
Font : Méga propriété qui regroupe toutes les propriétés selon l’ordre suivant
Syntaxe :
font: font-style font-variant font-weight font-size font-family . . ... ;
20
Formatage de texte
Exemples : Fichier HTML Fichier CSS
<div> div {
<p>paragraphe</p> font-size: 16px;
</div> }
p{
font-size: 14px;
font-family: "Times new roman" ,verdana, calibri;
}
21
Formatage de texte
Exemples : Fichier CSS Fichier HTML
h1 { <h1>Bonjour </h1>
text-decoration: underline;
text-transform: uppercase;
}
22
Formatage de texte
Exemples : td{
<table border="1">
<tr >
vertical-align: middle; <td>Hello</td>
text-align: left; <td>Tout le monde</td>
letter-spacing: 10px; </tr>
word-spacing: 20px; </table>
}
23
Exemples d’alignement
Les valeurs de la propriété text-align (horizontal) <table> table {
<tr> width: 300px;
center
<td>1</td> height: 100px;
left (par défaut) <td>2</td>
right border: 1px solid red;
</tr>
justify <tr>
text-align: center;
<td>3</td> border-collapse: separate;
<td>4</td> }
Les valeurs de la propriété vertical-align (pour </tr> td {
</table> border: 1px solid black;
les balises inline et les cellules de tableau)
}
top td:first-child {
baseline (par défaut)
vertical-align: text-top;
middle
}
bottom
sub
td:last-child {
super vertical-align: bottom;
}
NB : border-collapse : Les bordures de tableau sont fusionnées (collapse) ou séparées (separate)
24
Exemple de formatage de texte
Exemple :
div {
border : 1px solid gray;
}
h1 {
<div> text-align : center;
<h1>text formatting</h1> text-transform : uppercase;
<p>This text is styled with some of the text color : #4CAF50;
formatting properties.</p>
</div>
}
p{
text-indent : 50px;
text-align : justify;
letter-spacing : 3px;
}
25
Les couleurs et fonds de page
<h1>This is heading 1</h1>
Les propriétés de fond
<p>This is an ordinary paragraph.</p>
color : couleur de texte
body {
background-color : couleur de fond background-color: #ccc;
color: red;
}
Les formats acceptés pour les couleurs h1 { background-color: rgb(255, 184, 0);
Le nom en anglais : red, blue... color: hsl(321, 53%, 47%);
}
Le code hexadécimal :
[Link]
Le code RGB : [Link]
Le code HSL (Teinte saturation lumière ):
[Link]
26
Les couleurs et fonds de page
Les propriétés de fond
div {
background-image:
url([Link]
width: 100px;
height: 70px;
}
27
Les couleurs et fonds de page
Les propriétés de fond div {
background-image:
url([Link]
background-repeat : no-repeat;
width: 100px;
height: 70px; }
28
Les couleurs et fonds de page
Les propriétés de fond
29
Les couleurs et fonds de page
Exemple :
<p>
.fixed-bg { In this example, we have created a fixed background image
background-image: that will disappear slowly on scroll. Scroll the page to see the
url("Drapeau_de_la_Tunisie.jpg"); effect. <strong>Note:</strong> Try to remove the background-
min-height: 500px; attachment property to really understand this example.
background-attachment: fixed; </p>
background-position: center;
background-repeat: no-repeat; <div class="fixed-bg"></div>
background-size: cover;
} <div style="height:800px; background-color:yellow;">
This div is only here to enable scrolling (height = 800 pixels).
</div>
30
Les couleurs et fonds de page
Les propriétés de fond
31
Manipulation des listes
Les propriétés des listes
32
Manipulation des listes
Les propriétés des listes ul
{ list-style-image: ul
Exemples : { list-style: inside square;
url("images/[Link]");
} }
ol
{ list-style-type: upper-roman;
}
33
Propriétés des tableaux
Les propriétés des tableaux
34
Propriétés des tableaux
Border-collapse
Valeurs de la propriété :
o Separate : Un mot-clé qui indique que les
bordures sont séparées. C'est la valeur par
défaut. L’espacement entre les bordures est
mesuré avec la propriété border-spacing.
o Collapse : Un mot-clé qui indique que les les
bordures sont fusionnées.
35
Propriétés des tableaux
Caption-side
Valeurs de la propriété :
o top : légende en haut du tableau (valeur par
défaut)
o bottom : légende en bas du tableau
36
Propriétés des tableaux
Empty-cells
Valeurs de la propriété :
o show : Les bordures et les fonds sont affichés
pour une cellule vide (valeur par défaut).
o hide : Les bordures et les fonds sont masqués
pour une cellule vide.
37
Modèles des boîtes : dimensions
Les dimensions
Width : propriété qui donne la largeur d’un élément. Elle est exprimée en px, %, ou encore la
valeur "auto ".
Height : propriété qui exprime la hauteur d’un élément. Elle est exprimée en px, %, ou encore la
valeur "auto ".
38
Modèles des boîtes : bordures
Les propriétés de bordures
Width : largeur d’un élément. Elle est exprimée en px, %, ou encore la valeur "auto ".
Height : hauteur d’un élément. Elle est exprimée en px, %, ou encore la valeur "auto ".
39
Modèles des boîtes : bordures
Les propriétés de bordures
Exemple :
p { border-left: 2px dotted blue; /* Bordure gauche bleue en pointillée d’épaisseur 2px */ }
body { border: 1px solid red; /* bordure rouge pour toute la page */}
40
Exemple : Bordure
<p id=one-value> #one-value {
4 sides border-style: solid;
</p> border-width: 1px;
}
<p id=two-values>
top/bottom and right/left #two-values {
</p> border-style: solid;
border-width: 1px 3px;
<p id=three-values> }
top and right/left and bottom
</p> #three-values {
border-style: solid;
<p id=four-values> border-width: 1px 3px 5px;
top and right and bottom and left }
</p>
#four-values {
border-style: solid;
border-width: 1px 3px 5px 7
px;
}
41
Les positions : static, relative, absolute et fixed
position : static
position, par défaut, naturelle sur la page
Fichier CSS
position : relative
position qui peut changer par rapport à la position statique de l’élément. [Link] { [Link] {
position: static; position: absolute;
position : absolute left: 30px; top: 80px;
border: 1px solid red; left: 30px;
définie par rapport au block englobant : se réfère à son premier ancêtre width: 400px; width: 200px;
positionné qu’il rencontre. height: 200px; height: 100px;
} border: 1px solid red;
position : fixed [Link] { }
position: relative; [Link] {
position qui reste fixe, l’élément est toujours positionné par rapport à la
left: 30px; position: fixed;
fenêtre du navigateur même si on descend dans la page (avec un scroll border: 1px solid red; border: 1px solid red;
width: 400px; }
par exemple).
height: 200px;
}
<div class ="static"> static </div>
<div class ="relative"> relative </div>
<div class ="absolute"> absolute</div>
<div class ="fixed"> fixed </div>
<img src="[Link]
42
La propriété Z-index
La propriété z-index Fichier CSS
o z-index prend une valeur numérique. L’élément .boite-tirets { .boite-verte {
position: relative; position: absolute;
avec un plus grand z-index sera placé au z-index: 1; z-index: 2;
dessus des autres. border: dashed; background: lightgreen;
height: 8em; width: 20%;
o il ne fonctionne que sur des éléments ayant une margin-bottom: 1em; left: 65%;
margin-top: 2em; top: -25px;
position : « absolute », « relative » ou « fixed ». } height: 7em;
.boite-doree { opacity: 0.9;
Fichier HTML position: absolute; }
z-index: 3;
<div class="boite-tirets">Boîte tirets
background: gold;
<span class="boite-doree">Boîte dorée</span>
width: 80%;
<span class="boite-verte">Boîte verte</span>
left: 60px;
</div>
top: 3em;
}
43
Modèles des boîtes : marges extérieures
Les marges extérieures
Une marge extérieure est l’espacement
extérieur entre l’élément et l’élément parent.
Elle est exprimée avec la propriété margin.
Pour les quatre côtés (margin-top, margin-
right, margin-left et margin-bottom), on
doit indiquer une valeur en pixels, en
pourcentage, en centimètre ou autre.
A noter que la valeur auto est utilisée pour
centrer un élément.
44
Modèles des boîtes : marges extérieures
Les marges extérieures
Margin : Méga-propriété de marge
externe.
En spécifiant une seule valeur à margin
donnera effet sur les 4 côtés.
Sinon les autres cas se présentent
comme suit :
45
Modèles des boîtes : marges extérieures
Les marges extérieures
Exemples :
body{ margin: 20px; table { margin : auto; /* tableau centré */
background-color: #eeeeee; Background-color : aqua;
text-align: left; }
}
div { margin : 5px auto; }
P /* marge verticale de 5px et centrée horizontalement */
{
width: 350px; td { margin: 1px 5px 2px; }
border: 1px solid black; /* marge haut de 1px, marge horizontale de 5px et marge en
text-align: justify; bas de 2px */
margin: 50px; /* Marge extérieure de
50px */
}
46
Modèles des boîtes : marges intérieures
Les marges intérieures
Une marge intérieure est l’espacement
intérieur entre l’élément et son contenu. Elle
est exprimée par la propriété padding.
Pour les 4 propriétés (padding-left,
padding-right, padding-bottom et
padding-top), on doit indiquer une valeur
en pixels, en pourcentage, en centimètre ou
autre.
47
Modèles des boîtes : marges intérieures
Les marges intérieures
Padding : Méga-propriété de marge
interne.
En spécifiant une seule valeur à padding
donnera effet sur les 4 côtés.
Sinon les autres cas se présentent comme
suit :
48
Modèles des boîtes : marges intérieures
Les marges intérieures
Exemples :
p{ h1
margin:20px; {
padding:10px; width: 350px;
background-color:#FFFAFA; border: 1px solid black;
} text-align: justify;
padding: 12px;
table{ margin-bottom: 20px;
width:200px; }
margin:auto;
}
49
Modèles des boîtes : débordement
Débordement de contenu
La propriété qui gère le débordement de
contenu dans un élément est overflow.
Exemple :
<div>
You can use the overflow property
when you want to have better
control of the layout. The overflow
property specifies what happens if
content overflows andivelement's
{
box.
background-color: #eee;
</div> width: 200px;
height: 50px;
border: 1px dotted black;
overflow: auto;
}
50
Exemples
<div id="red"> div {
<span>Je mesure 50 pixels de haut.</span> width: 250px;
</div> margin-bottom: 5px;
<div id="green"> border: 3px solid #999999;
<span>Et moi je mesure 25 pixels de haut.</span> }
</div> #red {
<div id="parent">
height: 50px; background-color: red;
<div id="child">
}
<span>Je suis moitié moins haut que mon parent.</span>
#green {
</div>
</div> height: 25px; background-color: green;
}
<div> div { #parent {
<p> margin: 0; height: 100px; background-color: blue;
Bonjour! padding: 1px; }
</p> background: #C00000; #child {
</div> } height: 50%; width: 75%;
p{ background-color: crimson;
margin: 20px; }
padding: 10px;
background-color: #FFFAFA;
} 51
La propriété : float
La propriété float <div class="container" >
<div class=component1 >red</div>
permet de déclarer et choisir l’emplacement d’un objet flottant. <div class=component2 >green</div>
<div class=component3 >blue</div>
Les valeurs de la propriété float <div class=component4 >yellow</div>
</div>
left
right .component1 {
background-color: red;
Les valeurs de la propriété clear : pour annuler float }
.component2 {
left et right background-color: green;
}
both: indique que l'élément est déplacé vers le bas afin de dégager les
.component3 { float : left;
flottements à gauche et à droite. background-color: blue;
}
Et si on veut placer le bleu à gauche du vert ? .component4 {
background-color: yellow;
}
.container > div {
text-align: center;
}
52
La propriété : Clear
.component2 {
float: right;
background-color: green;
}
.component3 {
Oui, mais le jaune, on voulait qu’il reste à la ligne float: left;
background-color: blue;
.component4 { }
clear: both;
background-color: yellow;
}
53
La propriété : Visibility
Plusieurs valeurs possibles pour visibility :
hidden : pour rendre un élément invisible (sa place est conservée)
visible : pour rendre un élément visible
collapse : pour rendre un élément du tableau invisible, mais la place qu’il occupe est perdue
inherit : pour avoir la même visibilité de l’élément parent
<table> #hiddenRow {
<tr><td> 1 </td><td> 2 </td></tr> visibility: hidden;
<tr id=hiddenRow><td> 3 </td><td> 4 </td></tr> }
<tr><td> 5 </td><td > 6 </td></tr> #collapseRow {
<tr id=collapseRow><td> 7 </td><td > 8 </td></tr> visibility: collapse;
<tr><td > 9 </td><td> 10 </td></tr> }
</table>
54
La propriété : Display
Chaque élément HTML a une propriété display qui est par défaut soit inline soit block.
La valeur none pour la propriété display:
Un élément HTML ayant la valeur none pour la propriété display ne sera pas affiché, sans avoir à le supprimer
réellement de la page (DOM).
span {
visibility:hidden vs display:none margin: 30px;
display: none masque totalement l’élément et annule des propriétés telles }
que margin, padding, width... .propDisplay {
display: none;
visibility: hidden masque seulement l’élément, ce qui peut laisser des }
espaces vides.
.propHidden {
visibility: hidden;
<p>Bonjour. Apres les deux points, il y a un mot dont display=none : <span }
class="propDisplay"> ICI </span>.</p>
<p>Entre parentheses, il y a un mot dont visibility=hidden (<span
class="propHidden"> ICI </span>).</p>
55
Atelier 2
56
Java Script
57