How to Make Money by Blogging

How to Make Money by Blogging

Thousands of bloggers make money online by blogging and it's a hot topic of discussions today. We all will agree that today most of the new bloggers start a blog with the prime intention of making money after hearing success stories of other bloggers. But the question remains unanswered. How to make money by blogging?

Monetizing your blog through ad channels, referral programs, and affiliate programs are some of the ways to make money online. In this blog post, we will see a few more ways of making money by blogging. But, is that so easy? No, it isn't.

Blog traffic and monetization

In today's time if and only if our blog has a significant amount of traffic coming in regularly, then only we will be able to see the benefits of monetizing a blog. Only huge blog traffic can help you to sell web services or products through advertising. 

Now there are plenty of bloggers who will advise writing blog articles frequently and wait for years to make money by blogging. Well, that could be true but not necessarily has to be true in all cases.

I started this blog in mid-2017, tried deliberately to generate traffic but was disappointed to see no traffic coming in. Demoralized by this I didn't publish any new content in the coming time. For the next year, I more focused on updating the content and getting more views on the existing blog posts. 

Eventually, the efforts paid off. A few blog posts started to show up in the first 10 results for desired keywords. I applied the same strategy to all blog posts and traffic for these posts is also improving slowly. With that positive change monetization programs also have taken a boost.

To make ads work effectively on our blog, we must add good quality content. I have written a separate article with plenty of useful tips on how to write a perfect blog post. I am sure these tips will come in handy to you too. Our work doesn't end there, these articles need to be updated frequently to get more traffic.

Once you have regular traffic coming into your blog, the next process is to sell services or products to this traffic by monetizing the blog. This could be through affiliate programs, ads, paid reviews, etc.

Let us have a look at all the possible methods through which we can monetize our blog and make money by blogging.





I have divided the monetization methods broadly into two categories:
  • Basic methods: The basic methods could be helpful to those who are new to monetizing a blog. Bloggers having no previous knowledge of monetization can begin by learning about these methods. Having said that one shouldn't restrict themselves to this method only.
  • Advance methods: Advance monetization methods may require a blogger to have or develop a specialized skill to sell the service or product. However, with little help from experts or bloggers with good technical skills in this domain can make use of these methods too.

I. Basic methods of making money by blogging:

1. PPC (Pay Per Click) Advertising

In pay-per-click advertising, an advertiser pays to the blog owner when a displayed ad is clicked by the visitor. Pay-per-click advertising is also known by the term cost-per-click.

A blog owner isn't paid until a user clicks on the ad. In other words, you will not earn money with your blog for displaying ads, but those ads have to be clicked by visitors. This advertising method is slower and only works when you have a good amount of traffic to a blog. 

2. CPM (Cost per thousand impressions) advertising

Cost per thousand impressions as the term itself suggests that a blogger gets paid for a thousand impressions of an ad from a blog page. An impression is nothing but a single occurrence of an ad on a web page.

This type of advertising works well for blogs having higher or mid-range traffic.

So if a blogger charges $1 for 1000 impressions, he will receive $1 on completion of 1000 views of an ad. Amazon CPM is an example of CPM advertising.

3. Affiliate marketing (most used method to make money by blogging)

Affiliate marketing is a bit different from the above two methods we discussed. This type of advertising has a huge potential to make money online. Most of the renowned bloggers use this method as a primary source to make money by blogging.

In affiliate marketing, a blogger displays an ad or link to sell a product or service from the advertiser's website. On a successful sale of a service, a blog owner receives a certain share of the sale as revenue.

Affiliate marketing ads could be successful if you have good authority over the audience. Since the audience has trust in you, they are more convinced, which helps to sell the services/products.





4. Donations

Well, this is a bit grey area and this method may work and may not work in some cases. It depends on the blog traffic and overall goodwill of your blog. If we have leadership quality and good bonding with the reader's donations ads might work as well.

So usually a blogger places a PayPal or nowadays a UPI link and asks readers to donate the blog owner. Of course, the approach has to be humble, your blog must add value to the readers and you must have a good relationship with the readers.

5. Blog Selling

You might have heard about the selling of the online businesses to a third party and earn revenue through it. The best example would be that of YouTube. It was created by three former employees of PayPal. A year later it was bought by Google in the year 2006 for US$1.65 billion.

But making money by selling a blog isn't that simple. Someone would buy your blog only if they feel it has the potential and it would be beneficial for them in the future. So, for it, you will have to work on making it popular and earn goodwill for the same.

Many bloggers prefer to work on the methods as this to make money by blogging in a short time. They create a blog, work on it to make it a brand, and then they sell it for money.

II. Advance methods to make money by blogging:

1. Writing a sponsored blog post or a review

Positive traffic flow to your blog brings all new channels of opportunities that can help you to make money by blogging. Writing a detailed and factual review is one of these opportunities.

A sponsored blog post or a review can convert your blog visitors from normal readers to a consumer.

Additionally, you can generate revenue through the lead you just converted. This is quite similar to affiliate marketing. But within this case, you write an entire blog post or review to make the sale. Though to earn readers trust a review must be unbiased and based on the true facts.

2. Paid membership service

A paid membership service may include exclusive web pages that are password protected and available to members only. It could also be a premium series of emails sent to the members only.

If your blog is about providing solutions to the problems of the readers, a paid membership service might work just well in the course. You may think of providing exclusive solutions to the reader's problem which are scarcely available in the market.

Two key points to remember while providing paid membership service are:

  • Your service has to be superbly qualitative, and users must feel it valued for the money they are paying.
  • There has to be regularity as to how often a visitor will be able to use the service in pre-decided time.





3. Sell eBooks, products or services

Selling eBooks, products, or services that are relevant to your blog content may also generate revenue for you.

In this matter, a WordPress like a platform helps a lot to set up space for selling eBooks, digital services, and even physical products. Various plugins make your job painless and assist you in the selling process.

4. Event marketing and making money by using a blog

Event marketing is nothing but promoting products, services, or brands through personal interactions with visitors. It could be in the form of a webinar or a live workshop.

Event marketing helps advertisers directly connect with their end-user, it enables smooth flow of interaction, question, and answers are exchanged in real-time.

Arranging such events through your blog not only creates revenue channels but increases chances of getting larger exposure to your blog on the internet.

Conclusion:

The basic methods to make money by blogging are PPC advertising, CPM advertising, affiliate programs, donations, and blog selling. These are widely used methods and may generate the least income as compared to advanced methods.

The advanced methods of making money by blogging include writing sponsored reviews, paid membership services, selling products or services, and event marketing.

The advanced methods of making money by blogging may require specific setup on your blog to sell the services or products. The earnings earned through these methods is higher as compared to the basic methods listed above.

If you think there are more ways to make money by blogging, then let me know through your comments. Let us know how was your experience reading this blog post.

Check out my new blog post on Top 5 Advertising Programs to Earn Money from Your Blog. Support me through your comments, shares, and likes. Thanks!

Introduction to HTML


* HTML stands for Hypertext Mark-up Language.
* Hypertext refers to the text that has been decorated in some way.
* It is called markup language because everything is marked up by using tags like,
<strong>It displays text in Bold</strong>
* HTML is used to create active documents.
* It is specific type of language that can be used to develop a web page.

Tags

* Tags are instruction or set of symbols that are written into the text of document & have special meaning.
For eg. <html> ,<head>,etc.
* Tags are sometimes called as HTML elements.
* Tags may have one or more attributes.
* Tags can be use in the pairs or in single depending upon their type.
For eg. <strong>..text..</strong>.
* It causes anything between <strong> & </strong> to be rendered in Bold.

Attributes

* Attributes provide additional information about HTML elements.
* A HTML element may have one or more attributes.
* Attributes are specified in opening tag of HTML element.
* Attributes are written as attribute_name="Its_value"
* For eg. <a> is used with its href attribute as follows:
<a href="http://blogging-hacks.blogspot.com">This is a link text</a>

<meta> tag in HTML


<meta> tag

This tag provides additional information about web page. This tag belongs to document header & has no contents in between <meta> & </meta> tag. Metadata is data or information about data. Meta tag is typically used to specify page description, keywords, author of the document, last modified, and other metadata. This tag don't have closing tag.
It has following attributes:
Attributes DescriptionValues
name : Identifies the name with meta information. author, description, keywords, generator, revised
content : Provides the contents of meta information.text
scheme : Defines a format to be used to interpret the value of the content attribute.Gives the user agents more context for interpreting the information in the content attribute. format/URL
<head>
<meta name="description" content="Learn HTML programming" />
<meta name="keywords" content="HTML, tag, meta tag" />
<meta name="author" content="Ramesh" />"
</head>

<applet> tag

This tag is used to download & execute an applet. An applets are developed with Java Programming Language & are mini programs the manages web page contents.
Browsers that do not supports Java ignores anything between <applet> & </applet> tag.
It takes following attributes:
Attributes DescriptionValues
align : Specifies the horizontal alignment of applet displayed.left, right, top, bottom, middle, baseline
alt : Displays the textual description of an applet.text
code : Specifies the location of the Java byte code file on the server.URL
codebase : Specifies folder location of all necessary class files on the web server.URL
height : Sets the height of the applet window.pixels
hspace : Specifies the amount of blank space at left & right of the applet window.pixels
name : Labels the applet to identify it.name
title : Sets the label assigned to tag.text
vspace : Sets the amount of space to the top & bottom of applet object.pixels
width : Sets the width of an applet. pixels

<param> tag

This tag is paced after the <applet> tag. This tag provides parameter for applets within the <applet> tag.
It has no contents & end tag.
Attributes used with this tag are:
Attributes DescriptionValues
name : Name of the parameter passed to the embedded object.name
value : Specifies value for the parameter.value

Adding audio and video in a web page


<video> tag

The <video> tag can be used if you want the video to appear on the web page.
The controls attribute let you add video controls, like play, pause, and volume.
The <source> tag associated with this tag let you specify alternative video formats. Browser will play the video file which is been recognized firstly among the formats specified. .mp4 is the most commonly recognized video format by the several browsers.
It has following attributes:
Attributes DescriptionValues
height : Set the height of the window for video to be appear. pixels
width : Sets the width of the window in pixels or percentage of available screen resolution.pixels
name : Provides label for embedded object.text
autoplay : Sets whether the media element should start automatically or not. true or false
loop : Allows you to have the movie play continuously.
true-plays forever from start to end
false-pays once
palindrome-plays forever forwards and backwards
true, false or palindrome
controls: Specifies whether you want the media controller bar to be shown or not. true or false
The <source> tag has following attributes:
Attributes DescriptionValues
src : URL of the video file.URL
type : file format of the video file.Video/mp4, Video/WebM, Video/ogg

Now let see the eg.
<video height="315" width="420" controls="true" autoplay="true" loop="true" > <source src="flower.mp4" type="video/mp4"> <source src="flower.ogg" type="video/ogg"> </video>
Output:


<audio > tag

This tag can be used to play an audio in the HTML file.
The controls attribute let you add audio controls, like play, pause, and volume.
The <source> tag associated with this tag let you specify alternative audio formats. Browser will play the audio file which is been recognized firstly among the formats specified. .mp3 is the most commonly recognized audio format by the several browsers.
It takes following attributes :
Attributes DescriptionValues
name : Provides label for embedded object.text
autoplay : Sets whether the media element should start automatically or not. true or false
loop : Allows you to have the movie play continuously.
true-plays forever from start to end
false-pays once
palindrome-plays forever forwards and backwards
true, false or palindrome
controls: Specifies whether you want the media controller bar to be shown or not. true or false

<audio controls loop="2" >
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio >

Create user Form in HTML


Creating a form

Form is the way to collect information from user by giving inputs.
Form may contain text boxes, clickable buttons , multiple choice check boxes, pull down menues & image maps.
A web page can have more than one form & other body content can also be put on same page.

<form> tag

To insert a form in web page <form> & </form> tags are used.
This tag have following attributes:
Attributes DescriptionValues
action : Gives the URL of the application that is to receive & process the forms data. URL
method : Sets the method by which browser sends the forms data to the server for processing.Value for this attribute can be
get :Web browser submits the form.
post:The web browser sends the forms data separately from the URL as a stream of bits.
get or post
target : Where to open the result form to another window or frame. _blank, _self, _parent, _top, framename

<input> tag

The <input> tag is used for managing the inputs from the user.
It provides following attributes:
Attributes DescriptionValues
align : Sets the the alignment of an image input.left, right, top, middle, bottom
alt : Sets the an alternate text for an image input.text
checked : Used for an input element to be preselected when the page loads (for type="checkbox" or type="radio")checked
disabled : Used for an input element to be disabled when the page loads.disabled
size : Sets the width of the input control in pixels.number
maxlength : Sets the maximum numbers of input characters allowed in input control.number
readonly : Used when an input field should be read-only (for type="text" or type="password")readonly
src : The location of the image that can be used for graphical buttons.URL
name : It is used to give name for each name field. Name can be in string & symbols & underscore(_) can also be used herewith.name
type : Here you can select type of input field. button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week
value : Defines the value of the option to be sent to the server.text

<textarea> tag

This tag creates text multi-line input area in a form.
Attributes:
AttributesDescriptionValues
name : Sets label for text input area.name_of_textarea
rows : Set the number of lines to be in the textarea.number
cols : Sets number of characters to be inserted in horizontal line.number
disabled : Sets a text-area to be disabled.disabled
readonly : Sets a text-area to be readonly.readonly

<label> tag
This tag defines a label for an input element. It toggles the control.
Attributes:
AttributesDescriptionValues
for : Sets which form element a label should bound with.element_id

<select> tag

This tag is use for creating drop-down menu or text list menu, depending upon the attribute selection. <option> tag inside an <select> element defines a list items.
Attributes of this tag are:
Attributes DescriptionValues
disabled : It disables the drop-down list.disabled
multiple : It specifies that multiple items can be selected at a time.multiple
name : Defines a unique name for the drop-down list.unique_name
size : Defines the number of visible items in the drop-down list.number

<optgroup> tag

<optgroup> tag is used to keep together related list-items. It is specially used when you have large number of option in a list.
Attributes:
Attributes DescriptionValues
label : Sets description of list items.text
disabled : Specifies that the option group should be disabled when it first loads.disabled

<option> tag

This tag is written just after the <select> tag for creating individual list item within the menu.
Attributes of <option> tag are:
Attributes DescriptionValues
disabled : Specifies that the option should be disabled when it first loads.disabled
label : Defines a label to use when using .text
selected : Specifies that the option should appear selected (will be displayed first in the list).selected
value : Defines the value of the option to be sent to the server.text

<button> tag

<button> tag is used to create button in the form.

This tag have following attributes:
Attributes DescriptionValues
disabled : Specifies that the buuton should be disabled when it first loads.disabled
name : Specifies the name for a button.text
type : Specifies the name for a button.button, reset, submit
value : Specifies the text that goes on button.text

Now let's see the eg. showcasing usage of above tags:
<form>
First name:<input type="text" name="firstname">
Last name:<input type="text" name="lastname">
Password:<input type="password" name="lastname">
More about you: <textarea rows="3" cols="25">This is default text.</textarea>
Select your gender: <input type="radio" name="gender" value="male"><label for="male">Male</label><input type="radio" name="gender" value="female"> <label for="female">Female</label>
Select sports you like:
<input type="checkbox" name="sport" value="Tennis">
<input type="checkbox" name="sport" value="Cricket">
<input type="checkbox" name="sport" value="Football">
Select from the list:
<select>
<option>Tea</option>
<option>Coffee</option>
<option>Soft drink</option>
<option>None</option>
</select>
<input type="reset" value="Reset"> <input type="submit" value="Submit">
</form>
Output:
First name:

Last name :

Password :

More about you:

Select your gender:
Select sports you like:
Tennis
Cricket
Football
Select from the list:



Image mapping - Creating multiple links on a single image


Image mapping

Image mapping refers to the single graphic that can be used for multiple links.
There are two ways for image mapping :
1.Server sided mapping
Which requires browser to work with server to interpret your image map.

2.Client side mapping

The browser can map interpret mapped data without depending on server to do so. The <map> & <area> tags are used for client side image mapping.

The syntax for image mapping is :
<img src=http://prog101.blogspot.com/xyz.jpg usemap=map_name >
<map name=name_for_map >
<area shape=shape coords=coordinates_for_shape href=URL_of_web_page>
</area>
</map>

<map> tag

This tag is used to define a client-side image-map.
The name attribute is required in the map element. This attribute is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
Further more the map element contains a number of area elements, that defines the clickable areas in the image map.

Attribute:
AttributesDescriptionValues
name :Defines unique name for map to be used with <img> tag.mapname

<area> tag

This tag defines the geometric regions of client side image map & the associated link. This tag is responsible for dividing image into parts.
Following are the attributes for this tag:
AttributesDescriptionValues
alt :Provides textual information to visitors.text
coords :Defines coordinates within an image map that define image map area.coordinates
href :URL of the web page when user clicked particular image map area.URL
shape :Specifies type of shape used to represent the map area. The values can berectangle :For this coords is set to four integer numbers.
circle :For this coords is set to three integer numbers.
poly :For this coords is set to six integer numbers.
default, rect, circle, poly
target :Name of the frame where the web page will open after clicking the image map area._blank, _parent, _self, _top

Here is an eg. of client-side image mapping:
<img src="https://sites.google.com/site/developthecode/flower11.jpg"
width="145" height="126"
usemap="#flower">
<map id="flower" name="flower">
<area shape="rect" coords="0,0,82,126" alt="Rectangle" href="http://www.blogging-hacks.com/">
<area shape="circle" coords="90,58,3" alt="Circle" href="http://www.blogging-hacks.com/">
</map>
Output :


Rectangle
Circle

Creating table in HTML


Adding tables in your documents

<table>:
The <table> tag defines a table within a body of the document. A table is divided into rows and columns. <tr> tag is used to define a row in the table and <th> or <td> tag defines a column. The <table> tag may contains other tags which are always written in between <table> & </table> tags.

Attributes of this tag are listed below:
AttributesDescriptionValues
align :Sets the horizontal alignment of the table.left, center or right
bgcolor :Sets the background color for a tablergb(x,x,x), #xxxxxx or colorname
border :Sets the size of border to be displayed around the table.pixels
cellpadding:cellpadding sets the distance between the data in the cell &cells boundaries.pixels eg. cellpadding=10px
cellspacing:Sets the distance between two adjacent cells.pixels
width :Sets the width of the table to specific number of p
ixels or percentage of available screen.
pixels, %

Other tags used within a <table> tag are :
<tr>:
The <tr> tag defines rows in a table. This tag ends with </tr> tag. A single row may contain multiple cells. A <tr> tag contains one or more <th> or <td> tags.
Attributes of <tr> tag are:
AttributesDescriptionValues
align :Sets the horizontal alignment of the cell content.right, left, center or justify
valign :Sets hte vertical alignment the cell content.top, baseline, center or bottom
bgcolor :Sets the background color for a tablergb(x,x,x), #xxxxxx or colorname

<th> & <td>:
These tags are used to create table cells. The only difference between these tags is <th> tag gives heading to each column in table. Anything between <th> & </th> tag get displayed in boldface's. Whereas <td> tag displays normal text.

Attributes:
AttributesDescriptionValues
align :Sets the horizontal alignment of the cell content.right, left, center or justify
bgcolor :Sets the background color for a tablergb(x,x,x), #xxxxxx or colorname
valign :Sets hte vertical alignment the cell content.top, baseline, center or bottom
width :Sets the width of the individual cell to specific number of pixels or percentage of available table.pixels, %
height :Sets hte height of the cell.pixels, %
colspan :Set to number of columns to be merge together.number
rowspan :Set to number of rows to be merge together.number

<caption>:
This tag is used to explain table contents & appears as table heading to top or bottom of the table. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table.

Attribute:
AttributesDescriptionValues
align :Sets the alignment of the caption.right, left, top or bottom

Following code will generate a table, lets have a look:
<table align="right" cellpadding="2" cellspacing="2" >
<caption align="top">Fruits and their Color</caption>
<tr><th>Fruit</th><th>Color</th></tr>
<tr bgcolor="yellow" ><td>Mango</td><td>Yellow</td></tr>
<tr bgcolor="red" ><td>Apple</td><td>Red</td></tr>
</table>
Output :
Fruits and their Color
FruitColor
MangoYellow
AppleRed

Another eg. to illustrate the use of colspan and rowspan attributes:
<table align="center" cellpadding="2" cellspacing="2" >
<tr><td>AAA</td><td>BBB</td></tr>
<tr><td colspan="2">CCC</td></tr>
<tr><td>DDD</td><td rowspan="2">EEE</td></tr>
<tr><td>FFF</td></tr>
</table >
Output :
AAABBB
CCC
DDDEEE
FFF

Adding IFrame in a web page


<iframe> tag:

This tag defines a rectangular region in a document in which browser displays separate web page including scroll bars & borders.
<iframe> tag provides following attributes:
Attributes DescriptionValues
align : Sets the alignment of an iframe. left, middle, right, top or bottom
src : The URL of the frame to be appear in region.URL
name : Sets the name for frame so it can be targeted.name
frameborder : Sets the border around the frame.1 or 0
scrolling : Controls the appearance of scroll bars.yes, no, auto
height : Sets the height for frame in pixels.pixels,%
width : Sets the width for frame in pixels. pixels, %

Now let's see this tags with the eg.,
Inserting iframe into your document :
<iframe src ="http://prog101.blogspot.com" width="100%" height="300">
</iframe>
Output :


How to add images in a web page


Adding images to your web page :

HTML let you display images in web page by using <img> tag. <img> tag doesn't have closing tag.

<img> tag
Images can be inserted in web page by using <img> tag.
To display an image on a page, you need to use the src attribute. Src stands for 'source'. The value of the src attribute is the URL of the image you want to display on your page.
Following are the attributes of <img> tag:
Attributes DescriptionValues
align : Controls alignment of the image.top, bottom, middle, left, right
border : Sets the size of the border to be placed around the image. pixels
src : This is the main attribute of <img> tag.It contains URL of the image where image is located.URL
width : Controls width of the image.pixels, %
height : Sets height of the image.pixels, %
hspace : It indicates amount of space to be left at the left & right of the image.pixels
vspace : It indicates amount of space to be left at the top & bottom of the image.pixels
alt : It displays text when image fails to appear in the browser or when mouse pause over that image.text

