FICHE RESSOURCES 1/20

Transcription

1 3DM2-R1 FICHE RESSOURCES 1/20 Vous allez produire (par groupe de 2) un petit site de présentation d une personne imaginaire selon la structure indiquée ci-dessous. I-MISE EN PLACE DE LA STRUCTURE DU SITE Avant de rentrer les informations que tu veux afficher sur ton site, tu dois mettre en place l'ossature du site. 1) Démarre l ordinateur sur Linux 2) A l'aide des outils du système d'exploitation crée un répertoire nommé «www» dans ton répertoire personnel : «Documents de ton nom sur le réseau». Le répertoire dans lequel on stocke un site internet s appelle toujours "www". 3) Démarre le logiciel KompoZer.

2 3DM2-R2 DEVELOPPEMENT MERCATIQUE FICHE RESSOURCES 2/20 KompoZer ressemble à un logiciel de traitement de texte, mais avec quelques outils supplémentaires : 1. La barre de titre 2. La barre des menus 3. La barre d'outils principale 4. La barre d'outils de structures 5. La barre d'outils de mise en forme 6. Les onglets de pages 7. La zone d'édition 8. Les onglets de modes d'édition 9. Le sélecteur de vue du mode "Conception". 10. La barre d'état 11. Le gestionnaire de sites (s il n est pas visible, appuie sur la touche F9) 12. La console FTP 13. L'explorateur DOM Certains éléments sont déjà bien connus (barre de menus, barres d'outils,...). Nous apprendrons à utiliser les autres progressivement.

3 3DM2-R3 FICHE RESSOURCES 3/20 4) Clique sur le bouton «éditer la liste de sites» de la barre d'outils du gestionnaire de sites. (S'il n'est pas visible à gauche sur ton écran, ouvre le gestionnaire de sites avec la touche «F9» du clavier). 5) Une nouvelle boîte de dialogue apparaît qui demande où tu souhaites placer les pages de ton site web. Cherche le répertoire www préparé à l'étape 1. 6) La fenêtre suivante s ouvre : 3 1 -Dans la zone «Nom du site», indique la mention «Mon premier site web». 2- Vérifie que l'adresse du répertoire www est bien indiquée à la rubrique Dossier du site. Si nécessaire, clique sur le bouton Parcourir afin de retrouver l'endroit où tu as créé ton répertoire www. 3- Clique sur OK

4 3DM2-R4 FICHE RESSOURCES 4/20 Le gestionnaire de sites doit maintenant se présenter comme sur l'illustration ci-contre. Il faut maintenant enregistrer la page vierge qui est présentée. Enregistrer une page vierge? Ca ne sert à rien! Pas du tout! Lors de la construction d'un site web, un point essentiel est de penser à sa structure. Les pages vierges sont, en quelque sorte, l'ossature du site web que nous allons construire. Lors du premier enregistrement d'une page avec KompoZer, il faut fournir deux informations : - Le titre de la page : c'est le titre qui apparaîtra dans la barre de titre de la fenêtre du navigateur. Exemple : - Le nom du fichier dans lequel la page va être enregistrée. Ce nom ne doit comporter ni accent, ni espace! Exemple : «Presentation_du_site.html» 8) Dans le menu «Fichier» sélectionne la commande «Enregistrer sous...» 9) Indique le titre de la page «Accueil», dans la boîte de dialogue qui apparaît. 10) Clique sur le bouton OK.

5 3DM2-R5 FICHE RESSOURCES 5/20 La boîte de dialogue d'enregistrement de fichier apparaît : 11) Recherche ton répertoire «www». Actuellement, ce répertoire est vide. 12) Comme dans la copie d'écran ci-dessous, indique le nom «index.html» pour la page d'accueil à la place du nom par défaut «Accueil» et clique sur «Enregistrer». index.html! Personnellement, je ne trouve pas cela très poétique. Pourquoi pas "ma jolie page web.html"? Parce que la page d'accueil d'un site web doit obligatoirement être nommée «index» ou «default». C'est la page qui est envoyée lorsqu on ne précise pas d'adresse dans le navigateur.

