This translation is incomplete. Please help translate this article from English.

Els hipervincles són realment importants - són els que fan de la web un web. En aquest article es mostra la sintaxi necessària per fer un enllaç, i es tracta de les millors pràctiques en els enllaços.

Requisits previs: Familiaritat bàsica en HTML, tractat en Inici en HTML. Format del text en HTML, tractat en Fonaments del text HTML.
Objectiiu: Aprendre com implementar un hipervincle amb eficàcia, i enllaçar diversos arxius junts.

Què és un hipervincle?

Els hipervincles són una de les innovacions més interessants de la web que té per oferir. Bé, ha estat una característica del web des del principi, ells són els que fan de la Web un Web - ens permeten vincular els nostres documents a qualsevol altre document (o un altre recurs) que vulguem, també podem vincular parts específiques dels documents, i podem fer que les aplicacions estiguin disponibles en una adreça web (això contrasta amb les aplicacions natives, les quals han de ser instal·lades i totes aquestes obligacions.) Gairebé qualsevol contingut del web es pot convertir en un enllaç, de manera que quan fent clic (o activacio d'un altre tipus) farà que el navegador web vagi a una altra adreça web (URL).

Nota: Una URL pot apuntar a fitxers HTML, arxius de text, imatges, documents de text, vídeo i arxius d'àudio, i qualsevol cosa que pogui existir en la web. Si el navegador no sap com mostrar o gestionar l'arxiu, se us demanarà si voleu obrir l'arxiu (en aquest cas el deure d'obrir o manipular l'arxiu passa per una aplicació nativa adequada al dispositiu) o descarregar l'arxiu (en aquest cas es pot intentar tractar-ho 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 àrees del lloc (funcionalitat de navegació), pàgines d'Acces/Registre (eines d'usuari) i molt més.

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

Anatomia d'un enllaç

Un enllaç bàsic es crea embolicant el text (o d'altres continguts, veure Block level links) que voleu convertir en un enllaç dintre d'un element <a>, i donant-li un atribut href  (també conegut com a destinació -> target) que contindrà l'adreça web que desitjeu 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 vulgueu afegir als vostres enllaços és title; aquest està destinat a contenir informació complementària útil sobre l'enllaç, com ara quin tipus d'informació conté la pàgina, o el que es pot 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 dóna el resultat següent (el títol apareixerà com un tooltip quan planegem per sobre l'enllaç):

I'm creating a link to the Mozilla homepage.

Aprenentatge actiu: Crear el vostre propi enllaç d'exemple

Temps d'aprenentatge actiu: ens agradaria que creéssiu un document HTML mitjançant el vostre editor de codi (faríeu molt bé d'aconseguir la nostra plantilla incial).

  • Dintre del cos HTML, tracteu d'afegir un o més paràgrafs o altres tipus de contingut que ja coneixeu.
  • Convertir alguns dels continguts en enllaços.
  • Incloure l'atribut title.

Enllaços a nivell de bloc

Com es va esmentar abans, podeu convertir gairebé qualsevol contingut en un enllaç, fins i tot elements a nivell de bloc. Si teniu una imatge que voleu convertir en un enllaç, només cal posar 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: Us donareu compte, molt més, sobre l'ús d'imatges a la web en un proper article.

Una primera mà ràpida a les adreces URL i rutes

Per entendre completament les destinacions dels enllaços, cal comprendre les adreces URL i les rutes dels arxius. En aquesta secció es proporciona la informació que necessiteu per aconseguir això.

Una URL, o Uniform Resource Locator és simplement una cadena de text que defineix on es pot localitzar alguna cosa a la web. Per exemple la pàgina d'inici Mozilla's English es troba en https://www.mozilla.org/en-US/.

Les URLs utilitzen rutes per trobar arxius. Les rutes especifiquen en quina part del sistema d'arxius es troba l'arxiu en el qual esteu interessats. Vegem un exemple simple d'una estructura de directoris (veure el directori de creating-hyperlinks).

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

L'arrel d'aquesta estructura de directoris s'anomena creació-hipervincles. Quan es treballa a nivell local amb un lloc web, tindreu un directori que tot el lloc està dins. Dins de l'arrel, tenim un arxiu index.html i un 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 arrel - pdfs i projectes. Aquests tenen cadascun un sol arxiu dins d'ells - un PDF (projecte-brief.pdf) i un arxiu index.html, respectivament. Recordeu que poden tenir molt alegrement dos arxius index.html en un projecte, sempre que es trobin en diferents ubicacions en el sistema d'arxius. Molts llocs web ho fan. El segon index.html seria potser la pàgina de destinació principal per obtenir informació relacionada amb el projecte.

  • Mateix directori: Si voleu incloure un hipervincle dins d'index.html (el nivell superior index.html) que apunti a contacts.html, només es necessita especificar el nom del fitxer que voleu establir el enllaç, ja que està en el mateix directori que el fitxer actual. Pel que la URL que utilitzaríeu seria contacts.html:

    <p>Want to contact a specific staff member?
    Find details on our <a href="contacts.html">contacts page</a>.</p>
  • Desplaçament entre subdirectoris: Si voleu incloure un hipervincle dins d'index.html (el nivell superior index.html) que apunti a projects/index.html, hauríeu de desplaçar-vos cap avall en el directori de projectes abans d'indicar l'arxiu que desitjeu enllaçar. Això es realitza especificant el nom del directori, a continuació, una barra inclinada, i a continuació, el nom de l'arxiu. De manera que la URL que utilitzaríeu seria projects/index.html:

    <p>Visit my <a href="projects/index.html">project homepage</a>.</p>
  • Desplaçament endarrera cap els directoris pare: Si voleu incloure un hipervincle dins de projects/index.html que apunti a pdfs/project-brief.pdf, hauríeu de pujar un nivell en el directori, i després cap avall en el directori pdf. "Anar a un directori" s'indica amb l'ús de dos punts - .. - Pel que la URL que utilitzaríeu seria ../pdfs/project-brief.pdf:

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

Nota: Es poden combinar diverses instàncies d'aquestes característiques a les adreces URL complexes, si cal, 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), en lloc de la part superior del document. Per a això, primer cal assignar un atribut id a l'element que voleu establir l'enllaç. Normalment té sentit enllaçar a una línia de cpaçalera específica, de manera que es veuria alguna cosa com la següent:

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

A continuació, enllaçar aquest id específic, que cal incloure-ho al final de la URL, precedit per un símbol hash/pound (#), per exemple:

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

Fins i tot podeu utilitzar la referència del fragment del document per si sol per enllaçar-ho 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>

URLs Absolutes versus relatives

Dos termes que us trobareu en la  web són URL absoluta i URL relativa:

URL absoluta: És un punter a una ubicació definida per la seva ubicació absoluta al web, incloent el protocol i el nom de domini. Així, per exemple, si una pàgina index.html es carrega en un directori anomenat projects que es troba dins de l'arrel d'un servidor web, i el domini del lloc web és http://www.example.com, la pàgina estaria disponible a http://www.example.com/projects/index.html (o fins i tot només http://www.example.com/projects/, com la majoria dels servidors web amb tan sols mirar a una pàgina de destinació com index.html per carregar si no s'especifica a la URL).

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

URL relative: És un punter a una ubicació que és relativa a l'arxiu que estem enllaçant, mes com el que hem vist a la secció anterior. Per exemple, si volem tenir un enllaç des del nostre arxiu d'exemple en http://www.example.com/projects/index.html a un arxiu PDF en el mateix directori, l'URL només seria el nom de l'arxiu - per exemple, project-brief.pdf - no necessita informació addicional. Si el PDF estava disponible en un subdirectori dins de projects anomenat pdfs, el enllaç relatiu seria pdfs/project-brief.pdf (la URL absoluta equivalent seria http://www.example.com/projects/pdfs/project-brief.pdf).

Una URL relativa assenyalarà a diferents llocs depenent d'on es troba l'arxiu que s'utilitza - per exemple, si movem el nostre arxiu index.html del directori projects a l'arrel del lloc web (el nivell superior, no en altres directoris), la URL relativa pdfs/project-brief.pdf ara apuntarà a http://www.example.com/pdfs/project-brief.pdf, no http://www.example.com/projects/pdfs /project-brief.pdf.

Les millors pràctiques en enllaços

Hi ha algunes millors pràctiques a seguir, en escriure enllaços. Veurem aquestes ara.

Usar una redacció clara en l'enllaç

És fàcil afegir enllaços a la vostra pàgina. Això no és suficient. Hem de fer que els nostres enllaços siguin accessibles a tots els lectors, independentment del seu context actual i quines eines prefereixen. Per exemple:

  • Els usuaris de lectors de pantalla els agrada saltar d'enllaç en enllaç a la pàgina, i la lectura dels enllaços fora de context.
  • Els motors de cerca utilitzen el text de l'enllaç per indexar els arxius de destinació, pel que és una bona idea incloure paraules clau en el text de l'enllaç per descriure de manera efectiva el que s'està enllaçant.
  • Els lectors visuals fan un cop d'ull sobre la pàgina en lloc de llegir cada paraula, i els seus ulls se senten atrets per les característiques que es destaquen en la pàgina, com els enllaços. Ells trobaran útil el text descriptiu dels enllaços.

Vegem un exemple concret:

Bon text de l'enllaç : Download Firefox

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

Mal text de l'enllaç : Click here to download Firefox

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

Altres consells:

  • No repetiu la URL com a part del text de l'enllaç - Els URLs es veuen lletjos, i el so encara més lleig, quan un lector de pantalla llegeix lletra per lletra.
  • No digueu "enllaç" o "enllaços a" en el text de l'enllaç - és només soroll. Els lectors de pantalla avisen a la gent que hi ha un enllaç. Els usuaris Visual també sabran que hi ha un enllaç, perquè els enllaços són generalment decorats amb un color diferent i subratllats (aquesta convenció general no s'ha de trencar-, ja que els usuaris estan acostumats a ella.)
  • Mantingueu l'etiqueta de l'enllaç tan curta com sigui possible - especialment en enllaços llargs que molestan als usuaris de lectors de pantalla, que han d'escoltar tota la lectura del text.

Utilitzar enllaços relatius si pot ser

A partir de la descripció anterior, es podria pensar que és una bona idea utilitzar enllaços absoluts en tot moment; després de tot, no es trenquen quan una pàgina es mou com els enllaços relatius. No obstant això, s'ha d'utilitzar enllaços relatius sempre que sigui possible quan s'enllaça a altres llocs dins del mateix lloc web (quan s'enllaça a un altre lloc web, haureu d'utilitzar un enllaç absolut):

  • Per començar, és molt més fàcil que analitzeu el vostre codi - les URL relatives són generalment molt més curtes que les URL absolutes, el que fa que la lectura del codi sigui molt més fàcil.
  • En segon lloc, és més eficient utilitzar URL relatives sempre que sigui possible. Quan s'utilitza un URL absoluta, el navegador comença per buscar la ubicació real del servidor mitjançant la consulta del nom de domini amb la DNS, llavors va a aquest servidor i busca l'arxiu que s'ha demanat. Amb una adreça URL relativa, d'altra banda, el navegador buscar l'arxiu que s'està sol·licitant, en el mateix servidor. Així que si utilitzeu URL absolutes en lloc de fer URL relatives, esteu fent que constantment el vostre navegador faci feina extra, el que significa que funcionarà amb menys eficiència.

Vincular recursos no HTML - deixar senyals clars

Quan s'enllaça a un recurs que pot ser descarregat (com un document PDF o Word) o per streaming (com vídeo o àudio) o té un altre efecte potencialment inesperat (s'obre una finestra emergent, o carrega una pel·lícula Flash), s'hauria d'afegir una formulació clara per reduir qualsevol confusió. Pot ser bastant molest, per exemple:

  • Si esteu en una connexió de banda ample baixa, feu clic en un enllaç i llavors s'iniciï una descàrrega de diversos megabytes de forma inesperada.
  • Si no heu aconseguit instal·lar el Flash player, i feu clic en un enllaç de cop i volta us podeu trobar en una pàgina que requereixi Flash.

Vegem alguns exemples, per veure quin tipus de text es pot 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>

Utilitzar l'atribut download quan s'enllaça a una descàrrega

Quan s'enllaça a un recurs per ser descarregat en lloc d'obrir-se en el navegador, podeu utilitzar l'atribut download per a proporcionar un guardar per defecte el nom d'arxiu. Heus aquí un exemple amb un enllaç de descàrrega, per a la versió de Windows de Firefox 39:

<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, ens agradaria enllaçar algunes pàgines juntament amb un menú de navegació per crear un lloc web de diverses pàgines. Aquesta és una manera comú en el qual es crea un lloc web - la mateixa estructura de la pàgina s'utilitza en cada pàgina, incloent el mateix menú de navegació, de manera que quan es fa clic als enllaços dóna la impressió que et quedes en el mateix lloc, però un contingut diferent és actualitzat.

Hauríeu de fer còpies locals de les quatre pàgines següents, en el mateix directori que els altres (veure el directori de naviegació del menú d'inici si voleu un llistat complet):

Hauríeu de:

  1. Afegir una llista no ordenada en el lloc indicat en una sola pàgina, que contingui els noms de les pàgines a enllaçar. Un menú de navegació és justament una llista d'enllaços, de manera que aquest é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ó a través de cada pàgina.
  4. A cada pàgina, eliminar només l'enllaç a la mateixa pàgina - és confús i sense sentit per a una pàgina incloure un enllaç a si mateixa, i la falta d'un enllaç actua com un bon recordatori visual de la pàgina en la qual es trobeu actualment.

L'exemple acabat hauria de veure's alguna cosa com això:

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

Nota: Si us quedeu encallats, o no sabeu si ho heu fet bé, ho podeu comprovar en el directori del menú de navegació marcat per veure la resposta correcta.

Enllaços de correu electrònic

És possible crear enllaços o botons que, en ser premuts, obren un nou missatge de correu electrònic de sortida en lloc d'enllaçar a un recurs o pàgina. Això es fa usant l'element <a> i el mailto: esquema d'URL.

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

<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

Això dóna lloc a un enllaç que té aquest aspecte: Send email to nowhere.

De fet, fins i tot l'adreça de correu electrònic és opcional. Si ho dexeu fora (és a dir, href és simplement "mailto:"), una nova finestra de correu electrònic sortint serà oberta pel client de correu de l'usuari que no té cap adreça de destinació especificada encara. Això és sovint útil com "compartir" enllaços que els usuaris poden fer clic per enviar un correu electrònic a una adreça de la seva elecció.

Especificar detalls

A més de l'adreça de correu electrònic, pot proporcionar una altra informació. De fet, qualsevol camp d'encapçalat de correu estàndard pot ser afegit a l'adreça URL mailto que proporcioneu. El més utilitzat d'aquests són "subjecte", "cc" 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'especifica com un terme de 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 ser codificats amb URL (és a dir, amb caràcters no imprimibles i espais percent-escaped). També tingueu en compte l'ús del signe (&) per separar cada camp en la URL mailto:. Aquesta és la notació de consulta d'URL estàndard.

Aquí hi ha algunes altres mostres d'URLs de mailto:

Sumari

Això és tot sobre enllaços, per ara de totes maneres! Tornarem  als enllaços més endavant, en el curs, quan comencen a mirar el estil. El següent pas per a HTML, tornarem a la semàntica de text i veuren algunes de les característiques més avançades/inusuals que podreu trobar útils - El format de text avançat és la vostre pròxima parada.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,