HTML – Hiperimágenes saltarinas

Objetivo: aprender el código HTML necesario para crear un hiperenlace a partir de una imagen.

Eh Hipertexto saltarín vimos el secreto de la magia de la web que permitía tejer una red de contenidos enlazados. El elemento <a> era el responsable de esa magia.

Hagamos un breve resumen: entre las etiquetas de apertura y cierre, <a> ... </a> facilitábamos el texto que activaría el salto cuando el usuario hiciera clic sobre él (que suele visualizarse subrayado). El atributo href contenía la dirección a la que se saltaría. Por ejemplo, una línea como la siguiente:

Este es el índice de artículos relacionados con HTML.

se generaría del siguiente modo:

Este es el <a href="http://elclubdelautodidacta.es/wp/indice-html/">índice</a> de artículos relacionados con HTML..

Quiero plantear hoy la siguiente cuestión: ¿y si, en vez de una palabra o frase, queremos que el activador del salto sea una imagen?

Por ejemplo, fíjate en la oveja experta en HTML que aparece a continuación, pillada en el momento en el que se disponía a darse un homenaje en forma de patatas bravas. Si haces clic sobre ella se te abrirá una página con el índice de artículos relacionados con HTML.

¿Cómo se hace eso en HTML?

La respuesta ya la sabes, aunque no lo creas:

1) Sabes cómo referenciar imágenes.

2) Sabes que lo que esté entre las etiquetas <a> ... </a> será el activador del hiperenlace.

Por lo tanto, si quieres que el activador sea una imagen, coloca el código que la referencia entre las etiquetas <a> ... </a>.

Este es el código que mostraría la imagen:

<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />

Para que actúe de hiperenlace, la situamos entre <a> ... </a>:

<a><img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" /></a>

Finalmente, introducimos la dirección de destino (el índice con todos los artículos de HTML) como valor del atributo href dentro de la etiqueta de apertura <a>:

<a href="http://elclubdelautodidacta.es/wp/indice-html/">
<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />
</a>

Así de sencillo…

Javier Montero Gabarró


HTML – Hiperimágenes saltarinas


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Imágenes en HTML – III: Un texto alternativo

Hagamos balance de la situación: ya sabemos referenciar imágenes en nuestra página web con el elemento <img> y el atributo src, así como la conveniencia de indicar su tamaño para facilitar el trabajo al navegador.

Hay ocasiones en las que, por determinadas circunstancias, no se descargan las imágenes. Quizás apunten a un fichero inexistente, o puede que hayamos desactivado su descarga para agilizar la carga de la página. O tal vez estemos empleando un navegador en modo texto como Lynx. En esos casos sería muy práctico, a pesar de todo, poder hacernos una idea de cuál es el contenido de la imagen.

Para ello disponemos del atributo alt, al que le facilitamos, entre comillas, un breve texto alternativo describiendo la imagen.

Por ejemplo, he aquí la oveja experta:

<img src="expertahtml.jpg" alt="La oveja experta en HTML" height="283" width="213" />

El texto alternativo indicado en alt aparecerá en el caso de que no se llegue a cargar la imagen.

En algunos navegadores antiguos ese texto se mostraba incluso en imágenes cargadas cuando situábamos el ratón encima de ellas, pero debes saber que eso no es lo que determina la especificación.

Acostúmbrate a usar siempre el atributo alt cuando trates con imágenes. No sólo harás tu página más funcional, sino que, además, será mejor valorada por los buscadores. De hecho, si quieres escribir código XHTML estricto, se trata de una exigencia absoluta.

Naturalmente, hay situaciones en las que no es deseable facilitar un texto alternativo. Si tienes gráficos asociados al diseño estructural de la página como, por ejemplo, las viñetas previas a un menú, no aporta nada, y es incluso molesta, la presencia de texto alternativo. En estos casos, para cumplir con las exigencias de XHTML, bastaría con facilitar al argumento alt una cadena de texto vacía, alt="".

Javier Montero Gabarró


Fecha de última actualización: 20 de abril de 2012


Imágenes en HTML – III: Un texto alternativo


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Imágenes en HTML – II: El tamaño sí importa

La oveja experta en HTML nos presentó en la anterior entrega los rudimentos del tratamiento de imágenes a través del elemento <img>. Vimos cómo indicar la ubicación de la imagen mediante el atributo src, al que le facilitábamos la URL de origen. Aprendimos también algo sobre el modo como el navegador presenta las imágenes junto al texto. Abundemos algo más en este sentido.

Observa la siguiente página, en la que la mencionada experta se hace acompañar por un puñado de ovejas especializadas en armonía musical.

Este es el fragmento de código que genera esa disposición:

<body>
<img src="expertasarmonia.jpg"/>
<img src="expertahtml.jpg" />
Está bien tener un buen rebaño de ovejas especializadas...
</body>

Date cuenta de que la primera imagen es de altura inferior a la segunda. Observa que el punto de inserción del texto depende del espacio que ocupen las imágenes.

