Imágenes
en HTML
Para insertar una imagen es necesario insertar la
etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre.
El nombre de la imagen ha de especificarse a través
del atributo src.
Aunque
el código HTML que se utiliza para mostrar imágenes es muy sencillo, es
importante seguir algunas indicaciones:
<IMG
src=”imagen.png”>
1 La imagen debe
estar presente en la misma carpeta que el archivo HTML, a menos que se
especifique una vía o URL diferente.
2 El nombre con
extensión de la imagen debe ser el mismo que aparece en el código.
3 El formato de la
imagen debe ser uno de los que reconocen los navegadores. Los formatos que se
usan son .jpg, .png y .gif
Los
atributos que se incluyen en la etiqueta
IMG permiten localizar la imagen, cambiar su tamaño, incluir un borde y ponerle
un texto descriptivo.
<IMG
src=”ruta de localización/nombre de la imagen.png” width=”300” height=”240”
border=”0” alt “información sobre la imagen”>
scr. Fuente, permite
localizar la imagen, puede incluir un URL, la carpeta donde se encuentra la
imagen y el nombre.
<img src="C:\Users\HP\Documents\Documentos\Gandhi\HTML/perros.png">
width. El ancho de la imagen dado en pixeles.
height. El alto de la imagen dado en pixeles. Para
mostrar la imagen en su tamaño original, se omiten estos atributos.
border. Aplica un borde a la imagen, 0= nulo.
alt. Permite mostrar una breve descripción de la imagen al pasar el
apuntador sobre la imagen.
Actividad:
1 Copiar el siguiente código en un bloc de notas.
2 Buscar imágenes para la página, guardarlas en la misma carpeta donde guardes el bloc de notas, con
extensión HTML
3 Realizar cambios en el código de manera que la página Web se vea
diferente.
4 Utilizar todas las etiquetas vistas en clases anteriores.
<html>
<head>
<title>
Imágenes en HTML
</title>
</head>
<body>
<img src="fotoMama.jpg"width=300 height=240 border=5 alt “información sobre la imagen”>
<img src="Alumnos.jpg">
<img src="alcatraz.png”>
</body>
</html>
