2012 Pearson France HTML & CSS Jon Duckett

Transcription

1

2 4 XX XX XX Création de liens entre des pages Liens vers d autres sites Liens de messagerie électronique

3 Les liens sont au cœur du Web, car ils permettent à l internaute de se déplacer entre les pages, apportant là le concept de navigation ou de surf. Vous rencontrerez généralement les différents types de liens suivants : liens d un site web vers un autre ; liens d une page vers une autre au sein du même site web ; liens d une partie d une page vers une autre partie de la même page ; liens qui ouvrent une nouvee fenêtre du navigateur ; liens qui déclenchent le lancement d un programme de messagerie et envoient un nouveau message à quelqu un. 74

4 75

5 ÉCRITURE DE La création d un lien se fonde sur l élément <a>. Les internautes pourront cliquer sur le contenu placé entre la balise d ouverture <a> et la balise de fermeture </a>. L attribut href précise la page liée. PAGE VERS LAQUELLE MÈNE LE LIEN TEXTE SUR LEQUEL L INTERNAUTE PEUT CLIQUER <a href=" BALISE D OUVERTURE DU LIEN BALISE DE FERMETURE DU LIEN 76

6 Le texte qui se trouve entre la balise d ouverture <a> et la balise de fermeture </a> correspond au texte du lien. Il doit autant que possible préciser où sera emmené l internaute s il clique dessus (au lieu de simplement indiquer cliquer ici ). Ci-dessous, vous voyez le lien vers IMDB qui a été créé sur la page précédente. Nombreuses sont les personnes à naviguer sur les sites web en recherchant les liens dans le contenu. Des liens avec du texte clair les aideront à trouver ce qu ees souhaitent. Ils leur donneront une impression positive du site et les encourageront à y rester plus longtemps. Ils profiteront également aux utilisateurs de lecteurs d écran. Pour rédiger des textes de liens pertinents, réfléchissez aux mots que les internautes pourraient employer dans une recherche des pages liées. Par exemple, au lieu d écrire lieux de séjour, vous pouvez être plus précis en employant hôtels à Paris. 77

7 VERS D AUTRES SITES <a> Un lien est créé avec l élément <a> et son attribut href, dont la valeur précise la page vers laquee l internaute est mené lorsqu il clique sur le lien. Les internautes peuvent cliquer sur le contenu qui apparaît entre la balise d ouverture <a> et la balise de fermeture </a>. Ils sont alors dirigés vers la page indiquée dans l attribut href. chapitre-04/liens-vers-autres-sites.html <p>critiques de films : <ul> <li><a href=" Première</a></li> <li><a href=" Télérama</a></li> <li><a href=" Critikat</a></li> <li><a href=" Critique film</a></li> </ul> </p> HTML Lorsqu un lien doit cibler un autre site web, la valeur de l attribut href sera l adresse web complète du site, autrement dit une URL absolue. RÉSULTAT Par défaut, les navigateurs affichent les liens en bleu et en souligné. URL ABSOLUE URL signifie Uniform Resource Locator ou localisateur uniforme de ressource. Chaque page web possède sa propre URL, qui correspond à l adresse à saisir dans le navigateur pour aer sur cette page. Une URL absolue commence par le nom de domaine du site, éventueement suivi du chemin d une page précise. Si aucune page n est indiquée, la page d accueil du site est affichée. 78

8 VERS D AUTRES PAGES DU MÊME SITE HTML chapitre-04/liens-vers-autres-pages.html <p> <ul> <li><a href="index.html">accueil</a></li> <li><a href="apropos.html">a propos</a></li> <li><a href="films.html">films</a></li> <li><a href="contact.html">contact</a></li> </ul> </p> RÉSULTAT <a> Lorsque des liens vers des pages du même site web sont créés, le nom de domaine n est pas précisé dans les URL. Il s agit d URL relatives. Si toutes les pages du site se trouvent dans le même dossier, les différents attributs href contiennent uniquement les noms des fichiers. Si les pages du site se trouvent dans plusieurs dossiers, vous devez employer une syntaxe légèrement plus complexe pour indiquer l emplacement de la page par rapport à cee en cours. Nous y reviendrons aux pages 80 à 83. Si vous examinez les exemples de code de chaque chapitre, vous verrez que le fichier index.html comprend des liens qui utilisent des URL relatives. URL RELATIVE Pour créer des liens vers des pages du même site, vous pouvez employer des URL relatives. Il s agit d une forme plus courte des URL absolues car le nom de domaine n est pas indiqué. Nous reviendrons en détail sur les URL relatives aux pages 82 et 83, car il existe des raccourcis d écriture qui simplifient la création des liens vers des pages du même site. Les URL relatives facilitent la construction d un site sur votre ordinateur car vous pouvez définir des liens entre les pages sans configurer un nom de domaine ou un hébergement. 79

9 STRUCTURE DE RÉPERTOIRES Dans le cas d un site web de grande taie, il est préférable d organiser le code en plaçant les pages de chaque section du site dans un dossier séparé. Les dossiers d un site web sont parfois appelés répertoires. STRUCTURE L iustration ci-contre montre la structure de répertoires d un site web fictif nommé Arts récréatifs. Le dossier de niveau supérieur est le dossier racine. Dans l exemple, il se nomme artsrecreatifs. Le dossier racine comprend tous les autres fichiers et dossiers du site. Chaque partie du site est placée dans un dossier séparé, cela afin de faciliter l organisation des fichiers. RELATIONS Les relations entre les fichiers et les dossiers d un site web sont décrites en termes généalogiques. Quelques relations ont été représentées sur l iustration cicontre. Le dossier artsrecreatifs est le parent des dossiers videos, musique et theatre. Les dossiers films, musique et theatre sont des enfants du dossier artsrecreatifs. PAGES D ACCUEIL La page d accueil principale d un site écrit en HTML, ainsi que cee de chaque section d un dossier enfant, se nomme index.html. Les serveurs web sont généralement configurés pour envoyer le fichier index.html lorsque aucun nom de fichier n est précisé. Si vous saisissez l adresse artsrecreatifs.fr, il retourne donc artsrecreatifs.fr/index. html. Pour artsrecreatifs. fr/musique, il va retourner artsrecreatifs.fr/musique/ index.html. Si vous utilisez un système de gestion de contenu, un moteur de blog ou une solution de e commerce, il est probable qu à chaque page du site ne corresponde pas un fichier séparé. À la place, ces systèmes se fondent souvent sur un fichier de modèle adapté à chaque type de page, comme les articles d actualité, les biets ou les fiches produits. La modification du fichier de modèle affecte l ensemble des pages basées sur ce modèle. Attention, car si vous touchez au contenu qui n est pas du code HTML, vous risquez d obtenir une page invalide! 80

10 PARENT Le dossier artsrecreatifs est le parent du dossier musique. ENFANT Le dossier musique est un enfant du dossier artsrecreatifs. artsrecreatifs index.html images logo.gif films cinema index.html critiques.html liste.html dvd index.html liste.html musique index.html critiques.html liste.html theatre index.html critiques.html liste.html GRAND-PARENT Le dossier artsrecreatifs est un grand-parent du dossier dvd. PETIT-ENFANT Le dossier dvd est un petitenfant du dossier artsrecreatifs. Chaque page et chaque image d un site web possède une URL (Uniform Resource Locator). L URL est constituée du nom de domaine suivi du chemin de la page ou de l image. Le chemin de la page d accueil du site d exemple est Celui du logo du site est artsrecreatifs.fr/images/logo. gif. Les URL sont utilisées avec les liens vers d autres pages web et pour l insertion des images dans le site. La page suivante montre un raccourci d écriture des liens au sein du même site. Le dossier racine comprend : un fichier index.html, qui correspond à la page d accueil du site ; des dossiers séparés pour les parties du site consacrées aux films, à la musique et au théâtre. Chaque sous-dossier comprend : un fichier index.html pour la page d accueil de la partie ; une page pour les critiques, nommée critiques.html ; une page pour la liste, nommée liste.html (excepté pour les DVD). La section des films comprend : un dossier nommé cinema ; un dossier nommé DVD. 81

