Gilbert1.png

KompoZer pour composer mon site

KompoZer pour composer et développer vous-même votre site web...

Vous n'avez besoin d'aucun logiciel payant pour créer votre site
Dans ces pages vous apprendrez à utiliser KompoZer pour composer et développer votre site web...

Mon site web étape par étape

KompoZer pour composer mon site web

BoutonPrecedent BoutonSommaire BoutonSuite Cette page s'affiche mal ? - cliquez ici   

Dans ces pages vous apprendrez à utiliser KompoZer, un logiciel gratuit pour composer et mettre en page votre site web...

Si des erreurs se sont glissées dans le texte n'hésitez pas à me contacter...
Les liens ci-dessous vous renverront au chapitre correspondant.


ÉTAPE 5 : KompoZer pour composer mon site web

5.1 KompoZer - Brève description
5.2 Télécharger KompoZer et se former
5.3 Utiliser KompoZer pas à pas, sans bla bla
5.4 Le code HTML généré par KompoZer
5.5 Les feuilles de style CSS avec KompoZer
5.6 Mise en page CSS d’un site web avec Kompozer
5.7 La page de formulaire avec KompoZer



ÉTAPE 5 : KompoZer pour composer mon site web

KompoZer est un logiciel gratuit de la communauté Mozilla. C'est un outil de composition très simple d'utilisation qui fonctionne à peu près comme un traitement de texte. Voici les principales fonctions de KompoZer.


5.1 KompoZer - Brève description


Création facile de pages Web :

KompoZer est un système auteur complet pour créer et éditer vos pages web, incluant la gestion des feuilles de styles CSS. Il gère vos fichiers et édite vos pages web comme dans Microsoft FrontPage, Adobe DreamWeaver et autres programmes. Inutile aujourd'hui d'acheter très cher un programme pour créer et éditer des pages web très jolies. Un programme d'édition de pages web au top de la technique !

KompoZer est facile à utiliser, idéal pour ceux qui veulent créer un site web attractif, d'aspect professionnel, sans avoir à connaître le codage HTML ou web.

Fiable et robuste :

KompoZer est basé sur Gecko, le moteur interne de Mozilla ; c'est un moteur super-rapide, très fiable, conforme aux standards, maintenu quotidiennement par une vaste communauté de développeurs. Il est remarquable de noter qu'il supporte le XML, le CSS et le JavaScript, ce qui fait de lui la meilleure plateforme auteur du marché. Son architecture basée sur le XUL fait de lui l'outil d'édition le plus extensible jamais vu.

KompoZer est un outil "stand-alone" ; d'où sa faible taille et sa vitesse d'exécution rapide.

Ceux qui sont familiers avec l'interface de DreamWeaver apprécieront KompoZer pour les raisons suivantes :

        * edition WYSIWYG, qui rend la création de pages web aussi facile qu'avec un traitement de texte ;
        * Gestion de fichiers intégrée par FTP. Connectez-vous simplement à votre site web et naviguez dans vos fichiers,
          et éditez vos pages web à la volée, directement à partir de votre site ;
        * Création de code HTML fiable qui fonctionnera avec la plupart des navigateurs courants d'aujourd'hui ;
        * Passez facilement de l'édition WYSIWYG au code HTML avec les onglets ;
        * etc.

Détails sur les principales fonctions

Le gestionnaire de sites :
Avec KompoZer, tous les sites que vous avez spécifié dans vos paramètres de publication sont accessibles depuis une colonne latérale. Vous avez une vue arborescente d'un site, ou la vue d'un seul répertoire. Vous pouvez aussi filtrer les fichiers ou tous les voir, ou seulement les documents HTML ou les fichiers image. L'aire de navigation indique aussi la taille de chaque fichier et la date de dernière modification.

Une nouvelle palette de couleurs :
KompoZer possède une nouvelle palette de couleurs étendue, plus conforme à ce qu'on a l'habitude. Définissez une couleur à partir de ses composantes rouge, bleue et verte, ou sa saturation et sa brillance. Ou utilisez simplement la souris pour copier la couleur que vous voulez.

Les onglets! :
Une des meilleures fonctions de Mozilla Firefox est disponible dans KompoZer! Ouvrez une seule fenêtre à votre écran et éditez plusieurs documents en même temps, chaque document ayant ses propres 'Annuler/Refaire' en mémoire! Un simple coup d'oeil aux onglets vous permet de savoir si un document doit être sauvé ou pas!

L'éditeur CSS :
Créez des feuilles de style facilement et gérez les styles attachés à vos documents. Vous pouvez voir en temps réel les styles appliqués au document en cours de modification.

Des styles types :
Avec KompoZer, un clic droit sur n'importe quel élément de la barre d'outils hiérarchique en bas de la fenêtre permet de définir les propriétés du style directement.

Des barre d'outils personnalisables :
Personnalisez simplement votre barre d'outils et affichez seulement les boutons dont vous avez besoin.

Formulaires :
Profitez de l'interface utilisateur XUL pour éditer tous vos formulaires, et leurs éléments.

Balisage plus propre :
KompoZer contient des mécanismes pour se débarrasser de presque tout ce qui pourrait vous ennuyer. Combiné avec la puissance du validateur HTML W3C intégré dans KompoZer vous créerez des documents valides et propres.

XFN :
Quand vous créez un nouveau lien vers une ressource externe, ou quand vous éditez un lien existant, vous pouvez maintenant ajouter de l'information "XHTML Friends Network" pour dire que le propriétaire de cette ressource est quelqu'un en qui vous avez confiance.

Des marques visible :
Dans un agencement de page complexe, vous avez souvent besoin de voir les retours à la ligne et les bordures de blocs. KompoZer peut faire cela pour vous. Et bien sûr, tout est controlé par une feuille de styles CSS, vous pouvez donc personnaliser ces marques et les remplacer par les vôtres.

Règles de redimensionnement des tableaux et de leurs cellules :
En haut à gauche de l'onglet ouvert, vous trouverez les règles de redimensionnement des tableaux qui vous permettront d'ajuster facilement la taille des lignes et des colonnes de n'importe quel tableau de votre page web.

Contrôleur d'orthographe automatique :
Le contrôleur d'orthographe en ligne intégré souligne tous les mots ayant une faute, ce qui vous garantira une orthographe correcte dans toute votre page web.

BoutonHautDePage


5.2 Télécharger KompoZer et se former


