Add Fancy Borders To Photos With Basic HTML

HTML.  Those four simple letters that can strike fear in the hearts of many bloggers.

Today, I want to show you how NOT scary this code is by playing around with some HTML code to style pictures in a blog post.  I absolutely love HTML, and in fact, about 95% of the time I write my posts in HTML rather than using the WYSIWYG editor. It’s just easier for me to get things to do what they’re supposed to do if I go right to the HTML.

First, I’ve only ever used Blogger and WordPress to write my blog, and I know that with both of those, you can access the HTML of your blog post.  In order to style photos the way I’m going to show you below, you will need to access the HTML of the post.

In WordPress, there are two tabs at the top right of the area where you type your post.  One says “Visual”, and the other says “HTML”.  In Blogger, there are two buttons at the top left of the area where you type your post.  One says “Compose” and the other says “HTML”.

After you’ve uploaded your pictures into your blog post, click on the “HTML” tab or button. Go ahead. It won’t hurt. I promise.

So let’s start with a basic picture.   Throughout this post, I’ll be working with this picture.

When I’m looking at my post on the “Visual” tab, I can actually see the picture.  However, when I click over to the “HTML” tab, I see the code that generates the picture.  It looks like this:

<img title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”560″ height=”600″ />

Your code may look a little different, but the main parts will be the same.  Let’s look at those:

  • img – This tells the computer that it needs to insert an image here.
  • src – This tells the computer the source of the picture, i.e., where it needs to go to find the image that needs to be inserted here.  I’ve uploaded the photo through WordPress, and that is the direct link to the picture.  If you were to copy and paste that URL (starting with “http” and ending with “.jpg”) into your browser, you would see only that picture.
  • title – This title displays when someone hovers over the picture with their mouse pointer (may not work in all browsers). Hover your pointer over the picture above and you’ll see the Title in the code. You can change this title to say whatever you want.
  • alt – This is an alternate description that you can give your picture that helps search engines know what the picture is.  Learn more about alt tags here.
  • width & height – These define the width and height of the photo in pixels.

See?  That’s not so intimidating when you know what the things stand for, right?  Like I said, your program might include some other code.

So now let’s have a little fun with this picture.

Resize Your Picture Using HTML

Many blogging programs have buttons or click and drag options for resizing photos, but I often find it easier to simply change the HTML.  If you look at the original HTML code for the picture, you can see that it is 560 pixels wide and 600 pixels high.  But what if I know I want the picture to display at exactly 300 pixels wide?  Simple…just replace the original width with the new width.

<img title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

By changing the width, the photo will now display like this…

Outdoor rug painted with latex paint

You’ll notice that in the code where I changed the size, I only included the width of the picture, and I deleted the height.  I did this because I can’t do math in my head, and I have no idea what the exact height needs to be in order to keep the picture in the correct ratio.  Fortunately, if you only specify one dimension, the computer will automatically keep the measurements in the correct ratio.

If you know you want the picture to be exactly 300 pixels wide, and you make a guess at what the height needs to be…and you get it wrong…the picture  will be out of proportion.  So if you know the exact width you want the picture, define the width, and remove the height.  If you know the exact height you want the picture, define the height, and remove the width.

Got it?  Alrighty, let’s move on to borders!

Add A Simple Border To A Picture With HTML

Adding a border to a picture is quite easy using HTML.  You’ll simply add the following code:

style=”border: 5px solid #000000″

This code tells the computer to add a solid black border that is 5 pixels wide.

(HTML uses hexadecimal codes to represent colors.  This chart will get you started, or you can Google “hexadecimal color chart” for many more.  The code is a combination of six numbers and/or letters, and always begins with the “#” sign.)

The whole code will look like this:

<img style=”border: 5px solid #000000″ title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

Outdoor rug painted with latex paint

Of course, you can make the pixels any size you want…the larger the number, the wider the border. For example, if I wanted to make the border 20 pixels, I would use this code:

<img style=”border: 20px solid #000000″ title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And that would generate this picture:

Outdoor rug painted with latex paint

Want to change the color of the border? No problem! Simply find the hexadecimal code for the color you want, and replace the current color code. If I want to make a teal border, I would use the code for teal (#00999) in place of the hex code for the black border:

<img style=”border: 20px solid #009999″ title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

Outdoor rug painted with latex paint

Pretty nifty, right? Oh, but the fun is just getting started!

I’m going to reduce the border from 20 pixels (20px) to 3 pixels (3px), and show you some other fun tricks.

Add A Fancy Border To Your Pictures With HTML

Borders don’t have to be solid. You can choose from dotted, dashed, double, and a few others.

If I reduce the border back to 3 pixels (3px) and change it from solid to dotted, the code would look like this:

<img style=”border: 3px dotted #009999″ title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And the picture would look like this:

Outdoor rug painted with latex paint

If I replace the dotted border with a dashed border, the code looks like this:

<img style=”border: 3px dashed #009999″ title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And the picture looks like this:

Outdoor rug painted with latex paint

Now I’ll increase the pixels to 9 (just because I want to, and I can), and replace the dotted border with a double border.

<img style=”border: 9px double #009999″ title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And the picture looks like this:

Outdoor rug painted with latex paint

There are a handful of other options that you can use, and you can see those here.

Now I’ll share one more thing today.

Using HTML, you can specify a different border for each side of the picture.  For example, if I wanted to add a 5 pixel red dotted border to the top, a 2 pixel green dashed border to the right, a 9 pixel double purple border to the bottom, and a 10 pixel solid orange border to the left, the code would look like this:

<img style=”border-top: 5px dotted #FF0000; border-bottom: 9px double #990099; border-left: 10px solid #FF9900; border-right: 2px dashed #00CC00;” title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

And the picture would look like this:

Outdoor rug painted with latex paint

Okay, well…I’m not really sure why you’d want to do that, but at least you know you can if you want to!  :-D  Something like this might be more reasonable:

<img style=”border-top: 8px dotted #587834; border-bottom: 8px dotted #587834; border-right: 8px solid #587834; border-left: 8px solid #587834;” title=”painted outdoor rug 6″ src=”http://www.addicted2decorating.com/wp-content/uploads/2012/05/painted-outdoor-rug-6.jpg” alt=”Outdoor rug painted with latex paint” width=”300″ />

Outdoor rug painted with latex paint

See?  HTML can be fun!  And there lots more about styling photos that I want to show you, but I’ll let you chew on this for a few days.

Have questions?  Just leave a comment and I’ll try to answer them!

(By the way…unfortunately you won’t be able to copy and paste the code from this post into your HTML.  For some reason, when I type out HTML code in the Visual editor, it always puts the first quotation mark the wrong direction–like a close quote rather than an open quote.  I’ve tried everything I can think of to correct it, but nothing works.  So if you copy and paste the HTML code into your blog post, you’ll have to re-type the quotation marks to get the code to work.  If anyone knows how to fix this, I’d love to know!!)

Need more blogging help? Click here to see all of my Blogging Help posts! Have a blogging question that I haven’t covered yet? Feel free to send me your question(s)!

SUBSCRIBE HERE!
Enter your name and email below to receive:

New posts delivered to your inbox * Giveaways exclusive to subscribers
Exclusive behind-the-scenes videos * Additional DIY tips
The occasional DIY project, just for subscribers
A plate of warm, freshly baked cookies

(Okay, probably not that last one.)  :)

Comments

  1. Carolyn says

    Great tips for beginners regarding the frames. I learned a few things. I thought I would mention that resizing pictures does not make them load faster. The original file size of the picture remains the same. Changing all of the pictures to make them smaller on screen can be costly to readers who are waiting for pictures to load. It is always best to resize in a photo editing program and use originals in a smaller size on your blog, especially if you find yourself resizing your photos regularly.

  2. says

    Thanks for the tips! I’m not sure why you can’t copy and paste codes either. When I was learning to make buttons with grab box’s there are lots of sites that say just copy and paste and change the info, but it never works. I always had to re-type it too.

  3. Judi says

    Pretty excited to try this as I am ZERO computer literate! FYI I went to your pinterest boards to repin this to my technology board but couldn’t find it. I also couldn’t seem to figure out how to pin it from here at the blog. %-) Any plans to put these tidbits on Pinterest?

  4. says

    Hi Kristi — thanks for a wonderful tutorial on HTML.

    Without getting too technical, the problem with the quotation marks is that ‘smart’ programs convert the typed version to be ‘pretty’ with the open/close versions. In order to do that, the actual ASCII code for each one has to be different. So, when you copy these ‘converted’ [or 'extended ASCII'] versions back to the WordPress [or Blogger] HTML editing screen, it is expecting the ‘unconverted’ ASCII codes not these ‘extended’ ones.

    My computer whiz friend has to deal with this problem when dealing with hundreds & thousands of lines of code so he, like most techies, built his own little converter to deal with this problem. It’s nothing fancy but if you & your readers would like to use it, feel free:

    http://bcnethost.com/ascii_converter.cfm

    I tested it with a bit of your code from above & it worked marveously. Again, thanks for a wonderful tutorial.
    dawnedesign.net

    • says

      That is absolutely BRILLIANT! I just copied and pasted some code from this post into the converter, and it works! I’m so glad to know about that. Thank you!

  5. Morgan @ A Bright Idea says

    This is a great tutorial. I’m studied graphic design in college. People shouldn’t be afraid to try CSS and HTML coding. Designing websites is fun and you learn by trying. I love how you laid it out so it could be easily understood!

  6. says

    I LOVE this! I would love to do this on my blog. I tried it to no avail! I use blogger, and when I added the code, nothing changed. I wonder if there is something different with blogger??

    • says

      No, HTML is HTML, whether on Blogger, WordPress or anywhere else. Blogger does put lots of extra HTML code, so you just have to be really careful about where you place the code. The only thing I can think of is that you put the code in the wrong spot. Try again, and put the code right after “img”. So it’ll look like this:

      • says

        Thank you, Kristi, for responding to my question! I am one of your new followers and I love your blog. So, you were right. I was putting the code in the wrong spot. Once I put it in the right place, the borders showed in the “Compose” tab (WYSIWYG) but didn’t show in my blog. I can only figure it has to do with the template or layout of my blog. Anyway, thank you for trying!!

  7. says

    Thanks so much for posting this! I especially love that you deciphered the html code behind a picture. I love your blog tips series. It has helped me a lot!

  8. Katy says

    Great tutorial!! I needed to know more about HTML coding for a new job and yours is the first tutorial out of I don’t know how many that I have been able to get my head around! Thanks so much!!

  9. kim Sharman says

    The tutorial re putting borders around photos was really helpful….thankyou. I was wondering if there is a way that I can put more sophisticated borders around photos. Is there a facility where I can download fancy borders from the web and insert them into by blog via HTML?

    Thanks, Kim

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

«
»