Find the Trick You Want 

• Why Am I Telling You How to Do This?
• Adding Images
• What if I Want to Change the Size of the Photo?
• What If I Want to Place My Image on the Right Margin?
• Centering the Image
• What If I Want Margins or Borders Around My Photo?
• If You Want More Information on Adding Borders
• What If I Want the Entire Image to be a Hyperlink?
• Give Credit Where Credit is Due
• I Want to Put Text and Images Side by Side
• Finally a Book on HTML for the Rest of Us!
• These Lensmasters Really Know Their Code!
• Other Helpful Squidoo Lensmaking Lenses
• It's Vitally Important That You Read This Section Very Carefully - And Buy Something
• Give Me Some Feedback!

Why Am I Telling You How to Do This? 

Who do I think I am?

I'm no computer expert. In fact, I'm pretty far down the list of people you should consult about HTML, somewhere between your 8-year-old niece and the dog. But I'm learning, and the contents of this lens includes some of what I've learned. We all know how confusing all this can be when we first start looking at it. This lens is a simple, step-by-step version of the basics to get you started and help you gain confidence.

There are a bunch of really talented lensmasters around that really DO know HTML. You can find lots of lenses to help you. I'm here just to help you get your feet wet in a friendly and easy-to-read tutorial.

I'm not even sure that the information below is the "right" way to do these things. However, this is what works for me. All you folks out there who really do know what you're doing, please leave your comments and corrections. I'll be very grateful.

Adding Images 

To place an image in a module, you have to have the image sitting on the web somewhere.

If you want to add a picture to a text module in any size or place other than the small, upper-right corner position that Squidoo has pre-set for you, you have to use a little html magic. The photo must already be hosted somewhere on the web. Lots of people use Flickr.

Here is the magic command to place a photo in a text module:

<img src="url of the image you want to display">

This will place your picture on the page wherever you place the command. If you put the photo at the beginning of a line, it will sit at the left margin.

If you place it <img src="url of the image you want to display"> in the middle of text your photo will appear like it does below.

If you place it in the middle of text (like this) your photo will appear like it does here with the text next to it.

The dimensions of the photo will be the same as the dimensions on the url from which you took it.

Buy Posters at AllPosters.com

NOW, go open a text module into edit. You can use one of your already published lenses or you can start a new one. Don't worry, you can delete the module after you've played around. But you might find that you like what you've done and want to add it to your lens.

Go find a photo already on the web. Look to make sure the photographer has okayed the use of the photo. Copy the url and paste it into your test module in the appropriate place. Save and see your results. Experiment! See what happens when you make little changes.

What if I Want to Change the Size of the Photo? 

In my limited world, there are two ways to change the size of a photo or image. The first, and probably better way, is to change it in Photoshop or whatever photo editor you use.

The other way to change the photo is with HTML. This can come in handy when you need to tweak the size or just a bit or make the image smaller. Using this to enlarge an image very much isn't a good idea.

Use the same command as above, but add specifications as to height or width in pixels:

<img src="url of the image you want to display" height="400px;"/>

To maintain the proper proportions, you might want to specify just height OR width, unless you are trying to get some funky looking pic. Watch the punctuation and spelling.



If you enlarge the photo very much, the quality of the image may suffer, and the cattle look somewhat annoyed.

If you specify both height and width:

Use the same command as above, but add specifications as to height and width in pixels.
<img src="url of the image you want to display" height="150px" width="500px"/> then THIS is what I get.



The lesson here is to keep in mind proper proportions unless you want really stretchy cows.

NOW, go mess up the proportions of your photo in your test module. Play around. I'll wait here.

What If I Want to Place My Image on the Right Margin? 

No problem. The computer is here to serve you. Really. This was your original command:

<img src="url of the image you want to display"/>

You are going to tell it to place the photo on the right margin.

<img src="url of the image you want to display" align="right"/>

What if you want to get fancy and change the size too?

<img src="url of the image you want to display" align="right" height="200px"/>

Centering the Image 

What If I Want Margins or Borders Around My Photo? 

MARGINS You may want to have some space around the photo before text or other photos crowd in. Use margins.

Here is one way to do it:

<img src="url of the image you want to display" style="margin:10px 15px 10px 15px;"/>

The four "margin numbers" refer to top, right, bottom, and left of your image. There's not much to see here, except there's a little extra space visible on the left side of the photo. These margins will become more important when you begin wrapping text around the images. See the module below about another way to add margins to your photos.

BORDERS If you want a nice border around your image, you can do it. I'll show you the basics here. There are lots of fancier things you can put around your image. The following example shows a basic border. You should specify width, color and texture. .

<img src="url of image you want to display" style="border:5px solid tan"/>

What if you want to put a border around a centered photo?

<p align="center"><img src="url of image you want to display" style="border:5px solid tan"/></p>

NOW, Go practice putting borders on your photos. Try different sizes and colors. See what happens if you specify "2px dotted red." How about "15 px dotted blue."

For more information on adding borders, visit Adding Borders to Photos on Your Squidoo Lens.

If You Want More Information on Adding Borders 

Visit this lens.

Add Borders to Your Lens Photos on Squidoo

Would you like to jazz up the photos on your lenses? You can use borders on your images to give them much more impact and to help them "pop." You just need to use a little bit of simple HTML magic. I have included easy instructions for a variety of...

What If I Want the Entire Image to be a Hyperlink? 

Give Credit Where Credit is Due 

I Want to Put Text and Images Side by Side 

No problem.

First thing to remember: When you want text and image side-by-side, the image command goes first, even if the image will be on the right side. Repeat: The image goes before the text.

Specify in your command where you want the photo.

<img src="url of the image you want displayed" align="left"/>Then you can start typing your text......

Then you can start typing your text right after the command. Do you notice that the text here is crowding the photo quite a bit, making it look squished and less than professional?



This can be fixed. Add some margins to your photo to give it a little cushion.

<img src="url of the image you want displayed" align="left" style="margin-right:30px;"/>Then you can start typing your text......

Now you can see there is a nice cushion between photo and text, making the whole paragraph look much better.

If you want cushion under or above the photo, just do the same thing with "margin-top" and "margin-bottom"

If you want the photo on the other side, just align= "right" style="margin-left:30 px;"

There's nothing magical about 30 pixels either. Experiment.
Buy Posters at AllPosters.com

NOW, go play. Add text. Move things around. Remember, you are just learning this. It won't work perfectly the first time. But you are exploring to see what happens when you try new things. Don't get into a hurry. Have fun. Maybe you'll discover some new thing that HTML code does that no one has ever tried before.

Finally a Book on HTML for the Rest of Us! 

Witty and clear

Head First HTML with CSS & XHTML

by Eric Freeman, Elisabeth Freeman

Amazon Price: $26.39 (as of 10/11/2008)
List Price: $39.99

This beginners' guide to learning HTML is exactly what you need to get started. Reviews from Amazon buyers have been overwhelmingly positive. You don't need to be an expert already to understand the information in "Head First HTML." This is the book you need.

Avg. Customer Rating:

These Lensmasters Really Know Their Code! 

Basic HTML for Squidoo

You can use basic HTML in a few of the lens modules. Mostly used to create hyperlinks (they are the "live links" to other sites). Though there are also other uses for HTML. If you find yourself in need of quick tutorial on how to do it, her...

Simple HTML tricks to use with Squidoo

Squidoo has a nice editor for your lenses, but things can be improved. This lens will show you some simple tricks to include more than possible with simply using the editor. These tricks should be used in modules like the link list, or the write modu...

Advanced HTML for Squidoo

The techniques shown here aren't much more advanced then what's in the Basic HTML tutorial. The code being used isn't any more special. But the results and presentation can appear to be more sophisticated. Hence it being the Advanced HTML tutorial. F...

