Basic HTML Training for you . Everyone should know atleast this.

Adding a little HTML to your web blog is an important technical skill for entrepreneurs who want to customize your blog’s web pages, themes or widgets to make them look their best.

This week I’m going to give you the basic skills you need to add some HTML to your WordPress or other blog to spice it up.

Some people are afraid of learning HTML, but just a little bit of knowledge can go a long way toward making your blog stand out from the rest.  It will only take you a few minutes to learn the basics.

What is HTML?

HTML stands for Hyper Text Markup Language, and it is the underlying language that the web was built on.  Every web page on the internet has underlying HTML code that tells your web browser how to show all of the text, pictures and video on the page.

To see the HTML code for a given page, use the “View Source” command on the Page menu in internet explorer (“Page Source” command on the View menu if you are using Firefox).  It may be quite complex.

You can also see the HTML for a blog post in WordPress by clicking on the HTML tab when writing a new post.  Click on the “visual” tab to go back to regular editing.

Where do I Use HTML in WordPress?

You don’t usually need to worry about HTML when you write a regular post in WordPress or other blogging software, but if you want to embed video or a form in your post you may need to switch to HTML view to do it.   A more common case of using HTML is to customize the theme of your blog or add a link or some formatting to a widget in your sidebar.

For example, if you add some HTML to a text widget in your sidebar it will show with the link, image or formatting you added.  Go to Widgets under “Appearance” in WordPress, and drag a new “text widget” to your sidebar to play around with the examples below.  Type the HTML code into the text widget, then save it and look at your web page to see the results.

Some Basic HTML Tags:

HTML works with tags – most commands have a start tag and an end tag.  The tags are enclosed in “<” and “>”, and the end tags have a slash “/” before them.  Here are some simple text formatting examples:

  • <b>This text is bold</b> gives us This text is bold
  • <i>This text is in italics” gives us This text is in italics
  • <s>Strikethrough text</s> give us Strikethrough text
  • <span style=”color:red”>This is Red</span> gives us This is Red
  • <big>This text is big</big> gives us This text is big

Adding Hyperlinks to your Blog

You can also add hyperlinks (links) to your web code – this is critical if you want to include a link in one of the widgets on your sidebar or customize a link in one of your wordpress themes.  To add a link, we use the <a> address tag.

  • <a href=”http://Stuffsneak.wordpress.com”>StuffSneak</a> gives usStuffSneak

Note how the <a> tag has an attribute called href which is the hypertext link to the actual web site.  When we use an attribute we have to include a value in quotes – in this case the address of my web site “https://stuffsneak.wordpress.com”.  All of the text following the <a> tag is underlined as a hyperlink – so “StuffSneak” is what is displayed on the site and it is linked to “https://stuffsneak.wordpress.com”.

Adding Images to a Text Widget

You may want to include an image in your sidebar along with text – in this case you use the <img> tag and include a “src” for the source of the image.

  • <img src=”https://stuffsneak.files.wordpress.com/2011/01/paypal-restrictions-in-india.jpg?w=300”> gives us
  • paypal-restrictions-in-india.jpg?w=300

In the above example, I uploaded this small phone image to my media gallery under wordpress and then copied the link from within the media gallery so I could display it.

You may also want to align your image so it wraps around your text – to do this include the “align” attribute as in:

  • <img align=”right” src=”https://stuffsneak.files.wordpress.com/2011/01/paypal-restrictions-in-india.jpg?w=300”>

The above code will place the image on the right side of your article or sidebar, and will wrap any text you have on the left side so it fills the column and looks nice.  You can also align to the left or center if needed.

Using Headline Text

You can also add headline text to your widget or theme using the <h1>, <h2>, … tags.  This is useful for captions and headings in your sidebars.

  • <h1>This is Heading 1</h1>
  • <h2>This is Heading 2</h2>
  • <h3> This is Heading 3</h3>
  • <h4>This is Heading 4</h4>

These will display as

  • This is Heading 1

  • This is Heading 3

  • This is Heading 3

  • This is Heading 4

Some Basic Paragraph Formatting

You can also format text using HTML – into paragraphs and lists.  By default, HTML will wrap all of your text together into one continuous paragraph.  Here are some of the most common formatting tags:

  • <p>This is a paragraph</p> – Creates a simple paragraph, typically with an empty space between paragraphs
  • <br /> – Adds a line break (new line).  Otherwise HTML text will be formatted as a continuous stream of text.
  • <address>This is an address</address> Lets you have multiple lines in an address/signature with line breaks
  • <ul> <li>List item one</li> </li>List item two</li> </ul> – Creates an unordered (bulleted) list with two items in it.  You can add as many items as you want  – just enclose each list item within the <li>..</li> tags and put your entire list within the <ul>…</ul> tags

Adding Custom Youtube (or other) HTML Code to a Post or Page

Another common application is pasting small snippets of code into your blog – for example embedding youtube videos to your blog or adding a custom form from another site.  Start by going to youtube or other site and copying the code you want to embed.   Then within a post or page, simply switch to HTML view by clicking on the HTML tab at the top right of your wordpress post editor and then find the insertion point for your HTML code by browsing for text in your post.

Right click on the editor and paste the code in, then switch back to visual mode by clicking on the visual tab.  You may need to save the post and preview it in order to see the effects of your addition – particularly if the code contains a video or script.

Where to Learn More?

I’ve only just scratched the surface, but the HTML codes I included here covers about 95% of the customization you will typically need to do for your basic themes and widgets.  Most of the time you are simply adding a custom link or image to your sidebar or a section of your wordpress theme.

However if you do a search for “HTML Tutorial” there are a number of detailed tutorials like this one that will show you how to do tables, lists and other more complex HTML codes.

Thanks. comments are valuable.

Advertisements
  1. I love your blog. I’ve added it to my favorite bookmarks and subscribed in a reader.

    Looking forward to reading more posts by you.

    I have some good web tutorials on http://www.webtutorials.me/tutorials.php

    Thanks.

  1. March 12th, 2011
You must be logged in to post a comment.
%d bloggers like this: