Text on HTML Images: Do it Yourself
(Page 1 of 4 )
Many people resort to purchasing specific programs to help them add text to HTML images. However, if you understand the basics of HTML and Cascading Style Sheets, this article will show you how to perform this technique yourself.
One of the factors that can help your web page appear higher up in the search engine results page is known as keyword density. A keyword is one of the words a user types into a search engine to look for pages (like yours). Keyword density is basically the number of keywords on your page.
If your keywords are glued to your image, the search engines will not see them. That is a disadvantage to you as far as search engine indexing is concerned. If your keywords are not glued to your image (as I show you in this article), then the search engine will be able to see them. Also, having keywords in an A element (links) benefits the page the A element is pointing to as far as search engines are concerned.
In this article I will show you methods that you can use to put text on pictures. For each method, I will give you the features, advantages, and disadvantages. You need to have basic knowledge of HTML and Cascading Style Sheets in order to understand this article.
The DIV Element
The DIV is a block level element. The DIV element can take many elements. It can take background pictures, background color, text, color (for text), tables, the A element for links, Span elements, and others. The DIV element can be placed anywhere on your web page, just as images can be placed anywhere on your web page. Our main aim here is to have text on an image without using (buying) a tool that will put (glue) the text onto the image. It is good to do this because there are search engine benefits.
To put text on an image using the DIV element, place your DIV element with its required dimensions anywhere on your web page. Make the image (picture) the background image of your DIV element. Then place your text, table, and A element on the DIV element as you would for the BODY element. You can use a table as a layout on your DIV element; using the table, you can then place your text or A element anywhere on your DIV element. The following hypothetical example illustrates this:
<html>
<head>
<style type=”text/css”>
div#ID {width:300px; height:300px; background-image: url(imageName.gif)}
</style>
<head>
<body>
<table>
<tr>
<td><div id=”ID”>
<table>
<tr>
<td>Some Advert Text Line
</td>
</tr>
<tr>
<td><a href="page.htm">Click Here to see Product</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Next: More Elements >>
More HTML Articles
More By Chrysanthus Forcha
