Untitled

INTRODUCTION:
HTML stands for Hyper Text Markup Language; which is the most widely used language on web to develop webpages. Web page contains text, graphics, animation, sound and interactive elements. It allows for download of text, picture, and so on.
There are use of different tags use in HTML. It is used to describe the content of web pages. It has three sections: the tag name, attributes and value of attributes. There are two types of tags, they are:
	Paired tags
 Paired tags has two parts: opening tags and closing tags.
	Singular tags

Advantages:
1.	It is widely used.
2.	Every browser supports HTML language.
3.	Easy to learn and use.
4.	It is by default in every windows. So you should not need to purchase extra software.
Disadvantages:
1.	It is unable to create dynamic pages.
2.	Need to write a lot of codes.
3.	Security features aren’t good in HTML.
4.	It produces complexity.
Basic structure of HTML:
Every HTML programs begins with <HTML> and end with </HTML> and has two sections-head section and body section as shown in figure below.


	HEAD SECTION:
Head section is used to specify the title and information about web page (i.e. the head element contains information and tags describing the document, such as its title).The head section begins with < head>tag and end with </head>tag.
	BODY SECTION:
It contains the actual information that to be displayed by web page-in the form of tags and plain text. It start with <body> and end with </body>.
Attributes of <body>tag with their values are:
Attributes	Values	Description
Bgcolor	color name /color code	to specify the background color of web page.
Background	url of image	to specify image file background image of page.
Text	color name/color code	to specify the color of text in a web page.
link 	color name/color code	to specify the color of hyperlink before click.
Alink	color name/color code	to specify the color of active link.
Vlink	color name /color code	to specify the color of visited link.
Top margin	number in pixel	to specify top margin of page.
Bottom margin	number in pixel	to specify bottom margin of page.

Example -1:
<HTML>
<HEAD>
<TITLE>Frist webpage </TITLE>
</HEAD>
<BODY bgcolor=‘#ccfcc’>
Frist webpage
<BODY>
</HTML>


Character Formatting (Paragraph, Heading, Text format)
	PARAGRAPH:
The <P> tag is used to specify the paragraph. HTML will automatic add blank line before and after paragraph.
Attribute of <paragraph tag with their value are:
Attributes	Values	Description
Align	Left/right/center/	to specify the alignment of paragraph ,default is left

Example-2:

<HTML>
<HEAD>
<TITLE> FIRST WEBPAGE</TITLE>
</HEAD>
<BODY bgcolor=‘#ccfcc’>
<P ALIGN = ‘RIGHT’>
This is for right align.
</P>
<P>
This is default align paragraph.
</P>
<P ALIGN= ‘CENTER’>
This is center align paragraph.
</P>
</BODY>
</HTML>

	HEADING:
Headings are a simple form of text formatting that vary text size based on the headings level. The six heading elements (h1 to h6) are often used to delineate new section and subsection of a page. For making biggest heading we should put<h1> tag at beginning and a </h1>tag at the end of the text you wish to use it.
Example-3:
<HTML>
<HEAD>
<BODY bgcolor= ‘#ccffcc’ text = ‘red’>
<h1>level 1 heading </h1>
<h2>level 2 heading </h2>
<h3>level 3 heading </h3>
<h4>level 4 heading </h4>
<h5>level 5 heading </h5>
<h6>level 6 heading </h6>
</BODY>
</HTML>

	TEXT FORMATTING:
HTML Citations, Quotations, and Definition Tags
Tag	description
<b>	defines bold text
<i>	defines italicized text
<em>	defines emphasized text
<small>	defines smaller text
<strong>	defines important text
<sub>	defines subscript
<sup>	defines superscript
<u>	defines underlined text
<strike>	defines a strike through text
<tt>	defines teletype text
<small>	defines font size one point smaller
<big>	defines font size one point bigger

Tag	Description
<abbr>	Defines an abbreviate or acronym
<q>	Defines inline (short)quotation
<blockquote>	Defines a section that is quoted from another source
<bdo>	Defines the text direction.it has attribute dir with values rtl/ltr
<dfn>	Defines the definition term
<cite>	Defines citation
<acronym>	Define acronym
<address>	Defines an address element

FONT
<Font>tag is used to specify the font color, size and name.
Attributes of font tag are:
Attributes	Values	Description
Face	Font name	to specify the color of visited link font of text.
Color	Color name/color code	to specify the color of text.
Size	1 to 7	to specify the font size, default is 3.

HORIZONTAL RULER
<HR>tag defines a horizontal ruler. It is an empty tag. Attributes of <HR>tags are:
Attributes	Values	Description
Size	Number in pixels	to specify the thickness of line
width	% or number in pixel	to specify the width of line.
Align	Left/Right/Center	to specify the alignment
Color	Color code/color name	to specify the color of line

