La Etiqueta Imagen ![]()
Publicadas por Unknown
Las imágenes son un elemento importante a la hora de hacer más
atractiva una web, o de aportar más información. No obstante, hay que saber
cuándo utilizarlas y no abusar de ellas.
Podemos usar tres formatos de imagen: GIF,JPEG y PNG. El JPEG
es el más adecuado para imágenes con muchos colores, como fotografías, y que no
tengan grandes áreas de colores planos. Las imágenes GIF sólo pueden almacenar
hasta 256 colores diferentes, pero uno de estos colores puede ser transparente.
El formato PNG es el estándar y podemos elegir varias profundidades de paleta
(número de colores). Además, les podemos añadir un canal alpha para crear
efectos con transparencias de diferente opacidad.
Insertar una imagen.
Insertar una imagen.
Con src establecemos qué imagen queremos mostrar. Al
igual que con los links, hay que tener en cuenta la ruta hacia la imagen. Por
motivos de organización, normalmente tendremos las imágenes en un subdirectorio
o carpeta (o varios) llamado imagenes, así que escribiríamos
src="imagenes/algo.gif".
Los atributos width y height nos permiten
establecer el ancho y el alto de la imagen respectivamente.
Podemos indicar un valor absoluto en píxeles o uno relativo en tanto por ciento.
Por ejemplo, width="200" mostraría la imagen con 200 píxeles de ancho,
mientras que width="100 %" hace que la imagen ocupe toda la pantalla de
ancho. Estos dos atributos no son obligatorios, pero sí es conveniente que
indiquemos las dimensiones en píxeles reales, ya que ahorramos tiempo al
navegador a la hora de maquetar la página.
El atributo alt contiene una descripción de la imagen,
que veremos cuando no se haya podido cargar por cualquier motivo. La mayoría de
navegadores también muestran esta descripción al pasar el ratón por encima de la
imagen. Este atributo es obligatorio, por cuestiones de accesibilidad: hay
personas que deshabilitan las imágenes para ahorrar tiempo; otras, usan
navegadores de texto como Lynx; y otras, sencillamente son ciegas.
Por último fíjese que no cerramos con </img>
sino que simplemente obviamos el img y sólo escribimos /> para cerrar la
etiqueta.
Un ejemplo para nuestra página Web:
Antes de codificar debemos crear una carpeta dentro de la carpeta Pagina Web de
Regino o como se llame su carpeta y allí vamos a guardar una imagen con
cualquiera de los formatos antes mencionados (jpeg o jpg, png o gif). Pues desde
allí vamos a “jalar” nuestra imagen para mostrarla en la página.
 |
 |
Ahora veamos la imagen de la página Web:
Material Consultado.
Manual XHTML y CSS de cristalab.com por benko. www.cristalab.com/curso-html/introduccion-css-xhtml/
0 comentarios: