HTML Basics - Full Instructions and Guide


Welcome to the HTML Tutorial for novices. This instructional exercise doesn\'t oblige you to have earlier information of any programming dialect. Everything you need to have is fundamental content altering abilities on a PC!!

HTML Stands for Hyper Text Markup Language. It is a markup dialect used to make site pages. Web programs like Internet Explorer, Google Chrome, Mozilla Firefox, and so on., can comprehend this dialect and presents the website pages in the arrangement proposed by its creator.

It\'s fun and simple to learn HTML.

(This instructional exercise clarifies HTML 4.01 which is upheld by every present day program.)


To begin learning HTML everything you need is a word processor like Notepad to make the HTML record and a web program, for example, Internet Explorer to show the pages you make. So let\'s make our first website page.

Step 1: Open Notepad

Step 2: Type in the accompanying HTML code. This HTML code will be clarified in the later sections of this instructional exercise.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>My First Page</title></head><body><font color=Red><h1>A very interesting web page !!!</h1></font></body></html>

Step 3: Save the document:

In Notepad Click File->Save As

Select Save as Type: All Files

Enter Filename: FirstPage.html

Click Save

Step 4: Open FirstPage.html record on your web program. You will see the page you just made, much the same as the one demonstrated as follows.

My First Page

Components and Tags 

HTML Elements 

A HTML page is comprised of an arrangement of HTML Elements. HTML components comprise of HTML Tags and some substance.

The accompanying is a sample of a HTML component.

<h1>A very interesting web page!!!</h1>

<h1> and </h1> are the labels in this HTML component and it advises the web program to show the content - An extremely intriguing site page!!! - as heading.

HTML Tags 

The vast majority of the HTML labels come in sets - an opening tag and an end tag.

Opening labels will have a < taken after by the label name and >

Shutting labels will have a </taken after by the label name and a >

In the HTML component above, <h1> is the opening tag and </h1> is the end tag.

Some HTML labels don't have an end tag. For instance the <br> tag is utilized addition a line break as a part of a HTML page and it doesn't require an end tag.


The opening labels in HTML can have characteristics which gives extra data to the tag.

The <font> tag in your first html page has the credit color=red to show the content in red.

<font color=Red>

HTML Structure 

The structure of a HTML archive is as demonstrated as follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">




DOCTYPE: Declares which form of HTML is utilized as a part of the document.<!DOCTYPE> assertions for HTML 4.01 are:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html> : Defines the begin of the HTML archive.

<head> : Defines the begin of head segment. Head area contains general data around a page such as title, depiction, and catchphrases.

</head> : Defines the end of head segment.

<body> : Defines begin of the real page substance.

</body> : Defines the end of page substance

</html> : Defines the end of the HTML record

Title tag 

Title: <title>

Title label sets the title of the report and it ought to be set in the <head> segment of the HTML page. The content between the title labels will be shown on the highest point of the program window.

Sample Code:

<title>My First Page</title>
Basic HTML Tags

Shown as:

Title Tag example

Body Tag 

Body Tag: <body>

The <body> tag characterizes the body of the HTML page where the genuine page substance are set. The most generally utilized traits for a <body> tag are

foundation: to determine a foundation picture for the page

bgcolor: to determine a foundation shading for the page

content: to determine the content shading


<body bgcolor="silver" text="blue" >

Shown as:

Body Tag Example

Heading Tags 

Heading: <h1> to <h6>

Heading labels are set inside the body segment of the HTML and are utilized to show content as heading. There are 6 diverse heading labels - <h1>, <h2>, <h3>, <h4>, <h5> and <h6>

h1 has the most noteworthy significance and h6 has the slightest significance.


<h1>This is Heading 1 </h1>
<h2>This is Heading 2 </h2>
<h3>This is Heading 3 </h3>
<h4>This is Heading 4 </h4>
<h5>This is Heading 5 </h5>
<h6>This is Heading 6 </h6>

Shown as:

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

Section Tag 

Section: <p> 

The section labels, <p> and </p>, will design the content as a passage and include some space previously, then after the fact. 


<p>This is an example for paragraph tags in HTML. Paragraph alignment can be set using the align attribute. This is my first paragraph.</p>
<p align=center>This is the second paragraph. This paragraph is aligned to the center. The align attribute can have one of the following values: left, right, center, justify.</p>

Shown as: 

This is an illustration for passage labels in HTML. Passage arrangement can be set utilizing the adjust characteristic. This is my first passage.
This is the second section. This passage is adjusted to the inside. The adjust characteristic can have one of the accompanying qualities: left, right, focus , legitimize

Break and Rule Tag 

Line break: <br> 

The <br> tag will embed a line break. Any content or picture that takes after this tag is moved to the following line. <br> tag don't have an end tag.


This is an example of a line break <br>This is another line<br>and one more<br>
Dispayed as

This is a case of a line break
This is a different line
also, one more

Even Rule: <hr> 

The <hr> tag will embed an even run the show. You can determine the length and width of the standard utilizing qualities size and width. <hr> tag don't have an end tag.


