Faire son site et le publier

Kompozer et CSS

Mon premier site avec Kompozer : Liens internes et externes

Afin de pouvoir naviguer dans le site, nous allons créer une barre de menu, en haut de la page d'accueil. Cette barre de menu figurera ensuite sur toutes les pages du site.

création de la barre de menu
Notion de chemin d'accès : adresse absolue et adresse relative

Pour que le navigateur puisse afficher une image ou un hyperlien il faut lui indiquer le chemin d'accès dans l'arborescence du serveur, autrement dit le lieu exact où l'image ou la page web sont enregistrées. Il existe 2 façons de noter le chemin d'accès : absolue et relative.

Chemin absolu:
Si le chemin est défini par rapport à la racine du disque il est absolu. Il marchera où que nous nous trouvions dans l'arborescence.
Exemple : http://josar.free.fr/tutoKompozer/premierSite.html
Le navigateur interprète ainsi : je dois afficher la page premierSite.html qui se trouve dans le dossier tutoKompozer. Ce dossier se trouve à la racine de l'espace disque alloué par le serveur Free pour le site josar.
La barre de fraction marque un niveau de classement, soit un dossier.

Chemin relatif:
Un chemin relatif est défini par rapport à l'endroit où nous nous trouvons dans l'arborescence.
- Si nous nous trouvons sur la page index.html et que nous voulons faire un lien vers la page loisirs.html qui se trouve au même niveau, le lien s'écrira <a href="loisirs.html">
- Si nous nous trouvons sur la page index.html et que je demande au navigateur d'afficher l'image photo1.jpg qui se trouve dans le dossier images, nous écrirons <img src="images/photo1.jpg">- Si nous nous trouvons sur la page texte.html qui se trouve dans le dossier "documents" et que nous voulons atteindre une image se trouvant dans le dossier "images", nous devons indiquer au navigateur qu'il doit remonter d'un dossier pour trouver le fichier cible. Cela se note " ../ " . (nous pouvons bien entendu remonter de plusieurs dossiers)
Nous indiquerons aussi le sous-dossier dans lequel se trouve l'image  <img src="../images/photo3.jpg" />Le navigateur interprète ainsi : remonte d'un dossier, ouvre le dossier "images" et lit le fichier photo3.jpg.
Voir la page : Chemins Relatif et Absolu.

  1. Pour faire un lien interneFenêtre Propiétés du lien
    • S'assurer que la page est bien enregistrée (pas d'icône disquette rouge dans l'onglet)
    • Sélectionner la première rubrique « Accueil » / clic droit sur la sélection / Choisir Créer un lien
    • Dans la nouvelle fenêtre Propriétés du lien, Parcourir pour trouver le fichier index.html 
    • Nous voyons que la case L'URL est relative à l'adresse de la page est grisée et que nous ne pouvons pas la cocher; faire OK pour refermer la fenêtre. Si nous ouvrons à nouveau la fenêtre nous constatons que la case a été cochée automatiquement.
    • Autre méthode pour cocher cette case : cliquer sur le bouton Édition avancée, la fenêtre Éditeur des propriétés avancées s'ouvre
    • Dans le menu déroulant Attributs choisir title et dans le champ Valeur, donner une brève description textuelle de la page cible. Cette description s'affichera, au survol du lien par la souris, comme une infobulle, dans le navigateur de notre visiteur. Comme l'attribut Alt pour les images, elle est utile également pour les mal-voyants utilisant un lecteur d'écran.
    • Cliquer sur OK pour refermer cette fenêtre; nous nous retrouvons dans la fenêtre Propriétés du lien et nous voyons que la case 
      est cochée. Ceci nous indique que le lien est bien relatif (juste le nom du fichier dans l'adresse). Un lien absolu, indiquant le chemin complet pour atteindre le fichier, ne fonctionnerait qu'en local.
    • Faire de la même façon les 3 autres liens internes. 
    • Faire une Ancreétiquette Ancre
      Il est possible de faire un lien interne sur un endroit précis de la page elle-même.
      Cette technique est utilisé lorsqu'il s'agit d'une page très longue : quand le lecteur arrive à la fin de la page il trouve un lien pour remonter, d'un seul clic, au début de la page. 
      • Cliquer à l'endroit où l'on veut poser une ancre, ici au début de la page.
      • Cliquer sur l'icone Ancre
      • Dans la boite de dialogue "Propriétés de l'ancre" lui donner un nom tout en minuscules et sans espaces, par exemple hautpage.  
        Une étiquette jaune en forme d'ancre apparaît sur la page.
      • Puis aller à la fin de la page et écrire "Haut de page"
      • Séléctionner ce texte et cliquer sur l'icône Lien
        • Dans la boite de dialogue "Propriétés du lien" dérouler le menu Emplacement du lien pour retrouver le nom de l'ancre toujours précédé d'un dièse.
        • Double clic pour que ce nom se place dans le champ
        • En bas de la fenêtre, cliquer sur OK
        • Si nous avons attribué un id à notre bloc d'en-tête ou à notre bloc menu, il est inutile de créer une ancre, il suffit de faire pointer notre lien vers cet id (puisqu'un id est unique dans une page)
      • Sauvegarder et visionner dans le navigateur

    emplacement du lien
  2. Pour faire un lien externe à partir d'un texte
    • Aller sur Internet pour trouver le site voulu et copier l'adresse dans le presse-papier
    • Sélectionner « Site web préféré » / Clic droit sur la sélection
    • Coller cette adresse dans le champ Emplacement du lien et dans le champ Cible cocher la case
      « Le lien doit s'ouvrir dans une nouvelle fenêtre », ceci afin de ne pas perdre le visiteur navigant avec Internet Explorer.
      Avec Firefox, les liens s'ouvrent dans un nouvel onglet, que cette case soit cochée ou non.

             Lien externe à parir d'un texte                        Éditeur des propriétés avancées          
  3. Pour faire un lien externe à partir d'une image
    • Aller sur Internet pour trouver le site voulu et copier l'adresse dans le presse-papier
    • Sélectionner l'image en cliquant dessus et cliquer sur l'outil Image pour ouvrir la fenêtre Propriétés de l'image.
    • Dans l'onglet Lien coller le lien dans le champ prévu
    • Dans la barre des taches cliquer sur la balise <a> qui précède la balise <img>, puis clic droit pour ouvrir le menu contextuel et choisir Propriétés avancées
    • L'Éditeur des propriétés avancées nous indique quels sont les attributs courants pour <A>. Trouver dans le champ Attribut "target" et dans le champ Valeur accepter _blank  qui est présélectionné.
      Ce petit bout de code html target="_blank" ,  permet de faire ouvrir le lien dans une nouvelle fenêtre.
    • Dans cette même fenêtre, on peut aussi ajouter l'Attribut title , décrivant la page Web sur laquelle pointe le lien.  
  4. Pour faire un lien vers une messagerie Pour faire un lien mailto : entrer une adresse electronique
    Sélectionner la rubrique M'écrire / Clic droit sur la sélection. Écrire notre adresse e-mail dans le champ Emplacement du lien et cocher la case :
    « La valeur ci-dessus est une adresse électronique »
    Attention :
    En utilisant sur notre futur site, quand il sera publié, ce genre de lien  mailto: , il faut s'attendre à recevoir beaucoup de spams car les robots récupèrent ainsi très facilement notre adresse.
    Il existe d'autres solutions comme le formulaire ou l'adresse sur une image.

Copier ce menu sur toutes les pages du site et, comme il faut éviter qu'une page pointe sur elle-même, supprimer sur chaque page le lien pointant sur la page.
Sauvegarder chaque page et tester dans le navigateur le fonctionnement de tous les liens.
Comme, pour le moment, toutes les pages sont vides et blanches, nous pouvons toutefois constater le passage d'une page à l'autre en voyant le titre de chaque page dans la barre de titres du navigateur.
Menu Outils / Nettoyeur de balises / Nettoyer / Nettoyer
Menu Outils / Handcoder / éditeur texte ou bien F6 pour aller voir le code dans l'Editeur.  Le fait d'ouvrir l'éditeur, indente aussi le code.
Essayer de repérer les liens dans le code et de voir la différence entre un lien interne de type relatif et un lien externe de type absolu, faisant ouvrir une nouvelle fenêtre.
Voir aussi le code de l'ancre en haut de la page et le lien vers l'ancre en bas de la page.

Attention :Si, après modification dans Kompozer/onglet Normal, nous voulons publier sans aller voir le code dans l'éditeur il faut penser à indenter le code par F7, après avoir sauvegardé. Haut de page

Jos Argaud -10/09/2009 -  Pour m'écrire    Document made with KompoZer   D'après le cours d'Yves Mairesse et avec son consentement