Cliquez ici pour télécharger le créateur de site Web KompoZer version 8 :
→ Et sélectionnez KompoZer pour Windows en français (kompozer-0.8b3.fr.win32)
(depuis la version 8 il n'est plus nécessaire de charger un patch pour la version française)


Si vous préférez la version 7 (kompozer-0.7.10-win32),
cliquez ici pour télécharger le Patch Français de KompoZer version 7 :
• Dans le menu principal de KompoZer, cliquez sur Tools / Extensions
• Dans la fenêtre "Extensions", cliquez sur le bouton "Install"
• Sélectionnez le fichier *.xpi
• Dans la fenêtre "Software installation", cliquez sur le bouton "Install Now"
• Redémarrez KompoZer

Se former à l'utilisation de KompoZer :
• Consultez le Tutoriel sur KompoZer (KompoZer-0.8b3 ou KompoZer-0.7.10) sur le site SiO2, un site belge qui propose par ailleurs d'autres cours sur des logiciels libres (et donc gratuits) intéressants.
• Enfin, dans le chapitre suivant Utiliser KompoZer pas à pas, sans bla bla, vous trouverez également un petit guide tout simple pour bien débuter avec KompoZer.

BoutonHautDePage


5.3 Utiliser KompoZer pas à pas, sans bla bla


Note : ce petit guide pas à pas reprend très succintement toutes les étapes du Tutoriel sur KompoZer du site SiO2. Consultez ce site pour plus de détails.


Structure du site Web :

Créez un répertoire personnel ‘WebGilbert’ dans C ou n'importe où ailleurs, soit dans cet exemple ‘C:\WebGilbert’

Remarques :
• mettez votre prénom à la place du mien... (évidemment !)
• moi, j'ai mis mon site dans ‘C:\wamp\www\WebGilbert’ parce-que j'ai installé Wampserver 2 sur ma machine, c'est un serveur web pour tester mes petits développements en code PHP, le langage des serveurs web.

Démarrez Kompozer et créez 4 pages vierges comme ceci :

La page d’accueil : index (ou default)

komp01Dans le gestionnaire de sites, en marge de gauche de la fenêtre KompoZer, cliquez sur Edition des siteskomp02
(un bouton avec 2 petits ordinateurs) puis remplissez...

1) Nom du site = SiteGilbert
2) Parcourir / WebGilbert
3) Nouveau site





Enregistrez la page vierge courante :

Fichier / Enregistrer sous…
Titre de la page = ‘Je fais mon site moi-même’ (c'est à dire le Thème du site) / OK
Nom de fichier = index.html (type = fichiers HTML)
Parcourir les dossiers / WebGilbert / Enregistrer

Remarques :

1) A ce stade, si vous avez d'autres fichiers HTML dans le répertoire WebGilbert, le gestionnaire de sites vous les affichera.

2) La fenêtre Paramètres de publication, nous a permis de créer le fichier index.html en local (sur notre machine personnelle). C'est ce que je préfère.

3) Cette même fenêtre Paramètres de publication vous permet aussi, si vous le souhaitez, de modifier vos fichiers directement sur le serveur de votre hébergeur. Il suffit pour cela de donner l'URL de votre site (nom de domaine) et les paramètres FTP de votre hébergeur. C'est très pratique mais il vous faut une connexion ADSL très rapide pour que ça marche bien. Et personnellement, je préfère tester mon site d'abord en local avec plusieurs navigateurs. Ensuite il me faut transférer tous les fichiers par FTP sur le serveur de mon hébergeur web, avec FileZilla par exemple.

Les autres pages du site

Nouveau
Fichier / Enregistrer sous…
Titre de la page = ‘Exemple 1’ (le Thème de la page) / OK
Nom de fichier = page1.html (type= fichiers HTML) / Enregistrer

Nouveau
Fichier / Enregistrer sous…
Titre de la page = ‘Exemple 2’ (Thème de la page) / OK
Nom de fichier = page2.html (type= fichiers HTML) / Enregistrer

Fichier / Enregistrer sous…
Titre de la page = ‘Exemple 3’ (Thème de la page) / OK
Nom de fichier = page3.html (type= fichiers HTML) / Enregistrer

komp03
Puis actualisez la fenêtre du gestionnaire de sites pour voir ces nouveaux fichiers dans la liste.
(Au cas où ‘actualiser’ ne marcherait pas, enregistrez tout, puis fermez et rouvrez KompoZer.)


Remarque :

Le Titre de la page est très important. C'est lui qui apparaîtra dans la barre de titre de la fenêtre du navigateur. Il doit être pertinent et bien représentatif du Thème de la page si vous voulez qu'on trouve votre site, car c'est ce titre que les moteurs de recherche des navigateurs scruteront lorsque les internautes font leurs recherches.

Voila, l'organisation des pages de votre site est prête. Il reste maintenant à créer un répertoire pour ranger toutes les images qui serviront à illustrer votre site, et à créer les liens qui permettront de naviguer d'une page à l'autre.


Le répertoire des images

komp04Dans ‘WebGilbert’ il faut créer un nouveau dossier pour y mettre toutes les images du site. Vous pouvez l'appeler ‘images’ ou ‘pict’ (comme pictures en anglais)

Nouveau dossier  (bouton du gestionnaire de sites → voir figure)
Nom de dossier = ‘pict’ ou ‘images’


Les liens permettant la navigation :

Les liens permettront de naviguer d'une page à l'autre. On peut les placer n'importe où dans le texte ou bien dans une barre de menus

Par exemple : Créez la barre de menus suivante...

| Accueil | Page 1 | Page 2 | Page 3 | Autre Site Web | Contactez-moi |

Pour cela ouvrez simplement index.html et saisissez ce texte. Pour obtenir la barre verticale il faut se mettre en pavé numérique et entrer Alt+0124. Sinon copiez ce caractère et collez-le tout simplement dans KompoZer.


Les liens internes du menu

komp05 Sélectionnez le mot ‘Accueil’ de la barre de menus que vous venez de créer.
Clic droit / Créer un lien / Parcourir / Sélectionner ‘index.html’ / OK
(‘Parcourir’ est un bouton de la fenêtre ‘Créer un lien’ → voir figure)

Répétez l’opération pour toutes les autres pages


Les liens externes du menu

Lien vers un autre site Web :
Sélectionnez ‘Autre Site Web’
Clic droit / Créer un lien / Entrer l’adresse complète de ce site Web
Exemple : ‘http://www.Google.fr/’ / OK

Lien vers une adresse électronique :
Sélectionnez ‘Contactez-moi’
Clic droit / Créer un lien / Entrer une adresse email Exemple :
‘gilbert.pernot@aliceadsl.fr’ ‘La valeur ci-dessus est une adresse électronique’ / OK

Cliquez sur ‘Navigateur’ pour vérifier que tous les liens fonctionnent bien

Liens relatifs ou absolus :
Vérifiez que les URL sont relatives et non absolues : l’adresse de la page Web doit se présenter comme ‘index.html’ et non pas comme ‘file:///C:/WebGilbert/index.html’
Par exemple pour le lien ‘Accueil’, dans l'onglet ‘Source’ vous devez lire :

    <a href="index.html">Accueil</a>


Sinon les liens fonctionneront parfaitement sur votre ordinateur mais ils poseront problème lorsque le site sera mis en ligne. Dans ce cas, faire…

Outils / Nettoyeur de balises / Nettoyer pour ‘Relativiser les URLs locales’ puis fermer.

Recopiez la barre de menu :
Recopiez la barre de menu complète dans toutes les pages Web
Sélectionnez toute la barre de menu puis faire Ctrl/C
Passez dans la page 1 puis Ctrl/V
Passez dans la page 2 puis Ctrl/V
Passez dans la page 3 puis Ctrl/V

Bien entendu, n'oubliez pas d'enregistrer toutes vos pages!...


Le contenu des pages

La page d’accueil
Ouvrez la page index.html
Format / Titre et Propriétés de la page... : complétez ou modifiez le titre, l’auteur et la description
Ici vous devriez choisir votre langue si vous voulez que le correcteur d'orthographe fonctionne, ainsi que le sens d'écriture.

Cette action doit être répétée pour toutes les pages : le titre de la page et les propriétés viennent remplir des zones qui sont examinées par les navigateurs (balises <title> de la page et balises <meta>), et qui leur permettront peut-être de trouver votre site lors d'une recherche !...

Revenez dans la page index.html. komp06

Entrez un titre après la barre de menu, écrivez ‘Titre de la Page d'accueil’
Sélectionnez le style ‘Titre 1’ (figure ci-contre)

Centrez ce titre ; (bouton ‘centrer’ de la barre d'outils) komp08

Choisissez la couleur de fond de la zone de titre komp07
(outil de sélection de couleurs, dans la barre d'outils) →
Enregistrer.

Entrez un texte après le titre, tapez ‘Enter’ puis saisissez le texte ;

Ajoutez une image après ce texte : une image de format Gif et de taille 200 x 250 pixels au maximum
Placez cette image dans le répertoire images ‘pict’ du répertoire ‘WebGilbert’
Après le texte tapez Enter puis
Insertion / Image / Parcourir → sélectionnez l’image
Vérifiez la taille de l’image (en bas à gauche)
Dans ‘Texte alternatif’ entrez le texte qui apparaîtrait au cas où le chargement de l’image échouerait, et dans ‘Vignette’ l'infobulle qui apparaît quand la souris passe sur l'image.
Dans l'onglet ‘Apparence’, précisez ‘Texte à droite’ par exemple.

Note : l’image ne doit pas être redimensionnée dans Kompozer mais, de préférence, dans un logiciel de traitement d’image, avant le chargement dans le répertoire ‘pict’.

Entrez un sous-titre après l’image, par exemple le commentaire de l'image.
Sélectionnez le style ‘Titre 2’ pour ce titre ;
Centrez ce titre → komp08
Choisissez la couleur de fond de la zone de titre → komp07

Enregistrez.


La page 1 Figure à gauche & texte à droite
Après un titre principal créez un bloc de texte précédé d’un sous-titre et illustré d’une image.
Ouvrez la page 1
Format / Titre et Propriétés de la page → complétez le titre de la page, l’auteur et la description.

En titre après la barre de menu, écrivez ‘Figure à gauche & texte à droite’
Sélectionnez le style ‘Titre 1’ pour ce titre ;
Centrez ce titre ;
Choisissez la couleur de fond ;
Enregistrez.

Ajoutez une image après ce titre : une image Gif de taille 200 x 250 pixels au maximum
Placez cette image dans le répertoire images ‘pict’ du répertoire ‘WebGilbert’
Après le titre tapez Enter puis
Bouton ‘Image’, onglet ‘Emplacement’ / Parcourir → sélectionnez l’image
Vérifiez la taille de l’image (en bas à gauche)
Dans ‘Texte alternatif’ entrez le texte qui apparaît si le chargement de l’image échoue
Onglet ‘Apparence
Espacement = 25 pixels à gauche et à droite de l’image ;
15 pixels en haut et en bas
Pas de bordure
Placement du texte → à droite de l’image / OK

Entrez un sous-titre après l’image,
Sélectionnez le style ‘Titre 2’ pour ce titre ;
Centrez ce titre ;
Choisissez la couleur de fond

Entrez un texte après le sous-titre :
Tapez Enter puis saisissez le texte ;
Enregistrez.


La page 2 Figures décalées & texte à droite
Après un titre principal créez trois blocs de texte précédés chacun d’un sous-titre et illustrés d’une image.
Ouvrez la page 2
Format / Titre et Propriétés de la page → complétez le titre, l’auteur et la description

En titre après la barre de menu, écrivez ‘Figures décalées & texte à droite’
Sélectionnez le style ‘Titre 1’ pour ce titre ;
Centrez ce titre → komp08
Choisissez la couleur de fond de la zone de titre → komp07
Enregistrez.

Entrez un sous-titre après le titre,
Sélectionnez le style ‘Titre 2’ pour ce titre ;
Centrez ce titre ;
Choisissez la couleur de fond

Entrez un texte après le sous-titre :
Tapez Enter puis saisissez le texte ;
Enregistrez ;

→ Entrez à la suite les sous-titres et le texte des blocs 2 et 3,

Ajoutez une image après chaque sous-titre : une image Gif de taille 200 x 250 pixels au maximum.
Placez cette image dans le répertoire images ‘pict’ du répertoire ‘WebGilbert’
Placez le curseur après le sous-titre puis
Bouton ‘Image’, onglet ‘Emplacement’ / Parcourir → sélectionnez l’image
Vérifiez la taille de l’image (en bas à gauche)
Dans ‘Texte alternatif’ entrez le texte qui apparaît si le chargement de l’image échoue
Onglet ‘Apparence
Espacement = 25 pixels à gauche et à droite de l’image ;
15 pixels en haut et en bas
Pas de bordure
Placement du texte → à droite de l’image / OK

Répétez l’opération pour les blocs 2 et 3
Enregistrez.


La page 3 : Exemple de tableau
Après un titre principal créez un tableau.
Ouvrez la page 3
Format / Titre et Propriétés de la page → complétez le titre, l’auteur et la description

En titre après la barre de menu, écrivez ‘Exemple de tableau’
Sélectionnez le style ‘Titre 1’ pour ce titre ; centrez ce titre ;
Choisissez la couleur de fond ;
Enregistrez.

Ajoutez un tableau après le titre : komp09
Après le titre tapez Enter, puis créez un tableau :
Bouton ‘Tableau’, onglet ‘précisément’ → 4 lignes, 2 colonnes, largeur 90% de la fenêtre, bordure 1
Bouton ‘Edition avancée’ onglet ‘Attributs HTML
Attribut = align / center / OK / OK
Entrez les intitulés et les valeurs dans le tableau,
Enregistrez.

BoutonHautDePage

5.4 Le code HTML généré par KompoZer


Cliquez sur l’onglet ‘Source’ pour visualiser le code HTML généré par Kompozer. On peut aussi, sur la page HTML, faire un clic droit / code source.

Voici le code HTML de notre page index.html tel qu'il a été généré par Kompozer version 8 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="direction: ltr;" lang="fr-fr">
<!-- code HTML généré par Kompozer version 8 -->
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Je fais mon site moi-même</title>
  <meta content="Gilbert Pernot" name="author">
  <meta content="Exemple de page index" name="description">
</head>

<body>
| <a href="index.html">Accueil</a> | <a href="page1.html">Page 1</a>
| <a href="page2.html">Page 2</a> | <a href="page3.html">Page 3</a> |
<a href="http://www.Google.fr/">Autre Site Web</a> | <a
href="mailto:gilbert.pernot@aliceadsl.fr">Contactez-moi</a> |<br>

<h1 style="text-align: center; background-color: rgb(255, 255, 204);">Titre
de la page d'accueil</h1>
Lorem ipsum dolor. Phasellus sed nisl. Integer rhoncus risus vitae
arcu. Praesent sed diam non justo sagittis vulputate. Etiam faucibus
posuere tortor. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Aliquam porta. Vestibulum lectus ante,
laoreet a, condimentum sit amet, dictum ac, sapien. Ut et tortor.
Aliquam vitae lacus. Vestibulum non pede eget ante elementum. Quisque
accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula
ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium
molestie.
<img style="width: 250px; height: 200px;" alt="bastia"
title="Bastia - Carte postale ancienne" src="pict/bastia.gif"
align="left"><br>
<h2 style="text-align: center;">Bastia - La vieille ville et la
citadelle <br>(carte postale ancienne)</h2>
<br>
<br>
<br>
</body>
</html>
BoutonHautDePage

5.5 Les feuilles de style CSS avec KompoZer


CaScadeS - L’éditeur CSS de Kompozer
Le code HTML donne une présentation par défaut. Si l’on souhaite une présentation soignée on peut utiliser CaScadeS qui est l’éditeur de styles CSS de Kompozer.
CSS veut dire « Cascading Style Sheets ». Il sert à la présentation et à la mise en page du site web.

Mise en forme des titres et du texte
Exemple : créer un style pour h1 komp66
Bouton ‘CaScadeS’ ; cocher ‘style appliqué aux éléments de même type ex :h2
Entrer ‘h1’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Texte’ ; Couleur ‘blue’ (ou choisir la couleur dans la palette)
Onglet ‘Fond’ ; Couleur choisir une couleur pâle dans la palette / OK

Le code CSS correspondant est inclus dans le code HTML et se présente comme ceci :

<style type="text/css">
h1 {
font-weight: bold;
font-family: "Times New Roman",Times,serif;
font-style: normal;
text-align: center;
background-color: #ffffcc;
}
</style>


Image de fond
Sinon, dans l’onglet ‘Fond’ de ‘CaScadeS’, sélectionner une image de fond, définir l’opacité, la répétition on non, la position, etc.

Le code CSS correspondant se présente comme ceci :

<style type="text/css">
h1 {
font-weight: bold;
font-family: "Times New Roman",Times,serif;
font-style: normal;
text-align: center;
background-image: url(Pict/Banniere.gif);
background-position: center center;
opacity: 0.77;
background-repeat: no-repeat;
color: #33ff33;
}
</style>


Mise en forme de l’image
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué aux éléments de même type ex :h2
Entrer ‘img’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Bordure’ Style ‘plein’ ; Epaisseur ‘2px’ ; Couleur ‘red
Onglet ‘Boite’ Espacements ‘10px’ partout

Définir de même les styles de h2, h3, body, p, cite, etc.

Notes
1) Pour un même sélecteur les styles sont inclus entre des accolades :
    h1 { font-weight: bold; }
2) Plusieurs styles pour un même sélecteur sont séparés par un point-virgule :
    h1 { font-weight: bold; text-align: center; background-color: #ffffcc; }
3) Les styles des différents sélecteurs sont placés sur des lignes différentes :
    h1 { font-weight: bold; text-align: center; background-color: #ffffcc; }
    h2 { font-weight: bold; color: red; }



Feuille CSS incorporée
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Feuille incorporée
Liste des médias ‘all’ (c'est-à-dire ‘screen’ et ‘print’) ; Titre ‘MesStyles
Créer la feuille de style’ / OK

Voici le code correspondant :

<style type="text/css"></style>
<style title="MesStyles" media="all" type="text/css"></style>


Créer un style pour h1
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué aux éléments de même type ex :h2
Entrer ‘h1’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Texte’ ; Couleur ‘blue’ (ou choisir la couleur dans la palette)
Onglet ‘Fond’ ; sélectionner une image de fond, définir l’opacité, la répétition on non, la position, etc.

Définir de même les styles de h2, h3, body, p, cite, etc.

Le code HTML est strictement le même que ci-dessus sauf qu’il apparaît une ligne supplémentaire :

Avant Après
 <head>
   <title>Document sans titre</title>
   <style type="text/css">
 h1 {font-weight: bold;
 …
   </style>
	
 <head>
  <title>Document sans titre</title>
  <style type="text/css"></style>
  <style title="MesStyles" media="all" type="text/css">
 h1 {font-weight: bold;
 …
  </style>
	



Sauvegarde des styles existants
Ouvrir index.html
Editeur ‘CaScadeS’ ; Sélectionner la ‘Feuille de style interne
Cliquer sur ‘Exporter la feuille de style et utiliser la version exportée
Sélectionner le répertoire principal et enregistrer sous ‘messtyles.css’ / OK / OK
Dans ‘Feuilles et règles’ de l’éditeur CSS il ne reste plus que la référence à ‘messtyles.css’


Le code HTML devient :

	<head>
		<title>Web Site N° 1</title>
		<style type="text/css"></style>
	<link media="all" rel="stylesheet" href="messtyles.css" type="text/css">
	</head>


Le code CSS :
Le fichier ‘messtyles.css’ du répertoire principal ne contient que les styles, il se présente comme ceci :

	/* Generated by KompoZer */
	h1 {
		font-weight: bold;
		font-family: "Times New Roman",Times,serif;
		font-style: normal;
		text-align: center;
		background-image: url(Pict/Banniere.gif);
		background-position:  center center;
		opacity: 0.77;
		background-repeat: no-repeat;
		color: #33ff33;
		}
	h2 {
		font-family: Arial,Helvetica,sans-serif;
		font-weight: bold;
		color: red;
		background-color: #ffffcc;
		text-align: center;
		}
	cite {
		color: blue;
		}
	p {
		background-color: #ffffcc;
		}
	img {
		border: 2px solid red;
		padding: 10px;
		}



Appliquer les styles aux autres pages
Ouvrir la page 1
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Feuille liée’ ; parcourir
Sélectionner le fichier ‘messtyles.css’ / open
Liste des média ‘all’ ; Titre ‘StylePage1’
‘Créer la feuille de style’
Appliquer le nettoyeur de balises pour relativiser les URL

Traiter de la même façon les pages 2 et 3


Styles en cascade et Priorité des styles
Les styles de mise en forme peuvent être définis à trois endroits différents :

1) Dans l’entête de la page <head>, entre les balises <style> et </style>

2) Dans le corps de la page <body> comme par exemple dans
<h1 style="background-color: rgb(51, 204, 255); text-align: left;">Figure gauche & texte à droite</h1>

3) Dans un fichier *.css lié à la page
Dans ce dernier cas il faut absolument effacer toutes les règles de style restant dans l’entête ou dans le corps de la page, autrement c’est le dernier style défini par ordre chronologique qui sera appliqué :
<h1 style="background-color: rgb(51, 204, 255); text-align: left;">Figure gauche & texte à droite</h1>
...doit donc être changé en
<p>Figure gauche & texte à droite</p>

BoutonHautDePage

5.6 Mise en page CSS d’un site web avec Kompozer


Il s’agit de réaliser une page web classique avec entête, menu, contenu et pied de page, entièrement mise en forme avec des CSS.

Structure du site Web

Répertoire principal
Créer un répertoire personnel ‘Photodart’ dans
E:\gilbert\MyWeb
Démarrer Kompozer et créer 4 pages vierges :

Page d’accueil - index (ou default)
Edition des sites / Nouveau site
1) Nom du site = Photodart
2) Parcourir/MyWeb
3) Nouveau site
Fichier/Enregistrer sous…
Titre de la page = ‘Photodart’ / OK
Nom de fichier = index.html / Enregistrer

