diff options
Diffstat (limited to 'files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html')
| -rw-r--r-- | files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html | 333 |
1 files changed, 333 insertions, 0 deletions
diff --git a/files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html b/files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..b334b15b2c --- /dev/null +++ b/files/fr/apprendre/html/introduction_à_html/creating_hyperlinks/index.html @@ -0,0 +1,333 @@ +--- +title: Création d'hyperliens +slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks +tags: + - Apprendre + - Codage + - Débutant + - Guide + - HTML + - Liens + - Title + - URL + - absolu + - hyperliens + - relatif +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}<br> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}</div> + +<p class="summary">Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web <em>une toile</em>. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.</td> + </tr> + </tbody> +</table> + +<h2 id="Quest-ce_un_hyperlien">Qu'est-ce un hyperlien ?</h2> + +<p>Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web <em>une toile</em> — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).</p> + +<div class="note"> +<p><strong>Note </strong>: Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).</p> +</div> + +<p>La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomie_dun_lien">Anatomie d'un lien</h2> + +<p>Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une <strong>Hypertext Reference</strong>) contenant l'adresse web vers laquelle vous voulez que le lien pointe.</p> + +<pre class="brush: html notranslate"><p>Je suis en train de créer un lien à +<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>. +</p></pre> + +<p>qui donne le résultat suivant :</p> + +<p>Je suis en train de créer un lien à <a class="ignore-external" href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p> + +<h3 id="Ajouter_des_informations_dassistance_avec_lattribut_title">Ajouter des informations d'assistance avec l'attribut title</h3> + +<p>L'autre attribut qu'il est possible d'ajouter à un lien est <code>title</code> ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :</p> + +<pre class="brush: html notranslate"><p>Je suis en train de créer un lien à +<a href="https://www.mozilla.org/fr/" + title="Le meilleur endroit pour trouver plus d'informations sur la + mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>. +</p></pre> + +<p>Voici le résultat (le contenu de <code>title</code> apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :</p> + +<p>Je suis en train de créer un lien vers <a class="ignore-external" href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil de Mozilla</a></p> + +<div class="note"> +<p><strong>Note </strong>: le <code>title</code> d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de <code>title</code>. Si une information de <code>title</code> est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.</p> +</div> + +<h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3> + +<p>C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle index.html</a> fera parfaitement l'affaire).</p> + +<ul> + <li>Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances.</li> + <li>Changez certaines parties du contenu en liens.</li> + <li>Insérez les attributs <code>title</code>.</li> +</ul> + +<h3 id="Liens_de_niveau_bloc">Liens de niveau bloc</h3> + +<p>Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#Éléments_bloc_ou_en_ligne">éléments bloc </a>. Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <code><a></a></code>.</p> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.org/fr/"> + <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"> +</a></pre> + +<div class="note"> +<p><strong>Note </strong>: Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.</p> +</div> + +<h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2> + +<p>Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.</p> + +<p>Une URL, ou <strong>U</strong>niform <strong>R</strong>esource <strong>L</strong>ocator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse <code>https://www.mozilla.org/en-US/</code>.</p> + +<p>Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> + +<p><img alt="Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf." src="https://mdn.mozillademos.org/files/15958/dir-struct.png" style="display: block; height: 381px; margin: 0px auto; width: 882px;"></p> + +<p>La <strong>racine</strong> de cette structure de répertoires s'appelle <code>creating-hyperlinks</code>. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier <code>index.html</code> et un <code>contacts.html</code>. Sur un site réel, <code>index.html</code> serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).</p> + +<p>Il y a aussi deux répertoires dans la racine — <code>pdfs</code> et <code>projects</code>. Chacun d'eux comporte un seul fichier — respectivement un PDF (<code>project-brief.pdf)</code> et un fichier <code>index.html</code>. Notez que vous pouvez heureusement avoir deux fichiers <code>index.html</code> dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second <code>index.html</code> peut être le portail des informations relatives au projet.</p> + +<ul> + <li> + <p><strong>Dans un même dossier </strong>: si vous voulez inclure un hyperlien dans <code>index.html</code> (celui de plus haut niveau) pointant vers <code>contacts.html</code>, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est <code>contacts.html</code> :</p> + + <pre class="brush: html notranslate"><p>Voulez‑vous rencontrer un membre du personnel en particulier ? +Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p></pre> + </li> + <li> + <p><strong>Descendre dans les sous-répertoires </strong>: si vous désirez inclure un hyperlien dans <code>index.html</code> (<code>celui</code> de plus haut niveau) pointant vers <code>projects/index.html</code>, vous avez besoin de descendre dans le dossier<code>projects</code> avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera <code>projects/index.html</code> :</p> + + <pre class="brush: html notranslate"><p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p></pre> + </li> + <li> + <p><strong>Monter dans les dossiers parents </strong>: si vous voulez inclure un hyperlien dans <code>projects/index.html</code> qui pointe vers <code>pdfs/projects-brief.pdf</code>, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier <code>pdfs</code>. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — <code>..</code> —, de sorte que l'URL à utiliser sera <code>../pdfs/project‑brief.pdf</code> :</p> + + <pre class="brush: html notranslate"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Note </strong>: Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. <code>../../../complexe/path/to/my/file.html</code>.</p> +</div> + +<h3 id="Fragments_de_documents">Fragments de documents</h3> + +<p>Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme <strong>fragment de document</strong>), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :</p> + +<pre class="brush: html notranslate"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> + +<p>Puis, pour faire un lien vers cet <code>id</code> précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :</p> + +<pre class="brush: html notranslate"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> + +<p>Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers <em>une autre partie du même document</em> :</p> + +<pre class="brush: html notranslate"><p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p></pre> + +<h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3> + +<p>Deux termes que vous rencontrerez sur le Web sont <strong>URL absolue</strong> et <strong>URL relative</strong> :</p> + +<p><strong>URL absolue </strong>: pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page <code>index.html</code> est téléversée dans le dossier nommé <code>projects</code> à la racine du serveur web, et que le domaine du site est <code>http://www.example.com</code>, la page sera accessible à l'adresse <code>http://www.example.com/projects/index.html</code> (ou même seulement <code>http://www.example.com/projects/</code>, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme <code>index.htm</code>, si ce n'est pas précisé dans l'URL).</p> + +<p>Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.</p> + +<p><strong>URL</strong> <strong>relative :</strong> pointe vers un emplacement qui est <em>relatif</em> au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en <code>http://www.example.com/projects/index.html</code> vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., <code>project-brief.pdf</code> — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de <code>projects</code> appelé <code>pdfs</code>, le lien relatif serait <code>pdfs/project-brief.pdf</code> (l'URL absolue équivalente serait <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p> + +<p>Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre <code>index.html</code> du dossier <code>projects</code> vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative <code>pdfs/project-brief.pdf</code> qui s'y trouve pointerait alors vers un fichier situé en <code>http://www.example.com/pdfs/project-brief.pdf</code>, et non vers un fichier situé en <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Bien sûr, l'emplacement du fichier <code>project-brief.pdf</code> et du dossier <code>pdfs</code> ne changera pas subitement du fait que vous avez déplacé le fichier <code>index.html</code> : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !</p> + +<h2 id="Meilleures_pratiques_de_liens">Meilleures pratiques de liens</h2> + +<p>Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.</p> + +<ul> +</ul> + +<h3 id="Utilisez_une_formulation_claire_des_liens">Utilisez une formulation claire des liens</h3> + +<p>Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens <em>accessibles</em> à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :</p> + +<ul> + <li>les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte.</li> + <li>les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié.</li> + <li>les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien.</li> +</ul> + +<p>Regardons un exemple particulier :</p> + +<p><em><strong>Bon</strong> texte de lien:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Télécharger Firefox +</a></p></pre> + +<p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Cliquer ici +</a> +pour télécharger Firefox</p> +</pre> + +<p>Autres conseils :</p> + +<ul> + <li>Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle.</li> + <li>Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués).</li> + <li>Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière.</li> + <li>Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.</li> +</ul> + +<h3 id="Utilisez_des_liens_relatifs_partout_où_cest_possible">Utilisez des liens relatifs partout où c'est possible</h3> + +<p>Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un <em>même site web</em>. (pour les liens vers un <em>autre site web</em>, vous aurez besoin d'utiliser un lien absolu) :</p> + +<ul> + <li>Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile.</li> + <li>Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">Fonctionnement du web</a> pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement.</li> +</ul> + +<h3 id="Liaison_vers_des_ressources_non-HTML_signalez‑les_clairement">Liaison vers des ressources non-HTML : signalez‑les clairement</h3> + +<p>Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :</p> + +<ul> + <li>si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue.</li> + <li>si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash.</li> +</ul> + +<p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p> + +<pre class="brush: html notranslate"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> + Télécharger le rapport des ventes (PDF, 10Mo) +</a></p> + +<p><a href="http://www.exemple.com/flux-video/"<code> target="_blank"</code>> + Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD) +</a></p> + +<p><a href="http://www.exemple.com/jeu-de-voiture"> + Jouer au jeu de voiture (nécessite Flash) +</a></p></pre> + +<h3 id="Utilisez_lattribut_download_pour_faire_un_lien_vers_un_téléchargement">Utilisez l'attribut <code>download</code> pour faire un lien vers un téléchargement</h3> + +<p>Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut <code>download</code> pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :</p> + +<pre class="notranslate"><code><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" + download="firefox-latest-64bit-installer.exe"> + Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France) +</a></code></pre> + +<h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2> + +<p>Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.</p> + +<p>Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> pour une liste complète des fichiers).</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Vous devez :</p> + +<ol> + <li>Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.</li> + <li>Changer chaque nom de page en un lien vers cette page.</li> + <li>Copier le menu de navigation dans chaque page.</li> + <li>Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.</li> +</ol> + +<p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p> + +<p><img alt="Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux." src="https://mdn.mozillademos.org/files/15957/accueil.png" style="display: block; height: 424px; margin: 0px auto; width: 772px;"></p> + +<div class="note"> +<p><strong>Note </strong>: si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> pour voir la réponse correcte.</p> +</div> + +<h2 id="Liens_de_courriel">Liens de courriel</h2> + +<p>Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL <code>mailto:</code>.</p> + +<p>Sous sa forme la plus basique et la plus communément utilisée, un lien <code>mailto:</code> indique simplement l'adresse du destinataire voulu. Par exemple :</p> + +<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> +</pre> + +<p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p> + +<p>En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.</p> + +<h3 id="Spécification_des_détails">Spécification des détails</h3> + +<p>En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL <code>mailto</code> que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont <code>subject</code>, <code>cc</code> et <code>body</code> (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.</p> + +<p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p> + +<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel"> + Envoyer un mail avec copie, copie cachée, sujet et corps de message +</a></pre> + +<div class="note"> +<p><strong>Note :</strong> La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Notez également l'utilisation du point d'interrogation (<code>?</code>) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL <code>mailto:</code>. C'est la notation standard des requêtes URL. Lire <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires#La_méthode_GET">La méthode GET</a> pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.</p> +</div> + +<p>Voici quelques autres exemples d'URL <code>mailto</code> :</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org?subject=Ceci%20est%20l'objet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20l%27objet</a></li> +</ul> + +<h2 id="Résumé">Résumé</h2> + +<p>C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.</p> + +<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}</div> + +<h2 id="Dans_ce_module">Dans ce module</h2> + +<ul> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> + <li>Création d'hyperliens</li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li> + <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> +</ul> |