martes, 26 de enero de 2016

Tercero A y B, imágenes HTML

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>

No hay comentarios.:

Publicar un comentario