ElTicus.com

Programación, lenguajes y recursos para programadores

**
manual
Curso Básico de HTML
Introducción a la programación de páginas Web
Publicado por JL Fecha: 2006-12-02 01:20:00 Idioma: Español Tipo de documento: manual
Descargar como PDF

Curso de HTML Básico

Curso básico de HTML

Guía para principiantes

(Curso para introducir a alguien a la programación de páginas web)



ENLACES Y GRÁFICOS

INTRODUCCIÓN

Además de los muchos estilos y capacidades de presentación que nos ofrece HTML para estructurar el documento en sí, disponemos de varias directivas que nos permiten definir relaciones entre diferentes documentos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML. Por la similitud de tratamiento que tienen los enlaces y los gráficos, tocaremos también en esta sección cómo pueden incluirse estos últimos en un documento.

Los enlaces en HTML se expresan rodeando con la directiva <a> el objeto (que puede ser un fragmento de texto o un gráfico) que vaya a servir como anclaje para el enlace. Por ejemplo, si marcamos con <a> un gráfico, cuando en el documento final se pulse con el ratón sobre dicho gráfico saltaremos al objeto referenciado en el enlace: otro documento, un vídeo musical, o un servidor de información meteorológica.

QUÉ ES UN URL

Para especificar de manera uniforme el objeto al que apunta nuestro enlace, se utiliza una forma estandarizada que se denomina URL (Uniform Resource Locator, es decir, Localizador Uniforme de Recursos ). Un URL está formado de la siguiente manera: esquema://maquina/ruta

La máquina y la ruta sirven para localizar el objeto al que apunta nuestro enlace. La máquina es la identificación del servidor en el cual está situado el objeto al que apunta el enlace. Puede ser simplemente el nombre de un ordenador (como www.etsit.upm.es) o también un nombre y un puerto (por ejemplo www.etsit.upm.es:8000).

La ruta es el nombre del archivo que contiene el documento en concreto, incluyendo el nombre del subdirectorio en el que se encuentra.

ENLACES

Para definir un enlace es necesario marcar con la directiva <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parámetro href="URL" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con
<a href="URL">, y después cerrar con </a>. Por ejemplo, si queremos que el texto pulse aquí para visitar la NASA nos conduzca a la home page de la NASA, debemos escribir en nuestro texto HTML:

 

<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>

Si lo que queremos es solamente enlazar con otro documento que se encuentra en el mismo servidor, incluso en el mismo subdirectorio. En este caso no es necesario escribir el camino completo al destino del enlace, sino que basta con dar la mínima información imprescindible.

Es decir, que si desde cierto documento queremos enlazar con otro que se encuentra en el mismo subdirectorio, basta con poner su nombre: <a href="el_otro_archivo">pulse aquí</a>. O si se encuentra en otro subdirectorio del mismo servidor, es suficiente con poner <a href="/la/ruta/que/sea/archivo.html">pulse aquí</a>. También pueden utilizarse rutas relativas: <a href="ruta/relativa/cosa.html">cosa</a>.

Imágenes

Para incluir un gráfico en un documento HTML se utiliza la directiva <img>. En dicha directiva debe incluirse un parámetro src="URL", con el cual indicamos dónde está el archivo con el gráfico concreto que queremos para nuestro documento. Esto pone a nuestra disposición una gran flexibilidad, ya que podemos complementar el contenido de nuestro documento tanto con gráficos que se encuentren disponibles en nuestro servidor de WWW como con una foto situada en un servidor de la NASA o del Ministerio de Cultura, por ejemplo, sin que el lector final tenga por qué apreciar ninguna diferencia.

Existe alguna limitación respecto a los formatos gráficos que los programas lectores de HTML puede interpretar sin problemas. Los formatos fundamentales son el GIF y el JPG, que cualquier programa con capacidades gráficas debería poder mostrar directamente en nuestro texto. Si utilizamos otro formato diferente, lo más probable es que cuando un lector esté accediendo al documento, el programa no comprenda ese formato y se tenga que solicitar la ayuda de otro programa, con lo cual al final el gráfico no se insertará en el lugar estratégico de nuestro documento, sino que aparecerá en otra ventana diferente.

Hay un parámetro optativo de la directiva <img> que sirve para proponer un texto alternativo a un gráfico. Este texto aparecerá cuando se esté usando para leer el HTML un programa sin capacidades gráficas (por ejemplo una consola de Lynx, que sólo trabaja con texto). Se trata de alt="texto". Conviene utilizarlo cuando los gráficos sirven como origen a hiperenlaces, porque si no los programas sin capacidades gráficas no podrían mostrar los enlaces que nosostros queremos.

Como ocurría antes con los enlaces, por lo general no es necesario escribir el URL completo, sino que basta con dar la mínima información. Por ejemplo, para colocar en este punto del documento un monigote que está en el mismo subdirectorio que este manual, en el archivo monigote.gif, escribiremos:

<img src="monigote.gif" alt="MONIGOTE"><p>
 

Lo que se traduce en:

MONIGOTE

Como se ve, hemos especificado el texto alternativo "MONIGOTE", con lo cual una persona que no dispusiera del programa adecuado hubiera visto algo parecido a [MONIGOTE] en lugar del dibujo.

Podemos también incluir un dibujo que esté en otro lugar especificando un URL completo, por ejemplo:

<img src="http://naic.nasa.gov/images/nasa-logo.gif"> <p>

 

Y además podemos hacer que un gráfico sea un enlace, utilizando la directiva <a>. En este caso no debemos olvidar utilizar la opción alt="texto" para que todos los usuarios puedan seguir el enlace:

<a href="http://www.nasa.gov/">
   <img src="http://naic.nasa.gov/images/nasa-logo.gif" alt="NASA">
</a> <p>
 

 

 


<< Tema anterior Tema siguiente >>



Hay 156 comentarios sobre este tema por parte de los lectores


Haz un comentario sobre este tema
Nombre email (no se muestra)
comentario:
Escribe las 2 letras que ves aquí: Imagen anti-spam =

Los últimos 5 comentarios colocados son: