HTML (lenguaje de marcas), 4ª Parte, La primera página Web (insertar imágenes y enlaces hipertexto)

Html logo
Html, logo

En este post trataremos con detalle el mundo de las imágenes en el WWW y aprenderemos todas las posibilidades gráficas que ofrece. En este capítulo aprenderemos, como introducción, a insertar imágenes para dar mas vida a nuestra página. Así cono enlaces hipertexto. A utilizar la etiqueta img así como la etiqueta a.

Cómo insertar imágenes en una página.

La etiqueta usada para insertar imágenes es: <img>. Esta etiqueta está compuesta por una única instrucción y por tanto </img> no existe y su uso está prohibido. Podemos insertar una imagen en medio de una frase como sifuese una palabra más de ella y será mostrada por el navegador a continuación del texto (o cualquier otro elemento anterior).

Para insertar una imagen en una página WEB necesitamos tenerla en un archivo aparte. Existen multitud de formatos para almacenar una imagen en un archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. cada uno de los cuales tienen unas características. El formato elegido en el World Wide Web es el formato GIF que distingue a sus archivos porque tienen la terminación “.gif”. Podríamos decir que todos los navegadores son capaces de mostrar las imágenes incluidas en este formato. Los navegadores en modo texto suelen proporcionar métodos para ver las imágenes usando algún programa visor externo. Un segundo formato que se ha introducido en el
WWW y que es soportado por la gran mayoría de los navegadores (incluyendo al Explorer™ y al Navigator ™) es el JPEG. Este formato es especialmente útil para las fotos ya que es capaz de comprimir este tipo de imagen de manera que ocupen hasta 4 veces menos que las imágenes con formato GIF. Los archivos que contienen imágenes
con formato JPEG suelen tener la terminación “.jpg”.

Una vez tenemos la imagen en un archivo aparte es hora de escribir el código HTML que nos permitirá insertarla en la página. Como hemos comentado usamos la etiqueta <img> y para indicar el nombre del archivo usamos el atributo ’src’.

Cómo crear enlaces hipertexto.

Una vez visto como introducir distintos tipos de texto y párrafos así como insertar imágenes en una página, lo único que queda por aprender para ser capaces de crear una página Web bastante completa son los enlaces hipertexto. Con ellos se pueden activar frases o palabras de la página para que al pulsar sobre ellas se salte a cualquier otra página de Internet que decidamos.

Estos enlaces hipertexto (en inglés links) no son más que unas zonas (habitualmente palabras o frases) especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. El concepto del hipertexto no es nuevo, la mayoría de los lectores lo habrán usado ya en la ayuda deWindows™ o en otros muchos sistemas, lo realmente novedoso que ofrecen estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta páginas que se encuentren en el otro extremo de la tierra. El navegante puede moverse de España a Japón con una única pulsación sobre el texto adecuado. En seguida se verá lo sencillo que es incluir esta impresionante tecnología en una página web.

Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:

  • 1. Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site). Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es:

    /hobbies/index.html

  • 2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo:

    http://www.otroservidor.com/hobbies/index.html

Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una páginas con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero.

La etiqueta <a></a>.

Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo ’href’ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es:

<a href="dirección_URL”>
Texto que será sensible (hipertexto)
</a>

Los navegadores gráficos como Netscape Navigator ™y Microsoft Internet Explorer ™ resaltan este texto mostrándolo de un color diferente y subrayándolo, además el cursor cambiará al situarlo sobre el texto. Los navegadores que funcionan en modo texto como Lynx™ resaltan los enlaces hipertexto cambiando el color del texto y de su fondo.

Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un sitio web personal con 2 páginas. La página principal se encuentra en el archivo index.html y se quiere que en ella haya un enlace a otra página donde se han escrito sobre los hobbies del creador del sitio web y que se encuentra en el archivo hobbies.html. El enlace podría ser algo así:

También puedes conocer mis <a href="hobbies.html”>hobbies</a>

Páginas en otros directorios.

