Introduccion
Las imágenes son uno de los elementos más importantes de las páginas web. De hecho, prácticamente todas las páginas web contienen alguna imagen y la mayoría incluyen decenas de imágenes.
Objetivos
1. Conocer como insertar imagenes a nuestras paginas Web.
2. Conocer como cambiar el tamano de las imagenes.
3. Conocer como aplicar borde a las imagenes.
Insertar imagen
Para insertar una imagen a nuestra pagina Web, hacemos uso de la etiqueta <img> y su atributo "src". Donde escribiremos el nombre de la imagen y su extension.
Ejemplo:
<img src="perrito.jpg"/>
HTML no impone ninguna restricción sobre el formato gráfico que se puede utilizar en las imágenes, por lo que en principio la etiqueta <img> puede incluir cualquier formato gráfico existente. Sin embargo, si la imagen utiliza un formato poco habitual, todos o algunos navegadores no serán capaces de mostrar esa imagen.
La recomendación es utilizar uno de los tres siguientes formatos gráficos que entienden todos los navegadores modernos: GIF, JPG y PNG. El formato PNG presenta el inconveniente de que los navegadores obsoletos como Internet Explorer 6 no muestran correctamente las imágenes con transparencias de 24 bits.
Cambiar tamano
En ocasiones las imagenes son muy grandes y se desean mostrar mas pequeñas, para esto haremos uso de sus atributos "width" (para manipular el ancho) y "height" (para manipular el alto).
Ejemplos:
<h1> Original </h1>
<img src="perrito.jpg"/>
<h1> Reducido </h1>
<img src="perrito.jpg" width="100" height="150"/>
Si el valor del atributo "width" o "height" se indica mediante un número entero, el navegador supone que hace referencia a la unidad de medida píxel. Por tanto, en este ejemplo, la segunda imagen se muestra con una anchura de 100 píxel y una altura de 150 píxel.
Colocar borde
El borde es una linea alrededor de la imagen. Si deseamos mostrar esta linea haremos uso del atributo "border".
Ejemplo:
<img src="perrito.jpg" border="1"/>
Entre mas grande sea el valor del atributo, mas grueso sera el borde de la imagen.
Actividad
Crea una pagina Web con el siguiente codigo y comprueba que las imagenes con sus atributos se muestran correctamente.
<html>
<head>
<title> Uso de Imagenes </title>
</head>
<body>
<h1>Imagen</h1>
<img src="gatito.jpg"/>
<h1>Imagen Modificada de Tamaño</h1>
<img src="gatito.jpg" width="150" height="120"/>
<h1>Imagen con Borde</h1>
<img src="gatito.jpg" border="3"/>
</body>
</html>
me pueden poner un ejemplo de como
ResponderEliminarinsertale a mi pagina web una imagen de fondo?
Saludos!
ResponderEliminarHemos atendido tu solicitud y ya esta listo el ejemplo:
http://paginaswebconhtml.blogspot.com/2010/09/insertar-imagen-de-fondo-las-paginas.html