6 3DM2-R6 FICHE RESSOURCES 6/20 Dans le gestionnaire de sites, la page index.html doit apparaître. Si elle n'était pas visible, clique sur le bouton «Actualiser». OU Clique sur le «+» pour qu il devienne un «-» Tu vas maintenant pouvoir créer et enregistrer les trois autres pages du site : 13) Clique sur le bouton de la barre d'outils. Une page vierge s'ouvre dans un nouvel onglet. Cette page est actuellement sans titre. 14) Enregistre cette page dans «www» (menu «Fichier» sélectionne la commande «Enregistrer sous...»). Titre de la page : «Mon chanteur préféré», le nom de fichier est «chanteur.html». 15) En utilisant la même méthode, enregistre au même endroit deux autres pages vierges : Titre de la page : Mes loisirs préférés Nom du fichier : loisirs.html Titre de la page : Mon portrait chinois Nom du fichier : chinois.html La structure générale de ton site web est maintenant créée. Elle contient les quatre fichiers HTML vides. Si la structure complète n'apparaît pas, clique sur le bouton Actualiser. Pour finir la structure du site, il faut créer un répertoire pour les images. Toutes les images qui apparaîtront dans ce site web seront enregistrées dans un répertoire particulier. 16) Dans le gestionnaire de sites, clique sur le bouton «Nouveau dossier».

7 3DM2-R7 FICHE RESSOURCES 7/20 17) Dans la boîte de dialogue, indique le nom du nouveau répertoire, comme sur l'illustration : Si le répertoire images n'apparaît pas dans le gestionnaire de sites, clique sur le bouton «Actualiser». Quand tu en es là, montre ton travail au professeur. II-BARRE DE MENUS DU SITE WEB : LES LIENS INTERNES Un site web bien conçu présente des moyens de navigation clairs. Nous allons établir une barre de menus, en haut de la page d'accueil. Cette barre de menus figurera ensuite sur toutes les pages du site : 1) Ouvre la page d'accueil en sélectionnant «Accueil», et copie le texte du menu. Chacune des rubriques est séparée de sa voisine par un trait vertical (Alt gr+6) : Accueil Loisirs préférés Chanteur favori Portrait chinois Site web préféré M écrire Dans notre menu, il est prévu de pouvoir sélectionner les quatre pages personnelles (Accueil, Loisirs, Chanteur, Portrait), un lien vers un site web préféré et un lien vers une adresse de courrier électronique. En cliquant sur chacun des intitulés des rubriques, nous allons pouvoir naviguer vers chacune des pages du site web: page d'accueil, loisirs préférés, chanteur favori et portrait chinois. Pour cela il faut transformer notre texte en lien hypertexte.

8 3DM2-R8 FICHE RESSOURCES 8/20 2) Sélectionne le mot «Accueil» du menu. 3) Choisis une des trois méthodes suivantes pour rentrer le lien : a- Dans le menu «Insertion», choisis la commande «Lien...» OU b- Utilise le raccourci Ctrl+L OU c- Clique droit sur la sélection et choisis la commande «Créer un lien dans le menu contextuel» Une nouvelle boîte de dialogue nous invite à indiquer le lien prévu lorsque le visiteur cliquera sur le mot Accueil. 4) Dans la boîte de dialogue des propriétés du lien, clique sur l icône. 5) Recherche le fichier «index.html» qui est la page d'accueil. 6) Clique sur le bouton «OK» lorsque le fichier a été trouvé. Vous êtes sûr de votre coup? Mon voisin n'a pas ça sur son écran. À la place d index.html, il y a une notation des plus bizarres. Regardez, je vous en fais une copie : Ton voisin n'a pas bien suivi les consignes! On obtient ce type de résultat lorsque la page actuelle n'est pas enregistrée. Il faut toujours enregistrer les pages avant d'établir des liens.

