PROGRAMMATION WEB

HTML, CSS & JAVASCRIPT

 Contenu
1. Brève au introduction au Web
2. Les bases du langage HTML
3. Les bases du langage CSS
4. Introduction au langage Javascript
5. Etude des CMS : Joomla, WordPress ou Drupal

2
 Objectifs du cours
 Au terme de ce cours, vous devez être en
mesure de :
 Créer, structurer et modifier des pages web en
utilisant le langage HTML
 Mettre en forme une page web en utilisant le
CSS
 Rendre une page web interactive à l'aide d'un
langage de script comme javascript.
 solutionner un problème sous forme
algorithmique
3
 Evaluation
 En 3 parties:

1. Contrôle continu (x2) : 20% de la note finale

2. Travaux pratiques : 30% de la note finale
3. Examen final: 50% de la note finale

4
1 Brève introduction au
Web
 C’est quoi le World Wide Web?
 Inventé par Tim Berners-lee en 1989

 Le web est un système interconnecté de pages

web publiques et d'autres ressources accessibles
via Internet
 Chaque page web ou ressource est reliée à
l’autre par des hyperliens
 Chaque page web ou ressource est accessible par
un identifiant unique appelé URL (Uniform
Resource Locator)
6
 C’est quoi le World Wide Web?(2)
 Les pages web sont formatées ou écrites dans
un langage appelé HTML (HyperText Markup
Language)
 Pour interpréter
le code HTML et visualiser le
contenu d'une page Web, on utilise un
navigateur Web.

7
 Web vs Internet
 Web ≠ Internet
 Internet est une interconnexion de réseaux qui
relie plusieurs ordinateurs à travers le monde.
 Le Web est une des nombreuses applications
fonctionnant sur Internet
 Autres applications fonctionnant sur Internet
incluent: le transfert de fichiers, le courrier
électronique, la messagerie instantanée, etc.

8
 Architecture du Web
 Le Web est basé sur une architecture
client/serveur
 Le serveurhéberge des pages web et autres
ressources auxquelles les clients web peuvent
accéder via un protocole appelé HTTP
(HyperText Transfer Protocol)

9
 Architecture du Web (2)

HTTP
Demande de page

HTTP

Réponse du serveur

Client éxécutant Serveur éxécutant

un navigateur Web un serveur Web
(Google chrome, (Nginx, Apache,
Firefox, etc.) etc.)
10
 World Wide Web Consortium
 Le World Wide Web Consortium (W3C) est une
organisation internationale qui développe et
maintient les standards du Web.
 L'objectif est de promouvoir la compatibilité
des technologies du web
 Site web: https://www.w3.org/

11
 Outils de development
 Editeur de texte : VsCode
(recommandé),
notepad, notepad++, sublime text, etc.
 Navigateurweb : Mozilla firefox, Google
chrome, etc.
 Documentation:

https://developer.mozilla.org/fr/docs/Web
https://www.w3schools.com/

12
2 Les bases du
langage HTML
 C’est quoi l’HTML?
 HTML – Hyper Text Markup Language
 C’est un langage descriptif utilisé pour définir
la structure d'une page Web
 Il est composé d'un ensemble d'éléments et de
balises prédéfinis.
 Un élément définit une partie d'une page Web
(un texte, lien, image, vidéo, etc.).
 Les éléments sont créés à l'aide de balises
 A chaque élément, correspond une balise
spécifique 14
 Structure d’un element HTML
 Un élément HTML classique est composé
d’une balise ouvrante, un contenu et une
balise fermante.
 La balise ouvrante commence et se termine
par des chevrons (<>).
 Exemple : <p>. Ici, 'p' est le nom de la balise
 La balise fermante est identique à la balise
ouvrante, sauf qu'elle comprend en plus une
barre oblique (/) avant le nom de l'élément.
Exemple : </p>
15
 Structure d’un element
HTML(2)

 Le contenu d'un élément est tout ce qui se

trouve entre la balise ouvrante et la balise
fermante.
 Selon l'élément, le contenu peut être un texte
ou d'autres éléments html.
16
 Structure d’un element
HTML(3)
 Certains éléments html sont composés d'une
seule balise, sans contenu. On les appelle
éléments vides.
 Exemple : <img />
 HTML n'est pas sensible à la cassei.e. le nom
des balises peut être écrit en minuscule ou en
majuscule
 Exemple : <TITLE> = <title>
 Toutefois, il est recommandé d’écrire les noms
en minuscule
17
 Les attributs
 Les balisespeuvent avoir des attributs
 Un attribut:

 spécifie une propriété d'un élément et lui

associe une valeur
 est toujours déclaré dans la balise ouvrante de
l’élément
 est écrit en minuscule et sa valeur entre
guillemets (""). L’attribut alt avec la valeur
 Example: "logo"

<img src="logo.gif" alt="logo" />

18
 Les attributs (2)
 Certains attributs peuvent s'appliquer à tous
les éléments :
 id, style, class, title
 L'id est unique dans tout le document
 Le contenu de l'attribut title est affiché comme
une indication lorsque l'élément est survolé par
la souris.
 Certains éléments ont des attributs obligatoires
 D'autres sont spécifiques à certains éléments :

 href pour l'élément <a>

 src pour les éléments <a>, <iframes>, <input> et <script> 19
 Création de pages HTML
 Un fichier HTML est normalement enregistré
avec une extension de fichier .htm ou .html et
peut être visualisé avec n'importe quel
navigateur web
 Les fichiers HTML peuvent être créés avec des
éditeurs de texte :
 NotePad, NotePad ++, VsCode, etc.
 Ou des éditeurs HTML (éditeurs WYSIWYG)

 Microsoft FrontPage
 Macromedia Dreamweaver, etc. 20
 Structure d’une page HTML

 Structure minimale d’une page HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

21
 Structure d’une page HTML:
Le DOCTYPE
<!DOCTYPE HTML>
<html> Déclaration
<head> du DOCTYPE
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

 Indique la version d’HTML à utiliser (ici, HTML indique la

version récente)
22
 Structure d’une page HTML :
<html>
<!DOCTYPE HTML>
<html> Début de la page
<head>
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
Fin de la page
 Marque le début et la fin de la page

23
 Structure d’une page HTML :
<head>

<!DOCTYPE HTML>
L'entête
<html>
<head>
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

 Définit L'entête de la page (les métadonnées de la page)

24
 Structure d’une page HTML :
<body>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>My First HTML Page</title>
</head>
<body> Le corps
<p>This is some text...</p>
</body>
</html>

 Définit Le corps de la page (les élements visuels de la

page)
25
 Déclaration du <!DOCTYPE>

 Il indique auxnavigateurs web la version de

l’HTML à utiliser.
 Versions possibles : HTML 4.01, XHTML 1.0
(Transitionnel ou Strict), XHTML 1.1, HTML 5
 Exemple d'utilisation :
<!DOCTYPE html> → version récente (version 5 de l’HTML)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

26
 HTML vs. XHTML
 XHTML est une version plus stricte de l’HTML
 En XHTML:

 Les noms des balises et des attributs doivent

être en minuscules.
 Toutes les balises doivent être fermées (<br/>,
<img/>) contrairement à HTML qui autorise
<br> et <img> et qui suppose des balises de
fermeture manquantes (<p>par1 <p>par2)
 XHTML n'autorise qu'un seul élément racine
<html> (HTML en autorise plusieurs)
27
 L'entête: la balise <head>
 Le role de labalise <head> est de contenir les
métadonnées (données descriptives) de la
page
 Ces données ne s’affichent pas sur le
navigateur après le chargement de la page.
 La déclaration du <head> ce fait directement
après celle du <!DOCTYPE>
 Commence par <head> et se termine par
</head>
 Contient une balise <title> obligatoire

28
 L'entête: la balise <head> (2)
 Peut contenir d’autres balises comme:
 <meta>
 <script>
 <style>
 <link>

29
 L'entête: la balise <title>
 La balise <title> se déclare en l’intérieure de la
balise <head>
 Sert à définir le titre de la page
 Important pour les utilisateurs et les moteurs de
recherche
<title>Telerik Academy – Winter Season 2009/2010 </title>

Le titre

30
 L'entête: la balise <meta>
 Sert à définir les métadonnées de la page
 Exemple de métadonnées:
L’encodage des caractères
<meta charset="utf-8"> de la page

<meta name="description" content="HTML

tutorial" />
Description du contenu de la page

<meta name="keywords" content="html, web

design, styles" />
Les mots clés de la page (important
pour les moteurs de recherche)
<meta name="author" content="Chris Brewer" />

L’auteur de la page
31
 L'entête: la balise <script>
 L'élément <script> est utilisé
pour insérer des
scripts dans un document HTML.
 Les scripts sont exécutés sur le navigateur Web
du client.
 Les scripts peuvent être déclarés dans la section
<head> et dans la section <body>.
 Exemple de langages de script pris en charge :
 JavaScript
 VBScript
 JScript 32
 L'entête: la balise <style>
 L’élément <style> permet de définir des styles
