Facebook Twitter Youtube Flicker Google + Pinterest Artedinamico
Inicio | Staff | Servicios | Publicidad | Cursos presenciales | Nos recomiendan | Registrese | Contáctenos |


 
 

Strict Standards: mktime(): You should be using the time() function instead in /home/portalad/public_html/portal/wlib/wsecurityimage.inc.php on line 10
Tip y trucos

GALERIA DE IMAGENES XHTML CSS

Desplegar los Thumbnails con HTML y CSS

Tutorial por Jorge Oyhenard, elQuique de Foro Creativo

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.

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:

<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>.

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í:

<html>
<head>
<title>Galería de Imagenes Taller Webmaster</title>
</head>
<body>

<div id="contenido">
<h1>Galeria de Imagenes Taller Webmaster</h1>
<ul>
<li><img src="reducciones/imagen1.jpg" /></li>
<li><img src="reducciones/imagen2.jpg" /></li>
<li><img src="reducciones/imagen3.jpg" /></li>
<li><img src="reducciones/imagen4.jpg" /></li>
<li><img src="reducciones/imagen5.jpg" /></li>
<li><img src="reducciones/imagen6.jpg" /></li>
<li><img src="reducciones/imagen7.jpg" /></li>
<li><img src="reducciones/imagen8.jpg" /></li>
<li><img src="reducciones/imagen9.jpg" /></li>
<li><img src="reducciones/imagen10.jpg" /></li>
</ul>
<p>Imagenes de la Actividad de Fotomanipulacion en <a href="http://www.forocreativo.net/" target="_blank">Foro Creativo</a></p>
</div>

</body>
</html>

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

http://www.tallerwebmaster.com/Tutorial-Galeria-de-Imagenes-xHTML-CSS-c-128.html
Fuente: http://www.tallerwebmaster.com/Tutorial-Galeria-de-Imagenes-xHTML-CSS-c-128.html
Regresar a Tips y trucos
Publicado en: 2008-07-21 / Categoría: css / Estadísticas: [ 3755 Lecturas ] / Total comentarios: 0
 
Comparte este tips / truco
Otros tips / trucos de: css
PSEUDOCLASES
Diseño de Web Responsive
HTML5 y CSS3, Crear Animacion de Objetos
ESTILOS CSS
CÓMO REALIZAR CUADROS CON LÍNEA Y TEXTO DENTRO CON
 
cOMENTArios:

 

colabora y participa en nuestra comunidad

Si tienes un tips / truco que desea compartir y que crees que es de ayuda para nuestra comunidad por favor haz click en el botón y envíanos un correo con la información e imagenes para publicar.

 
 
AutenticaciÓN
Usuario: "E-mail"
Clave

Olvidó su clave?

Desea registrarse?
 
 
 
 
 
Inicio | Staff | Servicios | Publicidad | Cursos presenciales | Nos recomiendan | Registrese | Contáctenos |


© Copyright Artedinamico.com 2001 - 2013. Todos los Derechos Reservados
Teléfono: (57)+(4) + 444 1001  - Medellín - Colombia - Suramérica
Hosting, diseño y desarrollo de este portal: artedinamico.net
Para contratar los servicios de Artedinamico en: Diseño web, desarrollo web, tiendas virtuales, e-commerce,
posicionamiento web, animación y multimedia, gestores de contenidos, hosting y dominios, cms, diseño gráfico click aquí

Algunas de las imágenes utilizas en este portal son de shutterstock.com y siempre que se usan se reseña su autoría, por lo tanto se prohíbe la distribución y utilización.

Políticas de protección de datos personales | Aviso de privacidad