Blogging Does Not Mean Coding – Learn Some Basic Blogger HTML Codes

Now-a-days most of the web-publishing platforms come embedded with formatting tools to make your post look like the way you want it to be. Formatting has become very easy with such types of platforms. A lay man need not know about various HTML tags that were used in the earlier days. But knowing them can add an extra effect in your content. It may also fasten up your working speed.  Learning basic HTML codes can provide you leverage in your web writing. Blogger HTML codes can come very handy at times, when publishing platforms do not produce desired results.

html basics notepad Blogging Does Not Mean Coding   Learn Some Basic Blogger HTML Codes

What are HTML tags?

In a very simple language, a tag is a simple code that web designers put on their site to tell the browsers on how to display what those tags contain. They are used as angled brackets (<>) in codes.

Tags have a start (<…>) which commands the browser to start execution and an end (</….>). A ‘/ ‘ before the tag represents its end. So basically they are represented as <> </>. Some of the common HTML tags are shown below. But depending on your web-publishing platform and CSS template, these tags may take different appearances.

A.  Basic Formatting Tags

  • <b>bold</b>
  •  <strong>strong</strong> (usually bold)
  •  <u>underlined</u>
  • <i>italics</i>
  • <em>emphasis</em> (usually italics)
  • <strike>strike through</strike>
  • <center>This centers text on the page</center>
  • <tt>teletype text</tt> (typewriter text)
  •  <blockquotes>blockquotes</blockquotes> (depends on CSS template)

B.  Link tags

  • Basic Link: <a href=”url”>link title></a> (where ‘url’ is the page to be linked to and ‘link title’ is the words that you want the link to say.
  •  Email Link: <a href=”mailto:EMAIL”></a> (where ‘EMAIL’ is the email address you want to link).

C.  Heading Tags

Heading tags may vary according to CSS.

  • <h1>An bigger heading</h1>
  • <h2>A slightly less bigger heading than h1</h2>
  • <h3>A less bigger heading than h2</h3>

Similarly it goes up to h6 where it displays the smallest heading.

D.  Span Tags

Font tags were formerly used for span tags. Here is a list of sites that can help you out with span tags.

E.  Image Tags

  •  Basic Image tag: <img src=”url”> (where url = the url of the desired image you want to show)
  • Image sizing: <img src=”url” width=”120″ height=”40″>
  • Image alignment: <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right).
  • Alt Tags: <img src=”url” alt=”short description of image”> (an alt tag is a short description which shows up when the mouse is hovered over the image area when it doesn’t load in the browser.
  • Image as a link: <a href=”link url”><img src=”url”></a> (where ‘link url’ is the URL of the page you want the image to link to and ‘url’ is the image location).
  •  Image with border: <img border=”1.5″ src=”url”> (the larger the number in the border “”, the thicker the border).
  • Space around Image: <img src=”url” hspace=6 vspace=8> (hspace is the horizontal space and vspace is the vertical space. The numbers are the amount of pixels surrounding the image)

 Blogging Does Not Mean Coding   Learn Some Basic Blogger HTML Codes

F.  Unordered lists (Bullets, squared and different types can be shown)

<ul>

<li>the first list item</li>

<li>the second list item</li>

<li>the third list item</li>

</ul>

G.  Ordered Lists (usually numbered lists)

<ol>

<li>the first list item</li>

<li>the second list item</li>

<li>the third list item</li>

</ol>

You can find a complete HTML tutorial along with CSS in http://www.w3schools.com/.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s