Rule 1: <hr>
Rule 2: <hr size="5" width="300">

Shown as
Rule 1 :

Rule 2:

Formatting Tags 

Striking: <b>

<b> tag will show the content in striking.

Italic: <i>

<i> tag will show the content in italic.

Solid: <strong>

<strong> tag will organize the content as imperative.

Square Quote: <blockquote>

<blockquote> tag is utilized to configuration content as a citation.

Code -

<b>This is bold text</b><br>
<i>This is Italic text</i><br>
<strong>This is Strong text</strong><br>
<blockquote>"The Best English Web Magazine - " - Mahatma Gandhi</blockquote>

Shown As

This is bold text
This is Italic text
This is Strong text
"The Best English Web Magazine -"

List Tags 

Unordered rundown : <ul>

An unordered rundown is a bulleted rundown of things and characterized utilizing the labels <ul> and </ul>. Every thing in the rundown is characterized utilizing labels <li> and </li>. The default shot style is a plate (a filled circle). You can change the slug style by setting the sort ascribe to circle, square or plate.


<ul type="square">
<li> Tech News </li>
<li> Downloads </li>
<li> </li>

Shown as:

  • Tech News
  • Downloads

Requested rundown: <ol> 

A requested rundown is a numbered rundown of things and characterized utilizing the labels <ol> and </ol>. Every thing in the rundown is characterized utilizing labels <li> and </li>. The default numbering style is 1,2,3,.. You can change the setting so as to number style the sort ascribe to one of the accompanying :

1 - for numbers

a - for lower case letters

A - for capitalized letters

i - for lower case roman numerals

I - capitalized roman numerals


<ol type="I">
<li> First </li>
<li> Second </li>
<li> Third </li>

Shown as:

  1. First
  2. Second
  3. Third

Picture Tag 

Picture Tag: <img>

The <img> tag is utilized to embed a picture on a HTML page. It doesn't have an end tag. The most generally utilized characteristics for a <img> tag are

src: to indicate the url of the picture

alt: to indicate the substitute content to showed if the picture is not accessible

width: to indicate the width of a picture in pixels

stature: to determine the tallness of a picture in pixels


<img src="/images/TheBestEnglishWebmagazine/Tipsntricks.jpg" alt="Tipsntricks" height="200" width="200" >
Shown as:

The Best English Web Magazine

Grapple Tag 

Grapple Tag: <a>

The grapple labels <a> and </a> are utilized to make a connection to an asset, for example, a html page or any document. Connections can be made around some content or a picture by putting the content or picture between the opening grapple label <a> and shutting tag </a>. The regularly utilized qualities for stay labels are

href : To determine the area (URI) of the asset

Focus: To determine the objective casing where the connection is to be opened. As a matter of course the objective quality will have the worth "_self", so the connection will open in the same casing where it was clicked. To open the connection in another window, you can set target="_blank"


<a href="" target="_blank">Click here Tech NEWS</a>

Shown as:

Click here Tech NEWS

HTML Tables 

Table Tags: <table>, <th>, <tr> ,<td>

<table> tag is utilized to mastermind information in a table organization in HTML. Every column inside of the table is characterized with the tag <tr> and every cell in a table is characterized with <td> tag. You can likewise characterize a header column for the table utilizing the <th> tag.

Here is basic case of a HTML table with one header line three information lines and two segments :

<table border="1">
<tr><th>Item</th> <th>Qty.</th></tr>
<tr><td>Apple</td> <td>10</td></tr>
<tr><td>Mango</td> <td>20</td></tr>
<tr><td>Orange</td> <td>30</td></tr>

Shown as:

As should be obvious in the above case, the fringe trait is utilized with the <table> tag to characterize the width of the table outskirt. On the off chance that you don\'t need an outskirt for your table you can preclude this characteristic.

Different characteristics normally utilized with <table> tag are:

cellpadding : to set the space between the cell outskirt and the cell content

cellspacing : to set the space between two cells

width : to set the width of the table

The characteristics normally utilized with <tr> and <td> labels are:

adjust :To on a level plane adjust the substance left, right, focus, legitimize

valign :To vertically adjust the substance top, center or base

bgcolor :to set a foundation shading

You could likewise have a cell traverse numerous sections and columns by setting the accompanying qualities

rowspan :to set the quantity of columns to traverse

colspan :to set the quantity of cells (segments) to traverse

Here is a changed adaptation of our past illustration:

<table border="1" width="200" cellpadding="5" cellspacing="5" >
<tr><th bgcolor="grey">Item</th> <th bgcolor="grey">Qty.</th></tr>
<tr bgcolor="red"><td>Apple</td> <td>10</td></tr>
<tr bgcolor="green"><td>Mango</td> <td>20</td></tr>
<tr bgcolor="orange"><td>Orange</td> <td>30</td></tr>
<tr><td colspan="2" align="center" bgcolor="blue">Total = 60</td></tr>

Shown as

Total = 60

So That's All Guides. If you got some Knowledge from this, BE KIND TO SHARE THIS.

Also Answer this before you leave