Omet navegació

9. Enllaços i àncores

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

Rutes absolutes (enllaços a recursos externs, fora del nostre servidor)

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.

Codi HTML
<a href="https://ebapenlinia.caib.es/" target="_blank">Anar a la plataforma EBAP en Línia</a>
Visualitzat en el navegador

Anar a la plataforma EBAP en Línia

Rutes relatives (enllaços a recursos interns, dins la mateixa carpeta en el servidor)

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.

Codi HTML
<a href="Tema_1.html">Tema 1</a>
Visualitzat en el navegador

Tema 1

Àncores (enllaços a parts del text de la mateixa pàgina web)

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.

Codi HTML
<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>
Visualitzat en el navegador

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.

Àncores (enllaços a parts del text d'una altra pàgina web, dins la mateixa carpeta en el servidor)

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.

Codi HTML
<p>M'he comprat uns <a href="definicions.html#ancora_1">altaveus</a> molt potents.</p>
Enllaços per descarregar arxius

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

Codi HTML
<a href="fotos.rar">Descarrega totes les fotos</a>
Visualitzat en el navegador

Descarrega totes les fotos

Enllaços a adreces de correu electrònic

Podem fer servir els enllaços per obrir els gestors de correu electrònic, amb les nostres dades com a destinataris, i que els usuaris ens enviïn un correu electrònic. 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.

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.

Codi HTML
<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</a>
Visualitzat en el navegador

Enviar correu electrònic

Visualitzat en el gestor de correu electrònic
Per: adreça_1@domini.com
cc: copia_1@domini.com;copia_2@domini.com
cco: copia_oculta@domini.com
Assumpte: Assumpte amb espais
Aquest text sortirà al cos del missatge