Algunos sitios web dentro de sus publicaciones integran un cuadro con una imagen y una pequeña descripción en la parte inferior de esta. Esto es ventajoso por que un usuario normal por lo general lo primero que mira no es texto sino contenido gráfico, y que mejor si está acompañado de una pequeña descripción de lo que trata.
Así se sentirá impulsado a leer el artículo completo. Además es una buena práctica SEO, pues estos textos cercanos a las imágenes sirven para los motores de búsqueda de imágenes.
¿Cómo lograrlo?
Con unas simple líneas CSS y HTML podemos lograr añadir textos descriptivos debajo de las imágenes.
Primero el código de estilos, dentro de las etiquetas <head>:
<style type="text/css">
.picture {
background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif;
}
.picture img {
border: 1px solid #CCCCCC;
vertical-align:middle;
margin-bottom: 3px;
}
.right {
margin: 0.5em 0pt 0.5em 0.8em;
float:right;
}
.left {
margin: 0.5em 0.8em 0.5em 0;
float:left;
}
</style>
Ahora dentro del <body> de nuestro documentos html:
<div class="picture left" style="width:220px;"> <img src="marte.jpeg" alt="Planeta Marte" width="210" height="210" /> <br /> Marte, apodado a veces como el Planeta Rojo, es el cuarto planeta del Sistema Solar. </div>
Por supuesto luego de esas líneas puede venir en contenido completo del artículo ó tema que trata la página.
Podemos colocar la imagen a la izquierda ó derecha, como gustemos y se vea mejor. He aquí un ejemplo. ¿Verdad que se ve mas atractiva una página web de esta forma?
No se puede ver el ejemplo … aunque el tip es bueno.
gracias
Gracias por mencionarlo. El enlace estaba apuntado a otro lado. Ya esta corregido.
Buen Tip, excelente ejemplo, sencillo y claro
Saludos