HTML
HTML
HTML file
Html stands for Hyper
Text Markup Language an html file is text file which contain small
markup tags. The markup tags tell the web browser how to display the page. An
html file must have an extension .html
or html.
An html file can be created by using a simple text
editor like notepad and dream viewer.
Html elements:
- html
elements are text files that are made up of html elements. Html elements are
defined with the help of html tags.
Html tags:-html tags are used to markup
the html elements html tags are surrounded by the two character < and >. The surrounding characters are called angle brackets. the
html tags normally come in pair like <a>----</a> the first tag in a
pair is the start tag and the second tag is ending tag the text between the
start and ending tag is called element contents html tags are not case
sensitive For Ex-<b> is same as<b>
There are two types of tags which are used in html-
1-
Singular tag: - the tags which has not a
closing tag is called singular tag ex:-br, p etc…
2-
Paired tags:-the tags which have its
closing tags are called paired tag ex:-title, head, body etc…
<Html>:-it is the first tag of html language
all the working of the html is done under this tag it is always used in the
first row or top row of the html programs .
Syntax: - <html>-------</html>
Note:-the paired tags are closed by forward slash
“/”.
<Title>:- this tag is used to give the title
of your web page
.
Syntax: - <title>-------</title>
For ex:-
<Html>
<Title>
My page
</title>
</html>
<Head>:-
this tag is
used for give the heading of your internet working or document. The head elements
contain general information about your document or web page.
Syntax :- <
head>-------</head>
For ex:-
<Html>
<Title>
My page
</title>
<Head>
This is use of html
</head>
</html>
<body>:-
this tag is
used for display all the matters of your web page it means under body tag most
coding of your program will be written.
Syntax :- <body>-------</body>
For ex:- W.A.P. which display any message about you?
<html>
<title>
My page
</title>
<head>
This is use of html<br>
</head>
<body>
Hello everybody I am Supreet kushwaha .
I am working on html.
Easy to learn.
Great experience.
</body>
</html>
<br>:- It is used for brake the row
or create a new line .
<b>:-this tag is used for format
the text in bold format it is a paired tag.
<I>:- this tag is used for format
the text in italic format it is also a paired tag.
<u>:- this tag is used for display
the text with underline it is a paired tag.
For ex:-
<Html>
<Title>
My page
</title>
<Head>
This is SRDM Computer Center<br>
</head>
<Body>
<b> this is a study center of
<i>we are the student of doap</i>
<u>doap stands for diploma in office
automation and publishing </u>
</body>
</html>
Font:-it is used to format your
font into your webpage which is created by you.
Attribute
of font:-
1-
color:- it is used for change the
color of your font or text into your web page
Syntax:- <font color=”color name
“>------</font>
2-
size:- this attribute is used for
increase the size of your text it increase the size from 1 to 7 it means its
lowest value =1 and upper value =7
3-
Sup:- it is used for embed you
text up to the normal base line .
Syntax:- <sup>------</sup>
Sub:-
it is used for
embed you text bellow from the normal base line .
Syntax:- <sub>------</sub>
Height:- this
attribute is used to set the height of the image.
Width:- this
attribute is used to set the width of the image.
Border:- this
attribute is used to make the border of the image.
Align:- this attribute is used to set the horizontal alignment of the image
there are three value of align attribute.
1-
left
2-
right
3-
center
V align: - this attribute is used to
set the vertical alignment of the image.
Alt: -
this attribute is used for display the massage on mouse move on the picture.
For ex:-
<Html>
<head>
Use of image
</head>
<body>
<img src=”location”
height=200 width=300 alt=”this is first image” align=right valign=top>
</img>
</body>
</html>
Marquee:- this attribute is used to move the text or picture in different behavior.
Attribute of marquee:-
Behavior: - it set the
scrolling behavior of the text.
(a)
scroll (b) slide (c) alternate
For ex:-
<Html>
<Head>
Use of marquee
</head>
<body>
<marquee behavior=scroll>
<img src=” location”>
</img>
Hello every body
</marquee>
</body>
</html>
Big:- this
tag is used to increment the size of your text.
Small:- it is used to decrees the size of your text .
For ex:-
<Html>
<Body>
<Big > hello
<br>
<Small>hello
</body>
</html>
Hr:- this
tag is used for insert a horizontal line on your web page.
Attribute of hr tag –
1-
width:-it set the width of
horizontal line
2-
size:- it set the size of
horizontal line
3-
Align: - it set the alignment of the
line from left, right, center.
4-
noshade:- it remove the shading of
the line.
For ex:-
<Html>
<Body>
Line 1
<Hr><br>
Line 2
<hr width=200 size=50><br>
Line 3
<Hr width=200 size=500>
<br>
Line 4
<hr width=200 size=100 noshade>
</body>
</html>
Table:-Table is a 2 dimensional
array we can insert a table on our web page with the help of table tag.
There are many
attributes in table tag-
1-
tr:- this tag is used for create
a row in your table
for ex :-
< html>
<Body>
<table border=2>
<TR>
This is a table
</TR>
</table>
</body>
</html>
<td>:-this tag is used for insert
a column in your table .
</body>
</html>
2-
Th:- it is mostly used to give
the heading into the table.
Attribute
of table
Color:-it is used to give the background
color of your table.
Background:-it is used to insert any
picture on the background of your table.
For ex:-
<Html>
<Head>
Table within
table
<br>
</head>
<body bgcolor=pink>
<table width=600 height=500 border=4 >
<table width=277 border=4>
<td align="center">
It is the first small table
</td >
<td align="center">
<table width=200 border=4>
<td align="center">
It is the second small table
</td >
</table>
</body>
</html>
Table within
table:-you
can create a table with in the table as per your requirement; the table which u
insert within any table is small in size than the main table.
For ex:-
<html>
<Head>
Table within table
<br>
</head>
<body bgcolor=pink>
<table width=600 border=0 >
<td align=”center”>
<table width=277 border=4>
<td align=”center”>
</td>
<td align=”center”>
<table width=277 border=4>
<td align=”center”>
It is second small table
</td>
</table>
</body>
</html>
Definition
list:-it is
used to create a list as definition format
There are many attributes—
DD:- it stands for definition description;
it is used to give the definition of the list.
DT:- it stands for defining term;
it is used to give the definition name or title of the list.
For ex :-
< html>
<Head>
Use of definition list
</head>
<Body><DT>
<Big>Computer :-< /big>
<Dd>computer is an electronic device </dd>
</DT>
</body>
</html>
List:-lists are the collection of
different items which can be represented in some different manners .in html there
are three types of list –
(i)
ul:- this
tag is used to create an unordered list.
(ii)
ol:- this tag is used to create
an ordered list.
(iii)
Li:-this tag is used to create
one item or list at a time; it is the sub tag of ul tag.
Attribute of ul tag:-
Type:-
it is used to give the symbol of items there are 3 symbols –
(a)
Circle (b) square (c) fill
around
For ex:-
<Html>
<Body>
<UL type=fill around>
<Li>Sonu</Li>
<Li>Monu</Li>
<Li>Sona</Li>
<Li>Mona</Li>
</UL>
</body>
</html>
Ordered list:-it is used for creating a list in ordered format this list is created
by ol tag.
Attribute of ol tag
Type:-it is used to set the
type of order
Start: - it set the start
value of the list
For ex:-
<Html>
<Body>
<OL type=1 start 1>
<Li>Sonu</li>
<Li>Monu</li>
<Li>Sona</li>
<Li>Mona</li>
</ol>
</body>
</html>
Frame set:-frameset is paired tag it is used for dividing our internet explorer
window into many parts.
Attribute of frameset:-
Rows: - it divides a window in row wise format.
Cols:-it
divides the window in column format.
Note:-frameset
tag always used within the head tag it never be used in body tag.
For ex:-
<Html>
<Head>
<frameset rows=”50%,50%”>
<frameset
cols=”50%,50%”>
</frameset>
</head>
</html>
Form:-
form is
graphical representation of any document there are some tags in form element.
Input:-
this tag is
used to create a text box on your web page.
Attribute of input tag:-
Type:-it
specifies that which type of input you will give there are following types of
values in input tag.
1.Text:-it
is a single line data entry form element.
2. Max length:-it set the maximum length
of the no. of character.
3. Value: - it set the default value for
the text box.
4. Name: - it set the name of the text box.
For ex:-
<html>
<body bgcolor=pink>
<font color=green
size=6>
Name:-
<input type=”text” maxlength=30
size=20>
<br>
Father’s name:
<input type=”text”
maxlength=30 size=20>
</font>
</body >
</html>
Password:- it is
just like text tag, here the characters are displayed in the form of circle or
(* ).
Attribute of password:-
1. Size
2. Maxlength
3. Value
4. Name
For ex:-
<Html>
<body bgcolor=pink>
<font color=green
size=6>
Name:-
<input type=”text”
maxlength=30 size=20>
<br>
Father’s name:
<input type=”text”
maxlength=30 size=20>
<br>
Password:
<input Type=”password” maxlength=30
size=20>
</font>
</body >
</html>
Checkbox:- it controls the selection of one from the multiple choices.
Attribute of checkbox:-
1. size
2. Maxlength
3. Value
4. Name
Select:- it is a special type of tag it is used for selecting any option from
the given list. We can select any one option at a time.
Option:- it is
the sub tag of select tag it is used to create an option for the list .
For ex:-
<Html>
<Body>
Date of birth
Dd<select>
<Option>1
<Option>2
<Option>3
<Option>4
<Option>5
<Option>6
<Option>30
</select>
Mm<select>
<Option>Jan
<Option>Feb.
<Option>march
<Option>dec
</select>
YY<select>
<Option>1990
<Option>1995
<Option>2000
<Option>2020
</select>
</body>
</html>
Text area:- text area is the multi line
data entry list it is used for taking long information in the box it is same as
input tag but here multi line information can be stored it is a paired tag.
Attribute
of text area:-
Cols:- it set the number of columns which is used in the
text area.
Rows:-
it set the
number of rows which is used in the text area.
For ex:-
< Html>
<Body>
Address:-
<textarea cols=1
rows=10>
</textarea>
</body>
</html>
Field:- it is just like a frame in where many forms are embedded. It is used
to create separate part of a form.
Legend:- it is the sub tag of field set it is used to given the title of the
field set.
For ex:-
<html>
<Body>
<Legend> Gender:-
</legend><br>
<Form>
<input
type="checkbox">
Male<br>
<input
type="checkbox">
Female
</form>
</body>
</html>
Anchor:- it is
used for attached two or more web page
with any hyper text.
Attribute of anchor:-
A href: - it stands for
anchor hyper reference. It connects the 2 or more page.
For ex:-
<Html>
<Body>
<a
href=”frt.html”>next
</a>
</body>
</html>
<P >tag:-it set a gap between two lines and set a new paragraph. It is a paired tag.
For ex :-
< html>
<Body>
<p>
Do you know the magic of
html
</p><p>you have
probably learn how html works.
</p>
</body>
</html>
Dhtml:- it stands for dynamic hyper text markup language it is the advance form
of html, with the help of dhtml we can create dynamic pages it means we can
create attractive pages using dhtml. It is the combination of several built in
browser features in fourth generation browsers. It is not a scripting language
like (java script) but merely a browser feature or enhancement that gives your
browser the ability to be dynamic. There are following tags which are used in
dhtml .
The value which are used in font style are —
1-
2- Italic
3-oblique
Font size:-it set the size of text or font the value which are used in font size
are-
1. small
2. xsmall
3. xxsmall
4. large
5. xlarge
6. xxlarge
7. medium
8. any length in integer.
Font weight:- it set the weight of the
font the value which are used in font size are -
1.
bold
2.
bolder
3.
lighter
For ex:-
<Html>
<Head>
<style type=”text/css”>
H1 {font-faimly: arial; font-style: normal; font-size:
small; font-weight: bolder}
H2 {font-style: italic; font-size: 100}
</style>
</head>
<Body>
<h1>this is the use of dhtml</h1>
<h2>this is second line</h2>
</body>
</html>
Color:- it change the color of the
text.
Background color:- it changes the background
color of your font.
Background image:- it sets an image on the
background of your text.
For ex:-
<Html>
<Head>
<style type=”text/css”>
H1 {font-faimly: arial;
font-style: normal; font-size: 500; color: green; background-color: red}
H2 {background-image: URL (“location”)}
</style>
</head>
<Body>
<h1>this is the use of dhtml</h1>
<h2>this is an image</h2>
</body>
</html>
Border:-it is used for make the
border around the text and image
Attributes
of border:-
1.
Border style:- it is used for set the style
of the border. The style will be –
* solid
* double
* grave
* ridge
* insert
* outset
2.
Margin: - it is used for set the
margin of the border. The margin will be –
*
left
*
right
*
top
*
bottom
for ex:-
<html>
<head>
<style
type =”text/css”>
H1{margin-left:40;margin-right=100;margin-top:200;margin-bottom:200;border-width:3;border-style:ridge;background-image:url(“location”);font-color:red;font-style
:italic}</style>
</head>
<body>
<h1>
This
is a ebook </h1>
</body>
</html>
Border-color:-it set the color of the
border.
Border-width:-it set the width of the
border.
Border-top-width:-it set the top width of the
border.
For ex:-
<html>
<head>
<style
type =”text/css”>
H1{color:blue;font-style:italic;
border-width:3;border-style:ridge;border-color:purple;border-background-image:url(“location”);font-color:red;font-style
:italic}</style>
</head>
<body>
<h1>
This
is a ebook </h1>
</body>
</html>
Comments
Post a Comment