Page 1, 2 et 3
Nouveau
Fichier/Enregistrer sous…
Titre de la page = ‘Page 1’ / OK
Nom de fichier = page1.html / Enregistrer
Nouveau
Fichier/Enregistrer sous…
Titre de la page = ‘Page 2’ / OK
Nom de fichier = page2.html / Enregistrer
Fichier/Enregistrer sous…
Titre de la page = ‘Page 3’ / OK
Nom de fichier = page3.html / Enregistrer

Répertoire des images
Nouveau dossier
Nom de dossier = ‘pict’
Glisser dedans les images Gif nécessaires.

Structure de la page
Ouvrir index.html et sur quatre lignes, entrer les mots :
Header
Menu
Text
Footer

Baliser et identifier l’entête
Sélectionner Header (tout le mot) par un double clic.
Dans laliste des styles, à la place de ‘Corps de texte’, sélectionner
Conteneur générique (div)

Le code source devient :
          <div>Header</div>

En mode normal, clic droit sur <div> / Propriétés avancées
Onglet ‘Attributs HTML’ ; Attribut ‘id’ ; Valeur ‘entete’ / OK
Note : l’id ‘entete’ est unique, il identifie le bloc entête

Le code source devient :
          <div id="entete">Header</div>

Baliser les autres blocs
Faire de même pour les blocs Menu, Text, Footer
Enregistrer

