Leçon 03 Réussir son site web avec XHTML et CSS Créer des liens 1. Insérer un lien vers une autre page...1 Création d un lien simple...1 Ajout d une infobulle...2 Un lien pour envoyer un email...2 2. Les liens relatifs et absolus...3 Les liens relatifs...3 Les liens absolus...5 Votre site sera certainement composé de plusieurs pages. Pour que vos visiteurs puissent naviguer entre elles, vous allez apprendre à créer des liens hypertextes. Il faut savoir qu on a la possibilité de faire deux types de liens : Un lien vers une autre page Un lien vers un autre endroit sur la même page Dans Notepad++, créez une nouvelle page XHTML en recopiant le code source minimal et donnezlui comme titre : Bienvenue à Nice! Histoire Copiez dans le corps de cette page le contenu du fichier histoire.txt Définissez le mot Histoire comme titre de niveau 1. Enregistrez cette page dans le Site-nice en la nommant histoire.html et observez le résultat dans un navigateur. 1. Insérer un lien vers une autre page Ce type de lien est le plus courant. Vous pouvez faire un lien qui amène vers une autre page de votre site ou même vers un site différent du vôtre. Création d un lien simple Pour faire un lien, nous allons utiliser la balise XHTML suivante <a></a> en mettant à l intérieur le texte qui va servir de lien. Pour que le lien soit correct, il faut rajouter un attribut à la balise <a> : l attribut href. Cet attribut permet d indiquer le nom de la page qui sera appelée lorsqu on cliquera sur ce lien. Balise de lien <a href="lien">texte de lien</a> Vous allez créer un lien dans index.html qui amènera le visiteur sur la page histoire.html Ouvrez le fichier index.html dans l éditeur de texte Notepad++. Ajoutez : <p>- un peu d'histoire <a href="histoire.html">(ici)</a> <br /> Enregistrez et observez le résultat dans un navigateur web. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 03 p.1/5
Le texte ici sera écrit en bleu souligné. Si vous cliquez dessus, vous serez amené à la page Histoire. > Ajout d une infobulle Il est possible d ajouter une infobulle (ou bulle d aide) sur votre lien. Cette bulle est un petit message qui s affiche lorsque vous pointez avec la souris sur le lien. Pour créer une bulle d aide sur un lien, on doit ajouter à la balise <a> l attribut title. Balise de lien + attributs lien et infobulle <a href="lien" title="infobulle">texte de lien</a> Le texte de l infobulle doit être assez court. Depuis Notepad++, dans le fichier index.html, ajoutez à la balise de lien créée l infobulle : <p>- un peu d'histoire <a href="histoire.html" title="un peu d histoire">(ici)</a> <br /> Enregistrez et observez le résultat dans un navigateur web. EXERCICE Réalisez un lien vers la page carnaval.html selon l illustration ci-après : Un lien pour envoyer un email Vous avez la possibilité de créer un lien ouvrant une fenêtre de composition d un nouvel email dans le logiciel de messagerie, avec votre adresse pré remplie en destinataire. Il faut pour cela utiliser des liens mailto. Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci : href="mailto:monmail@domaine.com" Balise de lien d envoi de mail <a href="mailto:email">texte de lien</a> À l aide de Notepad++, créez une nouvelle page contact.html et ajoutez-y le code suivant : <h2>nous contacter!</h2> <p>n hésitez pas à nous contacter par mail pour avoir de plus amples renseignements.</p> <p>vous pouvez le faire en cliquant <a href="mailto:adresse-email">ici</a>!</p> Enregistrez et observez le résultat dans un navigateur web. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 03 p.2/5
2. Les liens relatifs et absolus Pour faire un lien d une page vers une autre, il existe deux façons d écrire l adresse de la page cible : la notation relative ou absolue. Les liens relatifs Les liens relatifs décrivent la position d un fichier cible par rapport au fichier actuel. Ces liens s adaptent très bien aux changements d adresse précisément car ils ne contiennent pas l adresse du site. Il est donc conseillé d utiliser des liens relatifs lorsque vous faites des liens internes, c est-à-dire des liens pointant vers d autres pages de votre site. Les liens relatifs ne vous obligent pas à mettre tous vos fichiers.html dans le même. Il est possible de créer des sous-s et d y mettre vos fichiers.html. Cela permet d organiser votre site en catégories. Fermez toutes les pages ouvertes dans Notepad++. Ouvrez votre Site-nice Créez un sous- nommé pages et déplacez-y les pages carnaval.html et histoire.html. Imaginons que vous souhaitiez faire un lien de source.html vers cible.html : Cas 1 Les fichiers se trouvent dans le même : Il suffit d écrire le nom du fichier-lien dans l attribut href : <a href="cible.html">texte de lien</a> Cas 2 Le fichier cible.html se trouve dans un sous- Par exemple, pour créer un lien de : \source.html vers : \\cible.html Il faudra écrire le nom du d'abord "/cible.html". <a href="/cible.html">texte de lien</a> RQ : S'il y a plusieurs sous-s, il suffit de les écrire à la suite : "1/2/cible.html" Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 03 p.3/5
Cas 3 Le fichier cible.html se trouve dans un parent Par exemple, pour créer un lien de : \\source.html vers : \cible.html Pour remonter à un parent, il faut utiliser../ <a href="../cible.html">texte de lien</a> RQ : S'il faut remonter de plusieurs s parents, il suffit de les écrire à la suite : "../../cible.html" Remarque Évitez les noms de fichiers complexes Pour éviter les ennuis, donnez à vos fichiers des noms en minuscules, sans espace et sans accent. Vous pouvez utiliser le trait bas _ (underscore) pour simuler un espace. <a href="une_page_geniale.html> Ouvrez dans un navigateur Web la page index.html. Testez les liens. Les pages ayant été déplacées, les liens ne fonctionnent plus. Vous allez les corriger, en vous basant sur la nouvelle arborescence : -NICE index contact pages carnaval histoire Ouvrez dans Notepad++ la page index.html et modifiez le lien menant à la page carnaval.html pour qu il fonctionne à nouveau : <a href="pages/carnaval.html" title="le très célèbre carnaval!">(ici)</a> Enregistrez la page et testez le résultat dans un navigateur web. Corrigez de la même façon le lien menant à la page histoire.html. Enregistrez et testez le résultat dans un navigateur web. EXERCICE Créez une barre de navigation en haut de chaque page index.html, contact.html, carnaval.html et histoire.html selon l illustration ci-après : Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 03 p.4/5
Les liens absolus Les liens absolus décrivent la position d un fichier cible de manière absolue. Cela signifie qu on peut faire un lien vers un autre site que le sien. Leur défaut vient du fait qu il faille connaître l adresse complète du site en question. Une adresse de page web commence la plupart du temps par http://, et quelques fois par https:// pour les pages sécurisées. Lien absolu <a href="http://www.adressedusite.com/page.html">texte de lien</a> Ouvrez dans Notepad++ la page index.html et rajoutez à la fin du corps de la page le code suivant : <h2>site de la ville de Nice</h2> <p>pour accéder au site de la ville de Nice, <a href="http://www.nice.fr">www.nice.fr</a>!</p> Enregistrez la page et testez le résultat dans un navigateur web. Rajoutez dans Notepad++ le code suivant à la balise de lien : <a href=http://www.nice.fr target="_blank">www.nice.fr</a> Enregistrez la page et observez le résultat dans un navigateur web. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 03 p.5/5