Curso de HTML Básico

Clase 3

Temas:
Imágenes
Hiperenlaces
¾Insertar Imágenes
¾Tipos de referencias
¾Formato de imágenes
¾Destino del enlace ¾Tamaño de la imagen
¾Formato de los enlaces ¾Atributos de la imagen
¾Puntos de fijación. Anclas ¾Alineación de la imagen

CLASE 3 Curso: HTML Básico – Área de Servicios

 Hiperenlace

• Un hiperenlace, hipervínculo o link (en Inglés), es un

elemento de una página, que al hacer clic sobre él me lleva
a otra página Web, archivo u otro lugar dentro de la página.
• Aquellos elementos (texto, imágenes, etc.) sobre los que se
desee insertar un enlace deben encerrarse entre las
etiquetas <a> y </a>.
• A través del atributo href se especifica la página a la que
está asociado el enlace.
• Por Ejemplo:
<a href= http://www.unsl.edu.ar > Visita www.unsl.edu.ar </a>

CLASE 3 Curso: HTML Básico – Área de Servicios

 Tipos de Referencia
- Un hipervínculo, es un elemento de una página, que al hacer clic sobre él nos
lleva a otra página Web, archivo u otro lugar dentro de la página.
- Para que al hacer clic sobre el hipervínculo efectivamente visualicemos un nuevo
elemento, debemos especificar la dirección de dicho elemento. O lo que es lo
mismo debemos expresar una referencia.
Para especificar la dirección del nuevo elemento podemos utilizar referencias
absolutas o referencias relativas.
Referencia absolutas: Conduce a una ubicación externa al sitio donde estamos
trabajando, por lo tanto debemos expresar la dirección completa donde se ubica el
elemento a visualizar, es decir
http://www.dirinfo.unsl.edu.ar/index.php?pagina=areaserv
9 Damos la ubicación del elemento en Internet.
9 Se comienza la referencia por http:// , el nombre del dominio y el nombre de
la página.
9 Si no se escribe el nombre de la página se cargará la página de inicio
asociada al dominio.
9 Por ejemplo, "http://www.ole.clarin.com/diario/2007/04/15/index.html"
tendrá el mismo efecto que "http://www.ole.clarin.com”

CLASE 3 Curso: HTML Básico – Área de Servicios

Referencia Relativa
- Referencia relativas: todo lo que no se especifique de la dirección del elemento
se tomará de la dirección del documento que contiene el hipervínculo.
Por ejemplo si no indicamos el servidor, se considerará el actual y si sólo indicamos
un archivo html se considerará que se encuentra en el servidor y directorio del
documento que lo referencia.
-Una referencia relativa comenzará siempre por un nombre de directorio o por un
archivo, ya que en este caso se asume que el servidor es el mismo del
documento actual.
- Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un
diseño similar o un objetivo común, estando todos ellos dentro de una misma
carpeta, conocida como carpeta raíz del sitio.
Referencia relativa al sitio: Conduce a un documento situado dentro del mismo
sitio que el documento actual. Es decir que este nuevo documento se encuentra en
la carpeta raíz del sitio. O en una subcarpeta que se encuentra dentro de la
carpeta raíz del sitio.
Referencia relativa al documento: Conduce a un documento situado dentro del
mismo sitio que el documento actual, pero partiendo del directorio en el que se
encuentra el actual.

CLASE 3 Curso: HTML Básico – Área de Servicios

Punto de fijación
Punto de fijación: Sirve para marcar puntos de un documento que serán
accesibles directamente. A cada punto se le dará un nombre distinto que será el
utilizado para referenciarlo.
El texto que define a la etiqueta no tendrá ningún tipo de resalte, y solo se utiliza
como punto de destino del hiperenlace.
<A NAME=“nbre del ancla">Texto del ancla</A>
– La forma de especificar un enlace que acceda a un punto determinado del mismo
documento es:
<A HREF=“#nbre del ancla">Texto del enlace al ancla</A>
Será un enlace a la zona del documento actual que se había marcado con la
etiqueta indicada.
– También es posible acceder a un ancla de un documento externo de la forma:
<A HREF="Dirección URL#nbre del ancla">Texto del enlace al ancla</A>
De esta forma se podrá acceder a puntos determinados o secciones de un
documento de forma directa.
– La utilidad principal es la creación de índices en documentos largos, al comienzo
del documento se especifica el índice con enlaces a las distintas anclas y dentro del
documento se indica el comienzo de cada apartado con el ancla que lo define.

CLASE 3 Curso: HTML Básico – Área de Servicios

Destino del 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:

Valores Significado
_blank abre el documento vinculado en una ventana nueva del navegador
abre el documento vinculado en la ventana del marco que contiene
_parent
el vínculo o en el conjunto de marcos padre
abre el documento vinculado en el mismo marco o ventana que el
_self
vínculo
abre el documento vinculado en la ventana completa del
_top
navegador

CLASE 3 Curso: HTML Básico – Área de Servicios

 Formatos de Enlaces

• Normalmente los vínculos de texto cambian de color cuando

han sido visitados o cuando el puntero del ratón se
posiciona encima. Estos colores están predefinidos en cada
navegador, pero podemos cambiarlos.
• Dentro de la sección <body> de la página, los colores de los
enlaces se asignan a través de los siguiente atributos:

Atributo Significado
link permite determinar el color de los enlaces sin visitar
permite determinar el color del enlace que acaba de ser
alink
pulsado
vlink permite determinar el color de los enlaces visitados

CLASE 3 Curso: HTML Básico – Área de Servicios

 Puntos de fijación. Anclas

• Los puntos de fijación o anclas, son marcas dentro de un

