{"id":2868,"date":"2013-09-14T15:38:49","date_gmt":"2013-09-14T20:38:49","guid":{"rendered":"http:\/\/rockylouproductions.com\/blog_wp\/?p=2868"},"modified":"2013-09-14T15:40:45","modified_gmt":"2013-09-14T20:40:45","slug":"html-borders","status":"publish","type":"post","link":"https:\/\/rockylouproductions.com\/blog_wp\/2013\/09\/14\/html-borders\/","title":{"rendered":"Tiptoeing thru HTML to Make Borders"},"content":{"rendered":"

Thanks to a recent post by John Johnston “Flicking a Five Card Story” <\/a>\u00a0I brushed aside my anxiety, took the leap and dived into the HTML.\u00a0Well, let\u2019s be real\u2026 I just dipped my toes in the shallow end\u2026 but I did it. I created borders around all of my images in my 5 Card Flickr Story post, \u00a05 Card Poetry – Sharing My Story<\/a>\u00a0YAY!!!!!!!<\/p>\n

I’d been wanting to do this since my first WordPress based blog post. \u00a0It was very easy to do when I was programming my websites using RapidWeaver. \u00a0I just clicked on a picture formatting box, chose my style, \u00a0and it was all done for me. \u00a0That hasn’t been the case with this blog. \u00a0Maybe I just haven’t located the right WordPress widgets and plug-ins yet. \u00a0But I agree with John (and Alan Levine) that it is good to know how to work directly with the code. \u00a0What was it Alan said? “Code or Be Coded”.\u00a0Let me show you what I did. \u00a0And then you can give it a try too.<\/p>\n

I wanted to take this image I had taken in February 2010 outside a small cafe in Salisbury England, and give it a border and a shadow to produce a more finished 3D look.<\/p>\n

\"EnglandRainChair\"<\/a><\/p>\n

By opening the text editor tab, I located the code that inserts this image into my post.<\/p>\n

<a href=”http:\/\/rockylouproductions.com\/blog_wp\/wp-content\/uploads\/2013\/09\/EnglandRainChair.jpg”><\/span><img<\/strong> class=”size-medium wp-image-2841 alignnone” alt=”EnglandRainChair”<\/em><\/span><\/span> src<\/strong><\/span>=”http:\/\/rockylouproductions.com\/blog_wp\/wp-content\/uploads\/2013\/09\/EnglandRainChair-300×225.jpg” width=”300″ height=”225″ \/><\/a><\/span><\/p>\n

What I needed to do was to add an extra bit of HTML code to add some\u00a0STYLE<\/span> to the image. I found a quick tutorial on-line on how to create borders around stuff at:\u00a0\u00a0http:\/\/wpbtips.wordpress.com\/2009\/10\/14\/borders-pt-1\/<\/a><\/p>\n

For a border around an image, you insert a style definition between the img<\/strong> and the src<\/strong> tags of the image code:\u00a0<img<\/strong> style=”border:1px TYPE #HEX;”<\/span> src<\/strong>=[etc. etc.]<\/em><\/p>\n