9 3DM2-R9 DEVELOPPEMENT MERCATIQUE FICHE RESSOURCES 9/20 7) Etablis les liens vers les autres pages du site web (chanteur.html, loisirs.html et chinois.html) de la même façon : - Sélectionne le texte sur lequel se fait le lien. - Ouvre la boîte de dialogue «Propriétés du lien» à l aide d une des 3 méthodes. - Pointe vers la page liée. Bah, ça ne marche même pas votre truc! Je passe la souris sur les liens que je viens de mettre en place, je clique comme un fou mais il ne se passe rien! Heureusement qu'il ne se passe rien. Si les liens fonctionnaient dans KompoZer, il deviendrait très difficile d'y apporter des modifications. Un petit clic sur un mot pour corriger l'orthographe, et hop... on serait emporté au loin. 8) Pour tester le fonctionnement des liens, clique sur le bouton «Navigateur» de la barre d'outils. La page d'accueil s'ouvre dans le navigateur. 9) Clique sur n'importe lequel des liens de la page d'accueil. Dans le navigateur, les 4 liens doivent fonctionner. Ils ne mènent toutefois qu'à une page blanche. Ce qui est normal, puisque nous n avons encore rien écrit dans ces pages. III-BARRE DE MENUS DU SITE WEB : LES LIENS EXTERNES Il reste encore, dans la barre de menus, deux liens dont nous ne nous sommes pas occupés : - Le lien vers un autre site web (Site web préféré) - Le lien vers l'adresse de courrier électronique (M'écrire) Nous les qualifierons de liens externes, car ils ne font pas référence au site web lui-même. Pour établir un lien vers un autre site web, il faut obligatoirement indiquer l'adresse complète de la page d'accueil de ce site web.

10 3DM2-R10 FICHE RESSOURCES 10/20 1) Vas sur internet, et cherche un site web qui te plait. Copie l adresse complète de ce site (dans la barre d adresse). 2) Sélectionne le mot «Mon site web préféré» du menu. 3) Choisis une des trois méthodes pour rentrer le lien 4) Copie l adresse du site web que tu as copié à la question 1) dans la zone de texte sans cliquer sur l icône. 5) Enregistre ton travail. Aucun doute que ton site web ne laisse personne indifférent. Chaque visiteur voudra pouvoir te contacter par courrier électronique. Il serait donc bon d'ajouter un lien vers ton adresse électronique sur chaque page. Utilise ton adresse mail du collège (login@clg-monnet-briis.ac-versailles.fr) *Login = ton identifiant linux ou Windows 6) Dans la barre de menus, sélectionne le texte M'écrire. 7) Choisis une des trois méthodes pour rentrer le lien 8) Dans la boîte de dialogue qui suit, indique le lien vers ton adresse et coche la case «La valeur ci-dessus est une adresse électronique». 9) Clique sur OK. 10) Vérifie que le lien est bien correct : en passant la souris sur le lien, l'adresse électronique doit être précédée de l'indication mailto.

11 3DM2-R11 FICHE RESSOURCES 11/20 11) Enregistre ton travail. Dans cet exercice, on t'apprend à indiquer ton adresse dans un site web. Parce qu'il est bon de savoir comment faire. En réalité, c'est devenu une pratique peu recommandable car de nombreux robots parcourent le web à la recherche d'adresses . Ces adresses sont ensuite stockées dans des banques de données et sont vendues à des spammeurs. Quand tu crées un site, génère une adresse mail exprès pour. IV-BARRE DE MENUS DU SITE WEB SUR CHAQUE PAGE DU SITE WEB La barre de menus du site est maintenant complète. Le menu, tel qu'il a été conçu sur la page d'accueil, peut être reproduit sur toutes les pages du site web. Il n'est pas nécessaire de recommencer toute l'opération de création de menu : il suffit de copier/coller le texte déjà rédigé. 1) Sélectionne l'ensemble de la barre de menus. 2) Copie-la dans le presse-papiers (Ctrl+ C OU «Edition» puis «Copier») 3) Ouvre chacune des quatre pages du site web et colle dessus le contenu du presse-papier (Ctrl+ V OU «Edition» puis «Coller») 4) Enregistre chacune des pages. Vous trouvez ça intéressant de faire un lien depuis la page d'accueil (index.html) vers la page d'accueil (index.html)? Ou encore de la page chanteur.html vers la page chanteur.html? Et cela sur chaque page Il est vrai que cela n'a pas beaucoup de sens. Je vous propose donc de supprimer les liens de chaque page vers elle-même (les auto-liens).

12 3DM2-R12 FICHE RESSOURCES 12/20 V-SUPPRIMER LES AUTO-LIENS 1) Ouvre la page d'accueil en sélectionnant «Accueil» 2) Dans le menu de navigation du site, double clique sur le lien qui pointe vers la page d'accueil. 3) Dans la boîte de dialogue des liens, supprime le lien inutile vers le fichier index.html 4) Clique sur le bouton «OK» 5) Faire la même opération pour chaque page du site (Mon chanteur préféré, mes loisirs préférés et mon portait chinois) : - Ouvre la page en cliquant sur l onglet avec son nom - Double clique sur le nom correspondant dans le menu - Supprime le lien - Clique sur «OK» 6) Les différentes pages contiennent toutes le menu de navigation sans les auto-liens. Nous pouvons maintenant les tester dans le navigateur. 7) Dans la barre d'outils de composition, clique sur le bouton «Navigateur» : - Passe chacune des quatre pages en revue grâce aux liens, et vérifie que chaque page n a plus d auto-lien. - Vérifie que le lien externe vers ton site web préféré fonctionne. - Vérifie que le lien vers ton adresse électronique ouvre un logiciel de courrier électronique. Vous êtes comique, vous. Je clique, je clique,... mais j ai qu'une page blanche à chaque clic. Ça n'a pas l'air de fonctionner Effectivement, c est une page blanche. Mais vous pouvez vérifier qu'il s'agit bien de la bonne page. A chaque fois, examine son titre ou même simplement le nom du fichier dans la barre d'adresse du navigateur.

