Blogging Help

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”.

MY LATEST VIDEOS

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=”https://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=”https://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=”https://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=”https://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=”https://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=”https://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=”https://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=”https://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=”https://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!  😀  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=”https://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)!



You Might Also Like...

21 Comments

  • Reply To This Comment
    brooke adkins
    May 28, 2012 at 4:32 pm

    Great tips Kristi!

  • Reply To This Comment
    [email protected]
    May 28, 2012 at 5:12 pm

    Thanks so much for the tips-I really love your blogging tips-they are teaching me so much over the past year since I began blogging.

  • Reply To This Comment
    Bev
    May 28, 2012 at 5:50 pm

    that is awesome to know! HTML scares me, but that looks do-able!

  • Reply To This Comment
    Carolyn
    May 28, 2012 at 6:22 pm

    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.

  • Reply To This Comment
    Sue
    May 28, 2012 at 9:31 pm

    So, so informative, Kristi! Thank you for sharing and taking some of the mystery out of HTML! Bless you!

  • Reply To This Comment
    Diane | An Extraordinary Day
    May 28, 2012 at 9:42 pm

    I love your fearlessness at trying anything in life….or at least it seems that way!! Thanks for the tips! You’re amazing!!

  • Reply To This Comment
    jill wilhelm
    May 28, 2012 at 10:02 pm

    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.

  • Reply To This Comment
    Judi
    May 29, 2012 at 12:23 am

    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?

  • Reply To This Comment
    Lucy Designs
    May 29, 2012 at 10:02 am

    Wow! great info…thank you for breaking it down like that!

  • Reply To This Comment
    Vanessa Dawne
    May 29, 2012 at 4:36 pm

    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

    • Reply To This Comment
      Kristi Linauer
      May 29, 2012 at 5:57 pm

      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!

  • Reply To This Comment
    Morgan @ A Bright Idea
    May 30, 2012 at 6:02 am

    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!

  • Reply To This Comment
    Katie
    June 7, 2012 at 7:54 pm

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

    • Reply To This Comment
      Kristi Linauer
      June 7, 2012 at 8:02 pm

      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:

    • Reply To This Comment
      Katie
      June 7, 2012 at 9:03 pm

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

  • Reply To This Comment
    More Picture Border Fun With HTML
    June 9, 2012 at 8:42 am

    […] few days ago, I shared with you how to make different kinds of borders on you pictures using simple HTML. We went over plain borders, thick borders, colorful borders, dotted borders, dashed borders, and […]

  • Reply To This Comment
    Christine
    June 10, 2012 at 2:28 pm

    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!

  • Reply To This Comment
    Katy
    October 19, 2012 at 2:39 pm

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

  • Reply To This Comment
    Tammy Killough
    October 23, 2012 at 7:08 pm

    Oh wow! Thanks! I’ve been reading your blog now for at least two hours!!! I’m your newest stalker!!! 😀

  • Reply To This Comment
    kim Sharman
    November 14, 2012 at 7:15 pm

    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

    This site uses Akismet to reduce spam. Learn how your comment data is processed.