¿Alguna vez han visto las imágenes que aparecen en las páginas de los periódicos?. Algunas de ellas contienen un pequeño texto descriptivo en el pie de imagen, lo que proporciona un poco de información adicional que describe el gráfico. Estas pequeñas notas al pie de la imagen, se pueden lograr con un poco de CSS y realmente quedarán espectaculares, además de que es fácil conseguirlo.
Una ventaja importante es que se trata de texto, por lo que las descripciones son amigables para los motores de búsqueda, lo que puede ayudar para el posicionamiento y en general, para tener una mejor estructura SEO. Para lograrlo, tan sólo hay que agregar esto a nuestra hoja de estilos 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; }
Ahora, hay que colocar el siguiente código en donde deseamos que se visualice la imagen:
-
-
<div class="picture left" style="width:278px;"> <img src="google.gif" width="276" height="120" alt="Google Logo" /> <br />Image Caption goes here. </div>
Y ahí está: obviamente los parámetros como URL de la imagen, alineación y el tamaño, se pueden cambiar, dependiendo de las necesidades de cada persona.
Vía | Digital Inspiration
