Home arrow HTML arrow Text on HTML Images: Do it Yourself
HTML

Text on HTML Images: Do it Yourself


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.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
May 14, 2008
TABLE OF CONTENTS:
  1. · Text on HTML Images: Do it Yourself
  2. · More Elements
  3. · PRE and Gradient
  4. · Image-Map Method

print this article
SEARCH DEVARTICLES

Text on HTML Images: Do it Yourself
(Page 1 of 4 )

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>


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials