Support de Cours

Web Statique

Préparé par
Dr. Salah Hamdi

AU : 2018/2019
Dr. Salah Hamdi Page 1
 Plan

I. Introduction

II. Web 1.0

III. Langage HTML

IV. CSS

V. JAVA SCRIPT

Dr. Salah Hamdi Page 2

 I. Introduction
A la fin des années 1980, l’internet était un ensemble de réseaux qui peuvent communiquer
les uns avec les autres dans le cadre du protocole TCP/IP. Son utilisation était encore
largement limitée à l'éducation, le gouvernement et les organismes scientifiques.
Deux développements ont déterminé la croissance explosive de l’Internet dans 1990. Le
premier a été l'augmentation rapide des PC (en privé et business). L'autre a été la conception
et le développement du World Wide Web.

On appelle World Wide Web (noté WWW) ou tout simplement Web la toile virtuelle formée
par les différents documents appelés « pages web » liés entre eux par des hyperliens.
Les pages web sont généralement organisées autour d'une page d'accueil, jouant un point
central dans la navigation à l'aide des liens hypertextes. Cet ensemble cohérent de pages web
liées par des liens hypertextes et articulées autour d'une page d'accueil commune est appelée
site web.

Au-dessus de TCP/IP, de très nombreux protocoles :

 Protocole HTTP: navigation de pages web dans votre navigateur.
 Protocoles POP/IMAP/SMTP: envoi et réception d'e-mails.
 Protocole Bit Torrent: échange de fichiers pair à pair.
 Protocole FTP: échange de fichiers.
 Protocole IRC: messagerie instantanée.
Le HTML (HyperText Markup Language) est un langage de marquage (de structuration ou de
balisage) dont le rôle est de formaliser l'écriture d'un document avec des balises de formatage.
Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il
établit avec d'autres documents. Les pages web sont écrites en HTML (.htm ou .html).

Dr. Salah Hamdi Page 3

Le langage HTML permet notamment la lecture de documents sur internet à partir de
machines différentes, grâce au protocole HTTP, permettant d'accéder via le réseau à des
documents repérés par une adresse unique, appelée URL (Uniform Resource Locator).
HTML permet la consultation de pages web indépendamment du système d'exploitation ou de
l'architecture de l'ordinateur.

Les avantages du langage HTML sont nombreux :

 peux coûteux, en effet un simple éditeur de texte suffit à écrire ses documents HTML
 relativement facile à aborder,
 il représente en outre un bon moyen de dépasser les problèmes de compatibilité entre
les systèmes et les formats informatiques différents.

II. Web 1.0

Le web 1.0 est le 1er stade du web qui liait des pages statiques. 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.

Un site web statique est un site basé sur une architecture de type HTML. Les éléments
suivants caractérisent le site :

Dr. Salah Hamdi Page 4

- Chaque page html a son code source spécifique.
- Il n'y a pas de base de données.
- les pages peuvent être programmées avec des langages de script (vb, javascript).

Un site Web statique est un site ou chacune des pages est créée en HTML. Un ordinateur qui
se connecte au serveur, demande une page. Celle-ci lui est directement servie (elle est stockée
toute prête sur le serveur).

III. Langage HTML

1. Editeur de site
Il existe un certain nombre d'outils professionnels payants et gratuits de conception Web pour
faciliter le travail des créateurs de site internet.

Exemples d’éditeurs de sites: Atomic, Antetype, Macaw, Avocode, Webydo, Dreamweaver,

FrontPage, WebSite X5, Web Creator, …
Un document contenant des annotations en HTML n'est rien d'autre qu'un fichier texte (code
ASCII).

Une page peut donc être lue et interprétée par n'importe quel navigateur sur n'importe quelle
plateforme.

Dr. Salah Hamdi Page 5

 2. Structure d’un programme HTML

 Les balises sont utilisées pour marquer le début et la fin d'un élément en HTML.
 Toutes les balises ont le même format:
 commencent par un signe inférieur "<"
 terminent par un signe supérieur ">".
 Deux types de tags
 balise d'ouverture: <html>
 balises de fermeture: </ html>.
 La Différence entre une balise d'ouverture et une balise de fermeture est la barre
oblique "/".

<!-- commentaire -->

<HTML>
<HEAD>

</HEAD>

<BODY>

</BODY>
</HTML>
 Commentaires
Les commentaires peuvent être placés n'importe où dans un document HTML à condition de
ne pas être imbriqués. Ils sont placés entre les chaînes de caractère <!-- et -->.
 HTML
C’est le premier marqueur ou tag que l’on trouve dans un document HTML. Tout le document
qui sera écrit par la suite (texte ou marqueur) sera compris entre le tag <HTML> et
</HTML>.

 En-tête <HEAD>
