Manual HTML

Manual de HTML
Imágenes en HTML
Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el
grafismo. La introducción en nuestro texto de imágenes puede ayudarnos a
explicar más fácilmente nuestra información y darle un aire mucho más estético.
El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una
distracción para el navegante, quien tendrá másdificultad en encontrar la
información necesaria, y un mayor tiempo de carga de la página lo que puede ser
de un efecto nefasto si nuestro visitante no tiene una buena conexión o si es un
poco impaciente.
En este capitulo no explicaremos como crear ni tratar las imágenes, únicamente
diremos que para ello se utilizan aplicaciones como Paint Shop Pro, Photoshop o
Corel Draw. Tampoco explicaremoslas particularidades de cada tipo de archivo
GIF o JPG y la forma de optimizar nuestras imágenes. Un capitulo posterior al
respecto será dedicado a este menester: Formatos gráficos para páginas web.
Las imágenes son almacenadas en forma de archivos, principalmente GIF (para
dibujos) o JPG (para fotos). Estos archivos pueden ser creados por nosotros
mismos o pueden ser descargadosgratuitamente en sitios web especializados. En
desarrolloweb contamos con la mayor base de datos de gifs animados e imágenes
de todo tipo en castellano, que nos provee el sitio internacional GOgraph.
Así pues, en estos primeros capítulos nos limitaremos a explicar como insertar y
alinear debidamente en nuestra página una imagen ya creada.
La etiqueta que utilizaremos para insertar una imagen es(image). Esta
etiqueta no posee su cierre correspondiente y en ella hemos de especificar
obligatoriamente el paradero de nuestro archivo grafico mediante el atributo src
(source).
La sintaxis queda entonces de la siguiente forma:

Para expresar el camino, lo haremos de la misma forma que vimos para los enlaces.
Las reglas siguen siendo las mismás, lo único que cambia es que, en lugar de unapágina destino, el destino es un archivo grafico.
Aparte de este atributo, indispensable obviamente para la visualización de la
imagen, la etiqueta nos propone otra serie de atributos de mayor o menor
utilidad:

Atributo alt
Dentro de las comillas de este atributo colocaremos una brevísima descripción de
la imagen. Esta etiqueta no es indispensable pero presenta varias utilidades.Primeramente, durante el proceso de carga de la página, cuando la imagen no ha
sido todavía cargada, el navegador mostrara esta descripción, con lo que el
navegante se puede hacer una idea de lo que va en ese lugar.
Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por la
red con una opción del navegador que desactiva el muestreo de imágenes, con lo
que tales personas podránsiempre saber de qué se trata el grafico y
eventualmente cambiar a modo con imágenes para visualizarla.
Además, determinadas aplicaciones para discapacitados o teléfonos vocales que no
muestran imágenes ofrecen la posibilidad de leerlas por lo que nunca esta de más
pensar en estos colectivos.
En general podemos considerar como aconsejable el uso de este atributo salvo
para imágenes de pocaimportancia y absolutamente indispensable si la imagen en
cuestión sirve de enlace.
Atributos height y width
Definen la altura y anchura respectivamente de la imagen en pixels.
Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas
dimensiones pueden obtenerse a partir del propio diseñador grafico o bien
haciendo clic con el botón derecho sobre la imagen vista por el navegadorpara
luego elegir propiedades sobre el menú que se despliega.
El hecho de explicitar en nuestro código las dimensiones de nuestras imágenes
ayuda al navegador a confeccionar la página de la forma que nosotros deseamos
antes incluso de que las imágenes hayan sido descargadas.
Así, si las dimensiones de las imágenes han sido proporcionadas, durante el
proceso de carga, el navegador reservara...