EXAMPLE-4:
<html>
<head>
<title>sagar</title>
</head>
<body>
<abbr title= ‘hyper text treansfer protocol’>
HTTP
</abbr>is a protocol for transferring hyper document.
<hr color= ‘blue’ size=10 width=50%>
<p>
<bdo dir= ‘rtl’>from right to left</bdo>
</p>
<pre>
Start preformatting…….
<b>2H<sub>+O<sub>2</sub>=2H<sub>2</sub>O<b>
Hello<sup> <font color= ‘red’>world</font></sup>from SAGAR.
<i><u>this is underlined and italic text</u></i>
<strike>SAGAR SILWAL</strike>
End of performatting
</pre>
</body>
</html>

MARQUEE:
<Marquee>tag specifies the marquee. It is used to animate (scroll) text or image in different direction with different behaviors.
Attributes of marquee are:
Attributes	Values	Description
direction	Left/right/up/down	To specify the directions of scroll.
behavior	Scroll/slide/alternate	To specify the marquee behavior.
scrollamount	Number in pixel	To specify scroll amount in pixels.
bgcolor	Color name/color code	To specify background color for marquee.
Loop	Number or infinite	To specify number of repeatation.


EXAMPLE-5:
<HTML>
<HEAD>
<TITLE>SAGAR SILWAL</TITLE>
</HEAD>
<BODY>
<marquee direction='left' behavior='alternate' loop='infinite'scrollamount=50 bgcolor='#ccffcc'>
CRISTANO RONALDO IS THE SKILLFULL PLAYER.
</marquee>
</body>
</html>

LIST
List are used to group related pieces of information together, so they are clearly associated with each other and easy to read. They make easy to maintain the document and provides more assessable.
There are three types of list in HTML:
a.	Ordered list
b.	Unordered list
c.	Description list

ORDERED LIST:
Ordered list is used to group a set of related items, in a specific order. It is defined by <ol>………</ol>tag. Every item in ordered list begins with sequence number.

Attributes of <ol>tag with their values are:
Attributes	Values	Description
type	1/i/I/a/A	Type of numbered list.
start	numbers	Starting values of number.

UNORDERED LIST:
Unordered list is used to group a set of related items, in no particular order. I.e. Unordered lists are used when a set of items can be placed in any order. It is defined by <ul>…..</ul>tags, which creates a list in which every line begin with bullet mark.
Attributes of <ul>tag with their values are:
Attributes	Values	Description
type	Disc/circle/square	Used to specify the type of bulleted list.


DESCRIPTION LIST:
Description list is used to display name/values pairs such term and their definitions, or times and events. I.e. description lists associate specific names and their values within a list. Description list are different from other kinds of list, as they use names and values instead of list items.it is define by <dl>……</dl>elements.
Examples-6:
<html>
<head>
<title>SAGAR SILWAL</title>
</head>
<body>
<b>Top Football Players </b>
<br>
The top fives players are:
<ul type='square'>
<li>Cristano ronaldo</li>
<li>Marcelo</li>
<li>Neymar J.r.</li>
<li>Pepe</li>
<li>Sagar silwal</li>
</ul>
<b>Top five country on the football</b>
<br>
The top five country on the basis of football are:
<ol type='I'>
<li>Brazil</li>
<li>Germany</li>
<li>Protugal</li>
<li>France</li>
<li>Nepal</li>
</ol>
<b>Description of don with description list</b>
<br>
<DL>
<DT>Baglung</DT>
<DD>-Sandesh</DD>
<DT>Gorkha</DT>
<DD>-Roshan</DD>
<DT>Kathmandu</DT>
<DD>-Niroj</DD>
<DT>Butwal</DT>
<DD>-Abinash</DD>
</DI>
</BODY
</HTML>

NESTED LIST:
Nested list display information in outline form. A nested list is a list that appears in the bound of another list element. Nesting the new list inside the original indents the list one level and changes the number/bullet type of reflect the meaning.
EXAMPLE-7:
<html>
<title>sagar</title>
<body>
<b>Classification of software </b>
Software are classify into mainly three types,they are:
<ol>
<li>System Software</li>
<ol type='i'>
<li>Operating system</li>
<li>Language processor</li>
<ol type='a'>
<li>Assembler </li>
<li>Compiler </li>
<li>Interpreter </li>
</ol>
<li>Utility software</li>
</OL>
<LI>Application Software</li>
<ul type='circle'>
<li>Tailored Software</li>
<li>Packaged Software</li>
</ul>
</ol>
</body>
</html>

INSERT IMAGES AND OBJECTS:
In A HTML images are inserted with<img>tag. The <img>tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page , you need to use the Src attribute. Src stands for ‘source’.
Attributes of <img>tag are:
Attribute	Value	Description
src	url of the image	To specify the image to be   displayed.
alt	Test message(user defined)	To specify an alternate text for an image, if the image cannot displayed.
height	Number in pixel	To specify the height of an image.
width	Number in pixel	To specify width of an image.
vspace	Number in pixel	 To specify white space on top and bottom of an image.
hspace	Number in pixel	To specify white space on left and right slide of an image.
align	Top/bottom/middle/left/right	To specify the alignment of an image according to surrounding elements.
border	Number in pixel	To specify the width of the border around an image.

EXAMPLE-8:


<html>
<head>
<title>Sagar silwal</title>
</head>
<body>
<h1>Inserting the image of Sagar silwal</h1>
<img src='I:/image/C:\sagar silwal'height=300 width=200 alt='picture' border=2>
</body>
</html>


CREATEING HYPERLINK:
Hyperlink also called link is a component of web that is used to jump from one piece of information to another piece of information. The destination information can be on same page or on different web page (or web sites). A hyperlink can be a word, group of words, or image.
Attributes of hyperlink are:
Attributes	Value	Description
href	URL of  web page or name of book mark
	To indicates the linked destination
target	_blank
_parent
_self
¬_top	To specify where to open the linked document
Name(or id)	Section name 	For specifying specific point on a page.

DIFFERENT TYPES OF LINK
External linked:
External linked is a link that is used to different web pages or websites.
EXAMPLE-9:
<html>
<head>
<title>Sagar </title>
</head>
<body alink='green'link='red'vlink='brown'>
<b>Sagar's favorites sites:</b>
<ul>
<li><A href='http://www.google.com'>www.google.com</li>
<li><A href='http://www.youtube.com'>www.youtube.com</li>
<li><A href='http://www.facebook.com'>www.facebook.com</li>
</ul>
</body>
</html>


INTERNAL LINK:
Internal link is used to jump to specific location of page instead of being limited to linking to the top of page. Hence using internal link, one can jump from one part of page to another part of same page or to specific point of any pages.
EXAMPLE-10:
<html>
<head>
<title>laptop</title>
</head>
<body>
<A name='movie'></A>
<H1>SAGAR CLWAL favorites MOVIES</H1>
<A href='#movie'>Click here to goto favorites Movies</a>
<pre>
INSTALLER
PREM GEET
DHOOM 2
ICE AGE
A MERO HJR 2
SULTAN
</pre>
<A name='politician'></A>
<H1>My favorites politician</H1>
<A href='#politician'>Click here to goto favorites politician</a>
<pre>
K.P. Sharma Oli
Phuspa kamal Dahal
Sher bdr. Deuba
Kamal Thapa
</pre>
</body>
</html>

CREATE TABLE:
Table is the dimensional structure with rows and columns. Rows are the horizontal component and columns are vertical components of table. Table organizes the data into rows and columns. <table>………</table>tags is used for defining table.
The attributes for creating table are:
Attributes	Values 	Description
border	Number in pixels	To specify the size of the table border,0 means the borderless table
bordercolor	Colorname or colorcode	To specify the border color of table
bgcolor	Colorname or colorcode	To specify the background color of table
cellpadding	Number in pixels	Specifies the space between the cell wall and the cell content
cellspacing	Number in pixels	Specifies the space between cells
width	% or pixels	To specify the width of table

The <tr>tag define a row in HTML table. A<tr>element contains one or more <th>or <td> elements. Some attributes of <tr>tags are:
Attributes	Values	Description
Align	Left/right/center/justify	To align the content in a table row.
bgcolor	Colorname or colorcode	To specify the background color of a table.
valign	Top/middle/bottom/baseline	To vertical align the content in a table row.

Some important attributes of <td> and <th> tag are:
Attributes	Values	Description
Align	Left/right/center/justify	To align the content in a cell.
bgcolor	Colorname or colorcode	To specify the background color of a cell.
valign	Top/middle/bottom/baseline	To vertical align the content in a cell.
rowspan	number	Sets the number of rows a cell should span
colspan	number	Sets the number of columns a cell should span
width	% or pixels	To specify the width of cell

Attribute of<caption>tag
Attributes	values	Description
Align	Left/right/center/justify	To align the caption of table.

