What is HTML and how do I use it to create HTML pages?

HTML is Hypertext Markup Language using which only your web pages(posts) will be displayed on the web browsers such as Internet Explorer, Mozilla Firefox etc. HTML is a set of tags that use to format/display the content in whatever the way you wanted.

All the tags, with some exceptions, will have Start Tag and End Tag. The tags are nothing but a special notation of discriminating from the other content. For example, below is the way of making your content bold.

This content is in bold.

The and are the start and end tags respectively. The end tag will have same keyword with an extra back slash ("/"). Here is the output of the above code.

This content is in bold.

Typical categories of HTML tags that I can use for my posts

Formatting Tags:

Mostly you will use formatting tags as you require formatting of the content most of the times. The various types of formatting you can use are bold, italic, underline, Strike Through etc. Here is the examples of using them.

Usage

This is in bold

This is in bold

This is in Italic

This is in Italic

This is underlined text

Thus is underlined text

This is strike through text

This is strike through text

U can nested one or more tags within other tags to archive the combination like bold and Italic, bold and underline, Italic and underline etc.

Paragraph Tag & Alignment Attribute

As you write paragraphs in your notebooks, you can define the paragraphs for your content in HTML as well. Use

tag to achieve this. You can make the text align in left, right, center or justified. One of the easiest way to achieve these alignments is use align attribute of the paragraph tag. See below example.

 

This text is aligned left side.

This text is aligned left side.

What are attributes?

Attributes are nothing but the add on types for the original tags through which we can add additional functionality to the tag and in turn to the content. Attributes will be specified in side a tag and the types of attributes vary from tag to tag. For example, the align attribute which is available with the paragraph tag may not available with other tags.

Ordered List & Unordered List

Often you find interested to present some content in terms of points. For that purpose, the Ordered list and Unordered lists are useful. Ordered list will automatically adds the numbers starting from 1 to your points. You can alter this behavior which is an advanced topic and is out of scope of this topic. Unordered list will present the points in bullet list. See the examples below.

  1. This is first point of ordered list.
  2. This is second point of ordered list.
  3. This is third point of ordered list.
  • This is first point of unordered list
  • This is second point of unordered list.
  • This is third point of unordered list.

To create an ordered list, you need to use <

    • tag. Each of the point inside, either ordered or unordered list, should be specified by the
    • tag. You can use any other formatting or alignment tag inside the tag.The HTML code to produce the above lists is shown below.
  1. tag and for an unordered list, you need to use
<ol>
<li>This is first point of <b>Orderedb> list.li>
<li> This is second point of <b>Orderedb> list.li>
<li> This is third point of <b>Orderedb> list.li>
<ol>

<ul>
<li>This is first point of <b>Un Orderedb> list.li>
<li> This is second point of <b>Un Orderedb> list.li>
<li> This is third point of <b>Un Orderedb> list.li>
<ul>

The blockquote tag

When you want to give some indent to the paragraph you are writing blockquote tag will be used to achieve it. You can use as many blockquote tags to give as many indents. You can nest one in other as well. See the example for blockquote tag below.

<blockquote>
This is indent in one tab
<blockquote> This is indent text with two tabs

The output would be as shown below.

This is indent in one tab
This is indent text with two tabs
This is again one tab indent text

The FONT tag

The next tag which is most important tag which is Font tag. All of us know what font is. Font tells the format of the text like style, color etc. Using the attributes of the Font tag you can format the text in whatever the way you wanted. For instance, you can colorize the text,align the text in whatever the direction you want, apply styles etc.

You can use the color codes or color names to give the color to the text.

<font color="red">This is colored in redfont>

Below is the output:

This is colored in red

This is also colored in red using color code

The Anchor link tag

Confused of creating hyperlinks within your content? Its very much simple. Creating the hyperlinks or simply links in HTML can be done using the anchor() tag. You can specify the attributes to the anchor tag which will add special properties like styles etc.

<a href="http://www.boddunan.com"><b>A world of technical informationb>a>

The output would be as shown below.

A world of technical information

<a href="http://www.boddunan.com" target="_blank">This will open in new window. Try it.a>

The output of the above code will be as shown below.

This will open in new window. Try it.

Subscripts & Superscripts
Subscript & Superscript Ofter you use to publish the formulas or mathematical calculations wherein you require to use subscripts and superscripts. For example logn10 or X2-Y2 etc. Another use is when you want to display the dates, for example 28th March 2009. Please note that letters printed just above or below the normal text which are called superscripts and subscripts respectively.

To create subscripts you can use the tag.

e.g.

log<sub>esub>10=1

The output of the html text

loge10=1

Similarly, you can use tag to format the text as superscripts

e.g.

28<sup>thsup> Mar, 2009

The output of the html text

28th Mar, 2009.


Like it on Facebook, Tweet it or share this article on other bookmarking websites.

No comments