HTML es un lenguaje muy versátil que permite a los usuarios una gran cantidad de opciones de configuración. Uno de los aspectos más importantes que vamos a tratar en este curso de HTML y CSS es la forma de utilizar las imágenes en un documento HTML y cómo se puede configurar el visitando de estas cuando otra persona visualiza la página con el navegador.
Aunque se puede pensar que lo de las imágenes es un avance relativamente reciente, la verdad es que los navegadores comenzaron a soportar imágenes (en concreto los formatos GIF y JPG) mucho antes de que la banda ancha se convirtiese en algo muy común. Primero Mosaic y después Netscape, fueron los primeros navegadores con la capacidad de poder mostrar imágenes. Que sirva como dato, Mosaic se considera uno de los navegadores más importantes de Internet, que dio lugar al nacimiento de navegadores que han sido tan importantes como el anteriormente citado Netscape y Firefox.
En esta entrega del curso de HTML y CSS vamos a tratar la inserción de imágenes como fondo, la utilización de imágenes como parte del documentos HTML, y cómo se puede configurar la apariencia de esta gracias a los argumentos que poseen.
Imágenes como fondo
Hasta este momento en el curso hemos podido ver como el fondo sobre el que se presentaban los objeto era blanco. Hoy vamos a dar un paso más allá y vamos a configurar el fondo para que este posee una imagen que nosotros escojamos.
Vamos con el código base que se utiliza en todas las páginas:
Imagen de fondo
Con esto poseemos una página en blanco, pero lo que queremos es que al menos nos muestre una imagen como fondo. Para eso deberemos añadir en la etiqueta
lo siguiente:El resultado final sería este:
Imagen de fondo
Hay que tener en cuenta que la imagen que utilicemos ha de estar al menos en la misma carpeta en donde se encuentra nuestra página HTML. Si se encuentra en una subcarpeta que está en la misma ubicación que la página HTML deberemos hacer mención a esta imagen de la siguiente forma:
En el caso de querer utilizar una imagen que esté alojada en internet solo es necesario especificar la URL completa de la imagen y aparecerá como fondo.
Imágenes como parte del documento
Para insertar una imagen en el cuerpo del documento es necesario utilizar la siguiente sentencia:
Con esta imagen lo que vamos a hacer es que aparezca una imagen en el lugar donde se encuentra la etiqueta. Evidentemente no queremos solo esto, sino que la imagen se encuentra en la posición que nosotros queremos.
Con el argumento align podremos elegir cuál es la ubicación de nuestra imagen recurriendo a los valores: left, right, top, middle, bottom.
Ejemplo de utilización:
Atributos alt, width, height y border
Todos los atributos que vamos a tratar a continuación se utilizan de igual forma que a align, y se pueden utilizar todos los que se necesiten al mismo tiempo. El atributo alt hace referencia a un texto alternativo que puede ser incluido en la imagen y que será mostrado cuando el usuario pase por encima de la imagen el puntero del ratón. En el caso de width y height lo que se indica es la anchura y al altura con la que se mostrará la imagen. Si estos no se encuentran presentes, la imagen se muestra con su tamaño real. Se trata de porcentaje, por lo que si indicamos para width un valor 90 y height un 80, quiere decir que se mostrará la imagen con un valor de anchura que será el 90% de reo y de altura el 80%. En el caso de border lo que indica es el valor del grosor del marco de la imagen. Con valor 0 o este argumento omitido, la imagen carece de borde. Para valores positivos mayores que 0 el número representa el grosor de este.
Hasta aquí la entrega de hoy. En la próxima entrega daremos forma a nuestro sitio web y comenzaremos a enlazar contenidos de diferentes páginas que lo forman. Esto supone que hablaremos de todo lo relacionado con los enlaces.
Recuerda que puedes consultar las entregas anteriores del curso en el índice.