Esto tiene sus implicaciones. Analicemos lo que está sucediendo en cámara lenta:

El navegador, en primer lugar, se trae del servidor el código de la página que quiere mostrar. Una vez hecho lo analiza y comienza la descarga de las imágenes que se encuentra en el código. Entre tanto, sin esperar a que estén disponibles, puede ir mostrándonos el texto de la página para que vayamos entreteniéndonos. Pero no es hasta el momento en el que sabe las dimensiones de la imagen cuando puede mostrarnos el formato definitivo.

Con anchos de banda grandes esto no suele ser problemático, pues todo sucede muy rápido. Sin embargo, en situaciones de baja velocidad, o en páginas con imágenes muy grandes y numerosas, suele pasar un tiempo apreciable hasta que disponemos de la página en plenitud de formato.

Esto es algo desagradable, pero existe una manera muy sencilla de evitarlo: especificando de antemano cuáles son las dimensiones de la imagen a presentar. De este modo, el navegador reservará inmediatamente el espacio adecuado en la página y podrá mostrarnos el texto con la garantía de que no lo descabalará más adelante. Las imágenes podrán ir descargándose a su ritmo, pero al menos el formato definitivo ya podrá ser presentado.

Para indicar las dimensiones de la imagen tenemos dos nuevos atributos: height y width, que significan en inglés alto y ancho, respectivamente. Como valor indicamos los tamaños en píxeles.

Esta sería, pues, una forma mejor de mostrar al ganado:

<body>
<img src="expertasarmonia.jpg" height="170" width="227" />
<img src="expertahtml.jpg" height="283" width="213" />
Está bien tener un buen rebaño de ovejas especializadas...
</body>

¿Mucho trabajo acaso calcular las dimensiones en píxeles de una imagen? En absoluto, hay mil maneras de hacerlo. Por ejemplo, basta con consultar las propiedades del fichero. Usando el explorador de archivos de Windows aparecería algo como esto:

Entonces me pregunto, ¿podría utilizar esos mismos atributos de alto y ancho para redimensionar una imagen?

La respuesta es sí, pero no es lo recomendable.

En primer lugar, como las dimensiones nuevas no conservaran la proporción la imagen aparecería deformada, lo cual es algo cutre.

En segundo lugar, aunque las proporciones fueran las correctas e incluso aunque redujeras la imagen de tamaño, estarías forzando al navegador al trabajo extra de reprocesar la imagen. Además, estarías consumiendo ancho de banda inútil, pues aunque hicieras la imagen más pequeña, el fichero del servidor sería el mismo y tendrías que bajar la imagen en su resolución y tamaño original.

Es mucho más eficiente utilizar cualquier programa de retoque de imágenes y redimensionar el fichero original, algo que apenas lleva unos segundos.

Nada más; a esperar que la oveja nos presente la tercera entrega…

Javier Montero Gabarró


Imágenes en HTML – II: El tamaño sí importa


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Imágenes en HTML – I: El origen

Aprender es como colocar piezas en un puzzle. Al principio no son más que elementos aislados que, con un poco de suerte, podemos intuir pertenecen a alguna zona determinada de la figura. Poco a poco las piezas se van uniendo formando pequeñas islas que después se hacen continentes.

En el camino hacia la habilidad de saber hacer páginas web con HTML, vamos a colocar hoy una pieza pequeña pero importante: aprenderemos a insertar imágenes en nuestras páginas.

¿Sabías que al principio la web estaba basada en texto? No fue hasta la aparición del navegador Mosaic cuando se popularizó la WWW con imágenes. Mis primeros pinitos en la nueva web los hice con Mosaic (llevo ya unos cuantos años en esto) y recuerdo con cariño la indescriptible emoción que me asistía cuando navegaba. Era pura magia. Hoy día esto se da por sentado, pero por entonces era apasionante.

Vamos a aprender hoy lo más básico que hay que saber para insertar un gráfico en una página web. En las sucesivas entregas iremos profundizando en el tema.

Para añadir un gráfico disponemos del elemento <img>.

A veces me referiré a elemento o etiqueta indistintamente. Debes saber que un elemento está compuesto por la etiqueta de inicio, el contenido y la etiqueta de cierre.

<img> pertenece al tipo particular de elementos que no requieren una etiqueta de cierre, pues no hay nada entre medias que contener. Todo lo necesario para la inserción de la imagen se especifica en la etiqueta de apertura a través de sus atributos.

Para poder insertar una imagen necesitamos indicar dónde se encuentra. Para eso disponemos del atributo src, al que le facilitaremos la URL de origen.

Por ejemplo:

<img src="http://dl.dropbox.com/u/4631191/blog/knoppix-logo.gif" />

En este caso la imagen se halla en un sitio diferente al que reside la página en sí.

Normalmente las imágenes residirán en la misma máquina, por lo que bastará con indicar el camino relativo desde donde estamos para llegar a la imagen.

Por ejemplo:

<img src="expertahtml.jpg" />

Con esta línea, el navegador tratará de descargar la imagen expertahtml.jpg que esperará encontrar en el mismo directorio que el de la página actual.

Otros ejemplos de especificación de un camino relativo:

<img src="../expertahtml.jpg" />

En este caso buscará la imagen en el directorio padre del directorio actual (los dos puntos simbolizan al directorio padre).

<img src="img/expertahtml.jpg" />

Aquí el fichero se halla en la carpeta img existente en el directorio actual.

También podemos especificar un camino absoluto. En este caso hay que preceder la ruta con el esquema file:, como en el siguiente ejemplo:

<img src="file://c:\imagenes\expertahtml.jpg" />

Observa cómo hemos cerrado la etiqueta. Al tratarse de elementos sin etiqueta de cierre, las normas de XHTML nos fuerzan a terminar de esa forma la única etiqueta que hay. En HTML5 las normas no son tan estrictas y podemos elegir qué modo de cierre preferimos, por lo que también sería válido lo siguiente:

<img src="file://c:\imagenes\expertahtml.jpg">

Hay diversidad de opiniones sobre qué es lo más conveniente…

Vamos a ver ahora como los navegadores nos presentan las imágenes. Comencemos por el caso más simple en el que hay una imagen sin texto alguno. He aquí el cuerpo de la página:

<body>
<img src="expertahtml.jpg"/>
</body>

Observa su efecto en este enlace. Fíjate como la imagen aparece situada en la esquina superior izquierda.

Añadamos ahora algo de texto:

<body>
Esta es la oveja experta en HTML.<img src="expertahtml.jpg" />
Hay ovejas expertas en cada área de conocimiento.
</body>

Observa qué sucede. En el punto donde termina la escritura de la primera frase inserta la imagen. Y lo hace situando ahí su esquina inferior izquierda. Para ello, hace el hueco necesario en la parte superior, desplazando el texto todo el espacio que haga falta. La siguiente frase continúa a partir de la esquina inferior derecha.

Finalmente, consideremos el siguiente código:

<body>
Esta es la oveja experta en HTML.
<br />
<img src="expertahtml.jpg" />Hay ovejas expertas en cada área de conocimiento.
</body>

Esta vez hay un salto de línea, además de la imagen, entre ambas frases. Mira cómo se visualiza el conjunto. Tal como es de esperar, la imagen se inserta en el punto donde debería empezar la escritura, dejando el espacio vertical necesario. Una vez hecho esto el texto continúa a partir de la esquina inferior derecha.

Nada más por hoy. Quédate con esta pieza; por los colores no te costará ubicarla dentro del marco del puzzle…

Javier Montero Gabarró


http://elclubdelautodidacta.es/wp/2012/03/imagenes-en-html-i-el-origen/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

LaTeX – Capítulo 16: Insertando imágenes

Ha llegado el momento de aprender a insertar imágenes en nuestros documentos. Mostraremos los comandos básicos y, como aplicación práctica, editaremos en LaTeX los cinco primeros capítulos del curso de mIRC, algo que ya iniciamos en el número 12 con los tres primeros.

Para pasar a LaTeX el capítulo 4, que contiene una lista simple, ha sido necesario recurrir al entorno \begin{itemize} … \end{itemize} que ya tratamos en su día. En el capítulo 5 aparecen las primeras imágenes.

Para trabajar con imágenes lo primero que vamos a hacer es cargar el paquete graphicx mediante la instrucción

\usepackage{graphicx}

escrita en el preámbulo.

Si tu entorno LaTeX no lo tiene ya instalado deberás descargarlo. Consulta los detalles de tu distribución para ver cómo hacerlo. En el caso de MikTeX, que es la que uso bajo Windows, no es necesario hacer nada, pues se ocupa automáticamente de su descarga por Internet tan pronto se da cuenta de que no lo tiene.

Una vez cargado el paquete ya tenemos a nuestra disposición el comando con el que podremos cargar imágenes:

\includegraphics{nombre_del_fichero}

Como argumento, entre llaves, facilitamos el nombre de fichero. No es necesario indicar su extensión y debe ser de un formato compatible con LaTeX (png o jpg si convertimos a pdf).

Si el fichero gráfico está en el mismo directorio que el código fuente, no será necesario especificar ningún path, únicamente su nombre.

El siguiente pdf incluye los cinco primeros capítulos del curso de mIRC. Descarga el código fuente y estudia el código que lo produce. Fíjate, en particular, en la carga del paquete graphicx en el preámbulo y en el uso de \includegraphics en el capítulo 5.

LaTeX toma las decisiones oportunas de formato en función de las dimensiones de las imágenes, ajustando los párrafos según convenga. No te preocupes ahora excesivamente por estas cuestiones; conforme vayamos adquiriendo nuevos recursos iremos refinando el diseño.

Javier Montero


LaTeX – Capítulo 16: Insertando imágenes


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies