Technologies Web

1
 Sommaire
I. Généralités
● Terminologie web

● Les types des sites web

II. Le Langage HTML (Syntaxe de base)

III. Initiation à l’utilisation des feuilles de styles CSS

IV. Initiation à la programmation en PHP

V. Interfaces avec MySQL

VI. Hébergement sur des serveurs internet

VII. CMS

2
4
• Systèmes d’exploitation • Réseaux informatiques,
• Fichier • Serveur
• Dossier • Client
• Chemin • Architecture client-
• url serveur
• Nom de domaine • Adresse IP
• Browser ou navigateur • Internet
• Langages de • Protocoles
programmation • http
• Restauration/Sauvegarde • FTP
• Import/Export • Numéro du Port
5
Définition

Le système d'exploitation ( Operating System), est chargé d'assurer la

liaison entre les ressources matérielles, l'utilisateur et les applications.
Rôle

• Gestion du processeur

• Gestion de la mémoire vive

• Gestion des entrées/sorties

• Gestion de l'exécution des applications

• Gestion des droits

• Gestion des fichiers

6
Exemples

• Windows (Windows11 ,Windows10, Windows7, Windows Vista,

Windows XP, Windows 2003 Server )

• UNIX/Linux (Redhat, Debian, Solaris, FreeBSD…)

• Mac OS

• Android

• IOS

7
 Browser ou navigateur

8
Définition
 Un Ficher est une collection d'informations numériques réunies
sous un même nom, enregistrées sur un support de stockage tel
qu'un disque dur, un CD-ROM, ou une bande magnétique, et
manipulées comme une unité.
 Un Fichier est une information numérique constituée d'une
séquence d'octets.

Caractéristiques
Un Ficher est caractérisé par :
 Le nom de fichier.
 L’extension : renseigne sur la nature des informations contenues
dans le fichier et donc des applications utilisables pour
manipuler ce fichier.
 Métadonnées : les informations sur la taille du fichier, dernière
modification, l’auteur,,,
 Le contenu de fichier. 9
 Type de ficher extensions
Texte .txt, ,.log,.ini, .conf …

document .doc, .docx….

image .gif, .jpg, .bmp, .png,

audio .wav, .ra, .ram, .mp3

vidéo .avi, .mpg, .mov, .mkv

exécutables .exe, .bat

compressés .zip, .rar, .gz
Propriétaire .ppt, .pptx, .xls, .c, .java,
.aspx
10
 Un dossier est un fichier dont le contenu est la liste des fichiers
référencés.
 Chaque fichier ou répertoire est référencé par un autre répertoire, ce
qui forme une hiérarchie cohérente, appelée aussi arborescence, dont le
point d'entrée est le répertoire racine.
 La racine est unique sur un système de type UNIX, ou sur une
partition Windows (par exemple C:).

11
 Chemin relatif
 spécifie l'emplacement d'un fichier par rapport à l'emplacement
du fichier HTML qui l'inclut.
 Les chemins relatifs sont généralement plus flexibles et portables.
 Supposons que le fichier HTML est dans le dossier site et l’image
est dans le dossier images à l'intérieur de site.
Le chemin relatif serait "images/monimage.jpg".

 Chemin absolu
 donne l'emplacement exact d'un fichier par rapport au système
de fichiers entier.
 Exemple de chemin absolu sur un système de fichiers Windows :
C:\site\images\monimage.jpg
 Exemple de chemin absolu sur un système de fichiers Unix/Linux :
/root/Logfile/myimage.jpg

12
 Nom de domaine

13
 URL
http://www.ensat.ac.ma/portail/index.html

14
Dreamweaver

15
Définition

un langage de programmation est un langage qui permet de décrire

l'ensemble des actions consécutives qu'un ordinateur doit exécuter
Exemples

• C , C++ et C# • LISP et PROLOG

• JAVA • Perl et python

• VB • Cobol

• PHP, ASP et JSP

16
 Définition
la sauvegarde (backup) est l'opération qui consiste à dupliquer et à
mettre en sécurité les données contenues dans un système
informatique, Ce terme est proche de deux notions :

• l'enregistrement des données, qui est l'opération d'écriture des données

sur un élément d'enregistrement durable, tel qu'un disque dur, une clé
USB, des bandes magnétiques.

• l'archivage, qui consiste à enregistrer des données sur un support à des

fins légales ou historiques.

17
 Définition
La restauration est l'action consistant à remettre en place un état précédent
d 'un système

• Restauration de OS

• Restauration de DB

• Restauration d’application

18
19
Définition

Un réseau est un Ensemble des ordinateurs et périphériques connectés

les uns avec aux autres.

Types des réseaux Types des réseaux

• Peer to peer • LAN

• Client serveur • MAN

• WAN

20
Définition

Un serveur informatique, est un ordinateur ou un programme informatique

qui rend service aux ordinateurs et logiciels qui s'y connectent à travers un
réseau informatique

Exemples

• Serveur de données

• Serveur de Fichiers

• Serveur d’application

• Serveur Web

• Serveur de messagerie
21
22
Définition

Le terme SERVEUR fait référence à tout processus qui reçoit une demande
de service (requête) venant d'un client via un réseau, traite cette demande
et renvoie le résultat (réponse) au demandeur (le CLIENT).
Exemple

Courrier Courrier
entrant sortant

Serveur POP3 Serveur SMTP

Poste utilisateur