The following eg. shows the use of <img> tag:
<img src="https://3.bp.blogspot.com/-P5Y5UhTXJqc/WSsgqkK5LwI/AAAAAAAAFtw/4xQNWNZgLKgzhMY3zozWc4_2OsGWBnw_QCKgB/s320/P70507-190500.jpg">
Output :


Image as hyperlink
Image can be act as hyperlink in the following way:
<a href="http://blogging-hacks.blogspot.com/"> <img src="img src="https://3.bp.blogspot.com/-P5Y5UhTXJqc/WSsgqkK5LwI/AAAAAAAAFtw/4xQNWNZgLKgzhMY3zozWc4_2OsGWBnw_QCKgB/s320/P70507-190500.jpg"></a>
Output :


Character entities used in HTML


Character entities :

User can not directly display HTML tag ("<") or other special symbols which have specific meaning in HTML on the web page or document. HTML provide such facility by using special keywords called character entity.
Character entity starts with ampersand, followed by the name & ends with semicolon.
These special characters are displayed with the help of these character entity or thier entity numbers.
The most used character entities are:
Character Description HTML Entity Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

Creating Ordered and Unordered list in HTML


Creating list

Listing in HTML can be done in two ways :
  1. Order listing &
  2. Unorder listing.

Order listing - <ol> :

This tag format list in order list. An ordered list starts with the <ol> tag an item in a list starts with the <li> tag.
This tag have following attributes:
AttributesDescriptionValues
start : User can change start value of listing by spacifying particular number.number
type : Type of listing can be specified here.A, a, I, i or 1.
value : Sequence of order can be change by setting this attribute value.number or alphabate
compact :Specifies that the list should render smaller than normal.compact
Eg.
<ol type="a" >
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ol>
Output :
  1. Mango
  2. Apple
  3. Banana
Another example with with changed start value and sequence:
<ol type="1" start="5" compact="compact">
<li>Mango</li>
<li>Apple</li>
<li value="11">Banana</li>
<li>Guava</li>
<li>Orange</li>
</ol>
Output :
  1. Mango
  2. Apple
  3. Banana
  4. Guava
  5. Orange
* Note start value of list is 5 and in-between sequence number is changed to 11.

Unorder listing: <ul>:

Unorder list refers to the collection of related items that have no specific order sequence.
Attributes of this tags are:
AttributesDescriptionValues
type :Set the type of list to appear.bullets, disc, circle or square.
compact :Specifies that the list should render smaller than normal.compact
Eg.
<ul type="suare" >
<li>Mango</li>
<li>Apple</li>
<li>Banana</li>
</ul>
Output :
  • Mango
  • Apple
  • Banana

<li> :

This tag defines an item in the list.
This tag is used in both <ol> and <ul> to define a list.
Attributes used with this tag are:
AttributesDescriptionValues
type :Set the type of list to appear.A, a, I, i, 1, bullets, disc, circle or square.
value : Sequence of order can be change by setting this attribute value.number or alphabate

Creating Hyperlink in HTML


Hyperlinks :

Hyperlink refers to the text that is linked to other web page. Hyperlink may provide link to any resource on the web including HTML page, an image, a sound file, a movie, etc.

<a> :

To create hyperlinks <a> is used.
The value of href attribute should be the URL where the linked page is located.
For eg.,
<a href="http://blogging-hacks.blogspot.com">Blogging Hacks</a>
<a href="http://blogging-hacks.blogspot.com" name="mylink1">MYLINK</a>
Output :

When this code is executed the text between <a> & </a>(Blogging Hacks) becomes a hyperlink & when user clicks on its, he gets desired web page.
<a> tag can be used with name attribute to mark specific hyperlink.
It has the following attributes:
Attributes DescriptionValue
href : URL of the page where the desired page is located. URL
name : This attribute is used for linking within the same page.link_name
target: Value for this attribute can be name of the frame where web page will open after click or values can be of the following type:
_blank - the target URL will open in a new window ,
_self - the target URL will open in the same frame as it was clicked,
_parent - the target URL will open in the parent frameset,
_top - the target URL will open in the full body of the window.
framename, _blank, _parent, _self, _top
shape :Specifies the shape of a linkdefault, rect, circle, poly
coords :Specifies the coordinates of a linkcoordinates

Linking within same page :

See the following eg. that jumps over the above link we have created. Just click following Link.
<a href="#mylink1">Jumps to MYLINK</a>
Output :

Text formatting tags in HTML


HTML Formatting tags :

There are several tags in HTML used to format the text, like , <strong>, <em>,etc. These formatting tags can make text bold, italic, sub/superscripted and more.

