Cours1 Web

Technologie Web
Hiba Chougrad
Année-universitaire: 2022-2023
1
Planning
Cours Technologie Web:
• 3 séances de cours + 3 séances de TP en altérnance
• Cours : Vendredi matin
• TP en groupe : Vendredi matin Grp1 Samedi matin Grp2
La note :
• Présence + Participation
• Comptes Rendus TPs
• Examen final
2
3
Plan
I. Langage HTML / CSS

II. Langage JavaScript
III. PHP/MySQL
4
Introduction
5
Site Web : Définition
• Un site web est un ensemble de pages web et de ressources reliées par

des hyperliens, défini et accessible par une adresse web.
• Un site est hébergé sur un serveur web accessible via le réseau mondial internet,
un intranet local ou encore depuis le serveur web lui-même.
• L'ensemble des sites web constituent le World Wide Web (www).
• Le serveur Web désigne le logiciel utilisé sur le serveur pour exécuter les requêtes
HTTP (protocole de communication employé sur le World Wide Web).
6
Site Web : définition

• Le World Wide Web (WWW) a été créé en 1989 par le chercheur
anglais Tim Berners-Lee au CERN (Centre européen pour la
recherche nucléaire).
• Le web a été essentiellement conçu pour partager automatiquement

des informations entre les scientifiques, universités et instituts du
monde entier.
• info.cern.ch fut le premier site web mis en ligne, fonctionnant sur un

ordinateur NeXT au CERN. Ce site est toujours accessible par
internet.
7
Premier site web

8
9
Naissance du web
1989 Le chercheur anglais Tim Berners-Lee écrit la première proposition de création du World
Wide Web.
Il écrit sa seconde proposition puis l’ingénieur en systèmes belge Robert Cailliau le rejoint et
1990 ils élaborent ensemble une proposition formelle pour un système de gestion de l'information
Il développe le code pour le premier serveur et navigateur Web sur un ordinateur NeXT.
Fin 1990 Pour éviter qu'on ne l'éteigne accidentellement, une étiquette avait été collée sur l'ordinateur,
où il était écrit à la main, en rouge : « Cette machine est un serveur. NE PAS ÉTEINDRE !! »
1991 Il lance son premier logiciel WWW, qui devient accessible à d'autres collègues sur des
ordinateurs du CERN.
Le CERN met gratuitement à disposition le code source du World Wide Web, qui devient
1993 ainsi un logiciel libre.
Robert Cailliau a lancé la première conférence internationale sur le World Wide Web. Tim
1994 Berners-Lee quitte le CERN pour rejoindre MIT, et fonde le Consortium international World
Wide Web (W3C).
10
Question : Comment fonctionnent les sites web?
 C'est un mécanisme client-serveur.

 Le client demande un fichier, le serveur le lui donne tel qu'il est stocké:
processus statique.
 Le serveur peut aussi générer un fichier en fonction de la demande du client :
processus dynamique.
 L’accès à des sites web, demande l’utilisation d’un programme appelé:
navigateur web.
Logo 11
Les données Menu

du contenu
soit statique ou
dynamique
12
Site attractif :
• Choix du design,
• Choix des couleurs
• La police, la taille …
• Choix et taille des images …
13
1
Menu horizontal ou vertical
14
Mise en place du texte : 1

- Sous forme de blocs
- Dans le corps de la page
15
• Enregistrer les données

• Données Clients ajoutées
• Envoyer des newsletters et mails
16
Pourquoi faire un site web

 Votre site web est plus qu’une vitrine.
• Il doit bien entendu mettre en avant votre offre, vos produits et votre expertise.
• Il doit présenter votre équipe et montrer ce qui vous différencie de la concurrence.
 Mais votre site web ne peut se contenter d’être figé.

• Il doit être vivant, changer, s’adapter et amener toujours plus d’informations.
• Informer des prochaines échéances et événements.
 Internet est le média idéal pour s'adresser à un large public à peu de frais.
17
Langages de programmation
Best Programming Language to Learn in 2022
Source : https://www.devopsschool.com/blog/top-popular-programming-languages-in-2022-by-stackoverflow-ranking/
18
FrameWorks
John Resig en 2006

Joyent en 2009
Twitter en 2011
SensioLabs en 2005
Google en 2010
Facebook en 2013
19
FrameWorks
Systèmes de gestion de contenu (CMS)
Wordpress
20
Editeurs
Sublime Text
21
A installer
Ou bien
22
Serveur Web
Un serveur Web est un logiciel servant des pages Web aux utilisateurs Web
23
Navigateur côté client (Chrome, Firefox, Opera, …)

24
Web statique –HTML

Une page statique est affichée tel quelle à l’écran par le Navigateur.
25
Web dynamique –PHP/MySQL

Pour une page dynamique le Serveur Web doit la générer pour qu’elle
puisse exister et être affichée à l’écran par le Navigateur.
26
Web dynamique –PHP/MySQL