Le code source devient :

	<body>
	<div id="entete">Header</div>
	<div id="menu">Menu</div>
	<div id="corpstexte">Text</div>
	<div id="piedpage">Footer</div>
	</body>


Style CSS de l’entête

Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué à l’élément portant l’ID ex : #header
Entrer ‘#entete’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Bordure’ ; Style ‘plein’ ; épaisseur ‘1px’ ; Couleur ‘red
Onglet ‘Fond’ ; sélectionner une couleur claire ou une image de fond comme Banniere.gif, définir l’opacité, la répétition on non, la position, etc.
Onglet ‘Texte’ ; Couleur ‘yellow’ (ou choisir la couleur dans la palette)
OK pour fermer
Enregistrer

Titre de l’en-tête
Placer le curseur dans la zone de texte de l’en-tête et lui donner le niveau de titre 1
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué aux éléments de même type ex :h2
Entrer ‘h1’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Texte’ ; Couleur ‘yellow
Onglet ‘Boîte’ ; Marges : Haut ‘10px’ ; Bas ‘10px’ ; Gauche ‘10px’ ;
Enregistrer


Style CSS du menu

Après le mot ‘Menu’ créer les items de menu suivants :
Menu
Accueil
Page 1
Page 2
Page 3
Autre Site Web
Contactez-moi

Titre du menu
Placer le curseur dans le titre du menu et lui donner le niveau de titre 2

Boîte du menu
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué à l’élément portant l’ID ex : #header
Entrer ‘#menu’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Boîte’ ; Flottante ‘gauche’ ; Largeur ‘150px’ ; Marges : gauche 0px, droite10px
Onglet ‘Texte’ ; Arial 12px
Note : une boîte flottante veut dire que le texte va ‘couler’ autour.
Enregistrer

Liste à puces du menu
Après le titre‘Menu’, pour chaque chapitre du menu, on veut introduire des puces en CSS
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué aux éléments de même type ex :h2
Entrer ‘ul’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Texte’ ; Couleur ‘blue’ Times 14px Gras souligné
Onglet ‘Listes’ ; Puces ‘carrés pleins
Enregistrer


Style CSS du texte

Entrer un long texte après le titre ‘Text’
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué à l’élément portant l’ID ex : #header
Entrer ‘#corpstexte’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Boîte’ ; Marge gauche150px’ (uniquement si on ne veut pas que le texte soit flottant)
Onglet ‘Fond’ ; Couleur très claire
Enregistrer

Titre du texte
Placer le curseur dans le titre de la zone de texte et lui donner le niveau de titre 2
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué aux éléments de même type ex :h2
Entrer ‘h2’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Texte’ ; Couleur ‘blue
Onglet ‘Boîte’ ; Marges : Haut ‘10px’ ; Bas ‘10px’ ; Gauche ‘10px’ ;

Soulignement :
Onglet ‘Bordure’ ; décocher ‘utiliser le même style pour tous’ ; sélectionner ‘basse’ ‘cannelure


Style CSS du pied de page

Modifier le code HTML du pied de page comme ceci :

	<div id="piedpage">
	<h3>Footer</h3>
	</div>


Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué à l’élément portant l’ID ex : #header
Entrer ‘#piedpage’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Texte’ ; Hauteur de ligne ‘36px’ ;
Onglet ‘Fond’ ; couleur claire ;
Onglet ‘Boîte’ ; Marges : Haut ‘10px’ ; Bas ‘10px’ ; Gauche ‘0px’ ;


Classes d’images

Classe d’image à gauche du texte
Insertion/Image/parcourir sélectionner l’image ‘p01.gif’
Texte alternatif ‘p01’
Sélectionner l’image et clic droit sur <img> ; ‘Propriétés avancées’
Attribut ‘class’ ; Valeur ‘ImageGauche’ / OK
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué aux éléments de même classe ex : .maclasse
Entrer ‘.ImageGauche’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Boîte’ ; Flottante ‘gauche’ ; Marge droite ‘20px

Classe d’image à droite du texte
Insertion/Image/parcourir sélectionner l’image ‘p02.gif’
Texte alternatif ‘p02’
Sélectionner l’image et clic droit sur <img> ; ‘Propriétés avancées’
Attribut ‘class’ ; Valeur ‘ImageDroite’ / OK
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle’
Cocher ‘style appliqué aux éléments de même classe ex : .maclasse’
Entrer ‘.ImageDroite’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style’
Onglet ‘Boîte’ ; Flottante ‘droite’ ; Marge gauche ‘20px’

