diff options
Diffstat (limited to 'files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html')
| -rw-r--r-- | files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html | 320 |
1 files changed, 320 insertions, 0 deletions
diff --git a/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html b/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html new file mode 100644 index 0000000000..c2bc2d0b0c --- /dev/null +++ b/files/ca/learn/html/introducció_al_html/crear_hipervincles/index.html @@ -0,0 +1,320 @@ +--- +title: Crear hipervincles +slug: Learn/HTML/Introducció_al_HTML/Crear_hipervincles +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relative + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Els hipervincles són realment importants; són els que fan de la xarxa web una xarxa. En aquest article es mostra la sintaxi necessària per a fer un enllaç, i es tracten les bones pràctiques en els enllaços.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Familiaritzar-se amb els conceptes bàsics de l’HTML, que es tracten en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Getting_started">Iniciació a l’HTML</a>. Format del text en HTML, que es tracta en <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Fonaments_de_text_HTML">Fonaments del text HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos fitxers.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_un_hipervincle"><span id="result_box" lang="ca"><span>Què</span> <span>és</span> <span>un hipervincle</span><span>?</span></span></h2> + +<p>Els hipervincles són una de les innovacions més interessants que la web té per oferir. Bé, ha estat una característica de la web des del principi, i són els que fan de la xarxa web una <em>xarxa</em>; ens permeten vincular els nostres documents a un altre document (o un altre recurs) qualsevol, també ens permeten vincular parts específiques dels documents entre elles, i permeten que les aplicacions estiguin disponibles en una adreça web (això contrasta amb les aplicacions natives, que requerien instal·lació i altres obligacions d’aquesta mena). Gairebé qualsevol contingut del web es pot convertir en un enllaç, de manera que en fer-hi clic (o activar-ho d’alguna altra manera) el navegador anirà cap a una altra adreça web ({{glossary("URL")}}).</p> + +<div class="note"> +<p><strong>Nota</strong>: Una URL pot apuntar a fitxers HTML, fitxers de text, imatges, documents de text, vídeo i fitxers d’àudio, i qualsevol cosa que pugui existir en la web. Si el navegador no sap com mostrar o gestionar el fitxer, se’t demana si vols obrir el fitxer (en aquest cas el deure d’obrir o manipular el fitxer passa per una aplicació nativa adequada en el dispositiu) o descarregar el fitxer (i en aquest cas pots fer-te’n càrrec més endavant).</p> +</div> + +<p>La pàgina web de la BBC, per exemple, conté un gran nombre d’enllaços que apunten no només a múltiples històries de notícies, sinó també a diferents àmbits del lloc web (funcions de navegació), pàgines d’accés/registre (eines d’usuari), i molt més.</p> + +<p><img alt="Portal de bbc.co.uk, que mostra moltes notícies i també elements de navegació i funcions de menú " src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomia_d’un_enllaç"><span id="result_box" lang="ca"><span>Anatomia</span> <span>d’un</span> <span>enllaç</span></span></h2> + +<p>Un enllaç bàsic es crea delimitant el text (o d’altres continguts, consulta {{anch("Enllaços de nivell de bloc")}}) que vols convertir en un enllaç dintre d’un element {{htmlelement("a")}}, i hi assigna un atribut {{htmlattrxref ("href", "a")}} (també conegut com a <strong>destinació</strong> o <em><strong>target</strong></em>) que conté l’adreça web on vols que apunti l’enllaç.</p> + +<pre class="brush: html notranslate"><p>I’m creating a link to +<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>. +</p></pre> + +<p>Això ens dóna el següent resultat:</p> + +<p>I’m creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.</p> + +<h3 id="Afegir_informació_de_suport_amb_<title>">Afegir informació de suport amb <title></h3> + +<p>Un altre atribut que és possible que vulguis afegir als teus enllaços és <code>title</code>; aquest atribut està destinat a contenir informació complementària útil sobre l’enllaç, com ara quin tipus d’informació conté la pàgina, o coses que cal tenir en compte. Per exemple:</p> + +<pre class="brush: html notranslate"><p>I’m creating a link to +<a href="https://www.mozilla.org/en-US/" + title="The best place to find more information about Mozilla’s + mission and how to contribute">the Mozilla homepage</a>. +</p></pre> + +<p>Això ens dona el resultat següent (el títol apareix com un indicador de funció (<em>tooltip</em>) quan passem el cursor per sobre l’enllaç):</p> + +<p>I’m creating a link to <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="The best place to find more information about Mozilla’s mission and how to contribute">the Mozilla homepage</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> El títol d'un enllaç només es mostra quan el punter del ratolí planeja per sobre, i això significa que les persones que fan servir el teclat per navegar, o pantalles tàctils, tindran dificultats per a accedir a aquesta informació. Si la informació d'un títol és realment important per la usabilitat d'una pàgina, s'hauria de presentar d'una forma accessible per a tothom, per exemple incloent-la com a text normal.</p> +</div> + +<h3 id="Aprenentatge_actiu_Crear_un_exemple_d’enllaç_propi">Aprenentatge actiu: Crear un exemple d’enllaç propi</h3> + +<p>És l’hora de l’aprenentatge actiu: volem que creïs un document HTML al teu editor de codi (faràs bé d’aconseguir la nostra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla inicial</a>).</p> + +<ul> + <li>Dintre del cos de l’HTML, afegeix un o més paràgrafs o altres tipus de contingut que ja coneguis.</li> + <li>Converteix alguns dels continguts en enllaços.</li> + <li>Inclou l’atribut <code>title</code>.</li> +</ul> + +<h3 id="Enllaços_de_nivell_de_bloc">Enllaços de nivell de bloc</h3> + +<p>Com ja s’ha esmentat, pots convertir gairebé qualsevol contingut en un enllaç, fins i tot <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/HTML/Introducci%C3%B3_al_HTML/Getting_started#Elements_de_bloc_i_elements_de_l%C3%ADnia">elements de nivell de bloc</a>. Si vols convertir una imatge en un enllaç, només cal que posis la imatge entre les etiquetes <code><a></a></code>.</p> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>Nota</strong>: En un proper article t’assabentaràs de molts més aspectes sobre l’ús d’imatges al web.</p> +</div> + +<h2 id="Una_introducció_ràpida_a_les_adreces_URL_i_les_rutes">Una introducció ràpida a les adreces URL i les rutes</h2> + +<p>Per entendre bé les destinacions dels enllaços, cal comprendre les adreces URL i les rutes dels fitxers. En aquesta secció es proporciona la informació que necessites per a aconseguir això.</p> + +<p>Un URL, o Uniform Resource Locator (localitzador de recursos uniforme), és simplement una cadena de text que defineix on es pot localitzar alguna cosa a la web. Per exemple, la pàgina d’inici de Mozilla en versió anglesa es troba a <code>https://www.mozilla.org/en-US/</code>.</p> + +<p>Els URL utilitzen rutes per a trobar fitxers. Les rutes especifiquen en quina part del sistema de fitxers es troba el fitxer en el qual estàs interessat. Vegem un exemple senzill d’una estructura de directoris (observa el directori de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> + +<p><img alt="Una estructura de directoris senzilla. El directori pare s’anomena creating-hyperlinks i conté dos fitxers anomenats index.html i contacts.html i dos directoris anomenats projects i pdfs, que contenen un fitxer index.html i un fitxer project-brief.pdf, respectivament." src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>L’<strong>arrel</strong> d’aquesta estructura de directoris s’anomena <code>creating-hyperlinks</code>. Quan treballes amb un lloc web en local, hi ha un directori que conté dins tot el lloc web. A l’arrel hi ha un fitxer <code>index.html</code> i un fitxer <code>contacts.html</code>. En un lloc web real, <code>index.html</code> seria la nostra pàgina d’inici o pàgina de destinació.</p> + +<p>També hi ha dos directoris dins del nostre directori arrel: <code>pdfs</code> i <code>projects</code>. Cadascun té a dins un sol fitxer: un fitxer PDF (<code>projecte-brief.pdf</code>) i un fitxer <code>index.html</code>, respectivament. Observa que hi pot haver sense problemes dos fitxers index.html en un projecte, sempre que es trobin en ubicacions diferents del sistema de fitxers. Molts llocs web ho fan. El segon <code>index.html</code> seria potser la pàgina de destinació principal per a obtenir informació relacionada amb el projecte.</p> + +<ul> + <li> + <p><strong>Mateix directori</strong>: Si dins d’<code>index.html</code> (el nivell superior <code>index.html</code>) vols incloure un hipervincle que apunti a <code>contacts.html</code>, només has d’especificar el nom del fitxer per a establir l’enllaç, perquè és en el mateix directori que el fitxer d’origen. Aleshores, l’URL que utilitzaries seria <code>contacts.html</code>:</p> + + <pre class="brush: html notranslate"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>Baixar a subdirectoris</strong>: Si vols incloure un hipervincle dins d’<code>index.html</code> (el nivell superior <code>index.html</code>) que apunti a <code>projects/index.html</code>, hauries de desplaçar-te cap avall en el directori <code>projects</code> abans d’indicar el nom del fitxer que vols enllaçar. Això es fa especificant el nom del directori, a continuació, una barra inclinada, i a continuació, el nom del fitxer. De manera que utilitzaries l’URL <code>projects/index.html</code>:</p> + + <pre class="brush: html notranslate"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>Pujar cap als directoris pare</strong>: Si vols incloure un hipervincle dins de <code>projects/index.html</code> que apunti a <code>pdfs/project-brief.pdf</code>, hauries de pujar un nivell en el directori, i després anar avall cap al directori <code>pdf</code>. «Pujar un directori» s’indica amb l’ús de dos punts, <code>..</code>. Per tant, l’URL que utilitzaries seria <code>../pdfs/project-brief.pdf</code>:</p> + + <pre class="brush: html notranslate"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si cal, pots combinar diverses instàncies d’aquestes característiques en adreces URL complexes; per exemple, <code>../../../complex/path/to/my/file.html</code>.</p> +</div> + +<h3 id="Fragments_de_document">Fragments de document</h3> + +<p>És possible enllaçar una part específica d’un document HTML (conegut com un <strong>fragment de document</strong>), i no només a l'inici del document. Per a això, primer cal assignar un atribut {{htmlattrxref ("id")}} a l’element en què vols establir l’enllaç. Normalment té sentit enllaçar en una línia de títol específica, de manera que es veuria alguna cosa com la següent:</p> + +<pre class="brush: html notranslate"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>A continuació, per a enllaçar aquest <code>id</code> específic, cal incloure'l al final de l'URL, precedit per un símbol de número o coixinet (#). Per exemple:</p> + +<pre class="brush: html notranslate"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p>Fins i tot pots utilitzar la referència mateixa del fragment del document per a fer un enllaç cap a <em>una altra part del mateix document</em>:</p> + +<pre class="brush: html notranslate"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="URL_absoluts_i_relatius">URL absoluts i relatius</h3> + +<p>Dos termes que et trobaràs a la web són l’<strong>URL absolut</strong> i l’<strong>URL relatiu:</strong></p> + +<p><strong>URL absolut</strong>: Apunta cap a una ubicació definida per la seva ubicació absoluta al web, que inclou el {{glossary("protocol")}} i el {{glossary("nom de domini")}}. Així, per exemple, si una pàgina <code>index.html</code> es carrega en un directori anomenat <code>projects</code> que hi ha dins de l’arrel d’un servidor web, i el domini del lloc web és <code>http://www.example.com</code>, la pàgina estaria disponible en <code>http://www.example.com/projects/index.html</code> (o fins i tot només <code>http://www.example.com/projects/</code>, perquè la majoria dels servidors web cerquen una pàgina de destinació com <code>index.html</code> per carregar-la si no s’especifica a l'URL).</p> + +<p>Un URL absolut sempre apuntarà a la mateixa ubicació, no importa des d’on s’utilitzi.</p> + +<p><strong>URL relatiu</strong>: Apunta a una ubicació que és relativa al fitxer que s’enllaça, una mica com el que hem vist en la secció anterior. Per exemple, si volem tenir un enllaç des del nostre fitxer d’exemple en <code>http://www.example.com/projects/index.html</code> a un fitxer PDF del mateix directori, l’URL només seria el nom del fitxer; per exemple: <code>project-brief.pdf</code>; no cal informació addicional. Si el PDF estigués disponible en un subdirectori dins de <code>projects</code> anomenat <code>pdfs</code>, l’enllaç relatiu seria <code>pdfs/project-brief.pdf</code> (l’URL absolut equivalent seria <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> + +<p>Un URL relatiu assenyala diferents llocs segons on estigui el fitxer que s’utilitza; per exemple, si movem el nostre fitxer <code>index.html</code> del directori <code>projects</code> a l’arrel del lloc web (el nivell superior, no en altres directoris), l’URL relativa <code>pdfs/project-brief.pdf</code> ara apunta a <code>http://www.example.com/pdfs/project-brief.pdf</code>, no a <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Naturalment, la ubicació de l'arxiu <code>project-brief.pdf</code> i el directori <code>pdfs</code> no canviaran de sobte perquè moguis l'arxiu <code>index.html</code>; això faria que el teu enllaç apunti al lloc equivocat, així que no funcionaria si s'hi fes clic. Cal anar amb compte.</p> + +<h2 id="Les_bones_pràctiques_en_els_enllaços">Les bones pràctiques en els enllaços</h2> + +<p>Hi ha algunes bones pràctiques que és bo de seguir quan es posen enllaços. Vegem quines són.</p> + +<ul> +</ul> + +<h3 id="Fes_servir_un_redactat_clar">Fes servir un redactat clar</h3> + +<p>És molt fàcil afegir enllaços. Però amb això, no n’hi ha prou. Hem de fer que els nostres enllaços siguin accessibles a tots els lectors, independentment de quin sigui el seu context i quines eines prefereixen. Per exemple:</p> + +<ul> + <li>Als usuaris de lectors de pantalla els agrada saltar d’enllaç en enllaç per la pàgina, i llegir els enllaços fora del context.</li> + <li>Els motors de cerca utilitzen el text de l’enllaç per a indexar els fitxers de destinació, de manera que és una bona idea incloure paraules clau en el text de l’enllaç per a descriure de manera efectiva què s’enllaça.</li> + <li>Els usuaris que fan una lectura visual de la pàgina, fan un cop d’ull a la pàgina en lloc de llegir-la paraula per paraula, i els ulls se senten atrets per les característiques que es destaquen en la pàgina, com ara els enllaços. Trobaran útil que el text dels enllaços sigui descriptiu.</li> +</ul> + +<p>Vegem-ne un exemple concret:</p> + +<p><span class="short_text" id="result_box" lang="ca">Text d’enllaç <strong>ben</strong> redactat</span>: <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><span class="short_text" id="result_box" lang="ca"><strong>Text d’enllaç mal</strong> redactat</span>: <a href="https://firefox.com/">Click here</a> to download Firefox</p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Click here +</a> +to download Firefox</p> +</pre> + +<p>Altres consells:</p> + +<ul> + <li>No repeteixis l’URL com a part del text de l’enllaç; els URL es veuen lletjos i el so que generen encara és més lleig quan un lector de pantalla els llegeix lletra per lletra.</li> + <li>No diguis «enllaç» o «enllaços a» en el text de l’enllaç; és només soroll. Els lectors de pantalla avisen que hi ha un enllaç. Els usuaris que fan una lectura visual de la pàgina també saben que hi ha un enllaç perquè els enllaços en general es decoren amb un color diferent i es mostren subratllats (aquesta convenció general no s’ha de trencar, perquè els usuaris hi estan acostumats).</li> + <li>Mantingues l’etiqueta de l’enllaç tan curta com sigui possible, sobretot en enllaços llargs que molesten els usuaris de lectors de pantalla, que han d’escoltar la lectura de tot el text.</li> + <li>Minimitza les instàncies en què múltiples còpies del mateix text enllacen a llocs diferents. Això pot causar problemes pels usuaris de lectors de pantalla, si hi ha una llista d'enllaços sense context etiquetats tots "fes clic aquí", "fes clic aquí", "fes clic aquí".</li> +</ul> + +<h3 id="Utilitza_enllaços_relatius_sempre_que_puguis">Utilitza enllaços relatius sempre que puguis</h3> + +<p>A partir de la descripció anterior, es podria pensar que és una bona idea utilitzar enllaços absoluts en tot moment; al cap i a la fi, no es trenquen com els enllaços relatius quan una pàgina es mou. Tanmateix, és bo emprar enllaços relatius sempre que puguis quan enllaces a altres llocs dins del <em>mateix lloc web</em> (i fes servir enllaços absoluts quan enllacis a un <em>altre lloc web</em>):</p> + +<ul> + <li>Per començar, resulta molt més fàcil d’analitzar el codi si les URL són relatives perquè en general són molt més curtes que les URL absolutes, i la lectura del codi resulta força més lleugera.</li> + <li>En segon lloc, és més eficient utilitzar URL relatives sempre que sigui possible. Quan utilitzes una URL absoluta, el navegador comença per cercar la ubicació real del servidor en el sistema de noms de domini ({{glossary( "DNS")}}), aleshores va a aquest servidor i cerca el fitxer que s’ha demanat. En canvi, amb una adreça URL relativa el navegador cerca el fitxer que se sol·licita en el mateix servidor. De manera que si utilitzes adreces URL absolutes en lloc d’URL relatives, el teu navegador ha de fer feina extra constantment, i això significa que funciona amb menys eficiència.</li> +</ul> + +<h3 id="Indica_amb_claredat_quan_s’enllacen_recursos_no_HTML">Indica amb claredat quan s’enllacen recursos no HTML</h3> + +<p>Quan enllaces a un recurs que es pot descarregar (com un document PDF o Word) o reproduir en continu (<em>streaming</em>), com ara un vídeo o un àudio, o que pot tenir un altre efecte potencialment inesperat (s’obre una finestra emergent), hauries d’afegir un redactat clar per a reduir qualsevol confusió. Pot resultar força molest, per exemple:</p> + +<ul> + <li>Si tens una connexió de poc ample de banda, fas clic en un enllaç i s’inicia una descàrrega de diversos megabytes de manera inesperada.</li> + <li>Si no has aconseguit instal·lar el reproductor de Flash, fas clic en un enllaç i et trobes de cop i volta en una pàgina que requereix Flash.</li> +</ul> + +<p>Observa amb alguns exemples quin tipus de text pots utilitzar aquí:</p> + +<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> + Download the sales report (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + Watch the video (stream opens in separate tab, HD quality) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Play the car game (requires Flash) +</a></p></pre> + +<h3 id="Utilitza_l‘atribut_download_quan_enllacis_a_una_descàrrega">Utilitza l‘atribut <code>download</code> quan enllacis a una descàrrega</h3> + +<p>Quan enllaces a un recurs que s’ha de descarregar en lloc d’obrir-se en el navegador, pots utilitzar l’atribut <code>download</code>, que proporciona l’opció de desar amb el nom de fitxer per defecte. Heus aquí un exemple amb un enllaç de descàrrega de Firefox 39 per a la versió de Windows:</p> + +<pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" + download="firefox-39-installer.exe"> + Download Firefox 39 for Windows +</a></pre> + +<h2 id="Aprenentatge_actiu_crear_un_menú_de_navegació">Aprenentatge actiu: crear un menú de navegació</h2> + +<p>Per a aquest exercici, et volem proposar que enllacis algunes pàgines amb un menú de navegació per a crear un lloc web de diverses pàgines. Aquesta és una manera comuna per a crear un lloc web: en cada pàgina s’utilitza la mateixa estructura de pàgina, que inclou el mateix menú de navegació, de manera que quan fas clic als enllaços fa la impressió que ets en el mateix lloc, però apareix un contingut diferent.</p> + +<p>Fes còpies locals de les quatre pàgines següents, totes en el mateix directori (consulta també el directori de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navegació del menú d’inici</a> per a la llista completa de fitxers):</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>Hauries de:</p> + +<ol> + <li>Afegir una llista no ordenada en el lloc indicat en una pàgina, que contingui els noms de les pàgines que s’enllacen. Un menú de navegació és justament una llista d’enllaços, de manera que això és semànticament correcte.</li> + <li>Convertir cada nom de la pàgina en un enllaç a aquesta pàgina.</li> + <li>Copiar el menú de navegació en cada pàgina.</li> + <li>Eliminar de cada pàgina només l’enllaç a ella mateixa; és confús incloure un enllaç a la mateixa pàgina, i no té sentit, i el fet que no hi hagi enllaç resulta un bon recordatori visual de la pàgina en què et trobes.</li> +</ol> + +<p>L’exemple acabat hauria de veure’s més o menys així:</p> + +<p><img alt="Un exemple senzill de menú de navegació HTML, amb els elements inici, imatges, projectes i xarxes socials" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si t’encalles o no saps si ho has fet bé, pots comprovar la solució en el directori de l’<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">etiquetatge del menú de navegació</a>.</p> +</div> + +<h2 id="Enllaços_a_correu_electrònic">Enllaços a correu electrònic</h2> + +<p>És possible crear enllaços o botons que, quan els prems, en lloc d’enllaçar amb un recurs o pàgina, obren un missatge de correu electrònic nou de sortida. Això es fa amb l’element {{HTMLElement("a")}} i l’esquema d’URL <code>mailto:</code>.</p> + +<p>En la forma més bàsica i d’ús més comú, un enllaç <code>mailto:</code> simplement indica l’adreça de correu electrònic del destinatari. Per exemple:</p> + +<pre class="brush: html notranslate"><a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a> +</pre> + +<p>Això genera un enllaç que té aquest aspecte: <a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a>.</p> + +<p>De fet, fins i tot l’adreça de correu electrònic és opcional. Si la deixes fora (és a dir, {{htmlattrxref ("href", "a")}} és simplement "mailto:"), el client de correu de l’usuari obrirà una finestra de correu electrònic sortint nova que encara no té cap adreça de destinació especificada. Això sovint és útil com a enllaços per «compartir» en què els usuaris poden fer clic i enviar un correu electrònic a una adreça que triïn.</p> + +<h3 id="Especificar_detalls">Especificar detalls</h3> + +<p>A més de l’adreça de correu electrònic, pots proporcionar més informació. De fet, pots afegir qualsevol camp de capçalera d’un missatge de correu electrònic estàndard a l’adreça URL <code>mailto:</code> que proporcionis. El més habituals són «subject», «cc» i «body» (respectivament, «tema», «amb còpia» i «cos», que no és un veritable camp de capçalera, però permet especificar el contingut d’un missatge curt per al nou correu electrònic). Cada camp i el seu valor s’especifiquen com un terme de la consulta.</p> + +<p>Aquí hi ha un exemple que inclou un cc, bcc, assumpte i cos:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> + Send mail with cc, bcc, subject and body +</a></pre> + +<div class="note"> +<p><strong>Nota:</strong> Els valors de cada camp han de tenir una codificació URL (és a dir, amb caràcters no imprimibles i espais <a href="http://en.wikipedia.org/wiki/Percent-encoding">percentatge-escapats</a>). També has de tenir en compte l’ús del signe (&), que separa cada camp en la URL <code>mailto:</code>. Aquesta és la notació estàndard d’una consulta URL.</p> +</div> + +<p>Aquí hi ha algunes altres mostres d’URL de <code><code>mailto:</code></code>:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Sumari">Sumari</h2> + +<p>Això, de tota manera, és tot sobre els enllaços, per ara! Tornarem als enllaços més endavant en el curs, quan comencem a aplicar-los estils. El pas següent pel que fa a l’HTML és tornar a la semàntica de text i conèixer algunes de les característiques més avançades/inusuals que podeu trobar útils; la formatació avançada del text és la vostra pròxima parada.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> |