1

Module I: GENERALITES

1. Introduction au World Wide Web

On appelle «Web» (nom anglais signifiant «toile»), contraction de «World Wide
Web» (d'où l'acronyme www), une des possibilités offertes par le réseau Internet
de naviguer entre des documents reliés par des liens hypertextes.
Le concept du Web a été mis au point au CERN (Centre Européen de Recherche
Nucléaire) en 1991 par une équipe de chercheurs à laquelle appartenaient Tim-
Berners LEE, le créateur du concept d'hyperlien, considéré aujourd'hui comme le
père fondateur du Web.
Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre des
documents (appelés «pages web») grâce à un logiciel appelé navigateur
(parfois également appelé fureteur ou butineur ou en anglais browser). Une page
web est ainsi un simple fichier texte écrit dans un langage de description (appelé
HTML), permettant de décrire la mise en page du document et d'inclure des
éléments graphiques ou bien des liens vers d'autres documents à l'aide de
balises.
Au-delà des liens reliant des documents formatés, le web prend tout son sens
avec le protocole HTTP permettant de lier des documents hébergés par des
ordinateurs distants (appelés serveurs web, par opposition au client que
représente le navigateur). Sur Internet les documents sont ainsi repérés par une
adresse unique, appelée URL, permettant de localiser une ressource sur
n'importe quel serveur du réseau internet.

2. Qu'est-ce qu'un site web ?

Un site web (aussi appelé site internet ou page perso dans le cas d'un site
internet à but personnel) est un ensemble de fichiers HTML stockés sur un
ordinateur connecté en permanence à internet et hébergeant les pages web
(serveur web).
Un site web est habituellement architecturé autour d'une page centrale, appelée
«page d'accueil» et proposant des liens vers un ensemble d'autres pages
hébergées sur le même serveur, et parfois des liens dits «externes», c'est-à-dire
de pages hébergées par un autre serveur.
Une URL se présente sous la forme suivante : http://www.cifeed.ci/info/ndex.php
Etudions plus en détail cette adresse :
- http:// indique que nous souhaitons naviguer sur le web au moyen du
protocole HTTP, le protocole utilisé par défaut pour naviguer entre les
pages web. Il existe d'autres protocoles, correspondant à d'autres usages
de l'Internet.

- www.cifeed.ci correspond à l'adresse du serveur qui héberge les pages

web. Par convention les serveurs web possèdent un nom commençant par
www, afin de bien symboliser qu'il s'agit de serveurs dédiés à l'usage du
web et surtout dans un souci de cohérence afin de permettre la
mémorisation de l'adresse. La seconde partie de cette adresse est appelée
nom de domaine.
 2

- /info/ndex.php permet d'indiquer la localisation du document sur la

machine. Dans le cas présent il s'agit du fichier www-intro.php3
situé dans le répertoire www

3. Apport d’Internet
La création d’un site internet pour une entreprise ou une organisation a des
avantages certains qui peuvent être résumés en ces point suivants :

- Une carte de visite de votre entreprise

Le développement vers Internet est devenu un enjeu stratégique pour
les entreprises.
Vous pourrez mentionner vos adresses Internet sur tous vos documents
commerciaux et cela renforcera votre image et votre crédibilité.

- Une publicité permanente et détaillée

Les moteurs de recherche (Yahoo, Google, Altavista, …) donnent la
possibilité, à de nombreux internautes, de découvrir votre entreprise
sans même connaître à l'avance le nom de votre société.
De par la mise en ligne de vos catalogues ou de vos documentations,
vous mettez aussi à la disposition des visiteurs une source précise et
informative sur les qualités et les prix de vos divers produits.

- Ouverture 24h/24 et 365 jours par an

L'Internet n'est jamais fermé, et il en va donc normalement de même
pour tout site présent sur le net. Vos prestations peuvent donc ainsi
être considérablement augmentées du jour au lendemain.

- Clientèle mondiale
Plus de 100 millions de personnes dans le monde ont accès à Internet,
et ce chiffre croît très rapidement (env. 10% par mois!). Il est certain
que les clients que vous souhaitez toucher utilisent ou utiliseront
Internet. Mais il est aussi certain que vous pouvez toucher de la même
façon des clients sur toute la planète. Vous avez donc une importante
possibilité d'augmenter vos ventes.

4. Notion d’application web

Une application Web est un ensemble de pages statiques et dynamiques.

4.1. Web statique

Une page statique n'est pas modifiée lorsqu'un visiteur la consulte  : le
serveur Web transmet la page au navigateur qui la sollicite sans la modifier.

Traitement des pages Web statiques

 3

Un site Web statique comprend un jeu de pages et fichiers HTML associés

hébergés sur un ordinateur exécutant un serveur Web.
Un serveur Web est un logiciel qui fournit des pages Web en réponse à des
requêtes de navigateurs Web. Une requête de page est générée lorsqu'un
utilisateur clique sur un lien d'une page Web, choisit un signet dans le
navigateur ou saisit une URL dans le champ « Adresse » du navigateur.
Le contenu final d'une page Web statique est déterminé par le créateur de la
page et n'est pas modifié lorsqu'un utilisateur la demande.
Exemple :
<html>

<head>

<title>Page d'informations de Lore@Concept</title>

</head>

<body>

<h1>A propos de Lore@Concept</h1>

<p>Lore@Concept est un des principaux éditeurs de logiciels

En Côte d’Ivoire.</p>

</body>

</html>

Chaque ligne du code HTML de la page est rédigée par le créateur avant que
la page ne soit placée sur le serveur. Ce code HTML n'étant pas modifié une
fois la page sur le serveur, cette page est dite statique.

Lorsqu'un serveur Web reçoit une requête de page statique, il lit la requête,
localise la page et la transmet au navigateur qui l'a sollicitée, tel qu'indiqué
dans la figure ci-dessous :

Dans le cas des applications Web, certaines lignes de code ne sont pas
déterminées au moment où l'utilisateur sollicite la page. Ces lignes doivent
 4

être déterminées via un mécanisme avant que la page ne soit transmise au

navigateur. Ce mécanisme est présent dans le web dynamique.

4.2. Architecture & fonctionnement des applications web dynamique

La notion de site Web dynamique s'oppose à celle de site statique.

Un site statique est composé uniquement de pages HTML, créées une par une
par un webmaster. Dans ce cadre, chaque modification de page demande la
réédition de cette dernière et une nouvelle mise en place sur le serveur.

Dans le cadre d'un site dynamique, le contenu et la présentation des pages

peuvent être gérés indépendamment. Ainsi, le webmaster définit un modèle
de présentation dans lequel peut s'afficher "dynamiquement" un contenu,
extrait le plus souvent d'une base de données. Les modifications à apporter
au site sont ainsi plus légères puisqu'elles ne nécessitent l'accès qu'à un seul
fichier ou au texte présent dans une base.

Autre grand avantage des sites dynamiques, les contenus affichés dans
chacune des pages peuvent être sélectionnés en fonction de différents
paramètres : numéro d'article, heure de la journée, etc. Il est également
possible que ce contenu soit créé en direct par différents utilisateurs du site.
Enfin, les sites dynamiques permettent la gestion d'une communauté
d'utilisateurs, le profil de chacun d'eux pouvant être considéré comme un
élément à afficher ou un paramètre à utiliser pour personnaliser le contenu
des pages.

La construction de sites dynamiques repose bien souvent sur des technologies

de scripts telles que PHP, ASP ou ColdFusion.

 Traitement des pages dynamiques

Lorsqu'un serveur Web reçoit une requête de page Web statique, il transmet
directement cette page au navigateur qui la demande. Le serveur Web réagit
différemment lorsqu'il reçoit une requête de page dynamique  : Il transmet la
page à un logiciel spécial chargé de terminer la page. Ce logiciel spécial est
appelé un serveur d'application.
Le serveur d'application lit le code de la page, termine cette page en fonction
des instructions figurant dans le code, puis en retire le code. Il en résulte une
page statique que le serveur d'application renvoie au serveur Web, lequel
transmet alors cette page au navigateur demandeur. Le navigateur reçoit
uniquement du code HTML pur lorsque la page lui est transmise. Voici un
aperçu du processus :
 5

 Accès à une base de données

Un serveur d'application permet de travailler avec des ressources côté
serveur telles que les bases de données. Une page dynamique peut, par
exemple, ordonner au serveur d'application d'extraire des données de la base
de données et de les insérer dans le code HTML de la page.

Un serveur d'application ne peut pas communiquer directement avec une

base de données car le format propriétaire de cette dernière rend les données
indéchiffrables, de la même manière qu'un document Microsoft Word ouvert
dans Bloc-notes ou BBEdit peut être indéchiffrable. Le serveur d'application
peut communiquer avec la base de données uniquement via un pilote de base
de données, logiciel faisant office d'interprète entre le serveur d'application et
la base de données.
Une fois que le pilote a établi la communication, la requête est exécutée par
rapport à la base de données et un jeu d'enregistrements est créé. Un jeu
d'enregistrements est un ensemble de données extraites d'une ou de
plusieurs tables de base de données. Le jeu d'enregistrements est renvoyé au
serveur d'application, lequel utilise les données pour terminer la page.

Voici une illustration du processus d'interrogation de la base de données via

des requêtes et de la transmission des données au navigateur :
 6

On peut utiliser pratiquement toutes les bases de données avec votre

application Web, à condition que les pilotes de base de données appropriés
soient installés sur le serveur.
Si l’on prévoie de créer de petites applications peu onéreuses, on peut utiliser
une base de données fichier, créée par exemple sous Microsoft Access. Si l’on
prévoie de créer des applications stratégiques robustes, vous pouvez utiliser
une base de données serveur, créée par exemple avec Microsoft  SQL Server,
Oracle 9i ou MySQL.

Les applications Web dynamique épouse une architecture à 3 parties (on

parle d’application 3 tiers : 3/3)
Partie 1 : le client, ici le navigateur web. Il est qualifié de client universel
Parte 2 : le serveur d’application
Partie 3 : le serveur de données (Base de données)
 7

Module II: Mise en place de l’environnement de développement

d’applications WEB

Un environnement de développement intégré (EDI ou IDE en anglais pour

Integrated Development Environment) est un programme regroupant un
ensemble d'outils pour le développement de logiciels. En règle générale, un EDI
regroupe un éditeur de texte, un compilateur, des outils automatiques de
fabrication, et souvent un débogueur.
Autrement, l’environnement de développement doit permettre non seulement
d’éditer le programme (programme source), mais en plus de l’exécuter.
En tenant compte de l’architecture des applications web, l’environnement de
développement se compte :
- de navigateur (partie client)
- de serveur web, complété par un langage de script (serveur d’application)
- de serveur de base de données

1. Environnement minimale
 Navigateur Web
Un navigateur Web est un logiciel conçu pour consulter le World Wide Web.
Techniquement, c'est au minimum un client HTTP. La fonction principale d'un
navigateur web est de permettre la consultation d'informations disponibles
(« ressource » dans la terminologie du Web) sur le World Wide Web.
Un navigateur est constitué de modules divers réalisant des fonctions bien
déterminées:
- un interpréteur d'URL
- un interpréteur de code HTML ou XHTML (plus recent)
- un interpréteur de langage de script (JavaScript, VBScript...)
- un environnement d'exécution d'applications (Applet Java, ActiveX,
plugins)
- une barre d'outils

Quelques navigateurs web

- Microsoft Internet Explorer
- Mozilla Firefox 
- Apple Safari 
- Google Chrome 
- Opera
- Netscape 

 Serveur HTTP
Un serveur HTTP ou daemon HTTP ou HTTPd (HTTP daemon) ou (moins
précisément) serveur Web, est un logiciel servant des requêtes respectant le
protocole de communication client-serveur Hypertext Transfer Protocol (HTTP),
qui a été développé pour le World Wide Web.
Les logiciels de serveur HTTP les plus utilisés sont :
 8

- Apache HTTP Server de Apache Software Foundation, successeur du NCSA

httpd ;
- Internet Information Services (IIS) de Microsoft ;
- Sun Java System Web Server de Sun Microsystems (anciennement iPlanet
de Netscape, puis Sun ONE de Sun Microsystems) ;
- Zeus Web Server de Zeus Technology ;
- lighttpd de Jan Kneschke ;
- nginx d'Igor Sysoev.

Le serveur HTTP le plus utilisé est Apache HTTP Server qui sert environ 60% des
sites Web en 2007 selon Netcraft.

Apache est disponible l’adresse www.apache.org

 PHP
PHP est un langage interprété (un langage de script) exécuté du côté serveur
(comme les scripts CGI, ASP, ...) et non du côté client (un script écrit en
Javascript ou une applet Java s'exécute sur votre ordinateur...). La syntaxe du
langage provient de celles du langage C, du Perl et de Java. Ses principaux
atouts sont :
- Une grande communauté de développeurs partageant des centaines de
milliers d'exemples de script PHP ;
- La gratuité et la disponibilité du code source (PHP est distribué sous
licence GNU GPL) ;
- La simplicité d'écriture de scripts ;
- La possibilité d'inclure le script PHP au sein d'une page HTML
(contrairement aux scripts CGi, pour lesquels il faut écrire des lignes de
code pour afficher chaque ligne en langage HTML) ;
- La 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...) ;
- L'intégration au sein de nombreux serveurs web (Apache, Microsoft IIS,
etc.).

PHP est disponible à l’adresse www.php.net

 Serveur de base de données

Une base de données (Abr. : « BD » ou « BDD ») est un stock d'informations
organisé et structuré de manière à pouvoir être facilement manipulé. Les bases
de données sont typiquement utilisées pour stocker efficacement de très grandes
quantités d'informations.

Un système de gestion de base de données (abrégé SGBD) est un ensemble de

logiciels qui sert à la manipulation des bases de données. Il sert à effectuer des
 9

opérations ordinaires telles que consulter, modifier, construire, organiser,

transformer, copier, sauvegarder ou restaurer des bases de données.
Quelques systèmes de gestion de base de données :
- ACCESS
- Oracle
- SQL Server
- MYSQL

MYSQL est un des SGBD les plus utilisés dans les applications Web.
Il est disponible à l’adresse www.mysql.com

2. Le tout en un
La mise en place d’un environnement de développement d’application Web
consiste à installer chaque composant de l’environnement.
Ce processus demande des notions avancées en informatique, c'est pourquoi
trois adeptes de PHP (Emmanuel Faivre, Laurent Abbal et Thierry Murail) ont mis
au point un package (appelé EasyPHP) contenant 3 produits incontournables de
la scène PHP :
- Le serveur Web Apache
- Le moteur de scripts PHP4
- La base de données MySQL
- Un outil de gestion de base de donnée graphique, Phpmyadmin

EasyPHP est ainsi un pack fonctionnant sous Windows permettant d'installer en

un clin d'œil les éléments nécessaires au fonctionnement d'un site web
dynamique développé en PHP
Le pack EasyPHP est disponible sur les sites suivants :
- www.manucorp.com
- www.easyphp.org

Module III. Langages de programmation

Le développement d’application web nécessite la connaissance de langages du

côté client (HTML, Javascript) , et ceux du côté serveur (php).

1. Langage HTML

1.1. Les Bases

Ce chapitre présente les notions de base du langage HTML : la notion d'élément
HTML délimité par des balises, le squelette d'un document HTML et les
déclarations à placer en en-tête. Nous aborderons aussi la notion de feuille de
style, qui permet une complète séparation de la forme et du fond.

1.1.1 Les éléments et les balises

 Les éléments
 10

HTML (HyperText markup language) est un langage de formatage de documents.

Il permet d'enrichir un texte avec des informations structurelles, sémantiques et
de présentation. Le principe de HTML, commun à ce type de langages (SGML
pour Standard Generalized Mark-up Language), consiste à utiliser des éléments
délimités par des balises.
En fait, HTML est un langage de type SGML, correspondant à un ensemble
particulier d'éléments pour décrire des pages destinées au World Wide Web.
Les éléments permettent d'associer à différents blocs (texte, images...) les
informations structurelles, sémantiques et de présentation désirées. Les
principaux éléments HTML permettent de définir des liens hypertextes, des titres,
des paragraphes, des listes, des tableaux, des images, et cætera...

 Les balises
Les éléments sont délimités par des balises. On place une balise de début avant
le contenu de l'élément et une balise de fin après. Mais dans certains cas, la
balise de fin n'est pas nécessaire.
Une balise est formée en encadrant le nom de l'élément avec les symboles < et
> (soit <element> où element est le nom de l'élément). Pour une balise de fin
on ajoute le caractère / avant le nom de l'élément (soit </element>. Dans
l'exemple suivant on définit un titre ou en-tête principal (élément H1). Seul le
texte balisé constitue l'élément H1. Les navigateurs courants utilisent pour ce
genre d'éléments une typographie plus forte.

<H1>Ceci est mis en valeur</H1>

Le reste intact

Ce code produit l'affichage suivant dans un navigateur graphique :

Ceci est mis en valeurLe reste intact

Enfin, un certain nombre de balises n'ont pas besoin de marqueur de fin. La fin
de l'élément sera déterminée automatiquement par le logiciel de navigation.
C'est le cas en particulier de l'élément P qui indique un nouveau paragraphe. Le
code précédent serait d'ailleurs plus correct en ajoutant une balise <P> après le
titre :
<H1>Ceci est mis en valeur</H1>
<p>Le reste intact

1.1.2. Les attributs

Les attributs permettent d'apporter certaines précisions à des éléments. Il peut
s'agir par exemple d'un nom de fichier (pour placer une image) ou d'une
référence à une adresse HTML (lorsqu'on crée un lien). On place les attributs
dans la balise de début de l'élément concerné. La syntaxe est simple : "nom de
l'attribut"="valeur de l'attribut".
 11

Dans l'exemple suivant, on place une image (élément IMG). Deux attributs
permettent l'un de déterminer le nom du fichier contenant l'image et l'autre de
placer une brève description de cette image.

<IMG src="bateau01.jpg" alt="Un bateau">

Note 1 : l'élément IMG n'a pas besoin de balise de fin.

Note 2 : l'attribut alt de l'élément IMG est indispensable pour construire des
pages accessibles. Il a d'ailleurs été rendu obligatoire par la norme HTML 4.0.

1.1.2. Conventions & liste des balises

Les noms des balises comme les attributs peuvent être écrits indifféremment en
majuscule ou en minuscules. Cependant, pour plus de clarté dans ce cours,
j'essayerai d'écrire systématiquement les noms d'éléments en majuscules et en
minuscules.

Balise Description Fin Attribut

HTML

<!doctype> Numéro de version du langage HTML N  

utilisé.
<!-- --> Commentaire. N  
<abbr> Abréviation. O  
<acronym> Acronyme. O  
<address> URL sous forme textuel, sans utilisation O  
de lien hypertexte (italique).
<a> Création d'une ancre pour liens O href="http://..." : Hyperlien vers une page Web.
hypertexte. href="ftp://..." : Hyperlien vers une adresse FTP.
href="telnet://..." : Hyperlien vers une adresse TelNet.
href="mailto:nom@domaine.com" : Hyperlien vers l'e-mail de
nom@domaine.com.
href="nomdefichier" : Hyperlien vers un fichier local, si le fichier ne peut pas
être affiché dans le navigateur, le fichier sera téléchargé.
<applet> Insertion d'un applet Java. (déconseillé) O  
<area> Permet de définir une zone cliquable N  
dans la page.
<b> Gras. O  
<base> Définition de l'URL de la page HTML N  
exploité en cas d'erreur de transmission.
<basefont> Définit la taille par défaut des N size=x : La taille par défaut des caractères sera de x.
caractères. (déconseillé)
<bdo> Changement de direction impossible. O  
<bgsound> Insertion d'un fichier audio au format N src="fichierson" : emplacement et nom du fichier son.
WAV ou MID (I.E. seulement).
<big> La taille de la police est augmenté de 1 O  
point.
<blink> Clignotement du texte (N.N. seulement). O  
<blockquote> Petite marge à gauche. O  
<body> Encadre le corps d'un fichier HTML. O bgcolor="couleur" : Couleur qui sera utilisé pour l'arrière plan.
background="fichierimage" : Image d'arrière-plan (BMP, JPG ou GIF).
link="couleur" : Couleur des liens.
alink="couleur" : Couleur des liens déjà exploités.
vlink="couleur" : Couleur des liens lors du clic.
<br> Saut de ligne. N clear="left|right|all" : Le texte ou l'image suivante est décalé vers le bas,
jusqu'à ce qu'il n'y ait plus d'élément de formatage à gauche|à droite|à
gauche et à droite.
<button> Bouton dans un formulaire (I.E. O  
seulement).
<caption> Titre de tableau. O align="left|center|right" : Alignement du titre à gauche|centré|à droite.
<center> Centrage. (déconseillé) O  
<cite> Citation (italique). O  
<code> Code source. O  
<col> Définition d'une colonne d'un tableau N  
(I.E. seulement).
<colgroup> Regroupement de colonnes dans un F  
tableau (I.E. seulement).
<commment> Commentaire (I.E. seulement). O  
 12

<dd> Définition d'un terme de glossaire F  

(retrait) (encadré par <dl>).
<del> Information sur le document HTML. O  
<dfn> Texte sous forme logique. (déconseillé) O  
<dir> Liste à plusieurs dimensions. O  
<div> Implémente une feuille de style par bloc O id="[nom]" : Identifiant.
entier. class="[nom]" : Classe.
<dl> Structure d'un glossaire (encadre la O  
balise <dt> et la balise <dd>).
<dt> Elément d'un glossaire (encadré par la F  
balise <dl>).
<em> Emphase (italique). O  
<embed> Insertion d'application multimédia. N  
<fieldset> Regroupement de zone dans les O  
formulaires.
<font> Définition du texte. (déconseillé) O size=x : Caractère de taille x (x compris entre 1 et 7).
size=+x|-x : Augmenter|Réduire la taille de caractère de x.
color="couleur" : définit la couleur du texte.
<form> Insertion d'un formulaire (encadre les O action="..." : Pour l'envoi par e-mail, remplacer ... par l'e-mail.
balises <input>, <textarea>, <select> et method="..." : Pour l'envoi par e-mail, remplacer... par "post".
<option>).
<frame> Insertion d'une nouvelle frame 'encadré N  
par la balise <frameset>.
<frameset> Fichier d'index pour les frames, O  
remplace la balise <body> (encadre la
balise <frame>).
<h1> Titre de niveau 1. O align="center|left|right" : Titre centré|aligné à gauche|aligné à droite.
<h2> Titre de niveau 2. O align="center|left|right" : Titre centré|aligné à gauche|aligné à droite.
<h3> Titre de niveau 3. O align="center|left|right" : Titre centré|aligné à gauche|aligné à droite.
<h4> Titre de niveau 4. O align="center|left|right" : Titre centré|aligné à gauche|aligné à droite.
<h5> Titre de niveau 5. O align="center|left|right" : Titre centré|aligné à gauche|aligné à droite.
<h6> Titre de niveau 6. O align="center|left|right" : Titre centré|aligné à gauche|aligné à droite.
<head> En-tête d'un fichier HTML (encadre les O  
balises <title>, <meta> et <base>).
<hr> Barre horizontale N align="center|left|right" : Barre centré|aligné à gauche|aligné à droite.
width=x%|y : Trait large de x pourcent|y pixels.
size=x : Hauteur du trait en pixels.
color="couleur" : Couleur de la barre (I.E. seulement).
noshade : Pas d'affichage ombré.
<html> Obligatoire au début et à la fin du fichier O  
HTML.
<i> Italique. O  
<iframe> Cadre local (I.E. seulement). O  
<img> Insertion d'une image. N src="nomdefichier" : emplacement et nom du fichier image (format bmp, jpg,
gif).
align="top|middle|bottom|left|right" : aligner l'image en haut|au milieu|en bas|à
gauche|à droite.
width=x : largeur de x pixels.
height=y : hauteur de y pixels.
border=x : bordure de x pixels.
alt="texte" : affiche ce texte lorsque l'image n'est pas affichable ou lorsque la
souris reste pointée dessus.
<input> Nouvelle élément dans un formulaire. N type="submit|reset|radio|checkbox : définit le type de l'élément : bouton
"ENVOYER"|bouton "EFFACER"|case d'option|case à cocher. Pour tous ces
types, l'attribut value est obligatoire. Pour radio et checkbox, l'attribut name
est obligatoire.
value="texte" : texte à afficher dans la case ou la zone de texte.
name="NomDeLélément" : nom donné à l'élément, chaque radio ou
checkbox appartenant au même groupe doivent possédé le même name,
mais un value différent.
size=x : longueur x d'un champs de saisie d'une ligne, (pour le champ de
saisie, seuls les attributs size, name et maxlenght sont demandés.
maxlenght=y : longueur maximal d'un champ de saisie d'une ligne.
<ins> Fournit des informations sur le O  
document.
<isindex> Définition d'un fichier de recherche N  
(script CGI). (déconseillé)
<kbd> Texte type "machine à écrire". O  
<label> Extension de la balise <form> (I.E. O  
seulement).
<layer> Définition des couches (N.N. O  
seulement).
<legend> Légende de tableau. O  
<li> Elément d'une liste (encadré par la O  
balise <ul> ou la balise <ol>).
<link> Lien indépendant du média. N  
<map> Définit une zone cliquable. O  
<marquee> Texte défilant (I.E. seulement). O  
<menu> Liste de type menu. (déconseillé) O  
<meta> Information sur la page HTML. N name="description|keywords|author" : la description|les mots-clés|l'auteur
 13

seront indiqués dans l'attribut content.

http-equiv="refresh" : provoque le chargement de la page indiqué dans
l'attribut url après x secondes indiqués dans l'attribut content. Si url est omis,
la même page est rechargée.
content="nombre ou texte" : voir ci-dessus.
url="fichier" : voir l'attribut http-equiv.
<nextid> Indique le document suivant. N  
<nobr> Pas de passage automatique à la ligne O  
sauf avec la balise <wbr>.
<noembed> Encadre les éléments qui seront O  
interprété si les applications multimédia
ne sont pas acceptés par le navigateur.
<noframes> Encadre les éléments qui seront O  
interprétés si les frames ne sont pas
accepté par la navigateur.
<noscript> Encadre les éléments qui seront O  
interprété si les scripts ne sont pas
acceptés par le navigateur.
<object> Insertion d'objet (multimédia, applet O  
Java...).
<ol> Liste numérotée (encadre la balise <li>). O  
<option> Nouvelle entrée dans une liste de choix. N  
<p> Début d'un paragraphe, saute 2 lignes. F align="center|left|right" : Paragraphe centré|aligné à gauche|aligné à droite.
<param> Paramètre d'un objet inséré. O  
<pre> Texte pré-formaté avec une police non- O  
proportionnelle.
<q> Citation longue. O  
<s> Texte barré. O  
<samp> Exemple en italique. O  
<script> Insertion d'un script O language="javascript|vbscript" : Langage utilisé pour le script.
<select> Liste de choix (encadre la balise O  
<option> et encadré par la balise
<form>).
<small> Réduit la taille des caractères de 1 O  
point.
<span> Implémente une feuille de style. O id="[nom]" : Identifiant.
class="[nom]" : Classe.
<strike> Texte barré. (déconseillé) O  
<strong> Texte en gras. O  
<style> Feuille de style (le plus souvent dans O  
entre les balises <head> et </head>).
<sub> Texte en indice. O  
<sup> Texte en exposant. O  
<table> Tableau. O cols=x : Tableau composé de x colonnes.
width=x%|y : Tableau large de x pourcent|de y pixels.
border=x : Taille de la bordure en pixels.
cellpadding=x : Espacement entre bordure et texte.
cellspacing=x : Espacement entre les cellules.
<tbody> Regroupement de tableaux. F  
<td> Nouvelle cellule dans un tableau F width="x%|y" : Cellule large de x pourcent|y pixels.
(encadré par la balise <tr>). align="center|left|right" : Le texte compris dans les cellules est centré|aligné à
gauche|aligné à droite.
colspan=x : x cellules à fusionner horizontalement.
rowspan=x : x cellules à fusionner verticalement.
bgcolor="couleur" : Couleur d'arrière-plan de la cellule.
<textarea> Champ de saisie de plusieurs lignes. O name="nom" : Nom donné à la zone de texte.
rows=x : Zone de texte de largeur x.
cols=x : Zone de texte de longueur maximale x.
<tfoot> Regroupement de tableaux. F  
<th> Cellule d'en-tête d'un tableau. F  
<thead> Regroupement de tableaux. O  
<title> Titre du document HTML (à insérer dans O  
la balise <head>).
<tr> Nouvelle ligne d'un tableau (encadré par F height="x%|y" : Ligne large de x pourcent|y pixels.
la balise <table>). bgcolor="couleur" : Couleur d'arrière-plan de la ligne.
<tt> Texte de type "machine à écrire". O  
<u> Texte en souligné. (déconseillé) O  
<ul> Liste non-numéroté (encadre la balise O  
<li>).
<var> Texte sous forme de variable. O  
<wbr> Désactive temporairement la balise N  
<nobr>.
<xmp> Texte sous forme d'exemple (italique). O  
(obsolète)

1.2. Jeu de caractères

 14

Pour différentes raisons le jeu de caractère utilisé pour stocker les documents
HTML est le code ASCII standard sur 7 bits. Ce code permet de décrire le jeu de
128 caractères de base comprenant les lettres majuscules et minuscules, les
chiffres et les signes de ponctuation. Les caractères accentués sont codés dans
des jeux de caractères étendus à 8 bits.
La principale raison qui aujourd'hui oblige à continuer d'utiliser le code ASCCI 7
bit et non un code étendu est que tous les ordinateurs n'utilisent pas les mêmes
codes étendus (caractères 128 à 255). Les machines sous Windows et la plupart
des machines Unix utilisent maintenant le code dit ISO-LATIN1, mais les PC sous
DOS, les MACintosh et différents autres types d'ordinateurs utilisent d'autres
codes.
Pour écrire des documents susceptibles d'être consultés sans problèmes quelque
soit le type de système du client, il est nécessaire de coder les caractères
accentués en utilisant un codage un peu particulier. On indique entre des
caractères & et ; la lettre et l'accent. Ainsi le caractère é doit-il être représenté
par la chaine &eacute;.
Mais les caractères accentués ne sont pas les seuls à être codés de cette façon.
Le caractère & lui même doit être codé de façon particulière sinon comment
différencier les cas où on l'utilise pour lui même de ceux où il débute un
caractère spécial ? De même les < et > pourraient être confondus avec le début
où la fin d'une balise.

Voici quelques exemples parmi les plus fréquemment utilisés.

&eacute; é &agrave; à &lt; <

&egrave; è &acirc; â &gt; >
         &ecirc; ê          &ugrave; ù          &quot; "
&euml; ë &ccedil; ç &amp; &
&Eacute; É &Ccedil; Ç &nbsp; espace insécable

1.2. Squelette d'un document

Un document HTML 4.0 comporte 2 parties, encadrées par des balises <HTML>

et </HTML> :
 Un en-tête de déclaration (délimité par des balises <HEAD>)
 Le corps du document, dans lequel on placera le contenu de celui-ci
(délimité par des balises <BODY>, ou bien par des balises <FRAMESET>
dans le cas d'un document multi-frames).
D'autre part, la version HTML utilisée doit être précisée dans la première ligne,
en utilisant une balise <!DOCTYPE ...>.

Exemple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Bienvenue à CIFEED</TITLE>
 15

</HEAD>
<BODY>
<H1>CIFED, Cabinet de formation</H1>
<P> nos prestations couvrent…
...
</BODY>
</HTML>
Remarquez dans l'exemple la position du texte marqué par l'élément <TITLE>.

1.3.1. L'en-tête d'un document HTML

L'en-tête sert à indiquer un certain nombre d'informations relatives au document
dont le logiciel de navigation ou tout autre agent logiciel peut tirer partie. En
général ses informations ne sont pas affichées directement. Quelques exemples :
- Indiquer une feuille de style. Cette information sera utilisée par les
logiciels de navigation pour construire la mise en page du document.
- Fournir des mots-clés. Ceux-ci sont très utiles aux moteurs de recherche.
- Donner un titre au document. Ce que HTML appelle titre du document
n'est pas comme beaucoup s'y attendent un paragraphe placé en haut de
la page en gros caractères et séparé du texte suivant par un espacement
important. Il s'agit en fait du nom du document, qui est souvent utilisé par
les navigateurs comme titre de fenêtre.

<TITLE>Bienvenue dans l'estuaire de Seine</TITLE>

Voici ce qu'affiche le navigateur Netscape :

1.3.2. Le corps d'un document HTML

Il s'agit du contenu du document à proprement parler, de ce qui sera présenté à
l'utilisateur. C'est un élément HTML délimité par des balises <BODY>.
Dans les précédentes versions de HTML on indiquait la couleur des fonds, du
texte, des liens... dans des attributs de la balise <BODY>. Cette façon de faire
est obsolète avec HTML 4.0. La technique valide est d'utiliser des feuilles de
style.
Plus généralement, on évitera d'utiliser les éléments HTML ou les attributs
obsolètes. Tout d'abord ces éléments sont remplacés par des propriétés de
feuilles de styles, qui offrent des possibilités bien plus étendues. Mais ces
éléments posent en plus des problèmes d'accessibilité.

1.4. Les liens hypertextes : L'élément <A>

1.4.1. Définir un lien

Les liens hypertextes sont définis à l'aide de l'élément <A>. Le texte de cet
élément constitue la zone sur laquelle cliquer pour exécuter un lien :
<A HREF="adresse de destination">Nom du lien<A>
L'adresse de destination peut être une URL ou bien un nom de fichier situé sur le
même serveur. Dans ces deux cas on parle de lien externe. Mais un lien peut
aussi diriger vers un marqueur, ou une étiquette, situé dans la même page. Il
s'agit alors d'un lien interne.
Les liens pointent souvent vers d'autres documents HTML mais ce n'est pas
obligatoire. On peut diriger un lien vers n'importe quel type de document. Le
 16

navigateur lance alors le "visualiseur" adapté ou bien propose d'enregistrer le

fichier sur le disque local.

 Les liens externes

 <A HREF="http://www.w3.org">Le W3C - World Wide Web Consortium</A>
LE W3C - WORLD WIDE WEB CONSORTIUM

 <A HREF="index.html">Cours HTML</A>

COURS HTML

 Les liens internes

Ils pointent vers une étiquette située dans le même document HTML. Cette
étiquette doit être définie avec un élément <A> complété cette fois-ci par
l'attribut name.
On utilise le caractère # pour déterminer si un lien se réfère à un autre
document (lien externe) ou à une étiquette dans le même document.

Définition d'une étiquette

<A NAME="sommaire"></A>
Ce code n'affiche rien, mais cette étiquette a été placée au début du document.

Lien vers une étiquette

<A HREF="#sommaire">Sommaire</A>
SOMMAIRE
On peut aussi aller vers une étiquette dans un autre document :
<A HREF="bases.html#sommaire">Sommaire du chapitre "Les bases"</A>

SOMMAIRE DU CHAPITRE "LES BASES"

1.4.2. Types de liens

 Un document
o Un fichier HTML
o Un texte
o Une image GIF, JPEG ou Postscript
o Un son
o Un film
o ...
 Un autre service Internet
o FTP (Transfert de fichiers)
FTP://serveur_ftp/repertoire/...
<a href="ftp://ftp.ibp.fr/pub"> Le serveur de l'IBP</a>
LE SERVEUR DE L'IBP

o SMTP (Échange de courrier électronique)

MAILTO:dest@adresse
<a href="mailto:archambault@iut.univ-lehavre.fr"> envoyer un message à
D. Archambault</a>
ENVOYER UN MESSAGE À D. ARCHAMBAULT

o NNTP (Les forums de News)

NEWS:nom_de_groupe
 17

<a href="news:fr.comp.ia">fr.comp.ia</a>
FR.COMP.IA
o …
1.5. Intégrer des images

1.5.1. L'élément <IMG>

On utilise l'élément <IMG> pour placer les images. Deux attributs sont
obligatoires :
 L'attribut src pour spécifier le nom du fichier image à charger. Les fichiers
image doivent impérativement être aux formats GIF ou JPG.
 L'attribut alt pour indiquer un contenu alternatif, c'est à dire un texte à
afficher à la place de l'image lorsque, pour différentes raisons, elle
n'apparaît pas.

<IMG src=img.gif alt="L’image ne peut être affiché">

1.5.2. Les attributs optionnels de l'élément <IMG>

 L'attribut align
Il indique le mode d'alignement de l'image. Il y a 5 valeurs possibles : top,
middle, bottom, left, right. Les trois premiers concernent l'alignement vertical
par rapport à la ligne.
 L'attribut border
Permet de régler l'épaisseur du trait entourant l'image, en pixels. La valeur 0
signifie qu'il n'y a pas de bordure (c'est la valeur par défaut sauf dans le cas où
l'image est dans un lien).
 Les attributs width et height
Ils permettent de déterminer la hauteur et la largeur de l'image, en pixels.
<
1.6. Les tableaux
HTML permet de réaliser des tableaux avec réglage de l'encadrement, de la taille
et de l'espacement des cellules. Chaque cellule peut contenir du texte, des listes,
des images, des liens hypertextes, des éléments de formulaire...
1.6.1. Structure d'un tableau
Un tableau est décrit par différents éléments :
 L'élément TABLE correspond au tableau lui-même
 L'élément TR est utilisé pour définir chacune des lignes du tableau
 L'élément TD est utilisé pour chaque cellule

 L'élément TABLE
Un tableau est donc débuté par une balise <TABLE> et se termine sur une balise
</TABLE>. Entre les deux, on définira les lignes et les cellules.
 18

Les principaux attributs applicables à l'élément TABLE sont :

 border : pour spécifier l'épaisseur de la bordure extérieure
 cellpading : pour spécifier l'espace entre bordures et contenu des cellules
 cellspacing : pour spécifier l'épaisseur des bordures entre cellules

A B

C D

Exemple

<TABLE border=6 cellspacing=12 cellpadding=20>

...
...
</TABLE>

 width : permet de déterminer quelle proportion de la largeur de la fenêtre doit être

occupée
<TABLE border=4 cellspacing=4 cellpadding=4 width=80%>
...
</TABLE>
A B

C D

Remarque : si on ne précise pas la taille des bordures, il n'y en a pas

AB

CD
<TABLE>
...
...
</TABLE>

 Les lignes
Chaque ligne est définie par l'élément TR. Reprenons notre exemple :

A B

C D

<TABLE border>
<TR> ... A ... B ... </TR>
<TR> ... C ... D ... </TR>
</TABLE>
 19

 Les cellules
Chaque cellule est ensuite construite à l'aide de l'élément TD .

A B

C D

<TABLE border>
<TR> <TD>A</TD> <TD>B</TD> </TR>
<TR> <TD>C</TD> <TD>D</TD> </TR>
</TABLE>

L'élément TD peut être utilisé avec les attributs suivants :

 colspan : Indique que la cellule courante s'étend sur plusieurs colonnes.
 rowspan : Indique que la cellule courante s'étend sur plusieurs lignes.
 nowrap : Empêche les sauts de lignes à l'intérieur de la cellule courante.

A B C D E

G H
F
I J
K
L M N

<TABLE border>
<TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD> <TD>E</TD> </TR>
<TR> <TD rowspan=2>F</TD> <TD>G</TD> <TD colspan=3>H</TD> </TR>
<TR> <TD>I</TD> <TD>J</TD> <TD colspan=2 rowspan=2>K</TD> </TR>
<TR> <TD>L</TD> <TD>M</TD> <TD>N</TD> </TR>
</TABLE>

1.6.2. Alignement dans les cellules

Les attributs align et valign permettent de régler l'alignement à l'intérieur des
cellules. Ils s'appliquent aux éléments TR et TD. Dans le cas de TR la valeur
spécifiée s'applique à toutes les cellules de la ligne. Dans le cas de TD elle
s'applique seulement à la cellule en cours.
Si une indication différente est donnée pour la ligne et pour une cellule, c'est
celle donnée pour la cellule qui l'emporte.
 align pour l'alignement horizontal
Il peut prendre les valeurs : right (alignement à droite), center (centré) ou
left (alignement à gauche).
 valign pour l'alignement vertical

Il peut prendre les valeurs : top (en haut), middle (centré verticalement) ou
bottom (en bas).

<TABLE border width=100%>

<TR> <TD>A<br>ABCDE<br>A</TD> <TD>ABCDE</TD>
<TD>ABCDE</TD> <TD>ABCDE</TD> </TR>

<TR valign=top> <TD>A<BR>ABCDE<br>A</TD> <TD>ABCDE</TD>

 20

<TD align=center>ABCDE</TD> <TD>ABCDE</TD> </TR>

<TR valign=bottom> <TD>A<BR>ABCDE<br>A</TD> <TD>ABCDE</TD>

<TD>ABCDE</TD> <TD valign=top>ABCDE</TD> </TR>

<TR align=right> <TD>A<BR>ABCDE<br>A</TD> <TD align=top>ABCDE</TD>

<TD>ABCDE</TD> <TD valign=bottom>ABCDE</TD> </TR>
</TABLE>

A
ABCDE ABCDE ABCDE ABCDE
A
A ABCDE ABCDE ABCDE
ABCDE
A
A ABCDE
ABCDE
A ABCDE ABCDE
A
ABCDE ABCDE ABCDE
A ABCDE

1.6.3. Compléments

 Entêtes
L'élément TH permet de définir des cellules d'entête. Les navigateurs visuels par
exemple utilisent cette information pour mettre ces cellules en gras.
 Légendes
L'élément CAPTION permet de placer une légende au-dessus ou au-dessous d'un
tableau (selon que l'attribut align a la valeur top ou bottom).

A B

C D

Légende

<TABLE border>
<CAPTION align=bottom>Légende</CAPTION>
<TR> <TH>A</TH> <TH>B</TH> </TR>
<TR> <TD>C</TD> <TD>D</TD> </TR>
</TABLE>

1.7. Formulaires
Ce chapitre présente les formulaires. Ils peuvent être traités de plusieurs façons.
La méthode la plus classique consiste à utiliser la passerelle CGI. Un logiciel
exécuté sur le serveur communique avec le démon httpd (c'est-à-dire le logiciel
serveur WEB) selon certaines règles.

1.7.1. La déclaration d'un formulaire

 21

La définition des différents éléments du formulaire se fait en utilisant l'élément

<FORM>. L'action a réaliser pour traiter le formulaire doit être précisée en
utilisant les deux attributs suivants :
- L'attribut ACTION : Il indique l'action à exécuter lorsque lors de l'envoi des
données. Ce sera souvent un logiciel du serveur activé en utilisant la
passerelle CGI. On peu aussi utiliser un script JAVAscript.
- L'attribut METHOD : Il permet de définir la méthode de transfert des
données vers le serveur. Les deux valeurs possibles sont GET et POST.

La syntaxe habituelle est donc :

<FORM METHOD="POST" ACTION="http://www.serveur.fr/cgi-bin/script">
...
</FORM>

1.7.2. Les éléments de formulaires

Les éléments de formulaires sont répartis en 3 classes :
- Input : Champs de saisie de texte et différents types de boutons
- Select : Listes (menus déroulants et ascenseurs)
- Textarea : Zone de saisie de texte libre
Chaque élément doit être nommé, pour cela on utilise l'attribut NAME. Le nom
ainsi défini permet d'identifier les données lors de leur envoi. Il doit être unique,
sauf dans le cas d'un ensemble composé de plusieurs éléments (boutons radio
par exemple). Un autre attribut VALUE est commun à ces balises, mais son rôle
est différent selon le type d'élément utilisé.

 Les éléments input

Cet élément est utilisé pour définir des zones d'entrée de texte simple, des
boutons, des cases à cocher ou des boutons radio. Le type d'élément dont il
s'agit sera précisé en utilisant l'attribut TYPE.

Type syntaxe exemple

Sans <input name="ident">

<input name="ident" value="Par défaut"> Par défaut

Submit <input type="submit" value="Envoi"> envoi

checkbox <input type="checkbox" name="pfm" value="linux" checked>

Linux
Linux<BR>
<input type="checkbox" name="pfm" value="dos"> Dos<BR> Dos
<input type="checkbox" name="pfm" value="win"> Windows
Windows
radio <input type="radio" name="media" value="cd" checked> CD-
CD-ROM
ROM<BR>
<input type="radio" name="media" value="dk"> Disquette Disquette
password <input type="password" name="pass"

Reset <input type="reset" value="Efface"> Efface

 L'élément SELECT
Cet élément sert à définir des listes (menus déroulant ou ascenseurs). Elle
s'utilise avec l'élément OPTION.

syntaxe exemple
<select name="menu">
<option> Pomme
 22

<option> Banane
<option> Orange
<option selected> Citron
<option> Pêche
<option> Poire
<select >
<select name="menu" size=4>
...

<select name="menu" size=4 multiple>

...

 L'élément TEXTAREA
Permet de créer une zone de texte en spécifiant sa taille grâce aux attributs ROWS et COLS.
<textarea name="comm" rows=10 cols=40>
Tapez vos commentaires ici

</textarea>

1.7.3. Traitement des formulaires

Il s'agit de récupérer les données saisies par l'utilisateur et de les retraiter. Il
existe plusieurs techniques.

 La passerelle CGI
La technique la plus classique consiste à utiliser la passerelle CGI (Common
Gateway Interface) pour exécuter un programme de traitement sur le serveur.
Le programme en question recevra toutes les données saisies par l'utilisateur et
construira une nouvelle page en réponse.
Cette technique est la plus puissante et reste la seule à être capable de traiter un
grand volume de données. Néanmoins elle nécessite l'accès à la programmation
du serveur.

 Les scripts
Ils permettent de réaliser de petites applications simples sans interaction avec le
serveur.

Atelier 2 : Réaliser une page simple avec HTM : cette page affichera la titre
(Mon premier pas en HTML et un message « Super, j’affiche ma première page
Web »)

Atelier 3 : Réaliser une page qui affiche une page avec un tableau

Référence PU PHT Fusion, juste un exmple

TOTAL 150 000
 23

Atelier 3 : Réaliser un formulaire four saisir des informations relatives à un

employé.

Immatriculation

Nom

Prénom

Sexe

Né le à

Marié oui non

Date d’embauche

Les Formulaires HTML

Intérêt d'un formulaire

Les formulaires interactifs permettent aux auteurs de pages Web de doter

leur page web d'éléments interactifs permettant par exemple un dialogue
avec les internaute, à la manière des coupons-réponse présents dans
certains magazines.
Le lecteur saisit des informations en remplissant des champs ou en
cliquant sur des boutons, puis appuie sur un bouton de soumission
(submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à
une adresse e-mail ou à un script de page web dynamique tel que PHP,
ASP ou un script CGI.

La balise FORM

Les formulaires sont délimités par la balise <FORM> ... </FORM>, une
balise qui permet de regrouper plusieurs éléments de formulaire
(boutons,champs de saisie,...) et qui possède les attributs obligatoires
suivants :
 METHOD indique sous quelle forme seront envoyées les réponses
« POST » est la valeur qui correspond à un envoi de données stockées
dans le corps de la requête, tandis que « GET » correspond à un envoi des
données codées dans l'URL, et séparées de l'adresse du script par un point
d'interrogation (pour plus de renseignement sur les méthodes POST et
GET, consultez l'article sur le protocole HTTP)
 ACTION indique l'adresse d'envoi (script CGI ou adresse email
(mailto:adresse.email@machine))

La balise FORM possède comme attribut facultatif ENCTYPE qui spécifie le

codage des données dans l'URL, toutefois il n'est pas nécessaire de le
 24

préciser car la valeur attribuée par défaut (application/x-www-form-

urlencoded) est la seule valeur valide. L'attribut facultatif ACCEPT permet
de définir les types MIME des données pouvant être envoyées par le
formulaire.
Voici la syntaxe de la balise FORM :
<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>
Voici quelques exemples de balises FORM :
<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net">

<FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-

bin/script.cgi">

A l'intérieur de la balise FORM...

La balise FORM constitue en quelque sorte un conteneur permettant de

regrouper des éléments qui vont permettre à l'utilisateur de choisir ou de
saisir des données, ensemble de données qui seront envoyées à l'URL
indiqué dans l'attribut ACTION de la balise FORM par la méthode indiquée
par l'attribut METHOD.
Il est possible d'insérer n'importe quel élément HTML de base dans une
balise FORM (textes,boutons,tableaux,liens,...) mais il est surtout
intéressant d'insérer des éléments interactifs. Ces éléments interactifs
sont :
 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

Envoi des données

Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les

données présentes dans le formulaire sont envoyées au script CGI sous
forme de paires nom/valeur, c'est-à-dire un ensemble de données
représentées par le nom de l'élément de formulaire, le caractère "=", puis
la valeur associée. L'ensemble de ces paires nom/valeur étant séparées
entre elles par des esperluettes (caractère &). Les données envoyées
ressembleront donc à ceci :
champ1=valeur1&champ2=valeur2&champ3=valeur3
Dans le cas de la méthode GET (envoi des données à travers l'URL), l'URL
ressemblera à une chaîne du genre :
http://www.commentcamarche.net/cgi-bin/script.cgi?champ1=val1&champ2=val2

La balise INPUT

La balise INPUT est la balise essentielle des formulaires, car elle permet
de créer un bon nombre d'éléments "interactifs". La syntaxe de cette
balise est la suivante :
<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de
l'élément">
 25

L'attribut name est essentiel car il permettra au script CGI de connaître le

champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ
sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur, ou
dans le cas contraire de la valeur par défaut repéré par l'attribut value.
L'attribut type permet de préciser le type d'élément que représente la
balise INPUT, voici les valeurs que ce champ peut prendre :
 checkbox: il s'agit de cases à cocher pouvant admettre deux états :
checked (coché) et unchecked (non coché). Lorsque la case est coché la
paire nom/valeur est envoyée au CGI
 hidden: il s'agit d'un champ caché. Ce champ non visible sur le
formulaire permet de préciser un paramètre fixe qui sera envoyé au CGI
sous forme de paire nom/valeur

 file: il s'agit d'un champ permettant à l'utilisateur de préciser

l'emplacement d'un fichier qui sera envoyé avec le formulaire. Il faut dans
ce cas préciser le type de données pouvant être envoyées grâce à
l'attribut ACCEPT de la balise FORM

 image: il s'agit d'un bouton de soumission personnalisé, dont

l'apparence est l'image situé à l'emplacement précisé par son attribut SRC

 password: il s'agit d'un champ de saisie, dans lequel les caractères

saisis apparaissent sous forme d'astérisques afin de camoufler la saisie de
l'utilisateur

 radio: il s'agit d'un bouton permettant un choix parmi plusieurs

proposés (l'ensemble des boutons radios devant porter le même attribut
name. La paire nom/valeur du bouton radio sélectionné sera envoyé au
CGI. Un attribut checked pour un des boutons permet de préciser le
bouton sélectionné par défaut

 reset: il s'agit d'un bouton de remise à zéro permettant uniquement

de rétablir l'ensemble des éléments du formulaire à leurs valeurs par
défaut

 submit: il s'agit du bouton de soumission permettant l'envoi du

formulaire. Le texte du bouton peut être précisé grâce à l'attribut value

 text: il s'agit d'un champ de saisie permettant la saisie d'une ligne

de texte. La taille du champ peut être définie à l'aide de l'attribut size et la
taille maximale du texte saisi grâce à l'attribut maxlength

La balise TEXTAREA

La balise TEXTAREA permet de définir une zone de saisie plus vaste par
rapport à la simple ligne de saisie que propose la balise INPUT. Cette
balise possède les attributs suivants :
 26

 cols: représente le nombre de caractères que peut contenir une

ligne
 rows: représente le nombre de lignes

 name: représente le nom associé au champ, c'est le nom qui

permettra d'identifier le champ dans la paire nom/valeur

 readonly: permet d'empêcher l'utilisateur de modifier le texte entré

par défaut dans le champ

 value: représente la valeur qui sera envoyée par défaut au script si

le champ de saisie n'est pas modifié par une frappe de l'utilisateur

La balise SELECT

La balise SELECT permet de créer une liste déroulante d'éléments

(précisés par des balises OPTION à l'intérieur de celle-ci). Les attributs de
cette balise sont :
 name: représente le nom associé au champ, c'est le nom qui
permettra d'identifier le champ dans la paire nom/valeur
 disabled: permet de créer une liste désactivée, c'est-à-dire affichée
en grisée

 size: représente le nombre de lignes dans la liste (cette valeur peut

être plus grande que le nombre d'éléments effectifs dans la liste)

 multiple: marque la possibilité pour l'utilisateur de choisir plusieurs

champs dans la liste

Un exemple de formulaire

Les formulaires peuvent être mis en page à l'aide de tableaux (cela est
même conseillé pour avoir une mise en page soignée). Voici un exemple
récapitulant les points ci-dessus et montrant comment mettre en page un
formulaire à l'aide d'un tableau :
<FORM method=post action="cgi-bin/script.pl">
Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<INPUT type=text name="nom">
</TD>
</TR>

<TR>
<TD>Prénom</TD>
<TD>
<INPUT type=text name="prenom">
</TD>
</TR>
 27

<TR>
<TD>Sexe</TD>
<TD>
Homme : <INPUT type=radio name="sexe" value="M">
<br>Femme : <INPUT type=radio name="sexe" value="F">
</TD>
</TR>

<TR>
<TD>Fonction</TD>
<TD>
<SELECT name="fonction">
<OPTION VALUE="enseignant">Enseignant</OPTION>
<OPTION VALUE="etudiant">Etudiant</OPTION>
<OPTION VALUE="ingenieur">Ingénieur</OPTION>
<OPTION VALUE="retraite">Retraité</OPTION>
<OPTION VALUE="autre">Autre</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Commentaires</TD>
<TD>
<TEXTAREA rows="3" name="commentaires">
Tapez ici vos commentaires</TEXTAREA>
</TD>
</TR>

<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Envoyer">
</TD>
</TR>
</TABLE>
</FORM>
Voici le résultat de ce code HTML
Enregistrement d'un utilisateur
No
m

Pré
no
m

SexHo
e m
me
:

Fe
m
me
:
 28

Fo
ncti
on

Co
m
me
ntai
res

Submit

Attributs de la balise FORM et types d'entrées

Balise Attribut Valeur Résultat Effet Visuel

POST
METHOD    
GET

<FORM> ... envoie à l'adresse

ACTION    
</FORM> indiquée

spécifie le type de
ENCTYPE    
codage utilisé

effectue l'ACTION
submit dans le balise Submit
<FORM>

simple ligne de
texte dont la
text longueur
TYPE est donnée par
l'attribut size
<INPUT>
efface le contenu
reset Rétablir
du formulaire

radio bouton radio

checkbox case à cocher

NAME   Nom  

SIZE   Taille du texte  

 29

NAME  
<TEXTAREA> ...
ROWS   Zone de texte
</TEXTAREA>
COLS  

<SELECT> NAME    
<OPTION> ...
Plusieurs choix
</OPTION> MULTIPLE  
possibles
</SELECT>
Option par
SELECTED  
<OPTION> ... défaut
</OPTION> Valeur
VALUE  
forcée
 30

CREER LES PAGES D’UN SITE AVEC

DREAMWEAVER
Introduction
L’éditeur de page html "Dreamweaver" appartient au monde de l’édition
professionnelle.
Les pages qui suivent seront utiles aux personnes qui veulent rédiger des pages
comportant des éléments plus élaborés que ce que permet le langage html brut. Il
faudra donc faire attention à vérifier la compatibilité du travail avec les différents
navigateurs.
Le lecteur nous pardonnera certains raccourcis concernant la mise en œuvre des
commandes.

Démarrage de Dreamweaver
Après l’Installation de dreamwerver,
cliquer sur Démarrer/Tous les
programmes/Macromedia/Macromedia
Dreamweaver
 31

Présentation de L’environnement de Dreamweaver

Barre de menu Barre d’Outil ou Objet commun Fenêtre de Document ou création

Fenêtre de propriétés de la page et des objets

Utiliser les fenêtres de l’écran et saisir du texte

La fenêtre "Document"
présente
une barre de menus déroulants
classique où vous retrouverez
toutes les commandes du
logiciel
Fenêtre de
liaison /de
fichier

Il n’y a pas de barre d’outils classique mais la

commande "fenêtre" puis "objet" permet d’afficher
une boîte à outils flottante présentant quatre aspects
suivant la tâche à réaliser. Le passage de l’un à
l’autre se fait en pointant la petite flèche en haut à
droite.
Un survol de souris sur chaque icône permet de
découvrir sa fonction
 32

La commande "propriétés" du menu "Fenêtre"

déclenche l’affichage de l’inspecteur de
propriété. Cet inspecteur est contextuel. Il
changera selon que l’objet mis en surbrillance est
du texte, une image ou un tableau.

NB : La frappe du texte se fait comme dans un traitement de texte classique et toute les
commandes de format, de couleur, etc sont réglables dans cet inspecteur de propriétés

Contrôler les éléments de l’en-tête

La commande "Éléments invisibles" du menu "Affichage" conduit à l’affichage
d’icône dans une barre spéciale au dessus de la plage de saisie.

Un clic sur l’un de ces objets modifie l’inspecteur. Vous pouvez alors changer les
caractéristiques de l’objet.

La fenêtre d’objet "En-tête" permet de rajouter les objets nécessaires tels que les
"meta" et les mots clés. N’oubliez pas de séparer ces derniers par le signe ";".

Insérer une image

L’outil "image" de la fenêtre d’objets "commun" ou cliquer sur

Insertion/image permet de choisir l’image dans une fenêtre du genre
"explorateur".

Une prévisualisation est présentée ainsi qu’un affichage des propriétés de l’image.
Une fois affichée l’image est sélectionnable par un simple clic. Dans ce cas l’inspecteur de
propriétés change d’aspect et affiche tous les options possibles pour la manipulation ou la
gestion de l’image.
 33

les valeurs L et H définissent les la longueur et la hauteur de l’image. Il est possible

de la modifier.

Insérer et paramétrer un tableau

Cliquez sur l’icône tableau de la fenêtre d’objets "commun" ou cliquez sur le menu insertion
/tableau. Une boîte de paramétrage s’affiche pour définir les caractéristiques du tableau.

Après validation le tableau est inséré dans la page

L’inspecteur de propriété du tableau s’affiche en cliquant

sur les bords droits ou inférieurs du tableau ainsi que sur les
limites séparatives (sauf les bords supérieurs et gauche).

L’inspecteur change si le curseur est dans une cellule du tableau. Cela permet d’accéder à
d’autres propriétés

La modification de ce tableau se fait en plaçant la surbrillance dans le tableau et en cliquant à

droite.

Le passage de la souris sur les bordures gauche ou supérieure ou un balayage sur les cellules
sélectionne la ligne, la colonne ou les cellules concernées. Les commandes passées alors ne
s’appliqueront qu’à la sélection qui est encadrée.
 34

Réaliser des liens

Dreamweaver offre de nombreuses méthodes pour instaurer des liens entre les différentes
pages. Pour toutes ces méthodes il faut au préalable mettre en surbrillance le texte ou l’image
qui seront le point de départ du lien.

La fenêtre lien permet

d’écrire directement le
nom du fichier lié.

La petite icône "viseur" peut être prise avec la souris et traînée vers un fichier ouvert à côté du
fichier de travail lorsqu’on travaille en mode "multifenêtre".
La petite flèche à droite permet de choisir directement le fichier dans la liste des fichiers déjà
ouverts sur le bureau.

L’icône dossier ouvre un explorateur ordinaire pour

parcourir l’arborescence.
Pour une bonne rédaction du lien il est impératif de
choisir un fichier déjà situé à l’intérieur du site que
l’on a déclaré au début. Sinon le lien est construit de
façon absolue avec une adresse du genre
"file c: \\....." il ne fonctionnera pas sur un serveur à
distance.

NB : Si le document doit être affiché dans une fenêtre

particulière n’oubliez pas de le préciser en renseignant
la case "Cible".

La réalisation d’un lien interne à la page nécessite la pose d’une ancre(sélection glissée).
Mettez le mot devant servir d’ancre en surbrillance (sélectionner) et sélectionnez l’outil
"ancre" dans les objets invisibles. Nommez l’ancre dans le cadre "ad hoc" en n’utilisant
qu’une chaîne de caractères minuscules sans aucun caractère spécial ni d’espace.
Retournez au mot devant servir de point de départ au lien et utilisez le petit viseur en le
traînant sur le signe d’ancre. Le nom de l’ancre précédé du signe "#" s’affiche dans la
fenêtre "Lien". Si cette ancre est loin, faites défiler la page en mettant le viseur sur les
flèches de l’ascenseur.

La vérification d’un lien est une tentation fréquente. Un clic droit sur un lien affiche
un menu contextuel avec la commande "Afficher la page liée".
Une nouvelle fenêtre s’ouvre alors avec le fichier demandé.
 35

Faire des zones sensibles dans une image

Sélectionnez l’image par un simple clic. Elle apparaît encadrée.

Il suffit de donner un nom à la carte, de

choisir un outil graphique puis de tracer
la forme sur l’image. Dans la boîte
"lien" on choisira le nom du fichier à
lier.
Dans la boite "Cible"
éventuellement le cadre d’affichage.
La boite "Secondaire" permet d’écrire
quelques mots de commentaires qui
s’afficheront lors du balayage de
la zone sensible par la souris.

Lorsque toutes les zones et tous les

liens sont créés, la carte et les liens
sont créés dans la page html
(côté client) mais vous ne
pouvez pas les faire fonctionner en
mode création. Pour cela il va falloir
apprendre à vérifier l’affichage dans
un navigateur

Vérifier l’affichage dans un navigateur

Dans le menu "Fichier" utilisez la commande "Aperçu dans le navigateur" et choisissez le
navigateur.
Ou cliquez sur l’icône et choisissez le navigateur.

La commande "Vérifier navigateur cible" vous permet de faire une analyse ligne par ligne
de la page écrite et de voir ainsi quelles seront les versions de navigateurs qui poseront des
problèmes pour afficher votre page.

Afficher et modifier le code source

La fenêtre "code source" est affichable à tout moment par un clic sur la première option de
cette barre (Code):

Les changements opérés dans le code sont, pour les choses les plus simples, immédiatement
répercutée dans la fenêtre de document. Pour les comportements plus compliqués il faudra
aussi passer par un aperçu dans le navigateur de son choix. Si des incohérences apparaissent à
la suite de ces modifications, des surlignages de couleurs vous rappellent à l’ordre.

Lorsque l’on importe du code issu d’un autre logiciel d’édition html. Il peut être très
intéressant de nettoyer les fichiers des balises inutiles. Choisir pour cela "commandes" puis
"nettoyer l’HTML"
 36

Insérer des éléments flash ou shockwave

Les éléments flash et shokwave sont des animations conçues par des logiciels spécifiques de
macromédia. Vous devez avoir construit ces fichiers avant toute incorporation dans une page.
Pour l’incorporation utilisez l’outil de la palette objets communs ou cliquez sur le menu
insertion/Media/flash.
Après avoir choisi le fichier correspondant dans la boîte de dialogue, l’objet apparaît sous la
forme d’une icône sur la page ou à l’endroit sélectionné.
Un inspecteur de
comportement est
associé à cette icône
et permet de
paramétrer l’objet.
Il faudra visualiser la
page dans un
navigateur pour
vérifier son
fonctionnement

Fabriquer une fenêtre surgissante

La fabrication d’un lexique sous la forme d’une page html spécialement dédiée à cette
fonction peut paraître a première vue satisfaisante. Elle l’est beaucoup moins à l’usage car si
l’appel de la page par un lien ne pose aucun problème, le retour à la page d’appel n’est pas
simple sauf pour les familiers du bouton "précédent".
Nous proposons donc une alternative sous la forme d’une petite fenêtre surgissant lors du clic
et ne renfermant que la définition du mot cliqué.

Les fichiers de définition doivent bien entendu exister avant

toute création de lien.
Afficher la fenêtre comportement
(Elle peut s’intégrer comme un onglet à la fenêtre "Style etobjet")
Cliquez sur le menu Fenêtre / Comportement.
 37

Dans la page d’appel mettez en surbrillance le mot qui servira de

lien (ce peut être une image).
Au lieu d’indiquer un nom de fichier comme lien frappez
seulement le caractère #

Dans la barre d’outil de la fenêtre "Comportements"

choisissez les types de navigateurs pour lesquels vous
travaillez.
Cliquez ensuite sur le signe + de la fenêtre "Comportements"
Et choisissez "Ouvrir fenêtre navigateur".

Dans la boîte de dialogue suivante vous pouvez

paramétrer la nouvelle fenêtre de navigateur dont l’ouverture
sera l’action voulue.

En mettant la ligne en surbrillance vous pourrez choisir le

Type d’action qui détermine l’évènement.
N’oubliez pas d’enregistrer puis de vérifier dans le
navigateur de votre choix.
 38

NB :- Il faut souligner que vous pouvez créer un site simplement

en créant les pages les une après les autres bien ranger dans un
répertoire ou dossier commun sur votre disk. C'est-à-dire la page
de démarrage ou Index
- Ou bien vous pouvez créer votre site sous forme de projet de
site en suivant les étapes suivantes sous DreamWeaver:

Création & configuration d’un site avec DreamWeaver

Dreamweaver est un outil pour créer des sites web. Ainsi, la première chose que
vous avez à faire est de définir un site. Cette option de Dreamweaver va aider à
organiser les fichiers utilisés dans votre site.

Étape 1: Créez un dossier sur votre disque dur et nommez-le. Vous pouvez y
copier quelques images ou des fichiers si vous le souhaitez.

Etape 2: Cliquez sur Site> Nouveau Site… La fenêtre suivante apparaîtra où

on peut entrer dans le site plus de détails dans la catégorie Infos locales.

Dans l’onglet gauche supérieur de la même fenêtre, choisir "Avancé"

La fenêtre suivante apparaît:

Spécifier le dossier local du site; c’est-à-dire où seront stoqués les pages de votre site sur
l’ordinateur ainsi que l’emplacement du dossier des images.
Les infos locales ayant été spécifiées, vous pouvez spécifier les infos distantes; c’est-à-dire les
infos du serveur où seront hébergés les fichiers de votre site si vous voulez que le client FTP
de Dreamweaver transfère ces fichiers pour vous. Sinon, vous pouvez utiliser un client FTP
séparément et ultérieurement comme FileZilla.
Testez la connexion au serveur et spécifiez si vous voulez que Dreamweaver transfère les
fichiers après chaque enregistrement ou qu’il les transfère après.

Cliquez sur "OK" et voilà vos informations de configuration sont prêtes. Si vous voulez
ajouter un autre site, allez à "Site" > "Nouveau site" et faites comme précédent. Il existe
d’autres options de configuration de site comme celles du serveur d’évaluation ou de
technologies du serveur. Vous pouvez aussi corriger vos informations en allant à "Site" >
"Gérer les sites".
 39

Étape 3: Maintenant, Dreamweaver affiche le contenu du dossier dans le panneau des fichiers
sur le côté droit. Les dossiers sont bien organisés et Dreamweaver sait maintenant où chercher
les fichiers. Vous êtes maintenant prêt à commencer à élaborer des pages web.

FAIRE UN MODÈLE AVEC DREAMWEAVER

Qu’est-ce qu’un modèle ? C’est un fichier qui contient tous les éléments de base
d’une page Web. Par exemple, vous avez un logo, un titre, un menu, un type de
police, etc. qui doivent réapparaître dans toutes vos pages : le modèle est créé
pour ce type de tâche.

Vous pourriez, d’abord, faire une page Web avec tous les éléments mis en place
et enregistrez votre page sous le nom modele.htm et enregistrer ce fichier à la
création de chaque nouveau fichier. S’il advenait que la couleur de votre menu
ou la police de caractère ait à se modifier, il vous faudrait reprendre tous les
fichiers, un par un, afin d’en faire les modifications. Cela est long et inutile.

Dreamweaver permet d’enregistrer un fichier nommé template.dwt (et non htm

ou html) duquel tous vos fichiers peuvent être créé. Si vous modifiez le fichier
maître, tous les autres fichiers seront modifiés automatiquement. Cela peut vous
permettre de sauver du temps.

Note : lorsqu’une image apparaît sur toutes vos pages, elle n’est pas téléchargée
à chaque page, elle est dans la mémoire « cache » de l’ordinateur et s’affiche
aussitôt.

CRÉER UN MODÈLE EN 10 ÉTAPES

1. Dreamweaver a besoin de savoir où se trouvent vos fichiers afin de les
modifier par la suite. Il vous faut donc définir un site avant de créer votre
modèle. Pour ce faire, allez dans fenêtre > fichiers site (F5), puis dans le menu
site > nouveau site.
 40

Il faut alors indiquer à Dreamweaver où se trouve votre dossier qui contiendra

toutes les pages html que vous ferez.

Lorsque le dossier est indiqué, cliquez sur OK et Dreamweaver vous demandera de créer la «
cache ».

2. Dans la fenêtre principale de Dreamweaver, concevez votre modèle en créant

Cliquez sur CRÉER et vous êtes prêt pour
la mise en page de vos éléments graphiques : menu, titre, logo…
commencer modifiez les
votre modèle.
propriétés de la page (couleurs, polices, etc.) afin qu’un contenant à votre goût
se forme.
Vous pourrez revenir modifier le tout plus tard, n’ayez crainte.

3. Lorsque votre page ressemble au contenant désiré – sans contenu, allez dans
fichier > enregistrez comme modèle. Dreamweaver vous demande un nom
pour votre fichier :
 41

Lorsque votre modèle est enregistré, le nom de la fenêtre vous l’indique :

4. Vous devez maintenant créer des régions qui seront modifiables.

Sélectionnez un endroit où vous aurez du texte à insérer dans toutes vos pages afin
que, lorsque vous ouvrirez une page à partir de ce modèle, la région soit accessible.

Cliquez, par exemple, là où devrait être votre texte.

Rendez-vous alors dans le menu modifier > modèle > région modifiable
(CTRLALT-V). Vous devez nommer votre région. Ex : « contenu » ou « titre ».
Vous pouvez créer autant de régions modifiables que nécessaires.

5. Lorsque vous avez une région modifiable, Ajoutez un mot ou deux avec la police et
la couleur de la police de votre choix ainsi que deux ou trois sauts de ligne (« Enter »).
La région modifiable se repère par sa couleur bleutée :

Enregistrez votre modèle et fermez la page. Restez dans Dreamweaver.

Dreamweaver vous demande s’il doit mettre les fichiers à jour. Cliquez sur oui,
mais cela importe peu puisque vous n’avez aucun fichier lié à ce modèle.

6. Créez une nouvelle page à partir du modèle : fichier > nouveau à partir d’un
modèle.
Choisissez votre modèle en cliquant sur le nom que vous lui avez donné et une page
html où rien ne peut être modifié sauf la région modifiable apparaîtra.

7. Ajoutez votre contenu dans la région modifiable (vous n’avez pas accès au reste de
toute façon). Profitez-en pour faire copier/coller et adaptez votre mise en page. Notez
que les parties non accessibles sont indiqué en jaune dans Dreamweaver :

Vous pouvez ajouter divers éléments dans votre région modifiable : photographies,
tableaux, textes, liens, etc.
Enregistrez votre page lorsqu’elle est terminée.

8. Créez deux ou trois pages à partir de votre modèle. Par la suite, modifiez votre
modèle en ouvrant le fichier template.dwt situé dans votre dossier de pages Web,
dans un dossier nommé « Templates ». Modifiez quelques éléments, ajoutez les liens à
votre menu et effectuez la mise à jour de tous vos fichiers en enregistrant votre page
(cela se fait automatiquement). Vous pouvez également vous assurez de la mise à jour
des fichiers en allant dans le menu : modifier > modèle > mettre à jour les pages…

Assurez-vous que toutes les pages utilisant le modèle sont fermées.

Toutes les pages créées à partir du modèle se modifieront automatiquement.
 42

9. Pour appliquer votre modèle à une page déjà existante, ouvrez la page, allez dans le
menu modifier > modèle > appliquer le modèle à la page.

10. Vous devez définir votre site chaque fois que vous fermez Dreamweaver afin que
le logiciel se souvienne de l’emplacement de vos pages et qu’il retrouve le modèle.
Autrement, vos pages ne seront plus liées au modèle.
Par contre, cette méthode vous permet de modifiez votre site en ne modifiant qu’une
seule page. Il s’agit d’une bonne alternative aux cadres !!!
 43

ETUDE DE FLASH
Présentation de l’interface Flash
􀀗 La scène
.
􀀗 La boite à outils

􀀗 Les panneaux
 44

La fenêtre scénario (calques)

Flash différencie une animation interpolée d'une animation image par image dans
le scénario de la façon suivante :
L'i
nte
rp
ola
tio
n
de
mo
uv
em
ent
est
ind
iqu
ée
par
un
poi
nt
noi
r
au
niv
ea
u
de
la
pre
mi
ère
im
ag
e-
clé
,
alo
 45

rs
qu
e
les
im
ag
es
int
erp
olé
es
int
er
mé
dia
ire
s
co
mp
ort
ent
un
e
flè
ch
e
noi
re
sur
fo
nd
ble
u
cla
ir.

L'i
nte
rp
ola
tio
 46

n
de
for
me
est
ind
iqu
ée
par
un
poi
nt
noi
r
au
niv
ea
u
de
la
pre
mi
ère
im
ag
e-
clé
,
les
im
ag
es
int
er
mé
dia
ire
s
co
mp
ort
ant
un
e
 47

flè
ch
e
noi
re
sur
fo
nd
ver
t
cla
ir.

Un
e
lig
ne
poi
nti
llé
e
ind
iqu
e
qu
e
l'in
ter
pol
ati
on
est
ro
mp
ue
ou
inc
om
plè
te,
par
 48

ex
em
ple
par
ce
qu
e
l'i
ma
ge-
clé
fin
ale
est
ab
se
nte
.

Un
e
im
ag
e-
clé
uni
qu
e
est
ind
iqu
ée
par
un
poi
nt
noi
r.
Le
 49

s
im
ag
es
gri
s
cla
ir
apr
ès
un
e
im
ag
e-
clé
uni
qu
e
ont
le
mê
me
co
nte
nu
sa
ns
mo
dif
ica
tio
ns
et
co
mp
ort
ent
un
e
lig
ne
noi
re
 50

av
ec
un
rec
tan
gle
vid
e
au
niv
ea
u
de
la
der
niè
re
im
ag
e
de
la
pla
ge.

Un
pet
it a
ind
iqu
e
qu'
un
e
act
ion
d'i
ma
ge
a
été
 51

aff
ect
ée
à
l'i
ma
ge
av
ec
le
pa
nn
ea
u
Ac
tio
ns.

Un
dra
pe
au
rou
ge
ind
iqu
e
qu
e
l'i
ma
ge
co
nti
ent
un
e
éti
qu
ett
e
ou
un
co
m
 52

me
nta
ire.

􀀗L
e
s

p
r
o
p
r
i
é
t
é
s

Lorsque vous souhaitez modifier les propriétés d’un objet (texte, image, etc.), pensez à le
sélectionner avant. Le panneau « propriétés » affichera alors les paramètres modifiables selon
l’objet.

Le texte
 53

On peut utiliser le texte de différentes façons dans Flash:

􀂃Texte statique
􀂃Texte dynamique
􀂃Texte de saisie

Les options paramétrables sont principalement :

􀂃police, taille, style, couleur, interlettrage, crénage, décalage de la ligne de
base, alignement, marges, indentation et interligne
􀂃Comme les objets, le texte peut faire l’objet de nombreuses
transformations

Les objets élémentaires

􀀗 Les objets

o Création

o Sélection (flèche, lasso)

o Groupement

o Déplacement

o Transformation (transformation libre, distorsion, redimensionnement,

rotation, inclinaison, renversement)

o Alignement des objets

􀀗 Les symboles : (boutons et clips) Un symbole est un graphique, un bouton ou un

clip que vous créez une seule fois dans Flash MX et que vous pouvez réutiliser
dans votre animation ou dans d'autres animations. Tout symbole que vous créez
devient automatiquement un élément de la bibliothèque du document courant.
Une occurrence est une copie d'un symbole situé sur la scène ou imbriqué dans
un autre symbole. Une occurrence peut avoir une couleur, une taille et une
fonction différente de celles de son symbole. La manipulation d'un symbole met
toutes ses occurrences à jour, mais l'application d'effets sur une occurrence de
symbole ne met à jour que cette occurrence.

Chaque symbole possède ses propres scénarios, scène et calques. Chaque fois
que vous créez un symbole, vous devez en déterminer le type en fonction de la
façon dont vous souhaitez l'utiliser dans l'animation. Utilisez des symboles
graphiques pour les images statiques et pour créer des éléments réutilisables
liés au scénario de l'animation principale. Les symboles graphiques
fonctionnent de manière synchronisée avec le scénario de l'animation. Les sons
et les éléments de contrôle interactifs ne fonctionnent pas dans la séquence
d'animation d'un symbole graphique. Utilisez des symboles de bouton pour
créer dans l'animation des boutons interactifs qui réagissent aux clics de la
 54

souris, à un survol ou à d'autres actions. Vous définissez les graphiques associés

aux différents états de bouton, puis affectez des actions à une occurrence de
bouton. Utilisez des symboles de clip pour créer des éléments réutilisables
d'une animation. Les clips possèdent leur propre scénario, qui est lu
indépendamment du scénario de l'animation principale ; imaginez de petites
animations à l'intérieur d'une animation principale, pouvant contenir des
éléments de contrôle interactifs, des sons, voire d'autres occurrences de clip.
Vous pouvez également placer des occurrences de clip dans le scénario d'un
symbole de bouton pour créer des boutons animés. Toute animation Flash, quel
que soit son niveau, peut avoir des occurrences de clip sur leur propre scénario.
Chaque occurrence de clip peut également avoir un scénario et peut contenir
d'autres clips possédant eux aussi des scénarios. Dans Flash Player, les niveaux
et les scénarios sont organisés de manière hiérarchique pour vous permettre
d'organiser et de contrôler facilement les objets de votre animation.

􀀗 Les masques

Un calque de masque permet de créer un trou qui laisse apparaître le contenu d'un
ou de plusieurs calques situés en dessous. Un élément de masque peut être une
forme remplie, un texte, une occurrence de symbole graphique ou un clip. Vous
pouvez grouper plusieurs calques sous un calque de masque unique pour créer
des effets élaborés. Un masque peut être animé.

Les interpolations (cf. document donné en cours pour les procédures de création)
􀀗 De forme

Avec l'interpolation de forme, vous dessinez une forme à un point dans le

temps, puis modifiez cette forme ou dessinez une autre forme à un autre point dans le
temps. Flash interpole les valeurs ou formes pour les images intermédiaires, créant
ainsi l'animation.

Comment la Réaliser:
- Sélectionnez une forme géométrique « rectangle » et dessinez-la sur la
séquence (page blanche)
- Allez sur la zone Time Line et cliquez sous un chiffre un peu éloigner du point
de départ :l’endroit sélectionné aura une couleur bleue.

- Taper sur la touche F7, la première image disparait vous obtenez une image clé
libre.
- Sélectionnez une autre forme différente de la première « Outil ovale » et
dessinez-la sur la séquence à la place de la première ou en face c'est-à-dire un
peu plus à droite.
- Aller entre les deux points dans le timeLine et cliquez sur la zone sélectionnée.
 55

- Dans la fenêtre propriété, cliquez sur le menu Interpolation et choisissez

Forme. Vous obtenez une flèche continue qui montre que vous avez une
animation.

- Pour Exécuter l’animation, tapez sur CTRL+Entrée ou cliquez sur le menu

Contrôle puis sur Tester l’animation.

􀀗 De mouvement

Avec l'interpolation de mouvement, vous définissez des propriétés telles que la

position, la taille et la rotation d'une occurrence, d'un groupe ou d'un bloc de texte à un
point dans le temps, puis modifiez ces propriétés à un autre point dans le temps. Vous
pouvez également appliquer une interpolation de mouvement le long d'un trajet.

Comment la réaliser :

- Placez une forme sur la séquence (page) (la forme peut être un texte ou une
image) sélectionnez la avec le sélectionneur.
- Tapez la touche F8, Dans la fenêtre qui s’ouvre cocher l’option graphique
Puis cliquez sur ok. Votre forme devient un symbole.
- Cliquez sur la TimeLine sous un chiffre un peu éloigner du point de départ,
taper sur la touche F6 pour obtenir une image clé.
- Revenez dans la scène afin de deplacé votre image dans le sens souhaité. Puis
cliquez entre les deux images clé dans la timeLine.
Dans la fenêtre propriété, cliquez sur le menu Interpolation et choisissez
mouvement : la timeline change de couleur avec une flèche continue. Ce qui signifie
que l’animation peut se faire.
- Pour Exécuter l’animation, tapez sur CTRL+Entrée ou cliquez sur le menu
Contrôle puis sur Tester l’animation.
 56

L’optimisation

La vitesse de téléchargement et de lecture du fichier de votre animation est

proportionnelle à sa taille. Vous pouvez prendre un certain nombre de mesures
pour préparer votre animation à la meilleure lecture possible. Au cours du
processus de publication, Flash effectue automatiquement quelques opération
d'optimisation sur les animations : par exemple, il détecte les formes exportées
en double et en ne les insère qu'en un seul exemplaire dans le fichier, et convertit
les groupes imbriqués en groupes uniques.
Avant d'exporter une animation, vous pouvez l'optimiser un peu plus en utilisant
diverses stratégies pour réduire sa taille. Vous pouvez également compresser un
fichier SWF lorsque vous le publiez.

Exécutez votre animation sur différents ordinateurs, systèmes d'exploitation et

connexions Internet en cours de programmation.

Pour optimiser les animations en général :

􀀗 Utilisez des symboles, animés ou non, pour tout élément apparaissant plus
d'une fois.

􀀗 Chaque fois que cela est possible, utilisez des animations interpolées, qui
prennent moins d'espace qu'une série d'images-clés.

􀀗 Pour les séquences animées, utilisez des clips plutôt que des symboles
graphiques.

􀀗 Limitez la zone de modification de chaque image-clé ; faites en sorte que

l'action prenne place dans une zone aussi réduite que possible.

􀀗 Evitez d'animer les éléments bitmap ; utilisez les bitmaps comme éléments
statiques ou d'arrière-plan.

􀀗 Pour le son, utilisez le format MP3, le format audio le plus compact, à

chaque fois que cela est possible.

Pour optimiser les éléments et les lignes :

􀀗 Groupez les éléments autant que possible.

􀀗 Utilisez des calques pour séparer les éléments qui évoluent au cours de
l'animation de ceux qui ne subissent aucune modification.
 57

􀀗 Utilisez Modification > Optimiser pour réduire le nombre de lignes

distinctes utilisées pour décrire les formes.

􀀗 Limitez le nombre de types particuliers de lignes (par exemple, lignes en

tirets ou pointillées). Les lignes pleines utilisent moins de mémoire. Les
lignes créées avec l'outil Crayon nécessitent moins de mémoire que les
coups de pinceau.

Pour optimiser le texte et les polices :

􀀗 Limitez le nombre de polices et de styles de police. Utilisez les polices

intégrées avec parcimonie car elles augmentent la taille du fichier.

􀀗 Pour les options d'intégration des polices, sélectionnez seulement les

caractères nécessaires au lieu d'inclure la police entière.

Pour optimiser les couleurs :

􀀗 Utilisez le menu Couleur de l'inspecteur des propriétés du symbole pour

créer de nombreuses occurrences d'un même symbole dans des couleurs
différentes.

􀀗 Utilisez le mélangeur de couleurs (Fenêtre > Mélangeur de couleurs) pour

faire correspondre la palette de couleurs de l'animation et celle spécifique
aux navigateurs.

􀀗 Utilisez les dégradés avec parcimonie. Le remplissage d'une zone à l'aide

de dégradés nécessite 50 octets de plus que le remplissage à l'aide d'une
couleur unie.

􀀗 Utilisez la transparence alpha avec parcimonie car elle peut ralentir la

lecture.

Pour optimiser ActionScript :

􀀗 Activez l'option Omettre les actions Trace de l'onglet Flash des paramètres
de publication pour ne pas inclure les actions trace dans les animations
publiées.

􀀗 Définissez des fonctions pour le code fréquemment répété.

􀀗 Utilisez des variables locales lorsque possible.

L’exportation
 58

Lorsque vous publiez une animation Flash, vous pouvez définir les options de
compression des images et du son et une option permettant de protéger votre
animation contre l'importation. Utilisez les commandes du volet Flash de la
boîte de dialogue Paramètres de publication pour changer les paramètres
suivants :

Pour choisir les paramètres de publication pour une animation Flash :

- Choisissez Fichier > Paramètres de publication et cliquez sur l'onglet
Flash.
- Choisissez une version de lecteur dans le menu déroulant.
- Choisissez un ordre de chargement pour définir l'ordre dans lequel Flash
charge les calques d'une animation pour l'affichage de la première image
de votre animation : De bas en haut ou De haut en bas.
- Activez l'option Générer un rapport de taille pour générer un rapport
indiquant le volume de données du fichier final Flash.
Pour activer le débogage du fichier Flash publié, activez une des options
suivantes:
L'option Omettre les actions Trace oblige Flash à ignorer les actions
trace de l'animation actuelle. Les informations des actions trace ne sont pas
affichées dans la fenêtre Sortie lorsque vous activez cette option.
L'option Protéger contre l'importation empêche d'autres personnes
d'importer l'animation Flash et de la reconvertir en un document Flash (FLA).
L'option Débogage autorisé active le débogueur et permet de
déboguer
une animation Flash à distance. Si vous activez cette option, vous pouvez choisir
de protéger votre animation Flash à l'aide d'un mot de passe.
L'option Compresser l'animation compresse l'animation Flash afin
de réduire la taille du fichier et le temps nécessaire au téléchargement.
Cette option est activée par défaut et est tout particulièrement utile pour
les fichiers contenant une grande quantité de texte ou d'instructions
ActionScript.
Un fichier compressé ne peut être lu que dans Flash Player 6.
Si vous avez activé l'option Débogage autorisé à l'étape 5, entrez un mot
 59

de passe dans le champ correspondant pour empêcher le débogage de votre

animation Flash sans autorisation. Si vous ajoutez un mot de passe, les autres
utilisateurs devront entrer ce mot de passe avant de pouvoir déboguer
l'animation. Pour supprimer le mot de passe, effacez le contenu du champ Mot
de passe.
Pour contrôler la compression bitmap,
réglez le curseur Qualité JPEG ou entrez une valeur. Une qualité d'image
faible produit des fichiers plus réduits, tandis qu'une qualité d'image supérieure
génère des fichiers plus volumineux.

Essayez différents réglages afin de déterminer le meilleur compromis entre la

taille et la qualité, 100 fournissant la meilleure qualité et la plus faible
compression.
Pour définir le taux d'échantillonnage et la compression des sons d'événement et
des sons lus en flux continu, cliquez sur le bouton Définir en regard de Flux
continu ou Son d'événement audio et choisissez des options de compression,
de taux et de qualité dans la boîte de dialogue Paramètres audio. Cliquez sur
OK une fois ces opérations terminées.

COMMENT PLACER UNE ANIMATION DE FLASH DANS DREAMWEAVER ?

*Avant de d’appeler notre animation flash, il faut créer le fichier exécutable

compatible avec dreamweaver : pour le faire il faut :
- ouvrez votre application flash, cliquez sur le Menu Contrôle, puis
cliquez sur Tester la séquence. Il se crée automatiquement un fichier
exécutable de couleur blanche dans le même répertoire que le fichier de
création qui est de couleur rouge.

*En suite Ouvrez dreamweaver, et sélectionnez l’endroit ou doit apparaitre

l’animation.
Cliquez sur le menu insertion, / media / flash
Dans la fenêtre qui s’ouvre, recherchez le fichier exécutable de couleur blanche

et cliquez sur ok. Votre animation flash viendra s’afficher sous cette forme :

Défilement de plusieurs Images

Pour défilement de plusieurs s’image, il faut :
- Appeler les images dans la fenêtre de flash en faisant : clique sur le menu
Fichier / Importer /Importer dans la Bibliothèque.
 60

- Sélectionner les images et cliquer sur ouvrir, les images apparaitront à

votre droit.
- Sélectionner la Première image par un clique et
Faites un glissé déplacé vers la scène(page blanche).
Faite ainsi pour les autres images afin de les associcier
les une après les autres, jusqu'à ce que vous formiez un
bloque d’image.
- Utiliser le sélectionneur et sélectionner-les tous en
même temps.

- Taper sur la touche F8 et cocher l’option graphique puis sur ok

- Cliquez sur la TimeLine sous un chiffre un peu éloigner du point de

départ, taper sur la touche F6 pour obtenir une image clé.
- Revenez dans la scène afin de déplacé votre image dans le sens souhaité.
Puis cliquez entre les deux images clé dans la timeLine.
Dans la fenêtre propriété, cliquez sur le menu Interpolation et choisissez
mouvement : la timeline change de couleur avec une flèche continue. Ce qui
signifie que l’animation peut se faire.
- Pour Exécuter l’animation, tapez sur CTRL+Entrée ou cliquez sur le
menu Contrôle puis sur Tester l’animation.

Apparition de plusieurs images les unes après les autres

- Appeler les images dans la fenêtre de flash en faisant : clique sur le menu
Fichier / Importer /Importer dans la Bibliothèque.
- Sélectionner les images et cliquer sur ouvrir, les images apparaitront à
votre droit.
- Sélectionner la Première image par un clique et Faites un glissé déplacé
vers la scène (page blanche).
- Cliquez sur la TimeLine sous un chiffre un peu éloigner du point de
départ de la première image , taper sur la touche F7 pour obtenir une
image clé.
- Placer la deuxième image à l’endroit ou se trouvais la première.
Cliquez sur la TimeLine sous un chiffre un peu éloigner du point de
départ de la deuxième image, taper sur la touche F7 pour obtenir une
image clé. Placer ainsi les autres images.
- cliquez entre les deux images clé dans la timeLine
Dans la fenêtre propriété, cliquez sur le menu Interpolation et choisissez
mouvement : la timeline change de couleur avec une flèche continue. Ce
qui signifie que l’animation peut se faire.
 61

Faites cela pour les autres intervalles

Les Pages PHP & MySql

1 Introduction - 2. Utilisations du PHP. - 3. Utilitaires

Dans la partie précédente de la formation Internet, nous avons créé un site

Web en HTML avec FrontPage, donc statique. Ces notes de cours en ligne
reprennent le développement en PHP et MySQL (sites dynamiques), elles font
partie de la formation YBET "Création de site" donnée en nos locaux ou en
entreprise et permettent de donner des bases sur le langage PHP couplé à une
base de données MySQL. Cette formation parle de programmation, elle est donc
plutôt compliquée, mais j'essaye de suffisamment dissocier les différentes
procédures dans ces notes. Ce cours est corrigé et mise à jour en fonction des
difficultés rencontrées lors des séances dans les salles de formation: exercices,
notes complémentaires, ...

Si l'apprentissage du langage et des procédures est important, une partie de

cette formation va également permettre de créer un site simple ou modifier des
sites en GNU/GPL (portals, OScommerce, livres d'or, forum, ...). L'exercice lié à
ce cours est la création d'un site de petites annonces. Le site associé, créé en
partie par les "élèves" est dahut.be.

2. Utilisations de PHP

Le langage PHP est directement décodé par le serveur Internet qui renvoie le
résultat au format HTML vers le navigateur. Pour l'utilisateur, cette
fonctionnalité est complètement transparente. Comme les pages du site sont
 62

"programmées", les possibilités sont presque illimitées. Les pages créées

peuvent afficher des paramètres personnalisés (l'heure, les indications
spécifiques au visiteur), créer des formulaires personnalisés avec une
vérification des données, afficher des fichiers textes remaniés, ... PHP est
généralement couplé à une base de donnée MySQL. Ce n'est pas obligatoire
mais permet des applications étendues comme la création d'un forum, d'un site
de vente en ligne, ... Vous trouverez de multiples exemples téléchargeable
gratuitement sur Internet.

Créer des pages en PHP n'oblige pas à créer tout le site dans ce langage. Les
pages peuvent être mélangées avec d'autres en html sur le même site. La seule
manière de vérifier le type de page est de vérifier l'extension de la page Internet,
et encore puisque des pages en HTML peuvent être simplement renommée en
PHP pour des développements futurs.

Les extensions suivantes sont liées aux pages PHP suivant les versions
utilisées par votre hébergeur:

 phtml: version Php/FI 2.0

 PHP3: version PHP 3.0
 PHP pour les versions 3.0, 4.0 (sortie officiellement en 2000), 4.11,
4.3, ... La version 5.0 est sortie en 2004, la 6 est en cours de
développement.

2. Utilitaires ou équipements logiciel pour créer les page

PHP

Programmer en PHP nécessite quelques programmes et utilitaires spéciaux

pour débuter:

 Editeur PHP: Vous pouvez créer des pages avec Notepad, mais des
logiciels gratuits et plus professionnels sont téléchargeables sur Internet :
DreamWeaver, HydraPHP, PHPedit, sont aussi possibles.

 Serveur personnel: Une page en PHP doit être décodée par un serveur
et ... votre ordinateur sous Windows ne fonctionne pas comme serveur
php. Pour tester vos programmes en PHP - MySQL, vous pouvez
télécharger logiciel easyphp. Il fonctionne sous Windows et permet non
seulement de tester des pages en local, mais également de créer des bases
de données locales Mysql.

 63

 EasyPhp n'est pas seulement un logiciel de test, c'est une réelle

application serveur qui peut vous permettre d'héberger votre site Internet
sur votre ordinateur en local, mais attention à la sécurité. Toutes les
commandes ne fonctionnent néanmoins pas comme les envois de mails
qui nécessitent un serveur pop ou quelques fonctions sur les images.

Ces 2 utilitaires vous permettent finalement d'utiliser votre PC sous

Windows pour créer et tester des pages programmées en PHP, pour les
retransférer vers votre site Internet ensuite.

Installer EasyPhP
1 Introduction - 2. Installation d'EasyPhp. - 3. Utilisation en php
Le langage PHP nécessite un serveur pour décoder les instructions. De même
une base de donnée MySQL nécessite un gestionnaire. La majorité des
hébergements Internet proposent ces possibilités (sauf quelques serveurs sous
Windows). Tester les applications directement sur un hébergeur nécessite de
taper les lignes de commandes dans l'éditeur, de le transférer via un serveur
FTP, de le tester, ... et en cas d'erreur, de recommencer. Dans le cas d'une base
de donnée MySql, le problème est identique sauf que la majorité des
hébergements ne proposent qu'une seule base de donnée (mais une base de
donnée peut fonctionner pour plusieurs applications). Cette solution risquerait de
corrompre la base et de rendre inaccessible un site "en production". Bref, ce
n'est pas la solution idéale.
La solution standard est d'installer le logiciel gratuit (en fait en GNU)
EasyPHP sur votre ordinateur en local. EasyPhp émule un serveur apache sous
Windows compatible avec PHP qui permet via PHPMyadmin de gérer des bases
de données MySQL. Attention, ce logiciel est un réel gestionnaire réseau, d'où
quelques risques de sécurité. Il ne doit être démarré que pour les tests de vos
programmes en PHP.
Quelques commandes spécifiques ne fonctionnent pas sur EasyPhp par
rapport à un hébergement Internet (mail, gestion des images, ...) mais cette
solution est largement assez complète pour tester la majorité des applications.

2. Installation d'EasyPhp
La première chose est de le télécharger sur le site Internet d'easyphp.org. Sélectionnez la
version 2.0 (la dernière en date). Cette version est compatible PHP 4 et 5. La version 1.8 est
compatible PHP 3 et 4. Ceci peut poser quelques problèmes de compatibilités entre vos
programmes et l'hébergement, vérifiez la version sur votre serveur avant. Sélectionnez le site
miroir le plus adapté pour le téléchargement. Commencez l'installation.
 64

La fenêtre suivant rappelle les conditions d'utilisation. Sélectionnez le

dossier par défaut pour l'installation: C:\Program Files\EasyPHP1-8. Le reste de
l'installation se fait sans problèmes.

La fenêtre suivante propose le téléchargement des mises à jour. Une fois

téléchargées, fermez Easy Php et redémarrez-le via Démarrer -> Programmes ->
EasyPhp ->EasyPhp. Deux indications vont vous permettre de vérifier si le
serveur est démarré sur votre ordinateur sous Windows en local: une fenêtre et
un petit logo dans la barre des tâches à coté de l'heure comme ci-dessous.

Par la fenêtre, vous pouvez arrêter le PHP ou la gestion MySQL:s

Par l'icône, vous pouvez récupérer la fenêtre ci-dessus en double cliquant ou

accéder au menu de configuration avec la touche contextuelle de la souris (click
droit). Ce menu est la base du fonctionnement d'EasyPhp:
 Aide renvoie à différentes aides sur le fonctionnement
ou sur le langage PHP, généralement via des sites.
 Log permet de vérifier les messages d'erreurs Apache,
PHP ou MySQL
Configuration permet de configurer le logiciel
(démarrage automatique, ...)
 Explorer donne l'accès à l'explorateur Windows
Administration permet d'administrer les différents
composants, notamment de gérer les bases de données.
 Web local permet d'accéder à votre navigateur Internet en local
 Redémarrer et arrêter permet de quitter EasyPhp.

3. Utilisation en php.
L'utilisation de nos programmes en php (en html) va passer par un sous
dossier Windows d'EasyPhp, soit C:\Program Files\EasyPHP1-8\www. Les
fichiers à tester doivent obligatoirement se trouver dans ce dossier ou dans un de
ses sous-dossier.
Démarrez Internet explorer (ou Firefox) et
dans la barre d'adresse, tapez 127.0.0.1, c'est
l'adresse utilisée automatiquement.
Au premier démarrage, la page d'accueil va
afficher la page 127.0.0.1/index.php, en fait le
 65

le fichier index.php inclus dans le dossier Windows. Pour tester vos

programmes, il vous suffit de les insérer dans ce dossier et d'utiliser l'adresse
127.0.0.1/nom_fichier.

ATTENTION: Windows ne fait pas la distinction entre les minuscules et

majuscules, Linux oui. Si votre fichier s'appelle INDEX.php, en local,
index.php, INdex.php, ... seront identiques. Par contre, si vous transférer le
fichier sur un hébergement, ils seront vus comme des fichiers différents.

Par facilité, tapez tous les noms de fichiers en minuscule.

Pour la creation de BASE DE DONNEES L'utilisation d'EasyPhP en mode

MySql sera vu
*Pour EasyPhp, le nom du serveur est toujours : localhost,
*l'utilisateur est : root , (éventuellement root@localhost),
*Mot de passe vide. Ceci peut-être modifié via les options.

Créer une base de donnée MySQL

1 Introduction - 2. Démarrer EasyPHP. - 3. Création d'une table - 4. Types de champs
La base de données Mysql, couplée à une base de données PHP permet de
créer quasiment tous les sites Internet inimaginables. Mysql a de nombreux
avantages, elle est sous licence GPL (donc libre d'utilisation), son nombre de
développeurs est élevé (aide facile sur les forums informatiques),
relationnelle, ... En plus, de nombreuses applications sont téléchargeables
gratuitement sur Internet: forum, livre d'or, gestion photos, vente en ligne, ...
(Mais merci de respecter les règles d'utilisation - un lien ne coûte ... rien)
Cette partie de la formation création de site va nous permettre de comprendre
le fonctionnement de MySQL, couplé au PHP. A partir de ce chapitre, nous
allons commencer à développer une véritable application comme exercice: un
petit site d'annonces en ligne.
Si le prochain chapitre va permettre de créer des tables Mysql par
programmation, nous allons débuter par créer la base de données sous
 66

EasyPHP en local. Pourquoi choisir cette méthode? Tout simplement pour

pouvoir tester l'application avant de la transférer sur un site "en production".
D'ailleurs, cette formation sera principalement "en local".

, champs sont équivalentes.

2. Démarrer EasyPhp
Si vous ne l'avez pas encore installé, télécharger le logiciel GNU/GPL sur le
site. Dans Démarrer ->Programmes, sélectionnez EasyPhp. Une petite icône
apparaît à coté de l'horloge signalant le démarrage du serveur PHP-mysql. Une
petite fenêtre doit également apparaître vous signalant le démarrage des
serveurs.
Cette fenêtre permet de démarrer ou d'arrêter Apache (le
serveur PHP) et MySQL (la base de données) à l'aide des boutons.

A l'aide du menu contextuel de l'icône, sélectionnez

administration. Ceci va nous afficher la fenêtre d'EasyPHP. Dans
la fenêtre, en PHPMYADMIN, sélectionnez Gestion BD. La
fenêtre qui va vous permettre de créer, gérer, .... les bases de
données en mode local. La fenêtre ressemble à ceci. La partie de
gauche permet d'administrer les bases de données existantes sur votre PC, celle
de droite de créer une nouvelle base de données ou de gérer celles existantes si
elles sont sélectionnées à gauche.

Commençons par créer une base de donnée que nous appellerons YBET par
exemple (laisser le type en Interclassement par défaut, normalement, cette
possibilité sélectionne Latin1_swedish_ci, le code de caractère par défaut des
européens).

Cette partie va nous permettre de créer ensuite des tables dans la base de
donnée MySQL. La création peut également se faire par programme (durant
l'installation de l'application par exemple).
 67

3. Création d'une table

Les tables en PHP sont identiques à celle d'une table d'Access. Elles intègrent les
informations brutes, non traitées. Rentrez le nom d'une table ("annonce par exemple) et le
nombre de champs (rubriques) souhaités, à ce stade, sélectionnez 2.
La fenêtre suivante va permettre de personnaliser nos champs. Vous devez
obligatoirement rentrer toutes les données

 Le nom du champ ne peut être nul, ni comporter de caractères accentués, espaces, -,

.... par contre, il accepte _
 Le type de champ est sélectionné dans une liste de choix. Pour l'instant,
sélectionnons VARCHAR qui correspond à du texte.

 la Taille/valeurs nous permet de déterminer la taille maximum des données à rentrer

dans les champs.

 Interclassement représente le jeux de caractères par défaut si vous ne sélectionnez

rien (préférable). Sinon vous pouvez sélectionner Latin1_swedish_ci. Si le jeu de
caractère n'est pas démarré dans PHPMYADMIN, vous recevrez néanmoins un code
d'erreur

 L'attribut peut-être rien, unsigned ou Unsigned zerofill. Les 2 dernières valeurs

s'utilisent uniquement pour des types de champs spéciaux.

 Null permet de définir si le champ peut-être null (vide) ou non.

 Défaut permet de donner une valeur par défaut au champ.

  

 permet de déterminer si le champ est ou non une clé primaire. Dans ce cas, la valeur
du champ sera unique dans la table. Aucun n'enregistrement n'aura la même valeur
dans ce champ, les tris sont également plus rapides

 index permet d'augmenter les vitesses de traitement (tri) dans la table. La clé
primaire est également un index.

 unique permet de spécifier que le contenu est unique dans l'ensemble du champ.
Contrairement à l'index, elle n'augmente pas la vitesse de traitement.

 permettent d'indexer des textes complets. Cette possibilité ralentit la table pour de
longs champs.

Pour l'instant nous allons créer 2 champs de type VARCHAR (caractères de taille
variables)
 code, de taille 10 et non null. Unique
 titre, de taille 30 et non null. N'oubliez pas de sauvegarder la table. La fenêtre suivante
donne ceci
 68

 permet d'éditer (modifier) la table.

 Le bouton permet de supprimer le champ.

4. Les types de champs

Nous venons de créer 2 champs. Dans notre exemple, nous avons choisi le
type VARCHAR (type caractère à taille variable). Cette formation va nous
permettre d'étudier les autres types sous MYSQL.
4.1. Les champs de types caractères
CH Cha 255 taill BL Zon 65K  
AR îne cha e OB e cha
de r. obli de r.
car ma gat text ma
VA Cha 255 taill
act x. oire e x. TINYBLOB Petite zone de texte, sensible à la casse
RC îne cha e
ère sta 255
HA de r. ma
s nda TINYTEXT Petite zone de texte, insensible à la casse
R car ma xim
fixe rd
act x. um
, (ma
ère obli
no is
s gat Zone de texte standard (mais accepte toute
mb acc
de oire TEXT sortes de données comme des images),
re ept
lon insensible à la casse
de e
gue
car tou
ur
act te
vari ME Zon 16  
ère sort
abl DIU e mill
s es ME Zon 16  
e MB de ion
obli de DIU e mill
LO text s LO Gra 4  
gat don MT de ion
B e cha NG nde mill
oire née EXT text s
LO Gra 4   mo r.
s. s e cha BL zon iard
NG nde mill yen ma OB e s
Les EN co
List 655   mo r.
TEX zon iard ne, x.
car UM emm 35 yen ma de cha
T e s SET diff
List 64   text r.
act ede val ne, x.
de cha ére
e val
ère des
cho eur ins e, ma
text r. ntie
de eur diff x.
s ima
ix s ens
e, ma maj
cho s
non ges ma ible ére
ne x. usc
ix ma ntie
incl ), x. à la
diff ule
mul x.
us sen cas maj
ére /mi
tipl usc
ser sibl se
ntie nus
e
ont es ule
pas cul /
re aux
maj es
mpl maj min
usc usc
acé usc
ule
s ule ule
/
par s/ Les types CHAR et CHARVAR ne sont pas
min
des min sensibles aux majuscules et minuscules:
usc
esp usc
ule
ace ule
s. s
 69

"Table"="table". Pour rendre ces données sensibles à la casse, utilisez l'option [Binary] lors de
la création du champs.
Les variables type TEXTE sont insensibles à la casse, les variables type BLOG les
différentie.

4.2. Les champs numériques

Cha
mp
s
nu
mé
riqu
es

TINYINT Entier très petit 256 valeurs différentes, de -128 à +127 ou 0 à 255 (1 octet)

SMALLINT Entier petit 65.536 valeurs différentes (2 octets)

MEDIUMINT Entier moyen 16.777.216 valeurs différentes (3 octets)

INT Entier standard 4.294.967.296 valeurs différentes (4 octets)

BIGINT Entier grand 8 octets

FLOAT Décimal de simple précision 4 octets

DOUBLE, REAL Décimal de double précision 8 octets

DECIMAL, NUMERIC Décimal sous forme de chaîne variable

Pour les champs de type entier, vous pouvez utiliser l'option Signed (par défaut) pour
déterminer des valeurs négatives ou positives ou Unsigned (uniquement des valeurs
positives).
L'option ZEROFILL assure l'affichage des zéro. 

4.3. Dates et heures

DATE Date. Par exemple 2008-03-06, format anglophone 3 octets

TIME Heure. Par exemple 10:25:59 3 octets

DATETIME Date et heure. Par exemple 2006-03-06 10:25:59 8 octets

TIMESTAMP Date et heure sans les séparations, par exemple 20060306102559. 4 octets
Attention, le format a évolué avec les versions d'où un risque d'erreur en
 70

changeant d'hébergement Internet.

YEAR Année, exemple 2008 1 octet

NB : Dans le précédant chapitre, nous avons créé une base de donnée MYSQL et une table
manuellement avec PHPMyADMIN. Vous pouvez entrer déjà des données dans cet environnement
en cliquant sur l’option Inserer. Les données sont à saisir dans la colonne Valeur

Après la saisie des donnée, il faut cliquer sur Exécuter pour enregistrer vos données dans la
base

*Pour consulter les données enregistrées il faut cliquer sur l’option Afficher.

Pour voir la structure de vos tables ou modifier les tables cliquez sur l’option structure.

5. Connexion à la base de données avec dreamweaver

-Ouvrir dreamweaver avec un projet de site, selon les explications données un peu plus haut.

Ainsi avant de commencer toute connexion, il faut se rassurer que vous vous
trouvez sur un site avec un nom de site
Alors une ouvert(projet de site) cliquez sur l’option liaison

Cliquer sur type de document et dans la fenetre qui s’ouvre choisissez

PHP et cliquez sur Ok ,

Cliquez sur serveur d’évaluation, au niveau de :

*Modèle de serveur, choisissez PHPMySQL

*Access, choisissez Local/Réseau

*Dossier du serveur, recherchez le dossier de base de votre site.

NB : ce dossier de base doit –être dans le répertoire www de

EasyPHP
Exemple : C:\Program Files\EasyPHP 2.0b1\www\Site sansnom\

*Préfixe de URL, tapez le nom de votre répertoire précédé du Mot

localhost qui
 71

représente le nom du serveur.

Exemple : http://localhost/Site sansnom/

Cliquez sur Ok pour finir.

Cliquez sur l’onglet Base de Données

Cliquez sur le signe + puis sur Connexion MySQL.

*Saisir un nom de Connexion exemple : ConexionBAse

*Serveur MySQL Tapez : localhost

*Nom Utilisateur tapez : root

*Mot de passe ne tapez rien si vous n’avez pas défini de mot de passe ou défini
les contraintes de d’accès à la base de données dans l’option Privilège de
EasyPHP.

*Cliquez sur le bouton sélectionner pour rechercher la base de données,

sélectionnez la puis cliquez sur Ok.

Votre page Web ou votre site est ainsi connecter à la base de données.

6. Création d’une page de saisie sur Deamweaver

Afficher une page web de type PHP. Cliquez sur le Menu insertion/ objet
d’application/ insérer un enregistrement /assistant de formulaire d’insertion
d’enregistrement.

Cliquez sur serveur d’évaluation puis sur ok

 72

Au niveau de connexion, choisir le nom de votre connexion, le nom de vos

tables apparaisse dans la zone Table, dans la zone Champs du formulaire
apparaitra tous les champs de la table qui sera sélectionnée.

Vous pouvez également sur cette fenêtre ajouter ou supprimer certain champs
en utilisant les signes + ou -. Vous pouvez aussi changer la position des champs
en utilisant ces deux flèches :

Cliquez sur Ok pour valider.

7. Affichage des données d’une table de base Données sur une page Web

Afficher une page web de type PHP. Cliquez sur le Menu insertion/ objet
d’application/ données dynamiques /Tableau dynamique.

Cliquez sur jeu d’enregistrement.

Choisir la connexion, puis la table

Correspondante et cliquez sur Ok.

Cliquer sur ok simplement

Vous pouvez modifier les paramètres

du tableau qui affichera les

données.

NB : vous pouvez lancer une exécution afin d’apprécier l’affichage des données.
 73

Format Code PHP

Création de formulaire

Comme le fichier contact.php doit être auto-invocant, le formulaire, méthode

POST, doit être affiché en PHP (mais ce n'est pas obligatoire ici). Pour cela,
nous allons attribuer à une variable $form l'ensemble du contenu, sans oublier
les \ devant les " et ensuite affichée ce texte.

<php

$form="

<form method=\"POST\">
<p>Nom: <input type=\"text\" name=\"nom\" size=\"30\" value=\"Nom\"></p>
<p>Votre adresse mail: <input type=\"text\" name=\"mail\" size=\"30\" value=\"Votre
adresse mail\"></p>
<p><input type=\"submit\" value=\"Envoyer\" name=\"B1\"></p>
</form>";
echo $form;

?>

Remarquez que nous lui donnons une valeur par défaut via l'option value: la
zone NOM reprend le texte nom, la zone mail reprend la valeur "Votre adresse
mail". Ce n'est pas obligatoire, sauf que les tests ci-dessous seront modifiés.

Vérification des valeurs entrées.

La partie ci-dessus s'insère au-dessus du formulaire. Les valeurs entrées par

l'utilisateur sont directement modifiées pour supprimer les blancs et insérer le
caractère \ devant les guillemets et apostrophes par la fonction addslashes.

Si la valeur envoyée est égale à la valeur par défaut, un message d'erreur

s'affiche. Les tests sur l'adresse mail vérifient simplement si elle n'est pas nulle
et si le caractère @ existe, suivi de caractères.

if (isset($_POST['B1']))
{
// teste les valeurs.
$nom=trim(addslashes($_POST['nom']));
$mail=trim(addslashes($_POST['mail']));
 74

$tableau=array();
$tableau=Explode("@",$mail,2);
// echo $tableau[0];
if ($nom=="" || $nom=="Nom")
{
echo "Veuillez rentrer un nom";
}elseif ($mail==""){
echo "Rentrez une adresse mail";
}elseif (!isset($tableau[1])) {
echo"Rentrez une adresse valide";
}else{
// entrée des valeurs dans la table MySQL, envoi des données à une adresse mail.

}
}

Transfert de données dans la base de données

Le transfert des données vers la base de données ne se fait que si les données
sont validées. Rien de bien spécial, nous ne vérifions même pas si l'utilisateur
existe déjà (mais vous pouvez le faire comme exercice).

if(!mysql_connect('localhost','root')){
Echo'Connection Impossible';
exit();
} else{
// Echo'Connexion réussie';
}
Mysql_select_db('ybet');
$requete="insert formulaire SET nom='$nom', mail='$mail'" ;
$resultat=mysql_query($requete);

Envoi dans votre boîte mail

La dernière fonction est d'envoyer les données par mail. Elle utilise la
fonction PHP mail(destinataire, sujet, message,  headers). Cette fonction
renvoie true si le message est bien envoyé, false sinon. Les différents
composants doivent au préalable être définis dans les variables.

// envoi par mail

$date=date('Ymd');
$message=date("d/m/Y H:m:s\n")."\n Nouveau contact: "."\n nom: ".$nom."\n
Adresse mail: ".$mail;
$entetes = "From: contact@site.be\nReply-to: contact@site.be\n";
$sujet="Nouveau contact ".$nom;
$webmaster=('contact@site.be');
mail($webmaster,$sujet,$message,$entetes);

Elle vient à la suite de l'entrée des données dans la base de données.

 75

Remarques: La fonction mail ne fonctionne pas sous Easyphp en local et

doit se faire sur un serveur. Les différentes adresses mail doivent être corrigées
selon votre propre adresse mail.

Le fichier complet
<?php
if (isset($_POST['B1']))
{
// teste les valeurs. $nom=trim(addslashes($_POST['nom']));
$mail=trim(addslashes($_POST['mail']));
$tableau=array();
$tableau=Explode("@",$mail,2);
echo $tableau[0];
if ($nom=="" || $nom=="Nom")
{
echo "Veuillez rentrer un nom";
}elseif ($mail==""){
echo "Rentrez une adresse mail";
}elseif (!isset($tableau[1])) {
echo"Rentrez une adresse valide";
}else{
if(!mysql_connect('localhost','root')){
Echo'Connection Impossible';
exit();
} else{
Echo'Connexion réussie';
}
Mysql_select_db('ybet');
$requete="insert formulaire SET nom='$nom', mail='$mail'" ;
$resultat=mysql_query($requete);
//die ();
// envoi par mail
$date=date('Ymd');
$message=date("d/m/Y H:m:s\n")."\n Nouveau contact: "."\n nom: ".$nom."\n
Adresse mail: ".$mail;
$entetes = "From: contact@site.be\nReply-to: contact@site.be\n";
$sujet="Nouveau contact ".$nom;
$webmaster=('contact@site.be');
mail($webmaster,$sujet,$message,$entetes);

}
}
$form="<form method=\"POST\">
<p>Nom: <input type=\"text\" name=\"nom\" size=\"20\" value=\"Nom\"></p>
<p>Votre adresse mail: <input type=\"text\" name=\"mail\" size=\"30\"
value=\"Votre adresse mail\"></p>
<p><input type=\"submit\" value=\"Envoyer\" name=\"B1\"></p>
</form>";
echo $form;

?>

Remarque : Vous pouvez créer de meilleur site sans ces codes. S’ils sont dans
ce support c’est pour vous faire comprendre que malgré que vous utiliser
l’interface graphique qui facilite la création de page Web, ces codes sont
créés automatiquement lorsque vous placez un objet ou un texte sur une
page web.
 76

Hébergez votre site

Pour être vu de tout le monde sur internet, il y a plusieurs

solutions
La solution économique
La solution performante
La solution intermédiaire
 

Vous vous faites hébergé chez un prestataire qui va stocker vos

pages web.

Souvent gratuit, mais cette gratuité a un prix, parfois vous devez accepter de placer un
bandeau ou un pop-up publicitaire aux couleurs du site hébergeur.
Votre FAI met aussi à votre disposition des espaces personnels.
Vous n'aurez alors pas de gestion particulière à faire si ce n'est qu'à construire vos pages et
effectuer des sauvegardes régulières.

Vous aurez la plupart du temps

 - de l'espace disque plus ou moins important.
 - un langage de programmation (php, python, perl, asp ...)

 - une base de données comme mysql par exemple

 - Plusieurs applications sont en général à disposition (livre d'or, blog,
widgets..)

La contre-partie de cette facilitée est que vous n'aurez pas beaucoup de liberté
sur votre site.
Vous serez totalement dépendant de votre fournisseur qui vous imposera votre
nom de domaine (exemple domaine.com), les versions des langages et base de
données utilisées...
Il ce peut aussi qu'un beau matin vous vous retrouviez avec un site hors-ligne 
ou qu'on vous annonce la fin du service proposé pour des raisons commerciales.
Ce genre de prestation bénéficie aussi en général d'un faible débit ce qui peut
ralentir le chargement de vos pages.
Cette méthode un bon moyen de commencer un site personnel de petite taille.

Une autre solution est la location d'un serveur avec achat d'un nom
de domaine.
 77

Avec cette solution vous avez une totale liberté, car c'est vous qui gérait tout de
A à Z.
Vous aurez le choix de votre nom de domaine, de l'OS utilisé pour gérer votre
serveur, du langage utilisé pour vos pages....
Le prestataire vous garantit une machine opérationnelle et connectée non-stop à
internet avec un débit montant et descendant élevé.

La seule limite sera en général celle de votre portefeuille

En effet ces solutions ont un coût qui peut-être trés élevé si vous choisissez une
solution professionnelle.
A vous de connaitre vos besoins (trafic du site, taille du stockage de vos
données, puissance du processeur...)
Quelques solutions sont à votre disposition chez Free (DEDIBOX), DigiCube et
OVH (KIMSUFI).
Pour réduire la facture vous pouvez rentabiliser votre site par tous les moyens à
votre disposition (publicité, micro payement, paypal...)

Il faut aussi prendre en compte le facteur temps.

La gestion de ce genre de solution et très chrono-phage au détriment de la
conception de votre site, mais en contre parti on apprend beaucoup et cela ouvre
de nouvelles perspectives.
Il n'est pas donné à tout le monde de gérer une telle machine. Il faut penser à un
tas de paramètres.
 - Choisir son OS (il faut apprendre à le maitriser et le maintenir à jour)
 - Gérer la sécurité (il n'est pas rare d'avoir la visite de certaines personnes
mal intentionnées)
 - Installer ses applications (serveur de pages, base de données)

 - Gérer la reprise d'un service en cas d'arrêt.

A vous de voir si une telle solution est adaptée à vos besoins ou de ceux de votre
entreprise, et si cela vaut le prix à payer.

Enfin pour terminer ce petit billet, je signalerais simplement qu'il

existe une solution intermédiaire.

Il s'agit d'héberger son site chez soi.

Pour cela il suffira soit d'acheter un nom de domaine ou d'utiliser un nom de
domaine gratuit du style Dyndns (il faudra mettre à jour automatiquement votre
 78

adresse IP si elle est dynamique)

Une fois que vous avez votre domaine vous n'avez plus qu'à installer votre
serveur et vos sites web chez vous.

Cette solution est en fait un mixte des deux précédentes. Elle a l'avantage de ne
pas coûter trop chére et de vous laisser toutes les libertés de gestion.
Il faut toutefois prendre en compte quelques paramètres.
Votre machine doit être allumée tout le temps pour être accessible (on évite de
redémarrer toutes les 5Mn son PC)

La vitesse d'accès a votre site sera dépendant de votre débit en Upload, qui en
général n'est pas très élevé en ADSL ce qui exclut quelques services possibles
comme le Streaming gros consommateur de bande passante.
De même si vous utilisez aussi le serveur pour du p2p alors vous pouvez rendre
votre site inaccessible.
Enfin si c'est votre machine il faut bien penser la protéger pour éviter de tout
perdre si vous êtes attaqué.

Donc en résumé cette solution est assez économique et possède les avantages de
la gestion personnelle de son serveur. Le gros point négatif étant le débit de
votre site qui est dépendant de votre box et de son utilisation.

Conclusion : Dans tous les cas, nous pouvons utiliser un logiciel spécialisé
(dans les deux premiers cas) ou logiciel FTP. Ces logiciels sont utilisés pour le
transfert des pages web vers l’hébergeur ou le serveur de votre site.
Vous disposerez donc :
d’un nom de Domaine (nom du site)
d’un nom Utilisateur
d’un mot de Passe
d’un numéro de port…
exemple de Logiciel : CoreFTP téléchargeable sur internet.