To create images with description HTML
Have they ever seen the images that appear on the pages of the newspapers?. Some of them contain a small descriptive text in the image foot, what provides little additional information that describes the graph. These small notes on the foot of the image, can be achieved by a little of CSS and really they will remain spectacular, in addition to that it is easy to obtain it. 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.
An important advantage is that it is a question of text, therefore the descriptions are friendly for the search engines, what it can help for the position and in general, to have a better structure CATHEDRAL. To achieve it, it is necessary only to add this to our sheet of styles 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;}: #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; }
Now, it is necessary to place the following code where we wish that the image should be visualized:
-
-
<div class = "picture left" style = "width:278px;"> <img src = "google.gif" width = "276" height = "120" alt = "Google Logo"/> <br/> Image Caption goes here. </div> </div>
And there it is: obviously the parameters as URL of the image, alignment and the size, they can change, depending on the needs of every person.
Route | Digitalis Inspiration
