Scribd
Importer
16 vues188 pages

Dev_web_css3_Js

Transféré par

محمد الشفقي
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
16 vues188 pages

Dev_web_css3_Js

Transféré par

محمد الشفقي
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 188

Programmation Web:

CSS 3
HTML vs CSS

structure de la mise en forme


page Web de la page

2023-2024 COURS PROGRAMMATION WEB 2


Introduction au CSS
Problèmes HTML :
 HTML n’a jamais été destiné à contenir des balises de mise en forme d’une
page web !
 HTML a été créé pour décrire le contenu d’une page web
Résolution par le CSS :
 Permet la mise en page d’un contenu
 Appliquer un style à un élément pour changer son apparence
 Avant d’appliquer un style il faut obligatoirement sélectionner un ou
plusieurs éléments.

2023-2024 COURS PROGRAMMATION WEB 3


Qu'est-ce que CSS ?

 CSS Cascading Style Sheets (feuilles de style en cascade)


 Langage de style
 S'occupe de la mise en forme de la page Web.
 Distinct du HTML mais les deux langages sont complémentaires.

Ecrire du code CSS pour un document HTML consiste à écrire des règles de style CSS.

2023-2024 COURS PROGRAMMATION WEB 4


Intégration du CSS
Méthode 1 :

 Ajouter du CSS directement dans les balises du document HTML via l’attribut
style

COURS PROGRAMMATION WEB 5


Intégration du CSS
Méthode 2 :

 Incorporer du code CSS au document HTML, en le plaçant dans l'en-tête du


document

2023-2024 COURS PROGRAMMATION WEB 6


Intégration du CSS
Méthode 3 :

 Créer une feuille de style externe : méthode la plus recommandée

2023-2024 COURS PROGRAMMATION WEB 7


Syntaxe de base
 Bloc de code CSS
 Spécifie la mise en forme correspondante à un ou plusieurs éléments de
contenu de la page Web.
 Constituée d'un sélecteur et d'un bloc de déclarations CSS.

Bloc de déclaration CSS


Sélecteur {
Propriété CSS1 : valeur1, valeur2, … ;
Propriété CSS2 : valeur ;
…
}

2023-2024 COURS PROGRAMMATION WEB 9


Exemple
Accolade d’ouverture placée après le sélecteur
p {
background-color: gray; Déclaration CSS
Sélecteur
color : orange;
}

Accolade de fermeture

2023-2024 COURS PROGRAMMATION WEB 10


Syntaxe de base
Syntaxe Exemple.css

 On commence par le nom de la balise (par exemple h1), on met les propriétés (une ou
plusieurs) et valeurs entre deux accolades « { } ».
 Chaque propriété est suivie du symbole « : » puis de sa valeur correspondante.
 Enfin, chaque ligne se termine par un point-virgule « ; ».

2023-2024 COURS PROGRAMMATION WEB 11


Syntaxe de base
Test.html style.css
<html>
h1 {
<head>
<title>titre de la page</title> color : blue ;
<meta content="text/html; charset=UTF-8" /> }
<link rel="stylesheet" type="text/css" href="style.css"> b{
</head> color : blue ;
<body> }
<h1> voici un titre en bleu </h1>
<h2> ce mot <b> bonjour</b> sera en bleu </h2>
</body>
</html>

2023-2024 COURS PROGRAMMATION WEB 12


Syntaxe de base
Si plusieurs (≥2) balises doivent avoir la même mise en forme. On déclare les
noms des balises et on les sépare par une virgule « , » comme suit : ces deux
fichiers sont équivalents.
h1 { style.css
color : blue ;
style.css } h1, h2, b { color :
h2 { blue ;
color : blue ; }
}
b{
color : blue ;
}

2023-2024 COURS PROGRAMMATION WEB 13


Syntaxe de base
 Les commentaires dans du CSS : pour insérer un commentaire en CSS
Tapez /* suivi de votre commentaire, puis */ pour terminer votre
commentaire. Le commentaire ne s'interprète pas.

 Appliquer un style à une balise (p, h1 ,h2,


…) cela implique que TOUS les
style.css paragraphes soient écrits par exemple en
bleu.
 Comment appliquer un style pour que
seulement certains paragraphes soient
écrits d'une manière différente
!?
2023-2024 COURS PROGRAMMATION WEB 14
Quel est le rôle du sélecteur
 Un sélecteur cible (pointe sur) l'élément ou les éléments HTML auxquels
s'applique la règle CSS.
 Types de sélecteurs :

Sélecteur

Sélecteur de type Sélecteur d’ID Sélecteur de classe

2023-2024 COURS PROGRAMMATION WEB 15


Sélecteur de type/ de balise

 Cible les éléments du document HTML qui correspondent au nom de


la balise indiqué.
 Syntaxe :
nom_balise {
propriété CSS1 : valeur ;
propriété CSS2 : valeur ;
propriété CSS3 : valeur ;
}

2023-2024 COURS PROGRAMMATION WEB 16


Sélecteur d’ID

 Cible uniquement un élément


 Syntaxe :
< nom_balise id="valeurID" > … </nom_balise>

#valeurID {
propriété CSS1 : valeur ;
Sélecteur d'ID
propriété CSS2 : valeur ;
propriété CSS3 : valeur ;
}

2023-2024 COURS PROGRAMMATION WEB 17


Sélecteur d’ID
page.html
style.css

2023-2024 COURS PROGRAMMATION WEB 18


Sélecteur de classe
 Cible plusieurs éléments du document HTML indépendamment de leur type
 Syntaxe :

< nom_balise class ="nomClasse" > … </nom_balise>

.nomClasse {
propriété CSS : valeur ;
Sélecteur de classe }

2023-2024 COURS PROGRAMMATION WEB 19


Sélecteur de classe
page.html
style.css

2023-2024 COURS PROGRAMMATION WEB 20


Les balises universelles
Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à
certains mots qui, à l'origine, ne sont pas entourés par des balises.
En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez
donc en mettre que sur une balise. Si, par exemple, je veux modifier
uniquement « bienvenue » dans le paragraphe suivant :

<p>Bonjour et bienvenue sur ma Page web</p>

C'est là qu'interviennent les balises universelles en HTML et CSS. Egalement


connues sous le nom de balises génériques, permettent d'appliquer des styles à
n'importe quelle partie du contenu HTML, quelle que soit sa structure.

2023-2024 COURS PROGRAMMATION WEB 21


Les balises universelles

 <span> </span> : c'est une balise de type inline, c'est-à-dire une balise que
l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots
uniquement.

 <div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les
balises <p>,<h1>, etc. sont de la même famille. Ces balises ont quelque chose en
commun : elles créent un nouveau « bloc » dans la page et provoquent donc
obligatoirement un retour à la ligne.

2023-2024 COURS PROGRAMMATION WEB 22


Les balises universelles
page.html
style.css

2023-2024 COURS PROGRAMMATION WEB 23


Les balises universelles
page.html
style.css

2023-2024 COURS PROGRAMMATION WEB 24


Les balises universelles

Cela montre comment vous pouvez utiliser la balise <div> comme un conteneur
générique pour envelopper du contenu et lui appliquer des styles spécifiques à
l'aide de CSS.

La différence principale entre l'utilisation de <span> et <div> est que <span>
est généralement utilisé pour des portions de texte en ligne, tandis que <div> est
souvent utilisé pour des sections de contenu plus importantes ou des blocs de
contenu.

2023-2024 COURS PROGRAMMATION WEB 25


Qu'est-ce qu'une propriété CSS
 Une propriété CSS est un aspect de l'apparence d'un élément HTML qui
peut être modifié.
 Le nom d'une propriété CSS n'inclue pas d'espaces mais il peut inclure des
tirets pour le rendre plus lisible.
 Exemples:
 background-color
 color
 font-size

2023-2024 COURS PROGRAMMATION WEB 26


Texte : Propriété Font

Propriété Description
font Définir toutes les propriétés de la police
font-family Indiquer la (ou les) polices à utiliser
font-size Définir la taille d’une police (px, em, etc.)
font-weight Déterminer l’épaisseur de la police
font-style Préciser le style de police
font-variant Changer la casse de la police

2023-2024 COURS PROGRAMMATION WEB 27


La taille: font-size

 La taille : la propriété font-size permet d’indiquer la taille du texte :


 Une taille absolue : en pixels, en centimètres ou millimètres.

2020-2021 COURS PROGRAMMATION WEB 28


La taille: font-size
 Une taille relative : en pourcentage "%", "em" , ou "ex", cette technique a
l'avantage d'être plus souple, elle est recommandée car le texte s'adapte
alors plus facilement aux préférences de tous les visiteurs. Elle s’indique en
utilisant les mots suivants: (On peut utiliser l’unité em (sans espace))
xx-small minuscule
x-small très petit
small petit
Medium moyen
large grand
x-large très grand
xx-large gigantesque

2023-2024 COURS PROGRAMMATION WEB 29


La taille: font-size
 Une taille absolue:

page.html style.css

2023-2024 COURS PROGRAMMATION WEB 31


La taille: font-size
 Une taille relative

2023-2024 COURS PROGRAMMATION WEB 32


La police: font-family
 La police : la propriété font-family permet d’indiquer la police du texte (type
de texte).

 Pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police
que vous, on précise en général plusieurs noms de police, séparés par des
virgules. En voici une liste des polices les plus courantes :
Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New
Roman, Trebuchet MS, Verdana, Courier New, Lucida Console

2023-2024 COURS PROGRAMMATION WEB 33


La police: font-family
page.html

style.css

 Cela signifie : "Mets la police Impact, ou, si elle n'y est pas, Arial Black, ou sinon Arial,
ou sinon Verdana, ou si rien n'a marché mets une police standard (serif)".
 Si la police se compose de deux mots, mettez la entre guillemets ("la police").

2023-2024 COURS PROGRAMMATION WEB 34


La mise en forme du texte: font-style

 Mettre en italique: la propriété font-style permet de mettre le texte en


italique, elle peut prendre 3 valeurs :

 italique : le texte sera mis en italique.


 oblique : le texte sera aussi mis en italique (en penchant les lettres).
 normal : le texte sera normal (par défaut).

2023-2024 COURS PROGRAMMATION WEB 35


La mise en forme du texte: font-style
page.html style.css

2023-2024 COURS PROGRAMMATION WEB 36


La mise en forme du texte: font-weight

 Mettre en gras : la propriété font-weight permet de mettre le texte en gras,


elle peut prendre 2 valeurs :

 bold : le texte sera en gras.


 normal : le texte sera écrit normalement (par défaut).

2023-2024 COURS PROGRAMMATION WEB 37


La mise en forme du texte: font-weight
page.html style.css

2023-2024 COURS PROGRAMMATION WEB 38


Transformer le texte: text-transform
 Transformer le texte: la propriété text-transform permet de transformer le
texte en 5 valeurs possibles :

 Lowercase : en minuscules.
 Uppercase : en majuscules ;
 Capitalize : la première lettre de chaque mot en majuscule.
 Inherit : Hérite de la valeur de l’élément parent ;
 None : sans de transformation.

2023-2024 COURS PROGRAMMATION WEB 39


Transformer le texte: text-transform
style.css
page.html

2023-2024 COURS PROGRAMMATION WEB 40


Alignement du texte: text-align
 L'alignement: la propriété text-align indique l'alignement désiré, elle peut
prendre 4 valeurs :

 left : le texte sera aligné à gauche (par défaut).


 center : le texte sera centré.
 right : le texte sera aligné à droite.
 justify : le texte sera justifié.

2023-2024 COURS PROGRAMMATION WEB 41


Alignement du texte: text-align
page.html style.css

2023-2024 COURS PROGRAMMATION WEB 42


Texte : Autres propriétés
Propriété Description
text-decoration Spécifie la décoration ajoutée au texte
text-shadow Spécifie l'effet d'ombre ajouté au texte
direction Spécifie la direction du texte / la direction d'écriture
letter-spacing Augmente ou diminue l'espace entre les caractères
dans un texte
word-spacing Augmente ou réduit l'espace entre les mots dans un
texte
vertical-align Définit l'alignement vertical d'un élément

