HTML for Photos: A Tutorial for the Semi-Clueless
Ranked #290 in Internet, #13,051 overall
How Did They Do That!?
Buy this print at AllPosters.com
Find the Tricks 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.
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?
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?
<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
<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?
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.
What If I Want the Entire Image to be a Hyperlink?
<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
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.
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
Amazon Price: $21.81 (as of 02/13/2012)![]()
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.
These Lensmasters Really Know Their Code!
Other Helpful Squidoo Lensmaking Lenses
There are so many helpful lenses. Please add to this list when you visit.
HTML, CSS Backgrounds on Squidoo
I am constantly striving to beautify my lenses. Ju more...8 points
squidoo css - my favorite code
I've gathered my favorite Squidoo-code for later r more...6 points
HTML Text and Image Squidoo Tips
I am constantly working on improving my lenses to more...5 points
Squidoo Widgets, PayPal and Tools
Squidoo has some great internal widget modules. Bu more...5 points
Cute modules to spice up your lens
Cute modules that will help your lens stand out. G more...4 points
Lens Rank and Traffic on Squidoo
Now that I have learned how to improve on the aest more...4 points
My Favourite CSS Tricks for Lenses
The basic tools provided by Squidoo will do pretty more...3 points
HTML Tips for Color
Color can be applied via HTML tags to fonts, borde more...3 points
Free Squidoo Lensmaster Graphics and Images
Also, it includes several detailed How-To sections more...3 points
How to Legally Add Copyrighted Pictures & Art to Websites and Squidoo Lenses
Legally use famous copyrighted pictures and art on more...2 points
Adding Borders to Photos on Your Squidoo Lens
Easy-to-use tutorial to help you add pizazz to you more...2 points
Squid Etiquette
Squid Etiquette is all about what to do and what N more...2 points
Super Advanced HTML Tips and Tricks to use on Squidoo
These techniques are not really that super advance more...1 point
Squidoo Tools, Resources, and Guides
Squidoo Tools, Guides, Lens addons, Linkbuilding t more...1 point
Advanced css for squidoo - spice up your lens MORE
My lens about css for squidoo often gets the quest more...1 point
HTML Squidoo Tricks How To Lens with sample codes step-by-step
HTML Squidoo Tricks How To Lens with sample codes more...1 point
Helpful Beginer Information Collection for Squidoo
I understand some of Squidoo, but there is much mo more...1 point
Getting More Out Of Squidcasts
According to the definition of Squidoo a squidcast more...1 point
The Squidoo Answer Deck organised by topic
The Squidoo Answer Deck is full of great lenses pu more...1 point
Squidoo Induction
Learning how to Squidoo can be very daunting, but more...1 point
Squidoo Step by Step
Squidoo Step by Step is a FREE Squidoo Guidebook. more...1 point
Squidoo Answer Deck: Using Images
Using images on a Squidoo lens not only helps to m more...1 point
Newbie Guide to Squidoo Lensmaking
I know, I know, there are already tons of How-to-S more...0 points
http://squidoo.com/htmlheroes
A compilation of useful HTML help lenses, from som more...0 points
Advertise Your Lens Plexo's
Add Your Lenses to One of our Link Plexo's below a more...0 points
Internet Help For All
0 points
http://www.squidoo.com/links_to_learn
The Hitch Hikers Guide to Squidoo Lens Making0 points
How to add a favicon to a website
A Favicon ( Favorite Icon ) is the small image you more...0 points
Voice Instructor san mateo
Come and learn to play Piano & Voice lessons i more...0 points
www.youwereborntobespoiled.com
Gift your loved ones Visit us at
http://www.youwereborntobespoiled.com/ more...0 points
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
Pretty soon you'll be going all around the house tagging things! Let's start with your coffee mug.
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.
-
Reply
-
superseotips
Feb 10, 2012 @ 4:34 am | delete
- nice article
-
-
Reply
-
MobileAppMan
Feb 2, 2012 @ 12:08 pm | delete
- Thanks for the help. You are totally awesome!
-
-
Reply
-
MobileAppMan
Feb 2, 2012 @ 12:08 pm | delete
- Thanks for the help. You are totally awesome!
-
-
Reply
-
mary_lighthouse15
Jan 29, 2012 @ 11:12 pm | delete
- Sockii recommended this lens to me. Thanks for publishing this lens!
-
-
Reply
-
sockii
Jan 29, 2012 @ 11:05 am | delete
- Useful stuff! I'm bookmarking this page for my own use as well as to recommend to "newbie" Squids needing help with their photo formatting :)
-
-
Reply
-
cayunkatels
Jan 25, 2012 @ 5:33 am | delete
- Your lens very helpfull for us, thanks a lot
Cara Mudah Baca - Edit PDF dengan Foxit Phantom v 2.2 Full Version
Cara Mudah Memperbaiki Blue screen pada Windows
Cara Mudah Membuka File PDF di HP
-
-
Reply
-
a11_you_wanted
Jan 13, 2012 @ 6:16 pm | delete
- Very useful information. Thank you for sharing. :)
-
-
Reply
-
davenjilli
Jan 7, 2012 @ 5:14 pm | delete
- I LOVE this lens so much I am going to tell people to come here to get their html basic tutorial!
-
-
Reply
-
cmadden
Dec 13, 2011 @ 11:10 am | delete
- Thank you for this well written, quite helpful lens.
-
-
Reply
-
fullofshoes
Dec 10, 2011 @ 10:37 am | delete
- Great lenses, very helpful and lots of great links to other helpful lenses, thanks very much! I can use all the tips I can find!
-
- Load More
by beeobrien
I'm an author, a cook, an artist and a mom, not necessarily in that order. Check out my website at more »
- 62 featured lenses
- Winner of 6 trophies!
- Top lens » How to Make Pizza Dough Step by Step
- This lens »
Won purple star



