CoursDevWebAvancé New P1234

Royaume du Maroc
Ministère de l'Enseignement Supérieur, de la Recherche Scientifique et de l’Innovation

Université Sultan Moulay Slimane
L’Ecole Supérieure de Technologie - Fkih Ben Salah (EST-FBS)
Plan
 Introduction au Web
 Langage HTML
 Langage CSS
 Langage JavaScript
 Langage PHP
 Frameworks Front‐End
 Frameworks Back‐End
 Projets à réaliser
2
Mode d’évaluation
 Travaux pratiques (10%)

 Projets (20%)
 Contrôle continu (20%)
 Examen (50%)
3
Introduction au Web
 Histoire du Web
 Principes de base du Web
 Rôles d'HTML, CSS, JavaScript et PHP
4
La naissance du web ?
5
La naissance du Wold Wide Web
Le web a été inventé en 1991 par Tim Berners-Lee au CERN (Genève),
un chercheur britannique, a inventé le Web au CERN en 1989. À l'origine, le
projet, baptisé « World Wide Web », a été conçu et développé pour que des
scientifiques travaillant dans des universités et instituts du monde entier
puissent s'échanger des informations instantanément.
6
Tim Berners-Lee
Succès rapide du web
 Le nombre de sites web et donc de serveurs web explose :
 10 000 serveurs en 1995
 100 000 serveurs en 1996
 9,5 millions de serveurs en 1999
 Plus de 50 millions aujourd’hui
7
Succès rapide du web en terme de
nombre de sites web par ans
8
Qui héberge les sites du monde entier ?
9
Les pays qui hébergent le plus les Data
centers ?
10
C’est quoi le web ?
11
Définition du web du point de vue de W3C
 Les technologies du Web doivent être interopérables
 le Web peut être considéré comme une collection de technologies
 aucune technologie ne peut prétendre parvenir à tous les besoins
 l’interopérabilité joue donc un rôle primordial !
 Le Web est universel, indépendamment :
 du langage
 des capacités de l’utilisateur
 de l’outil utilisé pour accéder au Web
 du lieu géographique
 ...
12
Quelle est la différence
entre Internet et le web
?
13
La relation entre le web et internet ?
Commençant par la définition
de l’internet.
 Internet est un réseau de réseaux informatiques
 Une machine connectée à un de ces réseaux est «
sur Internet »
 Elle est identifiée par une adresse IP, comme
212.65.87.234
 Elle peut communiquer avec n'importe quelle
autre machine connectée si elle connaît son
adresse IP
 Il y a un « annuaire » d'adresses IP, le DNS, qui
permet de donner un nom de domaine aux
machines (comme www.google.com,
www.facebook.com ou
14 www.amazone.com)
Commençant par la définition
de l’internet.
 Internet est un réseau de réseaux informatiques
 Une machine connectée à un de ces réseaux est « Dernièrement, une
nouvelle technologie
Ensurréalité,
Internet » le réseau qui s’ajoute au réseau
Internet
 repose
Elle est identifiée par sur une IP, comme
une adresse internet, c’est l’IoT
grande variété
212.65.87.234
d’infrastructures physiques
 Elle peut communiquer avec n'importe quelle
(câbles, antennes
autre machine connectéeet relais,
si elle connaît son
satellites,
adresse IP fibres…) par le biais
desquelles les données
 Il y a un « annuaire » d'adresses IP, le DNS, qui
transitent
permet de .donner un nom de domaine aux
machines (comme www.google.com,
www.facebook.com ou
15 www.amazone.com)
Communication entre les machines sur l’Internet :
Explication par les modèles OSI et TCP/IP
Le modèle OSI (en l'anglais: Open Systems

Interconnection) est une norme de
communication de tous les systèmes
informatiques en réseau. C'est un modèle de
communications entre ordinateurs proposé
par l'ISO (Organisation internationale de
normalisation) qui décrit les fonctionnalités
nécessaires à la communication et
l'organisation de ces fonctions.
16
2) Le modèle OSI permet aux fabricants de

créer leurs propres protocoles et normes
d'équipement tout en permettant
l'interconnexion avec d'autres fabricants.
17
3) Un autre avantage du modèle OSI qu’il

est facile à dépanner. Lorsqu'un
composant du réseau tombe en panne ou
qu'une application ne communique pas
avec le réseau, le modèle OSI aide les
administrateurs à déterminer la couche et
le composant défaillants.
18
2)
4) Le
La modèle OSI permet
normalisation de laaux fabricants de
technologie
créer
moderneleursfacilite
propres la protocoles
construction,et normes
la
d'équipement
fabrication, letout en permettant
dépannage et la conception
l'interconnexion avec d'autres
de nouvelles technologies fabricants.
à l'avenir.
19
Couches hôtes
matérielles
Couches
20
Le modèle OSI: Fonction/Couche
Modèle OSI
Couche Fonction
7 Application Point d'accès aux services réseau
Gère le chiffrement et le déchiffrement des données,
6 Présentation convertit les données machine en données
exploitables par n'importe quelle autre machine
Couches
hautes 5 Session
Communication Interhost, gère les sessions entre les
différentes applications
Connexion de bout en bout, connectabilité
4 Transport
et contrôle de flux ; notion de port (TCP et UDP)
Détermine le parcours des données et l'adressage
3 Réseau
logique (adresse IP)
Couches
2 Liaison Adressage physique (adresse MAC)
matérielles
Transmission des signaux sous forme numérique ou
21 1 Physique
analogique
Le modèle OSI: Quelques protocoles
7 Couche application
AMQP • BGP • BitTorrent • CANopen • CLNP • DHCP • DNS • FTP • FTPS • FXP • Gopher •
HTTP • HTTPS • IMAP • IPFS • IPP • IRC • IS-IS • LDAP • LMTP •
Modbus • MQTT • NFS • NNTP • NTP • POP3 • RDP • RELP • RFB • RPC • RTP • RTSP • SFT
P • SILC • SIMPLE • SIP • SMB • SMTP • SNMP • SOAP • SSH •
STOMP •TACACS • TACACS+ •TCAP •Telnet • TFTP •VoIP •WebDAV • XCAP • XMPP • µTP
• Web •WebSocket
6 Couche de présentation
AFP • ASCII • ASN.1 • CSS • HTML • NCP • SSP • TDI
• MIME • SSL •TLS • Unicode • UUCP •Videotex • XDR • XML • JSON
5 Couche de session
AppleTalk • NetBios • RPC
4 Couche de transport
22 DCCP • SCTP • SPX • TCP • UDP
Le modèle OSI: Quelques protocoles
3 Couche de réseau
ARP • DHCP (en tant que service)
• EIGRP • ICMP • IGMP • IP • Ipv4 • Ipv6 • IPX • NetBEUI • RIP • OSPF •WDS
2 Couche de liaison de données
Anneau à jeton • ATM • BitNet • CAN • Ethernet • FDDI • Frame
Relay • HDLC • LocalTalk • MPLS "2,5" • PPP • PPPoE • SPB • X.21 • X.25
1 Couche physique
1000BASE-T • 100BASE-TX • 10BASE-T • 10BASE2 • 10BASE5 • ADSL • Bluetooth • Câble

coaxial • Codage Manchester • Codage Miller
• Codage NRZ • CSMA/CA • CSMA/CD • DSSS • EIA-422 • EIA-
485 • FHSS • HomeRF • IEEE 1394 (FireWire) • IrDA
• Paire torsadée • PDH • RNIS • RS-232 • RS-449 • SDH • SDSL • SONET • T-
carrier •Thunderbolt • USB •V.21-V.23 •V.42-V.90 •VDSL •VDSL2 • Wi-Fi •Wireless USB
23
Segmentation des données avant leur navigation sur
Internet dans le cas du modèle OSI:
24
Segmentation des données avant leur navigation sur
Internet dans le cas du modèle OSI:
Dans un réseau, l’information qui
circule est découpée en unités
élémentaires appelées paquets. Il
s’agit d’une suite d’octets
suffisamment courte pour pouvoir
être communiquée sous forme
numérique et sans erreur sur un
câble de communication ou tout
autre type de liaison numérique
(radio par exemple).
25
Echange de communication sur un réseau entre deux
machines dans le cas du modèle OSI:
26
Modèle TCP/IP (Ancien modèle): Echange de
communication sur un réseau entre deux machines
27
Modèle TCP/IP (Nouveau modèle): Principe de
fonctionnement
Le modèle TCP/IP existe sous deux versions : L’ancienne et la nouvelle. Nous
allons parler uniquement de la nouvelle version:
28
fonctionnement
Le modèle OSI et le modèle TCP/IP ont le même principe de fonctionnement.
Bounou veut envoyer un message à Boufal.
Étape 1 : Bounou fragmente la donnée.
Étape 2 : Chaque fragment de donnée va passer par chaque couche du modèle
TCP/IP.
 La couche APPLICATION ajoute des informations à la donnée.
 La couche TRANSPORT ajoute des informations à la donnée afin de créer
un SEGMENT.
 La couche RÉSEAU ajoute des informations à la donnée afin de créer un
PAQUET.
 La couche LIAISON ajoute des informations à la donnée afin de créer une
TRAME.
 La couche PHYSIQUE adapte l’information au support de transmission.
29
fonctionnement (suite)
30
Modèle TCP/IP: Principe de fonctionnement (suite)
Scenario 1:
Utilisateur Utilisateur
sur sur
Réseau 1 Réseau 1
31
Scenario 1: La couche 2 (Liaison) possède deux sous-couches : la
sous-couche LLC la sous-couche MAC
Qui utilise les données de la couche 2 ?
Les switchs.
Que trouve-t-on comme informations dans la couche
2?
L’adresse MAC du prochain équipement et l’adresse
MAC de l’équipement précédent. Une adresse MAC
(Media Access Control) est l’adresse physique de votre
carte réseau. Elle est unique au monde. Votre ordinateur
possède une carte réseau ainsi qu’une carte WiFi.
Chacune de ces cartes possède une adresse MAC.
À quoi va servir cette adresse ?
Elle va servir à communiquer sur un petit réseau. Cette
adresse reste en local et ne circulera jamais sur Internet.
Unité : Trames.
32
Scenario 2:
Utilisateur Utilisateur
sur sur
Réseau 1 Réseau 2
33
Scenario 2: Qui utilise les données de la couche 3 ?
Les routeurs (Les routeurs regarde jusqu’à la couche 3
du modèle TCP/IP. Cela ne lui sert à rien de monter plus
haut en termes de couche).
Que trouve-t-on comme informations dans la couche

3?
Les adresses IP de notre émetteur et de notre
destinataire. La couche réseau permet de livrer un
paquet au travers d’un réseau.
Unité : Paquet.
34
Donc, quelle est la
différence entre le modèle
OSI et le modèle TCP/IP ?
35
La différence entre le modèle OSI et le
modèle TCP/IP.
Le modèle OSI a été le premier modèle standard de protocoles Internet
pour la communication sur un réseau. OSI utilise un modèle à sept couches
pour visualiser la communication entre les périphériques réseau, plutôt que
le modèle simplifié à cinq couches de TCP/IP. Cependant, les couches de
modèles TCP/IP et OSI sont similaires. Les couches du modèle OSI sont les
suivantes :
 Couche d'application
 Couche de présentation
 Couche de session
 Couche de transport
 Couche réseau
 Couche de liaison de données
36  Couche physique
modèle TCP/IP.
Bien que l'Internet moderne soit basé sur le modèle TCP/IP, le modèle OSI
reste un moyen utile pour visualiser et comprendre le fonctionnement des
réseaux.
Chacune des couches TCP/IP correspond essentiellement à la fonction des
couches du modèle OSI. La couche application de TCP/IP remplit les
fonctions des couches application, présentation et session du modèle OSI.
Les autres correspondent en fonction de leurs noms : couche réseau à
couche réseau, couche transport à couche transport, etc.
Cependant, même s’ils présentent de nombreuses similitudes, les deux
modèles présentent également de nombreuses différences. Par exemple, le
modèle TCP/IP est plus fiable que le modèle OSI et n’a pas de limites de
communication très strictes. Le modèle OSI, en revanche, le fait.
37
modèle TCP/IP.
TCP/IP est né de la création des protocoles eux-mêmes, puis de la création
d'un modèle pour les expliquer. OSI s'est développé dans l'ordre inverse –
un modèle suivi de protocoles pour s'adapter au modèle. Cela le rend moins
polyvalent et plus rigide structurellement. Pour cette raison, la plupart
des utilisateurs privilégient TCP/IP et le considèrent comme la
base de la communication réseau pour l’Internet moderne.
38
La cartographie du réseau internet :
En pansant au concept du
"Cloud", on image qu'internet
vient des nuages, mais la
réalité c'est une immense toile
de câbles (ce n'est pas pour
rien qu'on appelle ça le "Web")
qui parcourent toute notre jolie
planète.
39
Quelques services internet et leur protocoles:
40
Qui est ce que internet
exactement ? Est-ce que
internet est un réseau de
type WAN ?
Avant cela on doit savoir qui est
ce qu’un réseau WAN ?
41
Qui est ce qu’un réseau WAN ?
42
Maintenant, on a une idée
sur le réseau internet,
Qu’est ce que exactement le
web ?
43
Définition du Web
Le web est un système de documents
hypertextes (liés entre eux)
fonctionnant sur l'Internet de façon
décentralisée
Mis au point par Tim Berners-Lee
(CERN) entre 1989 et 1991.
Il est constitué de trois éléments fondamentaux :
• un système d'identificateurs uniques pour les documents (URL)
 un langage de balisage pour les documents (HTML)
 un protocole de transfert de documents (HTTP)
44
Principes de base du Web
Scenario d’un utilisateur qui tente de se connecter
sur le web
1) Par exemple, Bounou est sur le web. Il clique sur un lien vers le site officiel de la Fédération
royale marocaine de football.
2) Le navigateur analyse l'URL et voit que la machine qui connaît le contenu de cette page (le
serveur web) s'appelle https://frmf.ma. Il demande l'adresse IP de cette machine à un serveur
DNS, qui lui répond 240.186.30.9.
3) Il envoie un message HTTP à cette machine pour lui demander le contenu de la page:
https://frmf.ma/fr/u20/actualites/
4) La machine lui envoie un message HTTP en réponse, qui contient le contenu de la page. Ce
contenu est écrit dans le langage HTML.
5) Le navigateur de Bounou analyse le HTML pour mettre la page en forme, et

affiche le résultat. 2 3
1
45 4
5
Principe de fonctionnement d’un serveur DNS
Le rôle du Domain Name System (serveur de noms de domaine) est d’associer une adresse
IP à un nom d’hôte. C’est effectivement plus simple de retenir un nom comme www.google.fr
qu’une adresse IP du type 8.98.125.200. C’est comme un annuaire téléphonique qui associe
un numéro de téléphone à une personne.
Structure DNS :
La structure DNS est celle d’un arbre avec des branches :
La racine constituée de 13 serveurs racines possédant les listes de l’ensemble des serveurs
Top Level Domain (TLD).
Ces 13 serveurs racines sont répartis dans le monde, les données sont répliquées. 20 000
demandes DNS par secondes.
Les branches primaires (1er niveau) composées des serveurs Top Level Domain (TLD)
possèdent la liste des serveurs DNS ayant autorité sur un domaine contenant l’extension
qu’il gère. Les domaines primaires sont définis par l’ICANN.
Les domaines sont par exemple arpa, org, net, edu, com, fr, uk.
Les branches secondaires (2éme niveau) constituées des serveurs d’autorités sont des
serveurs DNS qui héberge les noms de domaines comme par exemple free.
46
Ci-dessous, le schéma montrant l’arbre DNS et les zones
47
Les serveurs racines :
Ils sont identifiés par les lettres de A à M et appartiennent tous au même domaine ROOT-
SERVERS.NET.
Le serveur d'origine est géré par VeriSign Global Registry Services (A.ROOT-
SERVERS.NET).
Les autres serveurs en sont des serveurs miroirs et sont administrés par les institutions
suivantes :
 B.ROOT-SERVERS.NET : Information Sciences Institute USC (USA)
 C.ROOT-SERVERS.NET : PSINet
 D.ROOT-SERVERS.NET : University of Maryland (USA)
 E.ROOT-SERVERS.NET : NASA Ames Research Center (USA)
 F.ROOT-SERVERS.NET : Internet Software Consortium (USA)
 G.ROOT-SERVERS.NET : U.S. DOD Network Information Center (USA)
 H.ROOT-SERVERS.NET : U.S. Army Research Lab (USA)
 I.ROOT-SERVERS.NET : NordU (Suède)
 J.ROOT-SERVERS.NET : VeriSign Global Registry Services (USA)
 K.ROOT-SERVERS.NET : RIPE NCC (UK, Europe)
 L.ROOT-SERVERS.NET : ICANN (USA)
