Chapitre II : Les langages Web

1. Pages statiques et pages dynamiques

1.1 Pages statiques : chacune des pages est créée en HTML. Un ordinateur qui se connecte au
serveur, demande une page. Celle-ci lui est directement servie. le serveur web (HTTP) se contente
d'envoyer des fichiers stockés sur disque dur.

1.2 Pages dynamiques: les pages peuvent être générées dynamiquement, en fonction des informations
données par le navigateur (liens cliqués, formulaires, cookies...) et par le serveur (base de données
SQL, fichiers de configuration...).
- Le serveur web (HTTP) exécute un ou plusieurs programmes qui vont renvoyer des données, que le
serveur web retransmet au navigateur.
- Le contenu est obtenu (par exemple) en combinant l’utilisation d’un langage de scripts ou de
programmation et une base de données. Il s’agit souvent de PHP pour le langage et MySQL pour la
base de données.

2. Programmation web statique

2.1 HTML
2.1.1 Définition
- « HyperText Mark-Up Language» Langage de description de documents HyperTextuels, il a été
défini par le W3C (World Wide Web Consortium).
- Issu de SGML (Standard Generalized Markup Language), langage de définition de langages.
- Développé par Tim Berners-Lee au CERN (Suisse) en 1990 et utilisé sur le Web depuis.
- Un document HTML (source) est composé de morceaux de textes délimités par des balises (Tag) qui
jouent le rôle de directives de mise en forme.
2.1.2 Historique et succession de versions

95: HTML+ et HTML3 ( non standards)

de spécification en 2014)
2.1.3 XHTML « Extensible HyperText Mark-Up Language»
XHTML est le successeur de HTML, il se base sur la syntaxe définie par XML. Il est Devenu
standard pour assurer la compatibilité entre les navigateurs (Firefox, Internet Explorer, Mozilla, …).
Pour vérifier la validité d'une page, le W3C a mis en place un validateur qui comptabilise les erreurs et
donne les moyens de les corriger : http://validator.w3.org/
2.1.4 Les principales différences entre HTML et XHTML
HTML XHTML

Des tags en majuscules ou en minuscules Tous les noms sont en minuscules.

Paragraphe peut être ouvert avec l'instruction La page ne s'affiche pas. Tout tag ouvert <tag> doit
<p> sans le terminer par </p>. Cela fonctionne.. obligatoirement être refermé par </tag>.

Les guillemets ne sont pas toujours obligatoires Les guillemets sont toujours obligatoires
autour des valeurs d’attributs

On peut utiliser des formules réduites par À tous les attributs utilisés doit être donnée une
exemple: <option value="valeur" selected> valeur: <option value="valeur" selected="selected">

2.1.5 Structure d’un documet XHTML

2.1.6 Les balises XHTML

Les balises sont écrites en paire, balise ouvrante et autre fermante (<tag>…..</tag>) ou auto-fermante
(<tag ….. />).
2.1.6.1 L’entête (Head)

Contient des informations d’en-tête qui ne sont généralement pas affichées sur la page:
- La balise <title> : Le titre d’une page web est affiché dans la barre de titre du navigateur
<title>Titre de la page</title>
- La balise <meta/> : utilisée pour indiquer différentes informations : la description de la
page web, ses mots-clés, son auteur, les règles spécifiques destinées aux robots des moteurs
de recherches, la langue de la page web...
<meta name="author" lang="fr" content="prénom NOM" />
<meta name="keywords" content="web,langage,services" />
<meta name="description" content="site destine aux développeurs web" />
<meta name="category" content="Développement web" />
2.1.6.2 Le corps (body)
Contient le texte et les objets (images, vidéos, tableaux,..) qui seront affichés par le navigateur :
- Les paragraphes (<p></p>) : pour délimiter les paragraphes du document
<p>ceci est un paragraphe</p>
- Les titres et sous titres (<h1…6></h1…6>) : la balise <h> définit 6 niveaux de titre, h1 étant le plus
grand.

- Balise division <div> .... </div> : Pour regrouper en un seul bloc un ensemble de paragraphes, de
titres, etc., auxquels on pourra appliquer globalement un style particulier.

- Balise fusion <span>…</span>: pour regrouper plusieurs mots ( ou même un mot isolé ou une lettre
seule ! ) d’un paragraphe et leur donner une mise en forme commune, p.exla taille, la couleur ou la
police de caractère.

- Texte en gras <strong></strong>

