Editer des pages web avec KompoZer
Nous allons voir qu'il est très simple de créer des pages web avec KompoZer. Il suffit d'ouvrir KompoZer et d'écrire, car KompoZer est WYSIWYG (what you see is what you get).
Titres
Comment créer un titre ? Il n'est pas nécessaire de taper dans l'onglet Source :
<h1> Mon beau titre </h1>
A la place, il suffit d'écrire "Mon beau titre" directement dans
l'onglet Conception.
de sélectionner le texte, puis d'aller dans le menu Format/Paragraphe
et de cliquer sur
Titre 1. Et voilà le résultat :
Paragraphes
Comment créer un paragraphe ? Il n'est pas nécessaire de taper dans l'onglet Source :
<p> Et voici comment débute mon paragraphe </p>
A la place, il suffit d'écrire "Et voici comment débute mon paragraphe"
directement dans l'onglet Conception.
de sélectionner le texte, puis d'aller dans le menu Format/Paragraphe
et de cliquer sur
Paragraphe. Et voilà le résultat :
Listes
Comment créer une liste ? Il n'est pas nécessaire de taper:
<ul>
<li>un élément</li>
<li>un autre</li>
<ul>
<li>un sous-élément</li>
<li>un autre</li>
</ul>
<li>encore un</li>
</ul>
A la place, dans le menu Format/Liste, on choisit Puces si on veut
une liste non ordonnée, Numérotation si on veut une liste ordonnée.
Puis on écrit les éléments de la liste (Entrée pour passer à l'élément
suivant, Tabulation pour créer une sous-liste).
Et voilà le résultat :
Tableaux
Comment créer un tableau ? Comme vous l'aurez compris, il n'est pas nécessaire de taper :
<table>
<tr>
<td>case haut gauche</td>
<td>case haut droit</td>
</tr>
<tr>
<td>case bas gauche</td>
<td>case bas droit</td>
</tr>
</table>
A la place, dans le menu Tableau/Insérer, on choisit un tableau de
taille 2x2. On écrit directement dans chacune des cases (tabulation
pour passer d'une case à la suivante). Et voilà le résultat :
Plusieurs opérations sont disponibles dans le menu Tableau pour modifier votre tableau.
Images
Comment insérer une image ? Oublions le code suivant :
<img src="images/logo_site_zero.png" />
Cliquons plutôt sur Image dans le menu Insertion. Dans la boîte de
dialogue, le premier des quatre onglets est le plus important. Il
possède trois champs à renseigner : adresse de l'image, vignette (texte
apparaissant comme info-bulle lorsque la souris survole l'image),
texte alternatif (texte apparaissant à la place de l'image lorsque
celle-ci ne peut pas être affichée). Et voilà le résultat :
Vous ne savez pas quoi écrire dans le champs Adresse ? Faites
un petit tour par là.
Liens hypertextes
Pour insérer un lien hypertexte, inutile de taper :
<a href="http://www.siteduzero.com/"> </a>
A la place, il suffit d'aller dans le menu Insertion/Liens et
d'entrer le texte à afficher ainsi que d'indiquer l'adresse du fichier
cible, qui peut aussi bien être une page web (html), une ancre, un
fichier image, audio, vidéo, pdf, etc. Et voilà le résultat :
Vous ne savez pas quoi écrire dans le champs Emplacement du lien ? Faites un petit tour par là.
Adresses (URL)
Que ce soit pour insérer une image ou un lien hypertexte, vous devez indiquez son adresse. Elle peut être complète (ou absolue) : protocole (http), nom du serveur, son domaine, la hiérarchie de dossiers dans laquelle le fichier cible se trouve. Par exemple :
http://www.siteduzero.com/Templates/images/designs/2/logo_sdz_fr.png
Elle peut aussi être relative et ne contenir seulement la hiérarchie de dossiers dans laquelle le fichier cible se trouve à partir de l'emplacement de la page web contenant l'image ou le lien. Par exemple :
images/logo_site_zero.png
Attention en revanche au bouton Parcourir qui remplit le champs du chemin permettant d'accéder au fichier cible sur le système de fichier de votre ordinateur de travail. Ce chemin n'est pas une URL.