48  M.ROOT-SERVERS.NET : WIDE Project (Japon)
Les serveurs racines :
Ci dessous, la carte des serveurs racines :
49
Fonctionnement d'une requête DNS :
Le navigateur du poste client veut accéder au site mail.oktey.fr :
1 : Le client envoie la requête au serveur DNS local (DNS de la box ou du réseau).
Le serveur DNS local ne connait pas l’adresse IP pour accéder à mail.oktey.fr (pas dans le cache).
2 : Le serveur DNS local demande à l’un des serveurs DNS racine l’adresse IP du serveur Top
Level Domain (TLD) gérant l’extension .fr.
Le serveur DNS racine lui retourne l’adresse IP du serveur Top Level Domain (TLD) gérant
l’extension .fr.
3 : Le serveur DNS local demande au serveur Top Level Domain gérant l’extension .fr d’indiquer le
serveur d’autorité gérant la zone oktey.fr.
Le serveur Top Level Domain transmet au serveur DNS local l’adresse IP du serveur d’autorité
gérant la zone oktey.fr.
4 : Le serveur DNS local demande au serveur d’autorité de la zone oktey.fr de lui transmettre
l’adresse IP du serveur mail.oktey.fr.
Le serveur d’autorité de la zone lui transmet l’adresse IP pour accéder au serveur demandé.
Maintenant le serveur DNS local établit la connexion pour le navigateur internet du poste client.
Le serveur DNS local met à jour son cache afin de conserver l’adresse IP du serveurmail.oktey.fr.
50
Lors de prochaine demande pour ce serveur la connexion sera directement établie.
Fonctionnement d'une requête DNS :
Maintenant le serveur DNS local établit la connexion pour le navigateur internet du poste client.
Le serveur DNS local met à jour son cache afin de conserver l’adresse IP du serveurmail.oktey.fr.
Lors de prochaine demande pour ce serveur la connexion sera directement établie.
Le schéma d'une requête

DNS :
51
Principe en générale
Plus formellement : le web est une application client-serveur.
• N'importe quelle machine connectée à Internet peut être un serveur

web :
a. elle écoute sur son port 80
b. elle interprète les requêtes HTTP reçues
c. elle renvoie les réponses HTTP, contenant du HTML, au
demandeur
• Un client est un navigateur web (comme Firefox ou Chrome) :
a. il envoie des requêtes HTTP aux serveurs
b. il interprète le HTML reçu en réponse et met en forme le
document
• Les pages HTML contiennent des liens unidirectionnels vers d'autres
pages, pas forcément sur le même serveur, identifiées par une URL.
52
• Lors d'un clic sur un lien, le navigateur web effectue la requête HTTP
correspondant à l'URL.
Le Protocol HTTP
• HyperText Transfer Protocol ; c'est le langage que parlent le
serveur web et le navigateur web pour se communiquer les
pages
• Élément le plus fondamental du web, et aussi le plus caché
pour le grand public
• Pas complètement cependant :
a. son nom apparaît au début des URL (mais les
navigateurs actuels ne l'affichent plus)
b. les célèbres cookies sont un élément du protocole
c. certains codes de statut sont bien connus… (erreur
404)
• HTTPS est la version sécurisée de HTTP : les messages sont
chiffrés, et donc illisibles pour quiconque les intercepterait entre
le client et le serveur.
53
La requête HTTP
• Structure d'une requête HTTP :
a. Une ligne de requête avec une commande
(request method), un chemin et la version du
protocole
b. Plusieurs lignes de champs d'en-tête
c. Une ligne vide
d. Le corps du message (optionnel)
• Commandes : GET, POST, HEAD, PUT, DELETE…
• Champs d'en-tête : Host, User-Agent, Accept… seul
Host est obligatoire.
54
La requête HTTP (suite)
Liste des methods :
HTTP est un protocole très évolutif et de nouvelles méthodes pourront être
ajoutées dans le futur sans limitation.
Les méthodes disponibles à l’heure actuelle sont les suivantes :
 GET permet de demander une ressource sans la modifier ;
 POST permet de transmettre des données dans le but de manipuler une
ressource ;
 PUT permet de remplacer ou d’ajouter une ressource sur le serveur ;
 DELETE permet de supprimer une ressource du serveur ;
 HEAD permet de demander des informations sur la ressource sans
demander la ressource elle-même ;
 PATCH permet de modifier partiellement une ressource ;
 OPTIONS permet d’obtenir les options de communication d’une ressource
ou du serveur ;
 CONNECT permet d’utiliser un proxy comme un tunnel de communication ;
 TRACE permet de tester et d’effectuer un diagnostic de la connexion et
55 demandant au serveur de retourner la requête reçue.
Exemple: (structure de la requête HTTP)
Une requête HTTP est composée d’une ligne initiale suivie éventuellement d’en-
têtes HTTP suivis d’une ligne vierge suivie éventuellement d’un corps de requête.
 La méthode de requête utilisée qui sert à indiquer le type de requête effectuée : simple
récupération de ressources, envoi de données sur le serveur, etc. ;
 La cible de la requête (si applicable) qui va généralement prendre la forme d’une URL ou
d’un chemin absolu ;
56  La version HTTP utilisée pour la requête (qui sert également à indiquer la version
attendue pour la réponse).
Exemple (suite): (structure de la requête HTTP)
Sous cette ligne de départ, un ou plusieurs en-têtes HTTP peuvent être ajoutés.
Ces en-têtes permettent de préciser la requête ou d’ajouter des informations de
contexte. Les en-têtes vont par exemple nous servir à indiquer la langue préférée
pour une ressource demandée, à indiquer comment la connexion avec le serveur
doit être établie, le type et le poids du corps de requête, etc.
Il existe de très nombreux en-têtes HTTP différents. Dans un message HTTP,

chaque en-tête doit être décrit sur une ligne.
Par exemple, la plupart des requêtes GET (permettant de récupérer des

ressources) n’ont pas besoin d’ajouter un corps. En revanche, des requêtes
comme POST qui servent à envoyer des informations au serveur vont transmettre
ces informations dans le corps de la requête.
Note : depuis HTTP/2, les données sont encodées en binaire et ne sont donc
plus lisibles pour un humain.
57
La réponse HTTP
• Structure d'une réponse HTTP :
a. Une ligne Une ligne de statut avec le status code et
un petit message explicatif
b. Plusieurs lignes de champs de réponse
c. Une ligne vide
d. Le corps du message (optionnel), typiquement le
code HTML de la page
• Codes : 200 (OK), 404 (not found), 500 (internal server
error)…
• Champs de réponse : Content-type, Last-Modified,
Location…
58
Exemple: (structure de la réponse HTTP)
Les réponses HTTP sont également composées d’une ligne de départ (qu’on appelle également
ligne de statut), d’éventuels en-têtes HTTP, d’une ligne vierge et d’une éventuel corps de
réponse..
 La ligne de statut est composée de la version du protocole, d’un code de statut HTTP
indiquant l’état de complétion de la requête, son succès ou son échec et d’un court texte
descriptif lié au code de statut.
 Les en-têtes HTTP permettent à nouveau d’ajouter des informations de contexte et de
59 préciser la réponse comme la date d’envoi de la réponse, des informations relatives au
serveur, des informations relatives à la connexion ou encore la mise en place de cookies.
Exemple (suite): (structure de la réponse HTTP)
 Finalement, la dernière partie d’une réponse HTTP et le corps et là non plus toutes les
réponses n’en ont pas. Le corps d’une réponse HTTP va permettre par exemple de
transmettre la ressource demandée par la requête HTTP.
Liste des codes de statut des réponses HTTP
Les codes de statut HTTP permettent de fournir des informations quant à la
complétion (succès) ou la non-complétion (échec) d’une requête. Les statut
code HTTP sont très utiles pour le débogage dans le cas où la requête
n’aurait pas abouti et peuvent également être utilisés pour économiser des
ressources.
Les codes de statut HTTP se décomposent en 5 grandes familles :
•Un code 1xx indique une réponse provisoire (non implémenté avec
HTTP/1.0) ;
•Un code 2xx (200, 201, 202, 204) indique que la requête a été traitée avec
succès ;
•Un code 3xx(300, 301, 302, 304) indique que la requête doit être redirigée ;
•Un code 4xx (400, 401, 403, 404) indique une erreur côté client ;
60
•Un code 5xx (500, 501, 502, 503) indique une erreur côté serveur.
La requête HTTP (suite)
Liste des methods :
HTTP est un protocole très évolutif et de nouvelles méthodes pourront être
ajoutées dans le futur sans limitation.
Les méthodes disponibles à l’heure actuelle sont les suivantes :
 GET permet de demander une ressource sans la modifier ;
 POST permet de transmettre des données dans le but de manipuler une
ressource ;
 PUT permet de remplacer ou d’ajouter une ressource sur le serveur ;
 DELETE permet de supprimer une ressource du serveur ;
 HEAD permet de demander des informations sur la ressource sans
demander la ressource elle-même ;
 PATCH permet de modifier partiellement une ressource ;
 OPTIONS permet d’obtenir les options de communication d’une ressource
ou du serveur ;
 CONNECT permet d’utiliser un proxy comme un tunnel de communication ;
 TRACE permet de tester et d’effectuer un diagnostic de la connexion et
61 demandant au serveur de retourner la requête reçue.
URL
• Uniform Resource Locator : adresse d'une ressource. Sur le
web, c'est généralement une page.
• Une URL contient toutes les informations nécessaires pour

récupérer la ressource. Exemple :
https://frmf.ma/fr/u20/actualites/
• le protocole (http:// ou https:// pour des pages web,
file:// pour un fichier local…)
• le nom de domaine du serveur (ici https://frmf.ma) et la
« machine » est: frmf du domaine frmf.ma (Les serveurs
web s'appellent souvent www pour des raisons historiques)
• le chemin vers le fichier auquel on accède (ici
https://frmf.ma/fr/u20/actualites).
62
HTML
• HyperText Markup Language, « langage de balisage
hypertexte » : c'est le langage dans lequel les pages web
sont écrites
• Simplement du texte avec des balises : des caractères
spéciaux qui indiquent la sémantique (le sens) des
éléments du contenu:
a. structure de la page : blocs, titres…
b. forme du texte : mots importants, paragraphes,
listes…
c. contenu non textuel : liens, images…
• Le HTML est interprété différemment suivant le type de
client (user agent).
63
Evolution des technologie du web
HTML+ Autres technologies
64
Evolution des technologie du web
HTML + Autres technologies
• Les technologies permettant de créer un site web ont évolué et se
sont multipliées :
• Avant : langage HTML seul
• Aujourd’hui :
1. HTML + CSS = site statique
2. CSS ou Cascading Style Sheets (CSS) est un langage de
feuille de style utilisé afin de décrire la présentation d'un
document écrit en HTML
3. XHTML est donc du HTML conforme à XML « L'évolution de
HTML 4.0 en XHTML 1.0 »
4. PHP est un langage de script à usage général, il est le plus
largement utilisé pour le développement du web.
5. JavaScript est un langage de script utilisé sur le Web pour
rendre les pages interactives.
6. MySQL est un SGBDR.
65 7. JavaScript + HTML+ XML+ PHP, MySQL =site dynamique
Introduction au Langage HTML
 HTML C'est quoi?  Paragraphes, conteneurs (ou

 Comment écrire une page HTML? containers) et listes
 Balises, attributs et caractères  Images et liens hypertextes
spéciaux  Les tableaux
 Balises de base  Les formulaires
 Balises de formatage du texte
66
Le langage HTML c’est quoi ?
 HTML (HyperText Markup Language) est un langage de description (dit de
marquage) de pages Web. Il permet de présenter les documents hypertextes destinés à
être affichés sur le navigateur. Il s'agit d'un langage côté client (tout comme CSS et
Javascript). Il est supporté et développé par W3C*.
 L'origine du HTML remonte au début du Web. En effet, il a été inventé vers les
années 1989 afin qu'il puisse présenter les documents qui circulent sur la toile et
établir des liens entre eux à travers les liens hypertextes (ou hyperliens).
Versions du langage
 En 1989 HTML1.0 est apparu, il se basait sur les spécifications du standard SGML
(Standard Generalized Markup Language) qui est aussi un langage de description à
balises. Puis HTML2.0 a vu le jour en 1995. En 1997, HTML3 puis HTML4 sont
apparus.
 HTML4 est la version du langage la plus populaire, elle est toujours supportée de nos
jours malgré l’apparition du standard HTML5.
67 * Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation chargé de promouvoir
la compatibilité des technologies du World Wide Web telles que HTML5, HTML, XHTML, XML, RDF, SPARQL, CSS, PNG...
Comment écrire une page en HTML
Les outils dont vous aurez besoin
 Pour bien maîtriser le langage HTML, il faut pratiquer. Il vous faudra donc un éditeur
de code et un navigateur pour tester ce que vous avez codé.
 Il existe des éditeurs WYSIWYG (pour WhatYou See Is WhatYou Get) qui permettent
de construire facilement un document HTML sans avoir besoin de connaitre la
syntaxe.
Mais pour devenir un bon développeur il faut essayer d'écrire le code source par soi
même.
 Je vous recommande donc de vous servir d'un éditeur texte. Personnellement je
préfère Notepad++. (Sublime) N’importe quel navigateur fera l’affaire. De
préférence utiliser chrome.
68
Langage HTML
 Une page HTML est un fichier texte (après tout, le code HTML est du texte) avec
l'extension .html ou .htm. Il n'y a absolument aucune différence entre les deux
extensions. La première est l'extension normale alors que la deuxième est plus courte
et aussi plus adaptées aux anciens systèmes d'exploitation qui comprenaient seulement
les extensions en 3 caractères.
 Les fichiers HTML sont déposés dans un serveur de fichiers. Il ne nécessite donc
aucune exécution par le serveur car HTML est un langage côté client. Par conséquent,
quand vous créez votre fichier HTML, il n'y a aucun problème à le mettre n'importe
où dans votre ordinateur (au bureau par exemple) car c'est le navigateur qui
l’exécutera après ouverture.
 Les développeurs ont pour cotume de nommer la page d'accueil de leur site Web
"index", est puisque c'est un document HTML alors son nom complet sera
"index.html". Essayez de faire de même.
69
Langage HTML
 Un document HTML contient du texte, mais vous avez certainement remarqué la
présence des symboles < et >. Ces deux chevrons (ouvrant et fermant) avec le mot
qu'ils contiennent constituent ce que l'on appelle une balise.
 Un document HTML est structuré sous forme de balises, chaque balise a un sens que
le navigateur comprend et exécute pour que le document soit présenté tel que les
balises le dictent.
Exemple:
70
Langage HTML
Manipulation des balises dans une page HTML
 Les balises constituent l'élément de base du langage HTML. Chaque balise a une
signification que le navigateur connait et applique au contenu. C'est comme ça que la
présentation du document est effectuée.
 Une balise est représentée par: le chevron ouvrant + le nom de la balise + le
chevron fermant. Exemple <b> ou <body>.
 Il existe deux types de balises: des balises ouvrantes et des balises fermantes. Elles
vont souvent ensemble de telle sorte que la balise ouvrante applique un effet au
contenu qui la suit et la balise fermante cesse l'effet en question. La balise fermante se
distingue par un slash (/) qui vient juste avant le nom de la balise. Exemple </b> est
la balise fermante de <b> et </body> est la balise fermante de <body>.
 Néanmoins, il existe des balises ouvrantes qui n'ont pas de balises fermantes associées.
On les appelle des balises auto fermantes ou des balises orphelines. Ce sont des
balises qui s'ouvrent et se ferment au même moment et elles appliquent leur effet à
l'endroit où elles sont déclarées (et pas au contenu qui les suit comme les balises qu'on
71
a vu ci haut). Exemple: <br>. ( Saut de ligne)
Langage HTML
Imbrication des balises
Un contenu peut subir l'effet de plusieurs balises à la fois. Si c'est le cas, alors une règle
s'impose: En cas d'imbrication de plusieurs balises, la première balise ouverte est la dernière
à fermer. Il faut donc fermer les balises dans l’ordre inverse de leur ouverture.
Le code ressemblera à ceci:
<balise1>
<balise2>
<balise3>Contenu</balise3>
</balise2>
</balise1>
Exemple:
72
Langage HTML
Imbrication des balises
Les attributs
La plupart des balises HTML peuvent appliquer des effets différents selon les préférences du
développeur. C'est comme si on peut les personnaliser à notre guise. C'est là où les attributs
interviennent.
Les attributs sont déclarés dans la balise ouvrante. Ils représentent des paramètres qui
personnalisent la balise où ils sont définis et ils possèdent des valeurs. Une balise peut
renfermer plusieurs attributs à la fois, chacun avec sa valeur.
Exemple:
<balise attribut1="valeur1" attribut2="valeur2"

attribut3="valeur3"...>
Contenu
</balise>
73
Langage HTML
Pour que l'écriture du code HTML soit correcte il faut vérifier les points suivants:
 Il ne doit pas y avoir d'espace entre le chevron d'ouverture et le nom de la balise
 Il doit impérativement y avoir un espace (ou plus) entre le nom de la balise et
l'attribut
 Il doit impérativement y avoir un espace (ou plus) entre les attributs successifs
 La valeur de l'attribut doit être déclarée entre des guillemets (doubles quote ou
simple quote). Cependant les navigateur peuvent tolérer l’absence des guillemets,
mais votre code reste invalide du point de vue de W3C(*).
Exemple:
74
Langage HTML
Les caractères spéciaux
 HTML est constitué principalement de balises. Mais ce n'est pas tout car il y a des
séquences, autres que les balises, que le navigateur reconnait et remplace par leurs
significations. On appelle ces séquences: caractères spéciaux.
 Le code HTML des caractères spéciaux commence par le symbole "&" et fini par ";".
Par exemple © signifie "©".
Exemple:
75
Langage HTML
Les balises de bases
Les trois balises HTML minimales sont: <html>, <head> et <body>.
Balise <html>
 La balise <html> est la balise de premier niveau. Elle renferme tout le contenu de la page
Web. Elle est déclarée au début du document. La balise fermante </html> vient clôturer
le document en la déclarant à la fin.
Balise <head>
 La balise <head> représente l'entête du document. Elle contient des données
supplémentaires qui ne sont pas nécessairement affichées sur le navigateur, mais elle
peuvent fournir des informations complémentaires à l’exécution de la page par celui-ci, ou
des informations utiles aux outils de recherche en vu de référencement.
 Une des balises les plus utilisées dans la balise <head> est la balise <title>. Cette balise
indique le titre du document. Celui-ci sera affiché sur la barre de titre du navigateur. C'est
une balise qui doit être fermée pour indiquer la fin du titre.
76 On trouve aussi la balise <meta> qui fournit des informations supplémentaires sur le
contenu.
Langage HTML
Balise <body>
 C'est la plus importante parmi les balises vues précédemment. En effet, la balise <body>
renferme le contenu du corps. C'est ce qui sera réellement visible sur le navigateur par
les internautes.
 La balise <body> doit aussi être fermée pour indiquer la fin du corps du document. Elle
peut contenir des attributs, mais la plupart d'ente elles ne sont pas compatibles.
 Cependant <body> peut contenir un attribut plus au moins utilisé, il s'agit de bgcolor
qui permet de colorer l'arrière-plan de la page Web en entier. La balise est donc déclarée
ainsi:
<body bgcolor="orange"></body>
 La couleur d'arrière plan sera donc orange. Il suffit de mentionner le nom de la couleur
en anglais pour que celle ci soit reconnue en HTML. Cependant il existe une manière
77 plus efficace pour déclarer les couleurs qu'on va voir après.
Langage HTML
Balise <body>
 <body bgcolor="orange"></body>
78
Langage HTML
Exemple:
79
Langage HTML
Balises de formatage
Balises de formatage sans attributs:
Exemple:
80
Langage HTML
Exemple:
81
Langage HTML
Exemple:
82
Langage HTML
Exemple:
83
Langage HTML
Exemple:
84
Langage HTML
Balises <h1>, <h2>...<h6>
La balise <h1> (heading) désigne un titre de premier niveau. Le texte qu'elle entoure est de
grande taille et mis en gras. Il est utile pour créer les grands titres d'une pages. La balise <h2>
désigne un titre de deuxième niveau, elle applique le même effet que la balise précédente mais avec
une taille de caractères légèrement plus petite. C'est pratique pour les sous-titres. Il existe aussi
<h3>, <h4>, <h5> et <h6> avec une taille de caractères de plus en plus petite.
Exemple:
85
Langage HTML
86
Langage HTML
Exemple:
87
Langage HTML
Commentaire HTML 
Un commentaire HTML est déclaré comme ceci: . Il est visible
dans le code source mais ignoré par le navigateur. Il sert à marquer un bloc de code pour
que celui-ci soit facilement trouvé et compris lors de sa prochaine manipulation.
Exemple:
88
Langage HTML
Balise <pre>
Nous avons vu précédemment que pour intégrer un retour à la ligne il faut déclarer la
balise<br>, et pour mettre plusieurs espaces ou tabulations il faut passer par le caractère
spécial . Cependant, il existe une méthode très simple pour afficher un contenu
tel qu'il a été édité dans le code. C'est à dire, si vous mettez une tabulation dans le code,
celle ci sera automatiquement reprise dans le navigateur, et si vous sautez une ligne, ce
saut de ligne sera aussi visible sur le navigateur. La solution magique s'appelle la
balise<pre>.
Exemple:
89
Langage HTML
Balises de formatage avec attributs:
Avec la même balise on peut réussir plusieurs effets différents. C'est grâce aux attributs
que celle ci renferme. Une des balises les plus populaires de HTML est la balise <font>.
Balise <font>
La balise de formatage de texte la plus connue est sans doute la fameuse
<font>. Elle doit sa notoriété aux effets qu'elle peut apporter aux textes
qu'elle inclue.
La balise <font> dispose de trois attributs principaux qui permettent
d'appliquer des effets non négligeables aux textes. Ces trois attributs sont:
face, size, et color.
90
Langage HTML
Balise <font>
L'attribut face:
L'attribut face permet de spécifier la police à utiliser pour afficher le
texte inclus dans la balise <font>. Par défaut c'est la police "Times New
Roman" qui est appliquée par la plupart des navigateurs si aucune police
n'est spécifiée. "Times New Roman" est une police de la famille "Sérif" et
elle n'est pas très adaptée aux pages Web. Cependant d'autres polices
pourront bien faire l'affaire comme "verdana" ou "arial" qui sont assez
populaires et sont supportés par de nombreux systèmes d'exploitation.
91
Langage HTML
Balise <font>
L'attribut size:
 L'attribut size change la taille du texte. Par défaut le navigateur applique la taille 12
points (écrit 12pt) aux polices, sauf quelques exceptions comme "Netscape
Navigator" qui applique par défaut la taille 10pt. (Le point est l'unité de mesure des
polices.
 HTML ne supporte (malheureusement) que 7 tailles de police seulement, elle sont
déclarées par des indices allant de 1 à 7. Le tableau suivant détaille la valeur de
chaque indice:
92
Langage HTML
Balise <font>
L'attribut color:
 Dans un texte, il n'y a pas que la police et la taille, il y a aussi la couleur.
L'attribut color sert à appliquer une couleur au texte entouré par la
balise <font>. La méthode la plus simple pour définir une couleur
c'est par son nom anglais (red pour rouge, yellow pour jaune...).
 Un problème surgit aussitôt à la surface. Combien de couleurs peut on
définir de cette manière? sans doute pas beaucoup (un peu plus de 100
couleurs). Cependant un écran peut afficher environ 16 millions de
couleurs. Pour couvrir toutes ces nuances, la seule solution consiste à
utiliser les codes des couleurs.
93
Langage HTML
Balise <font>
Choix des couleurs en HTML (codes des couleurs)
 Pour qu'un écran affiche une image en couleur, il combine 3 couleurs
dites primaires. Ces couleurs sont Rouge, Vert et Bleu. On parle
alors de la base RVB (RGB en anglais). Le fait de mélanger ces trois
couleurs à des proportions différentes donne naissance aux 16 millions
de couleurs dont on a parlé au paragraphe précédent.
 Techniquement, chaque couleur primaire est codée sur un octet (8
bits).Les trois couleurs sont donc codées sur 24 bits et du coup on peut
avoir jusqu'à 16777216 couleurs.
94
Langage HTML
 Exemple avec la Balise: <font>
 :
1
2
95
Langage HTML
 Exemple avec les balises: <html>,<head>, <body>, <u>,<b>,<i> et
<s> 1
 :
96
Langage HTML
Les paragraphes
 Nous avons vu l’intérêt de la balise <br> qui sert à sauter la ligne à n'importe quel
moment au milieu d'un contenu HTML. Déjà avec cette balise on peut dire qu'on
arrive à séparer les paragraphes entre elles. Mais il existe une balise plus adapté à cet
usage. Il s'agit de <p>.
Balise <p>
 La balise <p> est une balise de type block, c'est à dire qu'elle crée un bloc et
engendre automatiquement un retour à la ligne. Elle sert à définir un paragraphe. On
peut la doter de l'attribut align qui permet d'aligner, à sa guise, le contenu du
paragraphe. Les différentes valeurs de l'attribut align sont:
 left: C'est la valeur par défaut. Elle permet d'aligner le contenu du paragraphe à
gauche de la page (ou à gaude du conteneur qui renferme la balise <p>).
 right: Elle permet d'aligner le contenu du paragraphe à droite de la page (ou à droite
du conteneur qui renferme la balise).
 center: Elle permet de centrer le paragraphe.
97
Langage HTML
Les paragraphes
 justify: Elle permet de justifier le contenu du paragraphe (prolonge le texte pour
qu'il occupe toute la ligne).
98
Langage HTML
Les conteneurs (ou containers)
 On entend par conteneur (ou container) des balises qui peuvent renfermer d'autres
éléments comme du textes ou des images. Les conteneurs les plus célèbres sont les
balises <div> et <span>.
Balise <div>
 La balise <div> est une balise de type block. Elle permet de définir un conteneur
ou un bloc qui contient d'autres éléments. Il sert généralement à mieux diviser la page
Web pour placer le bon contenu au bon endroit. Cependant, la balise <div>
nécessite des styles CSS pour qu'elle soit dotée de toute sa force.
 En HTML cette balise ne sert pas à grand chose si ce n'était que pour aligner du texte
ou définir un paragraphe (Elle se comporte à peu près comme la balise <p>). Les
attributs dont on peut la doter sont les même que ceux de la balise <p>.
Exemple:
99
Langage HTML
Exemple:
100
Langage HTML
Balise <span>
 La balise <span> est aussi un container, mais de type inline (elle occupe juste assez
d'espace pour afficher ce qu'elle contient et pas toute la ligne comme la balise
<div>). Par conséquent elle n'engendre pas de retour à la ligne.
Exemple:
101
Langage HTML
Les listes HTML
 Pour afficher plusieurs entrées, l'une en dessous de l'autres, il n'y a pas mieux que les
listes. Il y'en a deux types: des listes ordonnées et des listes non ordonnées.
Listes ordonnées: Balise <ol>
 La balise <ol> permet d'avoir des listes ordonnées (ou numérotées). Elle doit être
fermée (par </ol>) et elle contient une autre balise qui est <li>. La balise <li>
permet de définir une entrée de la liste (Il y 'a donc autant de balises <li> que
d'entrées).
 La balise <ol> peut avoir des attributs dont les plus importants sont:
 type: sert à définir le type de marqueur de la liste. Les différentes valeur de l'attribut
sont: 1 pour les chiffres classiques (il s'agit d'ailleurs de la valeur par défaut),
 A pour l'alphabet majuscule, a pour l'alphabet minuscule,
 I pour les chiffres romains majuscules i pour les chiffres romains minuscule.
 start: indique la valeur du marqueur du début. Par défaut la liste commence par 1 (si
102 elle est ordonnée).
Langage HTML
Les listes HTML
Exemple:
 Si vous mettez start="5" alors la première entrée sera marquée par 5 et non par 1, la
deuxième par 6...
Exemple:
103
Langage HTML
Les listes HTML
Liste non ordonnées: Balise <ul>
 La balise <ul> permet de créer des listes non ordonnées. Elle contient aussi la balise
<li> qui permet de définir les éléments de la liste.
 Tout comme la balise <ol>, la balise <ul> possède des attributs qui permettent de
personnaliser la liste. Le plus important d'entre eux est l'attribut type qui défini le
type de marquer et qui peut avoir une des valeurs suivantes:
 disc: le marqueur est un cercle plein. Il s'agit de la valeur par défaut.
 circle: le marqueur est un cercle creux.
 square: le marqueur est un carré plein.
Exemple:
104
Langage HTML
Les images
 width et height: signifient, respectivement, la largeur et la hauteur de l'image.
L'unité peut être le pixel (qui est implicite) ou le pourcentage (qu'il faut expliciter à
l'aide du symbole universel %). Si par exemple on donne à la largeur la valeur 100%,
cela veut dire que l'image occupe toute la largeur de la page (ou du conteneur qui
accueille la balise <img>).
Si width ou height ne sont pas spécifiée alors l'image sera affichée en taille réelle.
Si seule la valeur d'une dimension (width ou height) est déclarée, l'autre dimension
sera automatiquement recalculée par le navigateur de telle sorte à conserver les
proportions originales de l'image.
 alt: représente le texte alternatif à l'image. Il accepte comme valeur un mot ou une
phrase qui sera affichée à la place de l'image si celle ci n'est pas chargée correctement.
 title: il s'agit d'un message qui sera affiché dans une infobulle si on survole l'image
avec la souris.
105
Langage HTML
Les images
Exemple:
<img src ="images/IOT.jpg" width="300px" height="200px"

align="left">
106
Langage HTML
Les liens hypertextes
 Un lien hypertexte ou hyperlien est un objet HTML (texte, image ou autre) sur lequel
on peut cliquer pour aller vers une autre page (ou un autre emplacement dans la
même page). Il est considéré comme l'un des éléments les plus importants du langage
HTML puisqu'il permet de relier les pages les unes aux autres pour constituer ainsi le
Web tel que nous le connaissons.
Balise <a>
 La balise <a> (pour ancre) permet de créer un lien hypertexte pointant vers un
autre document ou autre emplacement. Un lien classique est connaissable par sa
couleur bleue et un style souligné (ces propriétés peuvent être changées à l'aide du
langage CSS).
 La balise <a> dispose des attributs suivants:
 - href: désigne le chemin vers la page de destination après avoir cliqué sur le lien.
Comme pour l'attribut src de la balise <img>, le chemin peut être absolu ou relatif.
107
Langage HTML
 Si par exemple la valeur de l'attribut href vaut "mailto:adresse@mail" alors, en
cliquant sur le lien, le logiciel de messagerie par défaut installé chez le client s'ouvrira
en l'invitant à écrire un mail à "adresse@mail".
 target: désigne où la page de destination sera ouverte. Il peut contenir plusieurs
valeurs mais une seule est fréquemment:
Valeur Description
_blank Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet
_self Ouvre le document lié dans le même cadre que celui sur lequel il a été cliqué
(c'est la valeur par défaut)
_parent Ouvre le document lié dans le cadre parent
_top Ouvre le document lié dans tout le corps de la fenêtre
framename Ouvre le document lié dans l'iframe nommé
108
Langage HTML
Exemple:
<a href="targetpage.html" target="_blank">Page destination</a>
 targetpage.html
<HTML>
<HEAD>
<TITLE>Page</TITLE>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</HEAD>
<BODY>
<BODY style = "background-color:orange;">
<img class="style1" src ="images/IOT.jpg" width="300px" height="200px" align="left">
</BODY>
</HTML>
109
Langage HTML
Exemple:
110
Langage HTML
 Liens internes
 Il arrive des fois qu'en cliquant sur un lien, on se déplace vers un autre emplacement
dans la même page déjà ouverte. On l'appelle alors un lien interne.
 Le principe est simple. Supposons que vous voulez prévoir un lien qui déplace
l'internaute vers une image dans la même page. Ce qu'il faut faire c'est ajouter une
ancre près de l'image (de préférence avant la balise <img>). L'ancre aura la
forme suivante:
<a name="hrname"></a>
 (Vous être libre de mettre ce que vous voulez dans l'attribut name). Notez que cet
ancre ne sera pas visible car la balise <a> ne contient aucun texte. Ensuite on va créer
le lien qui nous mènera vers l'ancre créé comme ceci:
<a href="# hrname ">Aller vers hrname </a>
 Notez que le # fait référence à la page courante. Après le # on déclare le nom de
l'ancre (la valeur de l'attribut name de tout à l'heure).

111 En cliquant sur le texte "Aller vers hrname " on sera déplacé automatiquement
vers l'ancre et par conséquent vers l'image souhaitée.
Langage HTML
Les lients internes
Exemple:
<a href=“#top"> Ancre vers le haut de la page </a>
112
Langage HTML
Les tableaux HTML
 Nous avons déjà vu deux balises qui servent de conteneur à savoir <div> et
<span>. C'est à dire qu'ils peuvent contenir d'autres balises afin de donner une
structure au document. Mais j'ai précisé que ces deux balises ne servent pas à grand
chose si nous ne les dotons pas de styles CSS. Cependant, il existe un autre objet
HTML qui peut servir de conteneur sans être obligé de faire appel au CSS. C'est le
tableau HTML.
 Les tableaux peuvent servir de grille qui contiennent des données structurées en ligne
et en colonne. Comme par exemple une liste d'articles avec leurs prix. Mais ils
peuvent servir également de conteneurs qui renferment d'autres objet HTML afin de
structurer sa page Web sous forme de cellules et faciliter ainsi la mise en page.
 Pour créer un tableau nous avons besoin, au moins, de trois balises de base: <table>,
<tr> et <td>.
113
Langage HTML
Les tableaux HTML
Balise <table>
La balise <table> est le conteneur principal. Elle permet de déclarer un tableau et peut
accueillir de nombreux attributs dont les plus fréquents sont:
 border: définit l’épaisseur de la bordure du tableau (et de ses cellules). Elle est
exprimée en pixels (px) mais nous nous contentons de déclarer la valeur sans l'unité.
Celle ci étant implicite et connue par le navigateur.
 width: définit la largeur du tableau. Elle est exprimée en pixel ou en pourcentage. Si
on entend les pixels alors on met la valeur sans l'unité. Si c'est du pourcentage alors
on met la valeur suivie du symbole %.
 height: définit la hauteur du tableau en pixel. Mais il vaut mieux ne pas déclarer cet
attribut et laisser le tableau s'étirer en fonction de la taille de son contenu.
 bgcolor: désigne la couleur de l'arrière plan du tableau. Cette couleur est exprimée
en nom anglais ou en code de couleur.
114
Langage HTML
Les tableaux HTML
Balise <table>
 cellspacing: signifie l'espacement entre les différentes cellules du tableau. Sa valeur
est exprimée en pixel (implicite).
 cellpadding: définit la marge interne des cellules. Elle est exprimée en pixel
(implicite).
Balise <tr>
 Même si vous déclarez la balise <table> dans le code, rien ne s'affichera sur le
navigateur.
 En effet, ce qui peut être affiché ce sont les cellules d'un tableau, et une cellule c'est
au moins une ligne et une colonne. La balise <tr> permet d'ajouter une ligne à un
tableau. Elle est directement déclarée dans la balise <table>.
 Il y a donc autant de balises <tr> que de lignes.
 La balise <tr> peut accueillir des attributs comme height ou bgcolor, mais la
115 plupart des développeurs préfèrent la déclarer sans attribut.
Langage HTML
Les tableaux HTML
Balise <td>
 La balise <td> représente une colonne. C'est elle en fait le vrai conteneur, car c'est
elle qui peut accueillir du contenu. Elle est déclarée dans la balise <tr>. Si vous
voulez avoir un tableau avec une ligne et deux colonnes, alors vous devez déclarer une
balise <tr> et dans celle ci, deux balises <td>.
 Si je vous ai conseillé de laisser la balise <tr> sans attributs, c'est parce que c'est la
balise <td> qui doit en avoir. Les principaux attributs qu'on peut déclarer sur la
balise <td> sont:
 width: définit la largeur de la colonne. Elle est exprimé en pixel ou en
pourcentage par rapport à la largeur du tableau.
 height: définit la hauteur de la colonne en pixel.
 bgcolor: désigne la couleur de l'arrière plan de la colonne. Cette couleur est
exprimée en nom anglais ou en code de couleur. Si la couleur d'arrière plan
n'est pas déclarée, alors la colonne est transparente, et c'est la couleur de
116
l'arrière plan du tableau qui sera visible.
Langage HTML
Les tableaux HTML
Balise <td>
 align: permet de spécifier l'alignement des objets contenus dans la colonne. Elle peut
avoir une des valeurs: left (valeur par défaut), right, center ou justify.
 valign: défini l'alignement vertical des objets contenus dans la colonne. Elle peut avoir
une des valeurs: middle (valeur par défaut), top ou bottom.
Exemple:
117
Langage HTML
Les tableaux HTML
Balise <caption>
 La balise <caption> est déclarée directement après la balise <table>. Elle contient
le titre du tableau et elle peut accueillir l'attribut align qui peut prendre une des
valeurs suivante: top (valeur par défaut) permet d'avoir le titre en dessus du tableau
et bottom permet d'avoir le titre en dessous du tableau.
Balise <thead>
 La balise <thead> permet de déclarer les cellules d'entête. Elle est déclarée dans la
balise <table> et peut contenir des lignes (balise <tr>) qui contiennent des
colonnes (balise <td>). Les cellules d'entête sont incluses en haut.
Balise <th>
 Quand la balise <thead> est déclarée, il est préférable de remplacer ses balises
<td> par <th>. La balise <th> désigne donc une légende pour les colonnes
d'entête.
118
Langage HTML
Les tableaux HTML
Balise <tbody>
 Il s'agit d'une balise qui est sensée accueillir les cellules du corps du tableau.
<tbody> est déclarée dans la balise <table> est peut contenir les balises <tr> puis
<td>.
Balise <tfoot>
 Il s'agit d'une balise qui est sensée accueillir les cellules du pied du tableau. <tfoot>
est déclarée dans la balise <table> après la balise <thead> est peut contenir les
balises <tr> puis <td>. Les cellules de la balises <tfoot> sont automatiquement
intégrées à la fin du tableau.
Exemple: …
119
Langage HTML
Les tableaux HTML
Exemple:
120
Fusionnement de cellules d'un tableau
 Si on suppose qu'on veut créer un tableau qui contient deux lignes, et si la ligne du
dessus contient deux colonnes, alors ce qu'on a fait jusqu'ici ne nous permet pas
d'avoir un nombre différent de colonnes dans la ligne du dessous. Alors cette dernière
ne peut comporter que deux colonnes si on tient à avoir un affichage correcte.
Néanmoins, il existe des cas (d'ailleurs très nombreux) où on a besoin d'avoir un
nombre de cellules différent dans chaque ligne. La solution magique est le
fusionnement des cellules.
 On peut fusionner les cellules horizontalement ou verticalement. Mais le plus
fréquent c'est de fusionner à l'horizontale grâce à l'attribut colspan.
L'attribut colspan
 L'attribut colspan est inclus dans la balise de colonne <td>. Il indique à celle ci
combien de colonnes il faut fusionner pour en avoir qu'une seule à la fin.
 Un exemple sera en mesure de clarifier les idées. Alors, supposons que je veux créer
un tableau qui contient deux lignes et chaque ligne contient deux colonnes. Bien
121
entendu, y a rien de nouveau à cela. Voici le code exemple: …
Exemple:
122
Langage HTML
Fusionnement de cellules d'un tableau
L'attribut rowspan
 Si colspan fusionne les colonnes à l'horizontale, rowspan quant à elle, elle les
fusionne à la verticale. Le principe est le même: Enlevez la (les) colonnes en plus, et
sur celle qui reste mettez rowspan="le nombre de colonnes à fusionner".
Par exemple, avant le fusionnement:
123
Langage HTML
Les formulaires
 Qu'est ce qu'un formulaire?
Un formulaire HTML permet de rendre la page Web plus interactive en la rendant
capable de dialoguer avec l'internaute à travers des champs de saisie et boutons. Un
formulaire permet à l'internaute de saisir du texte ou de valider un choix ou encore de
sélectionner une entrée. Ces informations seront ensuite (dans la plupart des cas)
envoyées au serveur pour les traiter. C'est très utile surtout quand il s'agit d'une page
Web dynamique.
Balise <form>
 La balise <form> délimite les champs du formulaire (zones de texte, boutons...).
Elle peut avoir plusieurs attributs dont voici les plus fréquents:
 L'attribut name
L'attribut name permet d'identifier le formulaire par un nom. On peut mettre n'importe quel
nom (à conditions qu'il ne contienne que les caractères conventionnels comme les lettres et les
chiffres). Le nom du formulaire est unique. En effet, nous pouvons déclarer plusieurs
124 formulaires dans la même page, pour les distinguer les uns des autres il suffit de leur donner
des noms différents.
Langage HTML
Les formulaires
Balise <form> (suite)
 L'attribut method
L'attribut method permet de spécifier la méthode à utiliser pour envoyer le formulaire au serveur.
En effet, l'objectif d'un formulaire c'est de transférer les données saisies par le client au serveur (on
dit généralement poster ou soumettre le formulaire). En HTML, il existe deux méthodes pour
envoyer un formulaire: GET et POST.
 La méthode GET: La méthode GET (method="get") est la valeur par défaut si on ne
précise aucune valeur pour l'attribut method. Cette méthode permet d'envoyer les données
du formulaire à travers l'URL (Uniform Resource Locator) en utilisant les symboles ?
pour préciser la suite de données et & pour séparer les données entre elles.Pour mieux
comprendre, imaginons que sur un site il existe une page nommée infos.html qui
renferme un formulaire utilisant la méthode GET et qui contient deux zones de
textes nommées respectivement ville et pays. Au chargement du formulaire, le
client a saisi dans les deux champs les valeurs Fès et Maroc. Quand le client
ordonnera l'envoi du formulaire, les données saisies seront envoyées via l'URL et
125 celui ci aura la forme suivante: http://www.site.ma/infos.html?ville=Fès&pays=Maroc
Langage HTML
Les formulaires
 L'attribut method
 La méthode POST: La méthode POST (method="post") permet d'envoyer les données du
formulaire au serveur à travers une entête. Pour simplifier, on va dire que les données et la
page ne font qu'un. Les informations ne seront donc pas visibles sur l'URL. La méthode POST
permet aussi de poster un volume de données plus important que celui transmis par GET.
D'ailleurs on peut même poster un fichier à travers un formulaire via cette méthode. C'est ce
que l'on appelle le "Upload" (C'est comme si vous "uploadez" une vidéo sur Youtube, ou
votre photo de profil sur Facebook).
 L'attribut action
Quand un formulaire est rempli par l'internaute, il est posté au serveur pour le traitement. Il faut
donc désigner la page qui se chargera du traitement des données. Cette page est spécifiée
dans l'attribut action.
Si l'attribut action est vide ou n'est pas mentionné, alors c'est la page courante (celle qui contient le
formulaire) qui sera la page action.
126
Langage HTML
Les formulaires
Exemple:
 Supposons que nous voulons créer un formulaire nommée "inscription" utilisant la

méthode "post" et faisant appel à la page "inscription.html" pour assurer le traitement
après envoi. Le code HTML ressemblera à ceci:
<formname="inscription"method="post" action="inscription.html">
</form>
 Si vous exécutez ce code sur le navigateur, rien ne s'affichera. En effet, ce qui sera
visible c'est ce que l'on intégrera dans la balise <form>.
 Que contient donc la balise <form>? Elle contient ce que l'on appelle les champs
de formulaire. Ce sont des objets comme des zones de texte ou des boutons. Nous
allons voir comment les intégrer ensemble.
127
Langage HTML
Les formulaires
Balise <input>
 La zone de texte est le champ de formulaire le plus célèbre. Il permet d'écrire un texte
sur une seule ligne (comme le nom ou le login par exemple). Pour créer une zone de texte
on fait appel à la balise <input>. Il s'agit d'une balise orpheline (pas de </input>).
 Notez que la plupart des champs de formulaire existants sont déclarés aussi à l'aide de la
même balise <input>. Pour distinguer une zone de texte d'un bouton par exemple, on
fait appel à l'attribut type. Détaillons les attributs les plus utilisées pour les inputs.
• L'attribut type
L'attribut type permet de définir le type de champ à intégrer. Voici les valeurs à mettre
pour cet attribut et qui permettent d'avoir les champs les plus fréquents:
• text: Permet d'avoir une zone de texte normale (adapté pour les noms, emails,
login...)
• password: Permet d'avoir une zone de mot de passe où les caractères sont masqués.

128
Langage HTML
Les formulaires
Balise <input>
• L'attribut type
• radio: Pour créer un bouton radio. Il s'agit d'un petit cercle qu'on peut cocher et qui
permet de faire un choix unique. Le fait de cocher un autre bouton radio décoche le
premier.
• checkbox: Permet de créer une case à cocher. C'est un petit carré qu'on peut
cocher ou décocher. Il est destiné à faire des choix multiples.
• file: Permet de créer le champ de chargement de fichier (comme une pièce
jointe d'un email).
• hidden: Pour créer un champ caché. C'est comme une zone de texte mais qui n'est
pas visible sur le navigateur. Il sert à stocker provisoirement des données jusqu'à la
phase de traitement.
• button: Permet de créer un bouton simple. A la base, ce bouton ne fait aucune
opération. Il faut donc le programmer (généralement avec Javascript).
129
Langage HTML
Les formulaires
Balise <input>
• L'attribut type (Suite)
• reset: Permet de créer un bouton d'annulation. Si le formulaire contient des champs
qu'on a déjà saisi, ce bouton permet de tout initialiser.
• submit: C'est le bouton d'envoi. C'est lui qui permet de poster le formulaire vers la
page définie dans l'attribut action de la balise <form>.
• L'attribut name
• L'attribut name permet de donner un nom au champ de formulaire. Le nom sert
d'identifiant du champ et doit être unique.
130
Langage HTML
Les formulaires
Balise <input>
 Attribut value
L'attribut value sert à définir la valeur par défaut d'un champ. S'il s'agit d'une zone
de texte, le fait de déclarer l'attribut value force le navigateur à initialiser ce champ
avec le texte faisant office de valeur de l'attribut. Si le champs est un bouton, alors le
texte de l'attribut value constitue l'étiquette (ou label). C'est le texte visible sur le
bouton. Pour les boutons radio ou les cases à cocher, le texte de l'attribut value
n'est pas visible sur le navigateur mais il est très utile (si on fait appel à des
programmes comme Javascript ou PHP).
 Attribut size
L'attribut size contient un entier comme valeur. Il définit la largeur du champ en
caractères. Par défaut, une zone de texte mesure 20 caractères (cela veut dire qu'on
peut voir jusqu'à 20 caractères à la fois même si le texte est plus grand).
131
Langage HTML
Les formulaires
Balise <input>
 Attribut tabindex
 L'attribut tabindex permet de définir l'ordre de tabulation. En pratique, si on veut
saisir un grand formulaire, on se déplace d'un champ à un autre en appuyant sur la
touche "tabulation" du clavier. Par défaut le curseur se déplace dans l'ordre où sont
déclarés les champs. On peut rompre cet ordre en définissant les valeurs de
tabindex. La valeur est un entier qui commence de 1. Le curseur se déplacera dans
l'ordre croissant de tabindex.
 Attribut checked
 L'attribut checked est un attribut booléen. Explicitement il est déclaré comme ceci:
checked="true", mais il suffit de déclarer checked tout seul pour que le
navigateur sache qu'il est activé. Cet attribut s'applique uniquement sur les boutons
radio (type="radio") et les cases à cocher (type="checkbox"). S'il est déclaré
alors le bouton est automatiquement coché au chargement de la page.
132
Langage HTML
Les formulaires
Balise <input>: Type et description
Type Description
<input type="text"> Affiche un champ de saisie de texte sur une
seule ligne
<input type="radio"> Affiche un bouton radio (pour sélectionner
l'un des nombreux choix)
<input type="checkbox"> Affiche une case à cocher (pour sélectionner
zéro ou plusieurs choix parmi de nombreux
choix)
<input type="submit"> Affiche un bouton de soumission (pour
soumettre le formulaire)
<input type="button"> Affiche un bouton cliquable
133
Langage HTML
Les formulaires
Balise <input>
Exemple:
134
Langage HTML
Les formulaires
Balise <input>
Exemple:
<form>
<label for="vprenom">Prénom:</label><br>
<input type="text" id="vprenom" name="vprenom"><br>
<label for="vnom">Nom:</label><br>
<input type="text" id="vnom" name="vnom"><br><br>
<input type="submit">
</form>
135
Langage HTML
Les formulaires
Balise <textarea>
permet de définir un espace de texte. Un espace de texte est une grande zone de texte qui
permet d'écrire des paragraphes entiers. Les attributs name et tabindex sont aussi applicables sur
l'espace de texte mais, en plus, il dispose des attributs suivants:
 cols: définit la largeur en caractères de l'espace de texte. Elle désigne combien de caractère une
ligne peut-elle contenir.
Le fait de dépasser la largeur définie entraîne un retour automatique à la ligne.
 rows: définit la hauteur de l'espace de texte. La hauteur désigne combien de ligne on peut voir à
la fois. Si le texte dépasse le nombre de lignes défini, alors une barre de défilement qui permet
d'atteindre le reste des lignes apparaît.
Exemple: …
136
Langage HTML
Les formulaires
Balise <textarea>
Exemple:
<textarea name="textarea" rows="5" cols="33">

Test de textarea
</textarea>
137
Langage HTML
Les formulaires
Exemple:
138
Langage HTML
Les framesets
Exemple:
139
Langage HTML
Les framesets
Exemple 2:
140
Introduction au langage CSS
 CSS C'est quoi ?  Masquage, opacité et débordement

 Comment intègre-t-on du code CSS ?  Sélecteurs spéciaux
 Couleurs de textes et propriétés agissant sur le  Pseudo-classes et pseudo-éléments
fond  Les Transformations CSS
 Les polices  Les transitions
 Styles de textes, marges, dimensions
 Les bordures
 Gestion des positions et transformation des
éléments
141
Avant CSS, c’était quoi ?
 Avant CSS, c’était le langage HTML qui existait depuis l'apparition du Web vers 1989.
A cette époque, CSS n'existait pas et donc les créateurs de pages Web étaient
contraints de tout faire avec seulement du HTML, à savoir la création du contenu et la
présentation du design. Après un moment, un problème commence à surgir, le code
des pages Web devient de plus en plus complexe, car il fallait mettre beaucoup de
balises pour l'intégration d'une part et de mise en forme d'une autre part. Le CSS est
alors apparu.
 Revenant à l’évolution du web …
142
 À quoi ressemblait le web 1.0?
 Faisant donc un retour vers le passé …
143
 À quoi ressemblait le web 1.0?
 Faisant donc un retour vers le passé …
144
C'est quoi CSS ?
 Il s'agit d'un langage de style dont la syntaxe est extrêmement
simple mais son rendement est remarquable. En effet, le CSS
s’intéresse à la mise en forme du contenu intégré avec du
HTML.
On peut créer une page Web entière avec HTML seulement,

même si le design ne serait pas au niveau de nos attentes. Par
contre on ne peut absolument réussir une page Web avec CSS
seulement. CSS ne fait que mettre en forme le contenu décrit
par HTML.
145
C'est quoi CSS ?
 Les feuilles de style en cascade (CSS) sont utilisées pour définir et personnaliser les
styles et la mise en page de vos pages Web. Cela signifie que vous pouvez créer des
feuilles de style pour modifier la conception, la mise en page et la réactivité à
différentes tailles d'écran sur divers appareils, des ordinateurs aux smartphones:
 En CSS, les sélecteurs déclarent quelle partie du balisage HTML correspond à un

styles à appliquer. Le sélecteur peut être un style de titre H1, une balise body ou une
balise de paragraphe. Donc, ce que vous verrez est un sélecteur, disons H1, et à
146 l'intérieur des accolades.
Comment intègre-t-on du code CSS ?
 En CSS, les sélecteurs déclarent quelle partie du balisage HTML correspond à un
styles à appliquer. Le sélecteur peut être un style de titre H1, une balise body ou une
balise de paragraphe. Donc, ce que vous verrez est un sélecteur, disons H1, et à
l'intérieur des accolades.
En règle générale,
une instruction CSS
est déclarée sous la
forme:
propriété:valeur
Il y a aussi le point
virgule (;) qui sert à
séparer deux
instructions CSS.
Le sélecteur porte le même

nom que la balise
Exemple: (la balise <h1>…</h1>), c-à-d
147 le style sera appliqué sur
toutes les balises h1.
 Vous pouvez soit ajouter vos déclarations CSS à la section <head> de
votre document HTML:
1) Entre les balises <style>…</style>
dans la section <head> de
votre document HTML en
rendant les attributs de style
globale:
148
 Vous pouvez soit ajouter vos déclarations CSS à la section <head> de
votre document HTML:
1) Entre les balises <style>…</style>
dans la section <head> de
votre document HTML en
rendant les attributs de style
globale: L’ inconvénient pour cette méthode c’est l’augmentation au
niveau du code CSS en un seul endroit plutôt que dans
chaque page HTML que vous créez.
149
2) Localement dans la balise ouvrante <balise>:
Pour faire simple, prenons le code suivant:
Pourtant, il existe une autre syntaxe qui permet de réussir exactement