23
Définition

On appelle logiciel client un programme qui utilise le service offert par un

serveur. Le client envoie une requête et reçoit la réponse.
Exemples

• Navigateur web

• Outlook

• Filezilla

• Skype

• Facebook Messanger,

• WhatsApp 24
Définition

• On appelle un modèle client/serveur, tout modèle de

fonctionnement logiciel dans lequel plusieurs programmes
autonomes communiquent entre eux par échanges de messages.

• l'architecture client/serveur permet à une application de

s'adresser à une autre application, physiquement à distance, à
travers un protocole d'échange standardisé, pour lui demander
de réaliser une tâche à son faveur.

25
Fonctionnement

• Le logiciel serveur attend des requêtes provenant des logiciels clients.

• Dès qu'il reçoit une requête, il parcourt ses contenus pour trouver l'élément
demandé puis le retourne au logiciel client qui l'a demandé.

• Quant au logiciel client, on l'utilise pour préparer une requête à adresser

vers un serveur.

• Un programme serveur peut gérer, en général, plusieurs requêtes à la fois

provenant de clients différents ou identiques.

26
Architecture 2-Tier

27
Architecture 3-Tier

28
29
 Un protocole est un ensemble de règles et de procédures à
respecter pour émettre et recevoir des données sur un réseau
informatique (ou entre processus).

 L’information est transmise par Internet grâce à un ensemble

standardisé de protocoles de transfert de données, qui
permet l'élaboration d'applications et de services variés
comme le courrier électronique, le transfert de fichiers,
la messagerie instantanée, le pair-à-pair et le World Wide
Web.
30
 Les protocoles applicatifs sont des protocoles spécialisés dans la

communication de certaines données ou la réalisation

d’opérations spécifiques.

• HTTP : Hypertext Transfert Protocol, protocole de transfert hypertexte (c’est le

protocole du Web)

• FTP : File Transfert Protocol, protocole de transfert de fichiers

• SMTP : Simple Mail Transfert Protocol, protocole de transfert d’email entre

deux boites aux lettres.

• POP : Post Office Protocol, protocol du « bureau de poste », protocole

permettant de récupérer sur l’ordinateur local les emails stockés dans une boite

aux lettres 31
Protocole Numéro Port
HTTP 80
FTP 21-20
DHCP 67
DNS 53
POP 110
IMAP 143
SMTP 25
Telnet 23

32
 Client HTTP= NavigateurServeur
HTTP(port :80).
 Aspirateurs Web.
 Exemple serveurs Web (HTTP):
• Apache
• IIS de Microsoft
• Google web server

33
 Client FTP (4 champs à renseigner).
 Clients FTP (exemples).
 Port 21.

34
35
36
 Internet est le réseau informatique mondial

accessible au public. C'est un réseau de

réseaux, composé de millions de réseaux

aussi bien publics que privés, universitaires,

commerciaux et gouvernementaux, eux-

mêmes regroupés en réseaux autonomes

37
 L'internet ayant été popularisé par
l'apparition du World Wide Web
(WWW), les deux sont parfois confondus
par le public non averti.

 Le World Wide Web n'est pourtant que

l'une des applications d'internet.

38
 Les travaux sur le sujet du web ont commencé à
partir de 1990, au CERN, Organisme européen basé à
Genève (Suisse).

 Le britannique Tim Berners Lee inventa une façon de

communiquer, un langage, qui allait être utilisé via
Internet avec de belle pages Web Contenant de textes,
images, videos, ..etc

39
 Ce terme est souvent utilisé à tort pour désigner
Internet, alors qu’il représente un de ses services,
le plus populaire et le plus convivial.
 Son succès est dû à sa caractéristique de support
multimédia, car il est composé de milliers de
fichiers contenant du texte , des images, du son,
stockés sur des milliers de sites à travers le
monde.

40
 C’est un document qui peut contenir du texte, des
images, des formulaires à remplir, et divers autres
éléments multimédia et interactifs.
 Les pages web sont en fait des fichiers au formats
HTML.

41
 La page Web est l’affichage généré par le moteur de rendu
du navigateur. Cet affichage est construit à partir du fichier
HTML, des différents éléments qui y sont définis, et des
fichiers externes dont elle a besoin et qu’elle désigne (feuilles
de styles, scripts d’animation, images, vidéo, etc.)

42
 Une page web statique est une page web dont le
contenu ne varie pas en fonction des caractéristiques de
la demande, c'est-à-dire qu'à un moment donné tous les
internautes qui demandent la page reçoivent le même
contenu.

 Une page web statique n'est programmée qu'avec les

langages de programmation de base : HTML et
facultativement CSS et Javascript

43
44
 Une page Web dynamique est générée à la demande et
son contenu varie en fonction des caractéristiques de la
demande (heure, adresse IP de l'ordinateur du
demandeur, formulaire rempli par le demandeur, etc.)
qui ne sont connues qu'au moment de sa consultation.

45
 Lors de la consultation d'une page web dynamique,
un Serveur HTTP transmet la requête à un Moteur de
script qui génère le contenu de la page.

 Les Moteurs de script générant des pages web

dynamiques sont fréquemment écrits avec les
langages PHP, JavaServer Pages (JSP) ou Active Server
Pages (ASP).

 Les moteurs de script permettent l’interogation et

l’interaction avec les bases de données

46
47
48
 un support de communication efficace et important
 Une immense source d'information sur votre
