Composición de una página web en código html

Enlaces

Enlaces en el mismo documento
Enlaces a otros documentos
Enlaces sobre imágenes
Otras utilidades

Texto Gráficos Tablas Otros recursos

Es una característica de los documentos en código html que permite acceder a otras partes del documento y a otros documentos, tanto propios como los instalados en otros servidores. Esta facilidad de conexión entre documentos es típica de la navegación en la red.

Los enlaces se indican mediante la etiqueta <a href="URL"></a>
URL (Uniform Resource Locator) o sea la dirección o localizador del documento con el que queramos establer comunicación, que puede ser otro documento (texto, gráfico, etc.) en nuestro directorio u otro recurso en la red.

Los textos en los que se ha insertado un enlace aparecen subrayados y en el color que se haya seleccionado en las preferencias del navegador, igualmente es válido para el color que presentan en el momento que se seleccionan o el de una vez visitados.
Tal es el caso de esta guía, salvo el presente documento y el de otros recursos, en los que los colores son rojo, violeta y verde, respectivamente (más información en Otros Recursos).


Enlaces a otro lugar del documento en pantalla

Se utiliza una URL simplificada: p. ej.: "#1" (el dígito 1 aquí utilizado puede cambiarse por cualquier otro, palabra, etc.)

en código html
 <a href="#1"></a>

la identificación del destino se marca mediante el código
 <a name="1"></a>

para la conexión correcta entre enlace y destino ha de utilizarse la misma expresión, que en el ejemplo es 1
Es el sistema utilizado para enlazar los índices de las páginas de esta guía con sus apartados respectivos.


Enlaces a otros documentos

Como norma general se les identifica por su URL

Ejemplo 1)

Este es un enlace a la portada de la guía

en código html
<a href="http://www.ugr.es/~mlamolda/tutorial/index.html">Este es un enlace a la portada de la gu&iacute;a</a>

o bien, por encontrarse en la misma carpeta se puede abreviar a

<a href="index.html">Este es un enlace a la portada de la gu&iacute;a</a>

Ejemplo 2)

Este es un enlace al apartado 'Jerarquización de textos' de la página 'Composición de textos'

en código html
<a href="texto.html#jerarquia">Este es un enlace al apartado 'Jerarquizaci&oacute;n de textos' de la p&aacute;gina 'Composición de textos'</a>

Su URL está abreviada por encontrarse el documento texto.html en la misma carpeta que el presente documento.

Ejemplo 3)

Este es un enlace a la portada de la Universidad de Granada

en código html
<a href="http://www.ugr.es/">Este es un enlace a la portada de la Universidad de Granada</a>


Enlaces sobre un gráfico

El gráfico se hace visible en la pantalle mediante un enlace específico (ver Gráficos).

Ejemplo 4)

El enlace al apartado 'Jerarquización de textos' de la página 'Composición de textos' se ha dispuesto en la estrella que precede a esta línea de texto
(en la estrella no hay recuadro que indique el enlace al haberle dado un valor cero al reborde: border=0, no obstante al poner el puntero sobre ella señalará la presencia de un enlace)

en código html
<a href="texto.html#jerarquia"><img src="../marcas/estrella.gif" HSPACE=2  border=0 height=8 width=8></a> El enlace al apartado '<font face="new york" color="#0080FF">Jerarquizaci&oacute;n de textos</font>' de la p&aacute;gina 'Composición de textos' se ha dispuesto en la estrella que precede a esta l&iacute;nea de texto

El localizador (URL) de la estrella se ha dispuesto en forma abreviada, ya que se encuentra en el subdirectorio marcas del directorio principal o raiz, por ello en este caso es: ../marcas/estrella.gif
../ indica el  directorio raiz
marcas/  indica el subdirectorio donde se encuentra el gráfico a incluir (dentro de nuestro directorio raiz)
estrella.gif  es el nombre del documento correspondiente.


Otras utilidades

Los enlaces nos permiten tener acceso a otros documentos instalados en el servidor en su formato original, no legibles por los navegadores, o que por su tamaño no conviene que se carguen directamente en pantalla, p. ej.: documentos de texto, .pdf, o imágenes grandes, etc.
Igualmente se pueden dirigir a documentos de ese tipo que estén instalados en otros servidores.
En ambos casos se sigue el mismo procedimiento descrito más arriba para los documentos legibles.

Ejemplo 5)

(en la estrella situada a la izquierda hay un enlace a un documento .htm, situado en otro servidor)

en código html
<a href="http://micropress.org/stratigraphy/cret_news.htm"><img src="../marcas/estrella.gif" HSPACE=2  border=0 height=8 width=8></a>

Ejemplo 6)

(en la estrella situada a la izquierda hay un enlace a una imagen .jpg, situada en otro servidor)

en código html
<a href="http://www.ehu.es/~gpplapam/congresos/csb/CSB.jpg"><img src="../marcas/estrella.gif" HSPACE=2  border=0 height=8 width=8></a>

Texto Gráficos Tablas Otros recursos

©   Marcos A. Lamolda 2003 portada