documento, pueden ser útiles a la hora de crear índices.
• Un punto de fijación se inserta entre las etiquetas <a> y </a>,
con el atributo name.
• Por Ejemplo, si coloco un ancla al comienzo del capitulo 1, de
la pagina historia.htm:
<a name="anclauno"></a>Capitulo 1
Para acceder al capitulo 1 desde cualquier pagina, puedo
escribir:
<a href = “historia.htm#anclauno“ >Enlace al Capitulo 1 uno de historia </a>

CLASE 3 Curso: HTML Básico – Área de Servicios

Otros Tipos de Enlaces

• Correo electrónico: Abre una aplicación, creando un nuevo

email cuyo destinatario será el especificado en el enlace. Por
ejemplo, para mandar un mail al área de servicios, deberíamos
escribir:
<a href="mailto:serv1@unsl.edu.ar">email para el Área de Servicios</a>

• Vínculo vacío: Al pulsar sobre un enlace vacío no se abre

ninguna página ni archivo, pero el formato es el mismo que el
de cualquier otro enlace. El vínculo debe ser el símbolo
numeral "#". Por ejemplo, para insertar un enlace vacío, habría
que escribir: Símbolo numeral
<a href="#">enlace vació</a>

CLASE 3 Curso: HTML Básico – Área de Servicios

Otros Tipos de Enlaces

• Vínculo a archivo para descargar: Un enlace puede ser

utilizado para la descarga de distintos tipos de archivos, un
archivo comprimido, una hoja de Excel, un documento Word,
un documento con extensión pdf. Al hacer clic sobre el
vínculo nos aparece la siguiente ventana:

CLASE 3 Curso: HTML Básico – Área de Servicios

Insertar Imágenes

• Para insertar una imagen es necesario insertar la etiqueta

<img>.
• En el atributo src pondremos el nombre del archivo con su
extensión entre comillas. Como se muestra en los siguientes
ejemplos:
–Cuando el documento web y el archivo de imagen están en el
mismo directorio, se coloca: <IMG src="imagen.gif">
–Cuando el archivo de imagen está en un subdirectorio, se
coloca su dirección absoluta: <IMG src="subdir/imagen.gif">
(subdir es el nombre del subdirectorio).
–Cuando el archivo de imagen está en un subdirectorio, se
coloca su dirección relativa: <IMG src="../imagen.gif">

CLASE 3 Curso: HTML Básico – Área de Servicios

Formato de Imagen

• Los formatos más utilizados son el GIF y el JPG, que tienen

menor calidad que las imágenes BMP, pero ocupan menos
espacio.
El atributo alt (texto alternativo), permite introducir una
pequeña descripción de la imagen mediante una palabra o
frase corta. El texto se visualizara al pasar el mouse encima
de la imagen. Ejemplo:

<img src=“columna.gif" alt="Columna" >

Al pasar el mouse encima de la

imagen se visualiza así:
columna

CLASE 3 Curso: HTML Básico – Área de Servicios

Atributos de Imagen

• El atributo border puede tomar valores numéricos, que

indican el grosor en píxeles del borde de una imagen. Por
ejemplo:

<img src=“columna.gif” border="2">

• Los atributos width (anchura) y height (altura) se utilizan

para modificar el tamaño de una imagen. El valor que
pueden tomar estos atributos es un número, o un %
respecto del tamaño de la ventana. Por ejemplo:
<img src=“columna.jpg" border="2" width="240" height="120">

CLASE 3 Curso: HTML Básico – Área de Servicios

Atributos de Imagen

• Los atributos vspace y hspace se utilizan para indicar el

espacio libre, en píxeles, que tiene que colocarse entre la
imagen y los otros elementos que la rodean, como texto,
otras imágenes, etc.

• El atributo align que nos permitía alinear el texto, también

nos permite alinear imágenes. Para alinear la imagen al
centro de la pagina deberíamos escribir:

<div align="center"> <img src="columna.jpg" border="2"

width="240" height="120"></div>

CLASE 3 Curso: HTML Básico – Área de Servicios

Atributos de Imagen

• El atributo align dentro de la etiqueta <img> nos permite,

darle los valores left o right, para justificar la imagen del
lado que deseamos. Por ejemplo:

<img src=“columna.gif" align="right">

Texto tan extenso como La imagen se alinea a la

queramos que cubrirá la derecha del texto
parte izquierda de la
imagen.

CLASE 3 Curso: HTML Básico – Área de Servicios

Atributos de Imagen

• Podemos introducir un salto de línea, utilizando la

etiqueta <br> dentro de la cual añadiremos un atributo:
clear, como se muestra a continuación:

<br clear="left"> Introduce un salto de línea del

lado izquierdo de la imagen.

<br clear=“right"> Introduce un salto de línea del

lado derecho de la imagen.

<br clear=“all"> Introduce un salto de línea a

ambos lados de la imagen.

CLASE 3 Curso: HTML Básico – Área de Servicios

Atributos de Imagen

• Supongamos que escribimos una línea al lado de nuestra

imagen. Esta línea puede quedar arriba, abajo o al medio
de la imagen. En la siguiente tabla se presentan los
valores adicionales del atributo align:

Valor Significado
Top Ajusta la imagen a la parte más alta de la línea.
Bottom Ajusta el bajo de la imagen al texto.
Colocara el borde inferior de la imagen al nivel del elemento
Absbottom
más bajo de la línea.
Hace coincidir la base de la línea de texto con el medio
Middle
vertical de la imagen.
Absmiddle Ajusta la imagen al medio absoluto de la línea.

CLASE 3 Curso: HTML Básico – Área de Servicios