HTML/Ligazóns

HTML
← Volver a Imaxes	Ligazóns	Seguir con Liñas horizontais →

As ligazóns son a base da navegación pola rede. Úsanse para todo, dende moverse por varias partes distintas dunha mesma páxina, ata descargar programas e ir a páxinas web en servidores alleos ao propio. A pesar da súa simplicidade, as ligazóns foron a clave do éxito da web. Comecemos cun exemplo de ligazón en HTML:

Para máis información, vésaxe a <a href="http://gl.wikipedia.org/wiki/Portada">Wikipedia</a>.

Absolutas e relativas

Antes de poñermos a crear unha hiperligazón, temos que falar da diferencia que hai entre os URLs absolutos e os relativos. En primeiro lugar, as ligazóns absolutas poden utilizarse para mandar o navegador a calquera lugar. Por exemplo, un URL absoluto podería ser:

http://www.jujel.es

Así e todo, cando se necesita crear ligazóns a unha morea de obxectos na mesma árbore de directorios que a páxina web, é moi custoso e molesto ter que escribir o URL completo de cada obxecto ao que queremos ligar. Aquí é onde entran a xogar os URLs relativos. Estes apuntan cara un directorio relativo a aquel no que a páxina web se atopa actualmente. Por exemplo,

./inicio.html

é un URL relativo que apunta cara a un ficheiro HTML chamado inicio.html que se atopa no mesmo directorio (cartafol) que a páxina web actual que contén a ligazón. Así mesmo,

./imaxes/logo_da_cabeceira.png

é outra ligazón relativa que apunta cara a un subdirectorio chamado imaxes que contén un ficheiro chamado logo_da_cabeceira.png.

Ligar a unha parte específica dun documento

Ás veces non basta con ligar a unha páxina. Ao mellor o que queremos é especificar un lugar dentro dun documento. É coma se, nun libro, en vez de falar da "páxina 32", falamos de "páxina 32, cuarto parágrafo". A etiqueta <a> tamén nos permite facer isto.

Imaxinemos que queremos ligar dende o documento a.html a un lugar específico do documento b.html. O primeiro será marcar e nomear a localización de b.html que nos interesa. Para iso, engadimos a etiqueta <a name="algun_nome"> (onde algun_nome é unha cadea detexto calquera, a que queiramos) ao lugar que nos interesa dentro do documento b.html. Agora podemos facer referencia a esa localización con <a href="b.html#algun_nome">[texto ou imaxe a ligar]</a> dende o documento a.html.

Se o que queremos é ligar a unha parte de a.html dende o propio a.html, unha vez marcada a parte á que queremos dirixir a ligazón, construímos a ligazón deste xeito: <a href="#algun_nome">[texto ou imaxe a ligar]</a>

Sintaxe

Agora xa estamos preparados para crear unha hiperligazón. Velaquí a sintaxe básica:

<a href="Localización do URL" target="obxectivo">Texto que liga ao URL escollido</a>;

Nesta sintaxe, "Localización do URL" é o camiño cara o obxecto ao que ligamos, e pode ser tanto relativo como absoluto. "obxectivo" é un atributo opcional que especifica a forma en que se abrirá/amosará o contido da ligazón. Por exemplo:

<a href="http://www.jujel.es" target=0>Motor do Google optimizado para buscas galegas</a>

Este exemplo utiliza un URL absoluto para http://www.jujel.es, e especifica un obxectivo (target en inglés) 0 (o que fará que o URL se abra nunha nova fiestra do navegador. Se se usan marcos, o nome do marco podería especificarse coma obxectivo do URL para que a abra. Isto resulta útil cando temos un marco que contén unha barra de navegación con ligazóns importantes, e logo outra que se usa para amosar as páxinas ou obxectos ligados.

Targets especiais

_blank: Cárgase unha nova fiestra baleira para cargar nela o documento ligado. A localización na barra de direccións (se aparece na nova fiestra) fornece a localización da hiperligazón do novo recurso solicitado ao premer o usuario na ligazón.
_self: O marco actual que contén o documento e a ligazón na que premer úsase para cargar o documento ao que se liga; se a ligazón é parte dun documento que ocupa unha fiestra completa, daquela o novo documento cargarase en toda a fiestra, mentres que no caso dun marco, o documento ligado cárgase dentro do marco correspondente. Non se amosa a localización na barra de direccións a menos que o documento se cargase na fiestra principal.
_parent: O documento ligado cárgase no marco principal do documento que contén a ligazón na que se premeu. Isto só ten importancia no caso de grupos de marcos aniñados. Se a fiestra F contén o grupo de marcos M, que consiste nun submarco A e outro submarco B que é en si mesmo un grupo de marcos MM con subsubmarcos C e D (caso en que teriamos unha fiestra X con tres panéis visibles, A, C e D); daquela premer nunhahiperligazón na páxina no marco D cun target="_top" cargará o documento ligado no marco superior de D, é dicir, no marco B, de xeito que substituiría o grupo de marcos MM que anteriormente foran definidos coma o contido de B. Os documentos C e D que eran os marcos deste grupo de marcos MM en B substituiranse por completo, o que deixará únicamente ao marco A e mailo novo documento ao que ligamos e que quedará no marco B, todo isto dentro do grupo de marcos M na fiestra F. A localización só de amosaría na barra de direccións da fiestra se o marco superior fose a propia fiestra.
_top: O documento ligado cárgase na fiestra, substituíndo todos os ficheiros amosados na fiestra estivesen no marco que estivesen. A dirección da ligazón amósase na barra de direccións.

Ligazóns en imaxes

Exemplo:

<a href="http://gl.wikipedia.org/wiki/HTML">
<img src="http://commons.wikimedia.org/wiki/File:Html-source-code2.png"></a>

Exemplo de renderizado:

Como podes comprobar, ligar imaxes e ligar textos faise do mesmo xeito. En vez de poñer texto entre as etiquetas <a> e </a>, pós unha imaxe.

Ligazóns a un correo electrónico

Podemos crear unha ligazón que automáticamente abra un editor de correo apuntando cara unha dirección de correo determinada. Para facelo, no atributo href da etiqueta inicial <a>, introducimos como valor mailto: seguido do enderezo de correo electrónico. Vésaxe un exemplo:

O código:

<a href="mailto:esperoqueninguentenhaesteenderezo@wikibooks.gl">esperoqueninguentenhaesteenderezo@wikibooks.gl</a>

Podería renderizarse coma:

esperoqueninguentenhaesteenderezo@wikibooks.gl

Aínda que o da icona dun sobre é cousa da Wikibooks. Xeralmente só aparecera o texto entre as etiquetas <a> e </a>, marcado coma unha ligazón calquera. Por suposto, non é preciso que o texto entre as dúas etiquetas sexa o propio enderezo. Pode ser un texto calquera. Pero por se por algún motivo o usuario non pode utilizar o enlace, será útil que poda ver o enderezo e así copialo nalgures para mandar pola súa conta un correo electrónico.

Estas ligazóns, que só funcionarán se o usuario ten configurado un programa de xestión de correo no seu sistema, non se teñen por que limitar a abrir un editor dunha mensaxe co destinatario xa incluído. Tamén pode encher de xeito predefinido campos coma o asunto ou os destinatarios aos que se lles enviará unha copia. Velaquí un exemplo:

O código:

<a href="mailto:esperoqueninguentenhaesteenderezo@wikibooks.gl?subject=Asunto&cc=esteenderezorecibira@unha.copia">Texto</a>

Podería renderizarse coma:

Texto

Por suposto, habería que substituír Asunto polo asunto da mensaxe e esteenderezorecibira@unha.copia por un enderezo real de quen debería recibir unha copia da mensaxe. E se en vez de &cc=esteenderezorecibira@unha.copia escribimos &bcc=esteenderezorecibira@unha.copia, esteenderezorecibira@unha.copia recibirá unha copia sen que o resto de destinatarios saiba que a recibiu.

Introdución aos URIs

Nótese que a meirande parte dos lectores estarán familiarizados co termo «URL» e non co «URI». Os URLs son un subtipo do sistema de nomeado URI.

Cada un dos recursos á nosa disposición na rede ─documentos HTML, imaxes, vídeos, programas, etc.─ ten un enderezo que se pode codificar mediante un identificador universal de recurso, “URI” polas súas siglas en inglés (Universal Resource Identifier).

Xeralmente os URIs están formados de tres partes:

o código do mecanismo utilizado para o acceso ao recurso,
o nome do computador en que se atopa o recurso, e
o nome do propio recurso, en forma de ruta.

Pensemos, por exemplo, no URI en que se atopa esta páxina: «http://gl.wikibooks.org/wiki/HTML/Ligazóns». Podemos interpretar este URI como:

un documento dispoñible polo protocolo HTTP («http»),
situado na máquina «gl.wikibooks.org», e
accesible mediante a ruta «/wiki/HTML/Ligazóns».

Son comúns en páxinas HTML ligazóns con outros códigos de mecanismos para o acceso ao recurso, coma «mailto» para o correo electrónico ou «ftp» para o protocolo FTP. Un exemplo de URI para un enderezo de correo de alguén podería ser «mailto:pedro@algures.es».

Identificadores de seccións

Algúns URIs poden facer referencia a un lugar concreto dun recurso. Este tipo de URI remata con «#» seguido dun identificador da sección. Por exemplo, o seguinte URI apunta a esta sección concreta da páxina (Identificadores de seccións): «http://gl.wikibooks.org/wiki/HTML/Ligazóns#Identificadores de seccións»

URIs relativos

Os URIs relativos carecen de información do sistema de nomeado. A súa ruta adoita facer referencia a un recurso aloxado na mesma máquina que o documento en que se atopa dito URI. Os URIs relativos poden conter elementos de rutas relativas ─por exemplo: «..» simboliza un nivel superior na xerarquía da ruta─, así coma identificadores de seccións. Os URIs relativos transfórmanse en URIs completos a partir dun URI base.

Imaxinemos que estamos nun documento en «http://amiñacasa.org/documentos/ligazóns.html». Véxanse a continuación algunhas equivalencias entre URIs absolutas e relativas para este exemplo:

«Lista da compra.pdf» faría referencia a:

«http://amiñacasa.org/documentos/Lista da compra.pdf».

«../imaxes/Vacacións do 2006/Cervexa na praia.png» faría referencia a:

«http://amiñacasa.org/imaxes/Vacacións do 2006/Cervexa na praia.png».

«privado/diario.pdf» faría referencia a:

«http://amiñacasa.org/documentos/privado/diario.pdf».

Funcións dos URIs en HTML

En HTML, os URIs utilízanse para:

ligar a outros documentos ou calquera outro tipo de recurso,
ligar a follas de estilo e guións externos,
incluír imaxes, obxectos e aplicacións nas páxinas,
crear mapas de imaxes,
enviar formularios,
citar referencias externas,
facer referencia a convencións de metadatos que describen un documento,
etc.

HTML
← Volver a Imaxes	Ligazóns	Seguir con Liñas horizontais →