11 URL RELATIVES Les URL relatives peuvent être utilisées dans les liens vers des pages du même site web. Ees permettent d indiquer au navigateur l emplacement des fichiers à l aide d une écriture raccourcie. Lorsque vous créez un lien vers une page de votre propre site web, il est inutile de préciser le nom de domaine. Dans ce cas, vous pouvez employer une URL relative, qui permet d indiquer au navigateur l emplacement d une page relativement à la page en cours à l aide d un format plus court. Cette méthode se révèle particulièrement utile lors de la création d un nouveau site ou de l apprentissage de HTML, car vous pouvez créer des liens entre des pages qui se trouvent uniquement sur votre ordinateur personnel (avant d acheter un nom de domaine et de les placer sur le Web). Puisque le nom de domaine ne doit pas être répété dans chaque lien, l écriture du code est également plus rapide. Si tous les fichiers du site se trouvent dans un même dossier, il suffit d utiliser le nom du fichier qui correspond à la page. Si le site est structuré en dossiers (ou répertoires), vous devez indiquer au navigateur comment aer de la page actueement ouverte à la page liée. Si vous créez un lien vers la même page à partir de deux pages différentes, vous aurez peut-être à écrire deux URL relatives différentes. La terminologie employée avec les liens fondés sur des URL relatives est identique à cee donnée à la page précédente qui concerne les structures de répertoires. Ee est empruntée à la généalogie. 82

12 TYPE DE LIEN RELATIF EXEMPLE (voir iustration page 81) MÊME DOSSIER Pour lier un fichier du même dossier, indiquez simplement le nom du fichier (et rien d autre). Lien vers les critiques musicales depuis la page d accueil de la section consacrée à la musique : <a href="critiques.html">critiques</a> DOSSIER ENFANT Pour un dossier enfant, utilisez le nom de ce dossier, suivi d une barre oblique, puis du nom du fichier. Lien vers la liste des morceaux musicaux depuis la page d accueil : <a href="musique/liste.html">liste</a> DOSSIER PETIT-ENFANT Utilisez le nom du dossier enfant, suivi d une barre oblique, puis du nom du dossier petit-enfant suivi d une autre barre oblique et du nom du fichier. Lien vers les critiques des DVD depuis la page d accueil : <a href="films/dvd/critiques.html"> Critiques</a> DOSSIER PARENT Utilisez../ pour indiquer le dossier au-dessus du dossier en cours, suivi du nom du fichier. Lien vers la page d accueil depuis les critiques musicales : <a href="../index.html">accueil</a> DOSSIER GRAND-PARENT Répétez../ pour remonter de deux dossiers (à la place d un seul) dans la hiérarchie, puis ajoutez le nom du fichier. Lien vers la page d accueil depuis les critiques de DVD : <a href="../../index.html">accueil</a> Lorsqu un site est en production (placé sur un serveur web), il existe deux autres techniques non opérationnees lorsque les fichiers sont enregistrés sur l ordinateur local. Par exemple, si le nom d un dossier enfant n est pas suivi d un nom de fichier, le serveur web tente d envoyer la page d accueil de la section correspondante. Une barre oblique renverra la page d accueil du site global, tandis qu une barre oblique suivie du nom d un fichier renverra ce fichier placé dans le dossier racine. 83

13 DE MESSAGERIE ÉLECTRONIQUE mailto: Pour créer un lien qui démarre le programme de messagerie électronique de l internaute et envoie un message à une adresse précisée, utilisez l élément <a>. La valeur de l attribut href doit cette fois-ci commencer par mailto:, suivi de l adresse électronique du destinataire du message. chapitre-04/liens-courrier.html HTML <a href="mailto:[email protected]">message à Jean</a> RÉSULTAT L exemple ci-contre montre qu un lien de messagerie électronique possède la même apparence qu un autre lien, mais, lorsque l internaute clique dessus, son programme de messagerie électronique s ouvre sur un nouveau message adressé à la personne indiquée dans le lien. 84

14 OUVERTS DANS UNE NOUVELLE FENÊTRE HTML chapitre-04/ouverture-lien-nouvee-fenetre.html <a href=" target="_blank"> Internet Movie Database</a> (s ouvre dans une nouvee fenêtre) RÉSULTAT target Si vous souhaitez que la page ciblée par un lien s ouvre dans une nouvee fenêtre, définissez l attribut target dans la balise <a> d ouverture. Sa valeur doit être _blank. Le plus souvent, le créateur d une page web demande l ouverture du lien dans une nouvee fenêtre lorsqu il cible un autre site. Dans ce type de fonctionnement, il espère que l internaute reviendra sur son site après avoir terminé la consultation de la page liée. De façon générale, vous devez éviter l ouverture des liens dans une nouvee fenêtre. Si vous utilisez néanmoins ce mode de fonctionnement, les bonnes pratiques veulent que vous commenciez par informer l internaute du fait qu un clic sur le lien ouvrira une nouvee fenêtre. 85