<strong> tag :

It causes anything between <strong> & </strong> to be rendered in boldfaces.

<em> tag :

It defines anything between <em> & </em> to displayed in Italic.

<u> tag :

This tag underlines the text appearing in between this tag.

<s> tag :

It puts line through the text containing inside the <s> tag & its </s> tag.

<address> tag :

This tag defines information about web page such as URL, date of last version, adress, etc. It provides contact information for the author and enables readers to contact the author.

<pre> tag :

The text appearing in between <pre> & </pre> displayed in exactly same format as typed in. It also preserves
line breaks and      blank spaces.
AttributesDescriptionValues
align :Sets align of the inner content.left, right, center, justify
width :It defines number of characters per line.number

<big> tag :

This tag displays text one font size larger than surrounding text.

<small> tag :

This tag displays text one font size smaller.

<sub> tag :

This tag displays text half a character size lower. Like here,
H<sub>2</sub>O, CO<sub>2</sub>, O<sub>2</sub>, So<sub>2</sub>

Output :

H2O, CO2, O2, SO2

<sup> tag :

This tag displays text half a character size height higher. Eg.
(x+y)<sup>2</sup>, (5888)<sup>3</sup>

Output :

(x+y)2, (5888)3

<tt> tag :

This tag displays text in monospaced form.

<font> tag :

This tag changes texts size,style & color.
This tag have following attributes:
AttributesDescriptionValues
size : Defines size of text. number
face : Sets the fonts style. font_family
color : Sets color for enclosed text. rgb(x,x,x), #xxxxxx or colorname
lang : Language for a text to be appear in can be set here. language_code

<marquee> tag :

This tag causes text to be scroll across the browser.
This tag doesn't work in all browsers. Eg.
<marquee align="top" bgcolor="blue" behavior="alternate" width="50%" height="30px" direction="right" scrollamount="10" scrolldelay="1000" >This text will bounce from left to right</marquee>

Output :

This text will bounce from left to right.
It has following attributes:
AttributesDescriptionValues
align : Sets the alignment of the text to be scroll over the marquee.left, right, top, bottom or middle.
bgcolor : Sets the background color of the marquee.rgb(x,x,x), #xxxxxx or colorname
height : Sets the height of the marquee area.pixels or %
width : Sets the width of the marquee area.pixels or %
direction : Sets the direction from where the text will start scrolling.left, right, up or down.
scrollamount : How many pixels the text should moves between 'frames' is set here.pixels
scrolldelay : Smoothness of scrolling can be achieve by setting this attribute. This sets the amount of time, in milliseconds, between 'frames'.milliseconds

Adding Paragraph in HTML


<p> tag :

<p> tag or Paragraph tag defines paragraph of text. Each paragraph starts with <p> & ends with </p>. This tag contains plain text.
Eg.
<p align="right" > This is my paragraph with right align. </p>

Output:

This is my paragraph with right align.
Paragraph can be justified in four ways with alignment attribute in following way:
Attributes DescriptionValues
align :Set the alignment of the paragraph.left, right, center, justify

<br> tag :

This tag inserts line break. It has no ending tag. When user wants text to be appear on the next line this tag is used. Like in following eg. :
My address :<br> Street address 1, <br> Street address 2, <br> City, <br> Country, <br> Pincode.

Output:

My address :
Street address 1,
Street address 2,
City,
Country,
Pincode.

<hr> tag :

It displays a horizontal rule on the web page. The horizontal line displayed here after the following table is by using this tag. This tag doesn't have closing tag. This line can be drawn in several ways by using the following attributes:
Attributes DescriptionValues
align :Set the alignment of the line. By default it is centered aligned.left, center or right
size :Set the size of line in pixels.pixels
width :Sets the width of the line in pixels.pixels, percentage

<H1> to <H6> Heading tags


Heading tags :

<h1> to <h6>:

H1 to H6 are heading tags, which are used to define different heading levels. These six tags can be used to define document heading.

<h1> defines highest heading level and displays text in the bigger font as compared to other heading tags. Similarly, <h6> defines the lowest heading level which displays text in a smaller font size as compared to the rest of the heading tags.

Eg.
<html>
<head>
<title>My Heading Program</title>
</head>
<body bgcolor="blue" text="yellow">
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</body>
</html>

Attributes for <h1> to <h6>:

AttributesDescriptionValues
align:Sets align of the heading.left, right, center, justify

How to comment in HTML program


Adding comment:

