Atelier Composition Web

 PRINCIPE : Vous découvrez la structure interne d'une page Web et comment elle est construite. Vous utilisez vos signets.

1. Consulter la fiche technique "Composition web", lire le point " Qu'est-ce qu'une page web ? "

• Allez au 3e point vous faire une idée à quoi ressemble le html : ce sera utile pour la suite de votre travail (cliquez sur le lien " ICI ").

SENS : Une page Web utilise le langage universel des pages Web, le HTML. On notera que les images ne sont pas dans la page Web, mais appelées (en indiquant l'URL des images). L'utilisation des signets vous permet de retrouver plus rapidement une page Web visitée ultérieurement.

PRINCIPE : Vous préparez le fichier qui va devenir votre page personnelle et vous apprenez à enregistrer un fichier dans un emplacement précis de votre espace privé.

1. Lire le 2^e point de la fiche de ressource " Avec quel outil réaliser une page web ? "
2. Garder le navigateur Firefox ouvert
3. Ouvrir KompoZer, en cliquant sur Démarrer/Programmes/KompoZer
4. Dans KompoZer,
• Enregistrer le fichier sans titre : Fichier/Enregistrer
• L'outil demande que vous donniez un titre à la page (ce qui apparaîtra dans la fenêtre du navigateur et les marques-pages) - vous indiquez pour le moment " Page perso de votre nom "
• La fenêtre de sauvegarde du fichier apparaît et un nom de fichier par défaut est attribué sur base du titre que vous avez donné à la page. Vous le modifiez et vous le nommez " index.htm " 
• Vous sélectionnez le répertoire H:/PRIVE/pageperso et vous enregistrez.

SENS : Vous venez de réaliser votre première page HTML qui deviendra votre page d'accueil personnelle visible ultérieurement sur le Web. Vous la sauvez dans votre espace privé pour le moment, car elle est en cours d'élaboration.

PRINCIPE : Vous apprenez à introduire dans une page Web des tableaux dans lesquels vous allez pouvoir organiser des informations, des images et des liens (internes et externes). Vous savez faire la différence entre liens internes et liens externes.

C. Activité sur base d'un canevas de page : durée estimée - 1h25

1. La page perso que vous allez réaliser va avoir la structure ci-contre :
   En réalisant les différents éléments de cette structure, vous aurez passé en revue les éléments principaux constituant une page web.
   Cet atelier ne constitue bien entendu qu’un premier pas…








2. Si vous souhaitez plus tard changer le titre de la page, qui apparaîtra dans le menu titre du navigateur : Format / Titre et Propriétés de la page




3. Première étape dans la construction de votre page, créer un tableau dans lequel vous allez venir positionner les différents éléments du canevas. C'est la seule manière de structurer des éléments sur une page web.
   Avant d'insérer le tableau, faire un retour à la ligne puis cliquer sur l'icône du tableau , une fenêtre vous permet notamment de sélectionner le nombre de colonnes, de lignes et la taille de la bordure : par défaut, KompoZer indique 2 lignes/2 colonnes/bordure 1. Vous changez uniquement la bordure que vous passez à 0. Puis vous cliquez sur "OK"







SENS : Le HTML ne permet pas facilement les mises en pages subtiles. L'usage d'un tableau permet de définir des blocs dans la page.







4. Il s'agit maintenant d'insérer une image d'accueil que vous avez sauvée dans votre répertoire perso dans un précédant atelier : H:/PRIVE/pageperso/images (si vous n'avez pas pu la placer avant, appelez un tuteur)
           Positionner le curseur dans la cellule en haut à gauche du tableau (voir la structure de page ci-dessus)
           Insertion/Image : sélectionner l'image dans le répertoire H:/PRIVE/pageperso/images (pour voir les fichiers images: choisir le bon format de fichier (il existe deux formats principaux : .gif et .jpeg), puis cliquez sur Ouvrir

PRINCIPE : Nous avons en fait du code HTML qui va appeler l'image. Elle n'est pas vraiment insérée dans la page.

Sauvez le document (Fichier/enregistrer)…faites ça régulièrement comme dans tout travail de production sur un ordinateur…

    5. Insérer un lien interne : il s'agit d'un lien vers une page qui est interne à votre " site " pageperso. Pour rendre le bookmark (liste de signets) accessible depuis votre page perso, on va faire un lien vers ce fichier qui se trouve déjà normalement dans votre répertoire H:/PRIVE/pageperso (si ce n'est pas le cas, appelez un tuteur). Retenez que ce lien est " relatif ", vous irez voir dans la fiche online " Composition web " ce que cela signifie :

            commencer par écrire dans la cellule du tableau en bas à gauche, " Mes liens favoris "
            sélectionner le texte et en gardant dessus le pointeur de la souris, sélectionner " Lien " 
            dans la fenêtre de sélection du fichier, trouver le fichier bookmark.htm (dans H:/PRIVE/pageperso) et cliquer sur " Ouvrir "

SENS : Les liens hypertextes externes sont essentiels dans le Web pour relier les pages entre elles. Les écrans ne peuvent pas toujours permettre de voir toute la longueur d'une page, d'où l'intérêt des liens internes dans une page Web.

PRINCIPE : Pour établir un lien vers une position particulière de la page, il faut créer un repère ; il s'agit d'une ancre.

    7.Insérer une ancre  : il s'agit d'un lien à l'intérieur de la page qui permet de naviguer plus facilement surtout quand la page est un peu longue à faire défiler. Le principe est de  mettre une " ancre " à un endroit déterminé, vers laquelle on peut pointer depuis un lien dans la page. Une ancre très habituelle est celle qui permet de revenir en haut de la page. Pour le moment, votre page est encore vide et vous n'en verrez pas l'utilité mais dès qu'elle sera plus longue ce sera évident.

    Faire une sauvegarde du document (Fichier/enregistrer)

    Ajouter une indication de la date de mise à jour en bas de page

    Tester des fonctions de mise en forme

    Faire une sauvegarde du document (Fichier/enregistrer)

    Pour vérifier que vous avez bien réussi toutes les étapes : cliquer ici

Pour ceux qui voudraient aller plus loin : voir les ressources d'approfondissement.

SENS : Vous avez intégré dans votre page personnelle les éléments essentiels à connaître pour composer une page Web (tableaux, informations, liens, images). Vous savez mettre en forme des informations et créer des liens externes et internes. Cette page n'est pas encore visible sur le Web.
Au niveau du contenu, cette page représente un résumé partiel de votre situation et de vos centres d'intérêt. La date est un indice de validité des données. La référence à l'Université permet de contextualiser cette page ; on sait qu'il s'agit d'une page d'étudiant(e), dans le contexte d'un cours.