HTML Coding

Even though your blog is pretty much self-sufficient when it comes to coding, there are still some times you need to tweak something or add some html to your post or sidebar to make your blog look just the way you want it.  Today, I am going to share some easy and useful HTML codes, as well as how to add these to your blog in WordPress and Blogger.  HTML stands for Hyper Text Markup Language and is used to describe web pages.  Everything that is on your blog– from the background to the font is all coded with HTML.  Its really kinda cool if you think about it.

The best place to work with HTML coding is in your Notepad (Windows)  or TextEdit (MAC)  on your computer.  It is better than typing right into a HTML text widget because you can see what you are doing and even enlarge the font, if needed.

Ready?  Let’s get started.

HTML consists of tags– tags look like this:  <tag> I AM A TAG</tag>.  Depending on what you put in between the <> tells the code what to do.  For example,  <H1>Hello!  This is a heading!</H1> will give you this:

heading

The <H1> tells the code to start with the heading 1 information and then the </H1> tells the code to stop with the special format.  Easy, right?  The most important thing is to always remember to “open” and “close” your tags.

 

Here are some simple HTML codes you might use:

Web Link

<a href=”http://“>LINK TEXT</a>

Where I have highlighted is the items you would need to change– the actual web address goes in the first section within quotations, and then the text you want to show up on the page goes in the second section.  Using the exact example I showed, this is what you would get:

LINK TEXT

Clicking on the LINK TEXT would take you to my home page.

Do you want your link to open in a new window?  Try this:

<a href=”http://www.minivandreams.com/” target=”_blank”>Mom on the Run x2</a>

The target=_blank tells the code to open in a new window.

Formatting Text

Say you want to add some text in your sidebar– you will notice there is no way to click a button to add special formatting like bold, italic, or underline.  So, what do you do?

<b>BOLDED TEXT HERE</b>

<i> Italic Text Here</i>

<u>Underlined Text Here</u>

But, say you want it to be both bolded and italicized?

<b><i>TEXT HERE</b></i>

As I said earlier, the most important thing is that you close any tags you open… otherwise it could affect other elements you weren’t expecting.

Adding an Image

Now, here is where the fun begins!  First, you need to have the URL of the image you are using– this means that you need to upload it to your media library on WordPress or Blogger.  You can also use Flickr or Photobucket or another picture sharing site.

Here is the code:

<img src=”URL OF PICTURE” alt=”Search Text“>

For example:

<img src=”http://www.minivandreams.com/wp-content/uploads/2013/04/adorablebutton.png” alt=”Mom on the Run x2 Button>

Always add an alt text that describes the picture– when Google and other image search engines look for images– they reference the alt text, not the title of the picture.

You can also change the size of the picture from within the code, rather than adjusting it in a photo editor.

<img src=”http://www.minivandreams.com/wp-content/uploads/2013/04/adorablebutton.png” alt=”Mom on the Run x2 Button” width=”250” height=”250“>

Lists

There are two types of lists:  unordered lists that uses bullets and ordered lists that use numbers.

An unordered list is set up using this code:

<ul>
<li>Pens</li>
<li>Paper</li>
</ul>

It will look similar to this:

  • Pens
  • Paper

An ordered list is set up using this code:

<ol>
<li>Pens</li>
<li>Paper</li>
</ol>

It will look similar to this:

  1. Pens
  2. Paper

Putting It All Together

You still with me?  Let’s put it all together.  On the right side of your screen, in my sidebar is the following section:

Mom on the Run x2

 

That is all HTML coding!  So, how is it done?

Here is the code:

<center>
<a href=”http://globalteamof200.tumblr.com/tagged/Julia-Gibson” target=”_blank”><img src=”http://www.minivandreams.com/wp-content/uploads/2013/01/globalteamof2006-1-e1357753828650.png” alt=”Global Team of 200″/></a>
<b>Our Motto:</b> Individually we are all powerful. Together we can change the world. We believe in the power of collective action to help others and believe in ourselves to make this world a better place for our children and the world’s children.</center>

The <center> and </center> tags, tell the code to center the entire input.

The first part of the code (highlighted in blue text) is the link portion of the picture.  This allows a visitor to click the picture and be taken to the link.  I have it set up as a blank target so it opens in a new window.  The second section, highlighted in red shows the location and alt tag of the picture.  At the end of this first section, you can see the attribute was closed with an </a>.

The second section (in green) is just text that has been formatted using HTML.  You can see by my tags the “Our Motto” is bolded and the rest is regular font.

 

Adding HTML Code in WordPress

To add HTML code in your sidebar, go to Appearance, then the Widgets Screen. Drag over a Text widget to your sidebar.  Either type your HTML code or copy and paste it from the notepad.  Click Save.

 

Adding HTML Code in Blogger

Open your Blogger dash page and click on the Layout button.  Click “Add a Gadget” where you would like the sidebar item to be located. Choose to add an html/java script gadget.   Type or copy and paste your code into the box.  Click Save.

 

Click here for a printable .PDF cheat sheet.

 

Questions, comments?  Something else you’d like me to show you?  Leave a comment or use the contact form!

 

[php snippet=6]

[php snippet=8] 

One thought on “HTML Coding

Comments are closed.