Copyright: CODExpert - Tous droits réservés


Leçon Web Normale - 1
Page Web Normale

Étape 1 de 5

Bonjour, mon nom est Moca!  Je serai votre guide tout au long des leçons d'apprentissage de ce mini guide.  Nous allons tout d'abord construire votre première page web avec CODExpert.

Suivez moi....

Première étape:

•  Démarrez CODExpert cliquant sur son icône dans le menu Démarrer.

•  Dans la fenêtre d'accueil, sélectionnez l'item Document vide.

•  Dans la section de droite, choisissez un dossier pour enregistrer votre document. Cliquez sur le bouton [image] pour parcourir votre disque dur.  Dans ce cas j'ai sélectionné le dossier 'Site web' sur mon disque D.

   Vous pouvez inscrire un nom de dossier qui n'existe pas et CODExpert le créera pour vous.

•  Indiquez le nom de fichier sous lequel vous désirez enregistrer votre travail et cliquez sur OK.

Cliquez ici pour voir ce que je fais.

Suivant

CODExpert 1999 ©  Daniel Rodriguez


Leçon Web Normale - 2
Page Web Normale

Étape 2 de 5

CODExpert a d'abord créé un fichier sur votre disque dur et démarre avec une page vide.  La prochaine étape consiste à définir les propriétés de notre page web.

Deuxième étape:

•  Sélectionnez l'option Propriétés... du menu Structure.

Suivant

CODExpert 1999 ©  Daniel Rodriguez


Leçon Web Normale - 3
Page Web Normale

Étape 3 de 5

Dans la boîte de dialogue qui apparaît, il faut préciser les propriétés de base de la page web.

Troisième étape:

•  Dans la case Titre de la page, inscrivez Ma page web, par exemple. Cette information apparaît dans la barre de titre de votre navigateur (généralement à côté du nom du logiciel).

•  Vous pouvez aussi choisir une image de fond.  Indiquez dans le champ Image de fond de page, le nom d'un fichier d'image GIF ou JPG.

   Copiez cette image dans le même dossier que votre page web.  Dans mon cas, j'ai choisi le fichier nommé 'fond.gif'.

•  Cliquez sur OK.

Cliquez ici pour voir ce que je fais.

C'est aussi dans cette fenêtre que l'on spécifie la couleur du texte, du fond de la page lorsqu'on n'utilise pas une image de fond et la couleur des liens hypertextes.  Pour ce faire, il suffit de sélectionner l'onglet 'Couleurs'.

Suivant

CODExpert 1999 ©  Daniel Rodriguez


Leçon Web Normale - 4
Page Web Normale

Étape 4 de 5

Le fichier index.htm a été créé à la première étape sur notre disque dur.  Depuis cette étape nous avons ajouté des instructions sur notre page.  Il est maintenant temps d'enregistrer ces modifications sur le disque dur.

Quatrième étape:

•  Sélectionnez l'option Enregistrer du menu Fichier.

Suivant

CODExpert 1999 ©  Daniel Rodriguez


Leçon Web Normale - 5
Page Web Normale

Étape 5 de 5

À ce stade, votre page web ne contient rien.  Vous pouvez tout de même la charger dans votre Navigateur automatiquement à partir de CODExpert.

Notez:  La fonction Navigateur doit être correctement configurée pour réaliser cette opération!

Cinquième étape:

•  Cliquez sur l'icône Navigateur dans la barre d'outils.

•  Au message qui apparaît, cliquez sur Oui.

Suivant

CODExpert 1999 ©  Daniel Rodriguez


Leçon Web Normale - 6
Page Web Normale

Conclusion

Vous avez réalisé votre première page web avec CODExpert!  Vous pouvez maintenant, insérer des éléments graphiques (textes, images, etc.) dans le corps de la page, c'est-à-dire entre les balises <BODY> ... </BODY>.

Je vous propose maintenant d'autres petites leçons afin de découvrir les différents outils de CODExpert.

Je vais vous apprendre à insérer des marqueurs Html dans vos documents.

Prochaine leçon

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Marqueurs balisés - 1
Marqueurs balisés

Étape 1 de 2

Lorsque la base de la page Web est complétée, c'est-à-dire qu'elle contient les marqueurs <HTML>, <HEAD> et <BODY>, vous pouvez commencer à ajouter le texte et les images.

Rappelez-vous qu'il faut toujours inséser le contenu de la page entre des marqueurs <BODY> et </BODY>.