2023-2024 COURS PROGRAMMATION WEB 43


Texte : Autres propriétés
page.html style.css

2023-2024 COURS PROGRAMMATION WEB 44


Les flottants: float

 Les flottants: la propriété float permet de flotter un élément autour du texte


(habillage), elle peut prendre 2 valeurs :

 left : l'élément flottera à gauche.


 right : l'élément flottera à droite.

2023-2024 COURS PROGRAMMATION WEB 49


Les flottants: float
page.html

style.css

2023-2024 COURS PROGRAMMATION WEB 50


Les propriétés de couleurs

 Dans cette partie, nous verrons comment modifier :

 la couleur du texte,
 couleur ou une image de fond,
 ajuster les transparence, les bordures, et les ombres.

2023-2024 COURS PROGRAMMATION WEB 51


Les propriétés de couleurs

 Couleur du texte : la propriété color permet d’indiquer une couleur à un


élément, soit en utilisant

 Nom de la couleur en anglais


 Notation hexadécimale : (#xxxxxx)
 Notation RGB : rgb (x, y, z)

2023-2024 COURS PROGRAMMATION WEB 52


Les propriétés de couleurs

https://htmlcolorcodes.com/fr/

2023-2024 COURS PROGRAMMATION WEB 53


Arrière plan: background-color

 Couleur de fond: la propriété background-color permet d’indiquer une couleur


de fond à un élément de la même manière que la propriété color.

2023-2024 COURS PROGRAMMATION WEB 55


Arrière plan: background-color
page.html style.css

2023-2024 COURS PROGRAMMATION WEB 56


Arrière plan: linear-gradient
 Couleur de fond: la valeur linear-gradient de propriété
background
permet d’indiquer un fond à un élément en dégradé de couleur. Elle
admet 3 paramètres :
 direction du dégradé:
o to bottom (Par défaut) (vers le bas),
o to left (vers la gauche),
o to left bottom (incliné vers la gauche et vers le bas) etc...
 couleur de début: la couleur du début (spécifiée grâce à l'une des 4
méthodes).
 couleur de fin: la deuxième couleur du dégradé.
https://uigradients.com/

2023-2024 COURS PROGRAMMATION WEB 57


Arrière plan: linear-gradient

style.css

2023-2024 COURS PROGRAMMATION WEB 58


Arrière plan: background-image

 Image de fond: la propriété background-image permet d’indiquer une image


de fond à un élément, Comme valeur, on doit lui donner
url("nom_de_l_image.extension").

2023-2024 COURS PROGRAMMATION WEB 59


Arrière plan: background-image
page.html style.css

2023-2024 COURS PROGRAMMATION WEB 60


Arrière plan: background-attachement
 La propriété CSS background-attachment permet de "fixer" le fond, elle peut
prendre 2 valeurs :
 fixed : l'image de fond reste fixe.
 scroll : l'image de fond défile avec le texte (par défaut).

2023-2024 COURS PROGRAMMATION WEB 61


Arrière plan: background-attachement
scroll fixed

2023-2024 COURS PROGRAMMATION WEB 62


Arrière plan: background-repeat
 La propriété CSS background-repeat permet d’indiquer la répétition du
fond, elle peut prendre 4 valeurs :
 no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la
page.
 repeat-x : le fond sera répété uniquement sur la première ligne,
horizontalement.
 repeat-y : le fond sera répété uniquement sur la première colonne,
verticalement.
 repeat : le fond sera répété en mosaïque (par défaut).

2023-2024 COURS PROGRAMMATION WEB 63


Arrière plan: background-repeat

2023-2024 COURS PROGRAMMATION WEB 64


Arrière plan: opacity

 La transparence : la propriété CSS opacity permet de jouer très facilement


avec les niveaux (entre 0 et 1) de transparence des éléments.
 Avec une valeur de 1, l'élément sera totalement opaque : c'est le
comportement par défaut. Avec une valeur de 0, l'élément sera totalement
transparent.

2023-2024 COURS PROGRAMMATION WEB 65


Arrière plan: opacity

2023-2024 COURS PROGRAMMATION WEB 66


Arrière plan: background-position
 La propriété CSS background-position permet d’indiquer la position de
l’image du fond, cette propriété est intéressante si un fond ne se répète pas, on
indique deux valeurs en pixels ou en anglais (top, bottom, left, center,
right(aussi la combinaison)) pour indiquer la position du fond par rapport au
coin supérieur gauche de la page (ou paragraphe).

2023-2024 COURS PROGRAMMATION WEB 67


Les bordures
 La propriété CSS border permet d’indiquer la bordure pour décorer un
élément, elle peut prendre 3 valeurs :

 La largeur : une valeur en pixels (comme 2px).


 La couleur : un nom de couleur ("black", "red"...), soit (#FF0000), soit une
valeur rgb (rgb(198, 212, 37)).
 Le type de bordure

2023-2024 COURS PROGRAMMATION WEB 69


Les bordures
 Le type de bordure : peut être :
 none : pas de bordure (par défaut)
 solid : un trait simple.
 dotted : pointillés.
 dashed : tirets.
 double : bordure double.
 groove : en relief.
 ridge : autre effet relief.
 inset : effet 3D enfoncé.
 outset : effet 3D surélevé

2023-2024 COURS PROGRAMMATION WEB 70


Les bordures

2023-2024 COURS PROGRAMMATION WEB 71


Les bordures

 Options disponibles pour les bordures


 en utilisant la propriété CSS border à un élément, ce dernier aura la
même bordure aux 4 côtés. si vous voulez mettre des bordures différentes,
utiliser ces 4 propriétés :
 border-top : bordure en haut.
 border-bottom : bordure en bas.
 border-left : bordure à gauche.
 border-right : bordure à droite.

2023-2024 COURS PROGRAMMATION WEB 72


Les bordures

2023-2024 COURS PROGRAMMATION WEB 73


Les bordures

 Options disponibles pour les bordures :


 La propriété CSS border-radius permet d'arrondir les angles de n'importe
quel élément en indiquant la taille en pixels pour tous les coins (Ypx) ou
bien pour chaque coin (Ypx Ypx Ypx Ypx).

2023-2024 COURS PROGRAMMATION WEB 74


Les bordures

 Options disponibles pour les ombres : la propriété CSS box-shadow permet


d'ajouter un ombre à élément en indiquant en pixels trois valeurs et une
couleur de cet ordre 1px 2px 3px 4.
1. Le décalage horizontal de l'ombre.
2. Le décalage vertical de l'ombre.
3. L'adoucissement du dégradé
4. La couleur de l'ombre.

2023-2024 COURS PROGRAMMATION WEB 76


Les bordures

2023-2024 COURS PROGRAMMATION WEB 77


Création d'apparences dynamiques

 Le CSS nous permet aussi de modifier l'apparence des éléments de façon


dynamique lors du survol, clic …
 Au survol : pseudo-formats CSS :
 hover permet de modifier l’apparence quand la souris est sur un élément

2023-2024 COURS PROGRAMMATION WEB 78


Création d'apparences dynamiques
page.html style.css

2023-2024 COURS PROGRAMMATION WEB 79


Création d'apparences dynamiques

 Au survol:

2023-2024 COURS PROGRAMMATION WEB 80


Création d'apparences dynamiques
style.css

 Au clic : pseudo-formats CSS :


 active permet d'appliquer un style particulier
au moment du clic.

2023-2024 COURS PROGRAMMATION WEB 81


Création d'apparences dynamiques

 Au clic:

2023-2024 COURS PROGRAMMATION WEB 82


Création d'apparences dynamiques
 Lorsque le lien a déjà été visité: pseudo-formats CSS :
 visited permet d'appliquer un style particulier à un lien vers une page qui a déjà
été vue.

2023-2024 COURS PROGRAMMATION WEB 83


Création d'apparences dynamiques

Déjà visité

2023-2024 COURS PROGRAMMATION WEB 84


Création d'apparences dynamiques

 Lors de la sélection:
 Focus permet d'appliquer un style particulier au moment de la sélection.

2023-2024 COURS PROGRAMMATION WEB 85


Structure d’une page web

 Nous avons appris à construire des pages basiques en HTML, à modifier la mise en
forme avec CSS... Intéressons-nous maintenant à la mise en page de notre site.
 En général, une page web est constituée d'un en-tête (tout en haut), de menus de
navigation (en haut ou sur les côtés), de différentes sections au centre... et d'un pied
de page (tout en bas).
 Dans un premier temps il faut structurer notre page et après on passe au code html
et à la mise en forme avec le CSS.

2023-2024 COURS PROGRAMMATION WEB 86


Structure d’une page web

2023-2024 COURS PROGRAMMATION WEB 87


Structure d’une page web
 L'en-tête <header> : l’en-tête de page se trouve en général tout en haut du document.
on y trouve le plus souvent un logo, une bannière, le slogan de votre site., etc. Vous
devrez placer ces informations à l'intérieur de la balise <header>.

 Le pied <footer> : A l'inverse de l'en-tête, le pied de page se trouve en général tout en


bas du document. On y trouve des informations comme des liens de contact, le nom de
l'auteur, les mentions légales, etc. Vous devrez placer ces informations à l'intérieur de
la balise <footer>.

2023-2024 COURS PROGRAMMATION WEB 88


Structure d’une page web
 Principaux liens de navigation <nav> :
 La balise <nav> doit regrouper tous les principaux liens de navigation du site.
Vous y placerez par exemple le menu principal de votre site. Généralement, le
menu est réalisé sous forme de liste à puces à l'intérieur de la balise <nav> :

2023-2024 COURS PROGRAMMATION WEB 89


Structure d’une page web
 Une section de page <section> :
 La balise <section> sert à regrouper des contenus en fonction de leur thématique.
Elle englobe généralement une portion du contenu au centre de la page.

2023-2024 COURS PROGRAMMATION WEB 90


Structure d’une page web
 Informations complémentaires <aside>
 La balise <aside> est conçue pour contenir des informations complémentaires au
document que l'on visualise. Ces informations sont généralement placées sur le
côté (bien que ça ne soit pas une obligation).

 Un article indépendant <article> :


 La balise <article> sert à englober une portion
généralement autonome de la page. C'est une
portion de la page qui pourrait (par exemple) être
reprise ailleurs sur un autre site. C'est le cas par
exemple des actualités (articles de journaux ou de
blogs).

2023-2024 COURS PROGRAMMATION WEB 91


2023-2024 COURS PROGRAMMATION WEB 92
Le modèle des boîtes
 Une page web peut être vue comme une succession et un empilement de boîtes,
qu'on appelle "blocs". La plupart des éléments vus précédemment sont des blocs
<header>, <article>, <nav>, <p>, les titres <h1> , etc.
 Dans cette partie, nous allons apprendre à manipuler ces blocs comme de véritables
boîtes. Nous allons leur donner des dimensions, les agencer en jouant sur leurs
marges, mais aussi apprendre à gérer leur contenu... pour éviter que le texte ne
dépasse de ces blocs !.
 Les balises inline : par exemple des liens <a></a>.
 Les balises block : par exemple des paragraphes <p></p>.

2023-2024 COURS PROGRAMMATION WEB 93


Le modèle des boîtes

 Les dimensions: un bloc a des dimensions précises. Il a une largeur et une hauteur.
Par défaut, un bloc prend 100% de la largeur disponible.
 width : c'est la largeur du bloc. À exprimer en pixels (px) ou en pourcentage (%).
 height : c'est la hauteur du block. À exprimer soit en pixels (px), soit en
pourcentage (%).
 Pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs, on
fixe les dimensions : min-width : largeur minimale, min-height : hauteur minimale,
max-width : largeur maximale, max-height : hauteur maximale

2023-2024 COURS PROGRAMMATION WEB 94


Le modèle des boîtes

2023-2024 COURS PROGRAMMATION WEB 95


Le modèle des boîtes
 Les marges: tous les blocs possèdent des marges. Il existe 2 types de marges:
 Les marges intérieurs et les marges extérieurs .
 padding : indique la taille des marges intérieures. À exprimer en général en
pixels (px).
 margin : indique la taille de la marge extérieure. Là encore, on utilise le plus
souvent des pixels.

2023-2024 COURS PROGRAMMATION WEB 96


Le modèle des boîtes
 Les propriétés margin et padding s'applique aux 4 côtés du bloc. Si vous voulez
indiquer une marge en haut, en bas, à gauche et à droite utiliser ces propriétés :
 margin:auto pour centrer le bloc
 Pour la marge extérieure :
o margin-top : marge extérieure en haut. margin-bottom : marge extérieure en
bas. margin-left : marge extérieure à gauche. margin-right : marge
extérieure à droite
 Pour la marge intérieurs :
o padding-top : marge intérieure en haut. padding-bottom : marge intérieure
en bas. padding-left : marge intérieure à gauche. padding-right : marge
intérieure à droite

2023-2024 COURS PROGRAMMATION WEB 97


Le modèle des boîtes

2023-2024 COURS PROGRAMMATION WEB 98


Le modèle des boîtes

2023-2024 COURS PROGRAMMATION WEB 99


Le positionnement en CSS

2023-2024 COURS PROGRAMMATION WEB 102


Le positionnement en CSS

2023-2024 COURS PROGRAMMATION WEB 103


Le positionnement en CSS

 Chaque élément HTML a un affichage par défaut en fonction de son type qui peut
être soit block soit inline.
 Grâce à la propriété display, il est possible de modifier cet affichage par défaut selon
les besoins

2023-2024 COURS PROGRAMMATION WEB 104


Le positionnement en CSS
 Un élément de type block commence toujours sur une nouvelle ligne et prend toute la
largeur disponible.

2023-2024 COURS PROGRAMMATION WEB 105


Le positionnement en CSS
 Un élément de type inline ne démarre pas sur une nouvelle ligne.
 Il ne prend seulement que la largeur dont il a besoin.

2023-2024 COURS PROGRAMMATION WEB 106


Le positionnement en CSS: display
 La propriété display est capable de transformer n'importe quel élément de votre page
d'un type (bloc et inline) vers un autre. Elle accepte 4 valeurs possibles :

2023-2024 COURS PROGRAMMATION WEB 107


Le positionnement en CSS: display

2023-2024 COURS PROGRAMMATION WEB 108


Le positionnement en CSS: position
 La propriété position permet de positionner avec précision des éléments sur la page, elle
accepte 4 valeurs :
 static: Cela signifie que l’élément suit le flux normal du document et n’est pas
affecté par les propriétés top, bottom, right ou left.
 absolute: il nous permet de placer un élément n'importe où sur la page (en haut à
gauche, en bas à droite, tout au centre, etc..).
 fixed: identique au positionnement absolu, mais cette fois l'élément reste toujours
visible, même si on descend plus bas dans la page.
 relative: permet de décaler l'élément par rapport à sa position normale.

2023-2024 COURS PROGRAMMATION WEB 109


Le positionnement en CSS

2023-2024 COURS PROGRAMMATION WEB 112


La Disposition des boîtes flexibles:
Flexbox

 Le modèle des boîtes flexibles, aussi appelé « flexbox », a été conçu comme
un modèle de disposition unidimensionnel et comme une méthode
permettant de distribuer l'espace entre des objets d'une interface ainsi que
de les aligner.
 les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne.

2023-2024 COURS PROGRAMMATION WEB 113


La Disposition des boîtes flexibles:
Flexbox

 Avec display:flex; sur le conteneur, les éléments à l'intérieur sont agencés


en mode Flexbox (horizontalement, par défaut)
 Avec flex-direction, on peut indiquer si les éléments sont agencés
horizontalement (par défaut) ou verticalement. Cela définit ce qu'on appelle
l'axe principal. Cette propriété CSS peut prendre les valeurs suivantes :
 row : organisés sur une ligne (par défaut)
 column : organisés sur une colonne

2023-2024 COURS PROGRAMMATION WEB 114


2023-2024 COURS PROGRAMMATION WEB 115
Le modèle des grilles : CSS Grid
 C’est un modèle totalement bidimensionnel, ce qui signifie qu’on va avoir
accès à des propriétés similaires pour disposer nos éléments selon l’axe
horizontal ou l’axe vertical (à la différence du modèle des boites flexibles
dans lequel on doit définir un axe principal et un axe secondaire de
disposition).

2023-2024 COURS PROGRAMMATION WEB 116


Le modèle des grilles : CSS Grid
 display: grid; : De la même manière que pour Flexbox, lorsque vous
utilisez CSS Grids, vous pouvez imaginer un conteneur, dans lequel vous
allez mettre les éléments de votre grille.
 On va définir les colonnes et les rangées avec deux propriétés :
 grid-template-columns pour le nombre de colonnes, et la largeur de
chacune d'entre elles.
 grid-template-rows pour le nombre de rangées, et la hauteur de
chacune d'entre elles.
 La propriété CSS gap permet de créer des espacements entre vos
éléments.

2023-2024 COURS PROGRAMMATION WEB 117


2023-2024 COURS PROGRAMMATION WEB 118
Programmation Web:
HTML 5
Les tableaux
 La balise <table> permet de créer des tableaux. Elle contient deux balises
de base qui sont :
 <tr> </tr> : indique le début et la fin d'une ligne du tableau.
 <td></td> : indique le début et la fin du contenu d'une cellule.
Cellule
<td>

Ligne
<tr>

2023-2024 COURS PROGRAMMATION WEB 121


Les tableaux
 La balise <table> peut accueillir de nombreux attributs :
 Border : définit, en pixels, la taille de la bordure entourant le tableau
(aussi les cellules).
 Width : définit en pixels ou en pourcentage (%) la largeur du tableau.
 Height : définit en pixels la hauteur du tableau.
 Cellspacing : définit en pixels ou en pourcentage l'espacement entre les
différentes cellules du tableau.
 Cellpadding : définit en pixels ou en pourcentage (%) la marge interne
des cellules.

2023-2024 COURS PROGRAMMATION WEB 122


Les tableaux

 bgcolor : Cet attribut définit la couleur d'arrière-plan de toutes


les cellules
 align : aligner (horizontalement) le contenu de la colonne :
 align=right (droit)
 align=center (centre)
 align=left (gauche)

2023-2024 COURS PROGRAMMATION WEB 123


Les tableaux
 La balise <tr> peut accueillir les attributs suivants:
 height : la hauteur de la ligne
 bgcolor : la couleur de fond des cellules de cette ligne
 align : aligner le contenu des cellules de la ligne
 La balise <td> peut accueillir ces attributs :
 width : la largeur de la colonne en pixel ou en pourcentage par
rapport à la largeur du tableau.
 height : la hauteur en pixel de la colonne.

2023-2024 COURS PROGRAMMATION WEB 124


Les tableaux
 bgcolor : la couleur de fond de la colonne.
 align : aligner (horizontalement)
 valign : aligner (verticalement) le contenu de la colonne :
 valign=middle (milieu)
 valign=top (haut)
 valign=bottom (bas)
 La balise <caption> permet d’attribuer un titre au tableau, cette
balise se place tout au début du tableau. Elle peut accueillir
l’attribut align avec deux option : top et bottom.
 La balise <th> Définit une cellule d'en-tête dans un tableau

2023-2024 COURS PROGRAMMATION WEB 125


Les tableaux

2023-2024 COURS PROGRAMMATION WEB 126


Les tableaux
 Fusion des colonnes avec l’attribut colspan de la balise td va
faire la fusion des cellules horizontalement.

2023-2024 COURS PROGRAMMATION WEB 127


Les tableaux
 Fusion des colonnes avec l’attribut colspan de la balise td va
faire la fusion des cellules horizontalement.

2023-2024 COURS PROGRAMMATION WEB 128


Les tableaux
 Fusion des colonnes avec l’attribut rowspan de la balise td va
faire la fusion des cellules verticalement.

2023-2024 COURS PROGRAMMATION WEB 129


Les tableaux
 Diviser un gros tableau : on peut diviser un gros tableau en trois
parties avec les trois balises suivantes :
 <thead></thead> L'en-tête (en haut)
 <tbody></tbody> Le corps (au centre)
 <tfoot></tfoot> Le pied du tableau (en bas)
En-tête thead
tbody
corps
pied tfoot

2023-2024 COURS PROGRAMMATION WEB 130


Les tableaux

2023-2024 COURS PROGRAMMATION WEB 131


Les Formulaires

 Formulaire : Toute page HTML peut être enrichie de formulaires


interactifs, qui invitent vos visiteurs à renseigner des
informations : saisir du texte, sélectionner des options, valider
avec un bouton…
 La balise <form> : permet d'indiquer le début et la fin d’un
formulaire. Ses attributs les plus fréquents sont :
 name : le nom unique du formulaire dans la même page.

2023-2024 COURS PROGRAMMATION WEB 132


Les Formulaires
 L'attribut method indique par quel moyen les données
vont être envoyées. Ne vous en préoccupez pas pour le
moment. Sachez juste que les méthodes les plus utilisées
sont get et post.
 L'attribut action indique l'adresse de la page ou du
programme qui va traiter les informations

2023-2024 COURS PROGRAMMATION WEB 133


Les Formulaires
 La balise <input> est utilisée pour les différents types d'entrées de
données par l'utilisateur, comme du texte, des chiffres, etc.
 Vous pouvez ajouter l’attribut placeholder qui permet de donner une
indication sur le contenu du champ.
 Types fréquents :
 text : zone de texte simple.
 password : zone de mot de passe.
 radio: bouton radio (choix unique)
 checkbox : bouton radio (choix multiples)

2023-2024 COURS PROGRAMMATION WEB 134


Les Formulaires
 file: champ de chargement de fichier
 button: bouton d’action
 reset: bouton d'annulation (réinitialisation)
 submit: bouton qui permet de poster le formulaire vers la page
définie dans l'attribut action de la balise <form>
 email: champ pour saisir une adresse e-mail.
 url: champ saisir une url (http://....)
 tel: champ pour saisir de numéros de téléphone.

2023-2024 COURS PROGRAMMATION WEB 135


Les Formulaires

 number: champ pour saisir un nombre entier.


 range: permet de sélectionner un nombre avec un curseur
 color: permet de saisir une couleur.
 date: permet de saisir une date : date : pour la date (05/08/1985
par exemple) time : pour l'heure (13:37 par exemple); week : pour
la semaine; month : pour le mois; datetime-local : pour la date et
l'heure (sans gestion du décalage horaire
 search: un champ de recherche.

2023-2024 COURS PROGRAMMATION WEB 136


Les Formulaires

2023-2024 COURS PROGRAMMATION WEB 137


Les Formulaires
 La balise <label> fournit une étiquette pour un élément de
formulaire. Utile pour l'accessibilité.
 La balise <textarea> : permet de créer une zone de texte
multiligne. On peut ajouter les attributs rows (nombre de lignes
de texte) et cols (nombre de colonnes de texte).

2023-2024 COURS PROGRAMMATION WEB 138


Les Formulaires

 Les balises <select> et <option> :


 Liste déroulante pour choisir parmi plusieurs options.

2023-2024 COURS PROGRAMMATION WEB 139


Les Formulaires

 La balise <fieldset> : Si votre formulaire grossit et comporte


beaucoup de champs, il peut être utile de les regrouper au sein de
plusieurs balises <fieldset>.
 Chaque <fieldset> peut contenir une légende avec la balise
<legend>

2023-2024 COURS PROGRAMMATION WEB 140


Les Formulaires

2023-2024 COURS PROGRAMMATION WEB 141


2023-2024 COURS PROGRAMMATION WEB 142
Programmation Web:
JavaScript
Qu’est ce que JavaScript ?

 Langage de programmation de script utilisé en programmation WEB, Créé en


1995

 Standardisé par ECMA International en juin 1997

 Langage interprété

 Permet de rendre vos pages Web dynamiques et interactives, un script sert


principalement à lancer et coordonner l'exécution de programmes

 JavaScript est le seul langage inclus en standard dans les navigateurs web.

2023-2024 COURS PROGRAMMATION WEB 144


Pourquoi utiliser JavaScript ?

 Interagir avec le document HTML et ses feuilles de style CSS :


• Insérer dynamiquement du contenu dans la page HTML
• Modifier dynamiquement le style CSS d’un élément HTML

 Interagir avec l'utilisateur :


• Réagir aux évènements ( Ex : clic de l’utilisateur sur un lien ou un bouton )
• Obtenir des informations sur l’ordinateur de l’utilisateur (Ex: type du navigateur )
• Effectuer des calculs sur l’ordinateur de l’utilisateur (Ex : validation d’un formulaire)

2023-2024 COURS PROGRAMMATION WEB 145


Intégration du JavaScript dans HTML
Méthode 1 :

 Ajouter du JavaScript directement dans les balises du document


HTML comme valeur d’attribut

2023-2024 COURS PROGRAMMATION WEB 146


Intégration du JavaScript dans HTML
Méthode 2 :
 incorporer du code JavaScript au document HTML

2023-2024 COURS PROGRAMMATION WEB 147


Intégration du JavaScript dans HTML
Méthode 3 :
 Code JavaScript dans un fichier séparé chargé a l’aide de la balise script
et de son attribut src :

2023-2024 COURS PROGRAMMATION WEB 148


Commentaires

2023-2024 COURS PROGRAMMATION WEB 149


Les instructions

 une commande qui se termine par un point-virgule.


 indique à l'hôte JavaScript ce qu'il doit faire.
 Exemple :

a = 5 ; a++;

2023-2024 COURS PROGRAMMATION WEB 150


Les mots réservés de JavaScript

2023-2024 COURS PROGRAMMATION WEB 152


Les variables : règles de nommage
 Utilisez un nom de variable qui décrit le type d’information que
stockera la variable
Le nom d’une variable :
Ne doit pas dépasser les 26 caractères.
Doit commencer par une lettre, $ ou _
Peut contenir des lettres, des chiffres, $ ou _
Ne doit contenir aucun espace ni caractère accentué.
Ne doit pas être un mot réservé de JavaScript.
Est sensible à la casse: maVariable, mavariable et MAVARIABLE sont trois
variables différentes.

2023-2024 COURS PROGRAMMATION WEB 153


Les variables : Déclaration et
Initialisation

2023-2024 COURS PROGRAMMATION WEB 154


Les variables : Portée et Cycle de vie

2023-2024 COURS PROGRAMMATION WEB 155


Les variables : Types
Types simples
 boolean
 number
 string
 undefined
Types avancés
 object
 array
 function

2023-2024 COURS PROGRAMMATION WEB 156


Les variables : Types
 JavaScript est un langage non typé :
 Une même variable peut recevoir tout au long du programme, des
valeurs de types différents sans que cela déclenche une erreur.

 L’opérateur typeof renvoie le type d’une variable ou d’une


expression
 Exemple :
typeof (" Bonjour "); // renvoie String

2023-2024 COURS PROGRAMMATION WEB 157


Les opérateurs : Affectation

2023-2024 COURS PROGRAMMATION WEB 158


Les opérateurs : Arithmétiques

2023-2024 COURS PROGRAMMATION WEB 159


Les opérateurs : Logiques

2023-2024 COURS PROGRAMMATION WEB 160


Les opérateurs : Comparaison

2023-2024 COURS PROGRAMMATION WEB 161


Les conditions: if…else

2023-2024 COURS PROGRAMMATION WEB 163


Les conditions: switch…case

2023-2024 COURS PROGRAMMATION WEB 164


Les boucles: while

2023-2024 COURS PROGRAMMATION WEB 165


Les boucles: do … while

2023-2024 COURS PROGRAMMATION WEB 166


Les boucles: for

généralement utilisée lorsque vous savez combien de fois la boucle


sera exécutée, et si vous voulez utiliser un compteur d'itérations.

2023-2024 COURS PROGRAMMATION WEB 167


Fonctions : Déclaration et Appel

2023-2024 COURS PROGRAMMATION WEB 168


Fonctions Anonymes
 fonction qui n’a pas de nom.
 stockée dans une variable et peut être appelée comme n’importe
quelle autre fonction grâce à cette variable.
 Exemple :
var somme = function (x, y) {
return x + y;
}
var c = somme(5, 10);
console.log( c );
// retourne 15

2023-2024 COURS PROGRAMMATION WEB 169


Fonctions : prompt, confirm, alert

2023-2024 COURS PROGRAMMATION WEB 170


Fonctions : Conversion

 Number(x) : convertit l'argument transmis en un nombre.


 parseInt(x) : Convertit l'argument transmis en un entier.
 parseFloat(x) : Convertit l'argument transmis en un réel.
 String(val) : Convertit la valeur transmise en une chaîne.

NB : Si l'argument ne peut pas être converti en un nombre, une valeur NaN est retournée.

2023-2024 COURS PROGRAMMATION WEB 171


Tableaux

2023-2024 COURS PROGRAMMATION WEB 172


Tableaux
Syntaxe :
 var monTableau =[ ]; // tableau vide

 var monTableau = [ val1, val2,……]; // tableau pré-remplit

 monTableau[index] = valeur;

2023-2024 COURS PROGRAMMATION WEB 173


Tableaux : Méthodes
Méthode Description

pop() supprime le dernier élément d'un tableau


push() ajoute un nouvel élément à un tableau (à la fin)
supprime le premier élément du tableau et "décale" tous les
shift()
autres éléments vers un index inférieur
ajoute un nouvel élément à un tableau (au début) et "décale" les
unshift()
éléments plus anciens
sort() trie un tableau par ordre alphabétique
reverse() inverse les éléments d'un tableau
recherche dans le tableau l'élément spécifié et renvoie sa
indexOf ()
position

2023-2024 COURS PROGRAMMATION WEB 174


Les chaînes de caractères: Méthodes
utiles

2023-2024 COURS PROGRAMMATION WEB 175


C’est quoi le DOM ?

 Un standard qui considère les éléments HTML d’une page Web


comme des objets.
 Grâce au DOM, vous pouvez accéder à n'importe quel élément de la
page via des propriétés et des méthodes.
 Représente l’arbre hiérarchique des éléments HTML de la page.
 Créé automatiquement par le navigateur lors du chargement de la
page.

2023-2024 COURS PROGRAMMATION WEB 176


C’est quoi le DOM ?

2023-2024 COURS PROGRAMMATION WEB 177


A quoi sert le DOM ?

 Ajouter, modifier, supprimer des éléments HTML dynamiquement.


 Gérer les évènements : être averti lorsque quelque chose se passe
sur la page.

2023-2024 COURS PROGRAMMATION WEB 178


DOM : L’objet Document

 La page HTML est représentée dans le DOM par l’objet document.


 L’objet document dispose de propriétés et méthodes qui permettent
de modifier la structure de la page Web.

2023-2024 COURS PROGRAMMATION WEB 179


document.getElementById

 Accéder à un seul élément HTML

 Retourne l’élément HTML ayant l’id spécifié.

 Syntaxe :
var monElement = document.getElementById("nomid");

2023-2024 COURS PROGRAMMATION WEB 180


document.getElementsByTagName

 Retourne un tableau de tous les éléments correspondants à une


balise spécifique.

 Syntaxe :

var mesElements = document.getElementsByTagName("nombalise");

2023-2024 COURS PROGRAMMATION WEB 181


document.getElementsByClassName

 Retourne un tableau de tous les éléments correspondants à une classe CSS

spécifique.

 Syntaxe :

var mesElements = document.getElementsByClassName("nomClasse");

2023-2024 COURS PROGRAMMATION WEB 182


Exemples
Page.html my_script.js

2023-2024 COURS PROGRAMMATION WEB 183


Modifier du contenu HTML :
innerHTML

 Retourne et modifie le contenu (texte et code HTML) d’un élément HTML


 On récupère l’élément HTML
monElement = document.getElementById("nomid");
 On récupère son contenu HTML
contenuHtml = monElement.innerHTML;
 On modifie son contenu HTML
monElement.innerHTML = " <balise> Nouveau texte </balise> ";

2023-2024 COURS PROGRAMMATION WEB 184


Modifier du contenu HTML :
innerHTML
Page.html my_script.js

2023-2024 COURS PROGRAMMATION WEB 185


Modifier du contenu texte :
textContent

 Retourne et modifie le contenu textuel (seulement) d’un élément HTML.


 On récupère l’élément HTML
monElement = document.getElementById("nomid");
 On récupère son contenu textuel
contenu = monElement.textContent;
On modifie son contenu textuel
monElement.textContent = " Nouveau texte" ;

2023-2024 COURS PROGRAMMATION WEB 186


Modifier du contenu texte :
textContent
Page.html my_script.js

2023-2024 COURS PROGRAMMATION WEB 187


document.createElement

 Crée un nouveau élément HTML dans la page WEB

 Syntaxe :

var newElement = document.createElement('nombalise') ;

2023-2024 COURS PROGRAMMATION WEB 188


document.createElement

Page.html my_script.js

2023-2024 COURS PROGRAMMATION WEB 189


Associer un id à un élément

Syntaxe :

monElement.id = "nomid";

2023-2024 COURS PROGRAMMATION WEB 190


Associer une classe à un élément

 Syntaxe :

monElement.className = "nomclasse";

2023-2024 COURS PROGRAMMATION WEB 191


createTextNode

 Crée un élément de contenu textuel.

 Syntaxe :

var textElem = document.createTextNode("texte") ;

2023-2024 COURS PROGRAMMATION WEB 192


appendChild

 Insère un élément comme étant le dernier enfant d’un élément


parent.

 Syntaxe :

elementParent.appendChild(elementEnfant);

2023-2024 COURS PROGRAMMATION WEB 193


appendChild
Page.html my_script.js

2023-2024 COURS PROGRAMMATION WEB 194


insertBefore

 Insère un élément avant un autre élément.

 Syntaxe : // insère elem1 avant elem2

parent.insertBefore(elem1, elem2);

2023-2024 COURS PROGRAMMATION WEB 195


insertBefore

2023-2024 COURS PROGRAMMATION WEB 196


removeChild

 Enlève un élément enfant d’un élément parent.


 Syntaxe :
parent.removeChild(enfant);

2023-2024 COURS PROGRAMMATION WEB 197


removeChild

2023-2024 COURS PROGRAMMATION WEB 198


Qu’est ce qu’un évènement?

Un évènement correspond à une action effectuée soit par


l’utilisateur, soit par le navigateur lui-même.
Exemples:
L'utilisateur pointe sur une image, clique sur un bouton.
 La page finit de se charger.
Une vidéo commence ou s'arrête.

2023-2024 COURS PROGRAMMATION WEB 199


Évènements : Exemples
Evènement Elément HTML concerné
click : clic du bouton gauche de la souris tout

mouseOver : passage du pointeur de la souris tout


mouseOut : Le pointeur de la souris quitte l’élément ; tout
load : chargement d’une page body
unload : fermeture d’une fenêtre ou chargement d’une autre page. body
select : sélection du texte input et textarea
change : modification du contenu input, select, textarea
submit : soummission d’un formulaire form

reset : annulation de la saisie form

focus : activation de l’élément d’un formulaire label,input,select,textarea et button

2023-2024 COURS PROGRAMMATION WEB 200


Gérer un évènement à l’aide du DOM

 Le DOM nous permet d’assigner des gestionnaires d’évènements


spécifiques à des éléments HTML en mettant en place un écouteur
d’évènement avec la méthode addEventListener.

2023-2024 COURS PROGRAMMATION WEB 201


Définir un gestionnaire d’évènement
 La méthode addEventListener a deux paramètres :
 Le nom de l’événement
 La fonction que vous voulez exécuter lorsque l'événement est
déclenché.

 Syntaxe :
Element.addEventListener( ‘nom_event’, nom_function);

2023-2024 COURS PROGRAMMATION WEB 202


Supprimer un gestionnaire d’évènement
 removeEventListener : méthode pour suppression d’un
gestionnaire d’évènement
 La méthode a les mêmes arguments que la méthode
addEventListener.
 Syntaxe:
Element.removeEventListener(‘nom_event’, nom_Function);

2023-2024 COURS PROGRAMMATION WEB 203


2023-2024 COURS PROGRAMMATION WEB 205

Vous aimerez peut-être aussi