EXAMPLE-12    A simple table with 4 rows and 3 columns:
<html>
<head>
<title>Prince thapaliya</title>
</head>
<body>
<table border=1 bordercolor='red' width=500 cellspacing=0>
<caption align='top'>Student Detail</caption>
<tr>
<th>Roll</th>
<th>Name</th>
<th>Sex</th>
</tr>
<tr>
<td>26</td>
<td>Prince Thapaliya</td>
<td>male</td>
</tr>
<tr>
<td>27</td>
<td>Bibek Uperti</td>
<td>male</td>
</tr>
<tr>
<td>28</td>
<td>Suwash Rasili</td>
<td>male</td>
</tr>
<tr>
<td>29</td>
<td>Sanzu Silwal</td>
<td>female</td>
</tr>
<tr>
<td>30</td>
<td>Sapna Silwal</td>
<td>female</td>
</tr>
<tr>
<td>31</td>
<td>Simple Basnet</td>
<td>female</td>
</tr>
</table>
</body>
</html>
EXAMPLE-13 A table with rowspan and colspan:
<html>
<head>
<title>Prince thapaliya</title>
</head>
<body>
<table border=3  width=600 cellspacing=4 cellpading=3 >
<caption align='top'>Student result sheet</caption>
<tr bgcolor='#ccffcc'>
<th rowspan=2>Roll</th>
<th rowspan=2>Name</th>
<th rowspan=2>English</th>
<th rowspan=2>Math</th>
<th colspan=2>Computer</th>
</tr>
<tr>
<th>theory</th><th>pratical</th>
</tr>
<tr>
<td>27</td>
<td>Bibek Uperti</td>
<td>80</td>
<td>88</td>
<td>70</td>
<td>25</td>
</tr>
<tr>
<td>28</td>
<td>Suwash Rasili</td>
<td>90</td>
<td>80</td>
<td>70</td>
<td>25</td>
</tr>
<tr>
<td>29</td>
<td>Sanzu Silwal</td>
<td>99</td>
<td>90</td>
<td>75</td>
<td>25</td>
</tr>
<tr>
<td>30</td>
<td>Sapna Silwal</td>
<td>90</td>
<td>89</td>
<td>72</td>
<td>25</td>
</tr>
</table>
</body>
</html>

Design frame and form
Frame is used to divide the browser window into the number of rectangular pane so that different pages can be added to same window. Pages containing the frame do not use the<body>tag.
Attributes of <frameset>tag are:
Attribute	Values	Description
rows	% of each rows separated by comma. One can use * to specify the remaining area for row. 	To specify the height of each row relative to browser windows.
cols	% of each rows separated by comma. One can use * to specify the remaining area for column.	To specify the width of each column relative to browser windows.

Attributes of <frame>tags are:
Attribute	Values	Description
urc	url	To specify url of web page to be loaded into frame.
name	text	To specify the unique name of frame so that it can be targeted from other page.
scrolling	Yes/no/auto	To specify the scrolling properties.
NORESIZE		Disable the frame resizing capability.

EXAMPLE-14:
FORM:
An HTML form is part of a web page that includes areas where users can enter information to be sent back to you, sent to another e-mail address that you specify, or sent to a database that you manage. Simply ,it is an interface for passing data to server. An html form can contain input elements like text fields, checkbox, radio-buttons, submit buttons and more.


Example-15:

<html>
<head>
<title>Student Detail Form</title>
</head>
<body>
<center>
<h1>Rising Star College </h1>
<b>Student Detail Form:</b>
</center>
<hr color='blue'>
<form method='post'action='myserver.php'>
<fieldset>
<legend align='top'>Personal information </legend>
<p>Name:<input type="text"size=15 name="txt_name" maxlength=25></p>
<p>Address:<input type="text"size=25 name="txt_addr" maxlength=45></p>
<p>Sex:<input type="radio" name="r1" value="male">Male<input type="radio" name="r1" value="female" checked>Female </p>
</fieldset>
<fieldset>
<legend align='right'>Hobby & Education </legend>
<p>hobbies:<input type="checkbox" name="chk1" value="Watching movies">Movies
<input type="checkbox" name="chk2" value="Playing football" checked>Football
<input type="checkbox" name="chk3" value="Reading Story">Story
<input type="checkbox" name="chk4" value="Other">Others
</p>
<p>
Education:<select>
<option value='PHD'>PHD</option>
<option value='Master'>Master</option>
<option value='Bachelor'>Bachelor</option>
<option value='Plus Two'>+2</option>
<option value='SEE'>SEE</option>
</select>
</p>
</fieldset>
Few words:
<br>
<textarea rows=7 cols=50></textarea>
<p>
<input type="Submit"value="Send">
<input type="Reset"value="Clear">
</p>
</form>
</body>
</Html>