Classe d’image au centre du texte
Créer une ligne vide dans le texte à l’emplacement futur de l’image
Insertion/Image/parcourir sélectionner l’image ‘p03.gif’
Texte alternatif ‘p03’
Sélectionner l’image et clic droit sur <img> ; ‘Propriétés avancées’
Attribut ‘class’ ; Valeur ‘ImageCentre’ / OK
Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Règle
Cocher ‘style appliqué aux éléments de même classe ex : .maclasse
Entrer ‘.ImageCentre’ dans la fenêtre ; Cliquer sur ‘Créer la règle de style
Onglet ‘Boîte’ ; Marge gauche ‘45%’ (cette valeur dépend de la largeur de l’image)


Les liens
Dans la barre de menus suivante :
Accueil, Page 1, Page 2, Page 3, Autre Site Web, Contactez-moi

Liens internes
Sélectionner le mot ‘Accueil’
Clic droit / Créer un lien / Parcourir / Sélectionner ‘index.html’ / OK
Répéter l’opération pour toutes les autres pages

Lien vers un autre site Web
Sélectionner ‘Autre Site Web’
Clic droit / Créer un lien / Entrer l’adresse complète de ce site Web
Exemple : ‘http://www.Google.fr/’
Le lien doit s’ouvrir ‘dans une nouvelle fenêtre’ / OK

Lien vers une adresse électronique
Sélectionner ‘Contactez-moi’
Clic droit / Créer un lien / Entrer une adresse email
Exemple : ‘gilbert.pernot@tiscali.fr’
‘La valeur ci-dessus est une adresse électronique’ / OK

Vérifier que les URL sont relatives et non absolues :
Outils / Nettoyeur de balises / Nettoyer pour ‘Relativiser les URLs locales’ puis fermer


Sauvegarde des styles et du code source

Sauvegarde des styles
Ouvrir index.html
Appliquer le nettoyeur de balises pour relativiser les URL
Editeur ‘CaScadeS’ ; Sélectionner la ‘Feuille de style interne
Cliquer sur ‘Exporter la feuille de style et utiliser la version exportée
Sélectionner le répertoire principal et enregistrer sous ‘stylesPhotodart.css’ / OK / OK

Différentes présentations peuvent être obtenues en modifiant directement le code CSS.
Si l’on veut un style spécifique à chaque page il conviendra de copier ‘stylesPhotodart.css’ puis de l’enregistrer sous ‘stylesPage1.css’, ‘stylesPage2.css’ et ‘stylesPage3.css’. Ces trois feuilles de styles pourront être modifiées différemment par la suite.

Copie du code source dans les autres pages
Ouvrir index.html
Appliquer le nettoyeur de balises pour relativiser les URL
Ouvrir l’onglet ‘Source’
Sélectionner tout le code depuis <html> jusqu’à </html> puis faire Ctrl/C
Dans l’onglet ‘Source’ de la page 1 faire Ctrl/V ;
Dans l’en-tête, modifier le titre de la page :

	<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
	<title>Page1Photodart</title>


Et enregistrer
Dans l’onglet ‘Source’ de la page 2 faire Ctrl/V modifier le titre de la page et enregistrer
Dans l’onglet ‘Source’ de la page 3 faire Ctrl/V modifier le titre de la page et enregistrer

Un style spécifique à chaque page
Pour appliquer un style différent à chaque page, le plus simple est de faire une copie de la feuille de style pour chaque page, de renommer chaque copie, de modifier les styles suivant la présentation souhaitée dans chaque page, et de recopier le lien vers la feuille de style correspondante en prenant soin de modifier son titre et sa référence :

	<head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
	<title>Page1Photodart</title>
	<link title="StylesPage1" media="all" rel="stylesheet" href="stylesPage1.css" type="text/css">
	</head>


Sinon on peut aussi utiliser l’Editeur ‘CaScadeS’ ; Bouton palette (en haut à gauche) ‘Feuille liée’ ; parcourir ; Sélectionner le fichier ‘stylesPage1.css’ / open
Liste des média ‘all’ ; Titre ‘StylesPage1’
‘Créer la feuille de style’
Appliquer le nettoyeur de balises pour relativiser les URL

Traiter de la même façon les pages 2 et 3


Mise à jour du contenu

Bon, à présent, vous en savez autant que moi. Il ne vous reste plus qu’à mettre à jour le contenu de votre site, page par page, en le modifiant dans Kompozer. Ce sera très facile si vous avez réussi ce qui précède : amusez-vous bien !...

Mais maintenant que vous êtes bien familiarisé avec KompoZer, vous allez peut-être vouloir en savoir plus sur le code HTML. Dans ce cas, suivez ce lien.

BoutonHautDePage

5.7 La page de formulaire avec KompoZer


Le Formulaire en PHP
Dans une page web, un formulaire permet à l’utilisateur de nous envoyer des données par mail, même s’il n’a pas de logiciel de courrier électronique. Le formulaire est écrit en code PHP, il a besoin de 2 pages : la page de formulaire, et une page qui réceptionne les données du formulaire.

Pour que le formulaire fonctionne, on doit charger les fichiers sur notre serveur web. Celui-ci doit gérer le PHP et activer la fonction ‘mail’.
Pour pouvoir tester les scripts PHP qui suivent sur notre PC, et y accéder via un navigateur, il faut y installer PHP et un serveur web comme Apache, le leader du marché, rapide, fiable et gratuit. Se reporter plus loin au Chapitre ‘Installation d’un serveur web’.

Note : Le PHP (Hypertext Preprocessor), est un langage de scripts libre principalement utilisé pour être exécuté par un serveur HTTP, mais il fonctionne aussi comme n'importe quel langage interprété de façon locale, en exécutant les programmes en ligne de commande. Plus qu'un simple langage, PHP 5 est une plate-forme disposant d’une bibliothèque de procédures (fonctionnalités de modèle objet) très riche.


La page de formulaire avec Kompozer
Bouton ‘Nouveau’ pour créer une page vierge
Fichier / Enregistrer sous ‘Formulaire.php’
Placer le curseur au bon endroit
Insertion / Formulaire / Définir un formulaire
Nom = FormulairePhotodart1 (nous pouvons avoir plusieurs formulaires sur cette page)
Url de l’action EnvoiPhotodart.php (nom de la page de traitement des données)
OK
Enregistrer

Créer une zone de texte
Ecrire ‘Prénom et Nom :’ à l’intérieur du cadre bleu
Insertion / Formulaire / Champ de formulaire
Type de champ ‘Texte’
Nom du champ ‘nom’ / OK
Taper ‘Enter’ 2 fois pour créer 2 nouvelles lignes
Enregistrer

