How to Write Text on an Image in HTML
Web designers typically use editing software to add text to images. However, website owners who wish to add text to their images may not have the funds to buy expensive software or the time to learn the complicated methods of altering images. A website owner can avoid these problems by using HTML to add text to images. Those who learn the applicable HTML code can add text to images without buying software or spending time on complex image editing.
Other People Are Reading
Instructions
-
-
1
Download and open the free NVU web editor. An HTML editor like NVU allows the user to enter either plain text or HTML. The editor then saves pages as an HTML page so that they will display as a Web page. Click "Open," and find an existing HTML page if the user wishes to put the image on an existing page. Click on the "New" button at the top to create a new page for the image.
-
2
Click on "Source" at the bottom to see the HTML source code of the page. Look for the opening and closing body tags. The "<body>" tag is the opening body tag. The "</body>" tag is the closing body tag.
-
-
3
Place the following HTML code between the body tags:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="221" height="300" background="image link here" valign="bottom">
<font size="+1" color="yellow">text here</font></td>
</tr>
</table>Placing the code between the body tags ensures that visitors to a web page will see the image when visiting the page on the Internet.
-
4
Change the width and height in the HTML to the same width and height as the image. Replace the "image link here" text with the link to the image. For example, if the image has a file name of "dogpicture.jpg," type that instead of "image link here." Leave the quotes around the file name. Add text to an image in the "text here" portion of the HTML.
-
5
Click "Save" to save the HTML file. Use the "Normal" tab at the bottom to see how the image will appear on a Web page. Center the text with the Spacebar. Press the Enter key to move the cursor down to the next line. Type additional lines of text as desired.
-
6
Use FileZilla to upload the files. Download the "FileZilla Client" version, and open the software. Log in at the Web host with the domain name, username and password.
-
7
Double-click on a website folder in the right window of FileZilla to open it. Find both the HTML file and the image in the left window, and right-click and select "Upload" to upload them. Ensure that the HTML file and image are in the same directory (folder). Otherwise, the image will not appear on the Web page.
-
1
Tips & Warnings
Change the font size and color to fit the size and color of the image. A visitor may have trouble reading the text if the text color is too similar to the image colors in the background.
Do not use this method when creating avatars for other websites. These sites allow the user to upload an image, but the image will not have the text from the HTML file.