le même affichage. La voilà:
150
2) Localement dans la balise ouvrante <balise> (suite):
L’ inconvénient pour cette méthode:

- Les 1) Un style déclaré à base d'un attribut de style local
attributs HTML color, face et size ont disparu et ils ont été
présente un inconvénient majeur. En effet, il ne s'applique
remplacésqu'à
parlaunbalise
seul et unique attribut.
sur laquelle il est déclaré. Or, sur une page
- Comme valeur,
Web, styleplusieurs
il existe reçoit une séquence
éléments qui d'instructions
se ressemblent qui sont
respectivement:
(décrits par la même balise en général). Il est donc
judicieux
color:red quequi
cesdésigne
éléments la couleur rouge,style, et par
aient le même
conséquent
font-family:verdana qui signifie
on serait obligé la police
de redéclarer verdana
le même style
local autant de
size:12pt quifois qu'il ylaataille
spécifie d'éléments similaires.
de police 12pt (équivalente en
HTML à size="3").
2) L’augmentation au niveau du code CSS en un seul
La séquence d'instructions qui représente la valeur de l'attribut style est en
endroit plutôt que dans chaque page HTML que vous créez.
fait, du CSS.
151
2) Localement dans la balise ouvrante <balise> (suite):
- Les attributs HTML color, face et size ont disparu et ils ont été
remplacés par un seul et unique attribut.
- Comme valeur, style reçoit une séquence d'instructions qui sont
respectivement:
 color:red qui désigne la couleur rouge,
 font-family:verdana qui signifie la police verdana
 size:12pt qui spécifie la taille de police 12pt (équivalente en
HTML à size="3").
La séquence d'instructions qui représente la valeur de l'attribut style est en
fait, du CSS.
152
3) Soit ajouter vos déclarations CSS à un fichier style.css séparé et ajouter un lien dans la
section <head>. de votre document HTML en utilisant:
<link rel="stylesheet" type="text/css" href="styles.css">
L’ avantage pour cette méthode:
C'est une meilleure méthode car elle vous permet
de modifier les styles en un seul endroit plutôt que
dans chaque page HTML que vous créez.
153
Déclarations CSS à un fichier style.css séparé puis ajouter un lien dans la section <head> du
document HTML:
Exemple:
body {
<HTML> Html file CSS file
background-color:orange;
<HEAD>
}
<TITLE>Première page HTML</TITLE>
<meta http-equiv="content-type" h1 {
content="text/html;charset=utf-8"> color:blue;
<link }
rel="stylesheet" type="text/css" href="style1.css" >
</HEAD> font {
color:red;
<BODY>
font-size:12px;
<h1>Définition détaillée de l'IoT</h1>
font-famility:verdana;
<p>De façon générale, l'Internet des Objets concerne tous les }
objets pouvant être connectés à <font>un réseau
Internet</font> et peuvent traiter presque partout d'immenses
p{
ensembles de données de manière rapide et fiable.</p>
background-color:#F0F8FF;
</BODY>
background-image:linear-gradient(to bottom, lightblue,
154 </HTML> darkblue);
}
Déclarations CSS à un fichier style.css séparé et ajouter un lien dans la section <head> du
document HTML:
Exemple:
font {
color:red;
h1 { font-size:12px;
color:blue; font-famility:verdana;
} }
body { p{
background-color:orange; background-color:#F0F8FF;
} background-image:linear-gradient(to bottom,
lightblue, darkblue);
}
155
Sélecteur Exemple Description de l’exemple Ex
.class .intro Sélectionne tous les éléments avec class="intro" 1
.class1.class2 .name1.name2 Sélectionne tous les éléments avec name1 et name2 définis 2
dans son attribut de classe
.class1 .class2 .name1 .name2 Sélectionne tous les éléments portant le nom 2 qui sont des 3
descendants d'un élément portant le nom 1.
#id #firstname Sélectionne l'élément avec id="firstname" 4
* * Sélectionne tous les éléments 5

Element p Sélectionne tous les éléments <p> 6
element.class p.intro Sélectionne tous les éléments <p> avec class="intro" 7
element, div, p Sélectionne tous les éléments <div> et tous les éléments 8
element <p>
156
element element div p Sélectionne tous les éléments <p> à l'intérieur des 9
éléments <div>
element>element div > p Sélectionne tous les éléments <p> dont le parent est 10
un élément <div>
element+element div + p Sélectionne le premier élément <p> placé 11
immédiatement après les éléments <div>
element1~element2 p ~ ul Sélectionne chaque élément <ul> précédé d'un 12
élément <p>
[attribute] [target] Sélectionne tous les éléments avec un attribut cible 13
[attribute=value] [target="_blank"] Sélectionne tous les éléments avec target="_blank" 14
[attribute~=value] [title~="flower"] Sélectionne tous les éléments avec un attribut title 15
contenant le mot « fleur »
[attribute|=value] [lang|="en"] Sélectionne tous les éléments avec une valeur 16
d'attribut lang égale à "en" ou commençant par "en-"
157
[attribute^=value] a[href^="https"] Sélectionne chaque élément <a> dont la valeur 17
de l'attribut href commence par "https"
[attribute$=value] a[href$=".pdf"] Sélectionne chaque élément <a> dont la valeur 18
de l'attribut href se termine par ".pdf"
[attribute*=value] a[href*="w3schools"] Sélectionne chaque élément <a> dont la valeur 19
d'attribut href contient la sous-chaîne
"w3schools"
----------------------- ----------------------- ---------------------------------------------------- 20
::after p::after Insérez quelque chose après le contenu de 21
chaque élément <p>
::before p::before Insérer quelque chose avant le contenu de 22
chaque élément <p>
:checked input:checked Sélectionne chaque élément <input> coché 23
158
:disabled input:disabled Sélectionne chaque élément <input> désactivé 23
:enabled input:enabled Sélectionne chaque élément <input> activé 23
:focus input:focus Sélectionne l'élément d'entrée qui a le focus 23
:empty p:empty Sélectionne chaque élément <p> qui n'a pas d'enfants (y 24
compris les nœuds de texte) (espaces inclus)
::first-letter p::first-letter Sélectionne la première lettre de chaque élément <p> 24
::first-line p::first-line Sélectionne la première ligne de chaque élément <p> 24
:first-of-type p:first-of-type Sélectionne chaque élément <p> qui est le premier élément 24
<p> de son parent
:last-of-type p:last-of-type Sélectionne chaque élément <p> qui est le dernier élément 24
<p> de son parent
159
:lang(language) p:lang(fr) Sélectionne chaque élément <p> avec un attribut 24
lang égal à « fr" (francais)
:first-child p:first-child Sélectionne chaque élément <p> qui est le 24
premier enfant de son parent
:last-child p:last-child Sélectionne chaque élément <p> qui est le dernier 24
enfant de son parent
:not(selector) :not(p) Sélectionne chaque élément qui n'est pas un élément 24
<p>
:only-child p:only-child Sélectionne chaque élément <p> qui est le seul 24

:nth-child(n) p:nth-child(2) Sélectionne chaque élément <p> qui est le deuxième 24
:nth-last-child(n) p:nth-last-child(2) Sélectionne chaque élément <p> qui est le deuxième 24

enfant de son parent, en comptant depuis le dernier
enfant
160
:nth-last-of-type(n) p:nth-last-of-type(2) Sélectionne chaque élément <p> qui est le 25
deuxième élément <p> de son parent, en comptant
depuis le dernier enfant
:nth-of-type(n) p:nth-of-type(2) Sélectionne chaque élément <p> qui est le 25
deuxième élément <p> de son parent
:only-of-type p:only-of-type Sélectionne chaque élément <p> qui est le seul 25
élément <p> de son parent
:nth-last-child(n) p:nth-last-child(2) Sélectionne chaque élément <p> qui est le 25

deuxième enfant de son parent, en comptant depuis
le dernier enfant
:hover a:hover Sélectionne les liens au survol de la souris 26
:link a:link Sélectionne tous les liens non visités 26
:visited a:visited Sélectionne tous les liens visités 26
161
:active a:active Sélectionne le lien actif 26
:fullscreen :fullscreen Sélectionne l'élément qui est en mode plein 27
écran
::marker ::marker Sélectionne les marqueurs des éléments de la liste 27
:in-range input:in-range Sélectionne les éléments d'entrée avec une 28
valeur dans une plage spécifiée
:optional input:optional Sélectionne les éléments d'entrée sans attribut 28
"obligatoire"
:out-of-range input:out-of-range Sélectionne les éléments d'entrée avec une 28
valeur en dehors d'une plage spécifiée
::placeholder input::placeholder Sélectionne les éléments d'entrée avec l'attribut 28
"placeholder" spécifié
:read-only input:read-only Sélectionne les éléments d'entrée avec l'attribut 28
"readonly" spécifié
162
:read-write input:read-write Sélectionne les éléments d'entrée avec l'attribut 28
"readonly" NON spécifié
:required input:required Sélectionne les éléments d'entrée avec l'attribut 28
"obligatoire" spécifié
:valid input:valid Sélectionne tous les éléments d'entrée avec une 28
valeur valide
:invalid input:invalid Sélectionne tous les éléments d'entrée avec une 28
valeur invalide
:root :root Sélectionne l'élément racine du document 29
::selection ::selection Sélectionne la partie d'un élément sélectionnée par 29
un utilisateur
163
Les fonctions CSS ?
Function Description
attr() Renvoie la valeur d'un attribut de l'élément sélectionné
Exemple:
<blockquote cite="https://mozilla.org/en-US/about/">
Mozilla makes browsers, apps, code and tools that put
people before profit.
</blockquote>
blockquote::after {
display: block;
content: ' (source: ' attr(cite) ') ';
color: red;
}
164
Les fonctions CSS ?
calc() Vous permet d'effectuer des calculs pour déterminer les valeurs des propriétés CSS
Exemple:
<blockquote cite="https://mozilla.org/en-US/about/">
Mozilla makes browsers, apps, code and tools that put
people before profit.
</blockquote>
blockquote::after {
display: block;
color: red;
}
blockquote {
margin: 1em 0;
width: calc(100px + 200px);
}
165
Les fonctions CSS ?
conic-gradient() Crée un dégradé conique
Exemple:
blockquote {
width:100px;
height:100px;
background: conic-gradient(red, orange, yellow, green, blue);
}
<div> </div>
166
Les fonctions CSS ?
counter() Renvoie la valeur actuelle du compteur nommé
Exemple:
h1::before {
counter-increment: section;
content: "Section " counter(section) ": ";
color: hsl(120deg 75% 25% / 60%);
}
<h1>Teste de la fonction counter</h1>

167
Les fonctions CSS ?
cubic-bezier() Définit une courbe de Bézier cubique
Exemple:
h1::before {
width: 100px;
height: 100px;
background: red;
transition: width 30s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
<div class="intro"> </div>
168
Les fonctions CSS ?
hsl() Définit les couleurs à l'aide du modèle Teinte-Saturation-Luminosité (HSL)
(Exemple: hsl(0,100%, 50%), 0 % est noir, 50 % n'est ni clair ni foncé, 100 % est blanc)
hsla() Définit les couleurs à l'aide du modèle Teinte-Saturation-Luminosité-Alpha (HSLA)
(Exemple: hsl(120deg 75% 25% / 60%), le composant alpha représente la transparence
des couleurs )
Exemple:
h1::before { h1::before {
width: 100px; width: 100px;
height: 100px; height: 100px;
background: hsl(120deg 75% 25% / 60%); background: hsl(120deg 75% 25% / 60%);
transition: width 30s; transition: width 30s;
} }
<div class="intro"> </div>
169
Les fonctions CSS ?
max() Utilise la plus grande valeur, parmi une liste de valeurs séparées par des virgules, comme
valeur de propriété
min() Utilise la plus petite valeur, à partir d'une liste de valeurs séparées par des virgules, comme
valeur de propriété
Exemple: <blockquote cite="https://mozilla.org/en-US/about/">
Mozilla makes browsers, apps, code and tools that put people before profit.
</blockquote>
blockquote::after {
display: block;
color: red;
}
blockquote {
margin: 1em 0;
width: max(100px, 300px);
}
170
Les fonctions CSS ?
radial-gradient() Crée un dégradé radial
Exemple:
.intro3 {
background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
<div class="intro3"> </div>
171
Les fonctions CSS ?
repeating-conic-gradient() Répète un dégradé conique
Exemple: .intro3 {
background-image: conic-gradient(red 0%, yellow 15%, red 33%);
}
.intro3 {
background-image: repeating-conic-gradient(red 0%, yellow 15%, red 33%);
}
<div class="intro3">
</div>
172
Les fonctions CSS ?
repeating-linear-gradient() Répète un dégradé linéaire
Exemple:
.intro3 {
background: linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
}
.intro3 {
background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
}
</div>
173
Les fonctions CSS ?
repeating-radial-gradient() Répète un dégradé radial
Exemple:
.intro3 {
background: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
.intro3 {
background: repeating-radial-gradient(cyan 0%, transparent 20%, salmon 40%);
}
</div>
174
Les fonctions CSS ?
rgb() Définit les couleurs à l'aide du modèle Rouge-Vert-Bleu (RVB)
rgba() Définit les couleurs à l'aide du modèle Rouge-Vert-Bleu-Alpha (RGBA)
Exemple: .intro3 {
background: rgb(10% 70% 50%);
}
<div class="intro3"> .intro3 {

</div> background: rgba(10%, 70%, 50%, 0.3);
}
175
Les principaux styles
CSS ?
176
Les groupes de propriétés CSS ?
• Background • Hyperlink • Print
• Border and outline • Linebox • 2D/3D Transform
• Box • List • Transition
• Color • Margin • Animation
• Dimension • Padding
• Flexible Box • Positioning
• Font
177
Propriétés de formatage de texte text-decoration:
Underline,
font-family:
overline,
Arial Black,
Propriétés line-through,
Arial,
de police, taille blink,
Verdana,
et décorations none
serif
font-variant:
font-size:
small-caps,
small,
normal
x-small,
xx-small,
medium,
large font-weight: text-transform:
x-large Bold, uppercase
xx-large bolder, font-style: lowercase
lighter, Italic, capitalize
normal Oblique, none
178 normal
Propriétés de formatage de texte :
letter-spacing word-spacing
normal Autres normal,
ou une unité propriétés ou une
de longueur. de police, longueur
taille et
décorations
text-shadow
none, direction
une couleur Ltr,
et / ou une rtl
longueur
179
Propriétés de formatage de texte  Police, taille et décorations
Type Nom Valeurs possibles
Nom de font-family Exemple: font-family: "Arial Black", Arial, Verdana, serif;

police
Taille du font-size xx-small : très très petit | x-small : très petit | small : petit
texte | medium : moyen | large : grand | x-large : très grand | xx-
large : très très grand
Gras font-weight bold : gras | bolder : plus gras | lighter : plus fin | normal :
pas gras (par défaut)
Italique font-style italic : italique | oblique : autre façon de mettre en italique |
normal : normal (par défaut)
Décoration text-decoration Underline : souligné | overline : ligne au-dessus | line-
through : barré |
blink : clignotant
none : normal (par défaut)
180
Propriétés de formatage de texte  Police, taille et décorations
Nom de font-variant small-caps : petites capitales normal : normal (par défaut)
police
Taille du text-transform uppercase : tout mettre en majuscules lowercase : tout mettre en minuscules
texte capitalize : début des mots en majuscules none : normal (par défaut)
Autres letter-spacing : permet d'ajuster l'espace entre chaque lettres.

Valeurs possibles : "normal", ou une unité de longueur.
text-shadow : permet de créer une ombre au texte. Valeurs possibles : "none",
une couleur et / ou une longueur.
word-spacing : permet d'ajuster l'espace entre chaque mot. Valeurs possibles :
"normal", ou une longueur.
direction : permet de choisir le sens du texte. Valeurs possibles : "ltr" de gauche
à droite, "rtl" de droite à gauche.
Raccourci Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight,
font-style, font-size, font-variant, font-family.
Attention exception : le nom de la police (font-family) doit être placé en dernier
181 dans la liste dans tous les cas. Exemple : font: bold, 16px, Arial; /*Cela
mettra votre texte en gras, 16 pixels, Arial.*/
Propriétés de formatage de texte
text-align: white-space:
Left, Normal,
center, Propriétés nowrap,
justify d’alignement pre
vertical-align: text-indent:
top, line-height: valeur en pixels
middle, valeur en (px)
bottom pixels (px)
ou en
pourcentage
182 (%)
Propriétés de formatage de texte  Propriétés d’alignement
Alignement text-align left : à gauche (par défaut) center : centré right : à droite justify :
horizontal texte justifié (prend toute la largeur de la page)
Alignement vertical-align A utiliser dans des cellules de tableau. top : en haut middle : au
vertical milieu bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%)
Alinéa text-indent Indiquez une valeur en pixels (px) pour définir l'alinéa de vos
paragraphes. Vos paragraphes commenceront avec le retrait que vous
avez indiqué.
Césure white-space Normal : le passage à la ligne est automatique (par défaut) nowrap :
pas de passage à la ligne automatique, à moins qu'une balise xHTML
comme ne soit présente. pre : le passage à la ligne se fait tel que le
texte a été saisi dans le code source.
183
Propriétés de couleur et de fond  Couleur
Couleur de texte color Indiquer une couleur avec l'une des méthodes suivantes :
En tapant le nom de la couleur en anglais (black, blue, green,
white, red...). • En indiquant la couleur en hexadécimal
(#CC48A1) • En indiquant la couleur en RGB : rgb (128, 255, 0)
Couleur de fond background- Même fonctionnement que color. Cela définit cette fois la couleur
color de fond du texte
background-color
Propriétés de
Couleur
color
184
background-repeat:
background-image :
repeat,
Left,
Propriétés repeat-x,
center,
justify
d’image de repeat-y,
fond no-repeat
background-position :
Valeur en px,
background-attachment :
top,
top,
center,
middle,
bottom,
bottom
left,
center
185
Propriétés d’image de fond  Image de fond
Image de background- Indiquer l'url de l'image (notation absolue ou relative)
fond image background-image:url("images/fond.png");
Fond fixé background- fixed : le fond reste fixe quand on descend plus bas sur la page scroll : le
attachment fond défile avec le texte (par défaut)
Répétition background- repeat : le fond se répète (par défaut)

du fond repeat repeat-x : le fond ne se répète que sur une ligne, horizontalement
repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
Position background- 2 façons de faire :
du fond position • En notant une distance en px ou %, par rapport au coin en haut à gauche.
background-position:50px 200px; /* 50 px à droite, 200px en bas */
• En utilisant des valeurs prédéfinies, une pour la verticale et une pour
l'horizontale :
top : en haut, verticalement | center : au milieu, verticalement
bottom : en bas, verticalement | left : à gauche, horizontalement
186 center : au centre, horizontalement | right : à droite, horizontalement
width: Propriétés min-height :

Valeur en px de Valeur en px
dimensions
max-height :
height: Valeur en px
Valeur en px
min-width : max-width :
Valeur en px Valeur en px
187
Propriétés d’image de fond  Image de fond
Raccourci background Indiquer une ou plusieurs valeurs issues des propriétés
background-image,
background-repeat,
Background-attachment,
background-position.
L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de
mettre toutes les valeurs de ces propriétés
(au moins une suffit)
Exemple : background:url("images/fond.png") no-repeat fixed top right;
/* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas
répété. */
188
Propriétés des boîtes  Dimensions
Largeur width Valeur en px, %, ou encore "auto" (valeur par défaut, la

largeur dépendra du texte à l'intérieur)
Hauteur height Idem
Largeur minimale min-width Indiquer une valeur, en pixels par exemple.
Largeur maximale max-width Idem
Hauteur minimale min-height Idem
Hauteur maximale max-height Idem
189
Propriétés des boîtes
margin-top: Propriétés
Valeur en px de Marges
extérieures
margin :
margin-bottom : 4 valeurs en px/3
Valeur en px valeurs /2 valeurs
margin-left:
margin-right:
Valeur en px
Valeur en px
190
Propriétés des boîtes  Marges extérieures
Marge en haut margin-top Indiquer une valeur comme 20px, 1.5em...
Marge à gauche margin-left Idem
Marge à droite margin-right Idem
Marge en bas margin-bottom Idem
Raccourci margin Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de

valeurs que vous mettez, la signification change :
• 1 valeur : ce sera la marge pour le haut, le bas, la gauche
et la droite
• 2 valeurs : la première correspond à la marge pour le
haut et le bas, la seconde pour la gauche et la droite
• 3 valeurs : la première correspond à la marge du haut, la
seconde aux marges à gauche et à droite, la troisième à la
marge du bas
191
Propriétés des boîtes  Marges extérieures (Suite)
Raccourci margin • 4 valeurs : respectivement la marge du haut, de la droite, du
bas, de la gauche.
Exemple : margin:20px 5px;
/* 20px de marge en haut et en bas, 5px à gauche et à droite */
192
Propriétés des boîtes
padding-top: Propriétés
Valeur en px de Marges
intérieures
padding :
4 valeurs en px/3
padding-bottom :
valeurs /2 valeurs
Valeur en px
padding-left:
padding-right:
Valeur en px
Valeur en px
193
Propriétés des boîtes  Marges inférieures
Marge intérieure en haut padding-top Indiquer une valeur comme 20px, 1.5em...
Marge intérieure à gauche padding-left Idem
Marge intérieure à droite padding-right Idem
Marge intérieure en bas padding-bottom Idem
Raccourci padding Idem margin
194
border-width : Border-top :
Valeur en px Propriétés Valeur en px
de
Bordures
Border-style:
border-bottom :
none,
Valeur en px
hidden,
solid,
double,
border :
dashed,
4 valeurs en
dotted,
px/3 valeurs /2
inset,
valeurs
outset,
ridge Border-color : border-right : border-left :
Couleur Valeur en px Valeur en px
195
Propriétés des boîtes  Bordures
Epaisseur de la bordure border-width Indiquer une valeur en px.

Couleur de la bordure border-color Indiquer une valeur de couleur.
Type de bordure border-style none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de
bordure de 3px minimum)
dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D
196
Propriétés des boîtes  Bordures
Bordure à gauche border-left Indiquer la couleur, l'épaisseur et le type de

bordure pour la bordure gauche.
L'ordre n'a pas d'importance.
Exemple : border-left: 2px inset blue; /*
Bordure bleue de 2px avec effet 3D "enfoncé"
*/
Bordure en haut border-top Idem
Bordure à droite border-right Idem
Bordure en bas border-bottom Idem
Raccourci border Indiquera l'apparence des bordures en haut, à
droite, en bas et à gauche.
197
Propriétés de positionnement et d'affichage
display:
overflow:
none,
visible,
block,
Propriétés hidden,
inline,
list-item
d’affichage width
visibility :
display:
hidden,
scroll,
visible,
auto
none
198
Propriétés de positionnement et d'affichage  Affichage
Type d'élément display none : l'élément ne sera pas affiché
block : l'élément devient de type "block" (bloc, comme <p>)
inline : l'élément devient de type "inline" (en ligne, comme
<strong>)
list-item : l'élément devient de type "élément de liste à puce"
(comme <li>)
Affichage visibility hidden : masqué | visible : visible (par défaut)
display:none; fait complètement disparaître l'élément, tandis que
visibility:hidden; masque l'élément, qui continue quand même à
prendre de la place sur l'écran.
Limiter les overflow visible : tout l'élément sera affiché (par défaut).
dimensions hidden : l'élément sera coupé s'il dépasse les limites définies par
height et width. On ne pourra pas voir la partie du texte coupée.
199
Propriétés de positionnement et d'affichage  Affichage
Type display scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites.
d'élément Toutefois, cette fois le navigateur ajoutera des barres de défilement pour
qu'on puisse voir la suite du texte.
auto: c'est le navigateur qui décide d'ajouter des barres de défilement ou

pas en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser
la valeur "scroll".
200
float:
left, z-index :
right, Propriétés de Valeur entière
none, positionnement
none
bottom :
absolu,
fixe,
clear:
relatif
left,
right,
both left :
position : absolu,
top : rigth : fixe,
absolute,
absolu, absolu, relatif
fixed,
fixe, fixe,
relative,
relatif relatif
201 static
Propriétés de positionnement et d'affichage  Positionnemment
Flottant float left : flottant à gauche
right : flottant à droite
none : pas de flottant (par défaut)
none : pas de suppression de l'effet du flottant (par défaut)
Stopper un clear left : supprime l'effet d'un flottant à gauche précédent
flottant right : supprime l'effet d'un flottant à droite précédent
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche
ou à droite
positionnement position absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue).
L'élément reste à sa position même quand on descend plus bas
dans la page.
relative : position relative, par rapport à la position "normale" de
l'élément
202 static : positionnement normal (par défaut)
Propriétés de positionnement et d'affichage  Positionnement
Position par rapport au haut top Valeur en px, %, em... A utiliser pour un positionnement
absolu, fixe ou relatif.
Position par rapport au bas bottom Idem
Position par rapport à gauche left Idem
Position par rapport à droite right Idem
Ordre d'affichage z-index Par exemple en cas de positionnement absolu, si 2
éléments se chevauchent, z-index permet d'indiquer quel
élément doit être affiché au-dessus de l'autre. Indiquez un
nombre. Plus ce nombre est élevé, plus l'élément sera
affiché en avant.
Exemple, si vous avez 2 éléments positionnés en absolus
avec un z-index : 10 pour l'un et z-index : 20 pour
l'autre, c'est celui qui a un z-index de 20 qui sera affiché
203
par-dessus.
Propriétés de positionnement et d'affichage
list-style-type: List-style:
disc, les valeurs de:
circle, list-style-type,
square, Propriétés list-style-position,
none, De listes list-style-image
decimal,
decimal-
leading-zero,
upper-roman,
lower-roman,
upper-alpha,
lower-alpha,
lower-greek List-style-position :
hidden, List-style-image:
visible, url("images/img.png");
none
204
Propriétés des listes
Type de liste list-style-type • Pour les listes non ordonnées (<ul>) :
o disc : un disque noir (par défaut).
o circle : un cercle.
o square : un carré.
o none : aucune puce ne sera utilisée.
• Pour les listes ordonnées (<ol>) :
o decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
o decimal-leading-zero : des nombres commençant par
zéro (01, 02, 03, 04, 05...). Ne fonctionne pas sur
Internet Explorer
o upper-roman : numérotation romaine, en majuscules
(I, II, III, IV, V...)
o lower-roman : numérotation romaine, en minuscules
(i, ii, iii, iv, v...)
o upper-alpha : numérotation alphabétique, en majuscules
205 (A, B, C, D, E...)
Propriétés des listes
Type de liste list-style- o lower-alpha : numérotation alphabétique, en minuscules (a, b, c,
type d, e...)
o lower-greek : numérotation grecque. Ne fonctionne pas sur
Internet Explorer
Position en list-style- inside : sans retrait outside : avec retrait (par défaut)
retrait position
Puce list-style- Indiquer l'url de l'image qui servira de puce.
personnalisée image Exemple : list-style-image: url("images/puce.png");
Raccourci list-style Vous pouvez réunir les valeurs de: list-style-type, list-style-
position et list-style-image. Vous n'êtes pas obligés de mettre
toutes
les valeurs, et l'ordre n'a pas d'importance.
Exemple : list-style: inside square;
206
Autres propriétés
Scrollbar:
a:
scrollbar-3dlight-color,
a:link, Autres scrollbar-arrow-color,
a:visited,
propriétés scrollbar-base-color,
a:hover,
scrollbar-darkshadow-color,
a:active
scrollbar-face-color,
scrollbar-highlight-color,
scrollbar-shadow-color,
scrollbar-track-color
207
Autres propriétés
Les pseudo a a:link : lien non-visité
classes d'ancre a:visited : lien visité
a:hover : lien survolé
a:active : lien activé
Les barres de scrollbar scrollbar-3dlight-color : permet de modifier la couleur pour les
défilement : effets de relief. Valeur possible : une couleur.
scrollbar-arrow-color : permet de modifier la couleur pour les
pointeurs de défilement. Valeur possible : une couleur.
scrollbar-base-color : permet de modifier la couleur de la surface
de la barre de défilement. Valeur possible : une
couleur.
scrollbar-darkshadow-color : permet de modifier la couleur
pour les ombres. Valeur possible : une couleur.
208
Autres propriétés (Suite)
Les barres de scrollbar scrollbar-face-color : permet de modifier la couleur de la surface
défilement : de la barre de défilement. Valeur possible : une
couleur.
scrollbar-highlight-color : permet de modifier la couleur pour
le bord haut et le bord gauche. Valeur possible : une
couleur.
scrollbar-shadow-color : permet de modifier la couleur pour le
bord droit et le bord du bas. Valeur possible : une
couleur.
scrollbar-track-color : permet de modifier la couleur pour la
barre de défilement non cachée par le pointeur de
défilement. Valeur possible : une couleur.
209
Quelques exemples
avec les styles CSS
210
CSS Box model ?
 Dans cette partie, nous allons comprendre comment le modèle de boîte CSS restitue
les éléments HTML selon son standard.
211
CSS Box model ?
Normalement, Chaque élément HTML ajouté

à une page Web s'affiche sous forme de
boîte dans le navigateur..
212
CSS Box model ?
Alors, quel est exactement le modèle de

boîte CSS ? Il s'agit essentiellement
d'une boîte qui entoure chaque élément
Normalement, Chaque élément HTML ajouté
HTML au niveau du bloc d'un site
à une page Web s'affiche sous forme de
Web. Chaque boîte est composée de
boîte dans le navigateur..
quatre zones définies par leurs bords
respectifs : le bord du contenu, le
bord du remplissage, le bord de la
bordure et le bord de la marge.
213
Conteneur Div + CSS Box model ?
 Vous pouvez soit ajouter vos déclarations CSS à la section <head> de votre HTML
div {
margin: 50px;
margin-top: 20px;
margin-right: 40px;
margin-bottom: 70px;
margin-left: 20px;
}
214
div {
margin: 20px 40px 70px 20px;
}
div {
margin: 20px 40px 70px;
}
div {
margin: 20px 70px;
}
215
div {
padding-top: 20px;
border-top: 10px;
padding-right:
border-right: 10px;
40px;
padding-bottom: 70px;
border-bottom: 10px;
padding-left: 20px;
border-left: 10px;
}
216
div {
padding-top: 20px;
padding-right: 40px;
padding-bottom: 70px;
padding-left: 20px;
}
217
 Comparaison entre Box model en content-box et Box model en border-box.
1 2
218
 You can either add your CSS declarations to the <head> section of your HTML
<div id="circle"></div>
body {
font-family: "Roboto", sans-serif;
<div> display: flex;
<h1>Hello There!</h1> align-items: center;
</div> justify-content: center;
}
#circle {
background-color: blue;
border-radius: 50%;
height: 100px;
width: 100px;
}
219
body {
background-color: #f2f2f2;
}
Conteneur Div + CSS Box model div {
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
<div id="first"></div> border-radius: 50px;
}
<div id="second"></div>
<div id="third"></div> #first {
background-color: #bd7f37;
}
#second {
margin-top: 40px;
margin-left: -40px;
background-color: black;
}
#third {
margin-top: 80px;
margin-left: -40px;
220 background-color: #a13941;
}
Img+ CSS Box model?
<img class="style1" .style1 {

src ="images/IOT.jpg" width="300px" background-color: blue;
border-radius: 50%;
height="200px" align="left"> border-color:red;
height: 200px;
width: 200px;
padding: 20px;
margin: 5%;
background-clip: padding-box;
border:10px dashed dimgray;
}
221
Gestion de l’opacité ?
 Il existe une autre syntaxe mais qui est devenue obsolète, il s'agit de -moz-opacity.
Elle était destinée aux moteurs de rendu Gecko comme celui embarqué sur Firefox.
Elle acceptait les mêmes valeurs que la propriété opacity.
 Mais, la question qui se pose est: "Comment saurons nous quel navigateur utilise
le client pour décider quelle propriété envoyer?". La réponse est aussi simple que la
solution; il suffit de déclarer toutes les propriétés ensemble (ou au moins les deux qui
sont encore en service) et laisser le navigateur exécuter celle qu'il comprend.
Exemple:
img {
opacity:0.3;
filter:alpha(opacity:30);
}
222
Gestion du débordement ?
 Supposons que vous avez déclaré une balise <div> à laquelle vous avez fixé la largeur
et la hauteur. Pourtant, vous y avez mis un texte qui dépasse. Comment la <div> se
comporterait-elle? En fait, elle a tendance à afficher quand même tout le texte qui
(selon le navigateur utilisé) aura l'air qui déborde de la <div>.
<div>
De façon générale, l'Internet des Objets concerne tous les objets pouvant
être connectés à un réseau Internet. Mais aujourd'hui, l'IoT concerne plus
particulièrement les objets connectés équipés de capteurs, de logiciels et
d'autres technologies leur permettant de transmettre et de recevoir des
divfins
données entre eux, à des { d'information ou d'automatisation. Jusqu'à
présent, la connectivité height: 60px;
venait principalement du Wi-Fi, alors qu'aujourd'hui
la 5G et les autres typespadding: 20px; en réseau offrent de traiter presque
de plateformes
border:solid
partout d'immenses ensembles 1pxde#AAAAAA;
de données manière rapide et fiable. Une fois
}
que les terminaux IoT ont collecté et transmis les données, l'objectif est
d'en tirer autant d'informations que possible, et d'en extraire des résultats
et insights de plus en plus précis et sophistiqués. C'est là que les
technologies d'intelligence artificielle (IA) entrent en jeu : grâce à la
puissance de l'analytique avancée et du Machine Learning, elles étendent les
réseaux IoT. </div>
223
Exemple: div {
height: 60px;
padding: 20px;
border:solid 1px #AAAAAA;
}
224
Propriété overflow
 La propriété overflow permet de gérer le débordement sur un élément (de type
conteneur). Elle a comme valeur:
 visible: C'est la valeur par défaut. Le contenu qui dépasse de l'élément est visible