Si la página a la que queremos crear el enlace no se encuentra en el mismo directorio que la actual es necesario indicar el directorio (o ruta de directorios, path) donde está. Si en el ejemplo anterior la página hobbies.html estuviese en el directorio varios el ejemplo anterior debería sustituirse por:

También puedes conocer mis
<a href="varios/hobbies.html”>hobbies</a>

Como vemos, para separar el nombre del directorio del nombre del archivo se usa el símbolo “/”. También se usaría, si fuese necesario, para separar varios directorios.

Enlaces externos.

La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola pulsación por información que se encuentre en cualquier lugar del mundo. Para convertir esto en realidad existen los enlaces externos.

Nota
Algunos diseñadores web recomiendan que no se creen enlaces externos desde la página principal o home page de nuestro sitio Web para no incitar al visitante a que se vaya de la página.

La creación de uno de estos enlaces es muy similar a la creación de los enlaces locales. El único cambio radica en que el valor dado al atributo ’href’ es la dirección completa de Internet, sea otra página web, una imagen ocualquier otro archivo. Por ejemplo, para incluir un enlace desde cualquier página a la de DMOZ (Open Directory Project). Para ello puede emplearse:

Enlace a <a href="http://www.dmoz.org”>Directorio DMOZ</a>

Así de fácil. Para referirse a un archivo específico del servidor de DMOZ™ hay que especificar la ruta de directorios y el nombre del archivo. Un ejemplo de uso podría consistir en construir un enlace a la sección sobre Internet de este buscador. Para ello hay que incluir el siguiente link:

<a href="http://www.dmoz.org/Computers/Internet/”>
Sección de Internet de DMOZ </a>

Un aspecto destacable de este ejemplo es que se ha especificado la ruta de directorios pero no el nombre del archivo. Con ello se consigue acceder al archivo por defecto de ese directorio. Todos los servidores web tienen un archivo por defecto de manera que si no se introduce el nombre ninguno ese archivo será el mostrado. En la mayoría de servidores el nombre elegido es index.html por lo que la dirección usada antes sería equivalente a:

http://www.yahoo.com/computers/internet/index.html

Anclas.

Elementos muy relacionados e los enlaces hipertexto son las anclas, que nos permitirán crear enlaces especificando a que lugar concreto de una página queremos saltar.

Desde una página cualquiera y en cualquier lugar de ella se escribe el código para crear un enlace. Cuando se pulsa sobre el texto activo se salta al comienzo de otra página, tal y como indica la flecha. Usando enlaces a anclas se puede cambiar este comportamiento.

Un ancla es una marca que se sitúa en un punto determinado de una página. Posteriormente se podrá crear un enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra página se salta al lugar donde esté el ancla, es decir, ya no se va al comienzo de la página como con los enlaces vistos hasta ahora. Dicho de otra forma usando anclas es posible que un enlace apunte al lugar concreto de una página que se desee.

Creando anclas.

Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo no debe confundirse el lector porque aunque ambos elementos estén relacionados y se use la misma etiqueta para crearlos las funciones de cada uno son radicalmente diferentes. Las anclas sólo son marcas y son invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún texto activo.

A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de fin como en el siguiente ejemplo:

<a name="nombreAncla”>Comienzo</a>

Este texto no tiene ningún significado especial y será interpretado por los navegadores de igual forma que el texto de alrededor.

Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el atributo ’href’. En su lugar se usa otro llamado ’name’. Con este atributo se da un nombre al ancla que luego nos servirá para referirse a ella.

Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas páginas en las que nos encontramos una lista ordenada alfabéticamente. Si la lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse molesto. Pero usando anclas el autor de la página puede incluir todas las letras al principio de manera que si se pulsa sobre una letra se salta al lugar de la lista donde empiecen las entradas de la letra S.

Enlaces a anclas de otras páginas.

También es posible crear un enlace a un ancla de otra página. Para ello hay que incluir la página, bien sea mediante su dirección URL o mediante su ruta de directorios, y posteriormente poner el símbolo “#” seguido del nombre del ancla. En este caso es obligatorio poner el nombre del archivo, aunque sea index.html. Siguiendo con el ejemplo anterior para crear un enlace a los términos que empiezan por ’S’ de la página donde se situó el ancla puede emplearse el siguiente código:

