En este tutorial veremos como desplegar las miniaturas Thumbnails de una galería, utilizando HTML y CSS.
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.
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.
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:
<html>
<head>
<title>Galería de Imagenes Taller Webmaster</title>
</head>
<body>
// contenido
</body>
</html>
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>.
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.
Usuarios que han visto este tema también han visto...
- Usando CSS en tablas
- Personalizando las barras de scroll del navegador en CSS
- Efectos sobre elementos Input
- Unidades y Medidas en CSS
- Estilo en funcion del contexto
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.