normalement.
 hidden: Le contenu qui dépasse sera masqué.
 scroll: Une barre de défilement apparaît qu'il y ait débordement ou non, mais elle ne
sera opérationnelle que si le contenu dépasse de l’élément. Notez que l'imprimante
peut imprimer tout le contenu, même celui qui dépasse.
 auto: Une barre de défilement apparaît s'il y a un débordement.
Exemple:
div {
height: 60px;
padding: 20px;
overflow:scroll;
225 }
Propriété overflow
Exemple: div {
height: 60px;
padding: 20px;
overflow:scroll;
}
226
Pseudo-classes et pseudo-éléments ?
Pseudo-classes
Une pseudo-classe est un mot clé préfixé par deux points (:) qui s'ajoute à un sélecteur
CSS pour appliquer un style à un élément dans un cas particulier. L'utilisation des
pseudo-classes est très populaire sur les liens hypertextes qui changent de décor selon si
ils sont nouvellement affichés, déjà visités ou survolés... Or, leur utilisation s'étend aux
autres objets HTML tel que les images, les conteneurs, les listes...
Voici la liste des pseudo-classes les plus utilisées en CSS:
 Pseudo-classe :link
La pseudo-classe :link désigne un lien hypertexte dont la page cible (celle spécifiée dans
son attribut href) n'a pas encore été visitée. Elle peut aider les internautes à distinguer
les liens qu'ils n'ont pas encore exploré.
 Pseudo-classe :visited
A l'inverse de link, la pseudo-classe :visited désigne un lien hypertexte dont la page
cible a déjà été visitée. C'est un genre d'historique en quelque sorte.
227
 Pseudo-classe :active
La pseudo-classe :active désigne un lien hypertexte sélectionné. Il s'agit de l'instant où le
visiteur clique sur le lien, si celui-ci reste affiché sur la page (cas où la page est figée après
le clic, ou le lien est ouvert dans une nouvelle fenêtre) on peut voir l'effet de cette
pseudo-classe.
 Pseudo-classe :hover
La pseudo-classe :hover désigne un objet survolé par le curseur de la souris, il peut être
un hyperlien ou n'importe quel autre objet.
Exemple: a {
font-weight: bold;
<a href="#">Lien URL</a>
color: #EE6600;
text-decoration:none;
}
a:hover {
color: #000088;
text-decoration:underline;
228 }
Pseudo-classes (cas Image)
Si vous survolez l'image, vous constatez que le curseur de la sourie change de forme pour
ressembler à celle qu'on a l'habitude de voir sur des liens hypertextes. C'est grâce à la
propriété cursor à laquelle on a attribué la valeur pointer. Il existe d'autres valeurs
comme move, crosshair, default...
Exemple:
#logo {
opacity: 1;
filter:alpha(opacity=100);
cursor:pointer;
}
#logo:hover {
opacity: 0.5;
filter:alpha(opacity=50);
}
229 <img id="logo" src ="images/IOT.jpg" width="300px" height="200px" align="left">
Pseudo-classes (cas Objet Input)
Pseudo-classe :focus
La pseudo-classe :focus désigne un élément activé ou sélectionné suite à un clic ou une
tabulation. C'est souvent utilisé sur les champs de formulaire.
Exemple:
input[type="text"] {
border: solid 1px #CCCCCC;
color: #888888;
padding:10px;
border-radius:4px;
}
input[type="text"]:focus {
border: solid 1px #EE6600;
color:#888888;
outline: none;
}
230
<input type="text" name="login">
Pseudo-classes (cas span)
Pseudo-classe :first-child/Pseudo-classe :last-child
La pseudo-classe first-child désigne le premier élément enfant. Supposons que nous
avons déclaré le sélecteur suivant span:first-child. Le navigateur appliquera le style
associé à toutes les balises <span> qui figurent en tant que premier élément enfant de
n'importe quelle balise. Si le code HTML était comme ceci:
Exemple: Alors la première balise <span> et la dernière
s'attribueraient le style décrit dans le sélecteur.
span:first-child {
border: solid 2px #CCCCCC; <div>
color:blue; <span>Bonjour </span>
} à
<span>tous</span>
span:last-child {
</div>
color:red;
}
231
Pseudo-classes (cas span)
Pseudo-classe :nth-child(n)
Si la pseudo-classe first-child permet d'accéder au premier élément enfant d'un parent
quelconque, la pseudo-classe nth-child(n) quant à elle, permet d'accéder à un élément
enfant de n'importe quel rang et pas qu’au premier. Le paramètre n mis entre les
parenthèses désigne le rang de l'élément à styler. Il s'agit d'un indice numérique qui
commence de 1 (1 étant le premier élément, 2 le deuxième et ainsi de suite...).
Exemple:
<div>
span:nth-child(2) { <span>Bonjour </span> à
border: solid 2px #CCCCCC; <span>tous</span>
color:blue; </div>
}
span:nth-child(1) {
color:blue;
232 }
Pseudo-classes (cas div)
Pseudo-éléments préfixés par deux points (::)
Tout comme les pseudo-classes, les pseudo-éléments sont préfixés par deux points (::)
et ajoutés au sélecteur. Si les pseudo-classe décrivent un état d'un élément (comme un
lien hypertexte survolé), les pseudo-éléments eux accèdent à certaines parties de
l'élément pour les styler.
 Pseudo-élement ::first-letter
Le pseudo-élément ::first-letter désigne la première lettre de l'élément auquel il est
associé. Il permet de donner un style particulier à la première lettre d'un élément.
Exemple:
div::first-letter { <div>Bonjour à tous</div>
font-size: 12pt;
color:red;
}
233
Pseudo-classes (cas div)
Pseudo-éléments préfixés par deux points (::)
 Pseudo-élement ::first-line
Le pseudo-élément ::first-line désigne la première ligne de l'élément. On peut lui donner un
style particulier tout comme pour first-letter. Le contenu de la première ligne peut changer
selon la largeur de la fenêtre du navigateur.
Exemple:
<div>De façon générale, l'Internet des Objets concerne tous les objets pouvant être connectés à un
réseau Internet. Mais aujourd'hui, l'IoT concerne plus particulièrement les objets connectés équipés de
capteurs, de logiciels et d'autres technologies leur permettant de transmettre et de recevoir des
données entre eux, à des fins d'information ou d'automatisation.
</div>
div::first-line {
font-size: 12pt;
color:red;
}
234
Les transformations CSS ?
Fonctions de transformation qui s'appliquent à la propriété transform
Les transformations de l’origine
A partir de la version 3 de CSS il est devenu possible de transformer les objets intégrés en 2D
(et même en 3D) sans vraiment modifier leurs propriétés (largeur, hauteur...). Cette
technique a permis aux designers de réussir des effets avec un minimum de code.
Les transformations d'objets sont appliquées par rapport à son point d'origine. Ce point est
par défaut situé au centre l'objet.
235
Les fonctions de transformation qui s'appliquent à la propriété transform
Pour appliquer une transformation en CSS on utilise la syntaxe suivante:
transform: fonction1() fonction2() fonction3()...
Les fonctions sont séparées par un espace. Cependant on peut toujours utiliser une seule
fonction si on veut.
Aussi ces fonctions contiennent des paramètres qui permettent de personnaliser la
transformation souhaitée. Ces paramètres sont renseignés entre les parenthèses de la fonction.
 Fonction translate()