27
Langage HTML & CSS

28
HTML5
29
HTML : Définition et principes généraux

Balise ouvrante
 HTML = Hypertext Markup Language
langage de balisage hypertexte
Une balise : <aa> bonjour </aa> ou <bb />
inventé par Tim Berners Lee (~1989)
permet de Balise fermante
o publier des documents en ligne

o retrouver de l'information en ligne via des liens
o opérer des transactions entre services
o inclure du multimédia et d'autres applications dans les documents
 CSS = Cascading Style Sheets
Créé en 1996
Mettre en forme le contenu en lui ajoutant des styles
30
Syntaxe du langage : Eléments, Balises et Attributs

• Eléments
 Définissent des objets dans notre page web
 L’élément p définit un paragraphe,
 Les éléments h1, h2, …, h6 définissent des titres.
 L’élément br définit un arrêt de ligne (break) et retour à la ligne.
 L’élément a définit un lien web
 Généralement constitués d’une paire de balises (ou tag) :
o Balise ouvrante : <p>
o Balise fermante : </p>
o Exception : balises orphelines comme <br/>
31
Syntaxe du langage: Eléments, Balises et Attributs

 Attributs
o Propriétés utilisées pour donner des indications supplémentaires aux éléments.
o sont séparés par un espace
o sont mentionnés uniquement dans la balise ouvrante
o peuvent avoir une valeur (nom, unité de mesure ...) inscrite entre guillemets
• Syntaxe
o <Nom de la balise de début Attribut1 = "valeur1" Attribut2 = "valeur2" ... Attributn
= "valeur n"> texte mis en forme </Nom de la balise de fin>
• Exemple : indiquer la cible d’un lien

Balise ouvrante Balise fermante
<a href="https://www.google.com"> Site Google </a>

attribut
élément a
32
Structure d’une page en HTML5

<!DOCTYPE html>
<html lang="fr">
<head> 
<meta charset="utf-8"/> Définit l’encodage des langues latine
<title> le titre de la page</title>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body> 
Bienvenu dans ma première page
</body>
</html>
• Remarque: les balises ne sont pas sensibles à la casse <BODY> = <BodY> = <body>
33
Les balises fondamentales

 Titres
• <TITLE> ... </TITLE>
• placé dans l'en-tête <HEAD> du document
 Intertitres
• <H1> .... </H1> , <H2> ... </H2> , ....................... <H6> ... </H6>
 Paragraphes
• <P> : signifie « début du paragraphe »
• </P> : signifie « fin du paragraphe »
• Remarque : ne pas croiser les balises

• <H1> cours sur les <B> plantes </H1></B> ==> code non-interprétable
• <H1> cours sur les <B> plantes </B></H1> ==> code correct
34
Mise en forme (1/2)

 Définir un texte en gras
<b> Votre Texte en Gras </b> (voir aussi <strong> pour html5)
 Définir un texte en italique
<i> Votre Texte en Italique </i> (voir aussi <em> pour html5)
 Souligner un texte
<u> Votre Texte Souligné </u>
 Définir un texte barré
<s> Votre Texte barré </s>
35
Mise en forme (2/2)

 Formater un texte en couleur
<font color="blue">Votre Texte en Couleur </font>
 Remplissage de forme :
<mark> test </mark> résultat : test
 Modifier la taille du texte :
<font size="5">Votre Texte en taille 5 </font>
 Modifier la police du texte :
<font face="Arial">Votre Texte en Arial </font>
 Un retour à la ligne :
<br/> définit un retour à la ligne
36
Niveaux de titre
37
Les caractères spéciaux (1/2)

 Le format d’encodage des caractères des pages HTML est par
défaut : UTF-8 (format américain).
 Il existe deux codages pour ajouter les caractères spéciaux (comme

exemple le é, ç, à ..) :
• L’un ISO en format numérique : &#code;
• Le 2ème spécifique à HTML s’écrit : &nom;
o Syntaxe : & + lettre + abréviation + ;
o Exemple : Pour le cas de é : é
38
Les caractères spéciaux (2/2)

Caractère Code ISO Abréviation HTML
À À À
è è è
é é é
î î î
ñ ñ ñ
> >
< <
± ± ±
ƒ
ß ß ß
ç ç ç
39
Les balises de liste
 La liste ordonnée.
 La liste non ordonnée.
 La liste de définition.
40
Listes ordonnée
<ol>
TYPE = "1/A/a/I/i"
<li> article 1 </li>
</ol>
Résultat :
1. article 1
2. article 2
41
Liste non ordonnée

<ul>
TYPE = "disc/circle/square"
</ul>
Résultat :
• article 1
• article 2
42
Liste de définition
<dl>
<dt>Terme</dt>
<dd>Définition</dd>
</dl>
• Résultat :
Terme
définition
43
Exercice : Listes
Donner le code HTML des listes suivantes : • Villes marocaines
1. Casablanca
a. Casa centre
b. Casa sud
c. Casa nord
2. Fès
oFès centre
oMoulay yacoub
3. Marrakech
• Villes étrangères
1. Paris
2. Quebec
44
Créer un lien ... vers un autre document

 Un lien permet de définir
une région sensible au clic souris dans un document
l'endroit où l'on va se retrouver après ce clic.
 Trois étapes :
 <A HREF = "nom du fichier" ou HREF = "url du document">
 lien
 </A>
• Exemples :
<A HREF = "cv.html"> curriculum vitae </A>
<A HREF = "http://www.ensaf.ac.ma">site Ensa Fes</A>
lien
doc. A doc. B
45
Créer un lien ... vers une section spécifique d'un autre document
 Définir la cible
• dans le document "cible"
<A NAME = "nom de la section"> section </A>
 Créer son lien

• dans le document "source"
<A HREF = "doc.B # nom de la section"> lien </A>
lien
cible
doc. A doc. B
46
Autres liens
 lien vers un serveur de news
• <A HREF="news:comp.html"> lien </A>
 Un fichier à télécharger
• <A HREF="fichier.exe"> cliquez ici pour télécharger </A>
 lien e-mail
<A HREF="mailto:chougradh@gmail.ma">adresse_e_mail</A>
47
Autres balises
 ligne horizontale
 <HR>
• SIZE = "px"
• WIDTH = "px" ou "%"
• ALIGN = "left/right/center"
 commentaires
 
48
Autres balises
 Fond d'écran
• avec une couleur <BODY BGCOLOR = "#666666">
– attention au contraste pour la lisibilité
• avec une image <BODY BACKGROUND = "image.gif">
– attention aux "jointures" et au temps de transmission
 Black = "#000000"  Red = "#FF0000"

 Silver = "#C0C0C0"  Blue = "#0000FF"
 Gray = "#808080"  Purple = "#800080"
 Olive = "#808000"  Teal = "#008080"
 White = "#FFFFFF"  Fuchsia = "#FF00FF"
 Yellow = "#FFFF00"  Aqua = "#00FFFF"
 Maroon = "#800000"  Green = "#008000"
 Navy = "#000080"  Lime = "#00FF00"
49
Gestion des tableaux

• Le tableau est encadré par les balises <TABLE> et </TABLE>
• Le titre du tableau est encadré par <CAPTION> </CAPTION>
• Chaque ligne est encadrée par <TR> </TR>
• Les cellules d'en-tête sont encadrées par <TH> </TH>
• Les cellules de valeur sont encadrées par <TD> </TD>
Voici le titre du tableau

Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4
50

 Cellules fusionnées : une cellule sur plusieurs lignes ou colonnes
 ROWSPAN
o 1 cellule sur hauteur de plusieurs lignes
o valeur de l'attribut définit la hauteur en ligne de la cellule
 COLSPAN
o 1 cellule sur largeur de plusieurs colonnes
o valeur de l'attribut définit la largeur en colonne de la cellule
cellule
fusionnée
<TH COLSPAN="2">cellule fusionnée</TH>

51

 Alignement dans les cellules
• <TD ALIGN = "left/right/center">
• <TD VALIGN = "top/middle/bottom">
left center right

align
top
middle valign
bottom
52

 Epaisseur de quadrillage
• CELLSPACING="px" (2 par défaut)
 Espacement des données
• CELLPADDING="px" (1 par défaut)
53

Quelques propriétés
Attribut Balises auxquelles il Valeur Effet Visuel
s'applique
ALIGN * TH CENTER centré

Alignement du texte TR LEFT Gauche
dans les cellules ou la TD RIGHT Droite
ligne JUSTIFY Justifié
CAPTION TOP Au-dessus

BOTTOM En-dessous
VALIGN * TH TOP En haut

(alignement vertical) TR MIDDLE Au milieu
TD BOTTOM En bas
54

BORDER=n * Table Taille de la bordure
COLS=n Table Nombre de colonnes
Bordercolor * Table Couleur de bordure
Table Th Td Tr
Background *
Bgcolor * Table Th Td Tr
Largeur ou( hauteur) du tableau soit
Width heigth * Table
en % ou en valeur numérique
Td, Tr Largeur ou hauteur
Alignement du tableau par rapport à

Align * Table
la page
55
Traitement des images

Balise <IMG> ... </IMG>
 Attributs
• SRC (indique l'emplacement du fichier image)
• ALIGN = "top/middle/bottom"
• ALT (propose un texte de remplacement à l'image)
Exemple : <IMG ALIGN=TOP SRC="image.gif" ALT="description image">
 Réglage des dimensions de l'image

• Width : Cet attribut définit la taille en longueur de l'image
Exemple : <IMG SRC = "Briques.gif" width=100>
• Height : Cet attribut définie la taille en hauteur de l'image
Exemple : <IMG SRC = "Briques.gif" height=100>
56
Traitement des images

Autre paramètres de <IMG SRC…>
• Hspace : Cet attribut définie l'espacement horizontal avant l'image, c'est à dire que plus ce
nombre sera élevé, plus l'image se décalera sur la droite de l'écran;
Exemple : <IMG SRC = "Briques.gif" hspace=10>
• Vspace : Cet attribut définie l'espacement vertical avant l'image, c'est à dire la distance au
texte dans le sens vertical, en bas et en haut de l'image.
Exemple : <IMG SRC = "Briques.gif" vspace=10>
57
Exercice: Tableau
À l’aide des balises HTML réaliser le tableau suivant:
Tableau 1: Gestion des budgets
Budget
Voiture Maison charges
2000 3000 7000

Tarifs
58
Formulaires
 balise <FORM> ... </FORM>

• Deux attributs
 Method
• GET ou POST : indique le mode de transfert des données
 Action
• définit la localisation du script permettant d'exploiter le formulaire
Exemple: <Form Method="post" Action="/chemin/script">

59
Formulaires
Les composants de la balise FORM :
 La balise Input: un ensemble de boutons et de champs de saisie.
 La balise TextArea: une zone de saisie .
 La balise Select: une liste à choix multiples.

60
Formulaires
Champ de texte simple
<INPUT TYPE = "text" name ="nom du champ" value ="texte initial" size = longueur >
<input type = "password" name = "pass" maxlength = taille >
Liste de sélection
<select NAME = "nom de la liste">

<option selected>élément 1 </option>
<option>élément 2 </option>
<option>élément 3 </option>
</select>
61
Formulaires
Exemple avec pattern
<form >
<label for="username"> UserName </label>
<input type="text" id="username" pattern="[A-Za-z\d\.]{6,12}"
title="UserName doit être entre 6 à 12
caractères de longueur et contient juste des lettres, nombres et (.)"> <br><br/>
<button type="submit">Submit</button>
</form>
A-Z lettre majuscule

a- z lettre minuscule
\d nombre
\. point
62
Formulaires
Case à cocher : Pour répondre à des questions de type Oui/Non ou Vrai/Faux
<input type = "checkbox" name= "nom" checked> Question
Boutons de sélection : Le type radio est utilisé lorsque l'utilisateur doit faire un choix entre
plusieurs .
<input type = "radio" name= "nom" value = ".." checked> Option 1

<input type = "radio" name= "nom" value = ".."> Option 2
Boutons de commande : Les boutons de commande permettent à l'utilisateur de déclencher des

événements auxquels seront rattachées des fonctions .
<input type = "button" name =" nom" value="Cliquer">
63
Formulaires
Bouton de réinitialisation : Ce bouton permet de vider les champs saisis
<input type = "reset" name =" nom" value= "Effacer">
TextArea : Zone de texte
<Textarea name = "commentaires" ROWS="10" COLS="5"> Entrez vos commentaires

</Textarea>
64
Les nouveaux champs <input>
 De nombreux nouveaux types de champs <input> ont été introduits

 Exemples d’éléments ajoutés en html5 :
• color, date, datetime, datetime-local, email, month, number, range,
search, tel, time, url, week
65
Le champ <input type=color>

• Choisissez une couleur: <input type="color" name= " mycolor" />
• À vérifier s’il est Supporté dans divers navigateurs web
66
Le champ <input type=date>

• Choisissez une date: <input type="date" name="mday" />
67
Le champ <input type = datetime-local>

• Permet de choisir la date et l’heure
• Anniversaire : <input type="datetime-local" name="madaytime" />
68
Le champ <input type=time>

• Heure du rendez-vous :
<input type="time" name= "rdv_time" />
• Non supporté par tous les navigateurs…

69
Le champ <input type=week>

• Choisissez la semaine :
<input type="week" name= " no_semaine" />

70
Le champ <input type=month>

• <input type="month" name="bdaymonth" />
• Idem que date mais permet de choisir juste le mois
71
Le champ <input type=email>

• E-mail: <input type="email" name="useremail" />
 Attributs implicites “required”, “invalid” etc.

 Possibilité de styler la saisie
72
Le champ <input type=email> validation

• Validation + messages d’erreurs
• Parfois tooltips lors de la saisie
• Et lors de la soumission
73
Le champ <input type=email>

<!DOCTYPE html>
<html>
<head>
<style>
[required] {
border-color: #88a;
/* offset-x | offset-y | blur-radius | color */
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 255, .8);
}
:invalid {
border-color: #e88;
-webkit-box-shadow: 0px 0px 10px rgba(255, 0, 0, .8);
}
</style>
</head>
<body>
<form action="demo_form.asp">
Email: <input type="email" name="email" />
<input type="submit" />
</form>
</body>
</html>
74
Le champ <input type=number>

• <input type="number" name="quantity" min="1" max="5" />
• Attributs possibles : max, min, step, value (valeur par défaut)

75
Le champ <input type=range>
<input type="range" name=“points" min="1" max="10" />

76
Le champ <input type=tel>

• Telephone: <input type="tel" name="usrtel" />
<fieldset>
<legend>Contact information</legend>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-456-7890"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required />
</fieldset>
77
CSS3
78
CSS (Cascading StyleSheets )
 Le World Wide Web a introduit les feuilles de styles en cascade pour

compléter le langage HTML.
 Les CSS permettent de gérer l'apparence des documents.
 Les feuilles indiquent aux balises HTML leur comportement ou style.

79
Les styles
• Un style rassemble tous les attributs que l'on peut appliquer à des
types de textes similaires.
• Attribut : taille, format
• Textes similaires : titres, en-têtes, pied de page
• Les styles donnent un nom commun à des groupes d'attributs

80
Les styles de Word
Applique le style : Titre 1

81
Avantage du CSS
 Une CSS est constituée de code séparé qui améliore les possibilités
du HTML en permettant de redéfinir la façon dont fonctionnent les
balises HTML existantes.
 L'avantage par rapport à la création de nouvelles balises HTML

repose sur le fait qu'en modifiant la définition d'une seule règle
CSS centralisée, l'apparence de toutes les balises contrôlées par
cette règles est modifiée.
82
Syntaxes
Selecteur { propriété: valeur;}
Sélecteur HTML attribut à définir définit la propriété
Declaration Declaration block

Selector Declaration
p { color : red; }
background : yellow;
Property Value Property Value

Chaque bloc se termine par « ; »
• Exemple : H3 { font-family: Arial; font-style: italic }
83
Du HTML au CSS
<HTML>
<HEAD> .HTML
<TITLE>Le CSS</TITLE>
<link rel="stylesheet" type= "text/css" href= "fichier.css">

</HEAD>
<BODY>
Le Résultat
<H1>Introduction</H1>
... Introduction
</BODY>
…
</HTML>
H1 { Sélecteur simple
color : red ;
}
Fichier.CSS
84
L’attribut rel : définition

• Dans le monde du Web, les pages sont liées entre elles par des
hyperliens.
• Le lien est un composant essentiel de la structure des documents. Il
offre la possibilité de naviguer vers une autre ressource, et de
mettre en relation des ressources similaires, complémentaires ou
concurrentielles.
• L’attribut rel placé sur les balises <a>, <area> et <link> définit la
nature de la relation établie entre deux ressources.
85
Insertion des styles

• On peut appliquer des règles de style à un document de différentes
façons :
1. Une règle peut être appliquée directement à l'élément concerné, on parle
alors de style en ligne. La balise aura alors l'attribut style
2. Grâce à une feuille de style intégrée au document, celle-ci sera située dans
l'entête, entre les balises <head> ... </head> . On utilisera alors la balise
<style>
3. Faire appel à une feuille de style externe au document. Elle est la plus
conforme à l'esprit des CSS et aussi la plus pratique.
86
1. Insertion des styles

• Insertion des styles en ligne
• Il est possible d'appliquer aux balises HTML un style caractéristique à partir de la balise elle-même.
<HTML>
<HEAD>
...
</HEAD>
<BODY>
<H1 STYLE="Style; Style2; etc.“> Titre </H1>
...
Diverses commandes HTML
...
</BODY>
</HTML> Équivalent à :Tabulation ou retrait avec le texte
Exemple : <p style="text-indent:15px"> Un style en ligne... </p>

87

<HTML>
<HEAD>
• Insertion des styles internes: Insertion dans <STYLE>
un document HTML <--
Règles de style...
-->
 Une définition de mise en page par les feuilles
</STYLE>
de style sera encadré par une balise HTML ...
spécifique. </HEAD>
o La commande <STYLE...> insère une définition des
feuilles de style. <BODY>
o La commande </STYLE> ferme la définition des ...
feuilles de style. Diverses commandes HTML
...
 Les règles de présentation doivent être placées
dans l'en-tête (<HEAD>) du document HTML. </BODY>
</HTML>
88

• Exemple :
<html>
<head>
<title>style interne au document</title>
<style type="text/css”>
body { font-family: sans-serif; background-color: white }
h1, h2 { color: blue }
p {text-align: justify }
</style>
</head>
<Body>
<h1> Hello </h1>
</Body>
</html>
89

<HTML>
<HEAD>
• Les feuilles de style externes
<LINK HREF="Adresse cible"
• Mise en application : TYPE="text/css"
 Création d'un fichier-feuille de style, REL="stylesheet" >
portant l'extension .css
 Dans l'en-tête des fichiers html ...
concernés, insérer la spécification faisant </HEAD>
référence à la CSS <BODY>
...
 Éventuellement spécifier les styles
Diverses commandes HTML
particuliers dans le corps.
...
</BODY>
• Exemple <p class="note"> Ceci est une note</p>
</HTML>
90

• Exemple :
• Le fichier de style .css
body { background-color: #EEEEFF ;
font-family: Helvetica ;
margin: 10 ;
padding: 8 }
p { text-indent: 12 }
h1, h2, h3, h4, h5, h6 { text-align: center; text-decoration: underline }
.note { font-size: 70% ; font-style: italic ; text-indent:12 }
• Le fichier .html
<html><head><title>appel à une feuille de style externe</title>
<link rel="stylesheet" href="feuilledestyle.css" type="text/css" />
</head>
91
Les classes de style

Les classes de style permettent de créer plusieurs styles différents pour une
même balise HTML.
• Dans la définition des styles, il suffira d'ajouter un nom de classe au
sélecteur de balise et de les séparer par un point (".").
h1.description { color : blue }
• Ensuite, l'attribut CLASS est utilisé dans le but de faire référence à un nom
de classe afin d’appliquer le style en question.
<h1 class="description">Titre de la classe "description"</h1>
• L'attribut CLASS est utilisable dans pratiquement toutes les balises HTML
sauf : Html, Head, Title, Script, Style, BaseFont
92

• Exemple : Le site web d'un magasin pourra, par exemple, créer une classe
pour la description de ses produits, une autre pour le mode d'emploi, une
autre encore pour les commentaires des utilisateurs
<style type="text/css">
.description { text-align: justify ; color: black}
.mde { text-align : left; font-size : 90%}
.comments { font-style : italic}
</style>
• On fait ensuite appel au sélecteur de classe dans le document HTML grâce à

l'attribut class :
<h1 class="description">Titre de la classe "description"</h1>
93

• Les pseudo-classes de liens
 Les pseudo-classes de liens sont utilisées essentiellement avec
la balise <A>.
• Elles servent à définir un style particulier à chacun des états
du liens.
• La pseudo-classe A:link {...} permet de définir le style des
liens.
• La pseudo-classe A:visited {...} permet de définir le style des
liens visités.
 Liste des pseudo-classes standards :

https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes
94
Les classes de style <HTML> <HEAD>

<STYLE>
<-- #Nom de classe {Propriété1:Valeur1;...}
• Les classes à base d’identificateur ( ID) ...
Règles de style
• L’attribut ID affecte un identificateur unique à la balise ... -->
correspondante au sein d'un document. </STYLE>
...
• Cet identificateur unique offre la possibilité d'affecter une </HEAD>
classe à une seule balise. <BODY>
<Balise ID="Nom de classe">
...
• il faut déclarer un nom de classe précédé du signe dièse
</Balise>
("#") à la place du point et affecter la classe à la balise par ...
le biais de l'attribut ID*. </BODY></HTML>
<style type="text/css">
#special { font-size: 120% }
</style> ...
<p id="special">Paragraphe avec l'identificateur "spécial"</p>
95
<SPAN> et <DIV>
• Les balises SPAN et DIV créaient des petits blocs particuliers dans
le document sans devoir repasser par les éléments structurels du
Html classique.
• SPAN et DIV s'utilisent toujours avec les classes et les ID.
• SPAN est une balise de type inline
• DIV est une balise de type block
96
<SPAN>
La balise <SPAN> ... </SPAN> permet d'appliquer des styles à des éléments de
texte d'un paragraphe ou un morceau de paragraphe.
• Exemple : Un monde de géants

<HTML>
<HEAD>
<STYLE type="text/css“>
.element{font-size: x-large; color: navy}
</STYLE>
</HEAD>
<BODY>
<P> Un monde de <SPAN class=element>géants</SPAN></P>
</BODY>
</HTML>
97
<DIV>
La balise <DIV> ... </DIV> permet de regrouper plusieurs paragraphes ou si
vous préférez, de délimiter une zone comportant plusieurs paragraphes.
<HTML>
<HEAD>
<STYLE type="text/css“>
.zone{font-size: x-small}
</STYLE>
</HEAD>
<BODY>
<DIV class=zone>
<P>Commentaire :</P>
<P>N'oubliez pas l'attribut class!</P>
</DIV>
</BODY>
</HTML>
98
EXEMPLE : DIV
<BODY>
<div class="conteneur">
<div class="normalA">
Bloc A
</div>
<div class="normalB">
Bloc B
</div>
</div>
</BODY>
.normalA {
width:150px;
height:150px;
background-color: red; Bloc conteneur
border: 1px solid black;
}
.normalB {
width:250px ;
height:100px ;
background-color: green;
border:1px solid black;
BlocBloc
A B
}
99
EXEMPLE : DIV
<BODY>
<div class="normalA">
Bloc A
</div> Bloc A
<div class="normalB">
Bloc B
</div>
</div> Bloc B
</BODY>
.normalA {
width:150px;
height:150px;
}
.normalB {
width:250px ;
height:100px ;
Flux normal en bloc : Succession
background-color: green; verticale
}
100
EXEMPLE : DIV
<BODY>
<span class="normalC">
Bloc C
</span>
<span class="normalD">
Bloc D
</span>
</div>
</BODY>
.normalC {
width:150px;
height:150px;
}
.normalD {
width:250px ;
height:100px ;
border:1px solid black; Bloc C
} Bloc D
101
EXEMPLE : DIV
<BODY>
<span class="normalC">
Bloc C
Bloc D
</spqn> Bloc C
<span class="normalD">
Bloc D
</span>
</div>
</BODY>
.normalC {
width:150px;
height:150px;
}
.normalD {
width:250px ;
height:100px ;
Flux normal en-ligne :
Succession horizontale
}
102
Positionner avec CSS

• Il est désormais possible de positionner, au pixel près, du texte ou une image
avec les feuilles de style.
• La position absolue {position: absolute} se détermine par rapport au coin

supérieur gauche de la fenêtre du browser. Les coordonnées de ce point sont
top = 0 et left = 0.
103
Position absolu
<BODY> Css css css css css css css css Css css css css css css css css Css css
<div class="conteneur"> css css css css css css css – css
css
Top 20pxcss Css css css css css
<div class="bloc_absolu"> css css css Css css css css css css css css Css css css css css css css
Bloc A
</div> Bloc A
css Css css css css css css css css Css css css css css css css css Css
css css css css css css css
css css css css css...
</div>
</BODY>
Left – 30px
.conteneur {
width:800px;
}
.bloc_absolu {
position: absolute;
width:300px;
margin-top:20px;
margin-left:30px; Bloc conteneur
}
104
Positionner un texte
<HTML>
<HEAD>
<STYLE type="text/css">
.pub{ position: absolute; top: 100px; left: 25px;
color: yellow; font-size: x-large; font-weight: bold; }
</STYLE>
</HEAD>
<BODY>
<DIV class=pub> Publication Html </DIV>
</BODY>
</HTML>
105
Positionner une image

<HTML>
<BODY>
<span style="position: absolute; top: 50px; left: 100px;
width: 242px; heigth: 84px;">
<IMG src="htmlplus.gif">
</span>
</BODY>
</HTML>
106
Les valeurs des propriétés

 Les valeurs d’un élément définiront soit une taille ou une longueur ; soit une
couleur ; soit une URL ; soit un style plus explicite.
 Taille d’un élément : pour définir une taille, on utilise une unité numérique
qui sera absolue ou relative.
 Pour les valeurs absolues nous avons :
o le millimètre (mm)
o le centimètre (cm)
o le pouce (in) qui vaut 25,4 mm
o le point (pt)
 Et pour les valeurs relatives :

o la hauteur (em)
o le pixel (px)
o le pourcentage (%)
107

Les différentes valeurs applicables
• Les couleurs : Les valeurs par mots-clés suggérés par le W3C sont celles de
la palette VGA de Windows :
'aqua', 'black', 'blue', 'fuchsia' , 'gray', 'green' , 'lime', 'maroon', 'navy', 'olive', 'purple',
'red', 'silver', 'teal', 'et 'yellow‘
• La méthode hexadécimale. Chacune des trois valeurs RVB est notée en
hexadécimal de 00 (saturation minimale) à FF (saturation maximale) :
 #000000 donne du noir
 #FF0000 donne du rouge pur
 #00FF00 donne du vert pur
 #0000FF donne du bleu pur
 #FFFFFF donne du blanc
 #888888 donne du gris neutre
 #D2691E donne un ton "chocolat"
108

• Les différentes valeurs applicables
• Les couleurs : La méthode hexadécimale abrégée
• la saturation des trois couleur est définie de 0 à F
• elle offre donc moins de nuances, notez que le navigateur duplique
chacune des trois valeurs, #F8F équivaut en fait à #FF88FF :
#000 donne du noir
#F00 donne du rouge pur
#0F0 donne du vert pur
#00F donne du bleu pur
#FFF donne du blanc
#888 donne du gris neutre
#C63 donne un ton "chocolat"
109
Couleurs
110
• Les styles de police
H3 {font-family: Arial} : définit la police du texte

H3 {font-style: italic} : définit le style de l'écriture normal ou italique
P {font-weight: bold} : définit l'épaisseur de la police normal ou bold
P {font-size: 12pt} : définit la taille de la police
P {font: bold italic} : raccourci pour les différentes propriétés de police
111
• Les styles du texte
text-align : définit l'alignement du texte left ou center ou right

text-transform : définit la casse du texte (majuscule, minuscule)
uppercase (met les caractères en majuscules) ou
lowercase (met les caractères en minuscules) ou
capitalize (met le premier caractère en majuscule)
color : définit la couleur du texte par exemple en hexadécimal
word-spacing : définit l'espace entre les mots en points (pt), centimètres (cm),
pixels (px) ou pourcentage (%)
letter-spacing : définit l'espace entre les lettres spécifié
line-height : définit l'interligne soit l'espace entre les lignes du texte
112
• Les arrière-plans
background-color : définit la couleur de l'arrière-plan couleur (par exemple en

hexadécimal) ou transparent
background-image : définit l'image de l'arrière-plan URL de l'image
Exemple: BODY {background-image: image.gif}
background-position : spécifie la position de l'image d'arrière-plan par rapport au
coin supérieur gauche de la fenêtre {1, 2}
Exemple: BODY {background-image: img.gif; background-position: right top}
background : raccourci pour les différentes propriétés d'arrière-plan
Exemple: P {background: image.gif }
113
Marge externe (Margin-top)
Css Css Css Css Css Css

