HTML
  Home arrow HTML arrow Text on HTML Images: Do it Yourself
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Text on HTML Images: Do it Yourself
By: Chrysanthus Forcha
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 4 stars4 stars4 stars4 stars4 stars / 3
    2008-05-14

    Table of Contents:
  • Text on HTML Images: Do it Yourself
  • More Elements
  • PRE and Gradient
  • Image-Map Method

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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>

    More HTML Articles
    More By Chrysanthus Forcha


       · If you find HTML and CSS easy, then go ahead and gain more flexibility by putting...
     

    HTML ARTICLES

    - Concluding a Menu for All Browsers
    - A Vertical Menu for All Browsers
    - Downloading Long HTML Pages with ACP
    - Background Images for a Menu for All Browsers
    - React and ToChoose Functions for a Menu for ...
    - Fast FAQ Session with ACP
    - Functions for a Menu for All Browsers
    - Browser Compatibility Modifications for a We...
    - Building a Drop-Down Menu with Nested HTML L...
    - Table Attributes for a Menu for all Browsers
    - Modifying a Web Page Calendar
    - Styling Elements of Nested HTML Lists
    - Configuring Tables for a Menu for All Browse...
    - Showing a Full Year with a Web Page Calendar
    - Designing with Nested HTML Lists







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway
    Stay green...Green IT