Chapter 7 : Web Applications Ques: What is HTML? HTML (Hyper Text Markup Language) is a markup language used to create HTML documents. HTML is a subset of SGML (Standard Generalized Markup Language) and is specified by the W3C (World Wide Web Consortium). Ques: What is the difference between an HTML document and a Web Page? An HTML Document is only a text file that contains HTML markup elements. When an HTML document is opened in a web browser, the browser interprets the various markup elements and displays the HTML document as a Web Page. Ques: What is an Element in HTML? An Element is the basic building block of HTML and is typically made up of the following three parts: 1 2 3 Start Tag / ON Tag Parameter End Tag / OFF Tag < TAGNAME ATTRIBUTE =”VALUE” ATTRIBUTE=”VALUE > Any Text or elements < /TAGNAME > Example: < BODY BGCOLOR = “cyan” TEXT = “black” > Hello world! < /BODY > Ques: Differentiate between the Start Tag and End Tag of an HTML Element. Start Tag End Tag Start Tag consists of the tag name enclosed in angular brackets End Tag has a slash (/) that precedes the tag name and is enclosed in angular brackets Start Tag may also contain attributes and their values within the angular brackets. End Tag does not have attributes. Ques: Differentiate between the Container Elements and Empty Elements in HTML. Container Element Empty Elements Container Element is specified by a pair of Start tag and End tag. Empty element has only the start tag but no end tag. Container elements contain parameters and may also contain attributes. Empty element has no parameters, but may take attributes. Ques: Explain the basic Structure of an HTML document. Any HTML document, in general, contains the following three elements - HTML, HEAD, and BODY. 1. <HTML> . . .</HTML> It is a container element. It tells the browser that the current document is an HTML document. HTML element further contains HEAD and the BODY elements. 2. <HEAD> . . .</HEAD> It is a container element. It defines the HTML document header containing the information about the document and does not affect the appearance of the document. The <TITLE>. . .</TITLE> element is placed within HEAD element and is shown in the browser’s title bar. If the HTML document HEAD does not contain a TITLE, then the file name of the HTML document is displayed in the title bar. 3. <BODY> . . .</BODY> It is a container element. It contains the main contents of the document as parameters. All the Paragraphs, headings, tables, lists are written within the body tag.
Transcript
Chapter 7 : Web Applications
Ques: What is HTML?
HTML (Hyper Text Markup Language) is a markup language used to create HTML
documents. HTML is a subset of SGML (Standard Generalized Markup Language) and is
specified by the W3C (World Wide Web Consortium).
Ques: What is the difference between an HTML document and a Web Page?
An HTML Document is only a text file that contains HTML markup elements. When an HTML
document is opened in a web browser, the browser interprets the various markup elements
and displays the HTML document as a Web Page.
Ques: What is an Element in HTML?
An Element is the basic building block of HTML and is typically made up of the following three parts: 1 2 3
Start Tag / ON Tag Parameter End Tag / OFF Tag
< TAGNAME ATTRIBUTE =”VALUE” ATTRIBUTE=”VALUE >
Any Text or elements
< /TAGNAME >
Example:
< BODY BGCOLOR = “cyan” TEXT = “black” >
Hello world!
< /BODY >
Ques: Differentiate between the Start Tag and End Tag of an HTML Element.
Start Tag End Tag
Start Tag consists of the tag name enclosed in
angular brackets
End Tag has a slash (/) that precedes the tag
name and is enclosed in angular brackets
Start Tag may also contain attributes and
their values within the angular brackets.
End Tag does not have attributes.
Ques: Differentiate between the Container Elements and Empty Elements in HTML.
Container Element Empty Elements
Container Element is specified by a pair of Start
tag and End tag.
Empty element has only the start tag but no
end tag.
Container elements contain parameters and
may also contain attributes.
Empty element has no parameters, but may
take attributes.
Ques: Explain the basic Structure of an HTML document.
Any HTML document, in general, contains
the following three elements - HTML, HEAD, and BODY.
1. <HTML> . . .</HTML> It is a container element. It tells the browser that the current
document is an HTML document. HTML element further contains HEAD and the BODY elements.
2. <HEAD> . . .</HEAD> It is a container element. It defines the HTML document header
containing the information about the document and does not affect the appearance of the document.
The <TITLE>. . .</TITLE> element is placed within HEAD element and is shown in the browser’s
title bar. If the HTML document HEAD does not contain a TITLE, then the file name of the HTML
document is displayed in the title bar.
3. <BODY> . . .</BODY> It is a container element. It contains the main contents of the document
as parameters. All the Paragraphs, headings, tables, lists are written within the body tag.
Chapter 7 : Web Applications
Body and Text and Image Elements in HTML
TAG ATTRIBUTES
BODY is a container element started by <BODY>
tag and ended by </BODY> tag and contains the
main contents of the document as parameters.
Example:
BACKGROUND attribute specifies the path and
filename of the image that is to be used as
the background of the document. The filename
extension has to be specified along with the
filename.
BGCOLOR attribute specifies the background
color of a document. There are 16 valid color
names in HTML: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow. You can also
form a new RGB color by mixing the three
basic colors RED(rr), GREEN(gg) and BLUE(bb)
in different intensity from 00 to FF hexadecimal
numbers eg. #00FF00, #459036
TEXT attribute specifies the color of the text in
a document
LINK attribute specifies the color of unvisited
links in a document. The default setting for a
non-visited link is usually blue.
ALINK attribute specifies the color of an active
link which is keypressed but not released in a
document. The default Alink colour is red
VLINK attribute specifies the color of visited
links in a document. The default setting for a
visited link is usually violet
ANCHOR is a container element started by <A> and
ended by </A> tags. It defines a hyperlink, which
is used to link from one page to another.
HREF attribute specifies the path and
filename of the link destination.
HEADING is a container element started by <HN>
tag and ended by </HN> tag, where N is a natural
number from 1 to 6 (H1,H2,H3,H4,H5,H6). H1 gives
the most prominent heading, while H6 gives the
least prominent heading. Heading element
introduces a blank line above and below the
header text.
ALIGN attribute specifies the horizontal alignment
of heading. It can be Center, Left or Right.
Chapter 7 : Web Applications
TAG ATTRIBUTES
HORIZONTAL RULE is an empty element specified
by <HR> tag. The <HR> tag draws a horizontal
line across the document frame or window to
visually divide the information into sections
ALIGN attribute specifies how the horizontal rule
should be aligned left, right, or center. Default is
center alignment.
SIZE defines the thickness of the horizontal
rule. This thickness is specified in the number of
pixels. Default is 2 pixels.
WIDTH defines the horizontal width of the line.
The default is the width of the page. The
measurement value can be the number of pixels,
e.g., "50”, or a percentage of the page width,
e.g., "75%"of the page width.
COLOR sets the color of the horizontal line.
NOSHADE produces a solid horizontal rule that
has no shading.
PARAGRAPH is a container element started by <P>
tag and ended by </P> tag. <P> starts a new
paragraph with extra space before the first
line.
ALIGN attribute specifies horizontal alignment of
paragraph. Value can be Center, Left or Right.
BREAK or LINE BREAK is an empty element
specified by <BR> tag. <BR> tag forces a line
break which implies that the text/image following
the tag will be moved to the next line when
displayed in the browser.
Chapter 7 : Web Applications
TAG ATTRIBUTES
IMAGE is an empty element specified by <IMG>
tag. It is used to insert an image in a web page.
SRC specifies the path and name of the
image to be inserted. If no path is given, the
source is assumed to be the current folder.
Most browsers only support a few image formats
or file types. They are GIF, JPG and JPEG.
HEIGHT is specified in number of pixels or
as the percentage of page height
WIDTH specifies the horizontal width of the
image in number of pixels or as the percentage
of page width.
BORDER is used to place a border of specified
width around the image. Border widths are
measured in pixels. The BORDER="0" means
that we want no border.
Alt provides an alternative text for the
image
Align is used to align left or right of page.
CENTER is a container element started by
<CENTER> and ended by </CENTER> tags. This
element is used to center-align text and images
FONT is a container element started by <FONT>
tag and ended by </FONT> tag. The FONT
element is used to customize the text.
FACE is used to specify the name of the font.
A list of font names separated by commas can
be specified. If the first font is available on the
system, it will be used. Otherwise the second
will be tried, and so on. If none is available, the
default font will be used. Some eg. are: Arial,
Comic Sans MS, Lucida Console, Arial Black, Courier New, Tahoma, Arial Narrow, Georgia, Times New Roman, Bookman Old Style, Impact Trebuchet MS, Century Gothic, Mangal, Verdana etc.
SIZE attribute is used to specify the font size
between 1and 7 (7 is the largest).
COLOR Sets the color of the text. The color can
be set by giving the name of the color or its
hexadecimal value.
Chapter 7 : Web Applications
BOLD is a container element started by <B> and
ended by </B> tags. This element is used to
display the text enclosed within the tags in bold
form.
ITALICS is a container element started by <I> and
ended by </I> tags. This element is used to
display the text enclosed within the tags in italics
form.
UNDERLINE is a container element started by <U>
and ended by </U> tags. This element is used to
underline the text enclosed within the tags.
COMMENT is the text placed between <!-- and
--> It is ignored by the browser.
TABLE elements in HTML
TABLE is a container element started by <TABLE>
tag and ended by </TABLE> tag. It is the basic
element for creating a table.
ALIGN Specifies the horizontal placement of the
table in relation to the window screen. It can be
LEFT , RIGHT ,CENTER.
BGCOLOR Sets the colour of the background for
the table.
BORDER Sets the border size (width of the
boundaries) of the table.
CELLSPACING: specifies the space, in pixels,
between cells.
CELLPADDING: specifies the space, in pixels,
between the cell wall and the cell content.
Chapter 7 : Web Applications
CAPTION is a container element started by
<CAPTION> tag and ended by </CAPTION> tag
used to specify the caption for the table
TABLE ROW is a container element started by
<TR> tag and ended by </TR> tag. It is used to
define table rows. The contents of a table row may
contain TH tags, which indicate table headings, and
TD tags, which indicate table data.
ALIGN controls whether the text in a row is
aligned to the left, right, or center of a cell.
Default alignment is Left.
VALIGN controls whether the text in a row is
aligned to the top, bottom, or middle of a cell.
MIDDLE is the default
BGCOLOR sets the background color of the
table row
TABLE HEADING is a container element started by
<TH> tag and ended by </TH> tag. It is used to
create header values. The header values are
displayed in a bold font and center aligned. The TH
element is used to create column or row headings.
ALIGN
VALIGN
BGCOLOR
NOWRAP Specifies that the contents of a cell
cannot be broken, i.e., they do not wrap onto
the next line.
TABLE DATA is a container element started by
<TD> tag and ended by </TD> tag. It is used to
specify the text in a cell of the table. The TD tag is
used inside the TR tag, which is inside the table tag.
The number of columns in a table depends on the
number of TD elements within the TR element.
ALIGN
VALIGN
BGCOLOR
Chapter 7 : Web Applications
Ordered and Unordered Lists in HTML
TAG ATTRIBUTES
LIST ITEM is an empty element specified by <LI>
tag. It is used inside OL and UL elements to
define list items.
UNORDERED LIST is a container element started by
<UL> tag and ended by </UL> tag. It displays a
bulleted list where each item is preceded by a small
symbol called a bullet.
TYPE defines the type of bullet used for each list
item. The value can be:
DISC specifies a solid round bullet.
CIRCLE specifies a hollow bullet.
SQUARE specifies a square bullet
ORDERED LIST is a container element started by
<OL> tag and ended by </OL> tag. It displays a
numbered list. In a numbered list each item is
preceded by a number or a letter.
TYPE defines the type of numbering sequence
used for the list items.
"A" specifies a sequence of uppercase letters.
"a" specifies sequence of lowercase letters.
"I" specifies a sequence of uppercase Roman no.
"i" specifies a sequence of lowercase Roman no.
"1" specifies a sequence of Decimal numbers.
START indicates the starting number of the list.
This number must be a positive integer.
Chapter 7 : Web Applications
Form Elements in HTML
TAG ATTRIBUTES
FORM element is a container element started by
<FORM> tag and ended by </FORM tag. It is
used to create a form on a web page
NAME specifies the name of the form. It is
required to differentiate one form from another.
The NAME attribute is optional if there is only
one FORM on the web page.
ACTION specifies the destination URL where
the form-data is sent when the form is
submitted.
METHOD specifies the form-data is submitted
by using the methods get or post.
METHOD="get", submits form-data as URL
variables.
METHOD="post", submits form-data as HTTP
post.
INPUT It is an empty element specified by
<INPUT> tag. It is used to provide an input field in
a form where the user can enter the data. An input
field may be a text field, a checkbox, a radio button,
a button, and more. INPUT element is always used
within the FORM element. Thus, INPUT element
defines an object on the FORM which can receive
user input.
NAME Specifies the name of the field. Name
does not appear on the field. It is required for
the identification/differentiation as there can be
more than one fields in a single FORM.
VALUE Specifies the text to be displayed on the
field.
TYPE attribute determines the type of input field
to be provided in the form. Field type can be one
of the following:
1. TEXT provides a single line text input field
where the user can enter text
SIZE="n" Sets the visible size of the text field
to n characters
MAXLENGTH="n" Set the maximum number
of characters that can be input in the text field
2. PASSWORD provides a single line text input
field where the user can enter password. A
password field shows one dot for each
character input by the user. This is to prevent
others from seeing the password.
3. RADIO provides a radio button on the form.
More than one radio buttons can have the
same name. All the radio buttons that have
the same name form a radio group. Only
one radio button of a group can be selected at
one time. When a form is submitted, selected
radio button's value specified by the VALUE
attribute is submitted to the destination.
CHECKED - Selects the radio button, which
can be deselected when another choice is
made. Only one radio button in a radio group
can be specified as CHECKED.
4. CHECKBOX provides a check box on the
form. The user can choose more than one
checkboxes. However, we can make a group
of checkboxes also, by giving them the same
name.
Chapter 7 : Web Applications
5. SUBMIT provides a button on the form. When
this button is clicked, the form is submitted to
the destination.
6. RESET provides a button on the form. When
this button is clicked, the input fields on the
form are reset to their default state.
7. BUTTON provides a button on the form
8. FILE Displays a choose file button
Features of XML
XML allows the user to create its own tags and document structure.
XML can be used to store and exchange data.
XML is free. It can be written with a simple text editor.
XML is derived from SGML (Standard Generalized Markup Language).
XML is a W3C recommendation.
The main difference between XML and HTML
HTML XML
Hyper Text Markup Language eXtensible Markup Language
It is used to display data and to focus
on formatting of data.
It is used to describe data and focus on what actual data is.
The tags are predefined. The tags are not predefined. You can create your own tags.
The tags are not case-sensitive. The tags are case-sensitive.
It has both container and empty tags. It has only container tags, therefore, all tags must be closed.
The white spaces are truncated. The white spaces in a document are not truncated.
The attributes can be without quotes,
within single or double quotes.
The attributes are enclosed in double quotes.
Document structure
The XML document structure is like a tree.
It has a root element, which is the parent of all other elements.
An element can have sub-elements or child elements.
There is only one root element.
There may be many child elements.
<root>
<child>
<subchild> …. </subchild>
</child>
</root>
Example 1
<?xml version="1.0" encoding="UTF-8"?>
<class>
<student>Sumedha</student>
<student>Utkarsh</student>
<student>Tushar</student>
<teacher>Anil Kumar</teacher>
</class>
Let us try to understand this code:
<?xml version="1.0" encoding = "UTF-8"?>
The first line in the code is called the 'XML prolog'. It specifies that the XML code confirms to
version 1.0 of XML standard, and the encoding scheme used is "UTF-8".
