Blogging 101: Basic HTML Codes

Welcome to the 4th week of Tip Junkie’s Blogging 101 series!

This Week’s Question:

Q: How do I change the appearance of my font in my posts/sidebar gadgets/navigation bar?

A: I’ve received some questions about how you alter the look of your text, so I thought I’d share some HTML basics.  Here is a list of different codes you can use on your blog!

For my examples I am going to use the codes on a sidebar gadget, but you can use them anywhere on your blog that you are able to type!  If you are using the codes in your posts, simply make sure you are under the “Edit HTML” tab instead of the “Compose” tab.  From there you can type just as you normally would!

I started out by typing the words “Your Text Here”.   It appeared like this:

Now I’m going to show you what happened to my text when I used the different codes.

• Bold: <b>Your Text Here</b>

• Italics: <i>Your Text Here</i>

• Underline: <u>Your Text Here</u>

• Strikeout: <s>Your Text Here</s>

• Center: <center>Your Text Here</center>

• Change your font color: <font color="#******“>Your Text Here</font>
  • To change your font color, you need to have the six digit code of the color you want to use.  These digits replace the asterisks in the code above.  If you don’t know the code of the color you’d like to use, try this website.
  • On the site, simply click on a color square and then write down the six digits it gives you.  In the example below, I chose a green color and highlighted the digits it gave me in purple.

  

• Change your font size: <font size=”***“>Your Text Here</font>
  • To change the size of your font, you will need to replace the asterisks with any number from 1 – 10.  For my example, I used the number 5.

• Change your font style: <font face=”***“>Your Text Here</font>
  • To change your font, you will need to replace the asterisks with the name of a font.  Some common examples would be Times New Roman, Comic Sans MS, Arial, Helvetica and Century Gothic.  You can use any font that you would like, but readers will only be able to see fonts that they also have on their computers.  For this reason, it’s often a good idea to choose basic fonts such as the ones I listed above.  For my example, I am going to use Comic Sans MS.

You can use multiple codes at one time by simply making sure that your text goes in between the beginning and ending codes.  Here’s an example of what my HTML would look like if I wanted to use both the bold code and the font size code at the same time:

<b><font size="5">Your Text Here</b></font>

I’m really encouraging you to play around with these different codes this week!  You can try them out on your navigation bars that we created using this tutorial or really anywhere else.  They are all great ways to spruce up the look of your blogs.  Good luck!

Do you have a question you want me to answer?  Leave a comment!

P.S.  If you’re looking for ways to promote your blog, check out 31 Days to a Better Blog over on the SITSgirls Community.