You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles

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.

Prerequisits: Familiaritzar-se amb els conceptes bàsics de l’HTML, que es tracten en Iniciació a l’HTML. Format del text en HTML, que es tracta en Fonaments del text HTML.
Objectiu: Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos fitxers.

Què és un hipervincle?

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 xarxa; 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 (URL).

Nota: 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).

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.

Portal de bbc.co.uk, que mostra moltes notícies i també elements de navegació i funcions de menú

Anatomia d’un enllaç

Un enllaç bàsic es crea delimitant el text (o d’altres continguts, consulta Enllaços de nivell de bloc) que vols convertir en un enllaç dintre d’un element <a>, i hi assigna un atribut href  (també conegut com a destinació o target) que conté l’adreça web on vols que apunti l’enllaç.

<p>I’m creating a link to
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a>.
</p>

Això ens dóna el següent resultat:

I’m creating a link to the Mozilla homepage.

Afegir informació de suport amb <title>

Un altre atribut que és possible que vulguis afegir als teus enllaços és title; 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>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>

Això ens dona el resultat següent (el títol apareix com un indicador de funció (tooltip) quan passem el cursor per sobre l’enllaç):

I’m creating a link to the Mozilla homepage.

Nota: 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.

Aprenentatge actiu: Crear un exemple d’enllaç propi

É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 plantilla inicial).

  • Dintre del cos de l’HTML, afegeix un o més paràgrafs o altres tipus de contingut que ja coneguis.
  • Converteix alguns dels continguts en enllaços.
  • Inclou l’atribut title.

Enllaços de nivell de bloc

Com ja s’ha esmentat, pots convertir gairebé qualsevol contingut en un enllaç, fins i tot elements de nivell de bloc. Si vols convertir una imatge en un enllaç, només cal que posis la imatge entre les etiquetes <a></a>.

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage">
</a>

Nota: En un proper article t’assabentaràs de molts més aspectes sobre l’ús d’imatges al web.

Una introducció ràpida a les adreces URL i les rutes

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ò.

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 https://www.mozilla.org/en-US/.

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 creating-hyperlinks).

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.

L’arrel d’aquesta estructura de directoris s’anomena creating-hyperlinks. 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 index.html i un fitxer contacts.html. En un lloc web real, index.html seria la nostra pàgina d’inici o pàgina de destinació.

També hi ha dos directoris dins del nostre directori arrel: pdfs i projects. Cadascun té a dins un sol fitxer: un fitxer PDF (projecte-brief.pdf) i un fitxer index.html, 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 index.html seria potser la pàgina de destinació principal per a obtenir informació relacionada amb el projecte.

  • Mateix directori: Si dins d’index.html (el nivell superior index.html) vols incloure un hipervincle que apunti a contacts.html, 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 contacts.html:

    <p>Want to contact a specific staff member?
    Find details on our <a href="contacts.html">contacts page</a>.</p>
  • Baixar a subdirectoris: Si vols incloure un hipervincle dins d’index.html (el nivell superior index.html) que apunti a projects/index.html, hauries de desplaçar-te cap avall en el directori projects 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 projects/index.html:

    <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
  • Pujar cap als directoris pare: Si vols incloure un hipervincle dins de projects/index.html que apunti a pdfs/project-brief.pdf, hauries de pujar un nivell en el directori, i després anar avall cap al directori pdf. «Pujar un directori» s’indica amb l’ús de dos punts, ... Per tant, l’URL que utilitzaries seria ../pdfs/project-brief.pdf:

    <p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

Nota: Si cal, pots combinar diverses instàncies d’aquestes característiques en adreces URL complexes; per exemple, ../../../complex/path/to/my/file.html.

Fragments de document

És possible enllaçar una part específica d’un document HTML (conegut com un fragment de document), i no només a l'inici del document. Per a això, primer cal assignar un atribut 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:

<h2 id="Mailing_address">Mailing address</h2>

