Chapter 7: Web Applications A Web Application refers an application which sends and receive information through Word Wide Web over Internet or Intranet. A typical Web Application may include-  Multimedia Information (Text, Movies, Pictures, Sound, Programs etc…)  Hyper Text Information :( Information that contains links to other information resources)  Graphical User Interface :(So users can point and click to request information instead of typing) The World Wide Web is an example of an information protocol/service that works using a Client/Server software design. A service that uses Client/Server design requires two pieces of software to work: Client software (e.g. Web Browser) to request information, and Server software (Web server) to answer requests and provide their information. Most Web applications are designed this way. Web Address &Uniform Resource Locator (URL): A location of a web server is called Website and each webpage stored on a Website has a unique address called URL (Uniform Resource Locator) Ex. http://www.thinkquest.org/aboutus.html A general structure of URL isProtocol://domain name/Directory Path/object name  Protocol: It specifies the type of protocol to be followed by server. Some commonly protocols are http, https, ftp, new etc.  Domain Name: It specifies the name of web server on the Internet including domain name like .com, .org, .mil, .edu or country domain like .in, .ca .au etc.  Directory Path: It specifies the location of file/web page on the server.  Object Name: It specifies the name of specific web page like index.html The uniform resource locator (URL) is the unique identifier of a webpage. The address or URL of the current page you are on appears in the "Address Bar" of the webbrowser. What is Web Server? Web servers are computers on Internet on which Web pages are stored. It is equipped with a program which listens request from the web client (Web Browser) and sends web pages. The major functions of a web server are-  Serving of Web pages on request of Browser.  Controlling access and security of the server.  Monitoring and logging server access statistics. Some most popular Web Servers are Apache Web Server (Open Source software for Linux), MS Internet Information Server (IIS) and Netscape Enterprise Web Server etc. Web server delivers (serves) content, such as web pages, using the Hypertext Transfer Protocol (HTTP), over the World Wide Web. What is Web Browser? A web browser is an Web Client program which allows users to access and navigate the World Wide Web over Internet.  It provides an interface to interact with Internet.  It send request to Web Server for specified web page and displays at client machine.  It also maintains History of visited Web Pages and may provide tools for easy web surfing. Some commonly used Web Browsers are Microsoft Internet Explorer, Mozilla FireFox, Google Chrome, Opera and Webkit etc. What is HTML? HTML stands for Hyper Mark-up Language. HTML is a document-layout and Hyper link-specification language i.e. a language used to design the layout of a document with Hyperlink. HTML tells the Web browser how to display the contents of a Hyper Text document including text, images and other supported media. :: 40 ::  HTML is:  Web page layout language.  Hyper Link specification languages.  HTML is Not:  Word Processing tool.  Programming language.

Elements of HTML:
HTML is made up of elements called Tags and Attributes, which specifies the format of the documents.
 A Tag is a coded HTML command that indicates how parts of web page should be displayed.
 Most of the Tags are used in pair i.e. begin and end of the Tag. End Tag are begins with / character.
e.g. <Head> ………. </Head>
 Every HTML Tag consist of a tag name, sometimes followed by an optional list of Attributes, all closed
in Angel Bracket <>.
 Most of the Attributes are followed by a Value (number or words).
e.g. <BODY BGColor = “RED”>
 Tags are not case sensitive and contained within Angle Bracket <> i.e. <HTML> and <html> are same.
 There are two types of Tags are used in HTML.
 Container Tag
These HTML Tag written in pair i.e. starting <..> as well as ending </…> .
Ex. <Title> My First Page < /Title>
 Empty Tag
These Tags require just a starting tag and not ending tag.
Ex. <HR>, <BR><IMG > etc.
HTML Tag Structure:
 Tags are written in nested form. i.e. Starts later-Closed earlier.
 Multiple Attributes may appear after Tag Name, each separated by space. The order of appearance is
not important.
 An Attribute’s value, if any is given after the equal (=) sign in quotes after attribute name.
Ex. <A href = “http://www.google.com”>
 Quotes may be omitted if there is a single value or word (without space).
Ex. <BODY bgcolor=RED>
<HR WIDTH = 30%>
Structure ofHTML Page:

 identifies that the document is an HTML document.  Contains information about document including its title, scripts used, style definition and other descriptions.  This Tag contains the title and identifies its content in a global context. Title is displayed in the Title bar of the Browser. Ex. ….. Tag This is the largest Tag which defines the content of the document. It may contain text, images, lists, tables and hyperlinks etc. Attributes Value Description Background Image file Defines the background image to be displayed. Smaller image is tiled to cover the whole page. Bgcolor Color Specifies the background color of the page. Text Color Specifies the color of the text. Link Color Specifies the color of the Hyper link. VLink Color Specifies the color of the visited Hyper link. ALink Color Specifies the color of the Active Hyper link. LEFTMARGIN value Specifies the area left from the edge of page. TOPMARGIN value Specifies the area left from the top of page. Example: Color Code in HTML: Color Code in HTML is 6 digit RGB (Red-Green-Blue) value started with # sign.Each RGB is defined with 2 digit starting with 00 to FF. e.g. #00000 (Black), #00FFFF (Aqua), #FF0000 (Red) and #FFFFFF is White etc. Color value can be given in words also like Red, Black, White etc

