Comment créer une page Web en dix étapes

Comment créer une page Web en dix étapes ?

Tutoriel WebExpert

Note: Une partie seulement du document original est utilisé pour illustrer le concept de lien interne.

ÉTAPE 1 : COMMENT CRÉER UN NOUVEAU DOCUMENT ET LE SAUVEGARDER

ÉTAPE 2 : COMMENT ENTRER DU TEXTE DANS VOTRE DOCUMENT HTML

ÉTAPE 3 : COMMENT VISUALISER LE RÉSULTAT DE VOTRE DOCUMENT AVEC LE NAVIGATEUR

ÉTAPE 4 : COMMENT INSÉRER UNE IMAGE DANS VOTRE DOCUMENT

ÉTAPE 1 : COMMENT CRÉER UN NOUVEAU DOCUMENT ET LE SAUVEGARDER

Pour créer un nouveau document (ou une nouvelle page Web), vous devez aller dans le menu "FICHIER" et sélectionner l'option "NOUVEAU".

WebExpert vous demandera alors de donner un titre, une descrition et un nom d'auteur à votre document (ces trois champs sont optionnels). Le titre représente le nom qui apparaîtra dans la barre de titre du navigateur. La description est utile pour identifier le document auprès des moteurs de recherche. L'auteur permet d'identifier la personne responsable du document. Par défaut, l'auteur est le nom d'enregistrement.

Une fois le titre, la description, l'auteur indiqués, le code HTML apparaîtra sous la forme suivante :

<!-- *************************************************

EDITEUR WEBEXPERT

DATE DE CREATION: 02-03-97

DERNIERE MODIFICATION: 01-10-97

************************************************** -->

<HTML>

<HEAD>

<TITLE>Titre du document</TITLE>

<META NAME="Author" CONTENT="Nom d'enregistrement">

<META NAME="Description" CONTENT="Description du document ">

<META NAME="Keywords" CONTENT="Mot clé1, Mot clé 2, Mot clé 3, etc..">

</HEAD>

<BODY>

Contenu du document

</BODY>

</HTML>

Le texte qui se trouve entre les balises <! ET > représente des commentaires qui n'apparaîtront pas dans votre page Web.

À cette étape, vous pouvez sauvegarder votre document afin de créer un fichier HTML. Pour ce faire, vous allez dans le menu "FICHIER" et sélectionner l'option "SAUVEGARDER". Donnez un nom à votre document dans la boîte de texte "NOM DE FICHIER".

Une fois votre document sauvegardé, le nom de fichier apparaîtra dans l'onglet en haut de la feuille d'édition. Sauvegardez votre document régulièrement afin de ne pas perdre vos nouvelles informations.

ÉTAPE 2 : COMMENT ENTRER DU TEXTE DANS VOTRE DOCUMENT HTML

Pour entrer du texte qui sera affiché dans votre page Web, vous devez inscrire ce texte entre les balises <BODY> ET </BODY>. BODY désigne le "CONTENU" ou le "CORPS" du document. Donc, tout le texte qui représente le contenu de votre document doit se trouver entre ces balises. Toute autre information entrée avant ou après les balises <BODY> ET </BODY> servira dans la description de votre document auprès du navigateur.

Si vous désirez mettre une partie de votre document en GRAS, vous devez la sélectionner et cliquez sur le bouton "GRAS" dans la barre d'outils "COMMUNS". Dans votre document HTML vous retrouvez les balises  ET indiquant que votre texte sélectionné est en GRAS.

<HTML>
<HEAD>
<TITLE>un titre</TITLE>
<META NAME="Author" CONTENT="PPPP">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
</HEAD>
<BODY>
Comment faire sa page avec WebExpert.
</BODY>
</HTML>

Si vous désirez mettre une partie de votre document en ITALIQUE, vous devez la sélectionner et cliquez sur le bouton "ITALIQUE" dans la barre d'outils "COMMUNS". Dans votre document HTML vous retrouvez les balises  ET indiquant que votre texte sélectionné est en ITALIQUE.

<HTML>
<HEAD>
<TITLE>un titre</TITLE>
<META NAME="Author" CONTENT="PPPP">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
</HEAD>
<BODY>
Comment faire sa page avec WebExpert.
</BODY>
</HTML>

Vous pouvez modifier les propriétés de votre texte, telles la taille, la couleur et la police de caractère en sélectionnant le texte que vous voulez modifier et cliquez sur le bouton "POLICE" dans la barre doutils "COMMUNS". Après avoir cliqué sur le bouton "POLICE", vous pourrez faire les changements que vous voudrez.

CENTRER VOTRE TEXTE

Vous pouvez centrer votre texte en le sélectionnant et en appuyant sur le bouton "CENTRER" dans la barre d'outils "COMMUNS". Le texte que vous avez sélectionné sera alors entouré des balises <CENTER> ET </CENTER>.

INSÉRER UN RETOUR DE CHARIOT DANS VOTRE DOCUMENT

Pour insérer un retour de chariot dans votre document, cliquez sur le bouton "RETOUR DE CHARIOT" qui se trouve dans la barre d'outils "COMMUNS". Cette commande ajoutera la balise   à votre document.

Pour insérer un paragraphe dans votre document, cliquez sur le bouton "PARAGRAPHE" qui se trouve dans la barre d'outils "COMMUNS". Cette commande ajoutera la balise  à votre document.

ÉTAPE 3 : COMMENT VISUALISER LE RÉSULTAT DE VOTRE DOCUMENT AVEC LE NAVIGATEUR

Pour visualiser le résultat de votre document HTML, vous pouvez utiliser le navigateur interne inclus dans WebExpert. Par défaut, le navigateur interne apparaît en dessous de la fenêtre d'édition.

Pour rafraîchir le résultat de votre document HTML, appuyez sur le bouton "LANCER LE NAVIGATEUR INTERNE" qui se trouve dans la barre d'outils "STANDARD" ou sur le bouton "ACTUALISER" qui se trouve entre la feuille d'édition et le navigateur interne. Vous pouvez faire disparaître le navigateur interne en appuyant sur F4. Appuyez à nouveau sur cette commande afin de le faire apparaître.

Il est à noter que le navigateur interne n'est pas aussi complet que le navigateur externe. Il est donc conseillé d'utiliser un navigateur externe pour visualiser le résultat final du document HTML.

Pour utiliser un navigateur externe vous devez appuyer sur le bouton "LANCER LE NAVIGATEUR EXTERNE" qui se trouve dans la barre d'outils "STANDARD". Cette commande fera appel à un navigateur externe, soit Netscape ou Explorer , qui chargera automatiquement votre document HTML.

Si vous n'avez pas spécifié de navigateur, la commande "LANCER LE NAVIGATEUR EXTERNE" fera appel au menu "PRÉFÉRENCES GÉNÉRALES", où vous pourrez spécifier l'endroit sur votre disque dur où se trouve le navigateur que vous voulez utiliser afin de visualiser votre document HTML. Si vous ne connaissez pas l'endroit exact sur votre disque dur où se trouve votre navigateur, sélectionnez le navigateur désiré, c'est-à-dire soit Netscape ou Microsoft Explorer . Cliquez sur le bouton "CHERCHER". Si le programme trouve l'un des navigateurs, cliquez deux fois sur le chemin du navigateur afin qu'il apparaisse dans la boîte de texte. Cliquez sur OK.

ÉTAPE 4 : COMMENT INSÉRER UNE IMAGE DANS VOTRE DOCUMENT

Pour insérer une image dans votre document:

Positionnez votre curseur à l'endroit désiré pour insérer l'image. Dans l’onglet "SPÉCIALISÉS", cliquez sur le bouton "IMAGE". Dans la boîte texte "IMAGE PRINCIPALE", aller chercher votre fichier image avec le bouton "OUVRIR" situé à droite de la boîte texte. Ceci ouvrira la fenêtre "OUVERTURE D’UN FICHIER GRAPHIQUE". Par exemple vous pouvez aller chercher une image qui se trouve dans le dossier de WebExpert à l'endroit suivant:

c:\Program Files\WebExpert2\pub\pub1.gif

Dans l'esquisse, vous pourrez alors visualiser l'image choisie en question. Le fichier doit être de format GIF ou JPG. Les boîtes de texte Image rapide, Alternative et Nom identificateur sont facultatives. Appuyez sur le bouton OK.

Dans votre document, la commande suivante sera insérée:

Afin de réduire les risques d'erreurs, il est conseillé de sauvegarder toutes vos images dans le même répertoire que celui de votre document HTML. De cette façon, les chemins d'accès des fichiers d'images ne seront pas inscrits dans le code HTML de votre document.