HTML Help // a guest post

September 26, 2014

I am so excited to have one of my best friends guest post on my blog!
It only makes sense for my first guest blogger ever to be this lady and I'm so happy that 
she picked this fun {and scary} subject. Hope you all enjoy and learn a lot like I did! 
Thanks a ton, Cassie!!

Hello there Living on Cloud Nine readers! I am so happy to be with you all today while Cassie is off celebrating her one year anniversary with her man in Boston! It's funny to think this time last year I was getting ready to travel to South Carolina to meet Cassie and her beau for the first time AND attend their wedding! If you haven't met your blogging friends in real life DO IT! We have cultivated such a lovely friendship, especially since meeting!

Anyways, you might be wondering who I am. My name is also Cassie, yes it is confusing. My little space of the internet is known as Sage. I am a newlywed living in the Midwest with my husband and two cats. I have a passion for my faith, the outdoors, and blogging (shocking, I know)!

When I first started blogging I honestly had no idea what I was doing. Sure, I could navigate the Blogger interface just fine, but for those of you that use Blogger, you know it isn't always the most user friendly. Luckily, I had learned some basic HTML (Hyper Text Markup Language) back in the day which became a LIFE SAVER when Blogger felt like throwing a fit. The more that I have talked the bloggers, the more that I have learned many of them do not have HTML basics in their toolkit. I know, HTML can be terrifying, but today I am here to show you that not only is it easy, but also really fun once you get the hang of it!

In my opinion, there are a few MUST knows before we get started. First, you should learn how to locate your "HTML" viewer on the Blogger post page. This is where you will need to go in order to use HTML in your blog posts.

Once you have located this, you are ready to start writing HTML! Many of the commands I will teach you today relate directly to many of the functions Blogger already has (like adding a link or photo), but when Blogger is on the fritz, knowing how to code it yourself can really help!

These are the most basic of commands for changing your font.  

Bold: <strong>TEXT HERE</strong>

Italics:<em>TEXT HERE</em>
Underline: <u>TEXT HERE</u>

See, it's simple enough right?

To play with font size change the statement in bold. You can specify in pixels (e.g., 15px) or words (e.g., "normal" or "large"): <span style="font-size: large;"> TEXT HERE</span>

You know those times when Blogger doesn't want to add a space between paragraphs? I do, all too well. 

To add a space between paragraphs: <br> (this is one command where you don't need to close the command with a subsequent </br>

To add a simple space between text: &nbsp; 

Want to center an image, text, or block of text? Use this code: <center>TEXT OR IMAGE CODE HERE</center>
To insert a text link: <a href="URL FOR WHERE YOU WOULD LIKE THE TEXT TO LINK TO">TEXT</a>

This is where coding gets a little more challenging, but you can do it!

To insert an image (the simplest way): <img src="DIRECT URL FOR WHERE IMAGE IS LOCATED"/> 

*note that when inserting an image, it must be uploaded to the internet (I suggest Photobucket) so that you can generate a direct link to it

To insert an image (the more advanced way). Note the text in red are my comments and not part of the code: <img border (if you want a border around your image) ="0" src="DIRECT URL FOR WHERE IMAGE IS LOCATED" height="326" width="640" /> 

If you do not want to specify a height or width for your image, simply leave that off. I usually leave it off if my image is already scaled to the size that I want it to appear. 

To add an image that has a link: <a href="URL FOR WHERE YOU WOULD LIKE IMAGE TO LINK TO"><img src="DIRECT URL FOR WHERE IMAGE IS LOCATED"/></a>

Once you become more familiar with HTML and SEO, you might want to add titles to your image code, but this is another lesson in itself. 

I hope this was helpful to you! If you ever have any questions please do not hesitate to contact me, I totally geek out on this stuff!

post signature

No comments:

Related Posts Plugin for WordPress, Blogger...
CopyRight © | Theme Designed By Hello Manhattan