Créer des boutons radio
Ecrire ‘J’ai aimé ce site web’ à l’intérieur du cadre bleu
A la ligne suivante écrire ‘Un peu :
Insertion / Formulaire / Champ de formulaire
Type de champ ‘Bouton radio’
Nom du groupe ‘sondage’ ; Valeur du champ ‘UnPeu’
Cocher ‘Sélectionné initialement’ / OK
Taper ‘Enter’ pour créer une nouvelle ligne
Enregistrer

Ecrire ensuite ‘Beaucoup :
Insertion / Formulaire / Champ de formulaire
Type de champ ‘Bouton radio’
Nom du groupe ‘sondage’ ; Valeur du champ ‘Beaucoup’
Ne pas cocher ‘Sélectionné initialement’ / OK
Taper ‘Enter’ pour créer une nouvelle ligne
Enregistrer
Ecrire ensuite ‘Pas du tout :
Insertion / Formulaire / Champ de formulaire
Type de champ ‘Bouton radio’
Nom du groupe ‘sondage’ ; Valeur du champ ‘PasDuTout’
Ne pas cocher ‘Sélectionné initialement’ / OK
Taper ‘Enter’ 2 fois pour créer 2 nouvelles lignes
Enregistrer

Note : dans les boutons radio d’un même groupe on ne peut cocher qu’une seule case.

Créer des cases à cocher
Ecrire ‘Je suis membre du club :’ à la dernière ligne du formulaire
Insertion / Formulaire / Champ de formulaire
Type de champ ‘Cases à cocher’
Nom du champ ‘membre’ ; Valeur du champ ‘JeSuisMembre’
On peut cocher ‘Confirmé initialement’ si l’on veut / OK
Enregistrer

Bouton de validation
Le bouton de validation sert à envoyer le formulaire.
Taper ‘Enter’ 2 fois pour créer 2 nouvelles lignes
Insertion / Formulaire / Champ de formulaire
Type de champ ‘Bouton de validation’
Nom du champ ‘envoyer’ ; Valeur du champ ‘Envoyer’ / OK
Enregistrer

Bouton d’annulation
Le bouton d’annulation sert à effacer tout ce que l’utilisateur a saisi.
Entrer 2 caractères de tabulation
Insertion / Formulaire / Champ de formulaire
Type de champ ‘Bouton reset’
Nom du champ ‘annuler’ ; Valeur du champ ‘Annuler’ / OK
Enregistrer


Les mécanismes d’envoi par mail avec Kompozer
Rappel : Le formulaire a besoin de 2 pages, la page de formulaire que l’utilisateur remplit et une page qui envoie les données du formulaire par mail.
La page ‘Formulaire.php’ transmet les données dans la page ‘EnvoiPhotodart.php’ qui à son tour transmet les données par courrier électronique et qui peut en plus confirmer que les données ont bien été transmises.

Créer la page d’envoi des données par mail
Bouton ‘Nouveau’ pour créer une page vierge
Fichier / Enregistrer sous
Titre = ‘EnvoiPhotodart’ / OK
Nom de fichier = ‘EnvoiPhotodart.php’/ OK

Affichage des données
Les données envoyées par le formulaire vont se stocker dans une variable globale ‘$_POST’ du serveur web qui héberge le site (Toutes les variables commencent par un $ dans le langage PHP). Le serveur utilise cette variable ‘$_POST’ pour construire la page ‘EnvoiPhx.php’ dont voici les composantes :

sous-variable contenu
nom Gilbert Pernot
sondage Beaucoup
membre JeSuisMembre
envoyer Envoyer
annuler Annuler


La colonne ‘sous-variable’ contient les 5 sous-variables de la variable ‘$_POST’. Pour récupérer le contenu de la sous-variable ‘sondage’ on écrit :

$_POST[‘sondage’]


Récupérer le contenu du champ ‘nom’
Il s’agit d’extraire du serveur web les données de la variable $_POST.
Insertion / Code PHP / Entrer ce qui suit dans la fenêtre :

	$np = $_POST[‘nom’];
	echo "Votre nom est $np <br>";


/ OK
On place le contenu de la sous-variable ‘nom’ dans la variable $np = Gilbert Pernot
Puis on écrit dans la page web "Votre nom est Gilbert Pernot"
Enfin on envoie un saut de ligne <br>"

        • Pour tester
Installer PHP sur la machine locale ou bien ;
Installer les deux pages ‘Formulaire.php’ et ‘EnvoiPhotodart.php’ sur le serveur web
Ouvrir le site et aller sur la page ‘Formulaire’
Compléter la rubrique ‘Prénom et Nom’ et cliquer sur le bouton ‘Envoyer’
La page web ‘EnvoiPhotodart.php’ s’ouvre et affiche "Votre nom est Gilbert Pernot"

Sécurité des champs de texte Pour empêcher un utilisateur d’envoyer du code malveillant dans le champ ‘nom’ il faut le rendre inopérant grâce à la fonction ‘htmlentities’ de PHP. On écrit alors :

	$np = htmlentities ($_POST[‘nom’]);
	echo "Votre nom est $np <br>";


Sécurité d’un envoi de mail en PHP
Dès qu’on laisse à l’utilisateur la possibilité de remplir un champ texte quelconque, la fonction mail() peut être détournée par des spammeurs ou hackers à des fins malveillantes : pour envoyer par exemple un mail anonyme, ou pour une arnaque quelconque.

Le problème se pose si l'utilisateur peut choisir le contenu du sujet du mail, son message, l'expéditeur ou le destinataire. En introduisant des sauts de lignes ou des retours chariot il peut facilement ajouter des headers supplémentaires telles que Cc, Bcc, Content-Type contenant du code malveillant (html ou autre). De même les headers To, Subject, peuvent être définis deux fois dans le même but. Le détail est exposé sur le site :
http://www.phpsecure.info/v2/article/MailHeadersInject.php

Pour sécuriser ces failles d'injection de headers de mail, une idée parmi d’autres serait, après la ligne :

	$np=$_POST["nom"];

d'ajouter le code suivant :

	if (eregi("\r",$np) || eregi("\n",$np))
	{
	die("Why ?? :(");
	}

Le script est stoppé grâce à la fonction die() si l'expéditeur contient "\r" (le retour en début de ligne) ou "\n" (le saut de ligne ou "Carriage Return") ou la combinaison des deux. Le filtre vérifie tout ceci car il n'y a aucune autre raison que le piratage pour qu’ils soient utilisés.

Récupérer le contenu du champ ‘sondage’
Suivant la case cochée, le champ ‘sondage’ renvoie dans la variable $_POST les valeurs ‘UnPeu’, ‘Beaucoup’ ou ‘PasDuTout’.
Double-cliquer sur le marqueur PHP de la page ‘EnvoiPhotodart.php’ ;
Compléter le script PHP comme ceci :

	$np = htmlentities ($_POST[‘nom’]);
	$sonde = $_POST[‘sondage’];
	echo "Votre nom est $np <br>";
	echo "Vous avez aimé $sonde <br>";