…..

Heading Tag HTML specifies six levels of headings, numbered from 1 to 6. Headings are typically displayed in larger fonts than normal body text.

is the largest and

is smallest size. If multiple headings are used, it should continuous i.e. You can’t use

after

without using

and

. Attributes Value Description Align LEFT ,RIGHT, CENTER (Alignment of the Heading Text) It specifies the alignment of text i.e. Left/ Right/ Center. Example

Kendriya Vidyalaya Sangathan

Regional Office – Dehradun Region

…..
Paragraph Tag The Paragraph Tag specifies the begin and end of the paragraph of the text. :: 42 :: Attributes Value Description Align LEFT ,RIGHT, CENTER Alignment of the Heading Text Example:
This is a single line paragraph
Other Formatting Tags The following tags are frequently used within a paragraph. …. Specifies Bold Text …. Specifies Italics Text. …. Specifies Underline Text. _….Specifies the Subscript like 2 in H2O ^{…. ^{Specifies the Subscript like 2 in X2
Example :}}
Kendriya Vidyalaya Sangathan
^{^{Will display
KendriyaVidyalaya Sangathan
….
The Font tag defines the size, style and colour of the text. HTML uses Relative font size from 1 to 7.
Default value is 3. Each successive Font size is 20% larger or smaller than default size.
Attributes Value Description
Size Values (1 -7) Specifies the relative size of the font.
Color Color Specifies the color of the text.
Face Font name Specifies the Font name. You can define multiple fonts separated by,
so that if first font is not supported/available the second can be used.
Example: How are You
Hello
Good Bye

This Tag allow you to define the basic (default) size for the font, which is used for normal text, where
is not defined. Attributes & values are same as Tag.
Example:

Difference between & Tag:
is a container tag which is used to change the appearance of short segment of text, whereas
is empty tag which is used to set the default font settings where is not defined.

Break Line
Sometimes, it is required to break a paragraph i.e. remaining text to be appeared on next line.
tag
does this job.
Example:}}
Hello! Everybody …..
How are you

^{^{Horizontal Ruler:
This tag produces a Horizontal line spread across the width of the Browser window.The Thickness, width
and colour etc. can be defined by the following attributes.
Attributes Value Description
Size Values Specifies the size (thickness) of the line. Default is 3.
Color Color Specifies the color of the line.
Width Number or
%
Specifies the width of the line. It may be absolute value or certain %
of the Browser Window width.
NoShade - Specifies the shade to be appear or not. If NOSHADE option is not
given 3-D lines appears.
Example:}}

^{^{:: 43 ::
…. Linking other Web Page or Website
Anchor tag defines the Active link of other Web page or File. A hand shaped}}
d cursor appears when mouse is rolled over the text, which indicates the active link. Attributes Value Description HREF File/Web URL Specifies the Web page or Web URL (Address) to be linked with given text. Example: Google My Bio-Data Vacancy at Kendriya Vidyalaya Displaying Images This tag displays specified image file (.jpg, .gif, .bmp, .png etc.) with defined size (width and height) Attributes Value Description SRC File name Specifies the image /picture file with path. If path is not given then current folder is assumed. Width Number Specifies the width of the image. If given width is smaller than picture’s width, then picture is resized. Height Number Specifies the height of the image. If height is smaller than picture’s height, then picture is resized. Align Alignment Specifies the Alignment of the image as Left, Right, Top, Middle and Bottom (default). Border Number Specified the thickness of border. 0 for no border. Example:

……. (Ordered List) Ordered List is numbered list. Order may be started from any number or alphabet. Attributes Value Description TYPE A or a I or i 1 It specifies capital/small A,B,C,D.. etc. It specifies capital/small Romans I,II,III etc. It specifies the number 1,2,3 etc. (Default) START Value Defines starting value of list. Example

……. (Unordered List) Unordered List is also called un-numbered or bulleted list. Bullet may be circle, disk and square. Attributes Value Description TYPE Disk Square Circle It specifies the type Bullet symbol. Default is Disk type. :: 44 :: Example Working with Tables in HTML: Tables are useful to display data in tabular form. In HTML, the following core tags are used to create a table.  ..

