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

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>

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

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

Line 2

Line 3

<br>

Line 4

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

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

It is the first small table

</td >

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>

</td>

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>

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

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

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

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

Name:-

<br>

Father’s name:

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

Name:-

<br>

Father’s name:

<br>

Password:

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

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

Male<br>

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>

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>

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>

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>

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>

All Syllabus Topic for class 1st to 12th and Competition Exam Download (2018-19)

HTML

Comments

Post a Comment

Popular posts from this blog

Libreoffice Writer Notes

Computer fundamental notes (ccc) by social guide