Els enllaços (ancoratges o anchors), s'utilitzen per establir inteconnexions entre dos recursos web. Habitualment aquests enllaços relacionen pàgines web, però també poden enllaçar amb altres tipus de recursos com imatges, arxius, documents o programes.
Els enllaços poden ser interns o externs en funció de si porten cap a un altra part del mateix document web o cap a un recurs web extern.
Els enllaços també es poden classificar en enllaços relatius i enllaços absoluts. Aquí la diferència es troba en que els enllaços relatius, que són sempre interns, especifiquen la ruta a seguir des del lloc en que es troba l'enllaç fins al lloc o ha d'arribar el navegador, sense necessitat de possar tota l'adreça; mentre que els enllaços absoluts, habitualment externs, indiquen l'adreça sencera on apunta l'enllaç.
L'etiqueta que defineix un enllaç és <a>...</a>, i va sempre acompanyada d'un atribut molt especial: href (acrònim de Hipertext Reference, és a dir, referència de l'hipertext). El valor d'aquest atribut indica l'objectiu de l'enllaç, és a dir, el lloc on el navegador a d'anar quan l'usuari clica sobre l'enllaç.
Veieu un exemple senzill d'enllaç, que apunta cap a pàgina de la XTEC:
<a href="http://www.xtec.cat"> XTEC </a>
En aquest enllaç es poden diferenciar tres parts:
</a> que identifica l'enllaç. Aquesta etiqueta conté l'atribut href al que s'ha donat el valor http://www.xtec.cat, és a dir, l'adreça on ha d'anar el navegador si l'enllaç és activat per l'usuari, en aquest cas, l'adreça de la XTEC.XTEC, situat entre les etiquetes d'obertura i tancament de l'enllaç. Per defecte, els navegadors representen aquest contingut, si és text, de color blau i subratllat del mateix color. Més endavant veureu com modificar aquest aspecte utilitzant els fulls d'estil.
</a>.Al llarg d'aquesta pràctica i la següent, es veuran diferents maneres de declarar enllaços a un document web de manera correcta.
És habitual trobar documents de text amb llargades considerables que obliguen a crear un llistat d'enllaços cap a les diferents seccions dels documents. D'aquesta manera es facilita la navegació a l'usuari. El document m4p3.html és un exemple.
Establir una llista d'enllaços interns al document requereix identificar prèviament quins són els elements susceptibles de ser enllaçats. A l'exemple practica_4.html les diferents seccions <h2> del text seran les parts a identificar i, per tant, accessibles ràpidament des dels enllaços.
El primer pas serà afegir un identificador (atribut id) a cada una de les seccions i subseccions:
De
<h2>Maecenas a mauris</h2>
a
<h2 id="maecenas_a_mauris">Maecenas a mauris</h2>
És important, per assegurar-se que no hi haurà cap problema en la identificació de l'element, evitar espais i majúscules als identificadors. Fixeu-vos que a l'exemple l'identificador és el mateix que el contingut de la capçalera, però amb totes les lletres minúscules i amb guions baixos on hi havia espais.
Seguidament es crearà la llista d'enllaços que apuntaran a cada secció:
<ol> <li><a href="#maecenas_a_mauris">Maecenas a mauris</a></li> <li><a href="#sed_eu_nulla">Sed eu nulla</a></li> <li><a href="#vestibulum_nulla_tortor">Vestibulum nulla tortor</a></li> </ol>
Identificar elements utilitzant l'atribut id proporciona dos avantatges. En primer lloc, permet identificar qualsevol element del document web al que es vol apuntar mitjançant un enllaç intern o extern. És a dir, si les parts principals del document estan identificades utilitzant l'atribut id, altres documents externs poden apuntar de manera específica a aquests apartats, fent més precisa la consulta externa.
Un altre avantatge radica en el seu ús previ per a la determinació particular d'estils.
Alguns navegadors antics, com el Netscape 4.1, no reconeixen l'atribut id como punt d'ancoratge. Aquesta carència es pot solventar utilitzant l'atribut "name". Veieu un exemple:
<h2 id="maecenas_a_mauris" name="maecenas_a_mauris" >Maecenas a mauris</h2>
Afegint aquest atribut, s'assegura la compatibilitat amb els navegadors antics, però a costa d'afegir un fragment més de codi i, d'altra banda, el W3C declara que, l'atribut name serà eliminat de futures versions del XHTML.
La situació més habitual en el desenvolupament d'una pàgina web és que un document enllaci amb d'altres documents web, imatges o d'altres tipus d'arxius, del mateix projecte. aquest tipus de localització d'arxius interns es coneix com localització relativa al document actual, ja que la sintaxi de l'enllaç quedarà determinada per la ubicació del docuemnt des del qual parteix l'enllaç. Veieu l'exemple:
html/ | |__ index.html |__ noticies.html |__ estudis.html |__ imatges/ | | | |__ escola.png | |__ alumnes.png | |__ personal/ | |__ index.html |__ viatge.html |__ fotos/ | |__ familia.png
Suposeu que us trobeu a la pàgina index.html situada a l'arrel del directori html/ i voleu fer un enllaç cap a la pàgina noticies.html, que es troba al mateix directori. L'enllaç quedaria de la següent manera:
<a href="noticies.html">Notícies</a>
Seguint amb el mateix exemple, imagineu que ara voleu enllaçar amb la imatge escola.png, que es troba dins del subdirectori imatges. L'enllaç correcte seria el següent:
<a href="imatges/escola.png">Veure la imatge de l'escola</a>
Ara poseu per cas que us trobeu a l'arxiu index.html que es troba al subdirectori personal, i voleu posar un enllaç cap a l'arxiu "estudis.html", que es troba a l'arrel, és a dir, a un nivell superior. el que caldrà fer és indicar a la ruta de l'enllaç que retocedeixi un nivell dins de l'estructura de directoris (../). Veieu com quedaria l'enllaç:
<a href="../estudis.html"> Anar a estudis </a>
Crear un enllaç absolut a un arxiu extern és senzill, sempre que es respectin tots els protocols de les URL absolutes: un identificador de protocol (http, ftp, ssh,...), el nom del servidor on es troba l'arxiu (xtec, phobos.xtec, edu365,...) i la ruta específica que localitza l'arxiu (/~nomusuari/practiques/index.html).
Veieu un exemple:
<a href="http://phobos.xtec.cat/moodle/index.html">Aneu a gaudir de Moodle</a>