karenak Crown

Here's the Categorian Beginner's First Aid Kit - Part Six

How to post a photo and make it look good

The HTML tag to post a photo is:

<img src="http://...path to the image...">

This is the simplest form. It will place the picture on the left side of the post and that's it.

However, there is a lot you can do to improve on that:

Adjust the size of that image

Although I would always recommend to resize the image in a photo editor, you can set the size right here in your blog post.

Please note: I recommend setting either width or height because if you set both and make a slight error, you will distort the image.

<img src="http://...path to the image..." width="700">

Center that image

There are several ways to center an image. This is the simplest one:

<center> <img src="http://...path to the image..."> </center>

Put text next to that image

Sometimes you might want to place text next to the picture. The easiest way is this:

<img src="http://...path to the image" align="right">

...or align="left" of course

However, this simple method will place the text very close to the image, which might not look good.

This is why I prefer the following method:

<img src="http://...path to the image" style="float:right; margin-left:10px;">

You can let your image float right or left.

margin-left:10px will create a gap between text and image. You can change the number of px to your liking.

margin comes in 5 variations: left, right, top, bottom. Or without any attribute at all, which will set the margin right around the image.

I like style="..." because there are several other things we can use it for.

How about a border ?

This is the standard border:

<img src="http://...path to the image" style="border: 1px solid black;">

1px is a thin line. You can make that border as thick/wide as you like.

Borders can be solid, dotted, dashed, double, groove, ridge, inset, outset and hidden.

Borders can have any color you like. Just type in the color name or hex code of a color.

And now we will combine all that !

For this text to be placed next to the image, in addition to the image source, I used "style" to combine float, margin and border and then added width and wrapped all into one simple command.

<img src="http://...path to the image" style="float:right; margin-left:10px; border: 1px solid black;" width="200">

>>>> Examples