¿A quién no le gustaría mostrar sus imágenes en Internet ? Gran parte de la potencia del HTML se basa en la posibilidad de insertar imágenes en los documentos. Nuestras páginas adquieren un aspecto visual atractivo, y se convierten en una potente herramienta para transmitir y comunicar ideas.

Aunque existen varios formatos de imágenes, los más utilizados para el Web son:

• .GIF (Graphics Interchange Format). Este formato se caracteriza por limitar la profundidad del color a 256 colores y poseer un sistema de compresión rudimentario, que es efectivo únicamente cuando los colores de la imagen son planos (sin existencia de múltiples transiciones de color). Por tal motivo, es el formato ideal para iconos, diagramas y gráficas.
• .JPG (Joint Photographic Experts Group). Surge con la necesidad de crear un formato de almacenamiento de imágenes con calidad similar a la de una fotografía y con un alto grado de compresión, este formato soporta 16 millones de colores y es ideal para imágenes con multitud de colores, como fotografías.
• .PNG (Portable Networks Graphic). Es un formato gráfico que está basado en un algoritmo de compresión sin pérdidas, y fue desarrollado para resolver las deficiencias del GIF, principalmente en cuanto a profundidad de color. Una de las ventajas de PNG es, independientemente de la profundidad de color que se use, la compresión permite archivos de muy bajo peso sin pérdida de calidad.

Para insertar una imagen en el documento se utiliza la etiqueta

Observa que ésta etiqueta no lleva etiqueta de cierre.

El atributo src debe indicar la dirección en la que se encuentra la imagen (URL) y el nombre de la imagen; deben incluirse escritos entre comillas para que el navegador pueda desplegar la imagen.

Ejemplo:

Si en el archivo html deseas insertar una imagen localizada en el subdirectorio imagenes, debes escribir su ubicación completa, y además, alojar este subdirectorio en la misma ruta en la que se localizan los archivos html.

Por lo anterior, crea un directorio especial para las imágenes que vas a utilizar en tus páginas web: C:\paginasweb\imagenes. En la carpeta imágenes descarga el banco de imágenes que te proporcionamos, da clic aquí.

Tu directorio quedará así:

Autoevaluación

Observa cómo se insertan archivo de imagenes en la estructura básica de la página web y su visualización con el navegador.

Sigue los pasos que a continuación se indican para que diseñes tu primera página web.

1. Crea una carpeta con el nombre paginasweb en el directorio raíz de tu computadora para que allí guardes todas las páginas web que elabores.

   

2. Accede al bloc de notas, desde el escritorio de la pantalla de tu computadora, en la parte inferior izquierda, escribe bloc de notas y da clic.

   

3. Al abrir el Bloc de notas se despliega su pantalla con el cursor vertical parpadeando, en espera de que escribas las etiquetas correspondientes a tu primera página Web:

   

4. Escribe el siguiente código:

   

5. Guarda o salva en tu carpeta paginasweb el código que acabas de escribir con el nombre imagenpaisaje.html siguiendo la ruta establecida en el bloc de notas: Archivo/Guardar como, como se indica en la siguiente pantalla:

   

   Nota: es importante recordar que los nombres de archivos deben escribirse con minúsculas, sin acentos, sin espacios en blanco, sin caracteres especiales y siempre asigna manualmente la extensión html para que el navegador Web pueda reconocer al archivo como página Web.

6. Ahora accede al contenido de la carpeta paginasweb y podrás ver que el archivo imagenpaisaje.html que acabas de salvar tiene asociado el icono del explorador que hayas predefinido como principal (Netscape, Firefox, Explorer, etc.). Esto significa que el navegador Web ya lo puede reconocer.

   

7. Haz doble clic en el archivo imagenpaisaje.html y observa cómo el navegador despliega la pantalla:

   

8. Ahora, cierra el navegador haciendo clic en el icono localizado en el ángulo superior derecho de la pantalla.