Marge interne
Css Css Css Css Css Css
(Padding-right)
Marge externe Css Css Css Css Css Css
(Margin-left) Marge interne
(Padding-bottom)
Bloc Conteneur
114
Bilan
<BODY> .HTML
<ul class="niveau1"> Le Résultat
<li>Exemple 1</li>
<li>Liste simple</li>  Exemple 1
</ul>
<div class="italic_rouge">
 Liste simple
Exemple 2
</div>
</BODY>
Sous Class dépendante Sous Class indépendante

.CSS .CSS
ul.niveau1 { .italic_rouge {
list-style-type:square; color:red;
color:blue; font-style:italic;
} }
115
Bilan
<BODY> .HTML
<ul class="niveau1"> Le Résultat
<li>Exemple 1</li>
<li>Liste simple</li>  Exemple 1
</ul>
<div class="italic_rouge">
 Liste simple
Exemple 2 Exemple 2
</div>
</BODY>
Sous Class dépendante Sous Class indépendante

.CSS .CSS
ul.niveau1 { .italic_rouge {
list-style-type:square; color:red;
color:blue; font-style:italic;
} }
116
Bilan
<BODY> .HTML Le Résultat
<div id="bloc_unique">
Bloc A Bloc A
</div>
</BODY>
Le sélecteur id
L’élément devient unique, il est utilisé une
.CSS
seule fois dans la page.
#bloc_unique {
background-color:black;
color:white ;
}
117
TP- Création d'un site

118

Bloc Header
Bloc conteneur
119

Header_gauche Header_droit
120

Bloc Menu Header

121

Bloc Menu Header
Bloc
Menu
122

Bloc Menu Header
Bloc
Menu Bloc contenu

Cours1 Web

Transféré par

Informations du document

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

Cours1 Web

Transféré par

Droits d'auteur :

Formats disponibles

Technologie Web

I. Langage HTML / CSS

Site Web : Définition

• Un site web est un ensemble de pages web et de ressources reliées par

Site Web : définition

• Le web a été essentiellement conçu pour partager automatiquement

• info.cern.ch fut le premier site web mis en ligne, fonctionnant sur un

Premier site web

Question : Comment fonctionnent les sites web?

 C'est un mécanisme client-serveur.

Les données Menu

Mise en place du texte : 1

• Enregistrer les données

Pourquoi faire un site web

 Mais votre site web ne peut se contenter d’être figé.

John Resig en 2006

Navigateur côté client (Chrome, Firefox, Opera, …)

Web statique –HTML

Web dynamique –PHP/MySQL

Web dynamique –PHP/MySQL

Langage HTML & CSS

HTML : Définition et principes généraux

o publier des documents en ligne

Syntaxe du langage : Eléments, Balises et Attributs

Syntaxe du langage: Eléments, Balises et Attributs

• Exemple : indiquer la cible d’un lien

<a href="https://www.google.com"> Site Google </a>

Structure d’une page en HTML5

Les balises fondamentales

• Remarque : ne pas croiser les balises

Mise en forme (1/2)

Mise en forme (2/2)

Les caractères spéciaux (1/2)

 Il existe deux codages pour ajouter les caractères spéciaux (comme

Les caractères spéciaux (2/2)

Les balises de liste

Liste non ordonnée

Créer un lien ... vers un autre document

 Créer son lien

 Black = "#000000"  Red = "#FF0000"

Gestion des tableaux

Voici le titre du tableau

Gestion des tableaux

<TH COLSPAN="2">cellule fusionnée</TH>

Gestion des tableaux

left center right

Gestion des tableaux

Gestion des tableaux

ALIGN * TH CENTER centré

CAPTION TOP Au-dessus

VALIGN * TH TOP En haut

Gestion des tableaux

Alignement du tableau par rapport à

Traitement des images

 Réglage des dimensions de l'image

Traitement des images

Voiture Maison charges

2000 3000 7000

 balise <FORM> ... </FORM>

Exemple: <Form Method="post" Action="/chemin/script">

 La balise TextArea: une zone de saisie .

 La balise Select: une liste à choix multiples.

<input type = "password" name = "pass" maxlength = taille >

<select NAME = "nom de la liste">