- Texte en italique <em></em>
- Texte en exposant 
- Texte en indice 
- Caractères spéciaux : Espace : &nbsp, & :&amp, " :&quot
- Liens hypertextes :
 Lien externe
<a href="http://www.google.dz">Aller à google</a>
 Lien interne avec infobulle
<a href="page2.html" title="suivre mon cours">mon cours</a>
 Ancre
<h2 id="cours">cours prog web </h2> (création de l’ancre)
<a href="#cours"> visualiser le cours prog web </a> (référence depuis la même page)
<a href="page.html #cours"> visualiser le cours prog web </a> (référence depuis une autre
page)
 Lien pour envoyer un mail
<a href="mailto:myacount@gmail.com">Envoyez-moi un message !</a>
- Les images
<img src="photo.jpg" alt="ma photo" title="ma photo" />
src: précise le chemin vers l’image à afficher.

alt: indique un texte de remplacement (dit « texte alternatif ») pour votre image. Ce texte sera affiché à
la place de votre image si celle-ci ne peut pas être affichée.

title: afficher une infobulle lors du survol sur l’image.

-Image cliquable
<a href="http://www.photo.org"><imgsrc="photo.jpg"alt="ma photo"/></a>

- Les listes :
- Listes non ordonnées <ul></ul> (Unordered list)
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
- Listes ordonnées <ol></ol> (Ordered list)
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
-Listes imbriquées
<ol>
<li>item1
<ul>
<li>sub_item1</li>
<li>sub_item2</li>
<li>sub_item3</li>
</ul>
</li>
<li>item2</li>
<li>item3</li>
</ol>
- Les tableaux <table></table>

Exemple :
- Tableau irrégulier

-Fusion des colonnes (colspan), Fusion des lignes (rowspan)

- Les formulaires <form></form>
Balises Description + attributs possibles

<form></form> Définition d’un formulaire

Attributs : method, action,..

<label></label> Permet de définir une étiquette pour indiquer au

visiteur ce que doit contenir le champ.
Attributs : for

<input></input> Permet de créer les composants du formulaire.

Attributs : type, name, value, id, size,
maxlength
(texte simple, mot de passe, boutton)

<fieldset>< /fieldset > Définir un regroupement dans un formulaire.

<legend></legend> Créer une légende à un formulaire.

<textarea></ textarea > Créer une zone de texte

<select></select> Créer une liste déroulante

Exemple :
2.1.7 Structure d’une page HTML5
Code HTML de la page :
<!DOCTYPE HTML>
<html>

<head>
<title>Titre principal de la page</title>
<meta charset="utf-8">
<meta name="description" content="165c. uniques">
</head>

<body>
<div id="page">
<!-- DIV : Aucun sens sémantique - zone géographique -->

<header><!-- Entête de la zone considérée --></header>

<nav><!-- Nav. principale de la page -> site --></nav>
<aside><!-- Les à-cotés de la page --></aside>
<article><!-- Contenu textuel de la page --></article>
<footer><!-- Pied-de-page de la page site --></footer>

</div>
</body>
</html>
2.2 Feuilles de style CSS
2.2.1 Définition
La création de styles CSS (Cascading Style Sheets ou feuilles de style en cascade) est le
complément indispensable du langage (X)HTML. Ce procédé correspond parfaitement à la
séparation du contenu et de la présentation d’un document.
2.2.2 Les règles de style
Une règle de style comprend :
• un sélecteur : il s’agit des balises concernées par cette règle ;
• un bloc de déclarations : il indique les propriétés à attribuer à ces balises.
Chaque déclaration est du type : propriété : valeur;
Exemple :

Cette règle comprend :

• le sélecteur (h3) ;
• deux déclarations, donc deux propriétés à attribuer aux titres de niveau 3 de la page.
2.2.3 Les commentaires
Il est utile de commenter abondamment les feuilles de style, pour s’y retrouver plus tard
lorsqu’il s’agira d’apporter des modifications. Il suffit de placer les commentaires entre les
signes /* et */ :
/* Voici un commentaire */
/* Et en voilà un autre,
mais sur plusieurs lignes */
2.2.3 Emplacements des styles
Les règles de style peuvent se trouver :
• dans le code HTML, comme attributs de balises : ce sont des styles en ligne :
<h2 style= "text-align: center; color: red;">
...Titre...
</h2>

• dans l’en-tête de la page web : feuille de style interne :

