Step 7: First - a really short lesson in HTML. These are the characters you're going to look for when you need to do some editing:

• <p> means a new paragraph and will give you a space between lines like the line Step 7 above and this list
• <img src="..."> is where you put your path to your single picture or your little picture (thumbnail)
• <a href=...> is where you put your path to your big picture on the web
• alternate is where you put the text you want to show up when someone holds their cursor over the picture.

Step 8: If you have more than one paragraph in your message, place <p> in the space between each one or they'll all run together when you post it.

Step 9: To Edit the following HTML, simply highlight, copy and paste it into your word editor.

Step 10: Edit out my paths and remarks, which are written in bold type, and replace them with yours. Be very careful to be absolutely exact in your typing. Do not type over or eliminate any of the characters not in bold type. Make sure your path is letter perfect.

Step 11:  Highlight and copy the edited HTML, then go back to the page in your browser and paste it into the text box of the message you are creating.

Step 12: Select the Preview button to see if it works as advertised.

Step 13: If it does, then post it! If it doesn't, go over the HTML again. You only need to have one character typed, added, missed, or overwritten to break the link to your picture. You may need to paste the HTML over your work and start over again if you don't understand what you're looking at.

Example 1 - Single picture inline without a link: 

If you want just the picture in the message use this HTML:
<p><img src="http://yourhost.com/sunni/regpicture.jpg"></p>

If you want a comment added to the picture (hold your cursor over the unicorn to see), use this HTML:
<p><img src="http://yourhost.com/sunni/regpicture.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE."></p>

Example 2 - Two pictures inline without a link: 

If you want just the picture in the message use this HTML:
<p><img src="http://yourhost.com/sunni/firstpicture.jpg">
<p>
<img src="http://yourhost.com/sunni/secondpicture.jpg"></p>

If you want a comment added to the picture (hold your cursor over either unicorn to see), use this HTML:
<p><img src="http://yourhost.com/sunni/firstpicture.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE.">
<p>
<img src="http://yourhost.com/sunni/secondpicture.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE."></p>

Example 3 - A single thumbnail with a link to a larger picture:

(Click on this thumbnail to view the bigger picture it's linked to.)

If you want just the picture in the message use this HTML:
<p><a href="http://yourhost.com/sunni/bigpicture.jpg"><img src="http://yourhost.com/sunni/thumbnail.jpg"></a></p>

If you want a comment added to the picture (hold your cursor over the thumbnail to see), use this HTML:
<p><a href="http://yourhost.com/sunni/bigpicture.jpg"><img src="http://yourhost.com/sunni/thumbnail.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE."></a></p>

Example 4 - Two thumbnails side by side with links to larger pictures:

(Click on either thumbnail to view the bigger picture it's linked to.)

If you want just the picture in the message use this HTML:
<p><a href="http://yourhost.com/sunni/bigpicture1.jpg"><img src="http://yourhost.com/sunni/firstthumbnail.jpg"></a> <a href="http://yourhost.com/sunni/bigpicture2.jpg"><img src="http://yourhost.com/sunni/secondthumbnail.jpg"></a>
</p>

If you want a comment added to the picture (hold your cursor over either thumbnail to see), use this HTML:
<p><a href="http://yourhost.com/sunni/bigpicture1.jpg"><img src="http://yourhost.com/sunni/firstthumbnail.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE."></a> <a href="http://yourhost.com/sunni/bigpicturew.jpg"><img src="http://yourhost.com/sunni/secondthumbnail.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE."></a>
</p>

Example 5 - Two thumbnails with a link to a larger picture:

(Click on this thumbnail to view the bigger picture it's linked to.)

  (Click on this thumbnail to view the bigger picture it's linked to.)

If you want just the picture in the message use this HTML:
<p><a href="http://yourhost.com/sunni/bigpicture.jpg"><img src="http://yourhost.com/sunni/thumbnail.jpg"></a>
<p>
<a href="http://yourhost.com/sunni/bigpicture.jpg"><img src="http://yourhost.com/sunni/thumbnail.jpg"></a>
</p>

If you want a comment added to the picture (hold your cursor over either thumbnail to see), use this HTML:
<p><a href="http://yourhost.com/sunni/bigpicture.jpg"><img src="http://yourhost.com/sunni/thumbnail.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE."></a>
<p>
<a href="http://yourhost.com/sunni/bigpicture.jpg"><img src="http://yourhost.com/sunni/thumbnail.jpg" alt="YOUR COMMENT WHEN THE VIEWER HOLDS THE CURSOR OVER THE PICTURE."></a>
</p>

Do you see the pattern above when you add another picture? To add more pictures, simply paste another <p><img scr=... or <p><a href=... just before the </p> in the HTML above.

©2001-Sunni Bergeron

Thank you, Sunni! You can Email Sunni at sunnisan@hotmail.com or visit her Website at http://members.spree.com/sip/sunnidaze

This page is part of the Polymer Clay Cyclopedia being assembled by the friends and members of Polymer Clay Central, http://www.polymerclaycentral.com. We wish to encourage all beginners to print these pages, published in the Polymer Clay Cyclopedia Format. (The Cyclopedia Format is the lavender ruled white paper background). The PCC Cyclopedia entries & images are provided free & without charge by the authors & artists who wrote and/or created them. Their use here is WITH PERMISSION.
Copyrights to all written entries & all images are held by the authors & artists who submitted them. Members of this forum may print the pages for their personal use. However, entries & images may not be copied, reproduced, retrieved or used elsewhere in any written, print or electronic form, without the express written permission of the person or persons who hold copyright to the particular item or items under consideration.

Polymer Clay Central Home Page  |  Polymer Clay Cyclopedia Contents