Publicidad
Galeria de Imagenes xHTML CSS
Desplegar los Thumbnails con HTML y CSS
Tutorial por Jorge Oyhenard, elQuique
En este tutorial veremos como desplegar las miniaturas Thumbnails de una galería, utilizando HTML y CSS
Preparando las miniaturas de imágenes
Para este tutorial, tendremos en cuenta un archivo HTML que hemos llamado galeria.html, y una carpeta llamada reducciones, que contiene las miniaturas de las imágenes de nuestra galería. Las reducciones pueden crearlas con Photoshop CS3 o una versión anterior, utilizando este tutorial: Crear Thumbnails con Acciones en Photoshop CS3.
Convenientemente tienen el nombre imagen1.jpg, 2, 3, 4 al 10, pero pueden tener cualquier nombre, y también podrían ser GIF, PNG, o como estas JPG.
Este tutorial lo podrás realizar en cualquier computadora con configuración actual, si no cuentas con uno o quieres cambiarlo publica tu computadora aquí.
Creando la estructura xHTML de nuestra Galería
Por ser una galería en la web, utilizaremos HTML para mostrarla, y en mi caso prefiero utilizar xHTML, que es una versión mejorada de HTML.
La estructura base de un documento xHTML es la siguiente:
Todo documento comienza con <html> y termina con </html>, debe contener una cabecera que comienza con <head> y termina con </head>, donde se declara generalmente el titulo de la página entre <title> y </title>. En la cabecera de la página, veremos mas adelante que pueden ir mas elementos. Y otra parte fundamental es la zona del contenido de la página propiamente dicho, que comienza con <body> y termina con </body>.
Desplegando el contenido de nuestra página
Es muy común ver materiales antiguos donde las paginas webs se realizaban en base a Tablas HTML, de hecho muchos aseguran que es mas sencillo hacerlo así, y programas como FrontPage (un editor de cartas para secretarias), incitan a la utilización de Tablas. Francamente es mucho mas sencillo para el que arma las paginas, prolijo en cuanto a la organización, limpio en cuanto al código HTML, y liviano para cargar la pagina, NO UTILIZAR TABLAS. Y luego de acostumbrarnos es mas rapido, por eso esta galería será CERO TABLAS (o TableLess).
La etiqueta HTML que sirve de contenedor de diferentes zonas de nuestro diseño es <div>, salvando la distancia para los malacostumbrados el div sustituye a la Tabla, mejorando que no se precisa el mundo de filas, columnas, celditas y esas locuras.
Para presentar un texto destacado, utilizaremos <h1> para la cabecera principal, y si hubiera cabeceras de menor importancia podemos usar desde <h1>... al ... </h6>.
Para desplegar una lista de elementos podemos utilizar <ul> que permite representar una lista desordenada (unsorted list = u.l.), ya que existe otra que es la que presenta elementos numerados (o con letras, o números romanos, etc), llamada <ol> por lista ordenada (order list = o.l.). Las listas estan compuestas por diferentes elementos que se representa con <li>. Y como toda etiqueta (o tag), en xHTML debe abrir y cerrarse, por tanto un <li> cierra con </li>, y los <ul> con </ul>, etc.
Para mostrar una imagen utilizamos la etiqueta <img /> que como no tiene una etiqueta de cierre, debe terminar con />, como toda etiqueta que no tenga contenido textual o elementos internos.
Esta es una de las diferencias de HTML y xHTML, si o si nos obliga a cerrar toda etiqueta abierta, a simple vista es mas trabajo, pero al obligarnos a ser prolijos, nuestras paginas se ven mejor en FireFox, Internet Explorer, Opera, un Móvil, etc., por la sencilla razón de que si falta algo, cada navegador "inventa" de manera diferente una solución, y siendo prolijos, nosotros tenemos el control.
Otra de las diferencias es que toda etiqueta (o tag), se debe escribir en minúsculas en xHTML, ya que en HTML podíamos ver y escribir cualquier cosa, también otro tema bastante desprolijo.
Luego en esta primer parte utilizaremos la etiqueta <p>, que termina con </p>, y se utiliza para párrafos de texto, y por ultimo la etiqueta <a>, que termina con </a>, para mostrar hipervínculos o links a otras paginas.
Saliendo de tanta teoría, vamos directamente al código final de despliegue de nuestras imagenes, que quedaría así:
Todo nuestro despliegue de contenido esta dentro de un <div> que le hemos llamado "contenido", esto sera útil mas adelante, por ahora saber que id, nos permite darle un nombre que identifique un elemento de nuestro xHTML, ese nombre pudo ser cualquiera y no se pueden usar símbolos, de hecho es mejor usar letras únicamente.
Luego hemos indicado un cabezal que dice "Galeria de Imagenes Taller Webmaster", que se ha colocado dentro de las etiquetas <h1>, luego presentamos las imagenes en una lista desordenada, veamos que comienza con <ul>, luego hay un elemento <li> por cada imagen, que son 10, y en esa lista se muestra obviamente la imagen jpg que tenemos en nuestra carpeta "reducciones".
Para mostrar la imagen, usamos la etiqueta <img>, donde indicamos en la propiedad src (source = fuente, a mi me gusta llamarle origen), el nombre del archivo.
Finalmente hemos agregado un parrafo de texto, que tiene un hipervínculo a Foro Creativo, indicando la url en la propiedad href, y el target _blank indica que se debe abrir ese link en una nueva ventana.
Podemos ver el resultado final acá: Galería de Imagenes CSS
En la siguiente entrega veremos como aplicar diseño a nuestra galería.
52884
Comentarios de Galeria de Imagenes xHTML CSS
↑ Tutorial