<head>
...
<style type="text/css">
<!--
...règles de styles ici...
-->
</style>
...
</head>
• ou dans un fichier distinct : feuille de style externe, à appeler dans l’en-tête de la page web :
<head>
...
<link rel="stylesheet" type="text/css"
href="mon_style.css" />
...
</head>
Ou
<head>
...
<style type="text/css">
@import url(mes_styles.css);
</style>
...
</head>

Une feuille de style externe garantit une mise en forme homogène pour l’ensemble du site
web.
2.2.4 Les sélecteurs de style
- Sélecteurs simples
div { color: blue; }
p { color: red; }

La première règle s’applique à toutes les balises <div> de la page web, la deuxième à toutes
les balises <p>.
- Classes
 Définir une classe : <p class="chapeau">...</p>
 Ecrire une règle de style : p.chapeau { text-align: center; }

Une même classe pour plusieurs types de balises

<h1 class="menu">, <a class="menu">
.menu { font-style: italic; }

- Identifiants
<p id="auteur">...</p>
p#auteur { color: gray; } ou #auteur { color: gray; }

Cette règle s’applique à la balise d’identifiant « auteur » <... id="auteur"> (il ne peut y en
avoir qu’une seule dans la page).
- Pseudo-classes
:link, :visited, :hover, :active,
:first-child, :focus, :lang
Exemple 1 : a:hover { color: red; }
Exemple 2 : <a class="menu" ...> a.menu:hover { color: red; }

Pseudo-classes pour les liens hypertexte

• :link = lien hypertexte qui n’a pas été visité ;
• :visited = lien visité (et encore présent dans l’historique du
navigateur) ;
• :hover = élément survolé par la souris ;
• :active = élément activé (la souris pointant ce lien, son bouton est
enfoncé).
Il faut respecter l’ordre : LoVe HAte
Pseudo-éléments
Ressemblant aux pseudo-classes, les pseudo-éléments apportent d’autres types de précision :
• :first-letter = première lettre du bloc ;
• :first-line = première ligne du bloc ;
• :before = avant la balise spécifiée ;
• :after = après la balise spécifiée.
L’exemple suivant agrandit la taille de la première lettre pour chaque paragraphe <p> :
p:first-letter { font-size: 150%; }
Regroupement de propriétés (Raccourcis)
h1 {
border-width: 2px;
border-style: solid;
border-color: blue;
}
Ou
h1 { border: 2px solid blue; }
Hiérarchie et imbrication des sélecteurs
Pour justifier seulement le texte des paragraphes <p> qui sont inclus dans un bloc <div>, il
faut écrire la règle suivante :
div p { text-align: justify; }

Pour mettre en gris uniquement les liens contenus dans l’élément d’identifiant « sommaire »,
la règle à utiliser est :
#sommaire a { color: gray; }
Imbrication directe
div > h1 { font-style: italic; }

Cette règle s’applique aux balises <h1> qui sont dans le premier niveau d’imbrication à
l’intérieur d’une balise <div> (enfant direct)
Juxtaposition
h1 + h2 { margin-top: 10px; }

Cette règle s’applique à chaque balise <h2> qui suit une balise de fermeture </h1>
Sélecteur universel *
* { text-align: center; } ou * { margin: 0; } /*souvent utilisée*/
div * { color: blue; } /* concerne toutes les balises qui sont incluses dans
un bloc donné*/
Ordre de priorité des styles

Exemple :
div p { color: blue; }
p { color: green; }

Dans ce cas, les paragraphes <p> seront écrits en vert, sauf ceux inclus dans un bloc <div>,
qui resteront en bleu.
div.ma_classe {
background-image:url(image1.png) !important;
background-image:url(image2.gif);
}
Les propriétés CSS et CSS3
- Catégories
Caractères
background-color,
color,
font,
font-family,
font-size,
font-style,
font-variant,
font-weight,
text-decoration,
text-transform,
vertical-align
Mots, paragraphes et blocs de texte
background,
background-attachment, background-color,
background-image, background-position,
background-repeat,
border,
border-top, border-right, border-bottom, border-left,
border-color,
border-top-color, border-right-color,
border-bottom-color, border-left-color,
border-spacing,
border-style,
border-top-style, border-right-style,
border-bottom-style, border-left-style,
border-width,
border-top-width, border-right-width,
border-bottom-width, border-left-width,
outline,
outline-color, outline-style, outline-width,
margin,
margin-top, margin-right, margin-bottom, margin-left,
height, width,
max-height, max-width, min-height, min-width,
padding,
padding-top, padding-right,
padding-bottom, padding-left,
text-align, text-indent,
line-height, letter-spacing, word-spacing,
white-space,
content, quotes,
counter-increment, counter-reset,
direction, unicode-bidi, cursor