entreprise
 Pour offrir des informations accessibles 24h sur 24, 7
jours sur 7, de n'importe quel point géographique.
 Un site Internet augmente votre crédibilité
 Document publicitaire évolué

49
 Rendre service à vos clients et à vos collaborateurs
 Internet ouvre vos portes à une vaste clientèle
potentielle
 Connaissez mieux vos clients
 Tenez vos clients et prospects au courant des
changements dans votre entreprise.

50
 Les sites vitrine
 Les sites catalogue
 Les sites d'information
 Les sites e-commerce
 Les sites institutionnels
 Les sites personnels
 Les sites communautaires
 Les sites intranet
 Les sites de communication
 Les sites de e-learning
51
I. Exemples des sites

vitrine personnel institutionnel information

communautaire catalogue e-commerce e-commerce

52
53
54
55
56
57
58
59
60
 un langage de balisage qui permet d’écrire de l’hypertexte

 Permet de structurer sémantiquement et de mettre en forme

le contenu des pages, d’inclure des ressources multimédias
dont des images, des formulaires de saisie, ainsi que des
éléments programmables.

 Il est souvent utilisé conjointement avec des langages de

programmation (JavaScript /PHP) et des formats de
présentation (feuilles de style)

61
 Le HTML n'est pas un langage de programmation. Il s'agit d'un
langage permettant de décrire la mise en page et la forme d'un
contenu rédigé en texte simple

 Une page HTML est ainsi un simple fichier texte contenant des
balises (parfois appelées marqueurs ou repères ou tags en anglais)
permettant de mettre en forme le texte, les images, etc.

 ces balises permettent d'indiquer la façon dont doit être présenté le

document et les liens qu'il établit avec d'autres documents.

62
 le langage HTML est un standard, c'est-à-dire qu'il
s'agit de recommandations publiées par un consortium
international : le World Wide Web Consortium (W3C).

 Certains éditeurs de logiciels ajoutent des instructions

HTML propriétaires, c'est-à-dire ne faisant pas partie
des spécifications du W3C.

63
<html>
<head>
ici les balises de l’entête

<title>ici le titre de la page</title>

</head>
<body>ici le contenu de la page</body>
</html>
64
Structure de base :
<html><Head><title></title></Head><body></body></html>

……
<Html></Html>… Début et fin de fichier Html
<Head></Head> ... Zone d'en-tête d'un fichier Html
<Title></Title> ... Titre affiché par le navigateur (élément de HEAD)
<Body></Body> ... Début et fin du corps du fichier HTML

65
 Une balise est un élément de texte (un nom) encadrée
par le caractère inférieur (<) et le caractère supérieur
(>). par exemple « <h1> ».
 A chaque balise de début d'une action, soit < ... >,
correspond une balise de fin d'une action </ ... >.
 les balises ne sont pas sensibles à la casse "case
sensitive". Il est donc équivalent d'écrire <HTML>,
<html>, <Html>.

66
 <B> bonjour tout le monde </B>
 bonjour tout le monde

 <U> bonjour tout le monde </U>

 bonjour tout le monde

 <U> bonjour tout </U> le monde

 bonjour tout le monde

67
 La déclaration <!DOCTYPE> doit être la
première chose à écrire pour un document html
avant même la balise <html>
 <!DOCTYPE> n’est pas une balise html mais
plutôt c’est une instruction au navigateur pour
lui indiquer le type du document, ainsi que la
version du html utilisée.
68
Il est possible d'ajouter des éléments d'information
dans une page web sans que ceux-ci soient
affichés à l'écran grâce à la balise de
commentaires.

<!-- c'est un commentaire -->

69
 <B><U> bonjour tout le monde </U></B>
 bonjour tout le monde

 <B><U> bonjour tout </U>le monde </B>

 bonjour tout le monde

 <U><B> bonjour</B> <i>tout le monde</i>

</U>
 bonjour tout le monde Faites ces exemples

70
 Les exemples ci-dessous ne sont pas correct :
 <B><U> bonjour tout le monde </B></U>

 <B><U> bonjour <i>tout le monde </u></i></B>

71
 Un attribut est un élément, présent au sein de la
balise ouvrante, permettant de définir des
propriétés supplémentaires

 Les attributs se présentent la plupart du temps

comme une paire clé1=valeur1 clé2=valeur2
…etc.

72
 Exemples:
 <p align="right">Exemple de paragraphe</p>

 <FONT SIZE=5 COLOR="#0000FF">votre texte

ici</FONT>
 <BODY bgcolor = "colcod " > Couleur d’arrière plan</BODY>
 <BODY background = "urlimg" > Image d’arrière plan</BODY>

Faites ces exemples

73
 La définition d’un paragraphe ce fait à l’aide de la balise <P></P>

• Exemple:

o <p>Paragraphe 1</p>

o <p>Paragraphe 2</p>
Faites ces exemples
o <p>Paragraphe 3</p>

 La définition de titres se fait à l’aide de balises <Hn></Hn> (n: allant de

1 à 6) o <H1>Titre1</H1> o <H4>Titre4</H4>

• Exemple: o <H2>Titre 2</H2> o <H5>Titre 5</H5>

o <H3>Titre 3</H3> o <H6>Titre 6</H6>

74
Balise Description Exemple

<B>.. </B> Gras Faire l’exemple

<I>.. </I> italique Faire l’exemple

