Chapitre 3

Technologies du WEB

Module: concepts et outils pour le web

Plan
HTML et XHTML
CSS
Javascript
PHP
HTML et XHTML
Les éditeurs Html reprennent uniquement les fonctions du
langage Html. L’étude du code source vous permet de mieux
connaître les multiples possibilités de votre éditeur Html.

Editeurs incomplets et imparfaits:

 Certaines balises sont encore ignorées par les éditeurs,
 Nécessité de passer par le code source pour apporter des
animations personnelles et originales
 Prise en considération partielle des feuilles de style
 Production d’un code peu sémantique
Garder la maîtrise de vos pages et accéder au code
source pour:
 Ajouter de l’interactivité à vos pages avec p.e des
éléments de JavaScript
 Réaliser des opérations plus complexes, comme la
consultation en ligne des bases de données (e.g inclure
directement du code Html dans des lignes de
programmation PHP ou ASP).
HTML et XHTML Définition
 HTML (HyperText Markup Language) est un standard un langage 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.

 XHTML (eXtensible Hyper Text Markup Language) : autrefois

connu sous le nom de HTML, est le langage de base du Web basé sur
le langage XML. En théorie, il est possible de faire tout un site rien
qu’avec le langage XHTML. Conçu à l'origine comme le successeur
de HTML. À l'inverse de la syntaxe HTML permissive, le même
document doit être « bien formé » pour respecter les règles d'écriture
du XHTML.
Différence entre HTML et XHTML
 Des éléments comme HTML, HEAD et BODY sont implicites,
leurs balises ouvrantes et fermantes sont optionnelles
 De nombreuses balises fermantes sont optionnelles,
notamment pour P (paragraphe) et LI
 Les noms d'éléments et d'attributs peuvent librement mélanger
majuscules et minuscules <Em>
 Certains attributs ont une valeur par défaut <input
type="checkbox" checked value="...">
 Les guillemets ne sont pas <em class=important>toujours
obligatoires autour des valeurs d'attribut
 Les éléments vides n'ont pas de syntaxe fermante <img
src="i.png" alt="i">
 Différence entre HTML et XHTML
Tous les éléments doivent être explicitement balisés.
Les balises fermantes ne sont pas optionnelles.
Les noms d'éléments et d'attributs doivent être en minuscules.
Tous les attributs doivent avoir une valeur explicite <input
type="checkbox" checked="checked" value="..." />
Les guillemets sont toujours obligatoires autour des valeurs
d'attribut.
Les éléments vides doivent être fermés <img src="i.png"
alt="i"/>.
 HTML versions successives
 1990: HTML 1

 1995: HTML 2

 1995: HTML+ et HTML3 ( non standards)

 1997: HTML 3.2 et HTML 4 (W3C)

 2000: XHTML 1.0 (HTML 4 réécrit en XML)

 2001: XHTML 1.1

 2003: XHTML 2 (évolution de XHTML 1 abandonnée en 2009)

 2008: HTML 5/ XHTML 5 (évolution de HTML 4, finalisation de spécification en

2014)
Pourquoi utiliser l’un ou l’autre
XHTML permet un apprentissage plus simple de
HTML:
 Il est plus strict, on évite des erreurs d'interprétation
des navigateurs
 Les écritures possibles sont moins nombreuses (pas de
balises tour à tour en minuscules ou majuscules, pas de
balises fermantes un coup présentes et un coup
manquantes…), la syntaxe se maitrise plus facilement.
Langage CSS
Généralités sur CSS
Il arrive fréquemment que l'on attribue à certains
éléments des caractéristiques de mise en forme
identiques. Par exemple, les noms de chapitres seront
mis en police Arial, en gras et en couleur bleue.
 Appeler cette mise en forme "titre" et l’appliquer à
chaque nouveau chapitre
 Cette définition de mise en forme particulière, on va
l'appeler feuille de style.
Qu’est-ce que le CSS
CSS : abréviation de Cascading Style Sheets ("Feuille
de style").
CSS est un langage est utilisé pour décrire la
présentation d’un document structuré écrit en HTML
ou en XML.
Contient les instructions de mise en forme de la page
html.
Qu’est-ce que le CSS
Exemples :
Titres en bleu et centrés,
La couleur du fond est jaune,
L'écriture utilisée est le Times Roman 12, italique...
Intérêts du CSS
Faciliter la modification de la présentation ou du
contenu (possibilité de travailler en équipe plus
efficacement, par exemple)
Coût de développement et de maintenance allégé (code
plus simple)
Code source allégé
Possibilité de présentations différentes selon : le profil
utilisateur, la résolution d’écran, etc.
Uniformiser la présentation sur plusieurs pages (un
seul fichier CSS à modifier pour que les changements
se répercutent sur l'ensemble du site)
 Intérêts du CSS

Si vous voulez changer la couleur d'arrière-plan d'un site Web contenant 100 pages,
une feuille de style peut vous épargner la modification manuelle des 100 documents
HTML.
Avec CSS, la modification peut intervenir en quelques secondes en changeant juste une
seule ligne de code de la feuille de style centrale.
JavaScript
Qu’est-ce que le Javascript
 Le Javascript est un langage de script incorporé dans un
document HTML. Il permet d'apporter des améliorations au
langage HTML en permettant d'exécuter des commandes du côté
client, c'est-à-dire au niveau du navigateur et non du serveur web
 Un langage de script est, par opposition à un langage compilé,
un langage qui s'interprète.
 L'interprète du JavaScript, c'est le navigateur du visiteur (le client).
 interprétation dépendante du type et de la version de navigateur.
 il ne nécessite pas de compilateur, contrairement au
langage Java, avec lequel il a longtemps été confondu.
JavaScript est une extension du HTML : sa principale
utilisation est à l'intérieur des pages web. Il permet de rendre
celles-ci interactives.
 Historique
 Javascript a été mis au point par Netscape en 1995.
A l'origine, il se nommait LiveScript et était destiné à fournir un langage
de script simple au navigateurNetscape Navigator 2.
Il a à l'époque longtemps été critiqué pour son manque de sécurité, son
développement peu poussé et l'absence de messages d'erreur explicites
rendant dure son utilisation.
Le 4 décembre 1995, suite à une association avec le constructeur Sun,
Netscape rebaptise son langageJavascript (un clin d'oeil au
langage Java développé par Sun).
 A la même époque, Microsoft mit au point le langage Jscript, un
langage de script très similaire.
 Pour éviter des dérives de part et d'autre, un standard a été défini
pour normaliser les langages de script, il s'agit de l'ECMA 262, créé
par l'organisation du même nom (ECMA, European Computer
Manufactures Association).
Invocation de Javascript
 Un programme JavaScript s'intègre directement dans le code HTML
entre deux balises <script> et </script>.
 Afin de solliciter l'interpréteur JavaScript, on précise dans la balise
ouvrante : <script langage="JavaScript">.
 Au lieu de mettre les instructions JavaScript utilisées par une page en
totalité dans celle-ci, on peut avoir recours à l'utilisation de fichiers
contenant tout ou partie des divers éléments utilisés. Ces fichiers
peuvent être de 2 types :
Le premier type concerne des fichiers qui contiennent du source
JavaScript pur (sans HTML). Le fichier sera postfixé par l'extension .js
et chaque page le référençant le fera par : <script src="path/nom de
fichier.js"></script>.
Le second type de fichier concerne les fichiers-archives ayant une
extension .jar (Java archive)
 au chargement de la page
Le code javascript peut s'exécuter au chargement de la page.
 Le programme JavaScript a pour objet d'écrire dans le document du
code HTML pouvant s'adapter dynamiquement à plusieurs facteurs
tels que :
 le type de configuration matérielle et/ou logicielle du client (navigateur, plugins…),
 le contenu éventuel de certains cookies,
 la date, l'heure du moment présent, etc.

 Les parties du document dépendant de facteurs variables ne peuvent

donc pas être écrites « en dur » dans le code HTML (le simple fait que
HTML n'autorise pas de tests permet de comprendre cela).
 À chaque endroit où le contenu du document devra s'adapter à ces
facteurs extérieurs, un script sera placé et exécuté au moment du
chargement.
 Ces scripts prendront naturellement leur place dans le corps du
document (entre <body> et </body>) ;
En réponse à des événement
 Le code javascipt peut s'exécuter à la suite d'un événement
sur un des composants de la fenêtre active.
 Dans ce cas il permet de réagir à des événements qui se
produiront après que la page aura été chargée.
 Survol de souris
 clic
 saisie clavier...
 On parle d’un langage événementiel
 La réaction se fait à travers l’exécution d’actions (instructions).
 Les actions JavaScript que l'on désire associer à un type
d'événement particulier sont indiquées en totalité dans la liste
des caractéristiques de l'objet sur lequel l'événement s'est
produit.
Exemples d’utilisations
 ouvrir des pop-up (les petites fenêtres qui s'ouvrent de manière
intempestive)
 faire défiler un texte
 insérer un menu dynamique (qui se développe au passage de la
souris)
 proposer un diaporama (changement d'image toute les X
secondes, boutons pour mettre en pause, aller à l'image
précédente / suivante, etc.)
 avoir une horloge "à aiguilles" (avec la trotteuse)
 faire en sorte que des images suivent le pointeur de la souris
 créer de petits jeux.
…
 HTML et JavaScript
JavaScript associé aux formulaires permet
d'assister et de guider le visiteur,
de contrôler la saisie,
de faire des traitements
(calcul, manipulation de chaînes de caractères),
d'envoyer les résultats au serveur.
Avantages et limites
 Avantages :
il est d'un apprentissage simple et rapide et permet à des
programmeurs débutants de réaliser leurs premières pages web
sous une forme particulièrement attrayante et fonctionnelle.
Le code n'est pas compilé, il estt donc plus rapide à
produire (pas besoin de compilateur, un seul fichier, ...),

 Limites
mais il est moins puissant qu'un programme en C, par exemple,
et relativement limité : il se limite plus ou moins à la page web
sur laquelle il se trouve. Il ne permet donc pas de faire des choses
comme manipuler des fichiers sur votre disque dur; seulement
des choses assez simples.
jQuery
 Une bibliothèque javascript open-source et cross-browser.
Elle retient l’attention en raison de sa syntaxe astucieuse, de
ses performances, de sa compacité et de son approche
modulaire à base de plugiciels (plugins).
 Elle a pour vocation de faciliter l’utilisation de Javascript.
 JQuery permet par exemple de changer/ajouter une classe
CSS, créer des animations, modifier des attributs, etc.
 Gérer les événements javascript.
 La liste des sites utilisant ce framework est assez
impressionnante, pour n'en citer que quelques uns : Google,
Twitter, Amazon, Intel, Sourceforge.
 Elle est disponible sur le site de Jquery:

http://jquery.com/
Et pour l’utiliser il faudrait ajouter dans le head:
PHP
 Historique
 Le langage PHP a été mis au point en 1994 par Rasmus Lerdorf.
 Ce langage de script lui permettait de conserver la trace des utilisateurs
venant consulter son CV sur son site, grâce à l'accès à une base de données
par l'intermédiaire de requêtes SQL.
 … Ainsi, étant donné que de nombreux internautes lui demandèrent ce
programme
 Rasmus Lerdorf mit en ligne en 1995 la première version de ce
programme qu'il baptisa Personal Home Page /Form Interpreter v1.0
 En 1997, deux étudiants, Andi Gutmans et Zeev Suraski, redéveloppèrent le
cœur de PHP/FI. Ce travail aboutit un an plus tard à la version 3 de PHP,
devenu alors PHP: Hypertext Preprocessor.
 Peu de temps après, Andi Gutmans et Zeev Suraski commencèrent la
réécriture du moteur interne de PHP. Ce fut ce nouveau moteur, appelé Zend
Engine - le mot Zend est la contraction de ZEev et aNDi - qui servit de base à
la version 4 de PHP6.
Pourquoi utiliser PHP
PHP permet la création d'applications dynamiques, le
plus souvent développées pour le Web.
PHP est très majoritairement installé sur un
serveur Apache, mais peut être installé sur les autres
principaux serveurs HTTP du marché, par
exemple IIS.
Ce couplage permet de récupérer des informations
issues d'une base de données, d'un système de
fichiers (contenu de fichiers et de l'arborescence) ou
plus simplement des données envoyées par
le navigateur afin d'être interprétées ou stockées pour
une utilisation ultérieure.
Principe de fonctionnement
 Dans une utilisation Web, l'exécution du code PHP se
déroule ainsi :
1. Un visiteur demande à consulter une page Web,
son navigateur envoie une requête au serveur HTTP
correspondant.
2. Si la page est identifiée comme un script PHP (généralement
grâce à l'extension .php), le serveur appelle l'interprète PHP q
3. PHP traite les données et génère le code final de la page
(constitué généralement d'HTML ou de XHTML, mais aussi
souvent de CSS et de JS).
4. Ce contenu est renvoyé au serveur HTTP, qui l'envoie
finalement au client.
Principaux atouts
 Une grande communauté de développeurs partageant des centaines de milliers
d'exemples de script PHP ;
 En 2002, PHP est utilisé par plus de 8 millions de sites Web à travers le monde ,
en 2007 par plus de 20 millions et en 2013 par plus de 244 millions .
 Multiplate-forme : autant sur Linux qu'avec Windows il permet aisément de
reconduire le même code sur un environnement à peu près semblable.
 Simplicité d'écriture de scripts : c'est un langage peu typé et souple et donc
facile à apprendre par un débutant
 Libre, gratuit, simple d'utilisation et d'installation (PHP est distribué sous licence
GNU GPL)
 Possibilité d'inclure le script PHP au sein d'une page HTML
 Simplicité d'interfaçage avec des bases de données
(de nombreux SGBD sont supportés, mais le plus utilisé avec ce langage est MySQL, un SGBD
gratuit disponible sur de nombreuses plateformes : Unix, Linux, Windows, MacOs X, Solaris,
etc...) ;
 Intégration au sein de nombreux serveurs web (Apache, Microsoft IIS, etc.).
 des failles de sécurité peuvent rapidement apparaître dans les applications.