Home » Internet » Web Design

HTML for Photos: A Tutorial for the Semi-Clueless

Ranked #290 in Internet, #13,051 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

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.

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.

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

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?

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

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?

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"><img src="url of the image you want displayed"/></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:

<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:

Photo courtesy of <a href="http://www.squidoo.com/lensmaster/beeobrien">Bee and Ernest</a><img src="http://farm4.static.flickr.com/3180/2762244455_e37739055e_m.jpg" />

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.

Finally a Book on HTML for the Rest of Us!

Witty and clear

Head First HTML with CSS & XHTML

by: Eric T Freeman, Elisabeth Freeman, Elisabeth Robson

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.

HTML for Photos: A Tutorial for the Semi-Clueless

How Did They Do That!?

Find the Tricks You Want

Why Am I Telling You How to Do This?

Who do I think I am?

Adding Images

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

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

Visit this lens.

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.

Finally a Book on HTML for the Rest of Us!

Witty and clear

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

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

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.

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.

Give Me Some Feedback!

by beeobrien

Related Tags

Want our Newsletter?