HTML Squidoo tricks how to lens with sample codes step-by-step

HTML Squidoo tricks how to lens with sample codes & step-by-step instructions to change fonts, background colors, table of contents, modules & images.

Other Helpful Squidoo Lensmaking Lenses 

There are so many helpful lenses. Please add to this list when you visit.

Add to this list

Grab this list

Get the RSS feed: Keep an eye on this Plexo list. See who wins. And who's left in the dirt.

Get the widget: Add this Plexo list as a widget on your blog, site, forum, whatever. Be an influential. Show off your great find.

Get this on my lens: Attack of the clones! Grab this Plexo module for your own lens. Get YOUR readers to vote for their favorites.

• Add to Bloglines
• Add to My Yahoo
• Add to Google
• Add to Technorati
• Add to NewsGator
• Add to My MSN
• Grab the XML

Please pick your widget size and display. Then click "Make the Widget" to get the code that's just right for you.

Pick your widget size:

Small size: Best for blog sidebars, and areas 250 pixels or less
Standard size: Best for blog posts, and areas greater than 250 pixels wide

How many list items to show? 5 10 15 All

Make the Widget!

Voila: Just copy and paste this code into your own site. Have fun!

Oopsey! Please login to Squidoo in order to add this module to your lens.

Add more links    Submit

Type or paste links below (one per line):
(Ex: http://www.cuteoverload.com) Help me find links

Done Adding

Cancel

It's Vitally Important That You Read This Section Very Carefully - And Buy Something 

These products will improve your love life and make you an expert web designer. Or not.

Tagged Mug

from

Pretty soon you'll be going all around the house tagging things! Let's start with your coffee mug.

Price: 11.99

Green T-Shirt

from ETheoryDotCom

Let loved ones know when Not To Approach. It's only fair.

Price: 17.99

Large HTML Mug

from Webyst

Slurp like the computer pro you are becoming! This large mug will help you get into the mood to work on your computer. Guaranteed to increase your confidence.

Price: 13.99

Give Me Some Feedback! 

This is your chance to tell me what works, what doesn't, what needs to be changed, how totally wrong I am about all of this.....You can also let me know if it helps.

griff366 Thank you, Bee. A wonderful, simple-to-follow lens to help the rest of us to manage our photos with HTML. Your clarity is very much appreciated. I gave your lens top ratings. Posted October 10, 2008

CherryShrimp Good info especially for beginner squidoo user who do not know anything about html. Great Lens Posted October 08, 2008

xion EXCELLENT Posted October 07, 2008

sx-adameve-com Great stuff thanks of the information and a couple of thing extra to think about. I now know how to centre my images. (Which is how I found you) But know text next to image Wow.. Who would of thought.. 5 Stars ... Posted October 07, 2008

A_RovingReporter This is a great five-star lens. Now I know how to make my picture a hyper-link. Thanks. Posted October 06, 2008

janed54 Finally, a comprehensive, easy to understand, step by step tutuorial for us beginners. I got so carried away I started practising and spent hours manipulating and rearraging pictures and type. It was a blast and now feel more confident. Thank you so much. Janed54 Posted October 05, 2008

naturegirl7 This is a great guide for beginners. You did a really good job with it. I like your step by step presentation. How did you get the security word to match your lensmaster name? It's lickbees! :D ;) Posted October 04, 2008

DAMIND Awesome lens, I can grab some of your great information to build my next lens. thanks for sharing. I won't hesitate to give you 5* Posted October 03, 2008

debnet I'm going to pay around with this stuff and try to add some borders to my pictures. Great lens Bee...what's with the new avatar? 5***** Posted October 02, 2008

ZBT Thank you for spelling things out in such a simple and easy to understand form. This stuff has had me baffled. This lens is fantastic! Posted September 29, 2008

 

Next Page

1 of 8 pages