L'en-tête du document est réservé aux méta-informations (les informations relatives au
document) comme son titre. Ces méta-informations doivent être placées entre les tags
<HEAD> de début et </HEAD> de fin.
Dans l'en-tête, on trouvera les commandes suivantes :
TITLE (la seule véritablement essentielle- voir ci-dessous)

Dr. Salah Hamdi Page 6

_ISINDEX indique au logiciel client que le document est un écran permettant une saisie pour
interroger un programme externe (Programme CGI), (Servait à l’origine du HTML aux
navigateurs à envoyer de l’information).
_ BASE permet d'indiquer une adresse de base qui complétera tous les chemins relatifs,
_ LINK (Indique un lien entre le présent document et un autre) ; très rarement utilisé.
_ NEXTID (Indique le document suivant – considéré actuellement comme obsolète-)
_ META donne des informations sur le document au serveur. Ces informations sont
généralement :
<META NAME=...> le nom,
<META AUTHOR=....> le nom de l'auteur,
<META CONTENT=….>,
<META NEXTID=….>un identifiant.
_<BASEFONT SIZE = n> ou n prend les valeurs 1 à 7.Cette commande fixe la taille de la
police de caractères (par défaut : 3) 1, petits caractères … 7, gros caractères.
_ PROMPT=texte, permet d'afficher le texte comme message pour <ISINDEX>.

 Titre <TITLE>
<TITLE> Titre </TITLE>
Chaque document HTML, pour être correct, doit disposer d'un titre. Le titre apparaît le plus
souvent dans la barre de titre du navigateur Web. Son but est de pouvoir identifier le
document dans un ensemble plus large. Le titre d'un document HTML sert aussi lorsqu'un
navigateur World Wide Web dispose d'une fonction “hotlist” ou “bookmark” pour fournir un
accès rapide à vos documents favoris. Le titre est limité à 64 caractères y compris les espaces
et ne doit normalement contenir que les 128 premiers caractères ASCII (pas de caractères
accentués)

 Corps du document <BODY>

Le corps du document, ce qui sera effectivement affiché par le navigateur Web, est balisé par
les commandes :
<BODY>
</BODY>

Dr. Salah Hamdi Page 7

 1. Programmation web 1.0
Application 1 : Ajout d’un titre de page

<html>

<head>

<title> This is a page title </title>

</head>

<body>

</body>

</html>

Application 2 : Ajout d’un titre

<html>

<head>

<title> This is a page title </title>

</head>

<body>

<h1>

A heading On My First Webpage

</h1>

</body>

</html>

Application 3 : Ajout d’un paragraphe

<html>

<head>

<title> This is a page title </title>

</head>

Dr. Salah Hamdi Page 8

 <body>

<h1>

A heading On My First Webpage

</h1>

<p align="left">

Here is some text in a paragraph

</p>

<p>Here is the next paragraph</p>

</body>

</html>

Application 4 : Mise en forme

<html>

<head>

<title>Example</title>

</head>

<body bgcolor="#FFFFFF">

<h1>A heading On My
First Webpage</h1>

<p>Here is some <b>text in a

paragraph</b></p>

<p>

Here is the <i>next paragraph</i>

</p>

<p><b><font face="Comic Sans MS" size="6" color="#FF0000">Je programme

en HTML </font></b></p>

</body> </html>

Dr. Salah Hamdi Page 9

La couleur est codée en hexadécimale (préfixe #).
« bgcolor » correspond à la couleur du fond (BackGround), ici la couleur est le blanc code
#FFFFFF.
La palette de couleurs d’un navigateur :

Application 5 : Ajout d’une liste non ordonnée

<html>

<head>

<title>Example</title>

</head>

<body>

<h1>A heading On My First

Webpage</h1>

<p>Here is some <b>text in a

paragraph</b></p>

<p>Here is the <i>next paragraph</i></p>

<ul>

<li>First item</li>

Dr. Salah Hamdi Page 10

 <li>Second item</li>

<li>Third item</li>

</ul>

</body>

</html>

Application 6 : Ajout d’une liste numérotée

<html>

<head>

<title>Example</title>

</head>

<body>

<h1>A heading On My First Webpage</h1>

<p>Here is some <b>text in a paragraph</b></p>

<p>Here is the <i>next paragraph</i></p>

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

</body>

</html>

Dr. Salah Hamdi Page 11

Application 7 : Insertion d’image et ajout d’un lien hypertexte

<html>

<head>

<title>Example</title>

</head>

<body>

<h1>A heading On My First Webpage</h1>

<p>Here is some <b>text in a paragraph</b></p>

<p>Here is the <i>next paragraph</i></p>

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

<img
src="snowhead.jpg"/>

<a
href="http://fr.wikipedia.org/wiki/C
SD">CSD Homepage</a>

</body>

</html>

Dr. Salah Hamdi Page 12

IV. CSS

CSS (Cascading Style Sheets) est un ensemble des feuilles de style en cascade. C’est un
ensemble de classes décrivant les formes et les styles des objets.
HTML décrit le fond et la structure de la page web (paragraphe, tableau, lien, …) alors que
CSS s’occupe de la forme et du style des objets (les couleurs, les polices, les tailles, …).
Parmi les avantages:
 La séparation des documents HTML et CSS.
 La modification des styles sans modifier le code HTML.
 La séparation du contenu et de la présentation
Il existe trois possibilités d’inclusion du CSS:
a) Directement dans les balises
<h2 style="color:red "> Ti t r e en rouge </h2>
b) Définition de la CSS dans le fichier via la balise <style>
<head>