Listes à puces ou à numéros

list-style,
list-style-image,
list-style-position,
list-style-type
Tableaux
border-collapse,
border-spacing,
caption-side,
empty-cells,
table-layout,
text-align,
vertical-align
Positionnement
display, visibility,
float,
position,
top, bottom,
right, left,
clear, clip,
overflow,
z-index
- Tableau des valeurs
2.3. Java script
2.3.1 Introduction
 JavaScript est un langage de programmation orienté objet qui peut être inclus dans des
pages HTML. Ce langage a été développé par la société Netscape corporation qui l’a
introduit pour la première fois dans son navigateur Navigator 2.0 en 1996.
 L’intérêt du JavaScript est de pouvoir contrôler dynamiquement le comportement d’une
page web, de plus, le code JavaScript est interprété (≠ compilé) par le navigateur coté
client ce qui permet de décharger le serveur de quelques opérations.
2.3.2 Le langage JavaScript
a- Variables et Assignement
- Déclaration et assignement (pas besoin de définir le type ni de citer le mot clé var (optionnel))
Exemples :
a=3
b = “hello world”
c = ‘hello from Mars’
a=b
a = 3*4*3+2
- Types de données
On distingue 4 types de données
-Nombre : Entier ou à virgule
-Chaine de caractères (String)
-Booléen (true, false)
-Type null : un mot caractéristique pour indiquer qu'il n'y a pas de données.
b- Opérations et opérateurs
- Arithmétiques (+, -, *, /)
Exemples :
somme = somme +1
b=c-d
somme = somme ^ 5
resultat = (3 + 5) * (23 / 4) – 3
- Comparaison

- Opérateurs logiques

c- Les instructions
- Alternative (if)

- La boucle for

- While
d- Les fonctions

Exemple :

e- Les méthodes
Une méthode est une fonction associée à un objet, c'est-à-dire une action que l'on peut faire
exécuter à un objet. Les méthodes des objets du navigateur sont des fonctions définies à
l'avance par les normes HTML, on ne peut donc pas les modifier, il est toutefois possible de
créer une méthode personnelle pour un objet que l'on a créé soi-même.
window.objet1.objet2.methode()
exemple : l’objet Document (la page web)a par exemple la méthode write() qui sert à afficher un
texte : window.document.write()

2.3.3 JavaScript et HTML

a- Insertion du code JavaScript
On peut placer une balise <SCRIPT> soit dans l’entête (HEAD), soit dans le corps (BODY) de
la page HTML. On placera de préférence une balise <SCRIPT> contenant les procédures et
les fonctions dans l’entête, car cela permet qu’elles soient chargées avant le reste de la page.
<SCRIPT LANGUAGE="JavaScript">
…code JavaScript…
</SCRIPT>
Ou
<script type="text/javascript">
…..Code JavaScript…
</script>
Ou à partir d’un fichier
<script src="mon_code.js" type="text/javascript"></script>
Ou comme évènement
<a href="javascript :;" OnClick="alert(‘bonjour !’)">Click !</a>
b- Affichage et introduction des données
- Afficher une valeur : alert(‘bonjour !’) ;
- Introduire une valeur : x=prompt(‘entrer votre nom’) ;rend la valeur sous forme d’une
chaine.
c- Les objets
Javascript traite les éléments qui s'affichent dans le navigateur comme des objets en respectant la
hiérarchie suivante :

Exemple : pour atteindre une case à cocher à l'intérieur d'un formulaire, la hiérarchie est :

- window.document.form.checkbox
- Première case dans le premier formulaire de la page : window.document.forms[0].checkbox[0]
- Objets et méthodes associées
Navigateur

d- Les évènements
Les événements sont des actions de l'utilisateur qui vont pouvoir donner lieu à une
interactivité.
onEvenement="Action_Javascript_ou_Fonction();"
- Liste des évènements :
- Objets et évènements associés

Exemple d’utilisation avec formulaire

<html>
<head>
<script type="text/javascript">
function testResults( form) {
var TestVar = form.elements[ 'champ ' ].value ;
alert("Vous avez tape : " + TestVar );
}
</ script> </head>
<body>
<form id="monformulaire" method="get " action="">
<p>Saisir quelque chose dans le champ :<br>
<input type=" text " id="champ"><br>
<input type="button" id="bouton" value="Click "
onClick="testResults(this.form)">
</p></form>
</body></html>