En esta lección se aprenderá sobre
Imágenes
Existen 2 tipos de imágenes que la gran mayoría de los navegadores o "browsers" aceptan:
- GIF que simplemente tiene un extensión .gif
- JPG que tiene un extensión .jpg.
Cuando decidas poner imágenes en tus páginas tienes que especificar la extensión siempre. Por ejemplo: la imagen portada.jpg no es la misma que portada.gif y absolutamente no es lo misma simplemente portada.
Bueno y ¿Cómo se ponen estas imagenes?
Las imágenes se ponen al través de la etiqueta <img> (image).
Pero esto no es suficiente con solo escribir <img>, tienes que dar el nombre de la imagen, esto lo puedes hacer mediante el uso de src, por ejemplo:
Se tiene la imagen:llamada ok.gif
La forma de llamar esta imagen es:
<body bgcolor="#000000"><img src="ok.gif"> </body>
Al actualizar la página en el browser se obtiene:
 |
|
Si quieres que tus páginas sean vistas rápidamente debes de darles a tus imágenes el atributo del tamaño por ejemplo:
<body bgcolor="#000000">
<img src="ok.gif" width=74 height=92>
</body>
<img src="ok.gif" width=74 height=92>
</body>
width indica el ancho de la imagen y height la altura
También es muy importante que le digas a tu navegador en donde se localiza la imagen que deseas mostrar, la siguiente tabla te lo explicará:
| src="ok.gif" quiere decir que la imagen ok.gif esta en el mismo directorio o folder que el documento html. |
| src="imagen/ok.gif" quiere decir que la imagen ok.gif esta en el subdirectorio imagen. |
| src="../ok.gif" quiere decir que la imagen ok.gif esta un directorio arriba del documento html. |
Regresemos al ejemplo anterior:
<body bgcolor="#000000">
<img src="ok.gif" width=74 height=92>
</body>
<img src="ok.gif" width=74 height=92>
</body>
El ejemplo dice que la imágen ok.gif se localiza en la misma ruta que la página Web y que va a tener un ancho de 74 y una altura de 92 (tamaño original).
Pero ¿que ocurriría si se cambia las dimensiones de la imagen?
Puede ocurrir que la imagen se amplifique, se reduzca o se distorsione. A continuación te lo explicaré con 2 ejemplos.
Imagen ok.gif amplificada en el atributo WIDTH:
<body color="#000000">
<img src="ok.gif" WIDTH=400 height=92>
</body>
<img src="ok.gif" WIDTH=400 height=92>
</body>
|
|
Imagen OK. GIF reducida en los atributos WIDTH y HEIGHT:
<body color="#000000">
<img src="ok.gif" WIDTH=20 height=41>
</body>
<img src="ok.gif" WIDTH=20 height=41>
</body>
|
|
Cuando trabajes con imágenes recuerda de que éstas tienen una gran cantidad de información, trata de usar imágenes pequeñas en "Kb". Si tienes imagenes muy grandes recortalas o utiliza menos colores, con esto puedes reducir su tamaño considerablemente.
Algo que esta de moda últimamente es el uso de thumbnails, ésto es, se copia una imagen y se le reduce en tamaño, de la imágen reducida se hace un enlace a la imagen que no esta modificada, por ejemplo:
Se tienen las siguientes imágenes:
 |  |  |
Selecciona cualquiera para ver la versión realNota: los enlaces se tratarán con mayor detalle en la lección 5",
No hay comentarios:
Publicar un comentario