13 3DM2-R13 FICHE RESSOURCES 13/20 VI-RÉDACTION DE LA PAGE D ACCUEIL : PAGE DE PRÉSENTATION La page d'accueil inclut la présentation personnelle: nom, prénom, classe et une photo ou image. Nous allons mettre en place ces éléments fondamentaux de ton site web. Pour cet exercice tu peux utiliser une identité imaginaire ou ta propre identité. Dans les deux cas ce site ne sera pas mis en ligne sur internet. L'en-tête de la page d'accueil sera formé du nom et du prénom. Dans l'exemple, l'élève s'appelle «Dominique Dupont». 1) Ouvre, si nécessaire, la page d'accueil nommée «index.html». 2) Ecris le nom et le prénom sur la ligne qui suit la barre de menus. 3) Différents niveaux de titres et sous-titres peuvent être définis dans un site web. Dans le cas présent, le nom et le prénom sont le titre principal. Nous allons donc lui attribuer le niveau «Titre 1». 4) Clique dans la ligne où figure ton nom. (Il n'est même pas nécessaire de sélectionner ce texte). 5) Déroule la liste des styles (où est actuellement indiqué «Corps de texte») et sélectionne le niveau «Titre 1». Curieux autant que bizarre! Je n'ai sélectionné aucun texte et voilà que l'ensemble des caractères prend un nouvel aspect... Cela n'a vraiment rien de curieux, à vrai dire. C'est même normal. Le style Titre 1 est un style de paragraphe. Il serait même impossible d'appliquer le style à quelques caractères sélectionnés du paragraphe. 6) Choisis une couleur de fond pour cette zone de titre à l'aide de l'outil de sélection de couleurs, dans la barre d'outils. 7) Centre ce titre en utilisant le bouton de la barre d'outils de mises en forme.

14 3DM2-R14 FICHE RESSOURCES 14/20 8) Enregistre ton travail. Sur la page d'accueil figurera une photo de la personne présentée (photo récupérée sur internet) L image doit être au format jpg avec une taille qui ne doit pas excéder 200 pixels de large et 250 pixels de haut. Oh là! Je vois que vous parlez martien très couramment... Ca veut dire quoi, tout ça? Chaque image numérisée est formée, comme une photo dans un journal, d'un certain nombre de points appelés "pixels" (abréviation de "picture element", en anglais). On peut parfaitement les voir sur l'image très agrandie ci-contre. Le format JPG désigne un type d'images très courant sur le web. Les logiciels de traitement d'images permettent le plus souvent d'enregistrer les images au format JPG. Si la photo est trop grande, il faut la redimensionner. Si elle est vraiment trop petite, il vaut mieux en choisir une autre. Voilà qui est bien ennuyeux! Je dispose d'une supeeeeerbe photo de moi mais elle dépasse aussi largement les dimensions que vous dites. Il n'y aurait vraiment pas un moyen? Bien sûr, qu'il y a un moyen. Il suffit de disposer d'un petit logiciel de retouches photos, du type The Gimp ou Photo Filtre. Tous deux sont gratuits et très efficaces. 9) Enregistre ta photo dans le sous-répertoire images du répertoire www. 10) Place le curseur de texte derrière ton nom et insère un nouveau paragraphe en appuyant sur la touche «Entrer». 11) Dans le menu «Insertion», sélectionne la commande «Image»

15 3DM2-R15 FICHE RESSOURCES 15/20 12) Dans la boîte de dialogue qui apparaît, clique sur le bouton, afin de rechercher ta photo enregistrée dans le répertoire images de ton site web. Lorsque l'image est sélectionnée, la boîte de dialogue de KompoZer revient au premier plan. Les dimensions de l'image sont indiquées en pixels. Dans le cas présenté en exemple, l'image mesure 200 pixels de large et 228 pixels de haut. Ce qui est bien dans les normes demandées. 13) Dans la zone Texte alternatif, indique un nom en lien avec l image. Ce texte apparaîtra dans le navigateur si l'image ne peut être reçue (serveur surchargé, connexion de mauvaise qualité,...) 14) Si ta photo présente les dimensions qui conviennent, clique sur le bouton «OK». Sinon, redimensionne l'image avec un des logiciel afin qu'elle soit dans les dimensions demandées (200x250 au maximum). Demande conseil au professeur sur la façon d'utiliser l'un des logiciels cités. Fastoche! Tout est prévu dans l'onglet "Dimensions" de la boîte de dialogue "Propriétés de l'image". 15) Enregistre ton travail. N'y pensez-pas, malheureux! Ce serait une *très* mauvaise idée!! Pour modifier les dimensions d'une image, il faut obligatoirement utiliser un logiciel de traitement d'images. Si on modifie les dimensions d'une image telle qu'on la voit dans KompoZer, cela ne change absolument rien au poids du fichier sur le site. Ainsi, on trouve sur certains sites des images toutes petites qui mettent énormément de temps à apparaître car la taille réelle de ces images n'a, en réalité, pas été modifiée. 16) Sous la photo, insère la mention de ta classe.

16 3DM2-R16 FICHE RESSOURCES 16/20 17) Impose le style Titre 2 à ce sous-titre, en utilisant la même méthode que pour le titre de niveau 1, ci-dessus. 18) En utilisant les outils de mise en forme adéquats, modifie ta page pour qu'elle se présente comme l'exemple. Les outils adéquats? C'est vague, ça C'est vague, en effet. Cherche donc un peu dans la barre d'outils. 19) Enregistre ton travail. Hâââ!! Un cadre rouge est venu entourer ma photo quand je l'ai centrée. Je n'ai pas demandé ça, moi!! Effectivement, pour le confort de l'utilisateur, certaines zones se trouvent encadrées d'un cadre rouge par KompoZer, mais ces cadres n'apparaissent pas dans le navigateur lors de la visite du site web. VI-RÉDACTION DU PORTRAIT CHINOIS Tu connais la technique du portrait chinois. On décrit une personne en imaginant ce qu'elle serait si elle était un objet, un animal, une qualité,... Dans cette page, tu vas décrire le portrait chinois de la personne présentée sur ton site : si j étais... je serais... Pour établir les correspondances, une présentation idéale utiliserait un tableau en deux colonnes. Comme pour la page d'accueil, nous allons indiquer un entête pour cette page. 1) Sur la première ligne disponible, dans le cadre central, ajoute la mention Mon portrait chinois. 2) Fais passer cette ligne en style Titre 1. 3) Centre cet en-tête en utilisant le bouton de la barre d'outils de mise en forme. 4) Définis une couleur de fond pour cet en-tête.

17 3DM2-R17 FICHE RESSOURCES 17/20 5) Enregistre ton travail. Nous allons poursuivre en rédigeant le portrait chinois dans un tableau à deux colonnes. 6) Après le titre de la page, passe à la ligne en appuyant sur la touche Enter. 7) Dans la barre d'outils de composition, clique le bouton qui permet de définir ou de modifier les caractéristiques des tableaux. La boîte de dialogue qui apparaît permet de fixer les caractéristiques principales du tableau. L'onglet «Rapidement» permet de définir un tableau mais sans être précis sur ses caractéristiques. 8) Sélectionne l'onglet «Précisément» pour pouvoir définir plus finement le tableau nécessaire. 9) Etablis le tableau en suivant ces indications : Nous aurons besoin d'un tableau formé de quatre lignes, au moins et de deux colonnes. Il occupera 90% de la largeur disponible. 10) Le tableau devrait être centré, pour une meilleure esthétique. Clique sur le bouton «Edition avancée» Oh, mais je la reconnais celle-là! C'est notre bonne vieille boîte de dialogue des propriétés. Exact! Mais nous allons maintenant voir dans l'onglet des attributs HTML. 11) Dans la zone de saisie «Attribut», indique la propriété «align» qui indique le type d'alignement que nous choisissons. 12) Dans la liste des valeurs disponibles, sélectionne «center» pour centrer le tableau! 13) Clique deux fois sur «OK» pour quitter ces boîtes de dialogues.