15 VERS DES SECTIONS DE LA MÊME PAGE Au début d une longue page, vous pourriez souhaiter ajouter une liste de liens qui ciblent ses différentes sections. Ou bien vous pourriez ajouter un lien dans chaque section de la page pour que l internaute puisse revenir au début de la page sans lui imposer de longs défilements. Avant d établir des liens vers des parties de la page, vous devez identifier les cibles. Cela passe par l attribut id (valide avec tous les éléments HTML). Dans l exemple, vous constatez que les éléments <h1> et <h2> définissent chacun un attribut id qui identifie ces parties de la page. La valeur de l attribut id doit commencer par une lettre ou un souligné (pas de chiffre ni un autre caractère) et, au sein d une même page, deux attributs id ou plus ne doivent avoir la même valeur. chapitre-04/lien-section-specifique.html HTML <h1 id="top">glossaire cinématographique</h1> <a href="#arc_shot">dorsale</a><br /> <a href="#interlude">internégatif</a><br /> <a href="#prologue">prégénérique</a><br /><br /> <h2 id="arc_shot">dorsale</h2> <p>face postérieure de la peicule, par opposition à la face antérieure, qui reçoit l émulsion photosensible.</p> <h2 id="interlude">internégatif</h2> <p>tirage intermédiaire d un interpositif. Utilisé pour le tirage des copies positives de projection.</p> <h2 id="prologue">prégénérique</h2> <p>début du film, avant générique, servant d accroche ou de chapeau pour attirer l attention du spectateur. </p> <p><a href="#top">début</a></p> Un lien vers un élément identifié est toujours créé à l aide de l élément <a>, mais la valeur de son attribut href commence par le signe #, suivi de la valeur de l attribut id de l élément cible. Dans notre exemple, le lien <a href="#top"> vise l élément <h1> situé au début de la page et dont l attribut id a la valeur top. 86

16 VERS DES SECTIONS D UNE AUTRE PAGE RÉSULTAT Pour créer un lien vers une section précise d une page différente, qu ee se trouve sur votre propre site ou sur un autre site web, employez une technique comparable. À condition que la page liée comprenne des attributs id pour identifier ses différentes sections, vous pouvez simplement employer la syntaxe indiquée à la fin du lien vers cette page. L attribut href contiendra donc l adresse de la page (sous forme d URL absolue ou relative), suivie du signe #, puis de la valeur de l attribut id qui correspond à l élément cible. Par exemple, voici comment établir un lien vers la fin de la page d accueil du site web consacré à cet ouvrage : <a href=" #bottom"> 87

17 88

18 EXEMPLE L exemple montre une page web sur le cinéma. L élément <h1> situé en haut de la page définit un attribut id afin que nous puissions amener le lecteur de la fin de la page directement au début. Un lien de messagerie électronique lui permet de contacter l auteur de la page web. Différents liens fondés sur des URL absolues sont également présents et ciblent différents sites de festivals cinématographiques. Cette liste est suivie d un lien avec une URL relative pour mener l internaute vers une page à propos qui réside dans le même répertoire. <html> <head> <title>liens</title> </head> <body> <h1 id="top">fans de ciné</h1> <h2>liste des festivals</h2> <p>voici les festivals cinématographiques auxquels nous participerons cette année.<br />Merci de <a href="mailto:[email protected]"> nous contacter</a> si vous souhaitez de plus amples informations.</p> <h3>mai</h3> <p><a href=" Festival de Cannes</a><br /> Cannes, France<br /> mai 2011</p> <h3>novembre</h3> <p><a href=" Les 3 Continents</a><br /> Nantes, France<br /> novembre 2011</p> <!-- contenu supplémentaire --> <p><a href="apropos-fdc.html">a propos de Fans de ciné</a></p> <p><a href="#top">haut de la page</a></p> </body> </html> 89

19

20 EN RÉSUMÉ XXLes liens sont créés à l aide de l élément <a>. XXL élément <a> précise la page liée dans un attribut href. XXSi le lien se fait vers une page du même site, il est préférable d employer une URL relative à la place d une URL absolue. XXIl est possible de créer un lien de façon à ouvrir un programme de messagerie électronique avec un nouveau message dont l adresse indiquée est ajoutée dans le champ À. XXL attribut id permet de créer un lien qui cible un élément d une page.