Insertar imagenes

Como insertar una imagen como fondo de la pagina

Para insertar la imagen de fondo en la pagina web, debemos utilizar el atributo background en la etiqueta body.

<body background="fondo.jpg">

El texto que tenemos entre comillas me indica el nombre de la imagen que ya tenemos guardada en la carpeta donde estamos creando la pagina web o la ruta donde se encuentra guardada la imagen, que puede estar ubicada en otro archivo o carpeta del pc, o en Internet.

Debemos tener en cuenta si el nombre de la imagen esta en mayusculas o minisculas y la extension con la cual se encuentra guardada.

Este es el codigo fuente de una pagina con fondo:


<html>
<head>
  <title>imagen fondo</title>

</head>
<body background="imagen.jpg">
<br>
<br>
<br>
<br>
<font color="red" size="7"><b>Esta es la imagen de fondo</b>.</font><br>

</body>
</html>

Observar ejemplo.

Como insertar una imagen a la pagina

Para insertar una imagen en una pagina web se utiliza la etiqueta <img>, la cual contiene los siguientes atributos:

src=""      Este atributo se utiliza para indicar la direccion de la imagen.

alt=""      Es destinado para mostrar un texto alusivo a la imagen cuando, esta no se muestra. 

width=""    Es utilizado para indicar el ancho de la imagen,en pixeles o porcentaje.

height=""   Al igual que el anterior este me indica la altura.

<html>
<head>
<title>muestra de imagen</title>
</head>
<body bgcolor="#ffddaa">
<center><h1>Imagen en un documento.</h1></center><br><br>
<font color="black" size="+1">A continuacion mostraremos la imagen de fondo que fue utilizada en el anterior ejemplo pero ahora modificaremos su tamaño, y se mostrara como objeto de la pagina web. </font><br>
<br>
<img src="colombia1.jpeg" width="80%" height="80%" border="3" alt="Esta es una imagen en la cual encontramos la bandera de colombia.">

</body>
</html>

Observar

Tambien es posible insertar imagenes animadas o mas conocidas como gif animados, estos gif animados nos permite darle vida a nuestra pagina ya que son una serie de imagenes compiladas en un solo archivo, el programa que nos permite crear este tipo de imagenes es le "Gif Animator" que corre bajo Window, el funcionamiento es el siguiente:
Contamos con las siguientes imagenes gif:

Si superponemos cada una de las imagenes con una velocidad baja veremos el siguiente resultado:

Ahora si aumentamos la velocidad vemos:

Claro esta que para modificar la velocidad y la forma de ubicar la secuencia de imagenes se realiza por medio de una aplicacion de animacion como ejemplos: Gif animator, Flash,3D max,ultima version de Gimp y muchos mas, siendo los mas utilizados;

Gif animator, por su sencilles y poco peso.
Flash, por la cantidad de herramientas que maneja y la posibilidad de elegir el tipo de formato.

El programa gif animator es el siguiente:




TALLER




* De acuerdo con lo anterior elabore una pagina que tenga como imagen de fondo el archivo
  capitan vinilo.jpg, que se encuentra en archivo:
  "/home/corpor/Desktop/Nueva carpeta/capitan vinilo.jpg".

* En el cuerpo insertar la imagen circulo.gif a la mitad tanto de alto como de ancho,
  que se encuentra en el archivo:
  "/home/corpor/Desktop/Nueva carpeta/circulo.gif"

* Enseguida de esta imagen imsertamos la anterior imagen pero ahora con su tamaño original.

inicio