Clase 03 - Hiperenlaces

Hiperenlaces <a>

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.

Por ejemplo, para insertar el enlace:

Visita www.google.com.pe

Habría que escribir:

<a href="http://www.google.com.pe">Visita Google</a>

Destino de Enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores:

 _blank:

Abre el documento vinculado en una ventana nueva del navegador.

 _parent:

Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.

 _self:

Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

 _top:

Abre el documento vinculado en la ventana completa del navegador.

No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos. De momento sólo te interesa retener la opción _blank y _self.

Para insertar el enlace:

Visita www.google.com en una ventana nueva

Habría que escribir:

<a href="http://www.google.com.pe" target ="_blank">Visita www.google.com en una ventana nueva</a>

Es interesante utilizar esta opción cuando la página de destino está fuera de nuestro sitio para que cuando el usuario cierre la ventana del explorador, se encuentre automáticamente en la página desde la que había salido (que vuelva a nuestro sitio).

 Vínculo a ficheros para descarga:

El valor del atributo href normalmente será una página web (con extensión htm, html, asp, php...) pero también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensión pdf. Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador.

El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensión .doc está asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa Excel...) en este caso en el cuadro de diálogo aparece una nueva opción, la de abrir el fichero sin descargarlo en el disco duro del usuario.

Para nombrar el fichero podemos utilizar según el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento.

Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace:

haz clic aquí para descargarte el fichero

De la siguiente forma:

<a href="carta.doc" tarjet=_blank >haz clic aqu&iacute; para descargarte el fichero</a>

En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página.

Clase 02 - Imágenes en HTML

<IMG> inserta imágenes

Para insertar imágenes en un sitio usaremos la etiqueta <img>.

Esta etiqueta debe ir acompañada del atributosrc que es el que contiene el URL de la ubicación del archivo de la imagen.

El atributo alt se utiliza para dar una breve descripción de la imagen, la cual podremos observar en caso que el navegador del usuario, por alguna razón, no muestre la misma.

La etiqueta <img> no tiene cierre.

Sintaxis

<img src="/URL" >

Ejemplo:

<IMG SRC="immagine.gif">

donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.

Para un ejemplo práctico, haz clic aquí

WIDTH y HEIGHT

En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:

<IMG SRC="immagine.gif" WIDTH="178" HEIGHT="180">

donde WIDTH="178" es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT="180" la dimensión vertical (alto).

Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.

BORDER
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:

<IMG SRC="immagine.gif" WIDTH="178" HEIGHT="180" BORDER="2" >

Para un ejemplo práctico, haz clic aquí

HSPACE y VSPACE

Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.

HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.).

VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es

<IMG SRC="immagine.gif" WIDTH="178" HEIGHT="180" BORDER="2" VSPACE="3" HSPACE="3">

Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.

ALIGN

El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:

ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
Para un ejemplo práctico, haz clic aquí.

ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
Para un ejemplo práctico, haz clic aquí.

ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
Para un ejemplo práctico, haz clic aquí.

ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.
Para un ejemplo práctico, haz clic aquí.

ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.
Para un ejemplo práctico, haz clic aquí.