¡Hola PDD tuneros! Casi con las uvas en la boca nos disponemos a abordar las imágenes, la última etiqueta que nos queda. De esta manera acbaremos "lo más tostón" quizá en la creación de nuestra PDD. A partir de entonces PDD Tuning tomará un rumbo un poco diferente; esperemos a ver qué nos depara este año 2006 que se avecina...

Usando el HTML IV

Imágenes

¡Y por fin las dichosas imágenes! Seguro que más de uno entaría pensando "¡Imágenes, quiero imágenes, que es lo q todo elmundo tiene en la PDD!". Pues bien, como se dijo en su momento, para introducir imágenes deberemos usar la etiqueta <img>. Ésta no requiere finalizador y admite los siguientes parámetros:

• src: "Source". Significa "origen" y funciona de forma parecida al href en los hipervínculos. El valor que toma es la dirección URL de la imagen. Ésta puede estar en cualquier formato, ya sea .gif, .jpg, .png... TAl vez alguien recuerde que con los enlaces podíamos linkear cualquier tipo de archivo, y se preguntará, ¿y para qué quiero <img> si con <a> ya puedo linkear imágenes?... ¡ERROR! Sí, con <a> puedes linkear imágenes, ¡pero no mostrarlas! De manera que sólo tendrías un enlace que al pinchar sobre él te abriría la imagen en el navegador, y a priori no es eso lo que nos interesa.
  
• alt: significa "alternativo". Este parámetro se utiliza para mostrar un texto alternativo por pantalla en aquellos casos en que la imagen no se pueda mostrar (por ejemplo porque ha cambiado de ubicación y el origen no ha sido actualizado). En IE, cuando dejamos el ratón sobre una imagen con el parámetro alt, nos aparece el valor que se ha introducido en el parámetro enmarcado en un cuadro flotante de color amarillo. En Firefox esto no pasa, y para ver lo que pone en el recuadro es necesario pinchar con el botón derecho y seleccionar "Propiedades".
  
• title: este parámetro funciona exactamente igual que en los hipervínculos y sirve para especificar el título de la imagen. A efectos prácticos, lo que se obtiene es algo parecido a lo que hace alt; un recuadro amarillo con el texto que hemos introducido. Una peculiaridad de este parámetro es que el recuadro se muestra por pantalla tanto en IE como en Firefox, así que si os interesa este efecto ya sabéis que usar ;). Tened en cuenta que si usáis a la vez alt y title, sólo se os mostrará por pantalla el valor de title.
  
• border: el valor que toma es un número entero positivo. Con este parámetro lo que conseguimos es que la imagen salga enmarcada por un reborde de un grosor de píxels, donde X es el número que hemos introducido.
  
• id ó name: Igual que sucede en los hipervinculos, ambos se usan de la misma manera pese a que no son lo mismoy sirven para crear marcadores en el documento (como ya vimos en la anterior entrega). Pues bien, si hacemos lo mismo que con los enlaces pero ponemos el name en una imagen, cuando pulsemos sobre el vínculo interno, el navegador nos llevará a la imagen.
  
• align: Si bien este parámetro no funciona en absoluto con otras etiquetas en la PDD, con <img> funciona, no al 100%, pero funciona. Sólo adimte como valor right para alinear a la derecha. En fin, algo es algo...
  
• width: significa "ancho". El valor que toma es un número entero positivo, que determinará el ancho en píxels de la imagen.
  
• height: significa "alto". El valor que toma es un número entero positivo, que determinará el alto en píxels de la imagen.

Bien, como ya viene siendo habitual en este artículo, vamos con el ejemplo:

Pues nada más por este año. En la próxima entrega hablaremos de... no sé, ya lo decidiré sobre la marcha :P . Tal vez hosting de imágenes.

¡FELIZ AÑO 2006!