pour la mise en forme d’un document HTML
 Se déclare à l’intérieure de la balise <head>
 Alternative: la balise <link>
 La balise<link> permet d’insérer une feuille
de style (et d’autres resources) externe au
document HTML
 Plus approprié et recommandé pour la
définition des styles

33
 Les commentaires: la balise
<!-- -->
 La balise
<!-- --> sert à insérer des
commentaires dans un document HTML
 Les commentaires facilite la lecture et la
compréhension du code HTML et n’ont aucun
effet sur le rendu de la page
 Les commentaires commence par <!-- et se
termine par --> et peuvent exister n'importe
où à l’intérieure de la balise <html></html>

34
 Les commentaires: la balise
<!-- --> (2)
 Exemple:

<!–- L’image du logo de telerik -->

<img src="logo.jpg" alt=“Telerik Logo">

<!–- lien vers le site web telerik -->

<a href="http://telerik.com/">Telerik</a>

<!–- Affiche la table d’infos -->

<table class="newstable">

35
 L’indentation du code HTML
 Ilest recommandé d’indenté le code HTML
afin d'améliorer la lisibilité et de faciliter le
débogage
 Chaque élément de bloc doit commencer sur une
nouvelle ligne.
 Chaque élément imbriqué (bloc) doit être indenté.
 Les navigateurs ignorent les espaces multiples dans
le code source de la page, le formatage est donc
inoffensif.
 Pour des raisons de performances,
l’indentation peut être sacrifié. 36
 L’indentation du code HTML(2)
 Exemple: Code indenté

<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> Code non indenté <head>
<title> <title>
</title> </title>
<head> <head>
<body> <body>
<p> <p>
test test
</p> </p>
</body> </body>
</html> </html>
37
 Le corps: la balise <body>
 La section <body> définit les éléments visibles
de la page
 Commence après la section <head></head>.

 Commence par <body> et se termine </body>

 Exemples d’élements visibles: les paragraphes,

les images, les listes,liens, etc.
<html>
<head><title>Test page</title></head>
<body>
<!– Ceci est le corps de la page -->
</body>
</html> 38
 Les titres et les paragraphes
 Les titres de section (<h1> – <h6>)
 Sert à définir des titres et des sous-titres dans
le corps de la page
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

 Les paragraphes (<p>)

<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

39
 Headings and Paragraphs –
Exemple
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>

40
 Headings and Paragraphs –
Exemple (2)
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>

<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>

41
 Les hyperliens: la balise <a>
 La balise<a> et son attribut href servent à
créer un hyperlien vers d’autres documents ou
ressources sur le web

 L’attribut
href spécifie l'URL de la ressource
vers laquelle pointe l'hyperlien

 Exemples de cas d’utilisation:

 Lien vers un document appelé form.html sur le

même serveur dans le même répertoire :
<a href="form.html">Fill Our Form</a>
42
 Les hyperliens: la balise <a> (2)
 Lien vers un document appelé parent.html sur
le même serveur dans le répertoire parent :

<a href="../parent.html">Parent</a>

 Lien vers un document appelé cat.htmlsur le

même serveur dans le sous-répertoire stuff :
<a href="stuff/cat.html">Catalog</a>

43
 Les hyperliens: la balise <a> (3)
 Lien vers un site Web externe :

<a href="http://www.devbg.org" target="_blank">BASD</a>

 Utilisez toujours une URL complète, incluant

"http://", et pas seulement
"www.somesite.com".
 L'utilisation de l'attribut target="_blank" ouvre
le lien dans une nouvelle fenêtre.
 Lien vers une adresse électronique :
<a href="mailto:[email protected]?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
44
 Les hyperliens: la balise <a> (4)
 Lien vers un document appelé apply-now.html
 Sur le même serveur, dans le même répertoire
 En utilisant une image comme nom du lien :
<a href="apply-now.html">
<img src="apply-now-button.jpg" />
</a>
 Lien vers un document appelé index.html
 Sur le même serveur, dans le sous-répertoire english du
répertoire parent :

<a href="../english/index.html">Switch to
English version</a>
45
 Les hyperliens: les ancres
 Lien vers un autre emplacement dans le même
document :
<a href="#section1">Go to Introduction</a>
<h2 id="section1">Introduction</h2>

 Lien vers un emplacement spécifique dans un

autre document :
<a href="chapter3.html#section3.1.1">Go to Section
3.1.1</a>
<!–- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
46
 Les hyperliens: les ancres(2)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />

47
 Les hyperliens: les ancres(3)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:[email protected]?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />

48
 Les hyperliens: les ancres(4)
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

49
 Les hyperliens: les ancres(5)
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

50
 Les images: la balise <img>
 Sert à insérer des images dans une page HTML

<img src="/img/basd-logo.png">

 Les attributs de la balise:

src Emplacement de l’image (relatif ou absolu)
alt Description de l’image
height Nombre de pixels de la hauteur
width Nombre de pixels de la largeur
border Taille de la bordure, 0 pour aucune bordure

 Exemple:

<img src="./php.png" alt="PHP Logo" />

51
 Formatage du texte
 Les balises de mise en forme du texte
modifient la forme du texte qui se trouve entre
la balise d'ouverture et la balise de fermeture.
 Ex. <b>Hello</b> rend "Hello" en gras
<b></b> En gras
<i></i> en italique
<u></u> souligné
 (en exposant) Samplesuperscript
 (en indice) Samplesubscript
<strong></strong> En gras
<em></em> mis en évidence
<pre></pre> Texte préformaté
<blockquote></blockquote> Citation
<del></del> Texte supprimé – barré 52
 Formatage du texte – Exemple
text-formatting.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>

53
 Text Formatting – Example (2)
text-formatting.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0 transitional.<br />
Next line.</p>
</body>
</html>

54
 Balises diverses
 <hr /> : Dessine une ligne horizontale :
<hr size="5" width="70%" />

 <center></center>: Obselete!

<center>Hello World!</center>

 <font></font>: Obselete!

<font size="3" color="blue">Font3</font>

<font size="+4" color="blue">Font+4</font>

55
 Balises diverses – Exemple

misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
</body>
</html>

56
 Listes ordonnées : La balise
<ol>
 Sert à créer des listes ordonnées:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

 Valeurs possible pour type : 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
57
 Listes non ordonnées : la balise
<ul>
 Sert à créer des listes non ordonnées:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

 Valeurs possible pour l’attribut type:

 disc, circle or square (obselete!)

• Apple o Apple ▪ Apple

• Orange o Orange ▪ Orange
• Pear o Pear ▪ Pear
58
 liste de descriptions: la balise
<dl>
 Sert à créer des listes de description
 Paires de texte et de définition associée ; le
texte est dans la balise <dt>, la définition dans
la balise <dd>.
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
 La definition est indentée
 On utilisera par exemple cet élément pour
implémenter un glossaire. 59
 Lists – Exemple
<ol type="1"> lists.html
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

60
 Caractères spéciaux HTML
Nom du caractère Code HTML Symbole
Signe du droit d'auteur &copy; ©
Signe de la marque déposée &reg; ®
Signe de la marque &trade; ™
Inférieur à &lt; <
Supérieur à &gt; >
Esperluette &amp; &
Espace &nbsp;
tiret &mdash; —
Guillemets &quot; "
Euro &#8364; €
Livre sterling &pound; £
Yen japonais &yen; ¥
61
 Caractères spéciaux– Exemple
<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

62
 Caractères spéciaux– Exemple
(2)
<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

63
 Eléments de bloc et éléments
Inline
 Les éléments de bloc ajoutent un saut de ligne
avant et après leur insertion dans la page.
 <div> est un élément de bloc
 D'autres éléments de bloc incluent <table>,
<hr>, les titres, les listes, <p> et autres.
 Les éléments Inline n’ajoutent pas un saut de
ligne avant et après leur insertion dans la page
 <span> est un élément en ligne
 La plupart des éléments HTML sont inline, par
exemple <a> 64
 La balise <div>
 La balise<div> est utilisée pour créer des
divisions logiques dans une page.
 Élément de type bloc

 Utilisé avec du CSS

 Exemple:

<div style="font-size:24px; color:red">DIV

example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
65
 La balise <span>
 Élément de type inline

 Utile pour modifier une portion spécifique d’un

texte
 Ne crée pas une autre zone (paragraphe) dans le
document.
 Très utile avec du CSS

<p>
This one is <span style="color:red; font-
weight:bold">only a test</span>.
</p>
<p>This one is another <span style="font-
size:32px; font-weight:bold">TEST</span>.</p>
66
Exercices
 Exercises (1)
1. Créer la page HTML suivante :

68
 Exercises (2)
2. Créer la page HTML suivante :

3. En utilisant la balise <a>, ajoutez des ancres aux

sections correspondantes de la page.
69
 Exercises (3)
4. Créez une page de profil
utilisateur nommée
Profil.html, une page
d'amis nommée
Amis.html et une page
d'information nommée
Info.html. Reliez-les les
unes aux autres à l'aide de
la balise <a>.

70