ExOmatiK.net : Collaboratif - Un site web de base mais sympa avec KompoZer

1. Présentation

KompoZer est un logiciel libre multi-plateforme destiné à la création et à l’administration de pages web, en mode visuel (WYSIWYG : What You See Is What You Get). Il est en quelque sorte le pendant libre de logiciels comme Dreamweaver, GoLive ou Frontpage.

KompoZer est le successeur du logiciel libre Nvu que son auteur ne maintient plus. KompoZer apporte de nombreuses fonctionnalités à Nvu et corrige certains bugs. On peut en télécharger une version portable sur le site portableapps à l’adresse :
http://portableapps.com/apps/development/nvu_portable

2. Créer un mini-site avec KompoZer

Ce qui suit est une adaptation de l’excellent http://info.sio2.be/kpz/. Le but est de créer un site dont le schéma serait le suivant :

3. Un dossier bien organisé

3.1 Créer le dossier et le projet

Commençons par créer un répertoire nommé «www» pour stocker les pages web (qu’on nommera aussi pages html) que nous allons créer ainsi que les les images que ces pages afficheront (sur la copie d’écran suivante, on voit que le dossier a été créé sur le bureau).

Démarrons KompoZer puis clic sur «Edit sites»

3.2 Créer la page d’accueil (index.html)

Dans le champ «Site name», on pourra taper Mon site perso
Cliquer sur «Select directory» pour sélectionner le répertoire «www» que nous avons créé.

Maintenant, nous pouvons créer les pages web de noutre projet. Pour cela nous allons enregistrer la page actuelle nommée «(untitled)» puis créer autant d’onglets que de pages. Chaque page aura

un contenu sous forme de texte et d’images
un titre (qui apparaît dans la barre de titre de la fenêtre du navigateur)
un nom (qui apparaît dans la barre d’url du navigateur)

Le nom «index.html» est le nom du fichier affiché par défaut par le serveur web qui rendra votre site accessible sur l’internet, il est donc important de réserver ce nom à la page d’accueil.

3.3 Créer les autres pages

Après avoir enregistré la page d’accueil, nous créons une nouvelle page en cliquant sur

et on renouvelle l’opération d’enregistrement pour créer nos trois autres pages :

3.4 Créer le dossier contenant les images

Il reste le dossier images à créer, pour cela, cliquer sur l’icône spécifique et donnez le nom «images».

Voilà l’arborescence complète :

4. Un menu pour bien naviguer

Afin de faciliter la navigation entre les différentes pages de notre site web, on aimerait proposer un menu comme celui-ci en haut de chaque page :

4.1 Des liens vers des pages du site

Après avoir tapé le texte de ce menu, on peut sélectionner le mot «Accueil». En cliquant sur l’icône «Link», on va rendre ce texte cliquable il faudra alors indiquer vers quelle page il pointe. Ce qu’on fait en sélectionnant la page dans la liste :

De la même manière on va faire pointer les autres titres du menu vers les bonnes pages.

4.2 Des liens vers des pages extérieures au site

Là encore on sélectionne un texte et on clique sur «Link» mais cette fois, il faudra saisir l’URL (Uniform Resource Locator, littéralement « localisateur uniforme de ressource », autrement dit l’adresse) du site web vers lequel le lien devra pointer :

4.3 Des liens vers des adresses de courrier électronique

On sélectionne un texte et on clique sur «Link» mais cette fois, il faudra saisir le mail puis cocher la case précisant qu’il s’agit d’une adresse email :

5. Un page bien composée

5.1 Des titres

Pour notre page d’accueil, nous allons placer un titre centré de grande taille sur fond coloré. Pour cela, commençons par saisir le texte sous le menu puis on choisit le format de paragraphe (ici «Heading 1» pour titre de niveau 1) puis la couleur de fond :

Afin de vérifier que tout cela correspond bien à la page web que nous souhaitons publier, on peut visualiser la page dans un navigateur en cliquant sur l’icône

5.2 Des images

Sous le titre, on souhaite insérer une image.

Tout d’abord plaçons l’image à afficher dans le répertoire «images» de notre projet.

Ensuite va cliquer sur l’icône «Image» puis allre chercher la photo dans le répertoire «images». Il faudra aussi rensigner le texte de remplacement à afficher en cas de problème de chargement de l’image (ou pour les navigateurs destinés aux aveugles).

Les dimensions d’une image affichée dans une page ne devraient jamais dépasser 500 pixels de large et 300 pixels de haut.

