How to add alt text to webs.com

Adding ALT text to webs.com websites.

CSS

Add alt text or title to an image using css

 This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This is an Image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image This text wraps around an image  

 

Add alt text and keep the text wrap

Some sites have text wrapped around an image (see the example above). Adding the standard HTML for ALT and TITLE breaks the wrapping effect.

To overcome this break in the wrapping and still get some alt text attributes into your site, follow these instructions.

Adding ALT to the webs.com CSS (use firefox)

Open a new tab or window in your browser.  (one to allow you to view the source of the page)

 

In firefox,

select the text and image that you wish to add the alt attribute to, like this:

 The selected text and image is red.

Right click on the red shaded image and choose: View Selection Source.

(If you use Chrome, then its right click and choose 'Inspect Element')

 

A new window appears with the selection code in it. (or a cool split screen in Chrome)

 

"<p>This text wraps around an image This text wraps around an image This text wraps 
around an image This text wraps around an image This text wraps around an image This 
text wraps around an image This text wraps around an image This text wraps around an 
image This text wraps around an image This text wraps around an image This text wraps 
around an image <img src="http://add-alt-text-to.webs.com//IMAGE.jpg" 
class="fw_image_freewebs fwSizeProp" style="margin: 8px;" align="right" 
border="0"> This text wraps around an image This text wraps around an image This text 
wraps around an image This text wraps around an image This text wraps around an image 
This text wraps around an image This text wraps around an image This text wraps around 
an image This text wraps around an image This text wraps around an image This text wraps
 around an image This text wraps around an image    This text wraps around an image This
 text wraps around an image This text wraps around an image This text wraps around an 
image This text wraps around an image This text wraps around an image &nbsp;   </p>"

 

I have highlighted the bit of code thats of interest. You will have to find your own in your selection. It will be similar, with a starting < and an ending > and surrounded by your words.

Select the right bit of code

Select the correct part of the code in the "View Selection Source".

In my example its this part:

 

<img src="http://add-alt-text-to.webs.com//IMAGE.jpg"  
Image" class="fw_image_freewebs fwSizeProp" style="margin: 8px;" align="right" 
border="0">

  

Its the bit between the < and the > which describes the image and its positioning

Edit the code

Add the alt="text" to the code you selected here:

 

<img src="http://add-alt-text-to.webs.com//IMAGE.jpg" alt="This is an Image" 
class="fw_image_freewebs fwSizeProp" style="margin: 8px;" align="right" 
border="0">
 
Adding title="floating text" in the same way. 
 
<img src="http://add-alt-text-to.webs.com//IMAGE.jpg" alt="This is an Image" 
title="floating tool tip" class="fw_image_freewebs fwSizeProp" style="margin: 8px;"
 align="right" border="0">
 

Use your new and improved webs.com HTML

Now, follow the instructions here for adding HTML to webs.com images, starting 1/3 of the way down the page at "To the webs SITE BUILDER".

Do not follow the instructions for finding the Custom HTML shown, but add the code you have just edited INSTEAD of the CUSTOM HTML example.

Each image has its unique code (an probably different alt="text"). You need to select the code, copy, edit and paste for each image that has text wrapping. You can still use the original HTML example for images that don't have text wrapping, its your choice.