16
which tells browsers how to display them. The extension name of HTML document is .html or .htm. Tags Tags are the commands that indicates how part of a web page should be displayed. Tags are enclosed in angular brackets < > Syntax :- To start a HTML tag -- <tag- name> To end a HTML tag -- </tag-name> There are two types of tags in HTML :- 1.Container tag :- HTML tag that has a starting as well as ending tag. The container tags affect everything that comes between their starting and ending tag. 2.Empty tag :- HTML tag that require just a starting tag and not an ending tag. Empty elements just carry out their specific job. Created by -- Neelima Kamboj

Html complete

Embed Size (px)

DESCRIPTION

HTML Details

Citation preview

Page 1: Html complete

HTML Hyper Text Markup Language. HTML is made up of elements or tags and attributes which tells browsers how to display them. The extension name of HTML document is .html or .htm.

Tags Tags are the commands that indicates how part of a web page should be displayed. Tags are enclosed in angular brackets < >

Syntax :- To start a HTML tag -- <tag-name>To end a HTML tag -- </tag-name>

There are two types of tags in HTML :-1.Container tag :- HTML tag that has a starting as well as

ending tag. The container tags affect everything that comes between their starting and ending tag.

2.Empty tag :- HTML tag that require just a starting tag and not an ending tag. Empty elements just carry out their specific job.

Created by -- Neelima Kamboj

Page 2: Html complete

<html><head> <title> Title of the page </title></head><body>

Contents of the HTML page </body></html>

Head

Body

The HTML program design

Title of the page will be displayed here

Contents of the HTML page will be displayed here

Created by -- Neelima Kamboj

Page 3: Html complete

<html><head> <title> St. Xavier School </title></head><body>

Welcome to class 10th of St. Xavier School</body></html>

Heading of web page

Body of the web page

Created by -- Neelima Kamboj

Page 4: Html complete

Line Break Tag

<BR> tag is used to insert a line break into the text of web page.

This is an empty tag that is it has only start tag no end tag.

<html><body> Welcome To <br> HTML Programming </body></html>

Default heading used by Internet Explorer if user does not specify the heading

Created by -- Neelima Kamboj

Page 5: Html complete

Body Tag Attributes • BACKGROUND --- displays the picture as the background of the page.syntax - <BODY BACKGROUND = system-path> example - <BODY BACKGROUND = “C:\welcome.gif”>

• BGCOLOR --- changes the back color of the web page. syntax - <BODY BGCOLOR= ColorName or ColorCode> example - <BODY BGCOLOR= Red> <BODY BGCOLOR= f0f0ab>

• TEXT --- changes the fore color or the text color of the web page. syntax - <BODY TEXT = ColorName or ColorCode> example - <BODY TEXT= blue> <BODY TEXT= ab123d>

Created by -- Neelima Kamboj

Page 6: Html complete

<html><head><title> St. Xavier School </title></head><body bgcolor = yellow text = red >

Welcome to class 10th of St. Xavier School</body></html>

Final Output

Created by -- Neelima Kamboj

Page 7: Html complete

Heading Tags

There are 6 levels of headings in HTML

ranging from h1 for the biggest important,

to h6 for the smallest important.

Syntax :- <Hno> type the heading contents </Hno>

Example :- <h1>Heading 1</h1> <h2>Heading 2</h2>

<h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>

Created by -- Neelima Kamboj

Page 8: Html complete

<html><head><title> Heading tags </title></head><body bgcolor=black text=white >

<h1> CLASS-XII </h1> <h2> CLASS-XII </h2> <h3> CLASS-XII </h3> <h4> CLASS-XII </h4> <h5> CLASS-XII </h5> <h6> CLASS-XII </h6></body></html>

Created by -- Neelima Kamboj

Page 9: Html complete

Font Tag The Font tag is used to change the font size, name and color of text enclosed in it. It is a container tag.

Attributes :-

1.SIZE --- Changes the size of text. The value must be between pixels 1 and 7.

The size can be given an absolute value (example: 3,4) or relative value (example : +3, -2). By default size is 1 pixel.

2. COLOR --- Changes the color of the text.

3. FACE --- Changes the font type of the text.

Syntax:- <FONT SIZE=value COLOR=color FACE= “font-names” >

Example :- <font size=2 face="Times new Roman" color=red> HELLO

</font>

Created by -- Neelima Kamboj

Page 10: Html complete

<html> <head>

<title> Text Formatting Tag </title> </head><body><font size=2 face="Times new Roman" color=red> HELLO </font> <br><font size=+4 face="monotype corsiva" color=abc123> HELLO </font></body></html>

Created by -- Neelima Kamboj

Page 11: Html complete

Syntax Meaning Example Output

<b>text</b>writes text as

bold. <b>Welcome</b>

Welcome

<i>text</i>writes text in

italics. <i>Welcome</i>

Welcome

<u>text</u>writes

underlined text

<u>Welcome</u>

Welcome

<s>text</s>strikes a line through the

text. <s>Bye</s> Bye

Text Formatting Tags

Created by -- Neelima Kamboj

Page 12: Html complete

<sub>text</sub> Sub Scripts the textH<sub>2</sub> H2

<sup>text</sup> Super Scripts the textA<sup>2</sup> A2

Text Formatting TagsSyntax Meaning Example Output

<big>text</big> increase the size by one <big>HI</big> HI

<small>text</small> decrease the size by one <small>HI</small> HI

Text Formatting Tags

Created by -- Neelima Kamboj

Page 13: Html complete

Lists There are two types of lists in HTML Unordered Lists and Ordered Lists

Unordered List --- also known as bulleted list or un-numbered list. <UL> tag is used to create a bulleted list. It is a container tag.

The list items can be added using the <LI> tag which is an empty tag.

Attribute of <UL> tag

TYPE -- it is used to change the bullet shape. HTML provides only three bullets value Shape

disc circle square

Syntax :- <UL TYPE=value><LI> text <LI> text …

</UL>

Created by -- Neelima Kamboj

Page 14: Html complete

Created by -- Neelima Kamboj

Page 15: Html complete

Ordered List --- also known as numbered list. <OL> tag is used to create a numbered list. It is a container tag.

The list items can be added using the <LI> tag which is an empty tag. Attributes 1. TYPE -- This attribute is used to change the numbering style.

There are five types of number styles.

2. START -- This attribute sets the starting value of the list items. The value should always be a number irrespective of the type used.

Valu

e

Meaning Samples

1 Plain numbers 1, 2, 3, 4, 5

A Capital Letters A, B, C, D, E

a Small Letters a, b, c, d, e

I Capital Roman Numbers I, II, III, IV, V

i Small Roman Numbers i, ii, iii, iv, v

Syntax <OL TYPE=value start=value>

<LI> text <LI> text …

</OL>

Created by -- Neelima Kamboj

Page 16: Html complete

Created by -- Neelima Kamboj