Lenguaje HTML/Imágenes

De Wikilibros, la colección de libros de texto de contenido libre.
Ir a la navegación Ir a la búsqueda

<img src="http://es.wikipedia.org/wiki/Archivo:Neptune.jpg">



← Enlaces Imágenes Estilos CSS →

En esta sección veremos como añadir imágenes a nuestras páginas web.

Las imágenes tienen dos funcionalidades: sirven para mejorar la estética y ademas pueden ser un buen complemento al texto, ya sabes, una imagen vale mas que mil palabras.

insertando imágenes[editar]

Elemento img[editar]

Sus etiquetas son: <img> (sin etiqueta de cierre)
Sus principales atributos son:

src - indica la dirección de origen de la imagen
- valores posibles: la URL de la imagen a insertar. Tambien podemos insertar imagenes que esten almacenados en nuestro equipo.

Para lograr esto lo unico que tenemos que hacer sera lo siguiente: Primer caso: Suponiendo que queremos usar la imagen de alguna página web esto quedaria así: <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Gambling_chips.jpg/190px-Gambling_chips.jpg">
Segundo caso: Ahora si queremos que usar alguna imagen de nuestro equipo hariamos lo siguiente.

<img src="file:///C|/20.jpg">


si nosotros tenemos en la imagen en la misma carpeta el documento html en la que estamos trabajando, o si estan dentro de esta, el codigo quedaria reducido de la siguente manera: suponiendo que hay una carpeta imagenes dentro de la carpeta mi web donde esta nuestro archivo seria <img src="imagenes/20.jpg">

alt - permite poner un texto alternativo (Esta etiqueta por no estar en el estandar no sera entendida por todos lo navegadores web)
- valores posibles: un texto descriptivo
title - permite hacer que aparezca una descripción
- cuando se pasa el cursor la imagen.

Atributos sobre el tamaño:

height - especificar nueva altura
width - especificar nueva anchura

Los mapas de imágenes[editar]

Los mapas de imágenes (también los llaman mapas) son imágenes que contienen zonas sensibles.
Hay tres formas de zonas sensible: circulares, rectangulares y poligonales.
Las más sencillas de usar son las de forma rectangular y circular, en las cuales sólo se define X e Y.
En las poligonales se define Xn e Yn. Un ejemplo de esto es:


1<map name="ejemplo">
2<area shape="polygon" coords="210,7,210,198,10,198" href="ejemplo.html" alt="ejemplo">
3<area shape="circle" coords="432,72,58" href="ejemplo_círculo.html" alt="ejemplo_círculo">
4<area shape="default" nohref>
5</map>
6<img src="imagen.gif" usemap="#ejemplo">


Si se fija el elemento shape="" indica el tipo de figura y coords las coordenadas X e Y.
En la segunda línea de código se ven las coordenadas X e Y. Cada par de números corresponde con un vértice de la figura. En este caso la figura es un triángulo. En el círculo aparece una tercera coordenada, que equivale al radio.
La figura default corresponde con las zonas de la imagen que no son sensibles. La imagen sobre la que se quiere "poner" el mapa se "llama"




después de definir todas las zonas sensibles (línea 6).

Los formatos gráficos[editar]

Vectoriales[editar]

SVG - (Scalable Vector Graphics)

Mapa de bits[editar]

Ideales para logotipos, esquemas y dibujos sencillos[editar]

PNG - (Portable Network Graphics)
MNG - (Animaciones en PNG, es un formato en desarrollo; no usar, preferentemente)
GIF - (Graphics Interchange Format) (usar sólo para animaciones, para imágen estática, es mejor PNG)

Ideales para fotografías[editar]

JPEG - (Joint Photographic Experts Group)

BMP - (Bitmap)
El formato BMP no debe ser usado bajo ningún concepto, pues ocupa demasiado espacio en disco; si lo que se desea es no perder calidad, una buena opción es usar el formato PNG.