Imágenes y fondos de una página web

Con el auge de Internet surgió el protocolo (HTTP: Protocolo de Transferencia de Hipertexto) que permite la estandarización de los formatos gráficos en la Internet, estableciendo como base los archivos gif (archivo de intercambio gráfico) y jpg (formato de archivo gráfico profesional), ambos poseen la característica de ser de un tamaño pequeño.

Un elemento indispensable en el ambiente de multimedia corresponde a las imágenes, permite engrandecer la apariencia de las páginas web, además de servir como fondo de la página, mejorando notablemente el diseño.

En el presente documento se abarca como insertar una imagen en una página web y los diferentes atributos que la acompañan, mediante etiquetas html y Dreamweaver CS6, además colocar una imagen como fondo de una página web, el procedimiento es elaborado por medio de etiquetas html y hoja de estilos en cascada.

Insertar imágenes en un documento, por medio de etiquetas html

Se explica el funcionamiento de la etiqueta <img>. El atributo más importante es src. El atributo src (source) indica el nombre o URL de la imagen que se desea incluir en línea, escrito entre comillas. La ruta del archivo sigue las reglas del direccionamiento absoluto o relativo. Así, para un archivo jpg llamado 5.9.2.jpg, que se encuentra en el mismo directorio que la página, se usa la siguiente etiqueta:

<img src="5.9.2.jpg">

Sí, el archivo imagen se encuentra en un directorio por encima del actual, la etiqueta es:

<img src="../5.9.2.jpg">

Para centrar la imagen en la página web hay que agregar la etiqueta de párrafo y su atributo de align con el valor de center, como se muestra enseguida:

En la figura 20 se menciona cada elemento y atributos en la vista código al insertar una imagen:

Figura 20. Sintaxis de la etiqueta para insertar una imagen en una página web.

Existe otro parámetro title que sirve para indicar el texto alternativo que se desea que aparezca cuando se coloca el puntero sobre la imagen.

Tipos de imágenes que se trabajan en Internet

Actividad de  aprendizaje 3

Manejo de  imágenes en   una  página web

Es importante dentro del diseño de una página web insertar una imagen relacionada con el contenido del tema, actualmente existen dos formatos de archivos gráficos que se emplean en Internet: jpg e imágenes gif, que son idóneas para ser utilizadas por su tamaño pequeño. En este tema se va a aprender a insertar imágenes a través de las etiquetas del lenguaje html y Dreamweaver CS6.

Actividad de  aprendizaje 3 parte 1

Insertar una imagen empleando etiquetas html

En el video 46 se describe el procedimiento para la inserción de una  imagen (portada.jpg) dentro del archivo portada.htm por medio de etiquetas html y en la vista código de Dreamweaver.

Video 46. Insertar una imagen al archivo portada.htm e indice.htm empleando etiquetas html.

A continuación se describe en el archivo PDF, el procedimiento para la inserción de una  imagen (portada.jpg) dentro del archivo portada.htm por medio de etiquetas html, así como, la inserción de la imagen (indice.jpg) dentro del archivo indice.htm

Insertar una imagen en el archivo portada.htm e indice.htm empleando etiquetas html

Actividad de  aprendizaje 3 parte 2

Insertar una imagen empleando el software Dreamweaver CS6

Continuando con la actividad de aprendizaje para el uso de imágenes dentro de una página web, se describe el procedimiento para insertar una  imagen  a cada uno de los seis archivos de las  especialidades, empleando  la  vista diseño en Dreamweaver CS6. En la tabla 3 se muestra el nombre de la imagen que fue preparada previamente para ser incrustada en su respectivo archivo htm

Tabla 3. Relación de la imagen a insertar en cada especialidad.

Visualiza el video 47 e iniciar con la especialidad, abrir el archivo aeronautica.htm creado previamente, en Dreamweaver CS6 en vista diseño e insertar la imagen correspondiente.

Video 47. Insertar una imagen al archivo aeronautica.htm empleando Dreamweaver CS6.

Insertar una imagen en el archivo aeronautica.htm empleando el software de Dreamweaver CS6

Una vez aprendido el procedimiento de insertar una imagen empleando el método de arrastrar y soltar a través de Dreamweaver CS6. Proceder a insertar una imagen correspondiente a cada taller de la unidad académica.

Insertar una imagen en las otras especialidades empleando el software de Dreamweaver CS6

Actividad de  aprendizaje 3 parte 3

Insertar una imagen como fondo de una página, utilizando etiquetas html

Un aspecto importante para el diseño de un archivo htm, es insertar una imagen como fondo de la página web, para ello, deben considerarse varios factores: el formato del archivo gráfico (jpg o gif), el tamaño del archivo y las dimensiones de la imagen a colocar como fondo de la página web, es decir, trabajar para usuarios con pantallas de una resolución 1024 x 768 píxeles.

En el video 48 se describe el procedimiento para colocar  una  imagen (fondopagina.jpg) preparada previamente, en cada uno de los archivos portada.htm, indice.htm y presentacion.htm por medio de etiquetas html.

Video 48. Insertar una imagen de fondo en el archivo portada.htm empleando etiquetas html.

Insertar una imagen como fondo de página en los archivos portada.htm, indice.htm y presentacion.htm empleando etiquetas html

Actividad de  aprendizaje 3 parte 4

Insertar una imagen como fondo a través de una hoja de estilo en cascada

Hoy en día existe otra forma de colocar una imagen como fondo de una página web, además de definir propiedades utilizando hoja de estilos en cascada. A continuación se describe como colocar  una  imagen (fondopagina.jpg) como fondo de cada uno de los archivos  de los  talleres de la  escuela, empleando hojas de estilos en  cascada en vista diseño de Dreamweaver CS6 (Deitel, Deitel & Deitel, 2014, pp. 106 - 110).

En el video 49 se describe el procedimiento para colocar la imagen (fondopagina.jgp) en la especialidad de técnico en aeronáutica de la unidad académica, por medio de vista diseño en Dreamweaver CS6.

Video 49. Insertar una imagen de fondo en el archivo aeronautica.htm empleando hoja de estilo en cascada CSS.

Insertar una imagen como fondo de página a los archivos de los talleres empleando hojas de estilo en cascada