To create description about html code & not to be display this description in the browser when visitor visits to the site, <!-- --> tag can be used.It is helpful while editing code.
<!--and--> sequences are used to eliminate this effect.
Eg. <!--comment can be placed here-->.

Some HTML Do's and Don'ts:

* While you write HTML code, each tag opened must be closed with its respective tag.
For Eg., <b> and </b> tags.
First tag is called opening tag and other that begins with forward (/) slash is called closing tag.
The first tag turns the action on and the second turns it off.
There are some exceptions.
For instance, the <br> tag creates a blank line and doesn't have closing tag.
* When nesting tags i.e. when you start a tag within another tag, the inner most must be closed first. Like,
<head> <title>
You page title goes here </title></head>
Where following notation is wrong as per the HTML rules
<head> <title>
You page title goes here </head></title>

* Attributes values must be closed within double quotes ("") or single quotes ('').
It is required because your attributes value may contain multiple strings and such case if it is not quoted the second word in value is considered as attributes name and it may result in Error.

First HTML program


First program

It's time to write our first HTML program. Follow below step-by-step process and create our first HTML page :

* Open Notepad, wordpad or editor of your choice and write-down or simply copy-paste following text:
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor="blue" text="yellow">
This is my page content.

Note the Title-Bar it has title as "My First Page".

Background color is set to Blue and text will be displayed in Yellow.

</body>
</html>

* Save above program with the .html extension.
* After saving file it will create one HTML file, open it and see the result.
* Code above needs no explaination as it is so simple. We have displayed page with blue background and yellow text. We have given page title.

4 Basic tags in HTML


Mainly entire HTML document is divided into two parts: the head and the body. A new HTML page must have a declaration: . It tells browser that the following file is an HTML file. Basically four primary tags are used to build any webpage: , <head>, and <body>.<h4 style="text-align: left;">Basic tags</h4> <h5><html lang="en"></h5> <p>As discussed earlier <html lang="en"> & </html> tags contain entire web-page. This tag may contain <head>, <body>, <iframe>, etc.</p> <hr> <h5><head> :</h5> <p>This tag is used to provide information for inner working of document. Document is nothing but your HTML page itself.</p> <p>It contain <title>tag, which defines document title and displayed in Title-bar of your web-browser.</p> <p><head> defines document header. This tag end with </head> tag.</p> <p>It may contain other tags that define & manage document contents. Here are these tags <base>, <link>, <meta>, <style>, and <script>.</p> <p><head> tag is placed just after the <html lang="en"> tag & before <body> or <iframe> tag.</p> <p>Head tags and thier descriptions:</p> <table><tbody> <tr><th><p>Tag</p> </th><th><p>Description</p> </th></tr> <tr><td><p><title></p> </td><td><p>It defines the document title.</p> </td></tr> <tr><td><p><base></p> </td><td><p>Defines a base URL for all the links on a page.</p> </td></tr> <tr><td><p><link></p> </td><td><p>Defines a resource reference.</p> </td></tr> <tr><td><p><meta></p> </td><td><p>Defines meta information.</p> </td></tr> </tbody></table> <hr> <h5><title>:</h5> <p>It defines document title. Anything entered between <title>& is displayed on the title-bar. It has end tag
.
<body> :</body>
It defines document body. It contains body content. It ends with <body>.</body>
It has following attributes:
AttributesDescriptionValues
alink:Defines color for active link.rgb(x,x,x) or #xxxxxx or colorname
background:Sets a background image for a document.URL
link:Sets hyperlink color which are not clicked by user.rgb(x,x,x) or #xxxxxx or colorname
vlink:Set color for link which the user had followed.rgb(x,x,x) or #xxxxxx or colorname
bgcolor:It defines document background color.rgb(x,x,x) or
#xxxxxx or colorname
text:Changes body text color from default value.rgb(x,x,x) or #xxxxxx or colorname
title:Specifies extra information about an element.text

Getting started with HTML


Where to write code?

You can use notepad or wordpad to write HTML code.
There are plenty of HTML editors available that can be used for the same purpose. These are, Dreamweaver, FrontPage, EditPlus, etc.

The most likely used one is Dreamweaver.
It not only allows you to edit HTML, but provides support for editing other languages including, CSS, Javascript, VBScript, ASP, ColdFusion, PHP, ASP.NET, XML, XSLT and some other cool features.

While saving the HTML coding file give it .html or .htm extension.


Structure of a html program.

Entire html page is enclosed between <html> & </html>
tag. These tags may contain other tags <head>, <title>, <body>, <frameset> depending upon requirement.

Basically html page has following structure:
<!doctype html>
< head>
<title >title name</title>
</head>
< body>
Document body
</body>
</html>