Hola, !!
Hoy os traigo un
Tutorial sobre Html, para crear una
Galería de imágenes para mostrar vuestros proyectos, o por ejemplo muy útil para los Blogs sobre DIY o Manualidades. Lo que permite crear esto son las
tablas de Html, en lo que cada celda de la tabla esta representada por una imagen.
Este es el código que necesitamos para crear nuestra galería de imágenes, primero os dejo con el código que tenéis que copiar en la parte html de las paginas de Blogger o en vuestro post.
<table align="
Alineación de la galería"border="
0" cellpadding="
4"><tbody>
<tr>
*/Abrimos fila
<td><a href="
URL_DESTINO" target="_self"><img src="
URL_IMAGEN" alt="" /></a> </td>
*/Añadimos celda/Imagen
<td><a href="
URL_DESTINO" target="_self"><img src="
URL_IMAGEN" alt="" /></a> </td>
*/Añadimos celda/Imagen
</tr>
*/Cerramos Fila
<tr>
*/Abrimos Nueva Fila
<td>
<td><a href="
URL_DESTINO" target="_self"><img src="
URL_IMAGEN" alt="" /></a> </td>
<td><a href="
URL_DESTINO" target="_self"><img src="
URL_IMAGEN" alt="" /></a> </td>
</tr>
*/Cerramos Fila y así sucesivamente para cada nueva fila.
</tbody></table>
A continuación paso a explicar como podéis personalizar este código para que la Galería de Imágenes tenga el aspecto que vosotros queréis y conseguir el numero de filas y columnas que queráis.
*Alineación de la Galeríaa : Aquí deberéis sustituirlo por right, left o center, dependiendo de la alineación que queráis para vuestra galería, si por ejemplo la queréis centrada, pondréis c
enter.
* En "border="0" : El valor cero nos permite eliminar el borde alrededor de las fotos, si la queréis sin marco lo dejaremos a "0". Si por el contrario queréis borde, podéis añadirlo poniendo un valor mayor a cero en función del tamaño de borde que queráis. Si queréis que el borde tenga un color determinado, por ejemplo rojo debéis añadir justo después de border="0" este codigo: bordercolor="red"
* En cellpadding="4" : El numero 4 representa las distancia entre celdas/imágenes, si ponemos 0 no habrá separación entre ellas. Iremos subiendo el valor para conseguir mayor separación entre las celdas.
*<tr> Indica la apertura de una nueva fila y <tr> representa cada celda dentro de esa fila. Por lo que en el código que os muestro conseguiréis una tabla de dos filas y dos columnas.
* URL_DESTINO: La dirección web o el link donde queremos que nos lleve al hacer click sobre esa imagen.
*URL_IMAGEN: Es la url de la imagen que obtendréis subiendo a un alojamiento de imágenes como
Tynipic o
Imageshack. La dirección que necesitáis tiene que acabar en .jpg o en .png.
Si aun así no has quedado claro, tenéis a disposición mi email
abloggingcup@hotmail.com , si os surge cualquier duda mientras montáis el código.