<style type="text/css ">

déclaration des styles

</style>

</head>
c) Déclaration d’un lien vers la CSS via la balise <link>
<head>

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

</head>
1. Déclaration d’une règle
sélecteur1 {

propriété1 : valeur1 ;

...

propriétéN : valeurN ;

Dr. Salah Hamdi Page 13

Exemple :

H1 : { color :red ;}

sélecteur1 , sélecteur 2 ... {

propriété1 : valeur1 ;

...

propriétéN : valeurN ;

}
On peut mettre autant de couples propriété/valeur que voulu, séparés par des ;.
Exemple:
h1 , h2 { color :red ; background-color: yellow}

2. Déclaration d’un sélecteur

Il existe plusieurs types de sélecteurs :
 Sélecteur de type : nom de balise
h1 {color: red; background-color: yellow}
 Sélecteur d’ID : #
#important {color: red}

<p id="important">paragraphe</p>
 Sélecteur de classe : .
.special {font-size: 20pt} ou h1.special {font-size: 60pt}

<h1 class="special">Titre spécial</h1>

Exemple:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>simple css example</title>

<style type="text/css">

Dr. Salah Hamdi Page 14

 h1{color:red}

p{font-size:20pt; font-family:"lucida calligraphy", arial,"sans serif";}

body{background-color:gray; background-image: url("image.gif");

background-repeat: repeat; }

p.droit{text-align: right}

p.centre{text-align: center}

p.gauche{text-align: left}

h1.centre{text-align: center}

h2.centre{text-align: center}

/*ceci est un commentaire*/

</style>

</head>

<body>

<h1 class="centre">This is a heading</h1>

<p class="droit">this is a simple paragraph</p>

<p class="centre">this is a simple paragraph</p>

<p class="gauche">this is a simple paragraph</p>

<h2>This is a 2nd heading</h2>

</body>

</html>

V. Les formulaires

Tous les formulaires HTML débutent par un élément <form> comme celui-ci :

<form action="/my-handling-form-page" method="post">

</form>

Cet élément définit un formulaire. C'est un élément conteneur au même titre que les
éléments <div> ou <p>, mais il accepte aussi quelques attributs spécifiques afin de contrôler
la manière dont il se comporte. Tous ses attributs sont optionnels mais définir au moins les
attributs « action » et « method » est considéré comme de bonne pratique.
Dr. Salah Hamdi Page 15
  L'attribut « action » définit l'emplacement (une URL) où doivent être envoyées les
données collectées par le formulaire.
 L'attribut « method » définit la méthode HTTP utilisée pour envoyer les données (cela
peut être « get » ou « post »).
 La méthode GET est utilisée par le navigateur pour demander au serveur de renvoyer
une certaine ressource. Dans ce cas, le navigateur envoie un corps vide et les données
envoyées au serveur sont ajoutées à l'URL sous forme d'une suite de paires
nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi
par les paires nom/valeur séparés par une esperluette (&).
 La méthode POST est un peu différente. C'est la méthode que le navigateur utilise pour
demander au serveur une réponse prenant en compte les données contenues dans le
corps de la requête http et les données sont ajoutées au corps de la requête HTTP.
Quand le formulaire est soumis avec la méthode POST, aucune donnée n'est ajoutée à
l'URL.

Les éléments très utilisé d’un formulaire sont :

 label
 input
 textarea
 select
 button

Les types qu’un « input » peut avoir sont :

 text
 password
 email
 file
 radio
 checkbox

Exemple :

<form action="/ma-page-de-traitement" method="post">

<div>
<label for="name">Nom :</label>
<input type="text" id="name" name="user_name">

Dr. Salah Hamdi Page 16

 </div>
<div>
<label for="mail">e-mail :</label>
<input type="email" id="mail" name="user_mail">
</div>
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
</form>

L’utilisation de l'attribut for sur tous les éléments <label> est une manière formelle de lier un
libellé à un élément du formulaire. Cet attribut fait référence à l'id de l'élément correspondant.
Il y a plusieurs avantages à faire ainsi. Le plus évident de permettre à l'utilisateur de cliquer
sur l'étiquette pour activer le bloc correspondant.

Concernant l'élément <input>, l'attribut le plus important est l'attribut type. Ce dernier est
extrêmement important puisqu'il définit le comportement de l'élément <input>. Il peut
radicalement changer le sens de l'élément, faites-y attention.

L’élément <button> accepte aussi un attribut de type et il peut prendre une des trois
valeurs : « submit », « reset » ou « button ».
 Un clic sur un bouton « submit » envoie les données du formulaire vers la page
définie par l'attribut action de l'élément <form>.
 Un clic sur un bouton « reset » réinitialise tous les champs du formulaire à leurs
valeurs par défaut immédiatement.
 Un clic sur un bouton « button » ne fait... rien.

VI. JavaScript

JavaScript est un langage créé en 1995 et permet de créer des pages interactives et vivantes.
Un script est une suite d’instructions qui vont être interprétées par un interpréteur.
Ainsi, pour lire du code JavaScript, tous les navigateurs (Google Chrome, Safari, etc.)
possèdent leur propre interpréteur JavaScript.

Dr. Salah Hamdi Page 17

Il existe deux grands types de langages: les langages « client-side » et les langages « server-
side ».
Le JavaScript est un langage de programmation dit « client-side » qui va s’exécuter du côté du
client, c’est-à-dire sur l’ordinateur de la personne qui va demander la page web.

Au contraire, les langages « server-side » (comme le PHP) vont s’exécuter du côté serveur qui
va stocker des pages web puis les envoyer au client lorsque celui-ci les demande.

1. Code javascript
Nous pouvons placer du code JavaScript à trois endroits différents :
 Dans l’élément « head » d’une page HTML ;
 Dans l’élément « body » d’une page HTML ;
 Dans un fichier portant l’extension « .js » séparé.

2. Les commentaires

Dr. Salah Hamdi Page 18

 3. Les variables
Le nom des variables doit commencer par une lettre et ne peut contenir que des lettres (non
accentuées), des chiffres ou les signes « _ » et « $ » ;
Le JavaScript possède des mots « réservés » qu’on ne peut utiliser pour créer une variable
comme par exemple les mots « var », « NaN », « null » et « undefined ».

4. Type de valeur d’une variable

Pour tester le type de la valeur que contient une variable, on utilise généralement la
fonction typeof().Cependant, cette fonction renvoie parfois des résultats contestables sur
certaines valeurs.

On appelle la concaténation avec le « + » et la notation \n qui sert à créer un retour à la ligne

en JavaScript.

Dr. Salah Hamdi Page 19

 5. Les conditions en JavaScript

Dr. Salah Hamdi Page 20

 6. Les boucles en Javascript

Dr. Salah Hamdi Page 21

 7. Les fonctions en Javascript
Pour créer une fonction en JavaScript, il faut utiliser le mot clef « function » suivi du nom de
la fonction que l’on souhaite créer, puis d’un couple de parenthèses et d’un couple
d’accolades comme ceci :

8. Les objets en JavaScript

Un objet peut contenir un ensemble de propriétés et de méthodes.
Les propriétés d’un objet peuvent être assimilées à des variables ; elles sont constituées d’un
nom et d’une valeur séparés par deux points « : ».

Les méthodes d’un objet peuvent être assimilées à des fonctions qui vont elles-mêmes être
stockées dans des propriétés.

Dr. Salah Hamdi Page 22

Les propriétés et les méthodes suivantes sont très utiles :
 La propriété « length » permet de connaître la longueur d’une chaîne de caractères.
 toLowerCase() et toUpperCase() permettent respectivement de transformer une chaîne
de caractères en minuscules ou en majuscules.
 charAt() va retourner le caractère situé à une position donnée.
 indexOf() va retourner la première position à laquelle un caractère (ou une séquence
de caractères) donné a été retrouvé dans une chaine.

Dr. Salah Hamdi Page 23

  lastIndexOf() va elle retourner la dernière position à laquelle un caractère (ou une
séquence de caractères) donné a été retrouvé dans une chaine.
 replace() va nous permettre de rechercher un caractère (ou une expression) dans une
chaîne de caractères et de le(la) remplacer par un(e) autre.
 slice() va extraire une partie d’une chaîne et retourner la partie extraite comme
nouvelle chaîne.
 trim() supprime les espaces superflus en début et en fin de chaîne. Cela peut être très
pratique lorsqu’on veut nettoyer et mettre en forme des données envoyées par
l’utilisateur par exemple.
 valueOf() qui retourne la valeur primitive d’un objet de
type String, search() et match() qui vont comparer une chaîne à une certaine
expression et vont retourner les correspondances.
 split() va subdiviser une chaîne de caractères selon un délimiteur et va créer un tableau
avec les morceaux.

Dr. Salah Hamdi Page 24