La fonction translate() permet la translation de l'objet HTML d'un emplacement initial (où
il est normalement défini) à un autre emplacement.
Les coordonnées du nouvel emplacement sont renseignées entre les parenthèses de translate()
et ils sont exprimés en pixel.
236
L'origine des coordonnées, comme on l'a vu précédemment, est le point haut à gauche.
Le premier paramètre de la fonction translate() représente la translation horizontale, et le
deuxième la translation verticale.
Notez que les sens positifs sont vers la gauche et vers le bas. Si vous renseignez des valeurs
négatives à la fonctions alors la translation sera appliquée dans le sens opposé.
Il existe aussi les fonctions translateX() qui réalise une translation horizontale et
translateY() qui réalise une translation verticale. Dans ce cas, nous spécifions une seule
valeur dans les parenthèses.
<div></div>
Exemple:
div {
width: 100px;
height:100px;
background-color:red;
237 transform:translate(100px,30px);
}
La fonction scale()
La fonction scale() permet de redimensionner l'objet HTML (avec son contenu). Les
parenthèses de la fonction peuvent accueillir une seule valeur ou deux valeurs séparées par
une virgule. Ces valeurs désignent le facteur d'agrandissement. Ils n'ont pas d'unité et peuvent
contenir de virgule. S'ils sont supérieur à 1 alors l'objet est agrandit, sinon alors il est rétréci.
Si une seule valeur est renseignée dans les parenthèses, alors le même facteur
d'agrandissement agit sur la largeur et la hauteur de l'objet.
Exemple:
div { <div></div>
width: 100px;
height:100px;
transform:origin(0,0);
transform:scale(1.5);
}
L'origine de l'objet pour que la transformation

238
s'effectue par rapport au point haut à gauche.
La fonction scale()
Exemple 2: div { <div></div>
width: 100px;
height:100px;
transform:scale(2,0.8);
}
239
Fonctions skewX() et skewY()
Exemple:
div { <div></div>
width: 100px;
height:100px;
top: 10px;
left: 30px;
transform:skewX(30deg);
}
div {
width: 100px;
height:100px;
top: 30px;
left: 50px;
transform:skewX(30deg) skewY(30deg);
}
240
Fonction rotate()
Comme son nom l'indique, la fonction rotate() applique une rotation à l'objet autour de l'axe
traversant son origine. Les parenthèses contiennent l'angle de la rotation exprimée en degré.
Selon l'axe de rotation on distingue trois variantes de la fonction rotate():
• rotate() ou rotateZ(): la rotation est appliquée par rapport à l'axe virtuel perpendiculaire
à l'écran (le fameux axe des Z de z-index) qui traverse le point d'origine de l'objet. La rotation
s'applique donc sur le même plan que l'écran.
• rotateX(): la rotation est appliquée par rapport à l'axe horizontale traversant l'origine de
l'objet (l'axe des X). La rotation aura donc un effet 3D
• rotateY(): la rotation est appliquée par rapport à l'axe vertical traversant l'origine de l'objet
(l'axe des Y). La rotation aura aussi un effet 3D
Exemple:
241
Fonction rotate()
Exemple:
div { <div></div>
width: 100px;
height:100px;
transform:rotate(30deg);
}
transform:rotate(0deg);
transform:rotateX(60deg);
242 transform:rotate(90deg); transform:rotate(30deg);

Fonction perspective()
La fonction perspective() permet de prendre en compte les changements des dimensions en
fonction de la profondeur (ou perspectives). Par exemple, si la rotation est appliquée par
rapport à l'axe des X, le côté le plus loin (celui qui, soi-disant, entre dans l'écran) sera plus
petit que celui qui en sort.
La fonction perspective() reçoit une valeur exprimée en pixel qui désigne la distance
(virtuelle) qui sépare l'observateur de l'axe de rotation (qui traverse l'origine de l'objet). Plus
cette distance est petite, plus l'effet de perspective est accentuée et inversement.
Exemple:
div {
width: 100px;
height:100px;
transform:perspective(150px) rotateX(60deg);
}
243
<div></div>
Fonction perspective()
Exemple 2:
div {
width: 100px;
height:100px;
transform:perspective(150px) rotateY(60deg);
}
<div></div>
244
Les transitions CSS ?
Les transitions CSS permettent le passage d'un objet d'un état à un autre d'une
manière progressive créant ainsi une animation. Pour être plus précis, ce type
d'animation s'appelle interpolation de mouvement.
En CSS, on a souvent recours aux transitions avec les pseudo-classes. Par exemple, après avoir
survolé un objet, celui ci se met à bouger pour correspondre aux styles définis par :hover.
Pour mieux comprendre de quoi il s'agit nous allons introduire un exemple à la fin de cette
partie et nous allons définir l’état survolé (grâce à :hover) avec une transition.
Propriété transition-property
Supposons que nous avons créé un objet dont on a défini l'arrière plan (propriété
background) et la bordure ( propriété border), puis nous avons créé des styles
appliquées à une pseudo-classe de cet objet ( :hover par exemple) qui changeront l'arrière
plan et la bordure déjà définis. Si on applique une transition entre l'état initial et l'état survolé,
on imagine que l'arrière plan et la bordure se mettront à s'animer pour correspondre aux
styles définis à :hover.
245
Cependant, CSS permet de désigner quels sont les propriétés qui devront subir la transition et
quels sont celles qui ne s'animeront pas. Il s'agit de la propriété transition-property.
La propriété transition-property accepte comme valeur le nom (ou la famille) de styles sur
lesquelles la transition sera appliquée.
Propriété transition-duration
Comme son nom l'indique la propriété transition-duration permet de spécifier la durée de la
transition (la durée que mettra l'animation pour aller de l'état 1 à l'état 2). Elle est
exprimée en secondes.
Propriété transition-timing-function
La fonction transition-timing-function permet de définir le rythme avec laquelle la transition
sera faite. Elle permet de changer la vitesse de la transition au long de sa durée (on parle de la
courbe d'accélération). Les valeurs que cette propriété peut accueillir sont: …
246
Propriété transition-timing-function: (Les valeurs de cette propriété)
 ease: le mouvement est rapide au début puis ralentit petit à petit jusqu'à l'arrêt complet.
 linear: le mouvement garde la même vitesse du début à la fin de la transition.
 ease-in: le mouvement commence lentement puis gagne en vitesse avec le temps.
 ease-out: le mouvement est rapide au début puis ralentit à la fin (le ralenti avec ease-out
est moins senti qu'avec ease).
 ease-in-out: le mouvement commence lentement et fini lentement, mais il est plus
rapide au milieu de la transition.
Propriété transition-delay
La propriété transition-delay permet de retarder le début de la transition lorsque
l’événement qui la déclenche est détecté.
247
Propriété transition
Cette propriété utilise les paramètres de transition en suivant la syntaxe suivante:
transition: [property] [duration] [timing function] [delay]
Exemple :
transition: background-color 2s ease-in-out 1s
Exemple :
248
Exemple:
.c1 {
.c1:hover {
width: 200px;
background-color:#FFFFFF;
background-color:#CCCCCC;
color:#003569;
padding:10px;
border-bottom:solid 60px #003569;
margin-bottom:1px;
cursor:pointer;
font:10pt verdana;
-webkit-transition:all 0.5s ease;
color:#FFFFFF;
-moz-transition:all 0.5s ease;
border:solid 1px #CCCCCC;
-o-transition:all 0.5s ease;
cursor:pointer;
-ms-transition:all 0.5s ease;
-webkit-transition:all 0.5s eae;
transition:all 0.5s ease;
}
}
<div class="c1">Accueil</div>
<div class="c1">Qui somme-nous? </div>
<div class="c1">Nos produits</div>
<div class="c1">Services</div>
249 <div class="c1">Contact</div>
Les transitions CSS ? 2
Exemple:
.c1 {
.c1:hover {
width: 200px;
background-color:#FFFFFF;
background-color:#CCCCCC;
color:#003569;
padding:10px;
border-bottom:solid 60px #003569;
margin-bottom:1px;
cursor:pointer;
font:10pt verdana;
-webkit-transition:all 0.5s ease;
color:#FFFFFF;
border:solid 1px #CCCCCC;
cursor:pointer;
-ms-transition:all 0.5s ease;
-webkit-transition:all 0.5s eae;
}
}
<div class="c1">Accueil</div>
1 <div class="c1">Qui somme-nous? </div>
<div class="c1">Nos produits</div>
<div class="c1">Services</div>
250 <div class="c1">Contact</div>
Les animations CSS ?
CSS permet d'animer des éléments HTML sans utiliser JavaScript :
 Une animation permet à un élément de passer progressivement d'un

style à un autre.
 Vous pouvez modifier autant de propriétés CSS que vous le souhaitez,
autant de fois que vous le souhaitez.
 Pour utiliser l'animation CSS, vous devez d'abord spécifier quelques
keyframes clés pour l'animation.
251
Dans cette partie, vous découvrirez les propriétés suivantes :
 @keyframes
 animation-name
 animation-duration
 animation-delay
 animation-iteration-count
 animation-direction
 animation-timing-function
 animation-fill-mode
 animation
252
La règle @keyframes
Lorsque vous spécifiez des styles CSS dans la règle @keyframes, l'animation passera
progressivement du style actuel au nouveau style à certains moments. Pour faire fonctionner
une animation, vous devez lier l'animation à un élément.
Exemple:
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
253
Exemple 2:
div {
width: 100px;
height: 100px;
}
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
254 }
La propriété animation-delay
La propriété animation-delay spécifie un délai pour le début d'une animation.
Exemple: div {
width: 100px;
height: 100px;
animation-delay: 2s;
}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
255
La propriété animation-iteration-count
La propriété animation-iteration-count spécifie le nombre de fois qu'une animation doit
s'exécuter.
Exemple:
div {
width: 100px;
height: 100px;
animation-iteration-count: 3;
}
L'exemple suivant peut être utilisé avec la valeur « infinite » pour que l'animation
continue indéfiniment.
256
La propriété animation-direction
La propriété animation-direction spécifie si une animation doit être jouée vers l'avant,
vers l'arrière ou selon des cycles alternés. La propriété animation-direction peut avoir les
valeurs suivantes :
 normal - L'animation est jouée normalement (avant). C'est par défaut
 reverse - L'animation est jouée dans le sens inverse (en arrière)
 alterner - L'animation est jouée d'abord vers l'avant, puis vers l'arrière
 alternate-reverse - L'animation est jouée d'abord en arrière, puis en avant
Exemple:
div {
width: 100px;
height: 100px; animation-delay: 2s;
background-color: red; animation-iteration-count: 3;
animation-name: example; + animation-direction: reverse;
animation-duration: 4s; }
257
La propriété animation-fill-mode
La propriété animation-fill-mode spécifie un style pour l'élément cible lorsque l'animation
n'est pas en cours de lecture (avant son démarrage, après sa fin, ou les deux). Cette propriété
peut avoir les valeurs suivantes :
none -Valeur par défaut. L'animation n'appliquera aucun style à l'élément avant ou après son
exécution
 forwards - L'élément conservera les valeurs de style définies par la dernière image clé
(dépend de la direction de l'animation et du nombre d'itérations d'animation)
 backwards - L'élément obtiendra les valeurs de style définies par la première image clé
(dépend de la direction de l'animation) et les conservera pendant la période de retard de
l'animation.
 Both - L'animation suivra les règles pour l'avant et l'arrière, étendant les propriétés de
l'animation dans les deux sens.
Exemple:
258
La propriété animation-fill-mode
Exemple (Suite):
div {
width: 100px;
height: 100px;
animation-iteration-count: 3;
animation-direction: reverse;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
259
Exemple :
260

CoursDevWebAvancé New P1234

Transféré par

Droits d'auteur :

Formats disponibles

CoursDevWebAvancé New P1234

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

CoursDevWebAvancé New P1234

Transféré par

Droits d'auteur :

Formats disponibles

Royaume du Maroc

Ministère de l'Enseignement Supérieur, de la Recherche Scientifique et de l’Innovation

 Travaux pratiques (10%)

Le modèle OSI (en l'anglais: Open Systems

2) Le modèle OSI permet aux fabricants de

3) Un autre avantage du modèle OSI qu’il

1000BASE-T • 100BASE-TX • 10BASE-T • 10BASE2 • 10BASE5 • ADSL • Bluetooth • Câble

Que trouve-t-on comme informations dans la couche

5) Le navigateur de Bounou analyse le HTML pour mettre la page en forme, et

Le schéma d'une requête

• N'importe quelle machine connectée à Internet peut être un serveur

Il existe de très nombreux en-têtes HTTP différents. Dans un message HTTP,

Par exemple, la plupart des requêtes GET (permettant de récupérer des

• Une URL contient toutes les informations nécessaires pour

 HTML C'est quoi?  Paragraphes, conteneurs (ou

<balise attribut1="valeur1" attribut2="valeur2"

<img src ="images/IOT.jpg" width="300px" height="200px"

<a href="targetpage.html" target="_blank">Page destination</a>

<img class="style1" src ="images/IOT.jpg" width="300px" height="200px" align="left">

<a href=“#top"> Ancre vers le haut de la page </a>

 Supposons que nous voulons créer un formulaire nommée "inscription" utilisant la

<textarea name="textarea" rows="5" cols="33">

 CSS C'est quoi ?  Masquage, opacité et débordement

 Revenant à l’évolution du web …

On peut créer une page Web entière avec HTML seulement,

 En CSS, les sélecteurs déclarent quelle partie du balisage HTML correspond à un

Le sélecteur porte le même

Pour faire simple, prenons le code suivant:

Pourtant, il existe une autre syntaxe qui permet de réussir exactement

L’ inconvénient pour cette méthode:

#id #firstname Sélectionne l'élément avec id="firstname" 4

* * Sélectionne tous les éléments 5

:focus input:focus Sélectionne l'élément d'entrée qui a le focus 23

::first-line p::first-line Sélectionne la première ligne de chaque élément <p> 24

:only-child p:only-child Sélectionne chaque élément <p> qui est le seul 24

:nth-last-child(n) p:nth-last-child(2) Sélectionne chaque élément <p> qui est le deuxième 24

:nth-last-child(n) p:nth-last-child(2) Sélectionne chaque élément <p> qui est le 25

<h1>Teste de la fonction counter</h1>

<div class="intro"> </div>

<div class="intro"> </div>

<div class="intro3"> </div>

<div class="intro3"> .intro3 {

Nom de font-family Exemple: font-family: "Arial Black", Arial, Verdana, serif;

Autres letter-spacing : permet d'ajuster l'espace entre chaque lettres.

Répétition background- repeat : le fond se répète (par défaut)

width: Propriétés min-height :

Largeur width Valeur en px, %, ou encore "auto" (valeur par défaut, la

Hauteur height Idem

Largeur minimale min-width Indiquer une valeur, en pixels par exemple.

Largeur maximale max-width Idem

Hauteur minimale min-height Idem

Hauteur maximale max-height Idem

Raccourci margin Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de

Marge intérieure à droite padding-right Idem

Marge intérieure en bas padding-bottom Idem

Raccourci padding Idem margin

Epaisseur de la bordure border-width Indiquer une valeur en px.

Bordure à gauche border-left Indiquer la couleur, l'épaisseur et le type de

auto: c'est le navigateur qui décide d'ajouter des barres de défilement ou