Para incluir una imagen en un documento web, utilizamos la etiqueta <img> junto con algunos atributos
- La etiqueta <img> tiene dos atributos requeridos: src y alt.
Nota: Las imágenes no se insertan técnicamente en una página HTML, las imágenes están vinculadas a las páginas HTML. La etiqueta <img> crea un espacio de contención para la imagen de referencia.
Ejemplo
<img src="atencion.gif" width="28" height="25" alt="marca de aviso">
Para incluir líneas horizontales utilizamos la etiqueta <hr> junto con algunos atributos
- La etiqueta <hr> define una ruptura temática en una página HTML (por ejemplo, un cambio de tema).
- El elemento <hr> se utiliza para separar el contenido (o definir un cambio) en una página HTML.
Ejemplo
<hr size="4" align="right" width=40%>
¿Cómo se construye la imagen?
-
Pantalla del ordenador como un panal formado por celdas cuadradas
- Mostrará uno u otro color según las cantidades de rojo, verde y azul que correspondan a cada punto
- Cada celdilla se las denomina píxel
Animación del principio de funcionamiento de una pantalla LCD.
Fuente: http://www.informaticamoderna.com/Pantalla_LCD.htm
Tipos de imagen
-
Vectoriales
-
cada uno de los puntos se recoge en forma de ecuación matemática
- Ventaja: la calidad de la imagen no varía al modificar el tamaño y apenas ocupa espacio
- adecuado para el diseño de líneas y figuras
-
cada uno de los puntos se recoge en forma de ecuación matemática
-
Mapa de bits o bitmap
-
Cada uno de los puntos lleva información acerca de la posición absoluta y el color que componen la imagen
- Ventaja :recoge una amplísima gama tonal (real)
- Desventaja: el tamaño (formatos de comprensión)
-
Cada uno de los puntos lleva información acerca de la posición absoluta y el color que componen la imagen
Resolución del monitor
-
Viene determinada por dos variables:
- El tamaño de la "celda", al que se denomina dot pitch (0,14 a 0,28 mm)
- El número de puntos que es capaz de enviar a la pantalla la tarjeta gráfica del ordenador. Para pantallas de 17" 1024x768
Fuente:Imágenes Google
Resolución de la imagen
Son los píxeles por pulgada (ppp)
Profundidad de color
Viene dado por el número de bits utilizados para representar el color de un píxel
|
 |
Formatos gráficos para la WEB
- Se utilizan tres formatos archivos GIF, JPEG/JPG y PNG
-
- GIF solo soporta 256 colores
- JPEG puede presentar 16,7 millones.
-
PNG imágenes indexadas con paletas de 256 colores o bien color real con 16,7 millones.
|
JPEG - 5,3KB |
GIF - 14,5KB |
PNG -88,4 KB |
 |
 |
 |
|
16,7 millones de colores |
256 colores |
256 o 16,7 millones de colores |
Recomendaciones
|
Las imágenes que incluyamos en nuestras páginas deben llevar los atributos de tamaño:
|
Si agrandamos la imagen perdemos calidad y si la empequeñecemos no disminuimos el tamaño del fichero
|
Modificar imágenes para su utilización en la WEB
Utilizaremos Gimp
|
Tutorial del ITE http://www.ite.educacion.es/formacion/materiales/48/cd/html2005/3multimedia.htm |
