HTML for Photos: A Tutorial for the Semi-Clueless

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 260 people | Log in to rate

Ranked #217 in How-To, #2,401 overall

How Did They Do That!?

How often do you look at a really great Squidoo lens and wonder how they changed colors or backgrounds or add photos somewhere other than the upper right-hand corner of the module? They use HTML. I'm not a genius at this sort of thing, so every time I want to do something like that, I have to go find a tutorial on it. So, by gum, I'm making my own lensmaking tutorial, so I'll always know where to find the information. You can use it too. Most of this information can be found on other Squidoo lenses. See featured lenses below.

Buy this print at AllPosters.com

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.

cattle photo



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 

For some reason that I hope someone will share with me, when I use the "align center," I have to place it at the beginning of the command in order to make it work. I'm sure there's a solution to it, and I'll share it with you as soon as someone tells me. For now, this is how I center an image. It's only a little bit different. Notice that your basic image placement command is still there.

<p align="center"><img src="url of image you want to display"/></p>


Once again, you can change the size just like before.

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.

featured 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? 

The entire image can act as a hyperlink to another site or web page.

<a href="url of the site you want to click to"><img src="url of the image you want displayed"/></a>



I think I'll center it:

<a href="url of the site you want to click to"><p align="center"><img src="url of the image you want displayed"/></p></a>



Photo courtesy of LiveLaughLove



This photo is a link to my Create Your Own Signature Salsa lens just like this text link.

Give Credit Where Credit is Due 

Common decency (and copyright law) demands that we credit our sources. There are a lot of photos on the web. Many of them are available for other people to use. Some are not. Always get permission before using another person's photo. Permission may be given right on the page with the image. If not, you need to contact the owner and ask.

Even with permission, it's important to credit the owner of the photo. There are lots of ways to do this. Some people place credits at the bottom of the lens, others at the end of a paragraph or module. I like to place credits as close to the image as possible, always with a link back to the original photo.

Lately, I've been putting my credits above the photo. I'd like to put them beneath, but I haven't found an appropriate way yet to do that. Here is the code that I use:

<p align="choose left, right or center"><strong style="font-size: x-small; font-weight: normal; font-family: Arial"><a href="url of image or owner's website" target="_blank">Name of photo owner</a>



If the image is aligned left, then align the credit the same way. The following example is aligned center. The credit needs to be placed before the image in its own paragraph. Here is the entire code for the credit and photo below:

<p align="center"><strong style="font-size:x-small; font-type:normal; font-family:Arial">Photo courtesy of <a href="http://www.squidoo.com/lensmaster/beeobrien">Bee and Ernest</a></strong></p><p align="center"><img src="http://farm4.static.flickr.com/3180/2762244455_e37739055e_m.jpg" /> </p>

Photo courtesy of Bee and Ernest

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.

Ideal Bite - Bite-sized ideas for light green living

Finally a Book on HTML for the Rest of Us! 

Witty and clear

Head First HTML with CSS & XHTML

Head First HTML with CSS & XHTML

by: Elisabeth Freeman, Eric Freeman, Freeman Eric, Freeman Elisabeth

Amazon Price: $26.39 (as of 12/09/2009)Buy Now
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: Amazon Rating

These Lensmasters Really Know Their Code! 

featured lens 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.

featured lens 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...

featured lens 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...

featured lens Basic HTML for Squidoo

Before you start reading all this, you may want to open Advanced HTML in a new tab, because you'll be wanting to check it out as soon as you've finished this! You can use basic HTML in a few of the lens modules. Mostly used to create hyperlinks (the...

 

Gas

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

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 Buy Now

Green T-Shirt

Green T-Shirt

From: ETheoryDotCom

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

Price: 17.99 Buy Now

Large HTML Mug

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 Buy Now

Powered by CafePress

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.

submit
  • Reply
    KiwiGail KiwiGail Dec 3, 2009 @ 9:01 pm
    Thank you for this....it is far and away the clearest, easiest to follow lesson I have found anywhere on putting photos on web pages.I have bookmarked and stumbled.
  • Reply
    Bellwood-Antiques Bellwood-Antiques Nov 22, 2009 @ 11:07 am
    High I am a winter user of squidoo so I basically have to start learning the tricks all over again( i'm nott a comp. whiz by any means). I thing that this lens will be very helpful to me. I have tried to do some of the stuff that you have mentioned and I could not make it work previously (last year). I will give this a try I know that it will help alot(I hope). I may try to get in touch with you if I do not understand something, or just can't make it work properly. I hope that is ok? Thanks for the great informational lens.
  • Reply
    JoyfulPamela JoyfulPamela Nov 12, 2009 @ 10:51 am
    Thank you very much! I'm slowly learning a little more every day about these things, and this sure makes it easier.
  • Reply
    beeobrien beeobrien Oct 18, 2009 @ 11:18 am | in reply to IslGirl
    The url of the photo should end in gif, jpg or something similar. To get the correct url for your photo, choose the flickr image, click on "all sizes" above the image. The correct url to copy and paste on the squidoo page will be shown near the bottom of the page. It will look something like this: http://farm4.static.flickr.com/3137/3020866070_9a345c9390_m.jpg This is an example from my flickr photostream, but you get the idea. Let me know if this helps. Good luck.
  • Reply
    IslGirl IslGirl Oct 17, 2009 @ 1:24 pm
    This didn't work for me. I had the photos on my own computer. You said they had to live on the Web somewhere so I sent them to Flickr. I then used the html code you suggested
    and you can see the results by checking my lens:
    www.squidoo.com/make-photo-greeting-cards
    "Make Photo Greeting Cards - With Google Images"
    I can upload photos directly from my computer files to Squidoo, but, of course, they are placed where Squidoo wants them, not in context with the writing.
  • Reply
    Nnamdi546 Nnamdi546 Oct 11, 2009 @ 6:59 pm
    This lens has been very helpful....thank you
  • Reply
    Quickcutters Quickcutters Oct 9, 2009 @ 4:51 am
    Love the lens great job. 5 star from quickcutters
  • Reply
    kimmisue kimmisue Oct 3, 2009 @ 10:39 am
    Thank you! :) I appreciate this info so much!! I am new to Squidoo, with only 2 lenses to my name right now. I need help doing all these extra things! This website will be a great help in doing my 3rd lens.
  • Reply
    hayleylou hayleylou Sep 23, 2009 @ 7:23 pm
    thanks sooo much for putting this lens together, 5 stars and a fav
  • Reply
    rileywest rileywest Sep 5, 2009 @ 11:22 am
    The simplest things are just as hard as the difficult things if you don't know how to do it. Your explanation of "How To Center An Image In Squidoo" came up number 2 when I Googled "How To Center An Image In Squidoo"

    Googling my question is how I find most of my answers!

    Thank you!

    Riley West - riley@rwestdotcom.com
  • Load More
Show All

by beeobrien

I'm an author, a cook, an artist and a mom, not necessarily in that order. Check out my website at Kids-Cook.com



online counter (more)

Related Topics

beeobrien Recommends...

Create a Lens!