18 3DM2-R18 DEVELOPPEMENT MERCATIQUE FICHE RESSOURCES 18/20 Tu retrouves un tableau en deux colonnes, centré au milieu de la page. 19) Complète le portrait chinois en t aidant de l exemple ci-dessous (Tu peux indiquer d'autres caractéristiques que celles données dans l'exemple) : Lorsque tu as atteint la dernière cellule de la dernière ligne, tu peux ajouter une nouvelle ligne en appuyant sur la touche de tabulation. 20) Quand ton portrait chinois est au point, vérifie-le dans le navigateur VII-RÉDACTION DE LA PAGE DU CHANTEUR PRÉFÉRÉ Nous allons présenter, parallèlement, le portrait du chanteur préféré avec quelques-uns de ses meilleurs titres. 1) Sur le web, cherche une photo de ton chanteur préféré. L'image ne doit être ni trop petite ni trop grande. L'idéal, pour tenir dans les dimensions de page que nous avons choisies, serait environ 200 pixels en largeur et 300 pixels en hauteur. 2) Enregistre cette image dans le sous-répertoire «images» du répertoire «www». Et si je ne trouve pas cette perle rare, je peux changer la taille de l'image avec un logiciel de retouches conseillé? Parfaitement, mais je déconseille d'agrandir une image trop petite : le résultat sera toujours mauvais. Il vaut mieux réduire une image trop grande. 3) Ouvre la page «chanteur.html». 4) Immédiatement sous la barre de menus, indique le nom du chanteur préféré.

19 3DM2-R19 FICHE RESSOURCES 19/20 5) Fais passer cette ligne en style Titre 1 et centre la. 6) Choisis une couleur de fond pour ce titre. 7) Passe à la ligne suivante en appuyant sur Enter. 8) Dans la barre d'outils de composition, clique sur le bouton qui permet d'insérer les images ou de modifier leurs propriétés. La boîte de dialogue ci-contre apparaît : 9) Clique sur le bouton afin de retrouver l'image que tu souhaites insérer. dans la zone Texte alternatif, indique un court texte qui apparaîtra dans le navigateur si l'image ne pouvait être téléchargée. L'image doit être placée dans la partie gauche de la page. Les meilleurs titres du chanteur seront indiqués à droite. Nous devons donc encore indiquer comment l'image doit être présentée par rapport au texte. 10) Clique sur l'onglet Apparence. 11) Indique un espacement de 25 pixels à gauche et à droite de l'image. 12) Indique un espacement de 15 pixels en haut et en bas. 13) Nous ne mettrons pas de bordure. 14) Indique que le texte doit être placé À droite de l'image. 15) Clique sur le bouton «OK». L'image flotte dans la partie gauche du bloc central. Il te reste toute la place à droite pour noter quelques titres de chansons. Si tu publies un site sur le web, assure-toi que tu disposes bien des droits qui te permettent de présenter les illustrations choisies : Attention au. (C'est rarement le cas pour des photos de chanteurs. 16) Ajoute les titres que tu souhaites mettre en valeur (tu peux chercher sur internet). 17) Enregistre ton travail.

20 3DM2-R20 FICHE RESSOURCES 20/20 VII-RÉDACTION DES LOISIRS PRÉFÉRÉS La page relative aux loisirs préférés présente une structure un peu plus complexe. On te demande de présenter très brièvement trois loisirs préférés dans un texte structuré. La page présentera un titre principal et trois sous-titres. 1) Ouvre la page «loisirs.html» 2) Indique en en-tête de la page : «Mes loisirs préférés», en «Titre 1» et «centré». 3) Choisis une couleur de fond pour ce titre. Le reste des informations du bloc central sera disposé dans trois paragraphes possédant chacun leur titre. 4) Sous le titre principal, indique le premier loisir préféré. 5) Attribue à ce titre le niveau Titre 2 (ce qui signifie "titre de niveau 2"). 6) Sous ce titre, décris en quelques mots en quoi consiste ce loisir. Exemple : 7) Fais ensuite de même pour tes deux autres loisirs : - Titre de niveau 2 - Courte description 8) Cherche, sur le web, trois images qui illustrent bien ces loisirs favoris, et enregistre ces images dans le sous-répertoire «images» du répertoire «www». Attention, la taille de ces images devra obligatoirement être assez réduite afin de ne pas occuper tout l'espace sur la page. 9) Insère chacune des images trouvées à côté du titre correspondant, en disposant les images de manière équilibrée sur la page. Utilise ce que tu as appris à une page précédente pour disposer le texte à côté des images. Exemple : 10) Enregistre ton document. 11) Visualise le résultat dans le navigateur. 12) Ferme le logiciel KompoZer et le navigateur, puis copie l intégralité du dossier «www» à l emplacement indiqué par le professeur.