Creation Web Professionnel

Support de Formation en ligne
Cration et gestion de sites Web professionnels

Support de cours ralis dans le cadre d'un atelier de formation de formateurs effectu au Niger du 3 au 17 fvrier
2003
par Africa Computing
Auteurs : Philippe Drouot, Toofik Medjamia et Cdric Protire
Infos : serviceformation@africacomputing.org
Africa Computing
Reproduction totale ou partielle autorise avec mention de la source.
Africa Computing est un organisme de formation professionnelle
Dclaration DDTEFP n93 13 10226 13.
1
PLAN DE LA FORMATION
1. RAPPELS SUR LE FONCTIONNEMENT D'INTERNET
1.1. INTERNET : COMMENT A MARCHE ?
1.2. COMMENT RETROUVER L'INFORMATION SUR INTERNET ?
1.3. QU'EST CE QU'UNE PAGE WEB ? INTRODUCTION AU LANGAGE HTML
2. INTRODUCTION LA CRATION DE PAGES WEB
2.1. QUESTIONS SE POSER AVANT DE COMMENCER LA RALISATION D'UN
SITE
2.2. LA CONCEPTION DE SITES WEB
2.3. HTML HYPERTEXT MARKUP LANGUAGE
2.4. HTML 3
2.5. VOTRE PREMIRE PAGE WEB AVEC NOTEPAD
2.6. LA CONCEPTION BASIQUE DE PAGES WEB AVEC DREAMWEAVER
2.7. LE CONCEPT DE MODLE
3. UTILISATION D'ADOBE PHOTOSHOP
3.1. LANCEMENT DE L'APPLICATION
3.1.1. Les Prferences
3.1.2. Introduction aux calques
3.1.3. Les outils et leurs utilisation
4. RFRENCEMENT D'UN SITE WEB
4.1. LE RFRENCEMENT
4.1.1. Moteurs de recherche et annuaires
4.1.2. Pourquoi ne pas utiliser les outils de rfrencement automatique ?
4.1.3. O rfrencer votre site ?
4.2. POSITIONNEMENT DANS LES MOTEURS DE RECHERCHE
4.2.1. Les balise mta / Meta tags
4.3. TRUCS ET ASTUCES
4.4. VRIFIER ET SUIVRE LE RFRENCEMENT
5. INTRODUCTION LA CRATION DE PAGES DYNAMIQUES
2
5.1. INTRODUCTION
5.2. LE LANGAGE DE SCRIPTS PHP
5.2.1. Installer le trio Apache/PHP/MySQL
5.2.2. Prprocesseur Hypertext
5.2.3. Fonctionnement
5.2.4. Un exemple simple de page dynamique
5.3. BASE DE DONNES MYSQL
5.4. INTERFACER UNE BASE DE DONNES MYSQL GRCE AU LANGAGE DE
SCRIPTS PHP
5.4.1. Connection une base de donnes MySQL
5.4.2. Lire les donnes d'une table et afficher les rsultats
5.4.3. Utiliser phpMyAdmin pour grer sa base de donnes
5.4.4. Recueillir les informations enregistrer dans la base
5.4.5. Enregistrer ces donnes dans la base de donnes
5.5. UTILISATION PRATIQUE DE PHP/MYSQL
5.5.1. Installer un forum sur son site personnel
5.5.2. Installer le systme de publication SPIP
6. UTILISATION DU SYSTME DE GESTION DE CONTENU SPIP
6.1. POURQUOI UTILISER SPIP ?
6.1.1. Les systmes de gestion de contenu Web
6.1.2. Positionnement de SPIP parmi les diffrents CMS
6.2. A LA DCOUVERTE DE SPIP
6.2.1. Articles, rubriques et arborescence d'un site SPIP
6.3. INTRODUCTION PAR LA PRATIQUE LA CONCEPTION DE SQUELETTES
SPIP
6.3.1. Un peu de thorie pour commencer !
6.3.2. Premiers squelettes : des boucles et des balises
6.3.3. Les diffrentes balises autorises dans les boucles RUBRIQUES,
ARTICLES et BREVES
6.3.4. Les diffrentes conditions (critres de slection) autorises dans les
boucles
6.3.5. Syntaxe complte des balises SPIP
7. ANNEXES
7.1. INTRODUCTION LA CRATION DE PAGES DYNAMIQUES
7.1.1. Installation et mise jour du forum phpBB
7.1.2. Paramtres des principaux hbergeurs
3
Africa Computing
Reproduction totale ou partielle autorise avec mention de la source.
4
1. RAPPELS SUR LE FONCTIONNEMENT D'INTERNET
1.1. INTERNET : COMMENT A MARCHE ?
Qu'est ce que l'Internet ?
Internet est un rseau d'ordinateurs interconnects rpartis sur la planete ou plus exactement un rseau de rseaux.
Du fait qu'il relie une multitude de rseaux rgionaux, gouvernementaux et commerciaux, Internet est le plus grand
rseau informatique de la plante. Tous ces rseaux discutent entre eux par le biais du mme protocole de
communication appel TCP/IP (Transmission Control Protocol/ Internet Protocol).
Quel est le rle des adresses IP ?
Afin de distinguer les millions d'ordinateurs connects en permanence dans le monde, chaque ordinateur reli
Internet dispose d'une adresse diffrente nomme adresse IP. Une adresse IP joue le mme rle qu'une adresse
postale : chaque ordinateur reli au rseau dispose d'une adresse unique qui lui est propre (pour tre prcis, une
adresse IP est associ non pas un ordinateur mais une carte rseau).
Une adresse IP (IP signifiant Internet Protocol) est reprsente sous la forme de chiffres successifs tels que par
exemple 217.12.3.11
Quel est le rle des FAI ?
FAI est l'acronyme de Fournisseur d'Accs Internet. On trouve galement la notation anglosaxonne ISP pour
Internet Service Provider.
Etant donn que votre ordinateur n'est pas reli en permanence au rseau Internet, vous ne disposez pas d'une
adresse IP. Le fournisseur d'accs a pour rle de vous attribuer une adresse IP afin que vous soyez visible sur le
rseau Internet. Comment cela se passe ?
Vous modem compose le numro de tlphone de votre FAI ; 1.
Une fois la connexion tablie, votre FAI vrifie que votre login et votre mot de passe sont bien corrects,
c'est dire que vous tes effectivement abonn au service ;
2.
Votre FAI qui dispose d'un ensemble d'adresses IP regarde si une adresse IP est libre et si c'est le cas vous
attribue une adresse IP.
3.
Losrque vous vous dconnectez, votre adresse IP est nouveau libre et votre FAI pourra alors l'attribuer
un autre de ses clients.
4.
Pour rsumer : l'ordinateur de votre FAI est physiquement reli au rseau Internet et vous attribue une adresse IP qui
vous permet d'tre visible par le reste du monde.
Le concept de serveur :
Vous tes reli au rseau mais il s'agit maintenant de faire circuler l'information. La faon la plus rpandue pour
faire communiquer est le modle clientserveur : le programme client effectue une demande (par exemple je
voudrais le fichier nomm logo.gif) au programme serveur qui se charge de le retrouver et de le lui envoyer.
Quant au chemin utilis pour faire circuler l'information entre le serveur et le client (vousmme), il est bas sur le
protocole TCP (Transfert Communication Protocol) mais c'est une autre histoire et si vous souhaitez en savoir plus,
rfrez vous un cours rseau.
Quel est le rle des DNS ?
(c) Africa Computing 5 sur 63 http://www.africacomputing.org
Seules les adresses IP tant visibles sur le rseau Internet, pour pouvoir communiquer avec un quelconque serveur,
il faudrait connatre son adresse IP. Etant donn qu'il n'est pas facile de mmoriser des sries de chiffres, il existe un
systme de correpondance entre les adresses IP et des chanes de caractres appeles noms de domaine. C'est le rle
des DNS (Domain Name Server) d'effectuer cette correspondance entre adresses IP et chanes de caractres.
Normalement pour accder au serveur d'Africa Computing, il faudrait tapper http://66.107.40.195 mais grce au
systme des noms de domaine, on peut remplacer cette adresse IP par http://www.africacomputing.org
Bien plus facile mmoriser non ?
Le systme des noms de domaine est un systme hirarchis. En fait un nom de domaine est compos d'un nom et
d'un domaine de tte : africacomputing tant le nom et org le domaine de tte ou TLD (Top Level Domain).
On trouve 2 catgories de domaines :
les domaines dits gnriques tels que .org (organization / association), .net (network / ce qui a trait au
rseau), .com (commerciale), .edu (education), .mil (militaire), etc...

les noms de domaines gographiques tels que .fr pour la France, .bf pour le Burkina Faso, .ne pour le le
Niger, etc...

Le systme des noms de domaines tant hirachis sour la forme d'une arborescence, un nom de domaine peut tre
dclin en sous noms de domaines par exemple www.africacomputing.org ou mail.africacomputing.org ou encore
toto.tata.titi.africacomputing.org
Historiquement et par convention on trouve souvent www avant le nom de domaine en rfrence l'acronyme
World Wide Web mais aujourd'hui sauf erreur de la part de l'administrateur du serveur on peut accder n'importe
quel nom de domaine sans tapper les fameux www !
Qu'est ce qu'une URL ?
Une adresse Internet ou URL (Uniform Resource Locator) est compose d'un nom de domaine prcd par le nom
du protocole de communication utilis pour dialoguer avec le serveur (tel que http:// pour le web, ftp:// pour le
t r ansf er t de f i chi er , news : / / pour l e syst me de news, et c. . ) . Une URL est donc de l a f or me
http://www.africacomputing.org
1.2. COMMENT RETROUVER L'INFORMATION SUR INTERNET ?
Les annuaires de recherche tels que Yahoo (http://www.yahoo.org) ou l'Open Directory Projet ODP
(http://www.dmoz.org) pour lesquels le classement s'effectue par une hirarchie de rubriques et la validation
d'un site s'effectue par des contributeurs humains ;

Les mtamoteurs de recherche tels que Google (http://www.google.fr) ou Altavista
(http://www.altavista.fr) dont le fonctionnement est entirement automatis et la validation d'une URL
propose s'effectue par des robots de recherche ;

Les liens de site en site,
Les mdias publicitaires traditionnels (journaux, prospectus, tlvisions, radios, etc..)
1.3. QU'EST CE QU'UNE PAGE WEB ? INTRODUCTION AU LANGAGE HTML
Qu'est ce qu'une page HTML ?
Une page WEB est une page mise en forme avec des liens hypertextes. La mise en forme d'une page repose sur le
HTML, ce qui signifie Hyper Text Makup Language.
Une page HTML est en fait un simple fichier texte qui est dlivr par un serveur HTTP (Hyper Text Transfer
Protocol). Votre navigateur Internet fait office de client et c'est lui qui a la charge d'interprter les pages HTML. A
noter que lorsque vous concevez une page HTML, si vous voulez tre certain que n'importe quel navigateur
(Netscape, Internet Explorer, Mozilla, Opera, Neoplanet) sera capable d'interprter correctement votre page, vous
devez respecter les normes du consortium W3 (http://www.w3.org).
Syntaxe gnrale du HTML :
Le langage HTML est un langage balises (ou tags dans l'quivalent anglosaxon). Une balise est un marqueur qui
permet d'indiquer l'action associer un mot ou un groupe de mots. Par exemple, pour que le mot Africa
Computing soit visible partir d'un navigateur Web, il suffit d'crire Africa Computing.
De f a o n g n r a l e l e s c o mma n d e s c o n t e n u e s d a n s u n f i c h i e r HTML s o n t d e l a f o r me :
<balise>texte</balise> , ou encore : <balise attribut=argument>texte</balise>.
La plupart du temps, chaque fois qu'on utilise une balise ouvrante , elle doit tre suivie d'une balise fermante (il y a
quelques exceptions tels que par exemple la balise qui signifie retour la ligne).
Prcisons que les noms de balises sont identiques en majuscules ou minuscules : quivaut .
On peut attribuer plusieurs attributs la mme balise par la syntaxe suivante (typiquement pour la balise ) :
<balise attribut1=argument1 attribut2=argument2>texte</balise>
Votre premire (et dernire) page HTML avec un simple diteur de texte :
Lancez un bloc note (notepad) et saisissez les lignes suivantes :
<html>
Ceci est mon premier essai de page HTML
</html>
puis enregistrez ce fichier dans un rpertoire ddi vos premiers essais sous l' extension .htm ou .html
(historisquement l'extention du HTML est .html mais du fait que le DOS et donc les premires versions de Windows
ne graient que 3 lettres pour les extensions, on trouve galement l'extension .htm). Lancez ensuite votre fichier
avec votre navigateur prfr pour visualiser le rsultat.
Afin que votre navigateur sache qu'il a affaire une page HTML (et non pas par exemple un simple fichier texte), une page HTML commence toujours par la
balise ouvrante <html> pour se terminer par la balise fermante </html>.
Editez nouveau le fichier que vous venez de crer et essayer quelques variantes. Par exemple ajoutez <a
href="http://wwww.google.fr">Ceci est un lien</a> ou <img src="logo.jpg"> (en
prenant soin de disposer au pralable du fichier logo.jpg dans le mme rpertoire).
Du fait que le Web est utilis internationalement, il n'est pas possible de saisir directement des caractres accentus
dans une page HTML. Pour crire par exemple le mot lphants, il faut saisir éléphants (le
symbole tant cod par l'quivalent HTML é .
Comme vous pouvez le constater, le langage HTML c'est pas sorcier ! Mais c'est assez rbarbatif et peu lisible
(difficile de reprer une faute d'orthographe directement dans le code HTML !). De plus, si vous souhaitez effectuer
des mises en forme complexe afin de raliser un site Web aux allures professionnels, il devient quasiment
impossible de s'en sortir uniquement avec un simple diteur de texte. C'est pour cela que nous allons abandonner
l'usage d'un diteur de texte pour utiliser plutt des logiciels tels que DreamWeaver qui permettent de rendre la
conception de pages proches de la mise en forme de documents tels que Word ou PageMaker (logiciel utilis pour
mettre en page les magazines).
Donc inutile de coder directement du HTML, l'essentiel tant de pouvoir recourir un manuel de rfrence du
HTML pour pouvoir comprendre le source afin de dbuguer des anomalies rencontres avec votre diteur HTML.
2. INTRODUCTION LA CRATION DE PAGES WEB
2.1. QUESTIONS SE POSER AVANT DE COMMENCER LA RALISATION D'UN SITE
Avant toute chose il faut savoir quoi va servir votre site web, autrement dit comment allezvous utiliser le
mdia Internet ?
Il existe diffrents types de sites qu'on peut classer en trois grandes catgories :
Les sites vitrines : Ce sont des sites qui servent de carte de visite amliore, ou de book en ligne.
Gnralement, l'aspect graphique du site est privilgi au contenu, la frquence de mise jour est assez
rduite et le site est gr par une seule personne. La fonction essentielle de ce genre de sites est d'tre
prsent sur Internet et de rendre accessible son travail ou autre l'ensemble des internautes...

Les sites marchands : Ce sont des sites de vente en ligne, gnralement de grosses centrales de vente,
spcialises dans diffrents domaines, par exemple amazon.fr. Ces sites sont gnralement grs par un ou
plusieurs webmestres, et reposent sur l'emploi de bases de donnes et de systmes comme le paiement
scuris, la gestion de comptes clients etc. Gnralement le graphisme est assez simple et le contenu mis en
avant.

Les webzines : Ce sont des sites fort contenu rdactionnel (presse lectronique, sites communautaires...)
qui sont grs et mis jour par diffrentes personnes, ayant des statuts diffrents. On parle soit de rdacteur,
soit d'administrateur, avec des restrictions en fonction du statut. On peut comparer ce genre de site une
application en ligne, qui gnre automatiquement les pages du site sans avoir de connaissances pousses sur
la cration de site Internet.

Avant de prendre une dcision sur le type de site que vous allez dvelopper, il est conseill d'aller voir ce qui se fait
sur Internet, par les autres structures ou organismes qui travaillent dans le mme domaine que vous. On appelle cela
une tude concurrentielle, cela vous permettra d'avoir une vision plus concrte de ce que vous allez intgrer dans
votre site et les diffrents moyens techniques mettre en oeuvre.
Quel type de contenu allezvous intgrer dans votre site ?
Un site web se construit en fonction de son contenu. Il faut savoir de quels types de documents vous disposez pour
alimenter votre site. Cela peut tre du texte, des images, des animations, de la vido ou du son.
Sous quelles formes sont ces donnes ?
CDrom, disquette, papier, photos, etc. Cela vous permet d'estimer le temps ventuel de numrisation des donnes.
Comment classer et ordonner ces donnes pour les rendre facilement accessibles ?
Il faut dfinir des rubriques dans lesquels vous allez rpartir le contenu en fonction du type ou du sujet. C'est ce
qu'on appelle l'arborescence du site. Cette partie est trs importante. Vous devez organiser votre contenu de manire
logique, il faut que les internautes puissent accder l'information le plus rapidement et le plus simplement possible,
sans tres perdus au bout de trois clics (voir Dfinir la structure du site).
qui s'adressent votre site et son contenu ?
Savoir qui vous vous adressez est primordial pour dfinir un certain nombre d'lments lis l'aspect graphique et
au ton rdactionnel qu'il convient d'employer. Par exemple si vous concevez un site destin la musique visant une
publique jeune, avec des images, des vidos et du son comme contenu, vous pouvez vous permettre d'utiliser un
graphisme dynamique, recherch, avec des couleurs vives, des animations etc. Vous pouvez aussi employer un ton
rdactionnel plus amicale, voire humoristique. Par contre s'il s'agit d'un site d'information par exemple, visant une
public adulte avec essentiellement du texte et des images comme contenu, le graphisme sera trait plus sobrement
pour mettre en avant le contenu. Le ton rdactionnel sera beaucoup plus classique, le but tant d'aller l'essentiel : le
fond.
Quelle sera la frquence des mises jour ? Dans quelles parties du site ? Qui sera responsable des mises
jour ?
Il est conseill de dfinir les parties ou rubriques du site qui vont tre souvent modifies. Par exemple la rubrique
Prsentation dont le but sera de prsenter l'organisme ou le site ne changera pas souvent, tandis que la rubrique
Actualit, devra tre mise jour rgulirement. Le fait de dfinir ainsi des parties distinctes mettre jour, permet
d'une part d'avoir une notion du travail d'entretien qu'il va falloir effectuer et d'autre part d'estimer quelle sera la
frquence des mises jour. Vous pouvez fixer par exemple une mise jour du site tout les quinze jours. Il est
important que les internautes puissent connatre la frquence des mises jours pour savoir quand revenir et avoir
accs aux nouveauts, ce qui permet d'en fidliser un certain nombre. Serezvous la personne qui va mettre le site
jour ? Ou bien ce sera le propritaire du site ? Ou encore diffrentes personnes qui travaillent pour le site ? La
rponse ces questions est primordiale pour savoir dans quelle optique vous allez travailler. Cela vous permettera
de savoir quels type d'outils et de technologie vous allez utiliser ainsi que la manire de prsenter votre contenu.
Dfinir la structure du site
En rgle gnrale dfinir la structure du site ou l'arborescence, c'est dfinir comment les internautes vont accder au
contenu. La structure que l'on retrouve le plus souvent est :
Page d'accueil, c'est la premire page du site, cette page renvoie sur les diffrentes rubriques contenues dans le
site.
Page prsentation, page servant prsenter le site et son contenu.
Pages rubrique, ce sont les autres rubriques du site.
Page contact, pour que les internautes vous contactent, soit par mail soit par voie classique.
La prsentation la plus classique est un bandeau de titre en haut, un menu de navigation gauche, et un menu de
navigation en bas avec le contact.
Dfinir la charte graphique du site
C'est l'laboration et la description des diffrents lments graphiques qui composent l'aspect de votre site Internet.
L'ensemble comprend le logo, une bannire, les boutons, les enttes, les images, les couleurs, les polices de
caractres utilises, le systme de navigation. Elle se doit d'tre uniforme, afin de donner une image cohrente de
votre site et de renforcer l'originalit et la crdibilit de ce qui va tre prsent sur le site. On peut adapter une charte
graphique papier l'Internet, en reprenant le logo, les couleurs du logo, la typo utilise, etc. Le graphisme est un
lment important pour la frquentation de votre site et la comprhension de votre contenu. Quand vous recherchez
une information sur Internet, vous obtenez une multitude de rponses. Le graphisme peut tre un lment dcisif
dans le choix de l'internaute.
2.2. LA CONCEPTION DE SITES WEB
Il existe deux mthodes complmentaires qui permettent de crer des sites Web :
Le code HTML brut est celle qu'il faut connatre en premier lieu. Le webmestre tape le code HTML dans un
diteur de textes, et connat les balises qui composent sa page. Il est capable de mettre le site jour et faire
des modifications partir de n'importe quel ordinateur connect Internet. En cas de problme, il sait
corriger les erreurs. De plus, le code gnr est clair et lger.

Les diteurs WYSIWYG (What You See Is What You Get ce que vous voyez est ce que vous obtenez. La
conception est facilite puisqu'on voit l'aspect de la page au fur et mesure qu'elle est construite), qu'ils

soient commerciaux (DreamWeaver) ou libres (Amaya) permettent de faciliter la conception une fois qu'on
connat les bases de la programmation HTML. Le code gnr est plus lourd et difficile comprendre, bien
que les versions rcentes de ces logiciels ne posent plus ce problme.
2.3. HTML HYPERTEXT MARKUP LANGUAGE
Prsentation du HTML
Le HTML est un systme qui formalise l'criture d'un document avec des balises de formatage indiquant la faon
dont doit tre prsent le document et les liens qu'il tablit avec d'autres documents. Il permet, entre autres, la
lecture de documents sur Internet partir de machines diffrentes grce au protocole HTTP. En effet le Web est une
norme archive vivante de textes formats, d'images, de sons, de vido... Ces documents sont organiss autour d'une
page d'accueil qui guide les visiteurs vers d'autres pages HTML grce des liens hypertexte.
Le HTML est un langage balises
Le HTML n'est pas un langage de programmation, c'est un simple fichier texte contenant des balises permettant de
mettre en forme le texte, les images... Une balise est une commande (un nom) encadre par le caractre infrieur <
et le caractre suprieur > par exemple <H1>.
Le HTML est un langage statique
Le contenu d'une page HTML ne dpend pas d'un contexte spcifique. C'est toujours le mme tant que le webmestre
ne fait pas de modification (mise jour) : on dit qu'une page HTML est statique. Une page HTML a toujours
l'extension .htm ou .html, on peut reconnatre les pages dynamiques grce leur extension (.php ou .php3 pour les
pages crites en PHP (Processeur HyPertexte (http://www.php.net) est un langage de scripts ct serveur (c'est le
serveur qui interprte le script, et le transforme en langage HTML pour tre lu par le client) par exemple).
2.4. HTML 3
Un document HTML a toujours la structure suivante :
<HTML>
<HEAD>
<TITLE>
Titre de la page
</TITLE>
|
| (balises d'entte)
|
</HEAD>
<BODY>
|
| (corps de la page)
|
</BODY>
</HTML>
Balises d'entte
En plus de la balise de titre, on place dans la balise d'entte (entre <HEAD> et </HEAD>) les balises META et les
fonctions de script.
Balise de titre le texte plac entre <TITLE> et </TITLE> sera le nom de la fentre du navigateur (texte
de la barre de titre)

Balises META ce sont des balises destines aux robots. Par exemple, on peut mettre une description, des
motscl, le nom de l'auteur du site afin de rfrencer son site dans les moteurs de recherche tels que
http://google.fr automatiquement.

Fonctions de script il est possible d'crire des scripts ct client en utilisant un langage tel que javascript
afin de dynamiser le site web.

Corps de la page
C'est le contenu de la page Web. Tout ce qu'on y crit est affich ou interprt sur la page. Si on place du texte brut,
il est affich tel quel. Les retours la ligne sont considrs comme les espaces ; et plusieurs espaces quivalent un
seul.
On utilise les balises pour la mise en forme.
Les balises de base
Une balise est entre signes infrieur < et suprieur > , par exemple . Il faut fermer certaines balises l'aide du
signe slash, par exemple .
 retour la ligne
<! commentaires >
texte texte est un paragraphe. La fermeture de cette balise est facultative. Les
paramtres (facultatifs) peuvent tre :
ALIGN="left|center|right|justify" alignement gauche, au centre, droite ou
justifi ( gauche et droite)

TITLE="texte" texte de l'infobulle qui apparat lorsqu'on place la souris sur le paragraphe

texte formate texte en gras
texte formate texte en italique
texte souligne texte
Texte en indice Texte indice
Texte en exposant Texte exposant
texte formate texte selon les paramtres :
FACE="police" dtermine la police
SIZE="taille" dtermine la taille (2 7)
COLOR="couleur" dtermine la couleur :
soit par un nom de couleur en anglais (red, lightblue, darkgray)
soit par un code de couleur #RRVVBB o RR est l'intensit du rouge en code hexadcimal,
VV du vert et BB du bleu. Exemple : #FF0000 correspond une intensit FF (soit 255) en
rouge, 0 en vert et 0 en bleu, ce qui donne rouge pur.

2.5. VOTRE PREMIRE PAGE WEB AVEC NOTEPAD
A l'aide d'un diteur de textes simples tel que le Notepad (Blocnotes), nous allons voir le contenu d'une page
HTML. Crez une page vierge, puis tapez le code suivant :
<HTML>
<HEAD>
<TITLE>Mon site personnel</TITLE>
</HEAD>
<BODY>
Bienvenue sur mon site personnel
</BODY>
</HTML>
Vous obtenez une page trs simple avec simplement le texte Bienvenue sur mon site personnel. Vous pouvez
constater que la conception de pages web serait rapidement trs rbarbative si nous ne disposions pas de logiciels
WYSIWYG tels que DreamWeaver.
2.6. LA CONCEPTION BASIQUE DE PAGES WEB AVEC DREAMWEAVER
Nous allons utiliser DreamWeaver afin de crer la mme page web. Vous pouvez constater qu'il suffit de cliquer sur
la page et d'crire le texte pour qu'il s'affiche tel que vous l'obtiendrez dans votre page web.
La structure classique d'un site web est un tableau de 3 lignes. La hauteur de ce tableau doit tre dfinie 100% de
la taille de l'cran afin d'tre extensible et indpendante de la rsolution de l'utilisateur.
Cliquez sur Insrer puis Tableau. Choisissez 3 lignes, puis cliquez sur OK.
Cliquez dans le tableau qui apparat avec le bouton droit de la souris. Choisissez Tableau puis Slectionner le
tableau
Dans la zone hauteur (H), tapez 100 puis choisissez % dans la liste afin que le tableau occupe 100% de la hauteur de
l'cran. Vous pouvez aussi choisir une nouvelle couleur d'arrireplan.
Vous pouvez remarquer que le tableau n'occupe pas toute la taille de l'cran. C'est cause des marges. Cliquez sur
Modifier puis Proprits de la page afin de les rgler 0 comme indiqu sur la figure suivante. Profitezen pour
modifier le Titre de la page (qui apparatra dans la barre de titre de la fentre du navigateur).
Nous allons maintenant taper le titre dans la premire ligne ; et les contacts dans la dernire ligne du tableau.
Cliquez dans la premire ligne. Rglez la hauteur de la cellule 60 pixels. Choisissez une couleur de texte et rglez
la taille 7, choisissez l'alignement centr puis tapez votre texte : Mon site personnel.
Recommencez dans la 3me ligne en tapant le nom de l'auteur. Vous choisirez la taille de texte 2 points et une
hauteur de cellule 15 px.
La ligne du milieu est celle o vous allez taper votre texte. Tapez le texte suivant :
Je m'amuse avec DreamWeaver C'est trs amusant
Cliquez sur Fichier puis sur Aperu dans le navigateur et choisissez un navigateur afin de voir un aperu de votre
page. Si aucun navigateur n'apparat dans la liste, cliquez sur Dfinir les navigateurs et choisissez un navigateur
pour afficher un aperu. A l'avenir, vous pourrez cliquer sur la touche F12 pour cela.
Il est intressant de redimensionner la fentre de votre navigateur afin de bien comprendre l'effet de la taille du
tableau rgle 100% en hauteur comme en largeur. C'est de cette faon qu'on rend un site indpendant de la
rsolution de l'utilisateur. Il faut prvoir en rgle gnrale que l'utilisateur utilise une rsolution de 800x600 ou plus,
donc concevoir son site pour fonctionner en 800x600.
Pour afficher un menu gauche dans le tableau, il suffit de cliquer avec le bouton droit dans la 2me ligne puis de
choisir Tableau > Ajouter une colonne. Redimensionnez la nouvelle colonne puis tapez texte suivant :
Accueil Prsentation Contact
Enregistrez votre travail (Fichier > Enregistrer ou Ctrl+S), enregistrezle dans le rpertoire formation dans Mes
documents et appelezle index.html.
Crez un nouveau fichier (Fichier > Nouveau ou Ctrl+N), tapez Prsentation du site en construction puis
enregistrez dans le mme dossier sous presentation.html
Attention : ne mettez jamais d'accent ni de caractres spciaux dans un nom de fichier ou de rpertoire faisant partie
d'un site web.
Maintenant, ouvrez de nouveau index.html. Slectionnez Prsentation et tapez presentation.html dans la zone lien.
Validez en appuyant sur Entre. Le texte du lien est soulign. Le mot Prsentation est maintenant un lien vers le
fichier presentation.html.
Pour cela, il est aussi possible de cliquer sur l'icne en forme de dossier jaune et de parcourir les fichiers la
recherche de celui dsir presentation.html.
Rendez vous dans le rpertoire Mes documents\Formation puis doublecliquez sur l'icne du fichier index.html.
Essayez le lien. Vous remarquez que le curseur de la souris se transforme en main au passage sur le texte du lien.
Cliquez pour afficher le fichier presentation.html.
Exercice 1
Construisez un site de 3 pages contenant les rubriques Accueil, Prsentation et Contact partir de cette structure.
Exercice 2
Ajoutez maintenant un menu de navigation dans la 3me ligne sous la forme d'une ligne de liens du type :
Accueil :: Prsentation :: Contact dans chaque page de votre site.
2.7. LE CONCEPT DE MODLE
Imaginez qu'on veuille maintenant ajouter une rubrique Actualits. Il va falloir modifier les 2 menus de navigation
pour chaque page Cela deviendrait vite pnible sur un site comportant plusieurs dizaines de pages !
Nous allons voir la notion de modles qui permet d'utiliser un gabarit dans lequel seules les zones modifiables
changeront. Les modles permettent de sparer le fond de la forme, puisqu'une modification du modle affecte
toutes les pages.
Dfinir un site
Tout d'abord, nous allons dfinir le site dans lequel nous allons travailler.
Cliquez sur Sites > Modifier les sites et choisissez Nouveau dans la boite de dialogues.
Les seules valeurs changer sont le nom du site (Site avec modle) et le dossier racine local (crez un sous
rpertoire modele).
Cliquez sur OK puis sur Termin. Crez un nouveau fichier comportant :
Un tableau de hauteur et largeur 100% compos de 3 lignes et 1 colonne, de fond ple.
Un tableau de hauteur et largeur 100% compos d'1 ligne et de 2 colonnes
Un titre et des marges de 0
Tapez un titre et les 2 menus de navigation avec les 3 rubriques de l'exercice 1 (un menu gauche et un en bas).
Nous allons dfinir cette page comme modle. Cliquez sur Fichier > Enregistrer comme modle. Tapez le nom
modele dans la boite de dialogue, puis cliquez sur OK.
Choisissez la zone modifiable (ligne 2, colonne 2) puis cliquez sur Modifier > Modles > Marquer la slection
comme modifiable. Tapez corps puis cliquez sur OK.
Note : partir de la version MX, la procdure pour crer une rgion modifiable est de cliquez successivement sur
Insertion > Objets de modle > Rgion modifiable.
Enregistrez puis cliquez sur Fichier > Nouveau partir du modle. Choisissez le modle modele puis cliquez sur
OK.
Crez vos 3 fichiers accueil.html, presentation.html et contact.html sur ce modle. Ajoutez maintenant la rubrique
Actualits et le fichier actualites.html bas sur ce modle. Vous devez modifier le modle. Lorsqu'il vous proposera
de mettre les fichiers jour, cliquez sur Mettre jour afin que les modifications soient prises en compte par tous les
fichiers utilisant ce modle. Constatez les rsultats dans le rpertoire modele
3. UTILISATION D'ADOBE PHOTOSHOP
3.1. LANCEMENT DE L'APPLICATION
Au premier dmarage, photoshop affiche la qausi totalit des outils et palettes (img 01)
img 01
il est prfrable de rorganiser son space de travail,et d'avoir sous la main les lements que vous utiliserez le plus
souvent, il vous suffit pour cela dplacer les palettes l'aide de la souris et de les positionnes dans les fentres de
votre choix.(img 02)
img 02
3.1.1. Les Prferences
De nombreuses options de programme sont enregistres dans le fichier Prfs Adobe Photoshop.psp (Windows) ou
Prfs Adobe Photoshop (Mac OS) dans le dossier Paramtres Adobe Photoshop. Les paramtres enregistrs dans ces
fichiers contiennent des options gnrales d'affichage, d'enregistrement de fichiers, de curseurs, de transparence,
ainsi que des options pour les modules externes et les disques de travail. La plupart de ces options sont prsentes
dans des botes de dialogue accessibles partir du sousmenu Prfrences du menu "Edition" (img 03).
img 03
Les prfrences dfinies sont enregistres chaque fois que vous quittez l'application.
01 ENREGISTREMENT DES FICHIERS :(img 04) Prmet de rgler les options d'enregistrement.
img 04
02AFFICHAGE ET POINTEURS :(img 05) Prmet de dfinir des options d'affichage en plus, ainsi que de
choisir une forme de pointeurs d'outils.
img 05
03TRANSPARENCE ET COULEURS NON IMPRIMABLES :(img 06) Pour dfinir la couleurs et la
transparence des calques, ainsi que la couleur de mise en vidence des couleurs non imprimables.
img 06
04UNITES ET REGLES :(img 07) Prmet de choisirs l'unit des rgles, du texte, ainsi que l'quivalence entre
certaines units.
img 07
05REPERES ET GRILLE :(img 08) Dfinie les options des repres et de la grille.
img 08
06MODULES EXTERNES ET DISQUES DE TRAVAIL :(img 09) Choix des disques de travail et dfinition
du dossier des modules externes.
img 09
07MEMOIRE CACHE :(img 10) Niveaux de la mmoire cache alloue aux histogrammes.
img 10
3.1.2. Introduction aux calques
Les calques vous permettent d'apporter des changements une image sans modifier les donnes de l'image d'origine.
Ils peuvent tre compars des vrais feuilles de calques empiles les unes sur les autres, contenant chacun unes un
lment graphique. Le tout agencs sur un format dfini de manire composer un visuel cohrent avec les
diffrents calques.
Principe de fonctionnement
Tous les calques d'un fichier ont la mme rsolution, contiennent initialement le mme nombre de couches et ont le
mme mode colorimtrique (RVB, CMJN ou Niveaux de gris). Les zones transparentes d'un calque laissant
transparatre les calques du dessous. Vous pouvez dessiner, diter, coller et repositionner des lments sur un calque
sans altrer les autres. Tant que vous ne combinez pas ou que vous ne fusionnez pas les calques d'une image, chacun
d'eux reste indpendant des autres. Par consquent, vous avez toute latitude de faire diffrents essais de graphiques,
de texte, d'opacit et de modes de fusion. Photoshop prend en charge les calques normaux et les calques de texte.
Vous pouvez appliquer des effets sophistiqus aux calques l'aide de masques de fusion, de masques de calque et
de styles de calque.
3.1.3. Les outils et leurs utilisation
On peut classer les outils en 4 catgories : (img 11)
img 11
La petite flche situe en bas droite (img 12) sur certains outils signifie qu'il y a d'autre outils contenus dans cette
fentre.
img 12
Pour les faire apparaitre cliquez dessus en maintenant le clic.(img 13)
img 13
1.Les outils de navigation :
Main : Permet de dplacer une image l'intrieur de la fentre.
Main (H)
Dplacement : Permet de dplacer des slections, des calques et des repres.
Dplacement (V)
Loupe : Permet d'agrandir et de rduire l'affichage d'une image.
Loupe (Z)
2.Les outils de slction :
Rectangle et ellipse de slection : Permettent de tracer des rectangles et des ellipses de slection, ainsi que de
slectionner une seule range ou une seule colonne.
Rctangle de slction (M)
Lasso : Permettent d'effectuer des slections de forme libre, polygonales (bords droits) et magntiques.
Lasso de slection (L)
Baguette magique : Permet de slectionner des zones de couleur identique.
Baguette magique (W)
Plume : Permet de raliser des tracs aux contours lisses.
Plume (P)
Recadrage : Permet de recadrer des images.
Recadrage (C)
3.Les outils de dessin :
Pinceau / Crayon : Permet d'appliquer une couleur par touches successives.
Permet de tracer des contours aux bords nets.
Pinceau / Crayon (B)
L'Arographe : Permet de dessiner des tracs aux contours peu marqus.
Arographe (J)
Pot de peinture / Dgrad : Permet d'appliquer la couleur de premier plan des zones de mme couleur.
Permettent de crer des dgrads ou des transitions linaires, circulaires, inclines, rflchies et en forme de
losange entre les couleurs.
Pot de peinture / Dgrad (G)
La Gomme : Efface des pixels et annule les modifications effectues sur l'image depuis le dernier enregistrement.
Gomme (E)
Pipette : Permet de prlever les couleurs d'une image.
Pipette (I)
Texte : Permet d'insrer du texte dans une image.
Texte (T)
4.Les outils d'ffets d'image :
Goutte d'eau / Nettet / Doigts : Permet d'accentuer le flou des contours de l'image.
Permet d'accentuer la nettet des contours flous de l'image.
Permet d'taler des couleurssur une image.
Goutte d'eau / Nettet / Doigts (R)
Tampon de duplication : Permet de slectioner une zone d'image et de la duplique.
Tampon de duplication (S)
(...) = Racourcis clavier.
Les options Barre d'options : La plupart des outils disposent d'options qui s'affichent dans la barre d'options
d'outils. La barre d'options est contextuelle et change selon l'outil slectionn. Certains paramtres dans cette barre
sont communs plusieurs outils (tels que les modes de dessin et l'opacit) ; d'autres ne s'appliquent qu' un seul
outil.
Vous pouvez dplacer la barre d'options n'importe o dans la zone de travail, le plus pratique tant de la placer en
haut ou en bas de l'cran.
Barre d'options
La barre d'options contient une zone rserve dans laquelle vous pouvez stocker plusieurs palettes afin d'y accder
rapidement. Cette zone de stockage de palettes est disponible uniquement lorsque vous utilisez une rsolution
d'cran suprieure 800 pixels x 600 pixels (la rsolution minimal recommande tant 1024 x 768).
Zone rserve
4. RFRENCEMENT D'UN SITE WEB
4.1. LE RFRENCEMENT
Qu'est ce que le rfrencement ?
Le rfrencement consiste inscrire et faire apparatre votre site dans les annuaires et moteurs de recherche Internet.
L'objectif est de permettre un internaute qui ne connait pas votre existence de trouver votre site en tappant un ou
plusieurs mots cls dcrivant le sujet qu'il recherche.
Pourquoi rfrencer votre site ?
L'tape de rfrencement est souvent nglig par les webmestres dbutants. Pourtant quoi peut bien servir un site
aussi fantastique soit il dont personne ne connait son existence ? Publier un site Web sur l'Internet sans le
rfrencer, c'est un peu comme lancer la mer une bouteille contenant un message. Il est possible que quelqu'un
tombe un jour par hasard sur le message, mais la probabilit est trs trs faible.
Les statistiques montrent qu'en gnral 80 % des visiteurs d'un site Web proviennent des moteurs de recherche.
Augmenter le nombre global de visiteurs c'est bien, mais augmenter le nombre de visiteurs pertinents c'est encore
mieux. En effet, il vaut mieux avoir peu de visiteurs bien cibls plutt que beaucoup de visiteurs qui arrivent sur
votre site sans que cela les intresse. Prcisons galement que le rfrencement n'est jamais acquis et qu'il est
cessaire de s'assurer priodiquement de la prsence et du positionnement d'un site.
Dans cette section, nous allons tudier comment rfrencer votre site afin que son classement soit pertinent, c'est
dire bien positionn sur le ou les sujets traits par votre site.
Outre le rfrencement, la promotion peut s'effectuer par les mdias traditionnels et des demandes de liens
Publier un site Internet sert faire la promotion d'une activit. Sans rfrencement, seuls les individus connaissant
dj votre existence visitent votre site, ce qui limite normment la porte de votre site.
Vous pouvez galement faire la promotion de votre site partir de mdias traditionnels (journaux, tlvision, radio)
mais ce type de promotion s'avrant couteux, il est dommage de se priver du rfrencement sur Internet de votre
site. La promotion d'un site Web partir des mdias traditionnels est donc une activit complmentaire au
rfrencement et est rserve des structures disposant de moyens consquents.
N'oubliez pas de mentionner sur vos documents et cartes de visite l'URL de votre site : cela demande peut d'effort et
peut vous assurer des visiteurs supplmentaires.
Enfin, outre le rfrencement et la promotion classique, il ne faut pas ngliger l'tape de demande de liens qui peut
vous apporter de nombreux visiteurs. Ainsi si votre site traite de danse contemporaine, vous avez tout intrt
envoyer un mail auprs de tous les sites spcialiss en danse contemporaine afin d'annoncer votre site. Nul doute
qu'un internaute surfant sur un site spcialis en danse contemporaine sera d'avantage intress par votre site qu'un
autre.
4.1.1. Moteurs de recherche et annuaires
La procdure de rfrencement d'un site diffre selon que vous rfrencez votre site sur un moteur de recherche ou
un annuaire.
Les moteurs de recherche tels que Google ou Altavisa :
Un moteur de recherche est un robot logiciel (aussi appel crawler ou spider) qui scrute le Web, de lien hypertexte
en lien hypertexte, en sauvegardant les pages rencontres dans son "index". les plus gros moteurs comme Google
recensent aujourd'hui environ 1 milliard de pages.
Contrairement aux annuaires, il n'y a aucune intervention humaine sur un moteur, si le site est bien construit, toutes
les pages du site sont indexes par le moteur et sont donc suceptibles d'tre autant de portes d'entres vers votre site
(ce qui implique que les visiteurs n'arrivent pas tous par votre page d'accueil...).
Pour rfrencer un site sur un moteur de recherche, il suffit de reprer le lien Ajouter une URL ou Add an URL puis
de saisir votre URL. Le moteur ajoute ainsi votre URL dans sa base de donnes et une fois disponible il parcourt
tout le site en partant de la premire page et en le parcourant de lien en lien.
Du fait des nombreuses demandes de rfrencement effectu quotidiennement ainsi que du dlai pour mettre jour
sa base, il est ncessaire d'attendre de quelques jours quelques semaines pour que votre site soit rfrenc.
Avantage des moteurs : entirement automatis, les robots permettent d'indexer un trs grand volume de sites Web.
Inconvnient des moteurs : du fait de son automatisation, les robots rfrencent tout et pas forcment du contenu
pertinent. Ainsi des moteurs tels que Altavista ont vu leur succs dcliner du fait qu'ils ont t polus par de
nombreuses pages web (trop d'information nuit l'information). Pour contrer ce problme, les moteurs rivalisent
d'imagination pour utiliser des mthodes permettant d'valuer la pertinence de l'information.
Les annuaires tels que Yahoo ! ou l'Open Directory :
Un annuaire est un outil de recherche qui rpertorie des sites en les classant hirarchiquement dans des rubriques.
Pour permettre ce classement, les demandes de rfrencement sont valids manuellement par des oprateurs
humains. Ainsi si vous voulez rfrencer votre site dans Yahoo, vous devez tout d'abord choisir une ou plusieurs
rubriques dans lequel(s) vous souhaitez que votre site apparaisse.
Avantage des annuaires : L'information est pertinente du fait qu'elle a t valide par un humain. Ainsi si un
internaute se rend dans la rubrique Exploration gographique > Pays > Niger > Institutions et politique, il est assur
de n'obtenir que des sites officiels d'institutions et non pas par exemple une page personnelle mentionnant une
institution nigrienne.
Inconvnient des annuaires :
Volume des pages indexes limit (les oprateurs humains sont moins rapides que les robots pour indexer
des pages).

Drives mercantiles : la plupart des grands annuaires proposent une offre gratuite de rfrencement (sans
aucune promesse de rsultat) et une offre payante (avec promesse de traitement rapide). Ainsi si vous
reprsentez une grande entreprise, il y a fort parier que Yahoo ! ne traitera pas vos demandes de
rfrencement gratuite car ils esprent qu'au bout d'un moment vous vous rabattrez sur l'offre payante.
Exception : l'Open Direction (http://www.dmoz.org) dont le fonctionnement est bas uniquement sur des
contributaires volontaires et bnvoles ce qui permet non seulement l'indexattion de beaucoup plus de pages
que les annuaires commerciaux mais vite galement les tentations mercantiles.

4.1.2. Pourquoi ne pas utiliser les outils de rfrencement automatique ?
Le rfrencement auprs de chaque moteur ou annuaire ncessite de se rendre sur le site correspond, de rechercher
le lien Ajouter une URL puis d'ajouter votre URL. Cela peut paraitre extrmement fastidieux et il en tentant d'utiliser
un outil de rfrencement automatique tel que ceux que l'on trouve dans les rubriques Outils pour webmasters de
nombreux sites. Ces outils tels que par exemple 2001webmaster (http://www.2001webmaster.com) vous promettent
de rfrencer votre site en une seule tape dans 50, 100, voir plusieurs milliers de moteurs de recherche. Ces
services consiste utiliser un logiciel ou un service en ligne pour soumettre un site de nombreux moteurs et
annuaires dans le moindre temps.
Si vous souhaitez bien rfrencer votre site, nous sommes dans le regret de vous annoncer qu'il sera bien plus
efficace d'effectuer un rfrencement manuel dans quelques moteurs bien cibls plutt que de recourir de tels
outils. Pourquoi ?
1) Tout d'abord, parce qu'il ne sert rien de se rfrencer sur tous les moteurs disponibles sur le web car finalement
seule une poigne d'outils de recherche prend en charge 95% des requtes des internautes. Il est donc inutile de se
rfrencer dans des milliers de moteurs (en France, Google draine lui seul prs de 50% des recherches).
2) Les outils de recherche tant parasits par les logiciels de rfrencement automatique, ils luttent contre ces
logiciels. Ainsi si vous vous rendez sur Altavista, vous constaterez que seuls un humain peut effectuer un
rfrencement du fait qu'il faut inscrire dans une case un texte manuscrit et bruit affich l'cran. Pourtant les
rfrenceurs automatiques continuent de proposer le rfrencement dans Altavista...
En conclusion, le taux de rejet des outils de rfrencement automatique est trs important (environ 90%)... donc
oublier ! Mieux vaut donc se rfrencer manuellement dans quelques moteurs de recherche majeurs plutt que de se
rfrencer dans des tas de petits moteurs trs peu utiliss.
Principaux moteurs francophones :
Altavista France (http://www.altavista.fr)
Google France (http://www.google.fr)
Lycos France (http://www.lycos.fr)
Voil (http://www.voila.fr)
Principaux annuaires francophones :
Nomade (http://www.nomade.fr)
Open Directory (http://www.dmoz.fr)
Yahoo ! France (http://www.yahoo.fr)
Principaux moteurs mondiaux :
Altavista (http://www.altavista.com)
Fast (http://www.alltheweb.com)
Google (http://www.google.com)
Principaux annuaires mondiaux :
Open Directory (http://www.dmoz.org)
Yahoo ! (http://www.yahoo.com)
4.1.3. O rfrencer votre site ?
Vous devez rfrencer votre site au moins dans les moteurs et annuaires suivants :
Principaux moteurs francophones :
Altavista France (http://www.altavista.fr)
Google France (http://www.google.fr)
Lycos France (http://www.lycos.fr)
Voil (http://www.voila.fr)
Principaux annuaires francophones :
Nomade (http://www.nomade.fr)
Open Directory (http://www.dmoz.fr)
Yahoo ! France (http://www.yahoo.fr)
Principaux moteurs mondiaux :
Altavista (http://www.altavista.com)
Fast (http://www.alltheweb.com)
Google (http://www.google.com)
Principaux annuaires mondiaux :
Open Directory (http://www.dmoz.org)
Yahoo ! (http://www.yahoo.com)
En fonction de votre site, vous de juger quels moteurs et annuaires sont adapts votre contenu : par exemple pour
un si t e cont enu afri cai n, i l est i nt ressant de l e rfrencer dans l es annuai res afri cai ns Woyaa
(http://www.woyaa.com) et Nbolo (http://www.nbolo.com)
A noter qu'il est intressant de ne pas ngliger des moteurs de recherche priori pas forcment trs pertinent tels que
Nestcape, AOL ou MSN car de nombreux internautes ne changent pas la page d'accueil par dfaut de leur
navigateur !
4.2. POSITIONNEMENT DANS LES MOTEURS DE RECHERCHE
Comment garantir un bon positionnement dans les moteurs de recherche ?
L'indexation de votre site s'effectuant sur le contenu, il est important que le contenu textuel de votre site soit
riche. Ainsi un site o le mot Niger apparait 100 fois sera invitablement mieux class qu'un site ne
comportant le mot Niger qu'une seule fois lors d'une recherche avec le mot cl Niger
1.
Choisir des titres pertinents pour chacune de vos pages Web. Ainsi une page dont le titre contient le mot
Niger sera mieux class qu'une page dont le titre ne contient pas ce mot cl !
2.
Choisir un nom de domaine contenant un mot suffisament explicite (par exemple le site
http://niger.africaweb.org sera mieux class que le mme site avec l'URL http://www.toto.com)
3.
Rflchir puis bien paramtrer les balises mta. 4.
4.2.1. Les balise mta / Meta tags
Les balises mta s'insrent entre les balise
de votre page HTML.
TITLE
Exemple :
<title>Compagnie théâtrale WOKADIA Parakou,
Bénin</title>
META NAME="description"
Exemple :
<META NAME="Description" content="La compagnie Wokadia ('Venez voir,
venez dcouvrir' en langue Dendi) invite dcouvrir le reflet du
spectateur mme, comme en un miroir.">
Remarques :
Certains moteurs tels que Altavista utilisent le titre et la description de la page d'accueil pour afficher le rsultat d'une
recherche (comparez le titre et la description cidessus avec la capture d'cran ciaprs). Veuillez donc utiliser un
titre et une description pertinente ! Dans le cas o la description n'est pas dfinie dans les balises mta, Altavista
utilise les premiers mots rencontrs sur la page d'accueil : c'est ainsi qu'on trouve des sites dans la description
correspond aux diffrents items du menu de navigation, ce qui n'est pas trs parlant !
META NAME="Keywords"
Cette balise mta permet de spcifier une liste de motscls. Attention pour que ces mots soient acceptes, ils doivent
imprativement se retrouver dans le texte du site (sinon cela sera considr comme un abus et votre site peut tre
rejet). De mme vitez de rpter abusivement un mme mot cl ce qui pourrait tre peru comme une mthode
s'apparentant au spam par les moteurs de recherche.
Exemple :
<META NAME="Keywords" content="Wokadia,compagnie
thtrale,compagnie,thtre,thatre,Bnin,Parakou,troupe,thtrale,langue
dendi,spectacle,chant,danse,traditionnel,comdien,comdiens,artistes,festival
de thtre,Jos Pliya">
Le secret d'un bon rfrencement, outre la richesse du contenu du site, rside dans le choix du titre, de la description et
des motscls ! Rflchissez donc sur papier avant de dfinir titre, description et motscls et n'hsitez pas
demander conseils votre entourage ou votre direction !
META NAME="Revisitafter"
Pour les sites dont le contenu change frquemment, il est intressant d'imposer aux moteurs de recherche de
r i nde xe r vot r e s i t e a ve c une f r que nc e d f i ni e ! Ce c i s ' e f f e c t ue a ve c l a ba l i s e <meta
name="Revisitafter">
Inconvnient : le moteur vient rgulirement visiter votre site et si plusieurs fois de suite votre site est innaccessible,
celuici sera purement et simplement supprim de son index !
Exemple :
<meta name="Revisitafter" content="14 days">
Avant de lancer le rfrencement :
La taille des champs description et motsclefs tant limite, et afin de vrifier que vos motscls sont bien utilisez un
vrificateur en ligne de vos mta tags tel que par exemple http://www.label1901.com/meta/meta.php
4.3. TRUCS ET ASTUCES
On ne le rpetera jamais assez : plus un site comporte de contenu, et puis celuici apparaitra dans les moteurs
de recherche avec diffrents critres de recherche : chaque mot de votre site tant index dans les moteurs, il
est vident qu'un site comprenant des milliers de pages disposera de d'avantages points d'entres qu'un site ne
comportant qu'un paragraphe.

Corollaire : vitez les sites entirement graphiques ou uniquement en flash. Votre site sera peut tre
exceptionnel mais mal rfrenc. On peut raliser de trs beaux sites en mlant graphiques et textes non
graphiques (en attendant la reconnaissance automatique des textes dans les bitmaps).

Pensez associer un texte alternatif aux images contenant du texte (logos, boutons, etc...) (<img src=...
alt="Texte correspondant au logo">). Ainsi cela permettra qu'un texte en bitmap soit quand
mme rfrenc dans les moteurs !

Pensez associer un texte alternatif chacune de vos images (pour faciliter le rfrencement dans les moteurs
de recherche d'image tels que Google Image). De mme des noms de fichiers explicites pour les GIF et JPG
facilitera leur rfrencement dans les moteurs d'images.

Evitez tout prix le spamindexing (terme gnrique qui regroupe toutes les tentatives de fraude sur les outils de
recherche pour tre bien positionner). Les fraudes (motsclefs non existants dans les pages, mots en noir sur fond noir,
etc...) sont sanctionnes par les outils de recherche qui peuvent mme aller jusqu' inscrire votre site sur des black
lists.
4.4. VRIFIER ET SUIVRE LE RFRENCEMENT
Vous devez vrifier au moins chaque timestre l'tat de votre rfrencement car les positions ne sont jamais fixes. Pour
suivre l'tat de vos rfrencements simultanment dans diffrents moteurs, vous pouvez utiliser l'excellent logiciel
Copernic (http://www.copernic.com/fr/)
5. INTRODUCTION LA CRATION DE PAGES DYNAMIQUES
5.1. INTRODUCTION
Jusqu'ici, nous avons conu des pages web dites statiques : mme avec du DHTML (Dynamic HTML), le contenu
des pages est celui que le webmestre a explicitement indiqu.
Il est possible de modifier le contenu en fonction du contexte grce un language de scripts qui permet de crer des
pages dynamiques. Par exemple, on peut se connecter une base de donnes afin d'y enregistrer des donnes ou de
rcuprer des informations sur un utilisateur...
Le web dynamique consiste simplement gnrer tout ou partie de la page HTML qui va s'afficher, selon la
demande.
L'ide est la suivante : le client demande quelque chose (un article par exemple) ; le serveur web plutt que de servir
une page dj faite (une page statique), va crer cette page dans l'instant et la renvoyer au client.
5.2. LE LANGAGE DE SCRIPTS PHP
Langage PHP
Language de scripts ct serveur, PHP permet de dynamiser un site web.
Voir le site de rfrence : http://php.net
PHP signifiait dans ses premires versions Personal Homepage. Il permet de crer facilement certaines parties
dynamiques d'un site web : forums, livre d'or, formulaires...
C'est un langage de scripts dynamique ct serveur, c'est dire que c'est le serveur web qui excute les scripts.
Il faut donc installer un serveur Web afin de le tester en local (sur sa propre machine). On peut utiliser pour cela le
package EasyPHP (http://www.easyphp.org) qui installe le trio Apache (serveur web) PHP (langage de scripts)
MySQL (base de donnes) ainsi que la suite PHPMyAdmin qui permet de grer facilement la base de donnes
MySQL (cf. 6. Base de donnes MySQL (article456.html))
Architecture clientserveur
Le client se connecte au serveur afin de lui demander d'afficher des informations stockes sur son disque dur.
Dans notre cas, le serveur web excute les scripts PHP et envoie le rsultat au client au format HTML.
5.2.1. Installer le trio Apache/PHP/MySQL
EasyPHP (http://easyphp.org) permet d'installer facilement le serveur web Apache, PHP, MySQL et
PHPMyAdmin afin de tester son site dynamique en local sur une machine Windows. Si vous utilisez
Linux, vous pouvez choisir les packages Apache, PHP, MySQL et phpMyAdmin dans les versions
rcentes des CDRom d'installation de votre distribution ou sur Internet
Procdure d'installation
Il faut tout d'abord tlcharger l'archive. Rendez vous l'adresse http://www.easyphp.org, allez dans la
rubrique Tlchargements et tlchargez la dernire version sur le bureau de votre machine.

Ensuite, on l'installe sur la machine. Pour cela, doublecliquer sur l'icone puis suivre les instructions
l'cran pour installer EasyPHP
Archive d'installation d'EasyPHP
(ici pour la version 1.6)

Cliquer avec le bouton droit de la souris sur l'icone EasyPHP en bas droite de l'cran afin de faire
apparatre le menu. Cliquez sur Dmarrer pour dmarrer les serveurs Apache et MySQL sur votre machine.
Icone EasyPHP

5.2.2. Prprocesseur Hypertext
Puisqu'il s'intgre au milieu d'une page HTML, et suite son volution, PHP signifie dsormais Prprocesseur
Hypertext
En effet, une page PHP, qui porte l'extension .php3 pour la version 3 de ph pou .php depuis la version 4, peut se
composer comme suit :
<HTML>
<HEAD>
<! Code HTML >
</HEAD>
<BODY>
<! Code HTML >
<? //Code PHP ?>
</BODY>
</HTML>
On remarque que le code PHP s'crit entre les balises <? et ?>. Ce qui suit le double slash // est un commentaire.
Exemple :
Remplaons le contenu de la balise <BODY> par le code suivant :
<BODY>
Voil du HTML

<?
echo "Voil un peu de PHP";
?>

Encore un peu de HTML
</BODY>
Et appelons cette premire page test.php
Le rsultat obtenu l'cran est le suivant :
Voil du HTML
Voil un peu de PHP
Encore un peu de HTML
5.2.3. Fonctionnement
On place le code PHP entre les balises <? et ?> n'importe o dans le fichier source, autant de fois que ncessaire.
Attention Il faut passer par le serveur pour visualiser le rsultat, puisque c'est lui qui interprte le langage PHP. Si
le fichier a t enregistr la racine du serveur, nous pourrons le visualiser l'adresse http://localhost/test.php
Cet exemple nous apprend plusieurs choses :
Une commande PHP se termine toujours par ;
On peut insrer des balises HTML dans du code PHP
La commande echo ""; affiche dans une page HTML le contenu des guillemets.
De plus, en affichant le code source de la page obtenue, on remarque que le code a t interprt par le serveur : le
PHP a disparu, on ne lit que du code HTML ! Pour vous en rendre compte, affichez le code source de la page
obtenue.
Lorsque le client fait appel une page PHP, le serveur traite d'abord le script. Il envoie ensuite le rsultat au client
sous forme de page HTML qui peut tre interprte et affiche par le navigateur.
Droulement d'une requte PHP
Le client envoie une requete au serveur web 1.
Le serveur web, de son ct, plutt que de simplement renvoyer une page toute faite, va executer un
programme
2.
Ce programme, en fonction des paramtres que lui passe la requte (identifiant et mot de passe par
exemple), va chercher les donnes dans la base de donnes
3.
Avec ces donnes, le programme va construire la vole une page HTML. De la mme faon que vous
pourriez crire vous mme le code HTML de votre page (par exemple avec notepad) et le sauvegarder sur
disque, le programme va automatiquement crire le code HTML et le sauvegarder quelque part sur le disque
du serveur
4.
Enfin, le serveur web renvoie cette page au client 5.
5.2.4. Un exemple simple de page dynamique
Nous allons dans un premier temps crer un formulaire simple qui permettra de saisir du texte et de soumettre la
requte une page dynamique qui affichera le rsultat.
<html>
<head>
<title>Formulaire</title>
</head>
<body>
Bonjour, quel est votre nom ?
<form method="get" action="traite.php">
<input type="text" name="nom" value="Anonyme">
<input type="submit" value="OK">
</form>
</body>
</html>
formulaire.html
Tapez le code de cette page l'aide du blocnotes de Windows puis enregistrezle sous formulaire.html.
Cette page Web statique cre un formulaire dans lequel on met un champ texte appel nom remplir o l'on inscrit
par dfaut "Anonyme" et un bouton pour valider. "value=" n'est pas indispensable mais peut souvent tre utile pour
viter de faire saisir des informations que l'on connat dj (c'est la valeur par dfaut).
Il s'agit maintenant de traiter cette information dans une autre page qui va afficher un message de bienvenue
personnalis. Cette page doit tre dynamique puisque son contenu va changer en fonction de la valeur de la variable
nom. Ce sera une page PHP qui portera le nom traite. php. C' est la page appel dans le formulaire
(action="traite.php") du fichier formulaire.html.
<html>
<head>
<title>Rception formulaire</title>
</head>
<body>
<? echo "Bonjour ".$nom; ?>
</body>
</html>
Le point (.) est l'oprateur de concatnation de chanes de caractres. On est dsormais capable de faire du
dynamisme ! En effet lorsque l'on soumet le formulaire, on est en mesure d'afficher le nom entr dans celuici. Le
rsultat obtenu est quivalent entrer l'URL : traite.php ?nom=xxxx.
traite.php
Attention ! pour que le code soit interprt par le serveur, il faut placer les fichiers formulaire.html et traite.php dans
un rpertoire adquat (accessible au serveur) et passer par le serveur pour les interprter. On peut par exemple crer
un rpert oi re t est s l a raci ne du serveur web et y pl acer l es 2 fi chi ers. L' url appel er sera al ors
http://127.0.0.1/tests/ (vrifier auparavant que le serveur Apache est en marche : le point rouge de l'icone EasyPHP
doit clignoter).
5.3. BASE DE DONNES MYSQL
MySQL est une base de donnes. Elle est compose de tables (tableaux) contenant des champs
(colonnes) et des enregistrements (lignes).
Prenons par exemple une table Eleves. Chaque champ ou colonne permet de dfinir ce qu'est un lve (Nom,
prnom, sexe, ge, ville, pays, email...). Chaque enregistrement ou ligne est un lve distinct.
Une base de donnes permet d'enregistrer des donnes dans des tables, et de rcuprer et afficher (on dit
slectionner) des donnes selon des critres dfinis dans une requte.
Exemple
On peut par exemple demander MySQL d'afficher la liste des femmes de moins de 40 ans habitant au Niger
classes par ville puis par nom dans l'ordre croissant.
Le langage qui permet d'envoyer des requtes un serveur MySQL est le SQL : Structured Query Language
(Langage de requte structur). Il se rapproche du langage naturel en anglais et est relativement simple d'utilisation.
Il existe de nombreux outils tels que PHPMyAdmin qui permettent d'crire du SQL via une interface graphique de
manire transparente, ce qui permet de grer une base de donnes sans connatre le langage SQL.
Ainsi, on peut crer la table Eleves de la BDD Exercice contenant les colones ID, Nom, Prenom,
Email, Age de 2 faons :
soit on tape la requte SQL : CREATE TABLE Eleves(id INT not null AUTO_INCREMENT,
Nom VARCHAR(40) not null, Prenom VARCHAR(40) not null, Email
varchar(40), Age INT not null, PRIMARY KEY(id)

soit on utilise l'interface de PHPMyAdmin :
phpMyAdmin

Le type : ce qui dfinit le contenu du champ texte, chiffre, date... Les types que nous utiliserons le plus
couramment sont INT (entier), VARCHAR (texte limit en longueur), TEXT (texte non limit en longueur)
La longueur : nombre maximum de caractres que pourra contenir le champ
autoincrement : ce champ augmente tout seul chaque nouvel enregistrement
Primaire : clef ncessaire lorsque l'on veut qu'un champ soit autoincrmentable
5.4. INTERFACER UNE BASE DE DONNES MYSQL GRCE AU LANGAGE DE SCRIPTS PHP
Nous allons voir comment utiliser le contenu de notre base de donnes. Dans un premier temps,
nous allons simplement afficher le contenu de la table Eleves sur une page PHP. Utilisons
l'interface phpMyAdmin afin d'effectuer nos premiers enregistrements dans la base de donnes.
Note
Ce chapitre est destin aux webmestres qui dsirent aller plus loin dans la conception dynamique ou simplement
curieux de comprendre le fonctionnement. Il ne s'agit que d'une rapide initiation l'utilisation du duo PHP/MySQL,
qui est aujourd'hui facultative grce aux outils qui ont t labors et dont il est trait plus bas. Vous pouvez donc
passer au chapitre suivant si la technique vous rebute.
5.4.1. Connection une base de donnes MySQL
Nous souhaitons dans un premier temps afficher le contenu de la table eleves de la base ntbf. Il faut pour cela se
connecter au serveur MySQL. Nous utiliserons quelques commandes pour traiter les informations contenues dans
une base de donnes.
$db = mysql_connect('localhost', 'root', 'mot_de_passe');
$db : variable dans laquelle est stocke le "handle" de la base. C'est le "ticket" qui nous permettra de travailler
avec la base ensuite.
localhost : c'est le nom attach l'adresse IP 127.0.0.1, Dans d'autres cas, il faut remplacer localhost par l'adresse
du serveur SQL (ex : SQL.multimania.com)
root : C'est l'utilisateur avec lequel nous nous connectons. Le root tous les droits, il est donc dangereux de
l'utiliser sur un serveur distant. Gnralement, il faut utiliser votre identifiant et votre mot de passe.
mot_de_passe : le mot de passe associ a votre utilisateur. Dans ce cas, laisser '' (deux simples cotes = pas de mot
de passe) car nous travaillons en local.
mysql_select_db('Exercice',$db);
On slectionne la base Exercice comme base pour la suite du travail.
$SQL = "SELECT * FROM Eleves";
Requte signifiant qu'il faut slectionner tous les enregistrements contenus dans la table Eleves.
$result = mysql_query($SQL);
On envoie la requte au serveur. Un rsultat est stock dans la variable $result, mais il n'est pas directement
exploitable. Il faut le traiter pour lui donner la forme que l'on souhaite.
$num = mysql_num_rows($result);
Renvoie le nombre d'enregistrements trouvs.
while($row = mysql_fetch_row($result))
{
echo "$row[1], $row[2], $row[...]";
}
mysql_fetch_row()
Renvoie dans un tableau le 1er enregistrement trouv, et renvoie le suivant chaque autre appel. Le traitement
c o n t i n u e j u s q u ' a u d e r n i e r e n r e g i s t r e me n t ( t o u t e l a t a b l e e s t a f f i c h e ) . $row[0] v a u t
mysql_num_rows($result)
Le tableau $row contiendra en 0 le 1er champ, en 1 le 2me, etc.
5.4.2. Lire les donnes d'une table et afficher les rsultats
Ce script nous permet de lire et afficher le contenu de la table Eleves de la base de donnes Exercices que nous
venons de crer.
interroge.php
<HTML>
<HEAD>
<TITLE>Affichage du contenu de la base</TITLE>
</HEAD>
<BODY>

Table Eleves de la base Exercice


<?
$db = mysql_connect('localhost', 'root', '') or die("Connection
impossible : ".mysql_error());
mysql_select_db('Exercice',$db) or die("Impossible d'accder
la BDD : ".mysql_error());
$result = mysql_query($SQL) or die("La requte
 <PRE>$SQL</PRE>a chou : ".mysql_error());
echo "La base contient $num enregistrements
(Elves) \n";
echo "Nom ; Prnom ; Email ; Age \n";
while($row = mysql_fetch_row($result))
{
echo "$row[1] ; $row[2] ; $row[3] ; $row[4] \n";
}
?>

<A HREF="formulaire.php" TITLE="Ajouter un
enregistrement">Cliquez ici pour ajouter un enregistrement</A>


</BODY>
</HTML>
Avant d'afficher le contenu de la table, on affiche le nombre d'enregistrements.
Le code or die(...) permet de quitter en affichant une chane de caractres.
La fonction mysql_error() permet d'afficher l'erreur SQL en cours (celle qui a dclench le or)
Il est bien entendu possible d'amliorer la mise en forme de l'affichage de la base de donnes. Cela vous exercera
l'utilisation des tableaux ainsi qu'au traitement automatique des donnes grce la programmation en PHP et
l'affichage en HTML.
Enfin, un lien permettra d'ajouter un enregistrement dans la base en appelant le formulaire formulaire.php ciaprs.
5.4.3. Utiliser phpMyAdmin pour grer sa base de donnes
Lorsqu'on appelle la page interroge.php (en passant par le serveur web) pour la premire fois, il y a videmment 0
enregistrements dans la table Eleves. Nous allons utiliser phpMyAdmin afin d'y insrer des enregistrements.
Rendonsnous pour cel l'adresse http://localhost/mysql (aussi disponible par l'icone EasyPHP Administration
puis cliquer sur le bouton phpMyAdmin).
La premire chose faire est de choisir la langue franaise dans la liste droulante de
l'accueil.
Choisissez maintenant la base sur laquelle se trouvent les tables contenant les enregistrements modifier : la base
Exercice. Le (1) signifie que cette base contient une table.
Cliquez sur le lien Insrer de la table Eleves afin d'insrer des enregistrements. Une nouvelle page s'affiche dans
laquelle il suffit de remplir les champs Nom, Prenom, Email, Age (le champ id se remplira automatiquement).
Choisissez Insrer un nouvel enregistrement puis cliquez sur Excuter afin d'enregistrer un second enregistrement
dans la table.
Retournez maintenant la page interroge.php et actualisez si ncessaire. Le contenu de la table apparat.
5.4.4. Recueillir les informations enregistrer dans la base
Afin de recueillir les informations, il faut crer un formulaire HTML :
formulaire.php
<HTML>
<HEAD>
<TITLE>Formulaire d'inscription</TITLE>
</HEAD>
<BODY>
Table Eleves de la base Exercice


<?
impossible ".mysql_error());
la BDD ".mysql_error());
echo "Ajout du ".($num+1)." enregistrement \n";
?>
<FORM ACTION="ajoute.php">
Nom <INPUT TYPE="TEXT" NAME="nom"> 
Prnom <INPUT TYPE="TEXT" NAME="prenom"> 
Email <INPUT TYPE="TEXT" NAME="email"> 
Age <INPUT TYPE="TEXT" NAME="age" size=3 maxlength=3> 
<INPUT TYPE="SUBMIT" VALUE="Valider">
</FORM>

</BODY>
</HTML>
Avant d'afficher le formulaire, on interroge la base de donnes afin d'afficher le numro de l'enregistrement en
cours. Cela permet de s'assurer que la connection avec la base est possible avant de demander la saisie.
Cette fois, c'est un bouton qui nous permettra de passer la page suivante. En effet, il faut soumettre la requte du
formulaire. Une fois de plus, n'hsitez pas amliorer la mise en forme. Note : si on n'accdait pas la base pour
afficher le numro de l' enregistrement en cours, on aurait pu se contenter d' une page en HTML pur
(formulaire.html).
5.4.5. Enregistrer ces donnes dans la base de donnes
Enfin, il faut insrer les donnes dans la base de donnes MySQL
ajoute.php
<HTML>
<HEAD>
<TITLE>Insertion d'un enregistrement dans la base</TITLE>
</HEAD>
<BODY>
Table eleves de la base Exercice


<?
impossible ".mysql_error());
la BDD ".mysql_error());
$SQL="INSERT INTO Eleves
VALUES('','$nom','$prenom','$email','$age')";
echo "$nom $prenom a t correctement ajout ! \n";
?>

<A HREF="interroge.php" TITLE="Interroger la base">Cliquez ici
pour afficher la table</A>


</BODY>
</HTML>
Cliquez sur le lien Cliquez ici pour afficher la table (qui pointe vers interroge.php) afin de vrifier que
l'enregistrement est bien dans la table. Vous pouvez aussi utiliser phpMyAdmin.
Vous connaissez dsormais les principes de base qui vous permettront de construire des sites statiques ou
dynamiques. Si vous avez des questions propos de la conception web, n'hsitez pas utiliser des sites ddis tels
que http://www.phpfrance.com.
De plus, vous pouvez intgrer des scripts client en javascript sans connatre ce langage de programmation grce
des sites tels que http://www.editeurjavascript.com... mais vous n'en aurez sans doute pas besoin !
En effet, ces connaissances thoriques vous permettront de mieux comprendre le fonctionnement des exemples
pratiques que nous allons mettre en oeuvre.
5.5. UTILISATION PRATIQUE DE PHP/MYSQL
Il existe de nombreuses solutions libres crites en PHP/MySQL qui permettent de rutiliser des portions de code
son propre compte.
Nous allons en installer quelques unes afin de nous rendre compte de la qualit et la diversit de ces produits. Il est
possible de tlcharger de nombreux scripts francophones partir des ressources http://www.phpscriptsfr.net et
http://www.phpfrance.com
5.5.1. Installer un forum sur son site personnel
phpBB (PHP Bulletin Board http://www.phpbbfr.com) est un forum facile installer et traduit
en franais.
Vous trouverez en annexe 1 un mode d'emploi dtaill de la procdure d'installation de ce forum (pour l'installer sur
le serveur local dans votre site personnel, choisissez les paramtres "Avec EasyPHP").
Une fois que vous avez tlcharg l'archive (par exemple phpBB2french.zip) sur le site, il vous suffit de l'extraire
ver s l e r per t oi r e de vot r e choi x gr ce un l ogi ci el de dcompr essi on t el que Power Ar chi ver
(http://www.powerarchiver.com).
Dcompression de l'archive contenant l'installation de phpBB
Le rpertoire de destination doit tre soit la racine de votre serveur web (C:\Program Files\EasyPHP\www avec
EasyPHP) soit un rpertoire quelconque pour lequel vous avez dfini un alias dans la partie Administration
l'adresse http://127.0.0.1/home/.
Cliquez ensuite avec le bouton droit sur l'icone EasyPHP et choisissez Web local ce qui revient afficher la page
http://localhost ou http://127.0.0.1 dans votre navigateur. Cliquez sur le rpertoire correspondant phpBB (ici,
phpBB2)
Affichage du dossier racine de votre serveur apache
L'installation de phpBB commence. Vous devez remplir un formulaire. Laissez les 3 premiers paramtres tels qu'ils
apparassent (catgorie Configuration de Base) :
Langue du forum : French (pour un forum en franais)
Type de la base de donnes : MySQL 3.x (cas le plus frquent, notamment si vous utilisez EasyPHP)
Choix du type d'installation : Installation (signifie que vous installez un nouveau forum, en opposition avec une
mise jour)
Les valeurs des champs de la catgorie Configuration de la Base de donnes : voir en annexe. Dans notre cas (avec
EasyPHP), on peut d'ores et dj remplir
Nom du Serveur de Base de donnes / SGBD : localhost
Nom de votre Base de donnes : ? ? ?
Nous nous rendons compte qu'il faut crer une base de donnes. Utilisons pour cela l'utilitaire PHPMyAdmin.
Cliquez sur l'icone EasyPHP puis sur Administration et PHPMyAdmin, ce qui revient se rendre la page
http://127.0.0.1/mysql/ (en utilisant une autre page de votre navigateur, puisqu'il faudra revenir sur ce formulaire
afin de terminer de le remplir).
Il ne vous reste plus qu' crer une nouvelle base de donne phpbb. Pour cel, il suffit de remplir le champ Crer
une base de donnes en tapant phpbb puis de cliquer sur Crer.
Nous pouvons maintenant revenir notre formulaire d'installation de phpBB et continuer le remplir :
Nom de votre Base de donnes : phpbb
Nom d'utilisateur : root
Mot de passe :
Prfixe des tables : phpbb_
Remplissez enfin la catgorie Configuration du compte Administrateur avec votre adresse email, le nom d'utilisateur
et le mot de passe :
Adresse Email de l'Administrateur : votre adresse email
Nom d'utilisateur : admin
Mot de passe : admin Il est vident que ce nom d'utilisateur et surtout ce mot de passe sont viter pour des
problmes de scurit sur un site en ligne.
Formulaire d'installation de phpBB
Cliquez sur le bouton Dmarrer l'installation. Lorsque les bases sont cres, une nouvelle page Bienvenue
l'Installation de phpBB 2 s'affiche. Cliquez sur le bouton Finir l'installation.
La nouvelle page qui s'affiche est la page d'administration du site. Elle est accessible en ajoutant /admin/ dans l'url
de la racine du forum (par exemple http://127.0.0.1/phpBB2/admin/).
Cliquez gauche dans la partie Administration afin de visualiser les paramtres que vous pouvez rgler.
Commencez par Configuration dans Administration gnrale afin de personnaliser toutes les options gnrales du
forum. N'oubliez pas de cliquer sur le bouton Envoyer afin de valider vos modifications.
Cliquez enfin sur index du forum ou sur l'icone phpBB en haut du menu de gauche afin de visualiser votre forum !
Ce forum est entirement personalisable ; rfrezvous pour cela l'aide en ligne.
Vous avez ds prsent un forum trs complet sur votre site personnel. Les utilisateurs pourront y laisser des
messages qui seront enregistrs dans votre base MySQL. Ce forum est un produit plutt abouti, et assez intuitif. Il
existe de nombreuses contributions disponibles en libre tlchargement sur Internet qui permettent d'inclure une
partie d'un site tout aussi facilement. Bref, plutt que de rinventer la roue, il est bien plus constructif de la rutiliser
son compte...
5.5.2. Installer le systme de publication SPIP
Nous allons maintenant installer le systme de publication sur notre serveur. Par la suite, c'est cet outil que nous
allons apprendre utiliser afin de concevoir assez rapidement et facilement des sites dont le contenu sera modifiable
par des utilisateurs qui ne matrisent pas la conception web. Cette dissociation du fond et de la forme permet au
webmestre de ne pas intervenir chaque modification demande par le client.
Il faut tout d'abord tlcharger la dernire archive SPIP (http://rezo.net/spipdev/DISTRIB/). Le format .zip est
reconnu dans tous les systmes d'exploitation (le contenu de chaque archive est le mme ; seul le type de
compression diffre).
Vous trouverez comment installer SPIP (http://www.uzine.net/article402.html) en annexe. Nous allons voir
comment l'installer sur le serveur local.
Tout d'abord, dcompressez l'archive la racine de votre serveur web. Par exemple, le dossier
http://localhost/spip
Site en cours de configuration
Tant que vous n'avez pas termin le processus d'installation, cette page prvient les utilisateurs que le site
est en travaux

Ensuite, rendezvous dans le sousdossier ecrire (dans notre exemple, http://localhost/spip/ecrire). Tapez
root comme login de connexion la base de donnes, puis cliquez sur suivant.

L'cran suivant vous confirme que la connection la base de donnes MySQL a russi. Cliquez sur suivant.
Ensuite, l'assistant d'installation vous propose de choisir parmi les bases existantes ou d'en crer une.
Laissez les champs tels qu'ils apparaissent, et cliquez sur suivant pour crer une base nomme spip.

Un nouvel cran de confirmation apparat. Cliquez sur suivant
Pour une premire installation, il faut maintenant rentrer votre identit publique (en cas de mise jour, vous
pouvez laisser les champs vides) :
Signature : le nom sous lequel vous voulez que les contributions de l'administrateur soient signes
Adresse email : adresse email de l'administrateur
Votre login : identifiant de connexion (4 caractres minimum)
Votre mot de passe : mot de passe de connexion (6 caractres minimum) Pour cette formation, choisissez
africacomputing comme login et niamey comme mot de passe.

Un dernier cran de confirmation apparat. Cliquez sur suivant.
Entrez votre login africacomputing, validez. Tapez votre mot de passe niamey, validez.
Vous tes dans l'espace priv de SPIP !
6. UTILISATION DU SYSTME DE GESTION DE CONTENU SPIP
6.1. POURQUOI UTILISER SPIP ?
6.1.1. Les systmes de gestion de contenu Web
Inconvnients des sites statiques classiques :
Les premiers sites Web taient raliss par des quipes de passionns utilisant majoritairement des diteurs HTML
(dreamweaver, frontpage, voire un simple diteur de texte) pour crer des pages. A cette poque hroque o le
webmestre tait l'homme tout faire du site, les fonctions de cration et de maintenance taient la plupart du temps
confondues. Si la tche de cration s'avre souvent gratifiante, la tche de maintenance apparat rapidement comme
une tche extrmement fastidieuse, sans relle valeur ajoute et ncessitant normment de temps, ce qui peut placer
le webmestre dans une position fort dlicate (au lieu de produire des sites, le webmestre passe l'essentiel de son
temps maintenir les sites existants).
De plus, ds que le site devient important, de nombreux problmes techniques apparaissent. Par exemple, il devient
difficile de rorganiser le site ou de faire voluer son architecture (ou du moins sans avoir recourir de fastidieux
copier coller, une vrification exhaustive des liens, etc..). De plus les outils d'dition de pages HTML tels que
Dreamweaver sont trop compliqus pour permettre de dlguer la production des pages aux personnes qui
dtiennent l'information.
Approches alternatives aux sites statiques :
Pour rpondre aux problmes rencontrs avec les sites statiques, deux approches ont t dveloppes :
Tout d'abord organiser les sites partir de bases de donnes : cette approche bien qu'efficace manque de
souplesse et ncessite pour interfacer les pages avec les bases de donnes de gros travaux de codage avec
des langages tels que Perl, PHP ou encore ASP.
1.
Utiliser des logiciels de Web Content Manager (gestion de contenu web en franais) dsigns dans le jargon
informatique par CM (Content Manager) ou encore CMS (Content Manager System). Les CMS permettent
des utilisateurs ne disposant pas de comptences techniques pointues (c'estdire des utilisateurs
normaux) de produire le contenu des pages partir d'un simple navigateur Web ; le codage du site Internet
partir des contenus tant entirement automatis.
2.
Prcisons que la seconde approche constitue la suite logique de la premire. Nous n'allons pas entrer ici dans le
dtail des objectifs et caractristiques fonctionnelles des CMS mais vous l'avez sans doute compris, SPIP appartient
la catgorie des systmes de gestion de contenu. Le principal intrt des CMS est de permettre ce que la
production de contenu s'effectue par les dtenteurs de l'information et non plus par les webmestres. De plus, le fait
de sparer la forme (l'interface des pages) et le fond (le contenu) permet de rorganiser tout moment l'ergonomie
ou l'architecture du site sur avoir intervenir sur le contenu.
L'utilisation d'un CMS ncessite un changement culturel : on passe d'une gestion centralise par le webmestre une
gestion collaborative entre rdacteurs. De plus, il convient d'apprendre aux producteurs de l'information utiliser le
systme et respecter les rgles qui sont imposes par le webmestre afin de permettre la cohrence de l'ensemble.
6.1.2. Positionnement de SPIP parmi les diffrents CMS
Les premiers systmes de gestion de contenus qui sont apparus sont des logiciels commerciaux (filenet, vignette,
broadvision, documentum, reef, etc). Du fait de leur antriorit, ce sont les solutions les plus utilises pour les
gros sites professionnels. Outre leurs cots levs, la plupart des solutions commerciales sont des logiciels trs
lourds mettre en place qui requirent une expertise pointue en dveloppement (ce qui permet leurs diteurs de
vendre des prestations pour leurs mises en place). De plus ces solutions ncessitent la mise en uvre d'un serveur
ddi.
Depuis peu, des solutions libres en open source sont apparues, ce qui a cr une vritable dynamique dans le
domaine. Le prcurseur dans le domaine est probablement phpNuke qui permet de crer un vritable portail en
quelques minutes sans aucune connaissance technique. Toutefois, la personnalisation d'un site ralis avec phpNuke
est limite (tous les sites se ressemblent avec leurs 3 colonnes) et cette solution s'apparente plus une solution de
portail qu' une vritable solution de CMS.
Les tnors des CMS en open source sont ZOPE et SPIP.
ZOPE se situe entre le serveur d'applications et l'outil de gestion de contenu. Dvelopp en Python, ZOPE est plus
abouti techniquement que SPIP mais est galement plus difficile mettre en uvre et ncessite de pouvoir disposer
d'un serveur ddi. Dvelopp en PHP, SPIP se distingue de ZOPE par l'extrme rapidit de mise en service. SPIP
est idal pour une gestion communautaire d'un site Web, typiquement pour la cration de sites Web de type
magazines.
SPIP possde de nombreux atouts qui en font une solution tout fait adapte pour beaucoup de sites Web de
moyenne envergure. L'installation de SPIP est automatique et est entirement prt l'emploi : nous pouvons ainsi
raliser un site avec SPIP sans aucune connaissance technique mais si en tant que webmestre, nous souhaitons
raliser un site rellement adapt aux besoins de nos clients et avec une ergonomie originale et personnalise, il est
ncessaire de se pencher sur les mcanismes ncessaires pour raliser les pages qui serviront de modles au site.
C'est ce que nous allons tudier dans les chapitres qui suivent.
Rfrences :
L ' e x p l o s i o n d u " W e b C o n t e n t M a n a g e m e n t " V e b l o g
(http://www.veblog.com/fr/2001/0407contentmanagement.html)
Ge s t i o n d e c o n t e n u : l e l o g i c i e l l i b r e s d u i t p a r s a s i mp l i c i t 0 1 n e t
(http://www.01net.com/article/187062.html)
T a b l e a u c o m p a r a t i f d e q u a t r e l o g i c i e l s c o o p r a t i f s I 3 C
(http://www.i3casso.org/article.php3?id_article=185)
6.2. A LA DCOUVERTE DE SPIP
SPIP comme tous les CMS comporte une partie publique (le site visible par les internautes) et une partie prive
rserve aux personnes charges de la gestion du site, c'est dire de l'alimenter et de le mettre jour. Dans ce
chapitre, nous allons nous intresser l'utilisation de la partie prive pour publier et organiser le contenu du site
public. La personnalisation et l'adaptation du site public nos besoins seront traits dans le chapitre suivant.
6.2.1. Articles, rubriques et arborescence d'un site SPIP
Lorsqu'on utilise SPIP, l'ajout de contenu se fait non plus en concevant une page partir d'un diteur HTML mais en
insrant dans la base de donne de SPIP un article. La terminologie article dsigne la mme terminologie qu'un
article publi dans un journal c'estdire une composition comprenant du texte mais galement des lments
graphiques. Un article doit ncessairement tre plac dans une rubrique, la terminologie rubrique dsignant
galement la mme notion que pour un journal papier. On peut imaginer titre d'exemple une rubrique "actualits
internationales" contenant diffrents articles traitant d'vnements se droulant dans le monde.
SPIP permet de grer un site Web de type magazine (bien qu'avec un peu d'imagination, il soit possible de raliser
n'importe quel type de site mais cela ncessite de dvelopper vos propres "squelettes"). Par magazine, nous
entendons un site structur en rubriques dans lesquelles nous publions des articles. La structure des rubriques
constitue l'ossature de votre site et c'est cette structure qui va dterminer son interface, son mode de navigation et les
relations entres articles. La structure des rubriques est de type hirarchique, c'estdire qu'une rubrique peut
contenir des sous rubriques qui ellesmmes, contiennent d'autres sous rubriques, etc.
Construire la structure de son site consiste donc imbriquer des rubriques et des sous rubriques. La structure
hirarchique a t choisie du fait de son extrme simplicit. Cette simplicit conduit la principale limitation de
SPIP : un article ne peut se trouver que dans une seule rubrique et de ce fait la navigation travers le site correspond
la structure des rubriques. D'o l'intrt de bien rflchir la structure des rubriques avant de commencer publier
quoi que ce soit. Cependant il existe un mcanisme pour contourner cette lacune : le systme des motsclefs. Les
motscls offrent un moyen de navigation transversal l'intrieur du site. En associant un ou plusieurs motscls
un article, on dispose d'un moyen de crer des liens avec d'autres articles situs dans d'autres rubriques. Cela permet
d'offrir plusieurs modes de navigation : une navigation arborescente qui respecte la structure hirarchique des
rubriques et une navigation thmatique, pour par exemple associer un article la liste des articles traitant d'un sujet
connexe.
Rsum :
L'objet principal permettant de publier des informations sous SPIP est l'article ;
Un article est obligatoirement class dans une rubrique ;
Une rubrique peut contenir autant de sous rubriques que ncessaire et au sein d'une mme rubrique, on peut
placer autant d'articles que ncessaire ;

La navigation travers le site est dpendante de la structure hirarchique des rubriques mais il est possible
de proposer aux visiteurs plusieurs modes de navigation en s'appuyant sur les motsclefs.

6.3. INTRODUCTION PAR LA PRATIQUE LA CONCEPTION DE SQUELETTES SPIP
6.3.1. Un peu de thorie pour commencer !
Principe gnral :
SPIP utilise un jargon qui lui est propre et qui peut paratre droutant au dbut. Ainsi lorsqu'on parle de squelette,
cela correspond la notion de modle (template en anglais) sur lequel le systme va s'appuyer pour gnrer
diffrentes pages du site.
Un mme squelette permet de gnrer autant de pages que
de donnes de mme type contenues dans la base !
Chaque page d'un site SPIP est gnre automatiquement partir d'un squelette sur lequel vont se greffer des
donnes extraites de la base de donnes.
On dfinit un format type ou squelette pour chaque type de document : un squelette pour par exemple l'affichage des
articles, un autre pour l'affichage des brves, un pour l'affichage du plan du site, etc...
En passant en paramtre dans l'URL un numro d'article au squelette charg de la mise en page des articles, le
systme gnre autant de pages diffrentes que d'articles contenus dans la base de donnes !
En tant que webmestre dveloppeur, vous commencez comprendre l'intrt d'utiliser un CMS : des centaines de
pages vont tre gnres automatiquement partir d'un mme modle ds lors que des rdacteurs publient des
articles et les rangent dans des rubriques.
Dans chaque squelette, on spcifie comment le systme fabriquera chaque page individuelle partir des paramtres
passs dans l'URL : positionnement automatiquement du titre, du texte, des liens de navigation, etc...
Construire un squelette revient construire une page HTML dans laquelle on insre des balises spcifiques SPIP
pour prciser quel type de donnes on souhaite afficher et comment on souhaite les afficher.
Un ou plusieurs traitements uniformiss pour chaque type de document :
L'intrt d'un systme de publication automatis, c'est que l'on ne va pas redfinir une interface diffrente en HTML
pour chaque page correpondant au mme type de document. Ainsi tous les articles seront traits de la mme
manire. Cependant comme nous le verrons plus loin il est galement possible de dfinir plusieurs interfaces pour
visualiser un mme article : par exemple une interface pour le format normal et une interface pour un format adapt
l'impression.
Deux fichiers doivent tre dfinis pour chaque squelette :
Un squelette s'appuie sur des librairies spcifiques SPIP, c'estdire qu' chaque fois qu'on charge une
quelconque page d'un site ralis sous SPIP, du code PHP est charg au pralable. Ce code le moteur SPIP
interprte les balises SPIP contenues dans le squelette et effectue les requtes ncessaires auprs de la base de
donnes. Faire tourner successivement le moteur de SPIP sur le mme squelette avec les mmes paramtres n'a de
sens que si les donnes changent sans cesse ; ce qui est rarement le cas pour la trs grande majorit des sites. De
plus, il faut se prmunir d'un ventuel plantage du serveur de base de donnes qui aurait pour effet de rendre
indisponible les pages du site.
Pour ces raisons SPIP intgre un systme de "cache", c'est dire un systme qui ne regnre une page que lorsqu'un
dlai est expir ; dlai bien videmment paramtrable.
Pour construire un squelette, il faut d'abord crer un fichier PHP charg la fois d'inclure une partie du code
spcifique SPIP et de grer le mcanisme de cache. Concrtement si vous souhaitez raliser un squelette nomm
exemple.html , il faut au pralable crer un fichier exemple.php3 de la forme :
<?
$fond = "exemple";
$delais = 3600;
include "incpublic.php3";
?>
Par convention :
la variable $fond contient le nom du squelette appeler sans l'extension .html (ici nous souhaitons appeler
le squelette exemple.html mais on peut galement imaginer de crer un fichier exemple.php3 charg
d'appeler le squelette toto.html) ;

la variable $delais exprime en secondes (soit 1 heure dans notre exemple) permet de paramtrer la
dure de vie d'une page gnre : si la page existe et si sa dure de vie n'est pas expire, on se contente de
rcuprer la page dj gnre et cache dans le cache (beau plonasme qui permet de comprendre le sens
du mot cache !), sinon le moteur spip regnre la page (ce qui ncessite plus de temps) ;

Maintenant que nous venons de voir comment crire le fichier charg d'appeler un squelette, penchons nous la
ralisation des squelettes proprement dite.
6.3.2. Premiers squelettes : des boucles et des balises
Avant de commencer quoi que ce soit, rendez vous dans la partie prive de SPIP et insrez 2 rubriques contenant chacune au moins 2 articles (on peut se
contenter d'une seule rubrique mais pour certains exemples, ce sera plus parlant avec 2 rubriques !).
Le langage de description de la mise en page des squelettes dans SPIP est compos de boucles et de balises. D'un
point de vue syntaxique, le langage utilis par SPIP ressemble au langage HTML.
Dans le jargon de spip, une boucle dsigne en fait une requte SQL. La syntaxe des boucles permet d'interroger la
base de manire extrmement simplifie c'est dire sans avoir recourir l'criture de commandes SQL ni mme
crire du code PHP.
Les balises SPIP quand elles permettent de prciser les champs de la base que nous souhaitons afficher.
Bien pratique le systme des boucles et des balises ! Mme si au dbut cela va vous paratre trs droutant, avec un
peu d'entranement et le "guide du webmestre SPIP" porte de main, la ralisation de vos propres squelettes ne
vous posera rapidement plus de difficults !
Premier exemple :
Commencez tout d'abord par crer un fichier exemple.php3 tel que dcrit dans la section prcdente (mais avec
$delais=0; pour viter l'effet de cache lors de 2 exprimentations successives). Puis crez un fichier
exemple.html contenant les lignes suivantes :
<HTML>
<BOUCLE_article(ARTICLES){id_article=1}>
#TITRE #TEXTE 
</BOUCLE_article>
</HTML>
Appelez la page exemple.php3 avec votre navigateur.
Attention ne lancez pas votre navigateur en double cliquant directement sur le fichier exemple.html cela n'aura aucun effet puisqu'il faut tout d'abord passer par
l'intermdiaire du fichier exemple.php3, et ensuite parce que pour que le code PHP et les balises SPIP soient interprts, il est ncessaire de se connecter au
serveur Apache coupl avec php et MySQL ! Donc tapez comme URL soit http://127.0.0.1/votrerepertoirespip/exemple.php3 ou l'URL correspondant au
serveur distant (il est fortement conseill de travailler en local avec votre propre serveur apache pour viter recourir sans cesse au FTP ce qui s'avre
vite trs fastidieux !)
Le rsultat est l'apparition du titre du premier article en gras suivi d'un saut de ligne puis du texte de l'article. Vous
remarquerez que nous avons mlang la fois du code HTML et du code SPIP.
Comment cela marchetil ?
Le code <BOUCLE_article(ARTICLES)> </BOUCLE_article> permet de spcifier qu'on recherche des
documents de type ARTICLES dans la base. L'ajout de {id_article=1} permet d'ajouter la condition suivante :
on ne veut extraire de la base que l'article dont le numro est gal 1. Ensuite la balise #TITRE permet de
spcifiquer qu'on souhaite afficher le titre correspondant l'article slectionn et #TEXTE, le contenu proprement
dit. On peut combiner des balises SPIP et des balises HTML telle que la balise dans cet exemple qui permet
d'ajouter un saut de ligne entre le titre et le texte de l'article.
Ce premier exemple est bien joli mais il ne sert strictement rien du fait qu'on impose la condition "ce squelette ne
s'applique qu' l'article numro 1" et donc ne peut pas tre utilis pour afficher un autre article.
Exemple 2 :
Modifiez l'exemple prcdant en remplaant {id_article=1} par {id_article}.
Rentrez maintenant l'URL http://127.0.0.1/votrerepertoirespip/exemple.php3 ?id_article=2 dans votre navigateur
et le tour est jou : vous tes maintenant capable d'appliquer votre squelette n'importe quel article de votre base de
donnes SPIP !
Exemple 3 :
Crez le fichier rubrique.html suivant :
<HTML>
<BOUCLE_mesarticles(ARTICLES){id_rubrique}>
#TITRE #TEXTE 
</BOUCLE_mesarticle>
</HTML>
Avant de visualiser le rsulat, vrifiez que vous avez bien un fichier rubrique.php3 pointant sur rubrique.html et
ventuellement mettez 0 le dlai d'expiration du cache.
En tappant http://127.0.0.1/votrerepertoirespip/rubrique.php3 ?id_rubrique=1 dans votre navigateur, vous obtenez
l'affichage de tous les articles contenus dans une mme rubrique. Essayez avec id_rubrique=2 !
Notons que dans cet exemple, nous avons volontairement mentionn BOUCLE_mesarticles afin de montrer que le
nom associ la boucle est purement arbitraire, le tout tant d'utiliser le mme nom lorsque l'on ferme la balise !
Exemple 4 :
<HTML>
<! Dbut de l'affichage des rubriques >
<BOUCLE_mesrubriques(RUBRIQUES)>
#TITRE 
<! Dbut de l'affichage des articles de la rubrique courante
>
<BOUCLE_mesarticles(ARTICLES){id_rubrique}>
#TITRE 
</BOUCLE_mesarticle>
<! Fin de l'affichage des articles de la rubrique courante
>
</BOUCLE_mesrubriques)
<! Fin de l'affichage des rubriques >
</HTML>
Cet exemple permet d'afficher le titre de toutes les rubriques ainsi que le titre de chaque article contenu dans chaque
rubrique.
Explications :
La premire boucle ne s'effectue non plus sur les articles mais sur les rubriques : ceci du fait que nous
utilisons (RUBRIQUES) et non pas (ARTICLES) ;

Aucune condition n'est effectue sur les rubriques (nous n'avons pas les symboles { et } prcisant une
condition quelconque). Le rsultat est donc identique quel que soit le paramtre pass dans l'URL
(id_rubrique=1 donne donc le mme rsulat que id_rubrique=2) ;

La seconde boucle s'applique pour chaque rubrique slectionne par la premire boucle, autrement dit nous
utilisons une boucle dans une boucle. C'est la condition {id_rubrique} qui permet de spcifiquer que
l'on traite la rubrique courante, c'est dire la rubrique slectionne par la premire boucle (essayez donc de
supprimer cette condition pour voir le rsultat que cela donne !) ;

Nous avons ajout des commentaires (entre les balises HTML <! et >). Vous verrez que lorsque vous
ferons des squelettes contenant beaucoup de code HTML, si on ne met pas de commentaires, on a
rapidement du mal distinguer le code SPIP du code HTML !

Avec ces 4 exemples, vous connaissez maintenant les principes de base de l'utilisation des balises et des boucles
SPIP ! Il ne nous manque plus qu' tudier dans le dtail quelques points pour vous permettre de crer de jolis sites
faciles maintenir...
6.3.3. Les diffrentes balises autorises dans les boucles RUBRIQUES, ARTICLES et BREVES
6.3.4. Les diffrentes conditions (critres de slection) autorises dans les boucles
6.3.5. Syntaxe complte des balises SPIP
7. ANNEXES
7.1. INTRODUCTION LA CRATION DE PAGES DYNAMIQUES
C e s p a g e s s o n t t i r e s d u C e n t r e d e d o c u m e n t a t i o n p h p B B f r . o r g
(http://forums.phpbbfr.org/viewtopic.php?t=5454=0ghlight=)
Vous y trouverez les dernires mises jour et un support en franais pour l'utilisation et l'administration du forum
phpBB.
7.1.1. Installation et mise jour du forum phpBB
Sommaire :
1. Installation de votre forum
2. Mise jour de votre forum
3. Installation de plusieurs forums sur le mme site
4. Rinstallation ou Suppression
1. Installation de votre forum
Ce guide suppose que vous venez d'un systme windows et que vous installez phpBB vers un hbergeur web, et que
vous faites une installation, et non une mise jour.
Configuration minimale
Avoir un hbergeur web
Votre hbergeur supporte mysql 3.x ou + (pour votre base de donnes)
Votre hbergeur supporte PHP 4
Votre hbergeur vous donne l'accs votre base de donnes, avec un nom d'utilisateur, un mot de passe et une
adresse serveur (au cas o il serait diffrent du serveur web de votre hbergeur)
Votre hbergeur vous donne l'accs au ftp et vous connaissez le rpertoire de base pour votre site
Ces instructions ne s'appliquent que si vous avez cette configuration minimale. Si vous ne connaissez pas votre
configuration, et que votre hbergeur ne donne pas ces renseignements dans ses pages d'aide, contactezle en
demandant ces informations
Voici comment procder pour installer phpBB
Tlchargez la dernire version de phpBB
Allez ici pour la tlcharger (http://sourceforge.net/project/showfiles.php?group_id=7885) et tlchargez le
package phpBB2. ? ? ?.zip
1.
Dcompressez l'archive l'aide d'un dcompresseur (par exemple Winzip (http://www.winzip.com)),
dcompressezle dans un rpertoire de votre choix que vous aurez pralablement cr. Assurez vous qu'il
n'y ait pas de double rpertoire (phpBB/phpBB). Renommez votre rpertoire par le nom que vous voulez
(forum, phpBB ou peu importe)
2.
Ouvrez votre client ftp (par exemple CuteFtp (http://www.cuteftp.com/)) et transfrez votre dossier vers la
racine de votre espace ftp, l o vous voyez les pages contenant votre site, de manire que votre forum soit
accessible via l'url http://www.votrehebergeur.com/votresite/votreforum (#)
3.
Lancez votre navigateur web et entrez le chemin complet de votre forum. Normalement vous devriez voir
une page avec diffrents champs remplir. Laissez les 3 premires options, n'y touchez pas (English ou
French, MySQL 3.x, Install). Pour les quatre options suivantes vous aurez besoin des informations de votre
hbergeur. La premire des 4 options vous demande le chemin de votre base de donnes. Dans la plupart
des cas vous devrez entrer localhost ( moins que votre base de donnes ne soit hberge sur un autre
serveur). Votre base de donnes doit tre cre l'avance par votre hbergeur, et vous devez entrer le nom
dans la deuxime ligne. Le nom d'utilisateur et le mot de passe devrait normallement tre le mme que ceux
de votre espace d'hbergement. Si tel n'est pas le cas, contactez votre hbergeur. Pour le prfixe des tables
de la base de donnes, laissez le tel quel, phpbb_.
Dans les options suivantes, vous devez spcifier un compte d'administrateur. C'est la personne qui aura un
accs total sur le forum et est ncessaire pour faire l'installation initiale. Cliquez sur Envoyer pour que le
forum s'installe.
4.
Lancez votre navigateur web et entrez le chemin complet de votre forum. Vous voil maintenant dans la
page d'accueil de votre forum, avec un forum test dj cr. Connectez vous avec le nom et le mot de passe
d'administrateur (que vous avez entr lors de l'installation). Et ensuite vous pouvez aller dans la partie
Administration du forum pour configurer pleinement votre forum.
5.
Si lors de l'installation vous rencontrez un message d'erreur, faites une recherche dans le forum Installation
(http://forums.phpbbfr.org), peuttre que vous n'tes pas le seul avoir cette erreur.
Si vous rencontrez une erreur telle que "Can't connect to database", il se peut que vous ayez entr incorrectement
les informations de la configuration, ou que votre hbergeur ne remplit pas les conditions minimales ncessaires
pour installer et utiliser phpBB. Dans ce cas vous n'aurez d'autre choix que de choisir un autre hbergeur,
remplissant les conditions minimales, pour l'utilisation de phpBB.
2. Mise jour de votre forum
Voici les instructions ncessaires afin de mettre jour votre forum
A. Mettre jour votre forum de la version 2.0.2 2.0.3
Tlchargez le pack de mise jour phpBB2.0.3files.zip
(https://sourceforge.net/project/showfiles.php?group_id=7885&release_id=113759)

Dcompressez le dans un rpertoire de votre disque dur. Vrifiez qu'il n'y a pas de double rpertoire
Faites un backup de votre forum ainsi que de votre base de donnes
Via votre client ftp, connectez vous sur votre espace hbergeur, allez dans la racine de votre forum cot ftp,
et dans la racine du dossier que vous avez dcompress (via disque dur), et uploadez les fichiers et dossiers.
Si vous avez bien procd, les nouveaux fichiers se mettront dans les rpertoires respectifs de votre forum.
S'il vous demande si vous voulez craser les fichiers, cliquer sur oui

Une fois que c'est fait, ouvrez votre navigateur et entrez le chemin de votre forum (votresite/votreforum/)
suivi de update_to_203.php, et cliquez sur le lien pour mettre jour correctement votre forum

Voil, votre forum est jour. N'oubliez pas d'effacer le fichier update_to_203.php , comme le suggre ce
sujet (http://forums.phpbbfr.com/viewtopic.php?t=5483)

B. Mettre jour votre forum de la version 2.0.0 la version 2.0.3
Normalement vous devrez procder de la mme manire que ci dessus.
Veuillez juste d'abord faire ceci, selon la version que vous avez
Tlcharger le pack phpBB2.0.1files.zip, le dcompresser, transfrer les fichiers via ftp et lancer le
fichier update_to_201.php. Une fois fait, le supprimer



C. Mettre jour votre forum depuis une version antrieure 2.0.0
Vous avez un forum 2.0 RC ? Ou bien un forum avec la version 1.4.x ?
Ou, chose rare, vous faites partie de ceux qui n'ont pas mis jour leur version 1.2 ou 1.0 ? Je vous conseille
vivement dans ce cas de mettre jour votre forum. Comment, me direz vous ? J'ai trouv un topic qui pourra vous
aider (http://www.phpbb.com/phpBB/viewtopic.php?t=23120&start=0&postdays=0&postorder=asc&highlight=)
3. Installation de plusieurs forums sur le mme site
Voici les tapes suivre pour ce faire :
Tlchargez le dossier de votre forum sur votre disque dur (via ftp), renommez le et uploadez le dossier
renomm

Lancez (via votre navigateur) le fichier install.php du nouveau dossier (si vous l'aviez effac dans votre
ancien dossier, vous pouvez le ravoir en tlchargeant le pack correspondant votre version)

Lors de l'installation, remplissez les bons paramtres et donnez un autre nom au prfixe des tables. Par
dfaut phpbb_ mais cette fois ci donnezen un autre (phpbb1_ ou phpbbxyz_)

Attention tout de mme ne pas saturer votre DB.
4. Rinstallation ou Suppression
Rinstallation
Pour une simple rinstallation, supprimez le rpertoire contenant les fichiers de phpBB et ruploadez les fichiers via
ftp, comme si vous installez phpBB, sauf qu'aprs vous ne lancerez pas install.php (n'oubliez pas de regarder ici
(http://forums.phpbbfr.com/viewtopic.php?t=5483) aprs avoir upload les fichiers)
Suppression de phpBB
Pour supprimer dfinitivement phpBB de votre site, supprimez le rpertoire contenant les fichiers phpBB, ainsi que
(dans votre base de donnes) les tables ayant pour suffixe phpbb_
Si vous ne supprimez que les fichiers, le contenu de votre forum (sujets, liste des membres...) restera puisqu'il est
stock dans votre base de donnes.
7.1.2. Paramtres des principaux hbergeurs
Avec EasyPHP
Database Server Hostname/DSN : localhost
Your Database Name : **** (remplacer par le nom que vous avez donne la base)
Database Username : root
Database Password : (laisser vierge)
A v e c L y c o s ( h t t p : / / w w w . l y c o s . f r ) ( a c t i v e r v o t r e b a s e d e d o n n e s
(http://www.multimania.lycos.fr/build/php4u/settings.phtml))
Your Database Name : login_db
Database Username : login (facultatif)
Database Password : ****** (Le pass de votre compte Lycos)(facultatif)
Avec Free (http://www.free.fr/) (activer votre base de donnes (http://subscribe.free.fr/acces/createbase.html))
Database Server Hostname/DSN : sql.free.fr
Your Database Name : login
Database Username : login
Database Password : **** (votre password sur free)
Avec Ifrance (http://www.ifrance.com/) (ne concerne que l'hbergement payant, l'hbergement gratuit utilisant un
format propritaire (http://www.ifrance.com/_aide/base/index.htm))
Database Server Hostname/DSN : sql1.opsion.fr
Database Password : **** (votre password sur ifrance)
[Edit AideInfo : iFrance ne permet pas l'utilisation de phpBB2. Ils travaillent actuellement pour le rendre
compatible]
Avec Levillage (http://www.levillage.org/) (pour crer votre base de donnes, allez dans la section
Hbergement/Nouvelle Base)
Your Database Name : login_db
Database Username : login_db
Database Password : **** (le password de votre base de donnes)
Avec Webdynamit (http://www.webdynamit.net)
Database Password : **** (le password de votre base de donnes)
Avec Easyhebergement (http://www.easyhebergement.net)
Database Server Hostname/DSN : sql.easyhebergement.net
Database Password : **** (votre password sur easyhebergement)
Avec OVH (http://www.ovh.net)
Database Server Hostname/DSN : 213.186.36.166 ou localhost
Database Password : **** (votre password sur ovh)
Avec Oxyd.fr (http://www.oxyd.fr)
Database Server Hostname/DSN : mysql.oxyd.fr
Your Database Name : user_XXXX (XXXX est remplacer par votre numero)
Database Username : user_XXXX (generalement identique au nom de la base, sauf si vous possedez plusieurs bases
Database Password : **** (votre password sur oxyd.fr)

Creation Web Professionnel

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Creation Web Professionnel

Încărcat de

Drepturi de autor:

Formate disponibile

Support de Formation en ligne

Cration et gestion de sites Web professionnels

S-ar putea să vă placă și