defines a table object.  … defines a Table Row.  … defines a Table Data (cell value)  .. defines Column Header.  .. Defines caption of table. …….

This tag creates table having various rows and columns defined by and tag. The attributes and values areAttributes Value Description Background Color Specifies the background image file (.jpg, .gif etc.) Bgcolor Color Specifies the background color. Border Value Defines the outline border size (0 – no border) Bordercolor Color Specifies the color of border. Frame Above, Below, Box, Hsides, Vsides etc. Specifies the portion of border will display. Used with Border attribute. Rules All, Cols, Rows, None Specifies the inside border edges to be displayed. Cellspacing Value Space between cells. Cellpadding Value Space between the cell border and cell data. Height Value Defines the height of table in pixel. Width Value Defines the width of table in pixel. Align Left, Right, Center Specifies the alignment of table across the page. Example: This tag displays table data in a cell. It is always placed inside tag. The attributes and values areAttributes Value Description Background Color Specifies the background image file (.jpg, .gif etc.) for a cell. Bgcolor Color Specifies the background color for a cell. Rowspan Value Defines the Span of a cell in respect rows. Colspan Value Defines the span of cell in respect of columns. Width Value Defines the width of cell in pixel or % of table. Align Left, Right, Center Specifies the alignment of data in the cell. VAlign Top, Middle, Bottom Defines Vertical Alignment, when rowspan of a cell is more than one row.

…….

Example Working with Forms in HTML: Forms are means to collect information/data from the Site-visitor or client. is used to define a form in section of HTML page.Form contains some GUI controls to interact with users. Some of important controls are-  Buttons (Submit , Reset and Push Buttons )  Check Boxes  Radio Buttons  Combo Boxes (Menus)  Password field  Text Input (Text Field, Text Area etc.) This Tag can be used in section to create a form. It may contain many other input controls. Commonly used Attributes areAttributes Value Description Action Script or URL It specifies the Script or email-ID or URL which will receive data (destination of form’s data). Method Get Post Form Specifies how the form-data is submitted. Get- form data is submitted as URL variables. Post-form data is submitted as HTTP post. Form- Opens a new form as per specified URL. Example:

This Tag defines various input controls to get input from the user. Attributes Value Description Type Text Radio Checkbox Password Submit Reset Button Defines a Text Box. Defines a Radio Button. Defines a Check Box Creates a Password input box. Creates a Submit Button. Creates a Reset Buttons. Creates a push buttons. Name String It specifies the name of the input control. Value String/Val Specifies the initial value for the control. Size value Specifies the size of control. Example: This Tag creates a Drop-down Option menu from which user may select an option. Example : :: 46 :: Example: Developing Form in HTML Consider the following Enquiry form containing Tex Fields, Radio Buttons, Drop Down List (combo) , Text Area controls along with push buttons. The following code will produce the Enquiry form when opened with a web browser program.

Enquiry Form

Name
Sex Male Female
Email
Comment

What is XML? eXtensible Markup Language (XML) is also a text-based mark-up language which allows to create application specific structured documents.The common feature of XML are-  XML was designed to carry or share data, not to display.  XML is self-Descriptive (Tags are not predefined).  XML is Extensible i.e. XML may be used to create a new Mark-up Language.  XML is platform Independent.  It is free and open standard.  It is supported and recommended by W3C. HTML V/s XML: HTML and XML both are different types of Mark-up language.  HTML  HTML formats documents and displays it as web page.  HTML Tags are pre-defined.  HTML Tags may be Empty type.  HTML Tags are not case sensitive.  HTML documents are directly viewable in a Browser.  XML  XML documents carry data along with their description.  XML Tags are not pre-defined. You may create your own Tags.  XML Tags must be Container type.  XML Tags are case sensitive.  XML documents are viewable if its Style Sheet is available. Advantages of XML: XML offers the following advantages-  XML is fully compatible to various application developed in Java or any other languages.  XML is portable and can be used on any network or hardware like palmtop or PDAs.  XML is Extensible i.e. You may create your own tags.  XML is platform Independent.  XML document can be stored in the database.  XML can be used to share data within wide area networks. It is most suited to Internet. Structure of XML Document: A XML Document is intended to display data like HTML. An XML document system comprises the following-  Style Sheet (CSS or XSL) It defines the style (How it would appear i.e. font, color, size alignment etc.) of the elements.  Grammar Structure (DTD) It is optional component in XML document system and defines the Rules of the document (Tag definitions).  XML File It contains and describes actual data.

INFORMATICS PRACTICES

Sunday, 5 February 2017

WEB APPLICATIONS

…..