<a href="http://www.ozu.es/a-z.html#S”>Letra S</a>

Suponiendo que el diccionario estaba en un archivo llamado a-z.html en el servidor de nombre http://www.ozu.es [http://www.ozu.es].

La estructura de los enlaces es ligeramente más complicada que los anteriores. Para crearlos hay que seguir los siguientes pasos:

  • 1. Se parte de un ancla existente en otra página o se crea uno
  • 2. Se crea un enlace a esa página
  • 3. Se añade a la dirección del enlace el símbolo ’#’ seguido del nombre del ancla

En primer lugar deberemos crear un ancla en la página objetivo. Después deberemos escribir el enlace con la sintaxis explicada anteriormente indicando el nombre de la página y el nombre del ancla.

Sugerencia
Aunque pueden crearse enlaces a anclas que se encuentren en páginas creadas por otros, no es posible modificar las anclas existentes o añadir anclas nuevas con lo que debemos confiar que el autor haya puesto una donde interese. Para averiguar si es así se puede revisar el código de dicha página buscando una cadena de la forma <a name=”…”>. Hay que tener cuidado con este tipo de enlaces porque el autor de la otra página puede decidir quitar el ancla y todos los enlaces que hagan referencia a ella quedarán inutilizados.

Uso de enlace y ancla en la misma etiqueta.

Hasta ahora hemos visto el uso de la etiqueta <a>..</a%gt; de dos maneras diferentes: para crear enlaces hipertexto o para crear anclas. En el primero de los casos se usaba el atributo ’href’ para especificar la página que se querías enlazar. En el segundo caso, al crear el ancla, se usaba el atributo ’name’ para darle un nombre con el que poder identificarle. Pero ¿qué ocurre si usamos los dos atributos a la vez?, ¿Está permitido? La respuesta es SÍ. En ese caso se estará creando ambas cosas a la vez un enlace o un ancla. Por ejemplo:

<a href="http://es.gnome.org” name=”enlace_gnome_hispano”>
GNOME Hispano</a>

En este caso al pulsar sobre la palabra ’GNOME Hispano’ se salta a la página de GNOME Hispano. Y por otro lado se puede acceder al lugar de la página donde está este enlace creando una referencia al ancla denominada ’enlace_gnome_hispano’. Es decir, la línea anterior es equivalente a poner las dos siguientes:

<a name="enlace_gnome_hispano”>
<a href="http://es.gnome.org”>
GNOME Hispano
/a>

Todavía puede plantearse otra pregunta: ¿para que puede servir un enlace-ancla? Esta pregunta tiene mucha lógica porque para lo único que sirve un ancla es para crear un enlace a ella. En el ejemplo anterior se podrías escribir en algún otro lugar de la página:

<a href="#enlace_gnome_hispano”>
página de GNOME Hispano</a>

Pero ¿por qué no poner directamente?:

<a href="http://es.gnome.org”>
página de GNOME Hispano™
</a>

Parece más lógico y así no se forza al visitante de la página a dar dos pasos en vez de uno. Sin embargo puede encontrar casos en que el enlace-ancla puede ser conveniente. Por ejemplo, puede ocurrir que se desee poner un enlace a la página de GNOME Hispano desde una página principal. Pero también se quiere hacer caso al consejo de ciertos diseñadores web experimentados de no poner enlaces externos en ella. ¿Cómo solucionarlo? Seguramente el lector ya lo sabrá: se puede tener una página especial con todos los enlaces externos llamada por ejemplo links.html donde estuviese el enlace-ancla anterior. Entonces desde la página principal se escribiría:

<a href="links.html#enlace_gnome_hispano”>
GNOME Hispano</a>

Con lo que además hemos conseguido que el usuario visite otra de nuestras páginas, que en definitiva es uno de los objetivos de todo programador Web: que sus páginas sean vistas.

El atributo ’title’.

El lenguaje HTML define, además de los vistos, otro atributo interesante para la etiqueta <a>..</a>: ’title’. Con este atributo puede escribirse un título o una descripción breve del link. Los navegadores pueden mostrar esta información al usuario de varias maneras:

  • En un margen de la pantalla o mediante una caja de texto (en ocasiones llamadas bocadillos) que aparezca cuando se sitúen el ratón encima de la zona activa del link. Este es el método usado por Explorer ™.
  • Cuando el link ya ha sido pulsado y se esté esperando recibir la página puede mostrarse como texto de espera o anticipo a lo que va a llegar.
  • Leyendo el texto (con un sintetizador de voz) cuando se selecciona o se pasa por encima
  • etc.

Nota
No es habitual encontrar el atributo ’title’ en muchas páginas, quizá porque Netscape™ ha decidido ignorarlo y sus usuarios no verán la información que introduzcamos en él de ninguna manera.

Para ver un ejemplo de su uso se utilizá la página titulada “La chistera – Humor y magia” realizada en la primera práctica. En ella se cambia la línea de código:

<p><a href="http://www.ciudadfutura.com/areirse”>
¡A Reírse Toca, ¡Ja, ja, ja!</a>
</
p>

Por esta otra con el atributo ’title’:

<p><a href="http://www.ciudadfutura.com/areirse” title=”Yo me reí mucho”>¡A Reírse Toca, ¡Ja,
ja, ja! </a></p>.

Sugerencia
Es aconsejable usar ’title’ siempre. De esta manera aquellos usuarios (que visiten la página) con navegadores que entiendan este atributo (como Explorer™) disfrutarán de una información extra y los que usen otros navegadores que no lo entiendan (como Netscape) se quedarán como si no hubiéramos incluido dicha información, pero en ningún caso saldrán perjudicados.

Los atributos ’rel’ y ’rev’.

Antes de terminar con la etiqueta <a> …</a> es conveniente comentar algunos atributos más que completan su repertorio y que no han sido mencionados hasta ahora porque no son muy usados.

Entre estos destacan ’rel’ y ’rev’ porque en los últimos estándares de HTML en los que han trabajado conjuntamente Microsoft™, Netscape™ y muchas otras compañías y organizaciones, se les ha dado mayor importancia de la que tienen actualmente.

Estos atributos fueron creados para establecer relaciones entre las páginas enlazadas entre sí. Sin embargo no se ha especificado todavía para que pueden servir estas relaciones. ’rel’ y ’rev’ sólo existen con vistas a que en un futuro se les dé algún uso. El nombre ’rel’ proviene de la palabra inglesa relation (relación) mientras que ’rev’ proviene de REVerse relation (relación inversa).

Un ejemplo podría consistir en un libro publicado en Internet donde cada capítulo se ha escrito en una página (capitulo1.html, capitulo2.html, etc.) Puede ser interesante establecer una relación entre cada una de las páginas. Así en el capítulo 4 se podría emplear lo siguiente:

<a href="capitulo3.html” rel=”anterior”>Capítulo 3
</a>
<a href="capitulo5.html” rel=”siguiente”>
Capítulo 5</a>

Es decir el capítulo 3 se relaciona con el actual (el cuarto) en que es el anterior y el 5 en que es el siguiente. Un posible uso (futuro) que podría darse a este tipo de relaciones podría ser con vistas a imprimir el libro completo.

El atributo ’rev’ establece la misma relación que ’rel’ pero a la inversa. En el ejemplo anterior hubiese sido equivalente escribir:

<a href="capitulo3.html” rev=”anterior”>
Capítulo 3
</a>
<a href="capitulo5.html” rev=”siguiente”>
Capítulo 5</a>

Por último, para terminar por completo la etiqueta <a>…</a>, sólo nos queda comentar dos atributos: ’urn’ y ’methods’. Estos dos atributos existían en los orígenes del lenguaje HTML pero fueron eliminados por su poca utilidad. Los mencionamos únicamente para que el lector no se extrañe si los ve en alguna página, pero no recomendamos su uso.

Un Saludo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s