Le langage Html vous permet de formater facilement des caractères à l'aide de marqueurs balisés.  Ainsi, pour mettre un mot en gras, il suffit de l'enchasser entre des balises spéciales.

Par exemple:

Ma page <B>Web</B>.

Donne:

Ma page Web.

Le marqueur <B> ouvre la zone 'Caratère gras', et </B> ferme la zone.  Lorsque qu'une commande nécessite un marqueur de fermeture, il est important de ne pas l'oublier.

Voici quelques autres marqueurs qui nécessitent des balises d'ouverture et de fermeture.

<I> ... </I> : caratères italiques

<CENTER> ... </CENTER> : caratères centrés

<TABLE> ... </TABLE> : tableau

...

Suivant

CODExpert 1999 ©  Daniel Rodriguez


Leçon Marqueurs balisés - 2
Marqueurs balisés

Étape 2 de 2

CODExpert écrit tous les marqueurs Html à votre place.  Je vais vous montrer comment insérer ces marqueurs dans vos documents.

Première façon:

•  Positionnez le curseur dans le document à l'endroit où vous désirez insérer le marqueur.

•  Cliquez sur l'icône désiré dans la barre d'outils.  Ici, essayez Gras.

•  CODExpert insère les deux balises et positionne le curseur entre celles-ci.  Vous n'avez plus qu'à taper le texte.

Deuxième façon:

•  Lorsque le texte est déjà tapé, sélectionnez la portion de texte sur laquelle vous désirez appliquer une mise en forme.

•  Cliquez sur l'icône désiré dans la barre d'outils.  Ici, essayez Gras.

•  CODExpert insère les deux balises; l'une au début et l'autre à la fin de la sélection.

Prochaine leçon

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Insertion image
Insertion image

Nous allons insérer une image sur notre page.  Sur internet, seul les formats GIF et JPEG sont acceptés.  Trouvez un image sur votre disque dur et copiez-la dans le même répertoire que votre page Web.

Marche à suivre:

•  Positionnez le curseur dans le document à l'endroit où vous désirez insérer l'image et cliquez sur l'icône Image dans la barre d'outils.

•  CODExpert fait apparaître la fenêtre Image et ImageMap.

•  Inscrivez le nom du fichier dans le champ Source de l'image.  Si l'image se trouvait sur un autre serveur, inscrivez son URL complet.

•  Dans la case Texte aternatif, vous pouvez tapez une courte expression de remplacement si le navigateur ne charge pas l'image automatiquement.

•  Cliquez sur OK.

Cliquez ici pour voir ce que je fais.

Prochaine leçon

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Lien hypertexte
Lien hypertexte

Nous allons ajouter un lien hypertexte vers une autre page dans notre document.

Avant de procéder, créez une autre page web et enregistrer la dans le même répertoire.

Marche à suivre:

•  Positionnez le curseur dans le document à l'endroit où vous désirez insérer le lien et cliquez sur l'icône 'Lien hypertexte' dans la barre d'outils.

•  CODExpert fait apparaître la fenêtre Insertion Lien hypertexte.

•  Inscrivez le nom du fichier de la page visée par le lien dans le champ Référence hypertexte.  Si la page se trouve sur un autre serveur, inscrivez ou l'URL complet.

•  Cliquez sur OK.

•  Dans le texte, tapez une expression qui servira de zone cliquable dans le nanigateur.  Tout caractère compris entre les balises <A HREF="fichier> ... </A> apparaîtra comme lien cliquable dans le navigateur.

Cliquez ici pour voir ce que je fais.

Prochaine leçon

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Coloration du texte - 1
Coloration du texte

Étape 1 de 2

Afin de rendre le contenu de votre page plus attrayant, nous allons ajouter de la couleur à certaines parties de notre texte.

Dans notre exemple, le texte sera déjà tapé.  Il est aussi possible de régler la couleur à mesure que l'on tape le texte dans le document.

Nous utiliserons le marqueur <FONT>...</FONT> à cette occasion.

Première étape:

•  Sélectionnez une portion de texte dans la fenêtre de travail.

•  Cliquez sur l'icône Propriétés caractère dans la barre d'outils.

Suivant

CODExpert 1999 ©  Daniel Rodriguez


Leçon Coloration du texte - 2
Coloration du texte

Étape 2 de 2

CODExpert affiche la boîte de dialogue 'Propriétés caractère'.

Deuxième étape:

•  Dans la section Couleur, cliquez sur la zone d'aperçu de la couleur (le curseur se change en main lorsque vous passez au-dessus).

•  Dans la boîte de dialogue choisissez une couleur et cliquez sur OK.

•  Vous pouvez par la même occasion choisir la grosseur des caractères.  L'échelle des grandeurs s'étale de -2 (plus petit) à 4 (plus gros).  Dans la section supérieure de la boîte de dialogue cliquez sur une des valeurs, le 2 par exemple.

•  Cliquez sur OK.

Cliquez ici pour voir ce que je fais.

Prochaine leçon

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Édition de marqueurs
Édition de marqueurs

Disons que vous avez déjà inséré une image dans votre page Web.  Vous désirez maintenant modifier les propriétés de cette image.  Voici une méthode sûre qui vous permettra d'effectuer toutes les corrections sans risquer de créer des erreurs.

Il s'agit de la fonction AutoÉdition de CODExpert.

Marche à suivre:

•  Sélectionnez le marqueur dans votre document, ici prenons l'exemple d'une image.

•  Cliquez avec le bouton droit de la souris au dessus de la sélection et un menu apparaîtra.

•  Sélectionnez l'option 'Éditer...'

•  La boîte de dialogue correspondant au marqueur sélectionné apparaît à l'écran.  Effectuez les corrections et cliquez sur OK pour appliquer les modifications.

Prochaine leçon

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Création de Tableau - 1
Création de tableaux

Étape 1 de 4

Les tableaux permettent de créer des présentations spéciales.  La construction de tableaux est peut-être le concept le plus complexe en Html.  Voici la théorie de base sur les tableaux:

Définir un tableau:

<TABLE> ... </TABLE>

Définir une ligne de tableau:

<TR> ... </TR>

Définir une cellule:

<TD> ... </TD>

Pour définir un tableau à une seule cellule, voici les marqueurs à utiliser:

<TABLE>

<TR><TD>texte cellule</TD></TR>

</TABLE>

•  Toutes les lignes du tableau doivent être déclarées à l'aide de <TR>.

•  À l'intérieur des balises <TR>, on déclare les cellules.

Pour définir un tableau à quatre cellules, voici les marqueurs à utiliser:

<TABLE>

<TR><TD>Cellule1</TD><TD>Cellule2</TD></TR>

<TR><TD>Cellule3</TD><TD>Cellule4</TD></TR>

</TABLE>

Donne:

Suivant

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Création de Tableau - 2
Création de tableaux

Étape 2 de 4

Nous allons maintenant construire le tableau à quatre cellules avec CODExpert.

Première étape:

•  Positionnez le curseur dans le texte et cliquez sur l'icône Tableau dans la barre d'outils.

•  Dans la boîte de dialogue, tapez '1' dans la champ Border.

•  Cliquez sur OK.

Cliquez ici pour voir ce que je fais.

Suivant

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Création de Tableau - 3
Création de tableaux

Étape 3 de 4

Ensuite, nous allons définir les deux rangées du tableau.

Deuxième étape:

•  Positionnez le curseur entre les marqueurs <TABLE> ... </TABLE> et cliquez sur l'icône Ligne Tableau dans la barre d'outils.

•  Insérez à nouveau ce marqueur sur la ligne suivante comme dans le schéma ci-dessous.

Suivant

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Création de Tableau - 4
Création de tableaux

Étape 4 de 4

Enfin, nous allons définir les quatre cellules du tableau.

Troisième étape:

•  Positionnez le curseur entre les marqueurs <TR> ... </TR> et cliquez sur l'icône 'Cellule Tableau' dans la barre d'outils.

•  Pour l'instant, nous ne définirons aucun paramètre dans cette boîte de dialogue.  Cliquez simplement sur 'OK'.

•  De la même façon, insérez les 3 autres cellules.

•  Entre les marqueurs <TD> ... </TD> tapez votre texte.  Voici un exemple de disposition possible.

Nous avons terminé notre tableau.  Voici ce que ça donne dans un navigateur:

Table des matières

CODExpert 1999 ©  Daniel Rodriguez


Leçon Index des leçons
Table des matières

Listes les leçons:

Niveau débutant:

Base d'une page web

Insertion de marqueurs

Insertion d'images

Insertion hyperlien

Coloration du texte

Niveau intermédiaire:

Édition de marqueurs

Création de tableaux

CODExpert 1999 ©  Daniel Rodriguez