There are two advantages of adding image captions in web pages:
1. Stylish and Read Friendly – Your visitors can easily get the context of the image from the small caption without having to read the full story.
2. SEO Friendly – Since captions describe the image in text and are located in close proximity to the image, they could be very effective in getting your images rank well on image search engines.
How to Add Text Captions and Align Images on Web Pages ?
With simple CSS and HTML, you can quickly add text captions to images very similar to BBC or Wikipedia:
Before we get into the code, here’s a snapshot of the end product. The Google logo is aligned to the right of the browser, is enclosed inside a box with borders that also contains a text caption.
Here’s the HTML+CSS code for the above implementation:
Step 1: Add the following CSS code to an external CSS file or to your blog template under the <HEAD> section.
<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>
Step 2: Now insert the following HTML code anywhere in the web page. The process is exactly the same as inserting regular images but we have just enclosed that inside a <DIV> tag.
<div class="picture left" style="width:278px;"> <img src="google.gif" width="276" height="120" alt="Google Logo" /> <br />Image Caption goes here. </div>
In the above example, we add the file google.gif left aligned and the image has dimensions 276×120.
Replace left with right if you want to right align the image box. You’ll also need to modify the style:width of the <DIV> tag such it is equal to image width + 2.
You can also fiddle with the CSS to change the font name, size, border colors, background, margins, etc.
Ref From: http://www.labnol.org/internet/design/add-text-captions-align-images-html-css/2309/
Ref From: http://www.labnol.org/internet/design/add-text-captions-align-images-html-css/2309/
How To Add a Caption to Your Images that Stays with the Image
Here's How:
- Add your image to your Web page. If you have questions about how to do this
- Place a div tag around the image:
<div><img src="URL" alt="alternate text" width="width" height="height" /></div> - Add a style attribute to the div tag:
<div style=""><img src="URL" alt="alternate text" width="width" height="height" /></div> - Set the width of the div to the same width as the image, with the width style property
<div style="width:image width px;"><img src="URL" alt="alternate text" width="width" height="height" /></div> - I like my captions to be slightly smaller than the surrounding text, so add a font-size property to your div style:
<div style="width:image width px; font-size:80%;"><img src="URL" alt="alternate text" width="width" height="height" /></div> - Captions look best if they are centered below the image, so add a text-aliqn property to your style attribute:
<div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" /></div> - Finally, you'll want a little more space between the image and the caption, so you'll need to add a style attribute to your image with a Padding-bottom style propety on it:
<div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" style="padding-bottom:0.5em;" /></div> - Then add your text caption directly below the image:
<div style="width:image width px; font-size:80%; text-align:center;"><img src="URL" alt="alternate text" width="width" height="height" style="padding-bottom:0.5em;" />This is my caption</div> - Upload your Web page to your server and test it in a browser.
No comments:
Post a Comment
Thank you for visit us