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 Subharti University</b>

<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 India</big>

<br>

<Small>hello India</small>

</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- Normal

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

Popular posts from this blog

इनपुट डिवाइस (Input Device)

Computer fundamental notes (ccc) by social guide