Un bouton radio ne pose pas de problème de sécurité, la fonction ‘htmlentities’ est donc inutile.

Récupérer le contenu du champ ‘membre’
Suivant que la case est cochée ou non, le champ ‘membre’ renvoie dans la variable $_POST la valeurs ‘JeSuisMembre’ ou rien du tout.
Double-cliquer sur le marqueur PHP de la page ‘EnvoiPhotodart.php’
Compléter le script PHP comme ceci :

	$np = htmlentities ($_POST[‘nom’]);
	$sonde = $_POST[‘sondage’];
	if (isset($_POST[‘membre’]))
		$mbr = $_POST[‘membre’];
		else
		$mbr = "Je ne suis pas membre";
	echo "Votre nom est $np <br>";
	echo "Vous avez aimé $sonde <br>";
	echo "Affiliation : $mbr <br>";

Une case à cocher ne pose pas de problème de sécurité, la fonction ‘htmlentities’ est donc inutile.

        • Pour tester
Installer les deux pages ‘Formulaire.php’ et ‘EnvoiPhotodart.php’ sur le serveur web
Ouvrir le site et aller sur la page ‘Formulaire’
Compléter toutes les rubriques et cliquer sur le bouton ‘Envoyer’
La page web ‘EnvoiPhotodart.php’ s’ouvre et affiche "Votre nom est Gilbert Pernot" ainsi que tout le sondage.

Envoi du courrier électronique avec toutes les données
On utilise la fonction mail() de PHP qui a besoin des arguments suivants :
        • Adresse du destinataire
        • Sujet du mail
        • Texte du message
        • Nom de l’expéditeur, etc. dans des entêtes supplémentaires
Double-cliquer sur le marqueur PHP de la page ‘EnvoiPhotodart.php’
Compléter le script PHP comme ceci :

	$np = htmlentities ($_POST[‘nom’]);
	$sonde = $_POST[‘sondage’];
	if (isset($_POST[‘membre’]))
		$mbr = $_POST[‘membre’];
		else
		$mbr = "Je ne suis pas membre";
	echo "Votre nom est $np <br>";
	echo "Vous avez aimé $sonde <br>";
	echo "Affiliation : $mbr <br>";
	$message = $np."\n";
	$message .= "J’ai aimé $sonde \n";
	$message .= "Affiliation : $mbr \n";
	mail ("gilbert.pernot@tiscali.fr", "Sondage", $message, "From: $np");
	echo "Votre avis vient de m’être envoyé <br>";


La page de formulaire générée par Kompozer
Les instructions utiles sont en gras, la mise en forme vient de stylesPhotodart.css

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="direction: ltr;" lang="fr-fr">
<!-- code HTML généré par Kompozer version 8 -->
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>FormulairePhotodart1</title>
  <meta content="Gilbert Pernot" name="author">
  <meta content="Exemple de formulaire" name="description">
<link title="stylesPhotodart" media="all" rel="stylesheet" href="css/stylesPhotodart.css" type="text/css">
</head>
<body>
<h3>Attention ce formulaire ne marche pas</h3>
<br>
<cite>Après dégagement d'une légère fumée, votre ordinateur risquerait d'exploser! Ouafff, Ouafff...</cite>
<br>
<h4>Merci de fermer cette page</h4>
<br>
<form method="post" action="EnvoiPhotodart.php" name="FormulairePhotodart1">
Prénom et Nom :<input name="nom"><br>
<br>
J'ai aimé ce site web<br>
Un peu :<input checked="checked" name="sondage" value="UnPeu" type="radio"><br>
Beaucoup :<input name="sondage" value="Beaucoup" type="radio"><br>
Pas du tout :<input name="sondage" value="PasDuTout" type="radio"><br>
<br>
Je suis membre du club :<input name="membre" value="JeSuisMembre" type="checkbox"><br>
<br>
<input name="envoyer" value="Envoyer" type="submit">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<input name="annuler" value="Annuler" type="reset"><br>
</form>
</body>
</html>


l’instruction input envoie toutes les données dans la variable $_POST du serveur
on a séparé les 2 boutons ‘Envoyer’ et ‘Annuler’ par 6 caractères blancs = &nbsp;


La page d'envoi de mail générée par Kompozer

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="direction: ltr;" lang="fr-fr">
<!-- code HTML généré par Kompozer version 8 -->
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>EnvoiPhotodart</title>
  <meta content="Gilbert Pernot" name="author">
  <meta content="Exemple de page d'envoi de mail" name="description">
<link title="stylesPhotodart" media="all" rel="stylesheet" href="css/stylesPhotodart.css" type="text/css">
</head>
<body>
	<?php 
	$np = htmlentities ($_POST[&#8216;nomamp;#8217;]);
	$sonde = $_POST[&#8216;sondage&#8217;];
	if (isset($_POST[&#8216;membre&#8217;]))
		$mbr = $_POST[&#8216;membre&#8217;];
		else
		$mbr = "Je ne suis pas membre";
	echo "Votre nom est $np <br>";
	echo "Vous avez aim&eacute; $sonde <br>";
	echo "Affiliation : $mbr <br>";
	$message = $np."\n";
	$message .= "J&#8217;ai aim&eacute; $sonde \n";
	$message .= "Affiliation : $mbr \n";
	mail ("gilbert.pernot@tiscali.fr", "Sondage", $message, "From: $np");
	echo "Votre avis vient de m&#8217;&ecirc;tre envoy&eacute; <br>";
	?>
<br>
</body>
</html>


Quand, après la balise <form method="post" action="progr.php"> du formulaire, on envoie <input name="nom" type="text">, dans la page progr.php, la variable globale (tableau) $_POST renvoie la sous-variable nom suivante :

	$np = htmlentities ($_POST[&#8216;nom&#8217;]);


De même, si après la balise <form method="post" action="progr.php"> du formulaire, on envoie <input name="userfile" type="file">, dans la page progr.php, la variable globale (tableau) $_FILES renvoie les sous-variables nom suivantes :

        $_FILES[‘userfile’] [‘name’]; son nom,
        $_FILES[‘userfile’] [‘size’]; sa taille,
        $_FILES[‘userfile’] [‘type’]; son type, etc.

Voilà, vous en savez maintenant assez pour créer des formulaires avec KompoZer : vous allez pouvoir communiquer avec les internautes qui visiteront votre site.

Si vous souhaitez aller beaucoup plus loin et créer un blog par exemple, ou bien simplement compter vos visiteurs, ou enregistrer leurs coordonnées, vous trouverez sur le web de nombreux tutoriels sur le PHP et les bases de données MySql. C'est passionnant, je vous le recommande, mais cela va vous prendre pas mal de temps. Enfin, c'est çà les loisirs : çà prend du temps et c'est passionnant !...

BoutonPrecedent BoutonSommaire BoutonSuite Cette page s'affiche mal ? - cliquez ici


Architecture Web : Gilbert Pernot