Chapter7 web application

Chapter – 7
Web Applications
HTML (Hyper Text Markup Language) – HTML is a document layout and
hyperlink specification language i.e. a language used to design the layout of
a document and to specify the hyperlinks.
Tag – A Tag is a HTML command that indicates how part of web page
should be displayed.
Attribute – An attribute is a special word used to specify additional
information to tag such as color, alignment etc.
HTML Document Structure
<HTML>
<HEAD>
<TITLE> Title of Page </TITLE>
</HEAD>
<BODY>
Contain actual text to be displayed and other tags
</BODY>
</HTML>
<HTML> Tag – It defines the document as an HTML document. This tag
tells the browser that the current document is an HTML document.
Syntax <HTML> ……………. </HTML>
<HEAD> tag – It defines the document headers including title. It does not
affect the appearance of the document.
Syntax <HEAD> ………………… </HEAD>
<TITLE> tag – Contain the title to be displayed in the title bar.
Syntax <TITLE> ………………… </TITLE>
<BODY> tag – This tag contain all the tags, attribute and actual text to be
displayed in the web page.
Syntax <BODY> ………………… </BODY>
HTML Elements – There are two types of element

1. Container elements – It is specified by pair of tags – Start tag and End
tag e.g. <TITLE> </TITLE> .
2. Empty elements – Require just a starting tag and not an ending tag
e.g. <BR> .
BASIC HTML TAGS
<BODY> tag – This tag contain all the tags, attribute and information to
be displayed in the web page.
Attributes of <BODY> tag are :
1. BGCOLOR : To change the background color.
2. BACKGROUND : Specify the path and filename of image that has
to be used as the background of the document.
3. TEXT : To sets the color of the text in the document.
<P> tag – To start a new paragraph.
Syntax <P Align = “alignment”> …………………………. </P>
Alignment cab be Left, Right and Center
<BR> tag – Insert a line break which implies that text following the tag
will be moved to next line.
Syntax <BR>
Horizontal Rules <HR> tag – This tag draw a horizontal line across the
whole page. We can use this tag to visually divide the information into
sections.
Attribute used with <HR> tag are :
1 ALIGN : To change the alignment of line. Default is center
alignment.
2. NOSHADE : Produce a solid horizontal rule that has no shading.
3. SIZE : Defines the thickness of the rule.
4. WIDTH : Sets the width of the rule.
5. COLOR : Sets the color of the horizontal rule.

Heading Styles :
HTML has six levels of headings, numbered 1 to 6. The highest level
heading is <H1> and lowest level is <H6>. Heading displayed in larger and
bolder face than normal text.
Syntax : <H> ……………………….. </H>
Text Styles :
BoldFace <B> tag – Displays the text in BOLDFACE style.
Syntax : <B> …………………. </B>
Italics <I> tag – Displays text in ITALICS.
Syntax : <I> …………………. </I>
Underline <U> tag – Displays text as underline.
Syntax : <U> ………………… </U>
Image <IMG> tag – It is used to insert an image in a web page.
Attributes of <IMG> tag are:
1 SRC : Gives the location of image to be inserted.
2. BORDER : Specifies the size of border.
3. ALIGN : Specifies the alignment of image.
4. WIDTH : Specifies the horizontal width of the image.
5. HEIGHT : Specifies the height of the image.
The <FONT> tag – It is used to specify font, size and color to the text.
The attributes are:
1 FACE : Sets the font to the specified font name
2 SIZE : Sets the size of text between 1 and 7 (7 is the largest).
The default size is 3.
3 COLOR : Sets the color of text
Example :
<FONT FACE=”Comic Sans MS” SIZE= 6 COLOR = RED >
Welcome to our home page.

</FONT>
LISTS – Lists help us to organize the contents of the web page in an
ordered and sequential manner.
HTML supports three types of lists:
 Unordered lists (bulleted lists)
 Ordered lists (numbered)
 Definition lists.
Ordered Lists <OL> tag – It displays a numbered list. Each list item is
started by a number or a letter.
Attributes of <OL> tag are:
1 START : Specifies the starting number of the list.
2. TYPE : Defines the type of numbering sequence used for the
list items.
“1” for counting numbers (1,2,……)
“A” for uppercase letters.
“a” for lowercase letters.
“I” for uppercase Roman numerals.
“i" for lowercase Roman numerals.
<OL TYPE=”1” START=3>
<LI> CDs
<LI> DVDs
<LI> Hard Disks
</OL>
Unordered Lists <UL> tag – It displays a bulleted list.
Attributes of <UL> tag are:
1 TYPE : Defines the type of bullet used for list item.
The value can be :
CIRCLE – hollow bullet.

DISC – solid round bullet.
SQUARE – a square bullet.
Example :
<UL>
<LI> CDs
<LI> DVDs
<LI> Hard Disks
</UL>
Definition Lists <DL> tag– Definition lists consists of two parts:
1. Definition term – appears after the tag <DT>
2. Definition description – appears after the tag <DD>
Example
<DL>
<DT> Keyboard
<DD> An input device
<DT> Printer
<DD> An output device
</DL>
Output:
Keyboard
An input device
Printer
An output device
List Item <LI> tag – It is used inside <OL> and <UL> tag to define list
items. Each list item has to be preceded by <LI> tag.
Syntax : <LI> List Item Name

Tables – It is used to display data in organized manner (rows and
columns).
<TABLE> tag – This tag started by <TABLE> and ended by </TABLE>
tag.
Attribute of <TABLE> tag are:
1. ALIGN : To specify the alignment of table in relation to
the window screen. It can be set to LEFT,
CENTER, or RIGHT.
2. BGCOLOR : Sets the background color for the table.
3. BORDER : Sets the border thickness around the table.
4. VALIGN : Controls the vertical alignment of cell
contents. It can be TOP, MIDDLE or BOTTOM.
5. WIDTH : Sets the WIDTH of table in relation to window
screen.
6 CELLPADDING : Controls the distance between data and
boundaries of the cell.
7. CELLSPACING : Controls the spacing between adjacent cells.
TABLE ROW <TR> tag – Describe the row in a table.
Attribute of <TR> tag are:
1. ALIGN : Controls the alignment of text to left, right or
center. Default is left.
2. VALIGN : Controls the vertical alignment of text in a
row. It can be top, bottom or middle.
3. BGCOLOR : Sets the background color of the table row.
TABLE DATA <TD> tag – It is used to specify text in a cell of the table.
TABLE HEADING <TH> tag – It is used to define header row. The
content of header row is automatically centered and appears in boldface.

FORMS in HTML – Forms is used to make a web page interactive. From
allows the user to enter some data and this data can then sent to a web
server or to another web page.
<FORM> tag – It is used to create a form on a web page.
Attributes of <FORM> tag are:
1. NAME : Specifies the name of the form.
2. ACTION : Specifies the URL where the form data is sent when
the form is submitted.
3. METHOD : Specifies how the form data is submitted.
<INPUT> tag – It is used to provide an input field in a form where the
user can enter the data. An input filed may be a textfield, a checkbox, a
radiobutton and more.
Attributes of <INPUT> tag are:
1 TYPE : Determines the field type to take input. Field type may be
radio, checkbox button and more.
2. NAME : Specifies the name of the field.
3. VALUE : Specifies the text to be displayed on the field.
Different filed types :
S.No. Field Type : Use
1. TEXT : To provide a single line text input field
to enter text.
2. PASSWORD : To provide a single line text input field
to enter password.
3. RADIO : To provide a radio button.
4. CHECKBOX : To provide a check box.
5. SUBMIT : To provide a button on the form. When
it is clicked , the form is submitted to
the destination.
6. RESET : To provide a button on the form. When

it is clicked, the input fields are reset to
their default state.
XML (eXtensible Markup Language) – XML is also a markup language
like HTML. It is used to describe the data. XML has nothing to do with
presentation of data in the browser.
Difference between XML and HTML
1. HTML is used to display data and to focus on formatting data, whereas
XML is used to describe data and focus on what data is.
2. HTML tags are predefined, whereas XML tags are not predefined. We
create our own tags.
3. HTML tags are not case sensitive, whereas XML tags are case
sensitive.
Features of XML
1. It allows user to create his own tags and document structure.
2. XML can be used to store data.
3. It can be used to share data between two entirely different platforms.
4. XML is free. It can be written with a simple text editor.

Chapter7 web application

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Chapter7 web application

Similar to Chapter7 web application (20)

Recently uploaded

Recently uploaded (20)

Chapter7 web application