|
Home / Docencia / Introducción a HTML | |
Fases de Diseño de un sitio Web: III. Fase Producción |
|
|
Los hiperenlaces o links son una parte del documento sobre la que podemos pulsar con el ratón para viajar a otro elemento que a su vez puede ser otro documento HTML, una imagen, un archivo dentro o fuera del servidor en el que nos encontremos, etc. Vamos a tratar 3 tipos fundamentales de enlaces:
Normalmente los enlaces aparecen de distinto color cuando han sido pulsados. Esto permite dar una orientación al usuario indicando qué sitios ha visitado y cuales no. El navegador normalmente tiene unos colores predefinidos para los 2 estados del hiperenlace, por ejemplo: pulsado (color azul) sin pulsar (color violeta) pero estos colores pueden modificarse por el usuario (en las preferencias de su navegador) y por el editor de páginas HTML (mediante el uso de hojas de estilo). |
|
Los hiperenlaces externos nos permiten movernos de un documento a otro pulsando sobre una porción del texto. Para crear un hiperenlace a un documento externo debemos indicar al menos dos cosas:
El texto que se encuentra entre las etiquetas <a>...</a>
es lo que llamamos ancla y es la parte de nuestro documento que aparece
marcada en azul sobre la que podemos pulsar para cambiar de página. La
dirección que aparece como valor del atributo href es
lo que llamamos referencia y es la dirección a la que viajaremos
cuando pulsemos sobre el ancla tal y como se muestra en la siguiente figura:
EjercicioTarea:Practica los enlaces de hipertexto con el editor interactivo. Procedimiento:
|
Solución:
Debería verse:
Observaciones:
|
|
Vamos a retocar las páginas DireccionesDeInteres.html y Aficiones.html para añadir los enlaces a las páginas externas relacionadas de modo que cuando el visitante pulse sobre el enlace el navegador muestre la página referenciada. Para hacerlo rodearemos las palabras que queremos que aparezcan en azul con las etiquetas <a href="URL_DESTINO">...</a> Donde URL_DESTINO el la página con la que queremos enlazar. En la siguiente figura se muestra un fragmento de la página resultante.
Observa que todas las palabras para las que hemos creado un enlace aparecen
ahora en azul.
Aplicación prácticaTareaAñade enlaces a páginas externas desde tus propias páginas utilizando la etiqueta <a href="URL_DESTINO">...</a>. Procedimiento
|
Solución:
Observaciones
|
|
Una vez que se han insertado hiperenlaces en un documento HTML, se mostratá con mayor detalle la forma en que se pueden usar estas direcciones. Una dirección de la forma "http://www.elpais.es/" se le llama URL absoluta. Se denomina así porque independientemente de la ubicación de la página en la que hemos insertado el enlace, siempre se llega a la misma página destino al pulsar sobre él. Se puede decir que ese enlace es absoluto porque contiene la parte "http://" del URL. Existe otro tipo de URL que se conoce como URL relativo, al usar este tipo de enlaces se determina la página a la que se quiere llegar utilizando como base el directorio en el que se encuentra la página que contiene el código <A HREF=...>. Los URL relativos son muy útiles si se quiere llevar un conjunto de páginas (ejemplo: un sitio web completo) de un lugar a otro. Por ejemplo, si se han diseñado las páginas usando enlaces relativos (excepto para los enlaces a las páginas de otras personas), será posible colocar todo el conjunto de páginas en un nuevo servidor con sus enlaces funcionando correctamente. Esto no sería posible si se utilizan sólamente enlaces absolutos, al pulsar sobre un enlace el navegador buscaría la página en el lugar en el que se encontraba antes y no en el servidor actual. EjercicioTareaPracticar los enlaces relativos utilizando un editor de texto plano (por ejemplo el wordpad). Procedimiento:
|
Solución:
Debería verse:
Observaciones:
|
|
Vamos a retocar todas las páginas para añadir los elementos de navegación global que nos permitan enlazarlas entre sí. Comenzaremos por la página principal index.html en la que ya habíamos preparado una primera versión (sin enlaces) de la barra de navegación.
Para añadir enlaces a páginas que se encuentren en el mismo sitio web que
la nuestra necesitamos conocer la posición relativa de las páginas que
queremos enlazar con respecto a la página actual que estamos editando.
Para ello recordemos la estructura de directorios del sitio web de
Telémaco:
Como todas las páginas que queremos enlazar (Aficiones.html, Fotos.html y DireccionesDeInteres.html ) se encuentran en el mismo directorio que la página actual (index.html) para enlazarlas basta rodear cada una de las palabras que pusimos como opción de menú con las etiquetas (<a>...</a>) poniendo como referencia el nombre de la página html con la que queremos enlazar (<a href="fichero.html">...</a> ). Una vez que tenemos la barra de navegación completa (con los enlaces incluidos) vamos a replicarla al final de cada una de las páginas. Para cada página retocaremos la barra de navegación de modo que la opción de menú que corresponde a la página en la que nos encontremos aparezca en negrita y el resto de las opciones aparezcan como hiperenlaces. En la figura se muestra como aparecería la barra de navegación al final de la página principal. Como puedes ver la página principal aparece en negrita y el resto aparecen como hiperenlaces. Puedes pulsar sobre ellos para ver como se muestra la barra de navegación en las demás páginas.
Aplicación prácticaTareaAñade a tus páginas los mecanismos de navegación global que permiten enlazarlas entre sí utilizando la etiqueta <a href="URL_DESTINO">...</a>.donde URL_DESTINO será un enlace relativo. Procedimiento
|
Solución:
Observaciones
|
|
Además de crear enlaces para ir de una página HTML a otra, también es posible crear enlaces para ir de un lugar a otro del mismo documento, de modo similar a como el índice de este documento te lleva directamente a cada una de las secciones sin necesidad de utilizar la barra de desplazamiento del navegador, o de la misma forma que al final de cada sección hay un enlace que te permite volver al principio del documento. A estos enlaces se les llama enlaces internos. Para usar un enlace interno a una zona concreta de un documento necesitamos dos cosas:
EjercicioTareaPracticar los enlaces internos utilizando un editor de texto plano (por ejemplo wordpad). Procedimiento:
|
Solución:
Debería verse:
Observaciones:
|
|
Vamos a retocar las páginas más largas ( DireccionesDeInteres.html y Aficiones.html) para añadir los elementos de navegación local que nos permitan movernos más facilmente entre las distintas zonas de una misma página. Vamos a crear dos mecanismos de navegación local:
Para hacerlo necesitamos marcar dos puntos del documento:
Aplicación prácticaTareaAñade a tus páginas los mecanismos de navegación local que permitan enlazar distintas zonas de una misma página mediante la etiqueta <a>...</a>y sus atributos href y name. Procedimiento
|
Solución:
Observaciones
|
|
También se pueden utilizar los enlaces para el envío de un correo electrónico. En ese caso la URL_DESTINOen lugar de contener una dirección web de la forma: "http://www.it.uc3m.es"donde httpindica el protocolo de transferencia de hipertexto (del inglés HyperText Transfer Protocol) contiene una expresión de la forma "mailto:DIR_DE_CORREO"donde el protocolo a utilizar sería SMTPpara el envío de correo electrónico. La expresión completa sería de la forma: <a href="mailto:telemaco@midireccion.com"> texto sobre el que se pulsa </a> En este caso al pulsar sobre el texto en lugar de abrirse una nueva página web se abriría nuestro editor de correo para que escribiesemos un correo con el campo dirección relleno con la dirección que hayamos indicado en el atributo href.
Existen otros protocolos que se pueden utilizar dentro de una URL como
por ejemplo (FTP para la transferencia de ficheros, GOPHER para acceso de
directorios de información clasificados por temas, TELNET para control
remoto de otros ordenadores, NNTP para el acceso a grupos de noticias en
internet, etc.)
EjercicioTarea:Practica los enlaces de hipertexto para el envío de correo con el editor interactivo. Procedimiento:
|
Solución:
Debería verse:
Observaciones:
|
|
Vamos a retocar la página principal del web de Telémaco (index.html)
para añadir una tabla con información de contacto. La tabla tendrá
una única fila con dos celdas. La primera celda la reservaremos para
poner una foto y en la segunda guardaremos la información de contacto.
Como parte de la información de contacto incluiremos un enlace sobre
el que se pueda pulsar para enviarle un correo electrónico: También editaremos todas las páginas para añadir al final
una referencia sobre el creador del sitio web y su dirección de correo
como una forma de obtener realimentación de los visitantes de nuestra
páginas. A continuación tienes una imagen de la página
resultante.
Aplicación prácticaTareaAñade al final de cada una de tus páginas información sobre el autor y una dirección de contacto sobre la que se pueda pulsar para enviar un correo electrónico. Procedimiento
|
Solución:
Observaciones
|
|