how to add picutres taken from the help page

Adding Pictures to Your Entry

Many diarists like to add pictures to their diary entries, to bring interest and color to them. Like most other things with writing entries, how you do it depends on whether you are using the WYSIWYG editor.

However, the first step is to make the picture available on the Internet, where your diary pages can find it. A picture that is stored on your computer can not be posted in your diary. For a picture to be posted in your diary, you must first store it on an Internet server, and then link to it in your entry.

For instance, your picture may be stored on your own personal web page with your ISP, or you may use a photo service like Yahoo! Pictures or Snapfish. Once your photos are stored on an Internet server or webpage, you can then link them into your diary entry.

Most important, you will need to know the Internet address, or URL, where your picture can be found. For instance, the picture that Open Diary uses for its logo has a URL of http://www.opendiary.com/images/odlogo.gif. You can test the URL of your picture by typing it directly into the address bar of your web browser. If the picture displays in the browser, you have the correct address. Please note that your URL must include the http:// part!

Please remember: if you insert a picture into your diary, and then remove it from the server or change its name, it will no longer display in your diary.

Once you know the URL for your picture, you are ready to put the picture in a diary entry!

 

Inserting a picture with the WYSIWYG editor:

Place your cursor in the spot where you want your image to appear in your entry, and click the Insert Image button on the toolbar:

A dialog box will open with several selections. At the least, you must enter the URL for your image in the Image URL space. You can also enter Alternate Text, which will appear in a tiny window of the reader’s browser when they place their mouse over the picture. You also have several options for Alignment: the default (baseline) will place the image wherever the cursor is when you inserted it. Other useful Alignment selections are right and left, which will not only align the image to the side of your page, but will also cause the text of your entry to wrap around the image – making a much cleaner looking page.

There are also selections for Border Thickness, if you want a border to appear around your image, and Horizontal and Vertical Spacing. Placing numbers in Horizontal or Vertical Spacing will force your text farther away from the image.

 

Inserting a picture without the WYSIWYG editor:

To insert a picture if you don’t use the editor, you must use the the <IMG HTML tag. For more information about HTML tags, please see HTML Tags and How To Use Them.

The proper format for the IMG tag is like this:

<IMG SRC=http://www.opendiary.com/images/odlogo.gif>

where http://www.opendiary.com/images/odlogo.gif would be replaced with the URL of your own picture. Please note that you must include “SRC=”, or the tag will not work. Also notice that, unlike other HTML tags, the IMG tag does not use a closing tag.

Once you save your entry with the tag, the picture should display in the entry. If you don’t see the image, or you see a broken image link (looks like a red X in a small box), then the URL you entered is invalid, or you typed the tag incorrectly. You can test the URL by typing it directly into your browser address bar, to see if the image appears.

An optional part of the IMG tag that many of our writers find useful is ALIGN. The ALIGN tag lets you tell the browser to display your picture aligned to either side of the window, and (more importantly) wrap your text around it. This makes for a cleaner-looking, more professional page.

To use the ALIGN tag, insert either ALIGN=left or ALIGN=right into your IMG tag. For example, the following tag will tell the browser to display the image on the right side of the page, and wrap the text around it:

<IMG SRC=http://www.opendiary.com/images/odlogo.gif ALIGN=right>