Guia de HTML / XHTML : Links e Imágenes

Un "Link" o liga quizás presente la funcionalidad más importante de HTML : la habilidad de saltar de un punto del documento a otro y generar información a partir de archivos ajenos al documento original

Links de Referencia

El link clásico es la referencia a otro sitio en Internet , para esto se utilizan los siguientes tags <a href> y </a>

  <a href="http://www.osmosislatina.com"> Visita Osmosislatina !! </a> 

Aparece como: Visita Osmosis Latina !!

Otro tipo de link es aquel que se ofrece para movilizarse a otro documento dentro del mismo sitio:

 <a href="basico.htm"> Documento Basico en HTML </a> 

Aparece como: Documento Básico en HTML

Este tipo de Link asume que el documento solicitado se encuentra en el mismo directorio de trabajo que el documento que contiene el link. En dado caso de no ser esta la ubicación se puede utilizar .. para descender del directorio o una dirección completa para indicar la ubicación:


<a href="../../conectividad/index.htm"> Conectividad </a> 

Aparece como: Conectividad

  <a href="/diversos/mas_facil.htm"> Migrar de Windows a Unix </a> 

Aparece como: Migrar de Windows a Unix

Links de Referencia Avanzados

Existe la posibilidad de ofrecer un Link y que este sea abierto en otra ventana, esto beneficia al lector ya que no interrumpe la lectura del documento actual,para esto se utiliza el argumento target :

  <a href="http://www.cisco.com" target="cisco"> cisco.com </a>

Aparece como: http://www.cisco.com

Para ejecutar un Link dentro del mismo documento en cuestión se deben utilizar dos tipos de tags uno llamado anchor que indica el punto de referencia y otro link con un argumento hacia el anchor . Para definir el punto de interés (anchor) se utiliza el parámetro name

       <a name=links> <h4> Links </h4> </a>  
 (Los tags  <h4>  y  </h4>  indican un titulo de Encabezado )

La declaración anterior define como punto de interés (anchor) el titulo principal de Links de Referencia , para definir un link hacia este punto de interés ( anchor ) se utiliza el signo # anexado al titulo del documento.

  <a href="links.htm#links"> Links de Referencia  </a> 

Aparece como: Links de Referencia

Cabe mencionar que también es posible hacer referencias con anchors a otros documentos:

 <a href="/administracion/kms.htm#exceso"> exceso de Información  </a> 

Aparece como: exceso de Información

Para desplegar un link de correo electrónico se utiliza el parámetro mailto :

  <a href=mailto:daniel@osmosislatina.com> mi email </a> 

Aparece como: mi email

Imágenes

A pesar que las imágenes en un documento de HTML parecieran formar parte integral del documento, una imagen se integra a un documento HTML mediante un link, toda imagen es llamada de un directorio para que ésta forme parte del documento, para esto se utiliza el tag img con el parámetro SRC .

El tag , img puede emplear varios parámetros, pero los más comunes son: alt, height, width y align ,el primero es utilizado para ofrecer una descripción textual en dado caso de no observarse la imagen, los siguientes dos son utilizados para forzar la imagen en un espacio limitado , mientras el último parámetro indica la alineación de la imagen en el documento.

 <img src="/graficas/logo.gif" width="50" height="20" alt="El logo pequeño de Osmosislatina"> 

Aparece como: El logo pequeño de Osmosislatina

Donde 50 es el ancho(en pixels) y 20 el largo(en pixels) de la imagen. Observe el siguiente ejemplo donde puede ser alineada la imagen y modificado su tamaño

  <img src="/graficas/logo.gif" width="100" height="80" align="right" 
alt="El logo modificado de Osmosislatina con más pixels"> 

Aparece como:

El logo modificado de Osmosislatina con más pixels

Existen otros parámetros más detallados para ofrecer marcos y Links dentro de la imagen, pero los antes mencionados son básicos para desplegar una imagen.

CSS (Cascading Style Sheets)

En ocasiones es conveniente utilizar cierta convención o formato a lo largo de varios documentos en HTML , esto puede ser el color de fondo del documento, el tipo de letra, el color de links, entre otras cosas, para esto se debe mandar llamar un archivo que contenga estas convenciones para cada tag que desee ser modificado , la manera en que se manda llamar este archivo es muy similar al de una imagen.

 <link rel="stylesheet" type="text/css" href="/css/estilo.css"> 

Sin embargo esta no es la única forma de realizarlo, debido a que CSS (Cascading Style Sheets) es un tema extenso, existe una página dedicada a CSS

  • Actualizado : 2005/10/21 01:39

Terminos Legales de Contenido ©2000-2011 Osmosis Latina

Diseñado bajo estándares : XHTML   CSS  

webmaster@osmosislatina.com