Índice
A HTML oferece moitos dos mecanismos convencionais de publicación para o texto rico e os documentos estruturados, mais o que máis a separa doutras linguaxes son as suas características de hipertexto e documentos interactivos. Esta sección apresenta o vínculo (ou hipervínculo ou vínculo web ou ligazón ), o conceito básico do hipertexto. Un vínculo é unha conexión desde un recurso web a outro. Apesar de ser un conceito simples, o vínculo consitiui unha das forzas primárias que motiváron o éxito da web.
Un vínculo ten dous extremos -- chamados áncoras -- e unha dirección. O vínculo comeza na áncora "de orixe" e aponta para a áncora "destino", que pode ser calquer recurso web (p.ex.: unha imaxe, un arquivo de video, un fragmento de son, un programa, un documento HTML, un elemento dentro dun documento HTML, etc.).
O seguinte fragmento de HTML contén dous vínculos, un cuxa áncora de destino é un elemento HTML chamado " capitulo2.html" e outro cuxa áncora de destino é unha imaxe GIF no ficheiro "bosque.gif":
<BODY>
...texto... <P>Achará moito máis no <A href="capitulo2.html">capítulo dous</A>. Vexa tamén este <A href="../imaxes/bosque.gif">mapa do bosque encantado.</A> </BODY>
Ao activaren estes vínculos (facendo clic co rato, através de entrada no teclado, ordes orais, etc), os usuários poden visitar estes recursos. Advirta-se que o atributo href de cada áncora de orixe especifica o enderezo da áncora de destino cun URI.
A áncora de destino dun vínculo pode ser un elemento dentro dun documento HTML. A áncora de destino ten que levar un nome de áncora e calquer URI que aponte para esta áncora debe incluir o seu nome como identificador de fragmento .
As áncoras de destino nos documentos HTML poden-se especificar ben co elemento A (nomeando-o co atributo name ), ou con calquer outro elemento (nomeando-o co atributo id ).
Asi, por exemplo, un autor poderia crear un índice analítico cuxas entradas estivesen vinculadas cos elementos de título H2 , H3 , etc., do mesmo documento. Usando o elemento A para crear áncoras de destino, escreberiamos:
<H1>Índice</H1>
<P><A href="#seccion1">Introdución</A><BR>
<A href="#seccion2">Información preliminar</A><BR>
<A href="#seccion2.1">Nun ton máis persoal</A><BR>
...resto do índice... ...corpo do documento... <H2><A name="seccion1">Introduction</A></H2> ...sección 1... <H2><A name="seccion2">Información preliminar</A></H2> ...sección 2... <H3><A name="seccion2.1">Nun ton máis persoal</A></H3> ...sección 2.1...
Podemos lograr o mesmo efecto facendo que os elementos título sexan eles mesmos as áncoras:
<H1>Índice</H1>
<P><A href="#seccion1">Introdución</A><BR>
<A href="#seccion2">Información preliminar</A><BR>
<A href="#seccion2.1">Nun ton máis persoal</A><BR>
...resto do índice... ...corpo do documento... <H2 id="seccion1">Introducción</H2> ...sección 1... <H2 id="seccion2">Información preliminar</H2> ...sección 2... <H3 id="seccion2.1">Nun ton máis persoal</H3> ...sección 2.1...
Con moito, o uso máis frecuente dun vínculo é recuperar outro recurso web, como se ilustra nos exemplos anteriores. Porén, os autores poden inserir vínculos nos seus documentos que expresen outras relacións entre os recursos que simplesmente "activar este vínculo para visitar tal recurso relacionado". Os vínculos que expresan outros tipos de relacións teñen un ou máis tipos de vínculos especificados na sua áncora de orixe.
As funcións dun vínculo definidas con A ou LINK especifican-se através dos atributos rel e rev .
Por exemplo, os vínculos definidos co elemento LINK moden descreber a posición dun documento dentro dunha série de documentos. No seguinte fragmento, os vínculos do documento intitulado "Capítulo 5" aponta para os capítulos anterior e seguinte:
<HEAD>
...outra información do cabezallo... <TITLE>Capítulo 5</TITLE> <LINK rel="prev" href="capitulo4.html"> <LINK rel="next" href="capitulo6.html"> </HEAD>
O tipo de vínculo do primeiro vínculo é "prev" ("anterior") e o do segundo é "next" ("seguinte") (dous dos vários tipos de vínculos recoñecidos). Os vínculos especificados con LINK non se mostran co conteúdos do documento, ainda que os axentes de usuário poidan mostrá-los doutras maneiras (p.ex., como ferramentas de navegación).
Mesmo se non se usaren para a navegación, estes vínculos poden-se interpretar de maneiras interesantes. Por exemplo, un axente de usuário que imprima unha série de documentos HTML como un documento único pode usar esta información de vinculación como base para producir un documento linear coerente. Máis abaixo fornece-se máis información sobre como usar os vínculos como axuda para os motores de busca.
Ainda que vários elementos HTML crean vínculos con outros recursos (p.ex., o elemento IMG , o elemento FORM , etc.), este capítulo trata dos vínculos e áncoras creados cos elementos LINK e A . O elemento LINK só pode aparecer no cabezallo do documento. O elemento A só pode aparecer no corpo.
Cando se indica o atributo href do elemento A , o elemento define unha áncora de orixe para un vínculo que o usuário pode activar para recuperar un recurso web. A áncora de orixe é a localización do elemento A e a áncora de destino é o recurso web.
O recurso recuperado pode ser tratado polo axente de usuário de várias maneiras: abrindo un documento HTML na mesma xanela do axente de usuário, abrindo un documento HTML novo nunha xanela diferente, iniciando un programa novo para tratar o recurso, etc. Dado que o elemento A ten un conteúdo (texto, imaxes, etc.) os axentes de usuário poden mostrar este conteúdo de tal maneira que indiquen a presenza dun vínculo (p.ex., subliñando o conteúdo).
Cando se indican os atributos name ou id do elemento A , o elemento define unha áncora que pode ser o destino doutros vínculos.
Os autores poden indicar os atributos name e href simultaneamente no mesmo elemento A .
O elemento LINK define unha relación entre o documento actual e outro recurso. Ainda que LINK non ten conteúdo, as relacións que definen poden-nas mostrar alguns axentes de usuário.
Pode-se indicar o atributo title tanto para A como para LINK para engadir información sobre a natureza dun vínculo. Esta información pode ser lida con voz por un axente de usuário, mostrada como un cartaciño, facer que mude a imaxe do cursor, etc.
Asi, podemos aumentar un exemplo prévio adicionando-lle un título para cada vínculo:
<BODY>
...texto... <P>Achará moito máis no <A href="capitulo2.html" title="Ir ao capítulo dous">capítulo dous</A>. <A href="./capitulo2.html" title="Traer o capitulo dous.">capitulo dous</A>. Vexa tamén esta <A href="../imaxes/bosque.gif" title="imaxe GIF do bosque encantado">mapa do bosque encantado.</A> </BODY>
Dado que os vínculos poden apontar para documentos codificados con diferentes codificacións de caracteres , os elementos A e LINK aceitan o atributo charset . Este atributo permite-lles aos autores avisar aos axentes de usuário sobre a codificación de dados no outro extremo da ligazón.
O atributo hreflang fornece-lles aos axentes de usuário informacións sobre a linguaxe dun recurso no extremo dun vínculo, tal e como o atributo lang fornece informacións sobre a linguaxe do conteúdo dun elemento ou valores de atributo.
Armados con este coñecimento adicional, os axentes de usuário deberian poder evitar mostrar-lle "lixo" ao usuário. Pola contra, poden ora localizar os recursos necesários para a apresentación correcta do documento ora, se non poden localizar os recursos, deberian polo memos avisar-lle ao usuário de que o documento non se poderá ler e explicar a causa.
<!ELEMENT A - - (%inline;)* -(A) -- áncora-->
<!ATTLIST A
%attrs; -- %coreattrs, %i18n, %events --
charset %Charset; #IMPLIED -- codificación de caracteres do recurso vinculado --
type %ContentType; #IMPLIED -- aviso sobre o tipo de conteúdo --
name CDATA #IMPLIED -- extremo de vínculo con nome --
href %URI; #IMPLIED -- URI de recurso vinculado --
hreflang %LanguageCode; #IMPLIED -- código de idioma --
rel %LinkTypes; #IMPLIED -- tipos de vínculo directos --
rev %LinkTypes; #IMPLIED -- tipos de vínculo inversos --
accesskey %Character; #IMPLIED -- carácter da tecla de acesibilidade --
shape %Shape; rect -- para usar con mapas de imaxe do lado do cliente --
coords %Coords; #IMPLIED -- para usar con mapas de imaxe do lado do cliente --
tabindex NUMBER #IMPLIED -- posición na orde de tabulación --
onfocus %Script; #IMPLIED -- o elemento recebeu o foco --
onblur %Script; #IMPLIED -- o elemento perdeu o foco --
>
Etiqueta inicial: requerida, Etiqueta final: requerida
Definicións de atributos
Atributos que se definen noutro lugar
Cada elemento A define unha áncora
Os autores tamén poden crear un elemento A que non especifique áncoras, ou sexa, que non especifique href , name , ou id . Os valores destes atributos poden-se indicar máis tarde através de scripts.
No exemplo que segue, o elemento A define un vínculo. A áncora de orixe é o texto "W3C Web site" e a áncora de destino é "http://www.w3.org/":
Para máis información sobre o W3C, consulte o
<A href="http://www.w3.org/">sítio web do W3C</A>.
Este vínculo designa a páxina do World Wide Web Consortium. Cando un usuário activa este vínculo nun axente de usuário, o axente de usuário recollerá o recurso, neste caso un documento HTML.
Para máis información sobre o W3C,consulte o sítio web do W3C.
~~~~~~~~~~~~
Para indicar-lles aos axentes de usuário explicitamente cal é a codificación de caracteres da páxina de destino, indique o o atributo charset:
Para máis información sobre o W3C, consulte o
<A href="http://www.w3.org/" charset="ISO-8859-1">sítio web do W3C</A>
Supoñamos que definimos unha áncora chamada "ancora-un" no ficheiro "un.html".
...texto antes da áncora... <A name="ancora-un">Esta é a localización da áncora un.</A> ...texto despóis da áncora...
Isto crea unha áncora arredor do texto "Esta é a localización da áncora un.". Normalmente, os conteúdos de A non se mostran dun xeito especial cando A define só unha áncora.
Tendo definida a áncora, podemos vincular a ela desde o mesmo ou desde outro documento. As URI que designan áncoras conteñen un carácter "#" seguido do nome da áncora (o identificador do fragmento ). Velaqui vários exemplos destas URI:
Asi, un vínculo definido no ficheiro "dous.html" no mesmo directório que "un.html", referiria-se à áncora como segue:
...texto antes do vínculo...
Para máis información, consulte <A href="./un.html#ancora-un"> ancora un</A>.
...texto despóis do vínculo...
O elemento A do seguinte exemplo especifica un vínculo (con href ) e crea unha áncora con nome (con name ) simultaneamente:
Acabo de voltar das vacacións! Velaqui unha
<A name="ancora-dous"
href="http://www.unhaempresa.com/Xente/Ian/vacacions/familia.png">
foto da miña família no lago.</A>.
Este exemplo contén un vínculo cun tipo diferente de recurso web (unha imaxe PNG). Activar o vínculo deberia facer que o recurso imaxe se recuperase da Web (e posibelmente se mostrase se o sistema estivese configurado para facé-lo).
Nota. Os axentes de usuário deberian ser capaces de achar áncoras creadas por elementos A vacios, mais alguns fallan nisto. Por exemplo, alguns axentes de usuário poden non achar a "ancora-vacia" no seguinte fragmento de HTML:
<A name="ancora-vacia"></A>
<EM>...código HTML...</EM>
<A href="#ancora-vacia">Vínculo cunha áncora vacia</A>
Un nome de áncora é o nome de ben o atributo name ben o id cando se usan no contexto de áncoras. Os nomes de áncoras deben observar as seguintes regras:
Asi, o exemplo seguinte é correcto a respeito da correspondéncia dos fragmentos e debe ser considerado como correspondéncia polos axentes de usuário:
<P><A href="#xxx">...</A>
...máis documento... <P><A name="xxx">...</A>
EXAMPLO ILEGAL:
O exemplo seguinte é ilegal a respeito da unicidade, xa que os
dous nomes son o mesmo a exceición das maiúsculas e minúsculas:
<P><A name="xxx">...</A>
<P><A name="XXX">...</A>
Ainda que o fragmento seguinte é HTML legal, o comportamento do axente de usuário non está definido; alguns axentes de usuário poden (incorrectamente) considerar esta como unha correspondéncia e outros pode que non.
<P><A href="#xxx">...</A>
...máis documento... <P><A name="XXX">...</A>
Os nomes de áncoras deberian estar restrinxidos aos valores ASCII. Consulte o apéndice para máis información sobre valores non ASCII en valores de atributos URI .
Os vínculos e áncoras definidos polo elemento A non deben estar aniñados; un elemento A non debe conter nengun outro elemento A .
Dado que a DTD define o elemento LINK como vacio, os elementos LINK tampouco poden estar aniñados.
O atributo id pode-se usar para crear unha áncora na etiqueta inicial de calquer elemento (incluído o elemento A ).
Este exemplo ilustra o uso do atributo id para colocar unha áncora nun elemento H2 . A áncora está vinculada através do elemento A.
Pode ler máis sobre isto na <A href="#seccion2">Sección Dous</A>.
...máis abaixo no documento <H2 id="seccion2">Seccion Dous</H2> ...máis abaixo no documento <P>Vexa-se a <A href="#seccion2">Seccion Dous</A> encima
para máis detalles.
O seguinte exemplo nomea unha áncora de destino co atributo id :
Acabo de voltar das vacacións! Velaqui unha
<A id="ancora-dous">foto da miña família no lago.</A>.
Os atributos id e name compartillan o mesmo espazo de nomes. Isto significa que non poden definir unha áncora co mesmo nome no mesmo documento. Permite-se que se usen os dous atributos para especificar un identificador único de elemento para os elementos seguintes: A , APPLET , FORM , FRAME , IFRAME , IMG , e MAP . Cando se usaren os dous atributos no mesmo documento, os seus valores deben ser idénticos:
EXEMPLO
ILEGAL:
O fragmento seguinte é HTML ilegal, dado que estes atributos declaran
o mesmo nome duas veces no mesmo documento.
<A href="#a1">...</A>
...
<H1 id="a1">
...páxinas e páxinas... <A name="a1"></A>
O exemplo seguinte ilustra que id e name deben ser o mesmo cando ambos os dous aparecen na etiqueta de início dun elemento:
<P><A name="a1" id="a1" href="#a1">...</A>
Debido à sua especificación na DTD da HTML, o atributo name pode conter referéncias a caracteres . Asi, o valor Dürst é un valor de atributo de name válido, como tamén o é Dürst . O atributo id , pola sua parte, non pode conter referéncias a caracteres.
Usar id ou name ? Os autores deberian considerar os seguintes factores à hora de decidiren se usar id ou name como nome dunha áncora:
Unha referéncia a un recurso non disponíbel ou non identificábel é un erro. Ainda que os axentes de usuário podan variar en como tratan tal erro, recomendamos o comportamento seguinte:
<!ELEMENT LINK - O EMPTY -- un vínculo independente do meio -->
<!ATTLIST LINK
%attrs; -- %coreattrs, %i18n, %events --
charset %Charset; #IMPLIED -- codificación de caracteres do recurso vinculado --
href %URI; #IMPLIED -- URI de recurso vinculado --
hreflang %LanguageCode; #IMPLIED -- codificación de idioma --
type %ContentType; #IMPLIED -- aviso de tipo de conteúdo --
rel %LinkTypes; #IMPLIED -- tipos de vínculos directos --
rev %LinkTypes; #IMPLIED -- tipos de vínculos inversos --
media %MediaDesc; #IMPLIED -- para mostrar nestes meios --
>
Etiqueta inicial: requerido , Etiqueta final:proibida
Este elemento define un vínculo. Ao contrário que A , só pode aparecer na sección do cabezallo ( HEAD ) dun documento, ainda que pode aparecer calquer número de veces. Ainda que LINK non ten conteúdo, transmite información sobre relacións que os axentes de usuário poden mostrar de várias maneiras (p.ex., unha barra de ferramentas cun menu de vínculos despregábel).
Este exemplo ilustra como poden aparecer várias definicións LINK na sección HEAD dun documento. O documento actual é "Capitulo2.html". O atributo rel especifica a relación do documento vinculado co documento actual. Os valores "Index", "Next", and "Prev" explican-se na sección sobre tipos de vínculos .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Capítulo 2</TITLE>
<LINK rel="Index" href="../index.html">
<LINK rel="Next" href="Capitulo3.html">
<LINK rel="Prev" href="Capitulo1.html">
</HEAD>
...o resto do documento...
Os atributos rel e rev xogan papeis complementares - o atributo rel especifica un vínculo directo e o atributo rev especifica un vínculo inverso.
Considere dous documentos A e B.
Documento A: <LINK href="docB" rel="foo">
Ten exactamente o mesmo significado que:
Documento B: <LINK href="docA" rev="foo">
Poden-se especificar simultaneamente ambos os dous atributos.
Cando un elemento LINK vincula unha folla de estilo externa a un documento, o atributo type especifica a linguaxe da folla de estilo e o atributo media especifica o meio ou meios pretendidos para que se mostre. Os axentes de usuário poden aforrar tempo se recuperan da rede só as follas de estilo relevantes para o dispositivo actual.
Os tipos de meios tratan-se máis a fondo na sección sobre follas de estilo.
Os autores poden usar o elemento LINK para fornecer-lles información vária aos motores de pesquisa, incluído:
Os exemplos que seguen ilustran como se pode combinar a información sobre idioma, tipos de médios e tipos de vínculos para mellorar o tratamento dos documentos por parte dos motores de pesquisa.
No exemplo que segue, usamos o atributo hreflang para lles dicer aos motores de pesquisa onde achar as versións en holandés, portugués e árabe dun documento. Observe-se o uso do atributo charset para o manual en árabe. Observe-se tamén o uso do atributo lang para indicar que o valor do atributo title para o elemento LINK que designa o manual en francés está en francés.
<HEAD>
<TITLE>O manual en inglés</TITLE>
<LINK title="O manual en holandés"
type="text/html"
rel="alternate"
hreflang="nl"
href="http://unsitio.com/manual/holandes.html">
<LINK title="O manual en portugués"
type="text/html"
rel="alternate"
hreflang="pt"
href="http://unsitio.com/manual/portugues.html">
<LINK title="O manual en árabe"
type="text/html"
rel="alternate"
charset="ISO-8859-6"
hreflang="ar"
href="http://unsitio.com/manual/arabe.html">
<LINK lang="fr" title="A documentación en francçais"
type="text/html"
rel="alternate"
hreflang="fr"
href="http://unsitio.com/manual/frances.html">
</HEAD>
No exemplo seguinte, dicemos-lle aos motores de pesquisa onde atopar a versión impresa dun manual.
<HEAD>
<TITLE>Manual de referéncia</TITLE>
<LINK media="print" title="O manual en postscript"
type="application/postscript"
rel="alternate"
href="http://unsitio.com/manual/postscript.ps">
</HEAD>
No exemplo seguinte, dicemos-lle aos motores de pesquisa onde atopar a paxina de início dunha série de documentos.
<HEAD>
<TITLE>Manual de referéncia -- Páxina 5</TITLE>
<LINK rel="Start" title="Primeira páxina do manual"
type="text/html"
href="http://unsitio.com/manual/inicio.html">
</HEAD>
Dá-se máis información nas notas do apéndice sobre como axudar aos motores de pesquisa a indexar o seu sítio web.
<!ELEMENT BASE - O EMPTY -- URI base do documento -->
<!ATTLIST BASE
href %URI; #REQUIRED -- URI que actua como URI base --
>
Etiqueta inicial: requerida , Etiqueta final: proibida
Definicións de atributos
Atributos que se definen noutro lugar
En HTML, os vínculos e as referéncias a imaxes externas, applets, programas que procesen formulários, follas de estilo, etc., van sempre especificadas por un URI. Os URI relativos resolven-se dacordo cun URI base, que pode vir de várias fontes. O elemento BASE permite que os autores especifiquen explicitamente o URI base dun documento.
Cando estiver presente, o elemento BASE debe aparecer na sección HEAD dun documento HTML, antes de calquer elemento que se refira a unha fonte externa. A información sobre a rota que se especifique co elemento BASE só afecta os URI do documento no que aparece o elemento.
Por exemplo, dada as seguintes declaración BASE e declaración A :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Os nosos produtos</TITLE>
<BASE href="http://www.aves.com/produtos/intro.html">
</HEAD>
<BODY>
<P>Veu as nosas <A href="../gaiolas/paxaros.gif">Gaiolas para páxaros</A>?
</BODY>
</HTML>
o URI relativo "../cages/birds.gif" resolveria-se en:
http://www.aves.com/gaiolas/paxaros.gif
Os axentes de usuário deben calcular o URI base para resolver URI relativos dacordo con [RFC1808] , sección 3. O que segue descrebe como se aplica [RFC1808] especificamente a HTML.
Os axentes de usuário deben calcular o URI base dacordo coas seguintes precedéncias (de maior prioridade a menor):
Por outra parte, os elementos OBJECT e APPLET definen atributos que teñen precedéncia sobre o valor indicado polo elemento BASE . Consulte as definicións destes elementos para máis información sobre asuntos de URI específicos deles.