On peut placer du texte en regard de l’image en utilisant les onglets de la fenêtre d’insertion d’image. Par exemple pour la page sur le chanteur préféré.

5.3 Des tableaux

Le bouton permet d’ajouter un tableau facilement dans une page. Pour préciser on choisit l’onglet «Précisément»

En cliquant sur le bouton «Édition avancée…» on va pouvour modifier l’allure du tableau :

cellspacing : correspond à l’espace entre les bordures de deux cellules
cellpadding : correspond à l’espace entre la bordure et le texte à l’intérieur d’une cellule
border : correspond à l’épaisseur de la bordure

6. Le langage HTML

Voici le code html correspondant à page d’accueil :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta name="generator" content="HTML Tidy for Windows (vers 12 April 2005), see www.w3.org"> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
  <title>Mon premier site web</title>
  <meta content="Dominique Dupont" name="author">
  <meta content="La super page d'accueil de mon super site web" name="description">
 </head>
 <body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">

  <a href="index.html">Accueil</a> | 
  <a href="loisirs.html">Loisirs pr&eacute;f&eacute;r&eacute;s</a> |
  <a href="chanteur.html">Chanteur favori</a> | 
  <a href="chinois.html">Portrait chinois</a> | 
  <a href="http://info.sio2.be/">Site web pr&eacute;f&eacute;r&eacute;</a> |
  <a href="mailto:ddupont@sio2.be">M'&eacute;crire</a>

  <h1 style="text-align: center; background-color: rgb(204, 204, 255);">Dominique Dupont </h1>

  <h2 style="text-align: center;"> 
   <img style="width: 200px; height: 228px;" alt="Dominique Dupont" src="images/moi.png">
  </h2>

  <h2 style="text-align: center; background-color: rgb(255, 255, 204);">
   Ma classe: 7G 
  </h2>

 </body>
</html>

La première ligne indique le «doctype» : la déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite. Ici «HTML 4.01 Transitional». Cette déclaration permet de vérifier la syntaxe du document via le validateur du consortium W3C (http://validator.w3.org/) qui saura alors à quel modèle se référer.

On entre alors dans la balise <html> puis <head> dans laquelle diverse informations sur la page sont déclarées : titre, encodage des caractères, auteur…

la balise <head/> se ferme et on entre dans <body>. C’est le corps de la page : le contenu proprement dit. Sans entrer dans les détails de la syntaxe, la balise <a href=“lien.html”>cliquezMoi<a/> indique un lien hypertexte dont le texte est «cliquezMoi» et qui pointe vers lien.html. Les balises <h1..> et <h2..> désignent des titres de niveau 1 et 2.

Le code html se termine par la fermeture des balises encore ouvertes : <body/> et <html/>

7. Mettre le site en ligne chez un hébergeur

7.1 Un hébergeur gratuit ou payant

D’après Wikipédia :

Un hébergeur Internet (ou hébergeur Web) est une entité ayant pour vocation de mettre à disposition des internautes des sites web conçus et gérés par des tiers.

Il donne ainsi accès à tous les internautes au contenu déposé dans leurs comptes par les webmestres souvent via un logiciel FTP ou un gestionnaire de fichiers. Pour cela, il maintient des ordinateurs connectés 24 heures sur 24 au réseau internet (des serveurs web) par une connexion à très haut débit (plusieurs centaines de mbps), sur lesquels sont installés des logiciels : serveur web (souvent Apache), serveur de messagerie, de base de données …

7.2 Le ftp

Le protocole permettant de déposer les fichiers (html, images…) sur le serveur de l’hébergeur se nomme FTP pour File Transfert Protocole. Pour l’utiliser il faut utiliser un logiciel appelé client FTP. Il en existe de nombreux. Nous utiliserons le plus célèbre des clients FTP libres : FileZilla. On peut télécharger une version portable de FileZila sur le site framakey.org:
http://www.framakey.org/Portables/PortableFilezilla

Après avoir dézippé l’archive et lancé Filezilla, il faudra renseigner

L’adresse du serveur ftp
l’identifant pour s’y connecter
le mot de passe

(ces trois informations vous ont été communiquées par votre hébergeur)

Cliquez sur «Quickconnect»

Sous la fenêtre d’informations sur les étapes de connexion, les deux fenêtres disposées horizontalement présentent

À gauche le contenu de votre disque dur
À droite le contenu du répertoire qui vous est dédié sur le serveur chez l’hébergeur