Créer sa page Web

 Débuter avec (Claris) Home Page 2.0. Création d'un petit site.


Afin d'apprendre les manipulations de base permettant de créer un site, je vous propose la réalisation de quelques pages sur le thème... d'une recette de cuisine.

Vous trouverez ci-dessous toute la marche à suivre, pas-à-pas, pour aboutir à notre page.

Afin que vous disposiez de tout le matériel nécessaire pour la construction de ce site, notamment des images, téléchargez-le. (Cette archive contient également les documents finaux. 140 Ko.)

Voyons tout d'abord le résultat final.


Marche à suivre :

  • Etape 1 : Préparation des divers éléments.

    - Avant d'ouvrir Home Page 2.0, au niveau du bureau, créez un dossier que l'on appellera "recette".
    (Attention à respecter dans cette marche à suivre tous les caractères majuscules/minuscules, cela pourrait être très important si le serveur destiné à héberger le site est une machine UNIX.)

    - Glissez à l'intérieur du dossier "recette" les images dont nous aurons besoin.

  • Etape 2 : Création de la première page. Options générales. Enregistrement.

    - Ouvrez Home Page 2.0; vous obtenez une nouvelle page vierge. (Si ce n'est pas le cas, sélectionnez la commande Nouvelle page, du Menu Fichier.)

    - Dans le Menu Edition, sélectionnez Options de document...
    (ou cliquez dans la palette sur Bouton Options de documents )
    -Cliquez sur la couleur du Fond.

    - Plusieurs moyens sont à votre disposition pour choisir une nouvelle couleur pour le fond de la page. Pour ma part, j'aime bien les "Crayons de cire". Sélectionnez la couleur blanche, puis cliquez sur OK.

    - Dans le champ Titre du document, saisissez le titre : "Recette : les moules farcies.". Cliquez sur OK.

    - Enregistrez le document : Dans le Menu Fichier, Enregistrer sous... Dans la zone de dialogue, saisissez le nom "recette.html", cliquez ensuite sur Bureau, repérez le dossier Recette, ouvrez-le, puis validez au moyen du bouton OK.
    (Nous enregistrons tout de suite le document dans le même dossier qui contient déjà les images, rendant ainsi la tâche plus facile par la suite.)

    !!! Attention (je ne vous le rappellerai plus dans cette marche à suivre), enregistrez régulièrement votre travail. Par exemple à la fin de chaque étape !!!

     

  • Etape 3 : "Titre" de la page.

    - De façon à ne pas coller notre texte sur le bord de la page, commençons par demander un retrait : dans la palette des outils, cliquez sur Retrait positif :

    - Saisissez le titre : "Moules farcies", Tapez deux fois sur la touche Retour (crée un nouveau paragraphe).

    - Ecrivez : "6 personnes", Tapez une fois sur la touche Retour.

    - "Préparation : 30 min.", Tapez une fois sur la touche Retour.

    - "Cuisson : 10 min.", Tapez une fois sur la touche Retour.

    - Insérez un filet horizontal au moyen de la touche correspondante dans la palette :

    - Tapez une fois sur la touche Retour.

    - Cliquez n'importe où sur la ligne "Moules farcies" (de façon à renseigner le programme sur le paragraphe auquel nous allons apporter des modifications).
    Dans le Menu local déroulant, sur la palette, sélectionner Titre 1.

    (peut aussi être atteint par l'intermédiaire du Menu Format.)

    - Cliquer dans la palette sur le bouton Centrer


  • Etape 4 : Les ingrédients.

    - Cliquez à la dernière ligne de la page.

    - Ecrivez le texte ci-dessous en plaçant à la fin de chaque ligne un Saut de ligne forcé (vous maintenez la touche Majuscule en tapant un Retour-chariot; cela force le texte à continuer sur la ligne suivante, mais cela ne crée pas un nouveau paragraphe).

    "250 g de beurre
    6 douzaines de grosses moules
    1 échalote
    2 gousses d'ail
    1 botte de persil haché
    1 cuil. à soupe de pastis
    Sel, poivre."

    - Tapez une fois sur la touche Retour.

    - Insérez un filet horizontal au moyen de la touche correspondante dans la palette :
    - Tapez une fois sur la touche Retour.
    - Sélectionnez tout le paragraphe contenant les ingrédients (depuis "250 g" jusqu'à "poivre".).
    - Cliquez sur le bouton Italique :

  • Etape 5 : La recette.

    - Cliquez à la dernière ligne de la page.

    - Saisissez le texte suivant :

    "Ramollir le beurre à température ambiante.", Tapez une fois sur la touche Retour.

    "Faire ouvrir les moules dans une marmite.", Tapez une fois sur la touche Retour.

    "Les décoquiller. Ne conserver qu'une seule coquille par moule.", Tapez une fois sur la touche Retour.

    "Malaxer le beurre avec l'échalote et l'ail hachés, le persil, le pastis.", Tapez une fois sur la touche Retour.

    "Saler et poivrer.", Tapez une fois sur la touche Retour.

    "Disposer 1 moule par coquille. Farcir avec le beurre. Les disposer au fur et à mesure sur des plats allant au four.", Tapez une fois sur la touche Retour.

    "Les mettre à four très chaud, position gril, environ 5 minutes.", Tapez une fois sur la touche Retour.

    "Servir aussitôt que le beurre est mousseux.", Tapez deux fois sur la touche Retour.


    - Sélectionnez tout le texte, depuis "Ramollir" jusqu'à "mousseux.".

    - Cliquez sur le bouton "Entrée non numérotée" :

  • Etape 6 : Intégration d'image.

    - Cliquez à la dernière ligne de la page.

    - Cliquez sur le bouton Image :

    - Dans la zone de dialogue qui s'affiche, sélectionner le fichier "assiette.GIF", puis cliquez sur Ouvrir.

    - Cliquez dans la palette sur le bouton Centrer

    - Cliquez sur l'image, la palette flottante de l'Editeur d'objet apparaît. Saisissez l'étiquette : "Moules farcies sur assiette".
    (Etiquette = ce qui sera affiché à l'écran chez les utilisateurs qui ont désactivé l'affichage automatique des images. Cette opération n'est pas indispensable, mais elle est... charitable.)

    (Il est possible à tout moment de modifier les paramètres d'un objet en le sélectionnant et en cliquant sur pour activer l'Editeur d'objet.)

  • Etape 7 : Pied de page.Lien sur adresse e-mail.

    - Cliquez à la dernière ligne de la page, puis créez un nouveau paragraphe en tapant une fois sur la touche Retour.

    - Ecrivez : "Quel vin s'accordera au mieux avec ce plat ? ". Tapez une fois sur la touche Retour.

    - Insérez un filet horizontal au moyen de la touche correspondante dans la palette :

    - Ecrivez : " Pour tout renseignement complémentaire, contactez-moi..."

    - Sélectionnez "contactez-moi...", puis cliquez sur le bouton de l'Editeur de lien :

    - Dans le champ URL, saisissez "mailto:eflaction@edunet.ch" (ou une autre adresse e-mail...).
    (Nous venons de créer un lien hypertexte qui provoquera l'affichage d'un formulaire d'envoi de courrier électronique lorsqu'un visiteur cliquera dessus. L'adresse du destinataire sera automatiquement placée. Pour créer un lien sur un autre document, le principe est exactement le même. Voir plus loin dans ce mode d'emploi.)

  • Etape 8 : Remplacement du fond blanc par une image de fond.

    - Dans le Menu Edition, Tout sélectionner.
    - Demander ensuite deux retraits : dans la palette des outils, cliquez deux fois sur Retrait positif :

    - Dans le Menu Edition, sélectionnez Options de document...
    (ou cliquez dans la palette sur Bouton Options de documents )

    - Dans la zone de dialogue, cliquez sur le bouton Définir... l'image de fond.

    - Sélectionnez le fichier "fond.GIF". Cliquez sur Ouvrir.

    - Validez avec le bouton OK.

    - Enregistrez, puis fermez votre page.


  • - Créez un nouveau document auquel vous donnerez le titre " Quel vin s'accordera au mieux ?" et que vous enregistrerez sous le nom "vin.html".
    (Voir si besoin les manipulations des étapes 2 et 3).

    - Attribuez un fond blanc à cette nouvelle page. (Voir étape 2)