# HTML (Hypertext markup language):
HTML is a simple scripting language
used to create hypertext documents.
Hypertext is link
simply amarkup
piece oflanguage
text file is
that
works as a and a
way of writing information within
documents. We canedit use anyDreamweaver
type of text
editor like notepad, plus,
for the HTML coding.
# Use of Html:
It is used forthat
webcontains
designing and webpage is
a text file HTML tag. HTML
documents
extension. are saved with .HTML or .HTM
# HTML Document Structure:
The HTML document is mainly divided into
two sections: Head Section and Body
Section.
<html>
<head>
<title>………...</title>
</head>
<body>
……………………
</body>
</html>
# What isalltagcommands
?
In HTML or codes are called
tag. The tag has three parts:
1. Elements
2. Attribute
3. Value
Eg:
<Body bgcolor=green>
Body element
Bgcolor property
Green Value
# Types oftag/single
Tag :
a. Empty / unpaired
b. Container Tag/double/ paired
a. Empty Tagof : tag doesnot have its ending
This type
tag. Like <Br>,<Hr> etc.
b. Container Tag : has start and ending tag
The tag which
called container tag. We should have not to
close this tag otherwise they will
function properly. The tag ended within
slash </> key.
Eg:
<html>
<head>
<title>My first creation</title>
</head>
<body bgcolor=blue text=yellow>
Everest Multi technical college which is one
of the most popular training center in
Urlabari Area.
</body>
</html>
# HTML TAGS :
1. <Head> . . . . .</Head> tag : and end of
This tag identifies the beginning
the Header Section.
2. <Title> . . .is. .</Title> tag: the text in the
This tag used to place
title bar of the browser window.
Eg:
<html>
<head>
<title> Welcome to you in Everest </title>
</head>
</html>
3. <Body> ..........</Body> tag :
This tag is used to display different items in
WebPages. Mainly it is used to set
background color, text colorof attributes
and it’s
designing. This tag has number
like: bgcolor, text, link etc.
-Bgcolor:- It is used to set background color
to the page.
-Text:- This in
attribute is used to set fore color
(font color) the page.
<html>
<head><title>First webpage designing
</title></Head>
<Body bgcolor=pink text=red>
<H1> [Link] </H1>
The Everest multi technical college is one
of the most popular institute in Urlabari
area.
</Body>
</Html>
4. <span> ...........</span> tag :
This tag is used to set highlight color to
the text.
Syntax :
<span style="background-color:blue">
British Gurkha Departmental store </span>
5.<Br>
Thistag tag: is used to break the line.
6. <p> ....</p> tag : to write the paragraph.
This tag is used
Syntax:
<p align="right / left / center / justify">
7. <pre> .........</pre> tag :(Preformatted)tag
This tag is used for displaying the text in
a manner similar to typed in the Html
document in the notepad.
8. <Blockquote> ..........</Blockquote> tagthe
:
This tag is used to give the space at
begining of the paragraph.
9. <center> .......</center> tag: the text or
This tag is used for centering
picture or others.
10. It<Hr> Tag to : draw a horizontal line. This
is used
tag has -the following attributes:
a. color To set line color.
b. Size -- To To givegive border width.
c. Align alignment.
Eg.
<Hr color=red size=4 Align=center>
[Link] formatting tagBold :
<B> ....</B> tag For
<I>
<U>....</I> tagtagFor Italic
....</U> For Underline
12. It<font> ....</font> tag :different font, font
is used to define
style, size etc. to the text. This tag has
following attributes:
a. Color Itisspecifies the fontthe color.
b. Size It used to define fontfont
sizestyle.
.
c. Face It is used for defining the
13. ItHeadings:
is usedintothe display some Thereimportant
information’s bold type. are
different six.....<H6>
labels for heading . like
<H1>,<H2>
14. It<sub> ........</sub>:
defines the subscript [Link]
Subscript is
that character which appears lower
than the normal character.
Eg : H 2SO4/
<html>
<head>
<title>……………</title>
</head>
<body>
<H1><font color=red size=6 face="Arial">
Subscript</H1></font>
H<sub>2</sub>So<sub>4</sub>
<Br>
H<sub>2</sub>o
</body>
</html>
15. It<sup> .......</sup> tag :
is used to type superscript textappears
and the
super script is that character which
slightly upper
2 than the2 normal character.
Eg: (a+b) =a2+2ab+b
<html>
<head>
<title>……………..</title>
</head>
<body bgcolor=pink>
<font color=blue size=6>
Example of super script</font>
(a+b)<sup>2</sup>=a<sup>2</
sup>+2ab+b<sup>2</sup>
</body>
</html>
16. <Marquee> .........</marquee> tag text
: or
This tag is used to animate the reqd.
picture or recognized
others in different ways. Internet
explorer
animation. It has the following attributes: for
only this tag
a. Behavior :-(Scrolling style like; Alternate,
Scroll etc.)
b. Direction :- (Left, Right, Up and Down)
c. Height :- (Percent unit)
d.
e. Width :- :-
(Percent unit)
Bgcolor (color name)
Eg.
<Marquee behavior=Alternate
direction=right height=5% width=95%
bgcolor=gray>
Everest Multi technical College
</Marquee>
# Hyperlink:
-Types of Hyperlink :
a)Intrapage link: /.External Link is created
The relationship which
between
picture is two different pages through text or
called Intrapage link.
b) Interpage link: /Internalcreated
Link
The relationship between
different section or pragraph in the same
page is called Interpage link.
c) Image link: which is created between
The link
picture and the link
webpage is called image
link. For image you must insert image
at first through <img> tag.
d) E-mail link:
The link created between webpage and
email address is known as E-mail link.
Eg of Intrapage link:
<html>
<head>
<title> External link
</title>
</head>
<body bgcolor=Yellow>
<h2> External Link </h2>[Link]"> Learn
<h2><a href="webpage
More </a> </h2>
</body>
</html>
Save
ThenitOpen
with Name= FirstPage
New html File
<html>
<head>
<title> Second Page
</title>
</head>
<body bgcolor=Red>
<h2> External Link </h2> [Link]"> First
<h2><a href="webpage
page </a> </h2>
</body>
</html>
Save it with Name= Secondpage
Now you can see external link between to
webpage...
# To insert Picture:any type of picture in
We can insert
webpage byorusing <img>tag. We picture
should
give source file location to insert
inside the <img> tag. We can also define
picture size.
Syntax:
<img src="Path"height=25% width=25%
border=3>
4) E-mail link:
<a href="mail
to:Pramod.limbu013@[Link]”>Click
here</a>
# Listformat
and Special Character : in a specific
The for writing the items
purpose using different number style in
is
called list. It is used for writing the items
serial
-Typesorder.
of list:
1. Order list :
Eg:
<ol type=1>
2. Unorder list:
Eg:
<ul type=square/circular/disc>
Example of or der list :
<html>
<head>
<title>……….</title>
</head>
<Body bgcolor=blue>
<center><h1> Example of Order
list</h1></center>
<ol type=1>
<li> Aakanshya </li>
<li> Aastha </li>
<li> Arpana </li>
</ol>
</body>
</html>
Example of Unorder list :
<html>
<head>
<title>………..</title>
</head>
<body bgcolor=blue text=white>
<h1><center>Example of unorder
list</h1></center>
<ul type=square>
<li> Books</li>
<li> Pencil</li>
<li> NoteBook</li>
</ul>
</body>
</html>
# Writebythe HTML codelist:
of the following
items using nested
[Link]
Cold drinks
[Link]
ii. Sprite
Fanta
iii.
iv. Pepsi
B. [Link] drinks
Coffee
ii. Black
LemonTea Tea
iii.
iv. Hot Water
[Link] Soup
i. Tomato Soup
ii. Pulse
Gundruk Soup
iii. Soup
[Link] Soup
Mutton Soup
iii. Buff SoupSoup
ii. Chicken
# Creating Table:
This table is used to setThe
the<table>
data in and
the
form of rows and columns.
</table> tag contains the whole features of
the table. The table tag has the following
attributes:
-Align
-Width
-Height
-Border and border color
-Cellspacing
-Cellpadding
-Bgcolor
Example:
<html>
<head>
<title>…………..</title>
</head>
<body>
<table border=2 bordercolor=blue
cellspacing=7 cellpadding=12
bgcolor=pink>
<Tr>
<Th>SN
<Th>Name
<Th>Address
</Tr>
<Tr>
<Td>1
<Td>Saurav
<Td>Damak
</Tr>
<Tr>
<Td>2
<Td>Reshma
<Td>Urlabari
</Tr>
</Table>
</body>
</html>
# Table Heading <Th> :
This tag is used to specifies thebold
table
heading. Usually it is displayed in face
and centered alignment.
# Table Data <Td>:
This tag is used to place the required
dataTheinside the row cells.
following<Th> and <Td> tag has the
attributes :
i. Rowspan (merging rows):
This attribute is used to merge or
combine required row cells. Value should
be more than one cell.
ii. Colspan (merging column):
The value for colspan should becolumn
more
than one and will span across many
cells.
Eg:
<html>
<head>
<title>……………</title></head>
<body>
<Table border=2 bordercolor=red>
<Tr> <Th rowspan=2> </Tr>
<Tr> <Th colspan=2> </Tr>
</body>
</html>
# List in Table Structure :
# Forms & Control : designing the form in
The tools for
webpage called forms controls. Controls
are the property of form which helps to
display the records for different purpose.
There are different controls used in
webpage for designing the page. It is the
additional feature on webpage which in is
most important for programming
webpage.
# Different controls of form :
1. Text Box
2. Combo BoxButton
3. Command
4. List BoxBox
5. Check
6. Option Button etc.
# Input Tag : commonly used form tag is
The most
input tag. The "type" ofIt input tag is specified
the type of control. does not have its
closing tag. Some input types are as
follows:
-Text :(Name, Value, Size, Maxlength)
-Radio: (Name, Value)
-Check box : (Name, Value, Checked)
-Reset: (Name, Value)
-Submit
-Button :: (Name,
(Name, Value)
Value) etc.
# To call: text box:
Syntax
<input
size=40type=text name=txt1 value="Ram"
maxlength=50>
where,
Type: isisused totospecify the of
type ofcontrols.
controls.
Name: used set name the
Value: is used to give constant value for
calculation.
Size: is usedis to set to
theset
size of the text box.
Maxlength: used maximum
characters to enter in the textbox.
# To call Radio button:
<input type=radio name=opt1>
# To call Checkbox: name=chk1
<input type=checkbox
value=checked>
# To call command name=btn1
button:
<input type=button
value=Click>
# To call Password Box:
<input type=password name=psd1
value=Everest size=30>
# To call submit button:
<input
value="Submit"> name=btn2
type=submit
# To call Reset Button:
<input type=reset name=btn3 value=Reset>
# To callname=cbo1>
Combobox:
<select
<option>Select Gender</option>
<option>Male</option>
<option>Female</option>
</select>
-Example of Form Control :
<!doctype html>
<head>
<title>
Form Registration
</title>
<body bgcolor=blue text=white>
<h2> <center> Everst Registration Form
</h2> </center>
<hr size=5 color=Yellow>
<br>
<h3> <font color=Black> Fill The Given
Data </font></h3>
Name: <input type="Text" size=40>
<br><br>
Password: <input type="Password"
size=40>
<br><br>
Gender: <Input type="Radio"
name="Gender"> Male
<Input type="Radio" name="Gender">
Female
<br> <br>
Email: <input type="Mail">
<br> <br>
Phone No:
<select>
<Option> +977 </option>
<Option> +91 </option>
<Option> +966 </option>
<Option> +61 </option>
<Option> +57 </option>
</select>
<input type="phone">
<br> <br>
Courses: <br>
<input type=checkbox> Basic  
<input type=checkbox> Diploma in
Webpage designing
<br>
<input type=checkbox> Diploma in
Application Programming <br>
<input type=checkbox> Diploma in
Hardware and Networking
<br><br>
<br> <br>
<input type="button" value="submit">
<br>
<input type=button value="Clear">
</body>
</html>
# Adding Sound : the sound clip to your
You can add
webpage easily. It helps to tothe give
entertainment and information site
visitors. It will be better to insert small
sound clips clips
instead of large tobecause a
large sound take longtime transfer.
Eg:
<html>
<body>
<font size=7 color=red>
Adding sound clips</font>
<hr>
<font size=5 color=blue>
Choose your favorite Songs:
<a href=”song.mp3”>Song1</a>
<a href=”song2.mp3”>Song2</a>
</body>
</html>