A continuació, per a enllaçar aquest id específic, cal incloure'l al final de l'URL, precedit per un símbol de número o coixinet (#). Per exemple:

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

Fins i tot pots utilitzar la referència mateixa del fragment del document per a fer un enllaç cap a una altra part del mateix document:

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

URL absoluts i relatius

Dos termes que et trobaràs a la  web són l’URL absolut i l’URL relatiu:

URL absolut: Apunta cap a una ubicació definida per la seva ubicació absoluta al web, que inclou el protocol i el nom de domini. Així, per exemple, si una pàgina index.html es carrega en un directori anomenat projects que hi ha dins de l’arrel d’un servidor web, i el domini del lloc web és http://www.example.com, la pàgina estaria disponible en http://www.example.com/projects/index.html (o fins i tot només http://www.example.com/projects/, perquè la majoria dels servidors web cerquen una pàgina de destinació com index.html per carregar-la si no s’especifica a l'URL).

Un URL absolut sempre apuntarà a la mateixa ubicació, no importa des d’on s’utilitzi.

URL relatiu: 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 http://www.example.com/projects/index.html a un fitxer PDF del mateix directori, l’URL només seria el nom del fitxer; per exemple: project-brief.pdf; no cal informació addicional. Si el PDF estigués disponible en un subdirectori dins de projects anomenat pdfs, l’enllaç relatiu seria pdfs/project-brief.pdf (l’URL absolut equivalent seria http://www.example.com/projects/pdfs/project-brief.pdf).

Un URL relatiu assenyala diferents llocs segons on estigui el fitxer que s’utilitza; per exemple, si movem el nostre fitxer index.html del directori projects a l’arrel del lloc web (el nivell superior, no en altres directoris), l’URL relativa pdfs/project-brief.pdf ara apunta a http://www.example.com/pdfs/project-brief.pdf, no a http://www.example.com/projects/pdfs/project-brief.pdf.

Naturalment, la ubicació de l'arxiu project-brief.pdf i el directori pdfs no canviaran de sobte perquè moguis l'arxiu index.html; això faria que el teu enllaç apunti al lloc equivocat, així que no funcionaria si s'hi fes clic. Cal anar amb compte.

Les bones pràctiques en els enllaços

Hi ha algunes bones pràctiques que és bo de seguir quan es posen enllaços. Vegem quines són.

Fes servir un redactat clar

É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:

  • 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.
  • 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.
  • 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.

Vegem-ne un exemple concret:

Text d’enllaç ben redactat: Download Firefox

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

Text d’enllaç mal redactat: Click here to download Firefox

<p><a href="https://firefox.com/">
  Click here
</a>
to download Firefox</p>

Altres consells:

  • 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.
  • 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).
  • 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.
  • 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í".

Utilitza enllaços relatius sempre que puguis

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 mateix lloc web (i fes servir enllaços absoluts quan enllacis a un altre lloc web):

  • 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.
  • 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 (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.

Indica amb claredat quan s’enllacen recursos no HTML

Quan enllaces a un recurs que es pot descarregar (com un document PDF o Word) o reproduir en continu (streaming), 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:

  • 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.
  • 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.

Observa amb alguns exemples quin tipus de text pots utilitzar aquí:

<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>

Utilitza l‘atribut download quan enllacis a una descàrrega

Quan enllaces a un recurs que s’ha de descarregar en lloc d’obrir-se en el navegador, pots utilitzar l’atribut download, 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:

<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>

Aprenentatge actiu: crear un menú de navegació

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.

Fes còpies locals de les quatre pàgines següents, totes en el mateix directori (consulta també el directori de navegació del menú d’inici per a la llista completa de fitxers):

Hauries de:

  1. 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.
  2. Convertir cada nom de la pàgina en un enllaç a aquesta pàgina.
  3. Copiar el menú de navegació en cada pàgina.
  4. 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.

L’exemple acabat hauria de veure’s més o menys així:

Un exemple senzill de menú de navegació HTML, amb els elements inici, imatges, projectes i xarxes socials

Nota: Si t’encalles o no saps si ho has fet bé, pots comprovar la solució en el directori de l’etiquetatge del menú de navegació.

Enllaços a correu electrònic

É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 <a> i l’esquema d’URL mailto:.

En la forma més bàsica i d’ús més comú, un enllaç mailto: simplement indica l’adreça de correu electrònic del destinatari. Per exemple:

<a href="mailto:ningu@mozilla.org">Envia un missatge a ningú</a>

Això genera un enllaç que té aquest aspecte: Envia un missatge a ningú.

De fet, fins i tot l’adreça de correu electrònic és opcional. Si la deixes fora (és a dir, href é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.

Especificar detalls

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 mailto: 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.

Aquí hi ha un exemple que inclou un cc, bcc, assumpte i cos:

<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>

Nota: Els valors de cada camp han de tenir una codificació URL (és a dir, amb caràcters no imprimibles i espais percentatge-escapats). També has de tenir en compte l’ús del signe (&), que separa cada camp en la URL mailto:. Aquesta és la notació estàndard d’una consulta URL.

Aquí hi ha algunes altres mostres d’URL de mailto::

Sumari

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.

Document Tags and Contributors

Last updated by: UOCccorcoles,