<U>.. </U> souligné Faire l’exemple

<SUP>.. </SUP> exposant Faire l’exemple

<SUB>.. </SUB> indice Faire l’exemple

<BR> Retour à la ligne Faire l’exemple

75
Balise Description Exemple
<BIG>.. </BIG> Agrandissement de taille Faire l’exemple

<SMALL>.. Réduction de la taille Faire l’exemple

</SMALL>
<EM>.. </EM> Italique Faire l’exemple

<Strong>.. </Strong> Mise en Gras du texte Faire l’exemple

<FONT Color= Texte en couleur Faire l’exemple

cod>..</FONT>

<FONT size= Taille des caractères où X Faire l’exemple

X>..</FONT> est une valeur de 1 à 7

76
 Balise Description Exemple

<Font> Pour spécifier La police Faire l’exemple

<center> centré Faire l’exemple

<P> Paragraphe Faire l’exemple

<HR> Séparateur horizontal Faire l’exemple

<Hn> Niveau de titre n=1 to 6 Faire l’exemple

NB: align=left, right, center, justify 77

Balise Description Exemple
<Blockquote> introduit une citation Faire l’exemple

<PRE> Texte préformaté: Affichage des Faire l’exemple

espaces et sauts de ligne

<ADDRESS> Pour écrire une adresse Faire l’exemple

<DIV> diviser un document en plusieurs Faire l’exemple

sections

<Span> conteneur générique en ligne (inline) Faire l’exemple

pour les contenus phrasés

78
Caractère Code HTML
espace &nbps;
" &quot;
& &amp;
ç &ccedil;
è &egrave;
é &eacute;
ê &ecirc;
î &icirc;
Ç &Ccedil;
È &Egrave;
É &Eacute;
< &lt;
> &gt; 79
Notez toutefois que les navigateurs actuels reconnaissent
les caractères accentués, ainsi vous pouvez entrer des
caractères accentués directement sous votre éditeur de
texte, mais votre page HTML risque d'être illisible depuis
l'étranger ou à partir de certains navigateurs.

80
 Liste non-ordonnée : <UL>…</UL>
 Liste ordonnée : <OL>…</OL>
 Eléments de la liste : <LI>

<H1 align=center>Les languages web</H1>

<UL>
<LI>ASP</LI>
<LI>PHP </LI> Faites ces exemples
<LI>JSP</LI>
</UL>
<P>
<H3 align=left >Quelques WYSIWYG</H3>
<OL>
<LI>Front page
<LI>Dreamweaver
<LI>web expert
81
 Définition du tableau <TABLE></TABLE>
 Définition d'une ligne <TR></TR> (Table Row)
 Définition d'une cellule <TD></TD> (Table Data)
Exemple 1
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

82
 border
 width
 Cellspacing Faites l’exemple
 cellpadding
Exemple
<TABLE width=20% border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

83
 border
 width
 cellspacing
 cellpadding
Exemple
<TABLE width=20% border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

84
 border
 width
 cellspacing
 cellpadding
Exemple
<TABLE width=20% border=2 cellpadding=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>

</TABLE>

85
 width
 Rowspan
 Colspan
 BGCOLOR="#$$$$$$"
 Align= left/center/right
 Valign= top/middle/bottom
 <tr align=…> et <td align=…>
 <tr valign=…> et <td valign=…>

86
 Exemples
<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>

87
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

88
<CENTER><TABLE width=60% border=1>
<TR><TD width=33%>cellule1</TD><TD
width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
<TR><TD width=33%>cellule1</TD><TD
width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
</TABLE></CENTER>

89
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel
2</TD>
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>

90
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>

91
 <IMG SRC=“chemin vers l'image">
 Attributs
 alt="****"
 width=?
 height=?
 border=?
 Align

align=left
align=right

92
Exemple
<IMG height="220px" width="320px" border="2" align=right
SRC=“images/logo-ensat.jpg" alt="Logo-ENSAT"> </IMG>

ENSA de Tanger 2014 93

<A HREF="URL ou Adresse">le lien ici</A>

94
 Les liens externes
Exemple
<a href=“www.facebook.com“ >visitez le site
facebook </a>
Les liens locaux
Exemple
<a href=“projets.htm“ >la liste des projets </a>
Les liens locaux
Exemple
<a href=“ cours/informatique/PERL.html “> fiche
de cours perl </a>
95
 Les signets

les liens peuvent aussi pointer vers un endroit précis du même

document ou d'un autre fichier. C'est ce qu'on appelle les ancres,

ancrages, signets ou pointeurs

<A NAME="nom_de_la_cible">...</A> déclaration de
la cible
<A HREF="#nom_signet">...</A> lien vers la cible
dans le même document
<A HREF="URL#nom_signet">...</A> lien vers la
cible dans un autre document
96
 Les signets: exemple

 Signet dans un même document

<a name="bas">On est en bas</a>
<a href="#bas">En bas</a>
 Signet dans un document externe
<a href="Liens2.html#bas">Cible
dans un autre document</a>

97
 Les emails
<a href="mailto:khannous@ensat.ac.ma">contactez
nous</a>

<a
href="mailto:khannous@ensat.ac.ma?subject=bo
njour">contactez nous</a>

98
 Les cadres de destination

 _blank: ouvrir le lien dans une nouvelle fenêtre

 _top: ouvrir le lien dans la page entière
 _self: ouvrir le lien dans le même cadre (frame)
 _parent: ouvrir le lien dans le cadre ou frame pére

