9. Enllaços i àncores

En HTML podem crear enllaços a altres recursos (pàgines web, fitxers, correus electrònics...).

Una ruta absoluta és la que conté la ruta completa al recurs que volem que s'obri o descarregui. Per referir-se a aquestes rutes, també es fan servir les sigles URL. Veureu que sempre comencen per http:// (pàgines no segures) i https:// (pàgines segures). Ens hem de fixar que si s'hi inclou el paràmetre target="_blank", la pàgina o recurs s'obrirà en una pestanya o finestra nova del navegador, per tant convé que ho indiqueu, per raons d'accessibilitat.

<a href="https://ebapenlinia.caib.es/" target="_blank">Anar a la plataforma EBAP en Línia (l'enllaç s'obrirà en una nova finestra)</a>

Anar a la plataforma EBAP en Línia (l'enllaç s'obrirà en una nova finestra)

Una ruta relativa és la que conté només el nom del fitxer que volem que s'obri o descarregui. Per fer servir aquesta opció, s'ha de tenir en compte que el fitxer ha d'estar emmagatzemat a la mateixa carpeta que el fitxer des del qual es fa la crida. Imaginau que editam la pàgina web index.html i, amb el codi de l'exemple, volem cridar la pàgina Tema_1.html. Els fitxers index.html i Tema_1.html hauran d'estar a la mateixa carpeta del servidor.

<a href="Tema_1.html">Tema 1</a>

Tema 1

Per fer referència a una altra part del text, dins el mateix fitxer, el primer que hem de fer és crear el punt de destí on volen anar quan cliquem en l'enllaç. Dins el codi afegirem l'etiqueta <a></a> amb els paràmetres corresponents, en aquest cas, id="ancora_1" (serà el nom amb el qual identificarem aquesta ancora) i title="Definició de la paraula altaveu" (títol que es veurà en els robots de cerca, tipus Google, quan es faci una cerca i la nostra àncora estigui en els seus registres). Ens hem de fixar que no hi ha cap text entre les etiquetes d'obertura <a> i de tancament </a> de l'àncora i, a més, estan situades al principi del paràgraf, abans del text.

Després, per crear l'enllaç que ens durà a l'ancora, farem servir també l'etiqueta <a></a> amb un paràmetre diferent: href="#ancora_1". En clicar en l'enllaç, ens situarà el paràgraf de la definició altaveus a dalt de tot de la finestra del navegador.

IMPORTANT: els noms que posem a la id, en aquest cas ancora_1, no es poden repetir dins el mateix fitxer.

<p><a id="ancora_1" title="Definició de la paraula altaveu"></a>altaveu [de alt i veu] [al_ta_veu] m ELECTROAC Transductor electroacústic per mitjà del qual hom obté ones acústiques a partir d'ones elèctriques, projectat per a radiar potència acústica en l'aire. Altaveu d'alta fidelitat. Altaveu electrodinàmic.</p>

<p>M'he comprat uns <a href="#ancora_1">altaveus</a> molt potents.</p>

altaveu [de alt i veu] [al_ta_veu] Transductor electroacústic per mitjà del qual hom obté ones acústiques a partir d'ones elèctriques, projectat per a radiar potència acústica en l'aire. Altaveu d'alta fidelitat. Altaveu electrodinàmic.

M'he comprat uns altaveus molt potents.

Podem fer referència a àncores emmagatzemades a altres fitxers. Per fer-ho, només hi hem d'afegir el nom del fitxer amb la ruta relativa o absoluta, segons el que pertoqui. En el navegador es veu exactament igual que l'exemple anterior.

<p>M'he comprat uns <a href="definicions.html#ancora_1">altaveus</a> molt potents.</p>

Són enllaços exactament iguals que els que fan referència a altres pàgines HTML, però el navegador reconeixerà que no són pàgines web i identificarà quin tipus de fitxer són. En alguns casos els obrirà directament (.pdf, .jpg, .png, etc.); en altres els descarregarà (.zip, .rar, .doc, .odt, etc.). Convé que, per raons d'accessibilitat, indiqueu, amb el paràmetre title, el contingut, el format del fitxer i el seu tamany.

<a href="fotos.rar" title="Fotos comprimides [format RAR - 23845 KB]">Descarrega totes les fotos</a>

Descarrega totes les fotos

Podem fer servir els enllaços per obrir els gestors predeterminats de correu electrònic de les persones usuàries, amb les nostres dades com a desti, i que ens puguin enviar un missatge. Es poden fixar una sèrie de paràmetres per crear un assumpte i un cos predefinits, si escau. L'únic paràmetre obligatori és href="mailto:adreça_1@domini.com", on posarem l'adreça de correu on volem que s'enviï el correu, mitjançant l'aplicatiu de correu electrònic de la persona que hi faci clic.

Si els necessitam, podem afegir més paràmetres després del paràmetre obligatori href="mailto:adreça_1@domini.com" i abans de tancar les cometes. Hi podem afegir:

• ?cc=copia_1@domini.com;copia_2@domini.com (amb aquest paràmetre n'enviarem una còpia als dos correu electrònics que hi hem inclòs. Sempre que posem més d'un correu els hem de separar amb punt i coma)
• &bcc=copia_oculta@domini.com (amb aquest paràmetre enviarem una còpia oculta al correu electrònic que hi hem inclòs)
• &subject=Assumpte%20amb%20espais (amb aquest paràmetre escriurem l'assumpte que volem que tengui el missatge quan s'obri en el gestor de correu)
• &body=Aquest%20text%20sortirà%20al%20cos%20del%20missatge (amb aquest paràmetre escriurem el contingut del missatge que volem que surti per defecte quan s'obri en el gestor de correu)

IMPORTANT: per compatibilitat amb els gestors de correu electrònic, no us oblideu de substituir per %20 tots els espais en blanc que hi hagi en l'assumpte i en el text del cos que hi voleu incloure.

<a href="mailto:adreça_1@domini.com?cc=copia_1@domini.com;copia_2@domini.com&bcc=copia_oculta@domini.com&subject=Assumpte%20amb%20espais&body=Aquest%20text%20sortirà%20al%20cos%20del%20missatge">Enviar correu electrònic (l'enllaç obrirà la vostra aplicació de correu electrònic)</a>

Enviar correu electrònic (l'enllaç obrirà la vostra aplicació de correu electrònic)