Lenguaje HTML/Imágenes
<img src="http://es.wikipedia.org/wiki/Archivo:Neptune.jpg">
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. También podemos insertar imagenes que esten almacenados en nuestro equipo.
Para lograr esto lo único que tenemos que hacer será lo siguiente:
Primer caso:
Suponiendo que queremos usar la imagen de alguna página web esto quedaría 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 haríamos lo siguiente.
si nosotros tenemos en la imagen en la misma carpeta el documento html en la que estamos trabajando, o si están dentro de esta, el codigo quedaria reducido de la siguiente manera: suponiendo que hay una carpeta imágenes 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 estándar no será entendida por todos lo navegadores web)
- - valores posibles: un texto descriptivo
- - valores posibles: un texto descriptivo
- title - permite hacer que aparezca una descripción
- - cuando se pasa el cursor la imagen.
- - 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.