Imágenes HTML
Mientras que el texto hará que la mayor parte de los contenidos de un sitio web, a veces las imágenes pueden decir más que mil palabras o añadir que estimular más el diseño del sitio. Afortunadamente es muy fácil de implementar imágenes en HTML.
Etiqueta de la imagen
Para cargar las imágenes en un documento HTML que puede usar la etiqueta de imagen <img src="..." width="" height="" alt="..." /> . Tenga en cuenta que se trata de una auto-etiqueta de cierre así que no olvides el espacio y la barra al final. Similar al atributo href de HTML enlaces el atributo src (fuente) contiene la dirección absoluta o relativa a un archivo de imagen.
La anchura y la altura de los atributos opcionales establecer el tamaño de la imagen en píxeles y se puede establecer exactamente los mismos valores como la fuente de imagen o en un valor mayor o menor escala a la imagen. A pesar de estos atributos no son necesarios, siempre debe tratar de usar ellos, de lo contrario el navegador de Internet tendrá que calcular el tamaño de la imagen mientras carga la página, que puede causar el contenido de saltar alrededor.
El atributo alt (texto alternativo) se describe el contenido de la imagen y se muestra en el caso de que la imagen no se carga. Alt Tenga en cuenta que se requiere para cada etiqueta de imagen con el fin de ser válido XHTML 1.0 Strict. Si usted no desea proporcionar un texto alternativo que usted puede poner simplemente alt="" . Si es posible, siempre debe proporcionar una descripción de la imagen, ya que ayudará a las personas con discapacidad que utilizan lectores de pantalla o los motores de búsqueda como Google para saber qué imagen se trata.
Imagen HTML
Salida
Enlaces de imagen
Junto a los vínculos de texto también puede utilizar los vínculos de imágenes o una combinación de ambos.
Enlace de imagen HTML
<a href="/">This link starts here <img src="/files/media/logo_text.png" alt="Web design tutorials" /> and ends here.</a>
Salida
Formato de la imagen
Aunque este es más adecuado en los detalles gráficos de la tela para un tutorial, siempre es bueno conocer los diferentes tipos de formatos de imagen que puede utilizar. La mayoría de los navegadores soportan los siguientes 3 tipos de imágenes:
GIF
GIF puede contener un máximo de 256 colores (también llamado una paleta de colores) de todos los millones de colores que equipo puede mostrar. Es mejor usarlas para gráficos realistas, tales como botones, dibujos y logotipos.
Habiendo sólo colores limitada hace que estos archivos de imagen relativamente pequeña en tamaño de archivo que siempre es una buena cosa. También es posible especificar píxeles transparentes, lo que significa que en lugar de un color no dejar que se elaborará el programa de fondo a través de.
También ayuda de la animación GIF mediante el almacenamiento de múltiples marcos y reproducción de éstos como una secuencia. No es tan ampliamente utilizados nunca más, sin embargo, ahora que Flash es bastante corriente.
JPEG
Apoyo JPEG 16,7 millones de colores y son por tanto más adecuado para las fotografías realistas. La calidad de imagen puede ir de buena a muy mala dependiendo de la configuración de compresión. Trate de encontrar un equilibrio entre el tamaño del archivo y la calidad de archivos de gran tamaño hará que su sitio web para la carga lentamente.
PNG
PNG es un formato algo más reciente en el panorama del diseño web y se cree que sustituir GIF (si bien comprimido, un PNG paletizada debe ser siempre de menor tamaño de archivo que su homólogo GIF). Apoyan a las paletas de colores, como GIF, así como 16,7 millones de colores, como JPEG, aunque a diferencia de JPEG, PNG uso de compresión sin pérdida que conserva el 100% de la calidad de imagen original.
Quizás el rasgo más interesante es su apoyo a la transparencia alfa. Cada píxel puede tener su propia transparencia que van desde 0 a 100% (a diferencia de un pixel en formato GIF o es transparente u opaco) que permite crear efectos interesantes, como el anti-aliasing (bordes suaves en contra de cualquier color de fondo). Es apoyado en todos los navegadores modernos (Firefox, Opera, Safari, IE7). Lamentablemente IE6 no reconoce de forma nativa la transparencia alfa, aunque existen algunas soluciones aceptables.