Exemple
<a target="_blank" href=“images.html">la page contenant
les images</a>

99
 <BODY BGCOLOR="#$$$$$$"> :Couleur d’arriére plan
 <BODY TEXT="#$$$$$$"> :Couleur de texte
 <BODY LINK="#$$$$$$> :Couleur de lien
 <BODY VLINK="#$$$$$$> :Couleur de lien visité
 <BODY ALINK="#$$$$$$> :Couleur de lien actif
 <BODY BACKGROUND="Adresse“: image d’arriére
plan

100
 #FF0000 - Avec ce code HTML, nous demandons au
navigateur d’afficher un maximum de rouge, et ni bleu ni
vert. Le résultat est du rouge

#00FF00 – Ce code HTML affiche du vert, sans bleu ni rouge.

Le résultat est vert

#0000FF - Ce code HTML affiche du bleu, sans rouge ni vert.

Le résultat est bleu

#FFFF00 – Combinaison de rouge et vert donne du jaune

#CCEEFF - Prenez un peu de rouge, un peu plus de vert et

un maximum de bleu pour obtenir la couleur du ciel

101
102
 CSS est l'abréviation de « Cascading Style Sheets »
 CSS est un langage de style qui définit la présentation
des documents HTML
 CSS couvre les polices, les couleurs, les marges, les
lignes, la hauteur, la largeur, les images d'arrière-plan,
les positionnements évolués et bien d'autres choses.
 HTML peut être (mal)utilisé pour la présentation des
sites Web. Mais CSS offre plus d'options et se montre
plus précis et sophistiqué

103
 Le contrôle de la présentation de plusieurs documents
par une seule feuille de style ;

 Maintenance facile : possibilité de changement global de

style de toutes les pages web à travers le changement
d’un seule fichier de style

 Moins de code permet un chargement rapide de pages

web, l’écriture d’une règle CSS pour un type de balise et
l’appliquer à toutes les autres occurrences

 De nombreuses techniques évoluées et sophistiquées

par rapport à HTML grâce à une large variété
d’attributs.
104
 Beaucoup de propriétés des feuilles de style en cascade
(CSS) sont similaires à celles de HTML

 La syntaxe CSS de base

Avec HTML,
<body bgcolor="#FF0000">

Avec CSS,
body {background-color: #FF0000;}

105
body {background-color: #FF0000;}

106
Il y a trois façons d'appliquer le style CSS à un document HTML :

 Méthode 1 : Dans la ligne (l'attribut style)

 Méthode 2 : Interne (Balise style)

 Méthode 3 : Externe (un lien vers une feuille de style)

107
Méthode 1 : Dans la ligne (l'attribut style)

<p style="color: blue;">

108
Méthode 2 : Interne (Balise style)

109
Méthode 3 : Externe (un lien vers une feuille de style)

110
 Méthode 3 est la méthode la plus recommandée

<link rel="stylesheet" type="text/css" href="style.css" />

Ce lien instruit le navigateur d'utiliser la présentation

du fichier CSS pour afficher le fichier HTML.

Ainsi, on peut utiliser un seul fichier CSS pour

contrôler la présentation de plusieurs documents
HTML.
111
• Schéma explicatif

112
• Faites l’exemple vous-même
 index.html

 Style.css

113
o La propriété color décrit la couleur d'avant-
plan d'un élément.
• h1 {
color: #ff0000;
}

114
o La propriété background-color décrit la couleur d'arrière-plan
des éléments.
• Pour changer la couleur d'arrière-plan d'une page entière, il
faudrait donc appliquer la propriété 'background-color' à
l'élément <body>.

body {
background-color: #FFCC66;
}

h1 {
color: #990000;
background-color: #FC9804;
}
115
o Pour insérer une image en arrière-plan d'une page Web,
appliquez simplement la propriété background-image à
l'élément <body> et indiquez le chemin de l'image.

body {
background-color: #FFCC66;
background-image: url("papillon.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}

116
o Par défaut l’image se répète horizontalement et
verticalement pour couvrir la totalité de l'écran. Ce
comportement est contrôlé par la propriété background-
repeat

body {
background-color: #FFCC66;
background-image: url("papillon.gif");
background-repeat: repeat-x; /* ou repeat-y ou repeat ou no-repeat */
}
h1 {
color: #990000;
background-color: #FC9804;
}
117
La propriété background-attachment définit si l'image d'arrière-
plan est fixe ou bien défile avec l'élément conteneur.
body {
background-color: #FFCC66;
background-image: url("papillon.gif");
background-repeat: repeat;
background-attachment: fixed; /* ou scroll */
}
h1 {
color: #990000;
background-color: #FC9804;
}

Vous avez deux options :

• fixed : L'image est bloquée, elle reste fixe lorsque vous
faites défiler la page.
• scroll : L'image défile avec la page, elle n'est pas bloquée.
118
 Par Défaut : Coin Supérieur Gauche
• Lorsque vous ajoutez une image d'arrière-plan, elle trouve naturellement sa
place dans le coin supérieur gauche de l'écran.
Liberté de Positionnement avec 'background-position'
• La propriété 'background-position' offre une flexibilité totale en permettant de
changer cette position préétablie.
• Vous êtes libre de placer votre image d'arrière-plan précisément là où vous le
souhaitez sur l'écran.
body {
background-color: #FFCC66;
background-image: url("papillon.gif");
background-repeat: no-repeat;
background-position: center; /* ou top, bottom, left, right, ou coordonnées */
}

o Les coordonnées peuvent s'exprimer en pourcentages de la largeur de l'écran, ou en

unités fixes (pixels, centimètres, etc.), ou on peut utiliser les mots-clés "top", "bottom",
"center", "left" ou "right".
119
Coordonnées Flexibles
• Exprimez les coordonnées en pourcentages de la largeur de l'écran.
Unités Fixes
• Utilisez des unités fixes telles que pixels, centimètres, etc.
Mots-Clés Intuitifs
• Optez pour des mots-clés comme "top", "bottom", "center", "left" ou "right".
Liberté Totale de Positionnement
• La diversité des options permet une personnalisation précise de l'emplacement
de l'image d'arrière-plan sur la page.

body {
background-position: 50% 50%; /* Centre de l'écran */
}

120
o Le modèle suivant illustre ce système :

121
o Le tableau suivant fournit quelques exemples :

Valeur Description
L'image est positionnée à 2 cm de la
background-position: 2cm 2cm
gauche et à 2 cm du haut de la page
L'image est positionnée au centre et à
background-position: 50% 25%
un quart de la page vers le bas

L'image est positionnée au coin

background-position: top right
supérieur droit de la page

122
o La propriété 'background' est un raccourci pratique pour regrouper
toutes les propriétés liées.
o Au lieu d'énumérer chaque propriété séparément, simplifiez avec
'background‘.

/* Propriétés Séparées */
body {
background-color: #FFCC66;
background-image:
url("papillon.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
/* Équivalent avec 'background' */
body {
background: #FFCC66 url("papillon.gif") no-repeat fixed right bottom;
}
123
Exercice 1 : Fond de Page Créatif
 Créez une page HTML simple avec un titre (<h1>), un paragraphe (<p>), et un lien
(<a>).
 Appliquez un fond de page avec une couleur (background-color) différente pour le
corps (body).
 Utilisez la propriété background-image pour ajouter une image de fond à la page.
 Explorez différentes propriétés telles que background-repeat et background-
attachment pour personnaliser l'apparence.

Exercice 2 : Image de Fond Centrée

 Créez une nouvelle page HTML avec un titre et un paragraphe.
 Utilisez la propriété background pour définir une image de fond centrée sur la page.
 Expérimentez avec différentes valeurs de background-position pour placer l'image de
manière créative.
 Exercice 3 : Style Compact avec 'background‘
Modifiez votre première page HTML (Exercice 1) pour utiliser la propriété background de
manière concise.
 Utilisez background pour définir la couleur de fond, l'image de fond, et d'autres
propriétés en une seule ligne.

ENSA de Tanger 2014 124

Exercice 4 : Navigation Artistique

 Créez une page HTML avec une barre de navigation (utilisez la balise <nav> et des liens <a>).
 Appliquez un fond de page avec une couleur.
 Utilisez la propriété background-image pour ajouter une texture subtile à la barre de navigation.
 Expérimentez avec différentes propriétés de fond pour rendre la navigation visuellement
attrayante.

Exercice 5 : Effet Parallax

• Créez une page HTML avec plusieurs sections.

• Appliquez un fond de page avec une image de fond différente pour chaque section.
• Utilisez background-attachment pour créer un effet parallax en faisant défiler la page.

ENSA de Tanger 2014 125

 font-family
 font-style
 font-variant
 font-weight
 font-size
 font

126
o La propriété font-family sert à indiquer la liste
prioritaire des polices à utiliser pour l'affichage
d'un élément donné ou d'une page Web.

o Si la première police de la liste n'est pas disponible

sur l'ordinateur utilisé pour accéder au site, la
police suivante est essayée et ainsi de suite jusqu'à
ce qu'il y en ait une qui convienne.
o Exemple:
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
127
o La propriété font-style définit si le style de la
police concernée doit être
normal, italic ou oblique.
o Dans l'exemple à suivre, tous les titres balisés par
des éléments <h2> s'afficheront en italiques.
o Exemple:
h1 {font-family: arial, verdana, sans-serif;}
h2 {
font-family: "Times New Roman", serif;
font-style: italic;
}
128
o La propriété font-variant sert à choisir entre les
variantes normal ou small-caps (petites capitales)
d'une police.
o Une police small-caps utilise des lettres en
majuscules de taille réduite à la place des lettres en
minuscules.
o Exemple:
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

129
o La propriété font-weight décrit avec quel degré de
graisse (ou de « noir ») présenter la police.
o Elle peut avoir une graisse normal ou bold
o Exemple:
p{
font-family: arial, verdana, sans-serif;
font-weight: bold;
}

130
 Le corps d'une police se règle par la
propriété font-size.
 On peut choisir parmi beaucoup d'unités
différentes (par exemple, pixels et pourcentages)
pour décrire les corps des polices.
o Exemple:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

131
 Avec la propriété raccourcie font, il est possible de
couvrir toutes les différentes propriétés de police en
un seul coup.
 Exemple:
p { font-style: italic; équivalent à
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
p { font: italic bold 30px arial, sans-serif; }
 L'ordre des valeurs de la propriété font est le
suivant :
font-style | font-variant | font-weight | font-size | font-family
132
 text-indent
 text-align
 text-decoration
 letter-spacing
 text-transform

133
o La propriété text-indent permet d'ajouter une touche
d'élégance aux paragraphes de texte en appliquant
une indentation ou espacement à la première ligne du
paragraphe.

o Dans l'exemple suivant, un alinéa de 30px est appliqué

à tous les paragraphes balisés par un élément <p>

o Exemple:
p { text-indent: 30px; }

134
o La propriété CSS text-align correspond à l'attribut
align utilisé dans les versions anciennes de HTML.
o Le texte peut être aligné à gauche (left),
à droite (right), centré (center),
ou justifié (justify).

o Exemple:
h1 { text-align: right; }
h2{ text-align: center; }
p { text-align: justify; }

135
o La propriété text-decoration permet d'ajouter des
« décorations » ou « effets » différents au texte. Par
exemple, on peut souligner le texte, le barrer, ou
tracer un trait au-dessus, etc.

o Exemple:
h1 { text-decoration: underline; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }

136
o L'espacement entre les caractères du texte peut
être défini avec la propriété letter-spacing. La
valeur de la propriété est simplement celle de
l'espacement désiré
o Exemple:
h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; }

137
 La propriété text-transform contrôle la
capitalisation du texte. On peut choisir
une capitalisation initiale, une mise en
majuscules ou une mise en minuscules.
 Exemple:
h1 { text-transform: uppercase; }
h2 { text-transform: lowercase; }
li { text-transform: capitalize; }

138
  Il est possible d’appliquer aux liens les propriétés
qui concernent l’ajustement de couleurs, de la
police..etc.
 CSS permet aussi de définir ces propriétés
différemment, selon que le lien est visité, non visité,
activé, ou si le curseur le survole. on utilise ce qu'on
appelle des pseudo-classes
 a:link
 a:visited
 a:active
 a:hover
139
o Une pseudo-classe permet de prendre en
considération des conditions et événements différents
pour la définition d'une propriété sur une balise
HTML
o Exemple:
Un lien est susceptible d'avoir plusieurs états. Par exemple, il peut être
visité ou non. Vous pouvez utiliser des pseudo-classes pour assigner
des styles différents aux liens visités et non visités.

a:link { color: blue; }

a:visited { color: red; }
140
o La pseudo-classe :link est utilisée pour les liens
menant aux pages que l'utilisateur n'a pas visitées.

o Exemple:
a:link { color: #6699CC; }

141
o La pseudo-classe :visited est utilisée pour les liens
menant aux pages que l'utilisateur a visité.

o Exemple:
a:visited { color: #660099; }

142
o La pseudo-classe :active est utilisée pour les liens
qui sont activés

o Exemple:
a:active { background-color: #FFFF00; }

143
o La pseudo-classe :hover est utilisée lorsque le
pointeur de la souris survole un lien.

o Exemple:
a:hover {
color: orange;
font-style: italic;
}

144
Le regroupement permet d’appliquer un style
spécial à un élément ou à un groupe d'éléments
particuliers. Ceci est possible grâce aux attributs
suivants:

 class
 id

145
o L’attribut class permet de regrouper un ou plusieurs
éléments afin de leurs attribuer un style personnalisé.
o Exemple:
<p>Villes du nord</p>
<ul> <li><a href= "tanger.htm " class="nord">Tanger</a></li>
<li><a href= " tetouan.htm " class="nord">Tetouan</a></li></ul>
<p>Villes du sud</p>
<ul> <li><a href= " dakhla.htm " class="sud">Dakhla</a></li>
<li><a href= " layoune.htm " class="sud">Layoune</a></li></ul>

146
o Outre le regroupement d'éléments, on peut avoir
besoin d'identifier un élément unique. Pour cela, on
utilise l'attribut id.
o Exemple:
<p>Autres Villes</p>
<ul>
<li><a href= "kenitra.htm">Kenitra</a></li>
<li><a href= "rabat.htm"
id="capitale">Rabat</a></li>
<li><a href= "casablanca.htm">Casablanca</a></li>
</ul>
147
Les éléments <span> et <div> servent à regrouper
et structurer un document et seront souvent utilisés
avec les attributs class et id.

 Le regroupement avec <span>

 Le regroupement avec <div>

148
 CSS peut utiliser l'élément <span>pour ajouter des
caractéristiques visuelles à des parties spécifiques
du texte des documents.
 Exemple:
<p>Tôt couché et tôt levé
<span class="bienfait">fortifie</span>,
<span class="bienfait">enrichit</span>
et <span class="bienfait">rend avisé</span>.
</p>
span.bienfait { color:red; }

149
 <div> sert à regrouper un ou plusieurs éléments de
type bloc.
 Exemple:
<div id="democrats">
<li>John F. Kennedy</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li> </ul> </div>
<div id="republicans">
<ul> <li>George Bush</li>
<li>George W. Bush</li> </ul> </div>

#democrats { background:yellow; }
#republicans { background:red; }

150
Le modèle des boîtes de CSS décrit les boîtes
générées pour les éléments HTML. Il contient
également des options détaillées pour l'ajustement
des marges, des bordures, des espacements et du
contenu de chaque élément

151
 Un élément a quatre côtés : droit ("right"), gauche
("left"), supérieur ("top") et inférieur ("bottom"). La
marge est la distance entre chaque côté et l'élément
avoisinant (ou les bordures du document)
 Exemple:
body { margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px; }

152
 On peut fixer pareillement les marges sur presque
tous les éléments.
 Par exemple, on peut choisir de définir les marges
de tous les paragraphes de texte balisés avec <p>
 Exemple (notation différente:
body { margin: 100px 40px 10px 70px; }
p { margin: 5px 50px 5px 50px; }

153
 L'espacement ou padding peut aussi être assimilé
à un « remplissage », ceci à travers la définition de
la distance interne entre la bordure et le contenu
de l'élément.
 Exemple:
h1 { background: yellow;
padding: 20px 20px 20px 80px;
}
h2 { background: orange;
padding-left:120px;
}

154
 On peut utiliser des bordures pour beaucoup de
choses, par exemple comme élément décoratif ou pour
souligner la séparation de deux choses.

 CSS offre de multiples options pour l'utilisation des

bordures dans les pages web.

 border-width
 border-color
 border-style
 border
155
o L'épaisseur des bordures est définie par la
propriété border-width.

o Les valeurs de cette propriété sont: "thin", "medium"

et "thick", ou une valeur numérique en pixels

o Exemple:
h1 { border-width: thick;}

h2 { border-width: 20px;}

p { border-width: 1px;}

156
o La propriété border-color définit la couleur d'une
bordure.

o Des valeurs de couleurs normales sont, par exemple,

"#123456", "rgb(123,123,123)" ou "yellow" .

o Exemple:
h1 { border-color: gold;}

h2 {border-color: red;}

p {border-color: blue;}

157
 Border-style permet de choisir parmi plusieurs
types de bordures.
 Les huit types de bordures sont définis comme ce
qui suit: dotted, dashed, solid, double, groove,
ridge, inset, et outset

 Exemple (notation différente:

h1 { border-style: doted; }
h2 { border-style: outset; }
p { border-style: dashed; }

158
 La propriété width permet de définir la
largeur d'un élément.

 La propriété height permet de définir sa

hauteur.

 Exemple:
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange; }
159
Un sélecteur est un motif de reconnaissance permettant
d’appliquer un style aux éléments de l’arbre du
document HTML.
160
 À tous les éléments de la page : le sélecteur universel *
agit sur tous les éléments HTML.
 * { color: #ff0000; }
/* pour définir une couleur rouge par défaut */

 À toutes les instances d’un élément : les sélecteurs de

type agissent sur un type d’élément HTML.
 p { color: #0000ff; }
/* pour définir une couleur bleue pour tous les textes des
paragraphes */
Sauf si une autre couleur leur est attribuée par ailleurs de façon
plus spécifique

161
 À différents éléments simultanément : le regroupement
de sélecteurs de type
 h3,h4,h5,h6 { color: brown; }
/* pour définir une couleur marron pour tous les titres de niveau
3, 4, 5 et 6 */

 À certaines instances d’un élément : les sélecteurs de

classe
 p.vert { color: #008000; }
/* pour définir une couleur verte pour les textes de certains
paragraphes (ceux de la classe .vert) */
Le contenu de toutes les balises <p class= "vert" > sera vert.
Et le contenu des balises <p> restera bleu

162
 À une instance unique d’un élément : les sélecteurs d’id
 p#gris { color: #7F7F7F; } /* ou */
 #gris p { color: #7F7F7F; }
/* pour définir une couleur grise pour le texte d’un paragraphe
précis */

Le contenu de la seule balise <p id= "gris" > sera gris.

Le contenu de toutes les balises <p class= "vert" > sera
vert. Et le contenu des autres balises <p> restera bleu.

163
 À un ensemble d’éléments successifs : aux éléments bornés
par l’élément div
› .vert { color: #008000; }
/* pour définir une couleur verte pour une classe */

/* qui s’appliquera aussi bien à : ...

/*qui s’appliquera aussi bien à :*/
<div class="vert">
<h1>...</h1>
<p>...</p>
<p>...</p>
</div>
/* ou définis par :*/
<h1 class="vert">...</h1>
<p class="vert">...</p>
<p class="vert">...</p>
*/

164
 À une partie de contenu de paragraphe : l’élément span
› span.vert { color: #008000; }
/* pour définir une couleur verte pour une classe */
/*
qui s’appliquera à :
<p>
<span class="vert">
ceci sera en vert
</span>
... ceci sera donc en bleu ...
</p>
*/
165
 À un élément directement ou indirectement contenu dans un autre
élément : les sélecteurs descendants

/* pour définir une couleur rose d’un élément em contenu dans un

élément h2 */
h2 em { color: pink; }
/*
qui s’appliquera aussi bien à :
<h2>
<em>en rose</em>
...
</h2>
qu’à :
<h2>
<code><em>en rose</em></code>
...
</h2>
*/
166
 À un élément directement contenu dans un autre
élément : les sélecteurs d’enfant */
› /* pour définir une couleur jaune d’un élément em
descendant de l’élément p */
p>em { color: yellow; }
/*
qui s’appliquera seulement à :
<p><em>en jaune</em></p>
mais pas à :
<p><q><em>...</em></q></p>
*/

167
 À un élément suivant un autre élément : les sélecteurs
adjacents
› /* pour définir une couleur kaki d’un élément p suivant
directement un élément img */
img + p { color: khaki; }
/*
qui s’appliquera à :
<img>...</img>
<p>en kaki</p>
mais pas à :
<h3>...</h3>
<p>...</p>
*/

168
169