Índice
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á:
Saludods.
Por. : Magnetoxp
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á:
Saludods.
Por. : Magnetoxp
