Web Technologies

201
WEB
TECHNOLOGIES
CSE & IT 3 -2
[Type the abstract of the document here. The abstract is
typically a short summary of the contents of the document. Type
the abstract of the document here. The abstract is typically a
short summary of the contents of the document.]
P.Malla Reddy(CSE Dept)
What is web technology?

Web technology is software, hardware and network architectures that use standards and
technologies developed for the Internet and the World Wide Web (WWW).Web technologies related
to the interface between web servers and their clients. This information includes markup languages,
programming interfaces and languages, and standards for document identification and display.
What is the use of this technology?
Technology is very good at: storing, transferring, processing, filtering and protecting data.
Most of this data is unstructured (documents, emails, ideas, requests, results etc) as opposed to
structured (databases). It allows users to maximize the potential of this data by better organization and
access.
What is the URL?
URL stands for Uniform Resource Locator. A URL is a formatted text string used by Web
browsers, email clients and other software to identify a network resource on the Internet. Network
resources are files that can be plain Web pages, other text documents, graphics, or programs.
URL strings consist of three parts (substrings):
1. network protocol
2. host name or address
3. file or resource location
Syntax:- protocol :// host / location (Ex:-http://google.com)
URL Protocol
The 'protocol' substring defines a network protocolto be used to access a resource. These
strings are short names followed by the three characters '://' (a simple naming convention to denote a
protocol definition). Typical URL protocols include http://,ftp://, and mailto://.
URL Host
The 'host' substring identifies a computer or other network device. Hosts come from standard
Internet
databases
such
as DNS and
can
be
names
or IP
addresses.
For
example,
compnetworking.about.com is the host for this Web page.

URL Location
The 'location' substring contains a path to one specific network resource on the host.
Resources
are
normally
located
in
host
directory
or
folder.
For
example,/od/internetaccessbestuses/bldef-url.htm is the location of this Web page including two

subdirectories and the file name.
What is a Website?
A website is a collection of web pages (documents that are accessed through the Internet),
such as the one you're looking at now. A web page is what you see on the screen when you type in a
P.MallaReddy
Page 2
web address, click on a link, or put a query in a search engine. A web page can contain any type of
information, and can include text, color, graphics, animation and sound.
What is web page?
Webpage is a document commonly written in HyperText Markup Language (HTML) that is
accessible through the Internet or other network using a browser. A web page is accessed by entering
a URL addresses and may contain text, graphics, and hyperlinks to other web pages and files. The
page you're reading now is an example of a web page.
When was the first web page created?
The first web page was created at CERN by Tim Berners-Lee and put online August 6, 1991.
What is the difference between a website and web page?
A website refers to a central al location that contains more than one web page. For example,
Computer Hope is considered a website, which contains thousands of different pages. However, this
page you're reading now is considered a web page on Computer Hope.
What is a Web Browser?
Browser, short for web browser, is a software application used to enable computers users to
locate and access web pages. Browsers translates the basic HTML (Hypertext Mark Up Language)
code that allows us to see images, text videos and listen to audios on websites, along with hyperlinks
that let us travel to different web pages. The browser gets in contact with the web server and requests
for information. The web server receives the information and displays it on the computer.
There are several types of browsers
Mozilla Firefox
Netscape Navigator
Microsoft Internet Explorer
What is A Web Server?

A web server is a piece of software that enables a website to be viewed using HTTP. HTTP
(HyperText Transfer Protocol) is the key protocol for the transfer of data on the web.
HTML (HTML stands for Hypertext Markup Language)
What does that mean?
Hyper is the opposite of linear. Old-fashioned computer programs were necessarily linear that is, they had a specific order. But with a "hyper" language such as HTML, the user can go
anywhere on the web page at any time.
Text is just English characters used to make up ordinary words.
Mark-up is what is done to the text to change its appearance. For instance, "marking up"
your text with <b> before it and </b> after it will put that text in bold.
Language is just that. HTML is the language that computers read in order to understand web
pages.
P.MallaReddy
Page 3
Developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us
communicate with others on the World Wide Web (WWW).
Basic Concepts`
HTML is written in plain text. That means you dont need any fancy software programs like a
word processor to create your HTML files. All you need is a simple text-editor thats already on your
system. For MACs, that would be SimpleText and for Windows, Notepad.
HTML is a markup language
A markup language is a set of markup tags

HTML markup tags are usually called HTML tags
HTML tags are keywords (tag names) surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, with a forward slash before the tag name
Start and end tags are also called opening tags and closing tags
Elements
The words/letters between these two angle brackets are called elements. These are the coded
commands within HTML. Elements tell the browser how to display the web page. For example: <hr>
tells the browser to display a horizontal rule;
Tag of Html
Html is tag-based system. A distinction is often drawn between WYSIWYG formatting

system, and tag-based system. WYSIWYG stands for What You See Is What You Get.
Display, Tag is a special instruction for browser, which indicates that the given information
after tag should be rendered according to the given instruction.
Tags are two kinds singleton tags and paired tags.
Singleton tags does not require an ending tag (Eg: - <hr>, <br>).
Paired tags required an ending tag, which is exactly first tag in a pair is the start tag, the
second tag is the end tag The end tag is written like the start tag, with a forward slash before
the tag name
Html tags are not case-sensitive.
Syntax: - <tag name [Parameter(s)=[values]]>

HTML structure.
All HTML documents are divided into two main parts: the head and the body.
P.MallaReddy
Page 4
You must have the <html>, <head> and <body> container tags in every HTML file.
The document Head Part
HTML <head> tag is a Container Tag. All Header element contains like general information about
page, meta-information, style sheet URL and document type information.
HTML <head> tag inside elements does not display in body part on web browser.
HTML <head> tag inside Elements is <! doctype>, <base>, <link>, <meta>, <title>, <style> and
<script>.
Head Elements Usages
HTML <! doctype> tag use for define a type of document.
HTML <link> tag is use for linked external CSS style sheet, external java script etc... URL define.
HTML <meta> tag use for improve a rankings in search engines means optimize webpage using
proper meta data information
HTML <title> tag define a document title.

HTML <style> tag is use for write internal CSS inside current document.
HTML <script> tag is use for create a dynamic web pages easy and more flexible in internal and
external write a java script code.
Tag
Description
<!DOCTYPE>
Defines a document type and write before the <html> start tag.
<head>
Defines a harder information about the webpage document.
<meta>
Defines meta information use to improve a rankings in Search Engines.
<title>
Defines a Document Title.
<link>
Defines a URL link using External Style Sheet, JavaScript etc..
<base>
Defines a base is used to specify a base URL to relative webpage URL links.
The document Body part

HTML body section is a main contain section of web page all contain that will be seen when the
user loads the webpage.HTML body section supported all the contains such as text, hyperlinks,
images, Special Character, lists, tables, frames, forms etc.It's most powerful section and important
section to display web page. It is largest part all.
P.MallaReddy
Page 5
How to Creating a web page

Step 1 Open up a text editor (SimpleText for Mac or Notepad for Windows)
Step 2 Enter the following:
<html>
<head>
<title> This is my first web page</title>
</head>
<body>
Hello world. This is my first web page. There's more to come.
</body>
</html>
Step 3 Save the document as: firstpage.html
Your file can be saved as either an htm or html file. Remember to save your document on the
computer in a place that you can find it again.
Step 4 To preview your new document, open Netscape Navigator. On the tool bar (located up near the
top of the browser):
Select File menu.-->Select Open A dialogue box appears. Select Choose File
Go to where you saved your file, click on it. This will bring you back to the dialogue box, which
should now be showing your file.
Click Open
Step 5 If all went as planned; your file should look like this in your browser.
Basic Tags
When you learn beginners HTML, It's important to have a basic HTML tags understanding. Here all
Basic HTML tags are listed to help you learn.
length of time on the Internet, youll notice that a Web page is made up of more than just plain words
on a screen. There are headlines, paragraphs, graphics, colors and much more. Its a lively place to be.
Our next tags--headline, paragraph, line break and horizontal rule--will help us make our current page
a lot more exciting. Lets learn how.
Headline tag
In HTML, bold copy is created by using the headline tag. There are six levels of headlines, ranging
from <h1></h1> to <h6></h6>. Here is an example of the code for all the headline sizes:
Syntax:- <Hn [ALIGN={LEFT | RIGHT | CENTER}]>

P.MallaReddy
Page 6
-------------- </Hn>
Example:
<h1>Level 1 Headline</h1>
Paragraphs & Line Breaks

To add space between paragraphs you use the paragraph tag: <p></p> This is a container tag and
must have a beginning and an ending.
To add a single line of space, you use break tag: <br> This is an empty tag and stands alone. You can
use the <br> tag to insert one or more blank lines.
Horizontal Rule
To create a horizontal line on your page you use the empty tag, The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.
<hr [[size=n] [width=n][align={left|right|center}]] >
Text Formatting Tags
HTML formatting tags use for formatting a text style. It will become necessary to make minor
changes to the formatting of those elements.
Tag
Example
Results
<b>
<b>Bold Text</b>
An example of Bold Text
<big>
<big>Big Text</big>
An example of Big Text
<center>
<center>Center Text</center>
An example of
Center Text
<em>
<em>Emphasized Text</em>
An example of Emphasized Text
<i>
<i>Italic Text</i>
An example of Italic Text
<small>
<small>Small Text</small>
An example of Small Text
<strong>
<strong>Strong Text</strong>
An example of Strong Text
<sub>
<sub>Subscript Text</sub>
An example of Subscript Text
<sup>
<sup>Superscript Text</sup>
An example of Superscript Text
<del>
<s>
<strike>
<del>DeleteText</del>
<s>StrikeText</s>
<strike>Strike Text</strike>
An example of
An example of Strike Text
An example of Strike Text
<u>
<u>Underline Text</u>
An example of Underline Text
<tt>
<tt>Teletype Text</tt>
An example of Teletype Text
P.MallaReddy
Page 7
<blockquote> <blockquote>Long
Quotation</blockquote>
<q>Short Quotation Text</q>
An example of Long Quotation Text

An example of Short Quotation Text
Text Fonts: Display a piece of text, each stored character value must be mapped to a visual
representation of the characters shape such a representation is called a glyph. Glyphs are arranged
into collection called fons.HTML provides <FONT> tag for facilitating various types of fonts. The
fonts can be varied as per the customized needs for given values using the <FONT>..</FONT>tag
pair.
Syntax: <FONT [SIZE=+n/-n] [COLOR=color] [FACE=font name]>
</FONT>
The font size is taken basis of Base font size, which is default size. Accordingly n or +n the size
decrease respectively. Size ranges from -7 to +7. The font face is used to change the font of the text.
Font face is nothing but font name for text like Arial, Times New Roman, Courier.
Example: <FONT SIZE=+4 COLOR=red FACE=courier> Well come to Sits </FONT>
A HTML marquee tag is a scrolling piece of text displayed either horizontally across or vertically
down your web site page depending on the settings. This is created by using HTML tag
<marquees>.
A simple syntax to use marquee is as follows:
<marquee attribute name="attribute value"....more attributes>
One or more lines or text message or image
</marquee>
Attributes:
A HTML marquee can have following attributes:
Width: how wide the marquee is. This will have a value like 10 or 20%etc.
Height: how tall the marquee is. This will have a value like 10 or 20% etc.
Direction: which direction the marquee should scroll. This will have value either up,
down, left or right.
Behavior: what type of scrolling. This will have value scroll, slid and alternate.
Scroll delay: how long to delay between each jump. This will have a value like 10 etc.
Scroll amount: how far to jump. This will have a value like 10 etc.
Loop: how many times to loop. The default value is INFINITE, which means that the
marquee loops endlessly.
Bgcolor: background color. This will have any color name or color hex value.
HTML Comment
HTML Comment
P.MallaReddy
Page 8
Html comment Tag use to insert a comment into a source code. It's good habit to write a comment
into a source code to improve user readability and understands.
You can also write a specify information inside comments. In this case they will not be display on
web document and not visible for the user.
A good habit is write comment text inside html pages, scripts and style elements.
Comment Tag does not support any Standard Attributes.
HTML Comment Example-Code:
An HTML comment begins with "".
Hyperlinks (Links) in HTML
The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another document. When you move the cursor over a link in a
Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the
href attribute, which indicates the links destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<A HREF=address/url NAME=id TARGET=target window>Link text </A>
HREF which indicates the destination document. Other parameter Name and TARGET can useful for
identification for anchor tag and the location of a frame where target page is to be displayed
respectively, Name and Target parameter are optional
IMAGES
Images are very important to beautify as well as to depicts many concepts on your web page.
It is true that one single image is worth than thousands of words. So as a Web Developer you should
have clear understanding on how to use images in your web pages.
You will insert any image in your web page by using <img> tag. Following is the simple syntax to use
this tag.
Common Syntax:
<IMG SRC=filename | path [BORDER=n] [ALT=textual messages] [HEIGHT=n]
[WIDTH=n]>
Example: <IMG SRC=sunset.jpg border=2 alt =this is sunset image width=300
height=300>
Image Attributes
P.MallaReddy
Page 9
Width: sets width of the image. This will have a value like 10 or 20%etc.
Height: sets height of the image. This will have a value like 10 or 20% etc.
Border: sets a border around the image. This will have a value like 1 or 2 etc.
Src: specifies URL of the image file.
Alt: this is an alternate text which will be displayed if image is missing.
Align: this sets horizontal alignment of the image and takes value either left, right or center.
Image as Hyperlinks:
Before <img> tag if specify anchor tag(<A>)then image converted as hyperlink
Example: <A><img src=sunset.jpgheight=300 width=300></A>
HTML Lists
List is collection of items and they may be ordered or unordered. In ms-word you may be familiar
item bullets, which is called as unordered lists. Ordered lists are nothing but sequenced list which are
number or alphabets. Other lists included as directory lists, definition lists that are very useful to make
the web page attractive
UNORDERED LISTS
Unordered list are also called unnumbered lists. The Unordered List elements used to present a list of
items, white space and /or marked by bullets. Using <UL> tag dose Creation of unordered lists in
HTML. Which is paired tag, so it requires in ending tag that is </UL>. The list of items are included
in between <UL></UL>. The TYPE attribute can also be added to the <UL> tag that indicates the
displayed bullet along with list of item is square, disc or circle. By default it is disc.
Syntax:
<UL [TYPE= {square, disk or circle}]>
<LI> item name 1
<LI> item name 2
--------------------<LI>item name n
</UL>
ORDERED LIST
Ordered lists are also called sequenced or numbered lists. In the ordered list the lists of items have an
order that is signified by number, hence it sometimes called as numbered lists. Elements used to
present a list of items, which are typically separated by white space and/or marked by numbers or
alphabets. An ordered list should start with the <OL> element, which is immediately followed by a
<LI>element which is same as <LI> in unordered list. End of ordered list is specified with ending tag
</OL>
P.MallaReddy
Page 10
Different Ordered list types like Roman numeral list, alphabet list etc can be specified with TYPE tag.
Another optional parameter with <OL>tag is START attribute, which indicates the starting number or
alphabet of ordered list.
Syntax:
<OL [TYPE={1 or I or A or a or i }] [ START = n ]>
<LI> item name 1
<LI> item name 2
------------------------<LI> item name n
</OL>
OTHER LISTS
There are several other lists in HTML, some of them are Definition List and Directory List.
Definition List <DL> </DL>
A Definition list is a list of Definition terms <DT> and corresponding Definition Description <DD>
on a new line. To create a definition it must start with <DL> and immediately followed by the first
definition term <DT>.
Example:
<DL>
<DD> Internet
<DL> Networking is connection of two or more computers together
<DD>UML
<DL>Unified Modeling Language
</DL>
Directory List <DIR> .</DIR>
A directory List element is used to present a list of items containing up 20 characters each. Items in a
Directory List may be arranged in columns, typically 24 characters wide. A Directory List must being
with <DIR>elements, which is immediately followed by a <LI> element. Moreover, this tag is a
deprecated tag, so it is not preferable to use Hence, use <UL> instead of <DIR>.
Example:
<DIR>
<LI>List item1
<LI>list item2
----------------------P.MallaReddy
Page 11
<LI>List item n
</DIR>
HTML Tables
Tables are one of the important concepts while displaying information on web pages. This is another
way of formatting text. Tables are just like spreadsheets and they are made up of rows and columns.
You will create a table in HTML/XHTML by using <table> tag. Inside <table> element the table is
written out row by row. A row is contained inside a <tr> tag. Which stands for table row and each cell
is then written inside the row element using a <td> tag. Which stands for table data
Any table is essentially made up of head, rows, columns and cells. There are several tags that are
needed for designing HTML table, they are
<TABLE>
<THEAD>
<TH>
<TBODY>
<TR>
<TD>
<TFOOT>
<CAPTION>
Indicates start of a table

Starts the header part of table, and it should followed by <TH>
Used to given table heading (column headers)
Starts the main area of table, says actual data is started
Indicates starting of a table row
Actual table data for a cell, for each cell we should give <TD>
Used to define foot information of the table.
To insert caption in to table, inserts caption data directly above the table, caption
text is used to help text-based browsers interpret the table date.

Table Attributes
border
it will put border across all the cells.
Bgcolor
You can set background color for whole table or just for one cell.
Background
You can set background image for whole table or just for one cell.
Colspan
if you want to merge two or more columns into a single column
rowspan
If you want to merge two or more rows.
Cellpadding
It represents the distance between cell borders and the content within.
cellspacing
You will use to adjust the white space in your table cell.
width and height You can set a table width and height .You can specify table width or height in
Align
terms of integer value or in terms of percentage of available screen area

Alignment of text in the table
General Syntax:
Example:
<TABLE>
<table>
<TR>
<tr>
<TH> </TH>
<th>Rno</th> <th>Name</th>
</TR>
</tr>
<TR>
<tr>
<TD></TD> </TR> </TABLE>
<td>101</td> <td>MallaReddy</td> </tr> </table>
HTML Forms
P.MallaReddy
Page 12
HTML Forms is most important future in HTML. HTML Forms use to get a users information. its
also say user is interactive with it. HTML Forms is a information tools to get information from the
web surfer, such as: name, email address, address, phone number etc.
A form will take input from the site visitor and then will post your back-end application such as CGI,
ASP Script or PHP script etc. Then your back-end application will do required processing on that data
in whatever way you like.
The <FORM> tag is used to create H TML forms, it is the first elements for specifying the form. End
of the form is indicated by
Syntax
<form name =id action="back-end script" method="posting method">
form elements like input, textarea etc.
</form>
The <FORM> tag is used to create HTML forms; it is the first elements for specifying the form. End
of the form is indicated by </FORM> tad. <FORM> tag has several attributes and important among
them is METHOD and ACTION. ACTION parameter indicates path to this script; when the user
submits the form where it should go is given to ACTION parameter.MOTHED parameter specifies
how the data entered in form is send to the destination, which may be web server. There are two
methods of sending of information; one is POST, which send the information along with the body of
Html, other one GET, sends the data along with web page address that is appended to the URL. There
are several differences between POST method and GET method.
Differences between Post Method and Get Method
1.
2.
3.
4.
5.
POST METHEOD
Information sent along with body
Data is visible while sending
Provides security
Can sent any number of characters
Special characters are also possible
1.
2.
3.
4.
5.
GET METHEOD
Information sent along with URL.
Data visible in site address.
No security, because password also sent like.
Only limited number of characters.
Special character are not possible to sent,
only for standard character
There are different types of form controls that you can use to collect data from a visitor to your site.
Text input controls
Buttons
Checkboxes and radio buttons
Select boxes
File select boxes
Hidden controls
Submit and reset button
P.MallaReddy
Page 13
Text Input Controls:

There are actually three types of text input used on forms:
Single-line text input controls: Used for items that require only one line of user input,
such as search boxes or names. They are created using the <input> element.
Password input controls: Single-line text input that mask the characters a user enters.
Multi-line text input controls: Used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created with the <textarea>
element.
Single-line text input controls(textbox):

Single-line text input controls are created using an <input> element whose type attributes has
a value of text.
Syntax: <INPUT TYPE=TEXT NAME=ID VALUE=INITIAL VILUE SIZE=N>
Following is the list of attributes for <input> tag.
type: Indicates the type of input control you want to create.
name: Used to give the name part of the name/value pair that is sent to the server,
representing each form control and the value the user entered.
value: Provides an initial value for the text input control that the user will see when the
form loads.
size: Allows you to specify the width of the text-input control in terms of characters.
maxlength: Allows you to specify the maximum number of characters a user can enter
into the text box.
Password input controls:

This is also a form of single-line text input controls are created using an <input> element
whose type attribute has a value of password
Syntax: <INPUT TYPE=PASSWORD NAME=ID >
Multiple-Line Text Input Controls:
If you want to allow a visitor to your site to enter more than one line of text, you should create
a multiple-line text input control using the <textarea> element.
Syntax: <textarea rows="N" cols="N" name="description">
Enter description here...
</textarea>
name: The name of the control. This is used in the name/value pair that is sent to the
server.
rows: Indicates the number of rows of text area box.
cols: Indicates the number of columns of text area box.
Buttons
P.MallaReddy
Page 14
HTML to create clickable buttons. You can create clickable button using <input> tag. When
you use the <input> element to create a button, the type of button you create is specified using the
type attribute. The type attribute can take the following values:
submit: This creates a button that automatically submits a form.
reset: This creates a button that automatically resets form controls to their initial values.
button: This creates a button that is used to trigger a client-side script when the user clicks
that button
Syntax:
<INPUT TYPE=BUTTON NAME=ID VALUE=CAPTION>

<INPUT TYPE=SUBMIT NAME=ID VALUE=CAPTION>
<INPUT TYPE=RESET NAME=ID VALUE=CAPTION>
Checkboxes Control:
Checkboxes are used when more than one option is required to be selected. They are created
using <input> tag as shown below.
Syntax: <INPUT TYPE =CHECKBOX NAME=ID VLAUE=CAPTION
CHECKED>
Following is the list of important checkbox attributes:
type: Indicates that you want to create a checkbox.
name: Name of the control.
value: The value that will be used if the checkbox is selected. More than one checkbox
should share the same name only if you want to allow users to select several items from the
same list.
checked: Indicates that when the page loads, the checkbox should be selected.
Raido box Control:

Radio Buttons are used when only one option is required to be selected. They are created using
<input> tag as shown below:
Syntax:
<INPUT
TYPE=RAIDO
NAME=ID
VALUE=CAPTION
CHECKED>
Following is the list of important radiobox attributes:
type: Indicates that you want to create a radiobox.
name: Name of the control.
value: Used to indicate the value that will be sent to the server if this option is selected.
checked: Indicates that this option should be selected by default when the page loads.
Select box Control:

Drop Down Box is used when we have many options available to be selected but only one or two
will be selected.
Syntax:
P.MallaReddy
Page 15
<SELECT NAME =ID SIZE=N MULTIPLE >
<OPTION VALUE=ID > . </OPTION>

<OPTION VLAUE=ID SELECTED > . </OPTION>
</SELECT>
Following is the list of important attributes of <select>:
name: This is the name for the control.
size: This can be used to present a scrolling list box.
multiple: If set to "multiple" then allows a user to select multiple items from the menu.
Following is the list of important attributes of <option>:
value: The value that is sent to the server if this option is selected.
selected: Specifies that this option should be the initially selected value when the page loads.
Frames
Frames divide a browser window into several pieces or panes, each pane containing a separate
XHTML/HTML document. One of the key advantages that frames offer is that you can then load and
reload single panes without having to reload the entire contents of the browser window. A collection
of frames in the browser window is known as a frameset. The window is divided up into frames in a
similar pattern to the way tables are organized: into rows and columns. The simplest of framesets
might just divide the screen into two rows, while a complex frameset could use several rows and
columns
There are few drawbacks also you should be aware of with frames are as follows:
Some browsers do not print well from framesets.
Some smaller devices cannot cope with frames, often because their screen is not big enough
to be divided up.
Some time your page will be displayed differently on different computers due to different
screen resolution.
The browser's back button might not work as the user hopes.
There are still few browsers who do not support farme technology.
To create a frameset document, first you need the <frameset> element, which is used instead of the
<body> element. The frameset defines the rows and columns your page is divided into, which in turn
specify where each individual frame will go. Each frame is then represented by a <frame> element.
Creating Frames - The <frameset> Element:
The <frameset> tag replaces the <body> element in frameset documents.
The <frameset> tag defines how to divide the window into frames.
Each frameset defines a set of rows or columns. If you define frames by using rows then
horizontal frames are created. If you define frames by using columns then vertical farmes are
created.
P.MallaReddy
Page 16
The values of the rows/columns indicate the amount of screen area each row/column will
occupy.
Each farme is indicated by <frame> tag and it defines what HTML document to put into the
frame.
Syntax:
<FRAMESET ROWS/COLS =%, %, %, *>
<FRAME SRC=URL NAME=ID>
<FRAME SRC=URL NAME=ID>
</FRAMESET>
<Frameset> Attributes:
cols: specifies how many columns are contained in the frameset and the size of each column.
You can specify the absolute values in pixels. For example to create three vertical frames,
usecols="100, 500,100".
A percentage of the browser window. For example to create three vertical frames,
use cols="10%, 80%,10%".
Using a wildcard symbol. For example to create three vertical frames, use cols="10%,
*,10%". In this case wildcard takes remainder of the window.
As relative widths of the browser window. For example to create three vertical frames,
use cols="3*,2*,1*". This is an alternative to percentages. You can use relative widths of the
browser window. Here the window is divided into sixths: the first column takes up half of the
window, the second takes one third, and the third takes one sixth.
rows: attribute works just like the cols attribute and can take the same values, but it is used to
specify the rows in the frameset. For example to create two horizontal frames,
use rows="10%, 90%". You can specify the height of each row in the same way as explained
above for columns.
border: attribute specifies the width of the border of each frame in pixels. For example
border="5". A value of zero specifies that no border should be there.
<Frame> Element Attributes
src: indicates the file that should be used in the frame. Its value can be any URL. For
example, src="/html/top_frame.htm" will load an HTML file avaible in html directory.
name: attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create links in
one frame that load pages into a second frame, in which case the second frame needs a name
to identify itself as the target of the link.
Frame's name and target attributes:
P.MallaReddy
Page 17
Value
Description
_self
Loads the page into the current frame.
_blank
Loads a page into a new browser window.opening a new window.
_parent Loads the page into the parent window, which in the case of a single frameset is the main
browser window.
_top
Loads the page into the browser window, replacing any current frame
Cascading Style Sheets (CSS)
P.MallaReddy
Page 18
What does CSS stand for?

CSS stands for Cascading Style Sheets.
What is CSS?
CSS is a language that you can use to define styles against any HTML element. These styles are set
using CSS properties. For example, you can set font properties (size, colors, style etc), background
images, border styles, and much more
What is the difference between CSS and HTML?
HTML is used to structure content. CSS is used for formatting structured content.
Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to
you soon.
Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the
World Wide Web, the language HTML was only used to add structure to text. An author could mark
his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as <h1>and <p>.
As the Web gained popularity, designers started looking for possibilities to add layout to online
documents. To meet this demand, the browser producers (at that time Netscape and Microsoft)
invented new HTML tags such as for example <font> which differed from the original HTML tags by
defining layout - and not structure.
This also led to a situation where original structure tags such as <table> were increasingly being
misused to layout pages instead of adding structure to text. Many new layout tags such as <blink>
were only supported by one type of browser. "You need browser X to view this page" became a
common disclaimer on web sites.
CSS was invented to remedy this situation by providing web designers with sophisticated layout
opportunities supported by all browsers. At the same time, separation of the presentation style of
documents from the content of documents makes site maintenance a lot easier.
CSS Advantages
HTML has its limitations when it comes to layout. Sure, you have 6 different levels of headings and 6
different sizes of fonts. You also have tables, and you have control over alignment etc. These are good
enough to get a reasonable looking document that shows the true structure of information. However,
it's a far cry from some of the excellent layout & design that we see in magazines and printed
brochures etc.
With CSS, you have much better control over the layout of your web pages. You can specify exactly
how big a font will be, exactly where an element will be on a page, what the page will look like when
printed, and much more.
Advantages of CSS
CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, color, style etc
P.MallaReddy
Page 19
every time it occurs on a page. This means we find ourselves typing (or copying & pasting)
the same thing over and over again. With CSS, you only have to specify these details once for
any element. CSS will automatically apply the specified styles whenever that element occurs.
Pages load faster
Less code means faster download times.
Easy maintenance
To change the style of an element, you only have to make an edit in one place.
Superior styles to HTML

CSS has a much wider array of attributes than HTML.
Disadvantages of CSS
Browser compatibility
Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet
features are supported and some aren't. To confuse things more, some browser manufacturers decide
to come up with their own proprietary tags.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation (the look
and formatting) of a document written in a markup language. Css is a new feature being added
to HTML that gives both Web site developers and users more control over how pages are displayed.
With CSS, designers and users can create style sheets that define how different elements, such as
headers and links, appear. These style sheets can then be applied to any Web page.
The term cascading derives from the fact that multiple style sheets can be applied to the same Web
page. CSS was developed by the W3C.
Types of CSS Styles
There are three types of CSS styles:
Inline styles
Inline styles are styles that are written directly in the tag on the document. Inline styles affect
only the tag they are applied to.
CSS Code:
<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>
When using CSS inline you must be sure not to use quotations within your inline CSS. If
you use quotations the browser will interpret this as the end of your style value. Instead,
copy our form as we have displayed below.
Embedded styles/internal styles
embedded styles are styles that are embedded in the head of the document. Embedded styles
affect only the tags on the page they are embedded in.
CSS Code:
<html>
P.MallaReddy
Page 20
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
General CSS Format:
"HTML tag" { "CSS Property" : "Value" ; }
Place your CSS Code between <style> and </style>
Be sure you know the correct format(syntax) of CSS code.
CSS will literally save you hours of time... after you spend a few getting the hang of it.
External styles
External styles are styles that are written in a separate document and then attached to
various Web documents. External style sheets can affect any document they are attached to.
<link rel="stylesheet" type="text/css" href="styles.css" />
Why use external css?
It keeps your website design and content separate.
It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the
same CSS code on every web page you have, simply have many pages refer to a single CSS
file with the "link" tag.
You can make drastic changes to your web pages with just a few changes in a single CSS file.
CSS Class
In CSS, classes allow you to apply a style to a given class of an element. To do this, you link
the element to the style by declaring a style for the class, then assigning that class to the element.
CSS Class Syntax
You declare a CSS class by using a dot (.) followed by the class name. You make up the class
name yourself. After the class name you simply enter the properties/values that you want to assign to
your class.
.class-name { property:value; }
Example
P.MallaReddy
Page 21
CSS Code:
p.first{ color: blue; }
p.second{ color: red; }
HTML Code:
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
...
The id Selector
The id selector is used to specify a style for a single, unique element.The id selector uses the
id attribute of the HTML element, and is defined with a "#".
CSS ID Syntax
The syntax for declaring a CSS ID is the same as for classes - except that instead of using a
dot, you use a hash (#).
#id-name { property:value; }
Example
CSS Code
p#exampleID1 { background-color: white; }
p#exampleID2 { text-transform: uppercase; }
Html Code
<p id="ExampleID1">this paragraph has an ID name of exampleID1" and has a white CSS defined
background</p>
<p id="ExampleID2">This paragraph has an ID name of exampleID2" and has had its text
transformed to uppercase letters. </p>
CSS Properties
CSS - Font Properties
The CSS font properties control all aspects of your text graphical representation. From the thickness
of your font (font-weight) to font type (font-family) of your choice. Here are all the font properties at
your disposal:
font
font-family
font-size
font-style
font-weight
font-variant
P.MallaReddy
Page 22
CSS - Text Properties

The CSS text properties control the spacing, alignment, decoration, and other miscellaneous aspects
of the text. Here is a list of all the CSS text properties. Remember to check out our CSS Properties
Reference for a description and example of all of the properties mentioned in this lesson.
letter-spacing
word-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
CSS - Box Properties

The CSS box properties are used to define the spacing in and around HTML elements, their borders,
and other positioning aspects. Border, Margin, and Padding all have four properties each: top, right,
bottom, and left.
Margin
Padding
Border
Border-width
Border-color
Border-style
Width
Height
Float
Clear
CSS - Color Properties

The CSS color property defines what color the text inside the specified HTML element will have. Use
classes or identifiers to have multiple colors for one type of HTML element.
Color
CSS Background Properties
The CSS background properties control things like if the background is a single color or maybe an
image. If it's an image you can set the position of the image and tell it whether or not you want the
image to repeat left-to-right and/or top-to-bottom.
Background
Background Color
Background Image
Background Repeat
Background Attachment
Background Position
P.MallaReddy
Page 23
UNIT -2(JAVA SCRIPTING)

JAVA SCRIPTING
Introduction to Scripting
Scripting language is
A high-level programming language that is interpreted by another program
at runtime rather than compiled by the computer's processor as other programming languages (such
as C and C++) are. Scripting languages, which can be embedded within HTML, commonly are used
to add functionality to a Web page, such as different menu styles or graphic displays or to
serve dynamic advertisements. These types of languages are client-side scripting languages, affecting
the data that the end user sees in a browser window. Other scripting languages are server-side
scripting languages that manipulate the data, usually in a database, on the server.
Scripting languages came about largely because of the development of the Internet as a
communications tool. JavaScript, ASP, JSP, PHP, Perl, Tcl and Python are examples of scripting
languages.
Scripting language are two kinds one is client-side scripting other one is server-side scripting general
client side scripting is used for verifying simple validations at client side, VB Scripting, Java Scripting
and JScripting are examples for client side Scripting and ASP,JSP,Servlets etc.are example of server
side scripting
Importance of scripting language or application:
To design computer programming enhance the functionality and appearance of web pages.
Scripting languages are sectionalized programming languages that are inserted on the web
page to control different elements of the page including elements, frames and browser
interface.
They limited power, because they can run only within a web page on a browser compatible
with script languages, such as Internet Explorer
Scripting language modify the documents content dynamically.
Scripting languages are Object based.
Scripting language has event-handling capabilities.
Difference between Server side scripting and Client side scripting |

Server side scripting vs. Client side scripting
Server side scripting is used to create dynamic pages based a number of conditions when the
users browser makes a request to the server.
P.MallaReddy
Page 24
Client side scripting is used when the users browser already has all the code and the page is
altered on the basis of the users input.
The Web Server executes the server side scripting that produces the page to be sent to the
browser.
The Web Browser executes the client side scripting that resides at the users computer.
Server side scripting is used to connect to the databases that reside on the web server.
Client side scripting cannot be used to connect to the databases on the web server.
Server side scripting can access the file system residing at the web server.
Client side scripting cant access the file system that resides at the web server.
The settings that belong to Web server can be accessed using Server side scripting.
The files and settings that are local at the users computer can be accessed using Client side
scripting.
Response from a server-side script is slower as compared to a client-side script because the
scripts are processed on the remote computer.
Response from a client-side script is faster as compared to a server-side script because the
scripts are processed on the local computer.
Examples of Server side scripting languages: PHP, JSP, ASP, ASP.Net, Ruby, Perl n many
more.
Examples of Client side scripting languages: JavaScript, VB script, etc .
<SCRIPT TAG>
Script tag is used to indicate the browser that the text that follows is part of a script. The syntax of
the script tag
<SCRIPT LANGUAGE=Scripting language name>
-------------------<.SCRIPT>
LANGUAGE attribute is specifies the scripting language used in the script.
Client Side scripts can be placed anywhere in the html text. The most common place for
scripts is head section.
Using a script tag in the header section is a good place to define all the subroutines.
Running client side scripts
Client side scripts are run by loading the web page in which they are embedded into a web
browser that supports that scripting language.
Depending on how the script is to be run, the web browser either executes the code
immediately or waits until the user performs some action.
Introduction to JAVASCRIPT
P.MallaReddy
Page 25
JavaScript is Object-based scripting language designed to enhance web pages that are constructed
with html documents. Web pages are two kinds, static web page where there is no specific interaction
with the client other one is dynamic web page, which is having interactions with client and as well as
validations can be added. Simple HTML script is called static page. If you add script to HTML page it
is called dynamic page. JavaScript is developed Netscape Navigator. Microsoft version of JavaScript
is Jscript. The Object-based architecture allows JavaScript to interact with the properties of objects
that it recognizes, internal built-in object such as windows objects, Navigator objects. One of the
misconception about the javascript is, it is developed by Sun Microsystems because it developed Java.
Netscape developed JavaScript.
JavaScript is a lightweight, interpreted programming language with object-oriented capabilities
Advantages of JavaScript:
The merits of using JavaScript are:
Less server interaction: You can validate user input before sending the page off to the server.
This saves server traffic, which means less load on your server.
Immediate feedback to the visitors: They don't have to wait for a page reload to see if they
have forgotten to enter something.
Increased interactivity: You can create interfaces that react when the user hovers over them
with a mouse or activates them via the keyboard.
Richer interfaces: You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.
Limitations with JavaScript:
Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
JavaScript cannot be used for networking applications because there is no such support
available.
JavaScript doesn't have any multithreading or multiprocessor capabilities.
Differences between JavaScript and Java
Java is object oriented programming language where as JavaScript is object-based

programming language.
Java is full-featured programming language but JavaScript is not.
Java source code is first compiled and the client interprets the code. JavaScript code not
compiled, only interpreted.
Inheritance, Polymorphism, Threads are not available in JavaScript.
Java Supports many kinds of data types, JavaScript cant distinguish between data types
P.MallaReddy
Page 26
Java uses a technique referred to as static binding, compiler verifies before source code is
being processes, JavaScript uses dynamic binging, which allows object references to be
checked when the interpreted is actually running the program.
Similarities between Java and JavaScript:
Both java and JavaScript having same kind of operators
JavaScript uses similar control structures of Java.
Now a days both are used for on Internet.
Labeled break and Labeled Continue available in both.
Up to concept of objects and method both are similar.
JavaScript Syntax
A simple JavaScript program:
<html>
<head>
<Title> Hello World </Title>
</head>
<body>
<script language=JavaScript>
document. write (Hello, World wide web);
</script>
</body>
</html>
Basic Objects in JavaScript
JavaScript is Object based programming language. Almost all the programs of JavaScript uses
Objects. Object is a real world entity that means employee, student, fruit etc. An Object is having
state, identity and behavior. For example if you have car as Object the identification of it is the
company name, vehicle number, color etc., behavior means what action it can perform like walking
on roads, finally state of object is what is present condition of car, whether it is standing, moving,
working, not working etc.
In JavaScript we are two Basic objects one is document and other one is window
DOCUMENT OBJECT:
To display some information on the screen, there are two ways. One is by using document.write( )
method which displayed directly on the browser, other one is by using window.alert( ) method that
displays a message dialog box.
Syntax:- document.write(any message); or docment.writeln( any message);
PROGRAM 1
Write a program that display textual messages using write( ) and writeln( )
<html>
P.MallaReddy
Page 27
<Head>
<title>Example for JavaScript Write Method </title>
<script language=javascript>
document.write(explain about JavaScript );
document.writeln(JavaScript is Object base language );
document.write(<h1> JavaScript is include </h1> );
document.write(Alert messages );
document.write(Form validation );
</script>
</head>
</html>
WINDOW OBJECT
The JavaScript windows objects one is alert box, anther one is the prompt(). the alert box is useful for
alerting your users to something important. When a JavaScript alert box is triggered, a small box will
pop up and display the text that you specify in your JavaScript code.
Syntx: window.alert(any measseg);
PROGRAM 2
Write a program to display a dialog box when you load web page.
<html>
<Head>
<Title>Example for JavaScript Write Method </title>
<script language=javascript>
window. alert (Hello World\t--- Java Script );
</script>
</head>
<Body>
<h2> Press F5 function key or refresh to see aging </h2>
</body>
</html>
Confirm Box
A confirm box is often used if you want the user to verify or accept something. When a confirm box
pops up, the user will have to click either "OK" or "Cancel" to proceed. If the user clicks "OK", the
box returns true. If the user clicks "Cancel", the box returns false.
window.confirm("sometext");
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page. When a
prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an
input value. If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box
returns null.
P.MallaReddy
Page 28
Syntax
window.prompt("sometext","defaultvalue");
Example:
<head>
<script type="text/javascript">
<!-var retVal =prompt(Enter Name:,Your name here);
alert(You hava entered: + retVal);
//-- >
</script>
</head>
DATA TYPES
JavaScript supports the following data types
Number this Consists of numbers both integer and flotation-point.
Sting this Consists of text specified within single or quotes.
Null this is used to indicate that a variable is uninitialized.
Boolean this of Boolean values true and false
JavaScript supports Integer and Floating-Point values. Integer are numbers without any decimal
portion, that is they are whole numbers and do not contain fractions. Integers can be negative and the
maximum integer size is dependent on the operating system.
JAVASCRIPT MEMORY CONCEPTS
Variable is a name location that store values into it. To declare a variable in JavaScript var keyword is
used. Even though it not compulsion for declaration of a variable. Every variable has a name, a type
and a value. JavaScript is type less language; it is not having any predefined data type in it as in Java.
Only var keyword declares strings, integers, float types.
var x=35 declares x as string and stores string 35
var y=35 declares y as integer and stores integer value 35.
JAVASCRIPT OPERATORS
What is an operator?
Simple answer can be given using expression 4 + 5 is equal to 9. Here 4 and 5 are called operands
and + is called operator. JavaScript language supports following type of operators.
Arithmetic Operators
Relational Operators
Logical Operators
Assignment Operators
Conditional (or ternary) Operators
Arithmetic Operators:
P.MallaReddy
Page 29
Its take numerical values as their operands and return single numerical value.
Operator
+
*
/
%
++
--
Description
Adds two operands
Subtracts second operand from the first
Multiply both operands
Divide numerator by enumerator
Modulus Operator and remainder of after an integer division
Increment operator, increases integer value by one
Decrement operator, decreases integer value by one
Example
A + B will give 30
A - B will give -10
A * B will give 200
B / A will give 2
B % A will give 0
A++ will give 11
A-- will give 9
Relational Operators
A relation operator compares its operands and returns a logical value based on whether the
comparison is true or not. The operands may be numerical or string values. When used on string, the
comparison is based the lexicographical order.
Assume variable A holds 10 and variable B holds 20 then:
Operator
==
!=
Description
Example
Checks if the values of two operands are equal or not, if yes then
(A == B) is not
condition becomes true.
true.
Checks if the values of two operands are equal or not, if values are not
(A != B) is true.
equal then condition becomes true.

>
<
Checks if the value of left operand is greater than the value of right
(A > B) is not
operand, if yes then condition becomes true.
true.
Checks if the value of left operand is less than the value of right
(A < B) is true.
operand, if yes then condition becomes true.

>=
<=
Checks if the value of left operand is greater than or equal to the value of (A >= B) is not
right operand, if yes then condition becomes true.
true.
Checks if the value of left operand is less than or equal to the value of
(A <= B) is true.
right operand, if yes then condition becomes true.

Logical Operators: JavaScript provides three kinds of logical operators, one logical AND (&&) ,
second one is logical OR ( | | ) and third one is logical Not ( ! ). Logical And is same AND operation
of two Boolean values,
Assume variable A holds 10 and variable B holds 20 then:
Operator
&&
Description
Example
Called Logical AND operator. If both the operands are non zero then then (A && B) is true.
condition becomes true.
P.MallaReddy
Page 30
||
Called Logical OR Operator. If any of the two operands are non zero
(A || B) is true.
then then condition becomes true.

!
Called Logical NOT Operator. Use to reverses the logical state of its
!(A && B) is false.
operand. If a condition is true then Logical NOT operator will make

false.
Assignment Operators: JavaScript provides two kinds of assignment operators. First kind is normal
equal operator. It assign the given variable or constant or expression assigned for given variable.
Ex:
k=5 assigning constant 15 to variable k

K= a + s * 12 given expression is assigned to k
JavaScript allows other kind of assignment operator which is called abbreviated assignment
expression.
Ex:
k + = 3 (k = k + 3)
Operator
=
+=
-=
Description
Example
Simple assignment operator, Assigns values from right
C = A + B will assigne value of
side operands to left side operand
A + B into C
Add AND assignment operator, It adds right operand to
C += A is equivalent to C = C +
the left operand and assign the result to left operand
Subtract AND assignment operator, It subtracts right
C -= A is equivalent to C = C -
operand from the left operand and assign the result to
left operand
*=
Multiply AND assignment operator, It multiplies right
C *= A is equivalent to C = C *
operand with the left operand and assign the result to
left operand
/=
Divide AND assignment operator, It divides left
C /= A is equivalent to C = C /
operand with the right operand and assign the result to
left operand
%=
Modulus AND assignment operator, It takes modulus
C %= A is equivalent to C = C
using two operands and assign the result to left operand
%A
Conditional (or ternary) Operators: JavaScript provide conditional operator ( ? : ) which is used for
comparing two expressions. It takes three arguments, one is condition, second one is truth result and
third one is false result, this first evaluates an expression for a true or false value and then execute one
of the two given statements depending upon the result of the evaluation.
Syntax:
variable = condition ? truth value: false value;
Ex:
s = (a > b)? a : b
P.MallaReddy
Page 31
JavaScript Statements:
In addition to standard statements like changing a variable's value, assigning a new value, or
calling a function, there are groups of statements that are distinct in their purpose. We will provide a
brief overview of each of these categories in this lesson and cover them in greater detail later in the
tutorial. These distinct groups of statements include
Conditional Statements
Loop Statements
Object Manipulation Statements
Comment Statements
Exception Handling Statements
Conditional Statements
Conditional statements are used to control your scripts so that different actions can be taken
depending on the situation. You may want to display a special image on your home page during the
holidays. This condition would depend on what day it was, and if it was a holiday, then a special
holiday image would be displayed to your visitors. Very often when you write code, you want to
perform different actions for different decisions. You can use conditional statements in your code to
do this.
In JavaScript we have the following conditional statements:
if statement - use this statement to execute some code only if a specified condition is true
if...else statement - use this statement to execute some code if the condition is true and
another code if the condition is false
if...else if....else statement - use this statement to select one of many blocks of code to be
executed
switch statement - use this statement to select one of many blocks of code to be executed
If Statement
The if statement is the fundamental control statement that allows JavaScript to make decisions and
execute statements conditionally.
Syntax
if (condition)
{
Statement(s) to be executed if expression is true
}
Example :
If(time>=20)
X=Good Day;
P.MallaReddy
Page 32
if...else statement:
Use the if....else statement to execute some code if a condition is true and another code if the
condition is not true.
Syntax
if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is not true
}
Example:
var age = 15;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}else{
document.write("<b>Does not qualify for driving</b>");
}
if...else if... statement:
The if...else if... statement is the one level advance form of control statement that allows JavaScript to
make correct decision out of several conditions.
Syntax:
if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if neither condition1 nor condition2 is true
}
Examlpe:
var book = "maths";
if( book == "history" ){
P.MallaReddy
Page 33
document.write("<b>History Book</b>");
}else if( book == "maths" ){
document.write("<b>Maths Book</b>");
}else if( book == "economics" ){
document.write("<b>Economics Book</b>");
}else{
document.write("<b>Unknown Book</b>");
Switch Case statement
You can use multiple if...else if statements, to perform a multiway branch. However, this is not always
the best solution, especially when all of the branches depend on the value of a single variable.
Syntax:
The basic syntax of the switch statement is to give an expression to evaluate and several different
statements to execute based on the value of the expression. The interpreter checks each case against
the value of the expression until a match is found. If nothing matches, adefault condition will be used.
switch (expression)
{
case condition 1: statement (s)
Break;
case condition 2: statement (s)
Break;
case condition n: statement (s)
Break;
default: statement(s);
}
This is how it works: First we have a single expression n (most often a variable), that is evaluated
once. The value of the expression is then compared with the values for each case in the structure. If
there is a match, the block of code associated with that case is executed. Use break to prevent the
code from running into the next case automatically.
Example:
var day=new Date().getDay();
switch (day)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
P.MallaReddy
Page 34
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
case 6:
x="Today it's Saturday";

break;
}
Loop Statements
A loop statement checks to see if some condition is true, and if that condition is true, it executes a
chunk of code. After the code is executed, the condition is checked again. If it is true, the process
starts over again; if it is false, the loop stops and the rest of the code continue along.
The while Loop
The most basic loop in JavaScript is the while loop which would be discussed in this tutorial.
Syntax:
while(condition)
{
Code block to be executed
}
Example:
while(x<15)
{
y=y+x;
x++;
}
The purpose of a while loop is to execute a statement or code block repeatedly as long asexpression is
true. Once expression becomes false, the loop will be exited.
The do...while Loop:
The do...while loop is similar to the while loop except that the condition check happens at the end of
the loop. This means that the loop will always be executed at least once, even if the condition is false.
Syntax:
do
{
Code block to be executed
}
while(condition);
Example:
do
{
x=x+1;
i++;
P.MallaReddy
Page 35
}
while(i<15);
The for Loop
The for loop is the most compact form of looping and includes the following three important parts:
The loop initialization where we initialize our counter to a starting value. The initialization
statement is executed before the loop begins.
The test statement which will test if the given condition is true or not. If condition is true then
code given inside the loop will be executed otherwise loop will come out.
The iteration statement where you can increase or decrease your counter.
You can put all the three parts in a single line separated by a semicolon.
Syntax:
for(initialization; test condition; iteration statement) {
Statement(s) to be executed if test condition is true
}
Example:
For(i=0;i<10;i++) {
doument.write(I value is +i);
}
The For/In Loop
The JavaScript for/in statement loops through the properties of an object:
There is one more loop supported by JavaScript. It is called for...in loop. This loop is used to loop
through an object's properties.
Syntax:
for(variable name in object)
{
statement or block to execute
}
In each iteration one property from object is assigned to variablename and this loop continues till all
the properties of the object are exhausted.
Example:
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
P.MallaReddy
Page 36
txt=txt + person[x];
}
The break Statement:
The break statement, which was briefly introduced with the switch statement, is used to exit a loop
early, breaking out of the enclosing curly braces.
Example
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
}
The continue Statement:
The continue statement tells the interpreter to immediately start the next iteration of the loop and skip
remaining code block.
When a continue statement is encountered, program flow will move to the loop check expression
immediately and if condition remain true then it start next iteration otherwise control comes out of the
loop.
Example
for (i=0;i<=10;i++)
{
if (i==3)
continue;
x=x + "The number is " + i + "<br>";
}
Labels break and continue
a label can be used with break and continue to control the flow more precisely.A label is simply an
identifier followed by a colon that is applied to a statement or block of code. We will see two different
examples to understand label with break and continue.
Note: Line breaks are not allowed between the continue or break statement and its label name. Also,
there should not be any other statement in between a label name and associated loop.
Example
document.write("Entering the loop!<br /> ");
outerloop: // This is the label name
for (var i = 0; i < 5; i++)
{
P.MallaReddy
Page 37
document.write("Outerloop: " + i + "<br />");

innerloop:
for (var j = 0; j < 5; j++)
{
if (j > 3 ) break ;
// Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) continue outerloop; // Quit the outer loop
document.write("Innerloop: " + j + " <br />");
}
}
document.write("Exiting the loop!<br /> ");
Comment Statements
Comment statements are used to prevent the browser from executing certain parts of code that you
designate as non-code. Why would you want to do this? There are many reasons. By disallowing the
block of text from being be read, you can then place in comments for yourself, much like HTML
comments. You can also block out segments of your code for whatever reason you may have.
The single line comment is just two slashes (//) and the multiple line comment starts with (/*) and
ends with (*/). We will talk about comments in greater depth in a later lesson.
JavaScript Functions
A function is an assignment that JavaScript can take care of for you. It is a technique used to
isolate a group of instructional code so that other parts of the application can depend on it to provide
them with a reliable result. There are two main categories of functions you will be using in JavaScript:
those that have already been created for you and those you create in your code.
Advantages for functions
1. Software Reusability: you can build independent methods or function or packages that can be
used in other program, so software reusability.
2. Divide - and conquer approach: this less your code to be more manageable, you can verify
independently the function, then you can combine them.
3. Avoid repeating code in a program: When you repeating certain code several times then no
need to write again and again just you can combine the repeated instruction in to a function
and you can call that function where ever the repeated code is required.
Functions are two kinds, one is user-defined functions or programmer functions and other one is
library function
Library function:In many programming languages there are library functions, which are called as
built-in function. These functions are supplied along with language by the vendors. JavaScript also
P.MallaReddy
Page 38
have those kind of function. In JavaScript we have object-based method and as well as library
functions which are not required any object reference. These are called as JavaScript global functions.
User-Defined Function: javascript allows user to define their function with the help of these function
programmers can divide a large program into small function.
Function in JavaScript
To create a function, type the function keyword followed by a name for the function, followed by
an opening, then a closing, parentheses, followed by an opening curly bracket { and ending with a
closing curly bracket }. Here is the syntax for creating a function:
function functionname(parameter-list)
{
Statement
}
The function keyword is required. It lets the browser know that you are creating a function.
The name of the function:
Must start with a letter or an underscore
Can contain letters, digits, and underscores in any combination
Cannot contain space
Cannot contain special characters
Calling a Function:
To invoke a function somewhere later in the script, you would simple need to write the name of that
function.
Function name();
Function Parameters:
Till now we have seen function without a parameters. But there is a facility to pass different
parameters while calling a function. These passed parameters can be captured inside the function and
any manipulation can be done over those parameters.
Note: We are using + operator to concatenate string and number all together. JavaScript does not mind
in adding numbers into strings.
The return Statement:
A JavaScript function can have an optional return statement. This is required if you want to return a
value from a function. This statement should be the last statement in a function.
P.MallaReddy
Page 39
What is an Array?
An array is a special variable, which can hold more than one value at a time. If you have a list of
items (a list of car names, for example), storing the cars in single variables could look like
this:
var car1="Saab";
var car2="Volvo";
var car3="BMW";
However, what if you want to loop through the cars and find a specific one? And what if you had not
3 cars, but 300? The solution is an array!. An array can hold many values under a single name, and
you can access the values by referring to an index number.
Create Allocating and Initializing an Array
JavaScript provides facilities to declare and allocating memory for array by using new operator.
Operator new is known as dynamic memory allocating operator.
var numbers =new Array(10);
this is used for declare and allocating memory locations. Only for declaration
var numbers;
To allocate memory then
Numbers=new Array (10);
Statement can be used.
At a time declaration, memory allocation and initialization is also done.
var numbers=new Array[12,23,34,45,56,67,78,89,90];
Array are three type
1)Single dimensional Array.
2)Two-dimensional or Double Subscripted array.
3)Multiple Subscripted Array.
Single dimensional Array: Only one subscripted array
Example var numbers =new Array(15); or
Two-dimensional Array: If we have two subscripts it is called as two dimensional array
Example var numbers =new Array [3][3]
It more than one subscripts is given for arrays is called as multiple
Objects in Java Script
Object is an entity, whish having state, behavior and identity. State of an object represents what is its
current state; behavior indicates what actions can be performed with that object, and identity givens
unique identification for object.
P.MallaReddy
Page 40
JavaScript has several built-in or native objects. These objects are accessible anywhere in your
program and will work the same way in any browser running in any operating system.
There are several objects in JavaScript programming language.
Name of Object
Purpose of the Object
Document
To get complete control on document along with display content.
Window
To get dialog control and provision for accepting data from user.
Math
Used for mathematical functions and standard constants in mathematics.
String
String manipulation can be done and also include to generate HTML markup
Date
Array
methods.
For date manipulation, mainly to get current date and time.
The Array object let's you store multiple values in a single variable.
Number
To get number constants.
Boolean
Wrapper class for Boolean type.
Global
Global object that stores some predefined global functions.
Math Object:
The math object provides you properties and methods for mathematical constants and functions. Math
is not a constructor. All properties and methods of Math are static and can be called by using Math as
an object without creating it.
Math Object Properties
Property
E
Description
Returns Euler's number (approx. 2.718)
LN2
Returns the natural logarithm of 2 (approx. 0.693)
LN10
Returns the natural logarithm of 10 (approx. 2.302)
LOG2E
Returns the base-2 logarithm of E (approx. 1.442)
LOG10E
Returns the base-10 logarithm of E (approx. 0.434)
PI
Returns PI (approx. 3.14159)
SQRT1_2
Returns the square root of 1/2 (approx. 0.707)
SQRT2
Returns the square root of 2 (approx. 1.414)
Example:
document.write("Euler's number: " + Math.E);
document.write("SQRT2: " + Math.SQRT2);
</script>
P.MallaReddy
Page 41
Math Object Methods

Method
Description
abs(x)
Returns the absolute value of x
acos(x)
Returns the arccosine of x, in radians
asin(x)
Returns the arcsine of x, in radians
atan(x)
Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians
atan2(y,x)
Returns the arctangent of the quotient of its arguments
ceil(x)
Returns x, rounded upwards to the nearest integer
cos(x)
Returns the cosine of x (x is in radians)
exp(x)
Returns the value of Ex
floor(x)
Returns x, rounded downwards to the nearest integer
log(x)
Returns the natural logarithm (base E) of x
max(x,y,z,...,n)
Returns the number with the highest value
min(x,y,z,...,n)
Returns the number with the lowest value
pow(x,y)
Returns the value of x to the power of y
random()
Returns a random number between 0 and 1
round(x)
Rounds x to the nearest integer
sin(x)
Returns the sine of x (x is in radians)
sqrt(x)
Returns the square root of x
tan(x)
Returns the tangent of an angle
Example:
document.write(Math.abs(7.25) + "<br />");
document.write(Math.abs(-7.25) + "<br />");
document.write(Math.abs(null) + "<br />");
document.write(Math.abs("Hello") + "<br />");
document.write(Math.abs(7.25-10));
document.write(Math.acos(0.64) + "<br />");
document.write(Math.acos(0) + "<br />");
document.write(Math.acos(-1) + "<br />");
document.write(Math.acos(1) + "<br />");
document.write(Math.acos(2));
</script>
String Objects
P.MallaReddy
Page 42
The String object of JavaScript allows you to perform manipulations on a stored piece of text, such as
extracting a substring, searching for the occurrence of a certain character within it etc
String Object Properties
length
Returns the length of a string
String Object Methods

Method
Description
charAt()
Returns the character at the specified index
charCodeAt()
Returns the Unicode of the character at the specified index
concat()
Joins two or more strings, and returns a copy of the joined strings
fromCharCode()
Converts Unicode values to characters
indexOf()
Returns the position of the first found occurrence of a specified value in a string
lastIndexOf()
Returns the position of the last found occurrence of a specified value in a string
match()
Searches for a match between a regular expression and a string, and returns the
matches
replace()
Searches for a match between a substring (or regular expression) and a string, and
replaces the matched substring with a new substring
search()
Searches for a match between a regular expression and a string, and returns the
position of the match
slice()
Extracts a part of a string and returns a new string
split()
Splits a string into an array of substrings
substr()
Extracts the characters from a string, beginning at a specified start position, and
through the specified number of character
substring()
Extracts the characters from a string, between two specified indices
toLowerCase()
Converts a string to lowercase letters
toUpperCase()
Converts a string to uppercase letters
valueOf()
Returns the primitive value of a String object
Example:
P.MallaReddy
Page 43
var str = "Hello world!";
document.write("First character: " + str.charAt(0) + "<br />");
document.write("Last character: " + str.charAt(str.length-1));
document.write("First character: " + str.charCodeAt(0) + "<br />");
document.write("Last character: " + str.charCodeAt(str.length-1));
var str="Hello world!";
document.write(str.lastIndexOf("d") + "<br />");
document.write(str.lastIndexOf("WORLD") + "<br />");
document.write(str.lastIndexOf("world"));
var str="The rain in SPAIN stays mainly in the plain";
var patt1=/ain/gi;
document.write(str.match(patt1));
var str="Visit Microsoft!";
document.write(str.replace("Microsoft", "Google"))
var str="Visit Google!";
document.write(str.search("Google"));
var str="Hello happy world!";
// extract all characters, start at position 0:
document.write(str.slice(0)+"<br />");
// extract all characters, start at position 6:
document.write(str.slice(6)+"<br />");
// extract from the end of the string, and to position -6:
document.write(str.slice(-6)+"<br />");
// extract only the first character:
document.write(str.slice(0,1)+"<br />");
// extract the characters from position 6 to position 11:
document.write(str.slice(6,11)+"<br />");
var str="Hello world!";
document.write(str.substring(3)+"<br />");
document.write(str.substring(3,7));
</script>
String HTML Wrapper Methods
The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.
Method
Description
anchor()
Creates an anchor
big()
Displays a string using a big font
blink()
Displays a blinking string
bold()
Displays a string in bold
fixed()
Displays a string using a fixed-pitch font
fontcolor()
Displays a string using a specified color
fontsize()
Displays a string using a specified size
italics()
Displays a string in italic
link()
Displays a string as a hyperlink
P.MallaReddy
Page 44
small()
Displays a string using a small font
strike()
Displays a string with a strikethrough
sub()
Displays a string as subscript text
sup()
Displays a string as superscript text
Example:
var txt = "Chapter 10";
txt.anchor("chap10");
alert(txt.anchor("myanchor"));
document.write(str.big());
document.write(str.bold());
document.write(str.fontcolor("green"));
document.write(str.link("http://www.google.com"));
</script>
Date Objects
The Date object is a datatype built into the JavaScript language. Date objects are created with the new
Date( ) and times.
Method
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getYear()
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setYear()
Example:
P.MallaReddy
Page 45
Description
Returns the day of the month (from 1-31)
Returns the day of the week (from 0-6)
Returns the year (four digits)
Returns the hour (from 0-23)
Returns the milliseconds (from 0-999)
Returns the minutes (from 0-59)
Returns the month (from 0-11)
Returns the seconds (from 0-59)
Returns the number of milliseconds since midnight Jan 1, 1970
Deprecated. Use the getFullYear() method instead
Sets the day of the month (from 1-31)
Sets the year (four digits)
Sets the hour (from 0-23)
Sets the milliseconds (from 0-999)
Set the minutes (from 0-59)
Sets the month (from 0-11)
Sets the seconds (from 0-59)
Sets a date and time by adding or subtracting a specified number of milliseconds
to/from midnight January 1, 1970
Deprecated. Use the setFullYear() method instead
var d = new Date();
document.write(d.getDate());
document.write(d.getDay());
document.write(d.getFullYear());
document.write(d.getMonth());
document.write(d.getTime() + " milliseconds since 1970/01/01");
document.write(d.getHours());
var d = new Date();
d.setDate(15);
document.write(d);
d.setFullYear(2020);
document.write(d);
d.setMonth(0);
document.write(d);
d.setTime(77771564221);
document.write(d);
var d = new Date();
d.setHours(15);
document.write(d);
var d=new Date();
document.write(d.valueOf());
</script>
Array Objects
The Array object let's you store multiple values in a single variable.
Method
Description
concat()
Joins two or more arrays, and returns a copy of the joined arrays
join()
Joins all elements of an array into a string
pop()
Removes the last element of an array, and returns that element
push()
Adds new elements to the end of an array, and returns the new length
reverse()
Reverses the order of the elements in an array
shift()
Removes the first element of an array, and returns that element
slice()
Selects a part of an array, and returns the new array
sort()
Sorts the elements of an array
splice()
Adds/Removes elements from an array
toString()
Converts an array to a string, and returns the result
unshift()
Adds new elements to the beginning of an array, and returns the new length
valueOf()
Returns the primitive value of an array
Example:
P.MallaReddy
Page 46
var parents = ["Jani", "Tove"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(children);
document.write(family);
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.join() + "<br />");
document.write(fruits.join("+") + "<br />");
document.write(fruits.join(" and "));
document.write(fruits.pop() + "<br />");
document.write(fruits + "<br />");
document.write(fruits.push("Kiwi") + "<br />");
document.write(fruits.push("Lemon","Pineapple") + "<br />");
document.write(fruits);
document.write(fruits.reverse());
document.write(fruits.slice(0,1) + "<br />");
document.write(fruits.slice(1) + "<br />");
document.write(fruits.slice(-2) + "<br />");
document.write(fruits.shift() + "<br />");
document.write("Added: " + fruits.splice(2,0,"Lemon") + "<br />");
document.write(fruits.unshift("Kiwi") + "<br />");
document.write(fruits.unshift("Lemon","Pineapple") + "<br />");
document.write(fruits.valueOf());
</script>
Number Object
The Number object is an object wrapper for primitive numeric values.Number objects are created with
new Number().
Number Object Properties
Property
Description
MAX_VALUE
Returns the largest number possible in JavaScript
MIN_VALUE
Returns the smallest number possible in JavaScript
NEGATIVE_INFINITY
Represents negative infinity (returned on overflow)
POSITIVE_INFINITY
Represents infinity (returned on overflow)
Number Object Methods

Methods
Description
toExponential(x)
Converts a number into an exponential notation
toFixed(x)
Formats a number with x numbers of digits after the decimal point
toPrecision(x)
Formats a number to x length
P.MallaReddy
Page 47
toString()
Converts a Number object to a string
valueOf()
Returns the primitive value of a Number object
Example:
var num = new Number(13.3714);
document.write(num.toExponential()+"<br />");
document.write(num.toExponential(2)+"<br />");
document.write(num.toExponential(3)+"<br />");
document.write(num.toExponential(10));
document.write(num.toFixed()+"<br />");
document.write(num.toFixed(1)+"<br />");
document.write(num.toFixed(3)+"<br />");
document.write(num.toFixed(10));
document.write(num.toPrecision()+"<br />");
document.write(num.toPrecision(2)+"<br />");
document.write(num.toPrecision(3)+"<br />");
document.write(num.toPrecision(10));
var num=new Number(15);
document.write(num.toString()+"<br />");
document.write(num.toString(2)+"<br />");
var num=new Number(15);
document.write(num.valueOf());
</script>
Boolean Object
The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).
Method
Description
toString()
Converts a Boolean value to a string, and returns the result
valueOf()
Returns the primitive value of a Boolean object
Example:
var bool = new Boolean(1);
document.write(bool.toString());
P.MallaReddy
Page 48
var bool = new Boolean(0);

document.write(bool.valueOf());
</script>
JavaScript Global Objects and Properties

The JavaScript global properties and functions can be used with all the built-in JavaScript objects .
Global Properties
Property
Infinity
NaN
undefined
Description
A numeric value that represents positive/negative
infinity
"Not-a-Number" value
Indicates that a variable has not been assigned a value
Global Objects
Method
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
isFinite()
isNaN()
Number()
parseFloat()
parseInt()
String()
unescape()
Description
Decodes a URI
Decodes a URI component
Encodes a URI
Encodes a URI component
Encodes a string
Evaluates a string and executes it as if it was script
code
Determines whether a value is a finite, legal number
Determines whether a value is an illegal number
Converts an object's value to a number
Parses a string and returns a floating point number
Parses a string and returns an integer
Converts an object's value to a string
Decodes an encoded string
Example:
document.write(escape("Need tips? Visit W3Schools!"));
eval("x=10;y=20;document.write(x*y)");
document.write("<br />" + eval("2+2"));
document.write("<br />" + eval(x+17));
document.write(isFinite(123)+ "<br />");
document.write(isFinite(-1.23)+ "<br />");
document.write(isFinite(5-2)+ "<br />");
document.write(isFinite(0)+ "<br />");
document.write(isFinite("Hello")+ "<br />");
document.write(isFinite("2005/12/12")+ "<br />");
P.MallaReddy
Page 49
var
var
var
var
var
test1=
test2=
test3=
test4=
test5=
new
new
new
new
new
Boolean(true);
Boolean(false);
Date();
String("999");
String("999 888");
document.write(Number(test1)+
"<br
"<br
"<br
"<br
"<br
/>");
/>");
/>");
/>");
/>");
document.write(isNaN(123)+ "<br />");

document.write(isNaN(-1.23)+ "<br />");
document.write(isNaN(5-2)+ "<br />");
document.write(isNaN(0)+ "<br />");
document.write(isNaN("Hello")+ "<br />");
document.write(isNaN("2005/12/12")+ "<br />");
var str="Need tips? Visit W3Schools!";
var str_esc=escape(str);
document.write(str_esc + "<br />")
document.write(unescape(str_esc))
</script>
P.MallaReddy
Page 50
Dynamic HTML with Java Script
P.MallaReddy
Page 51

Web Technologies

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies

Uploaded by

Copyright:

Available Formats

201

P.Malla Reddy(CSE Dept)

What is web technology?

compnetworking.about.com is the host for this Web page.

example,/od/internetaccessbestuses/bldef-url.htm is the location of this Web page including two

Microsoft Internet Explorer

What is A Web Server?

Text is just English characters used to make up ordinary words.

HTML is a markup language

A markup language is a set of markup tags

HTML tags normally come in pairs like <b> and </b>

Html is tag-based system. A distinction is often drawn between WYSIWYG formatting

Tags are two kinds singleton tags and paired tags.

Html tags are not case-sensitive.

Syntax: - <tag name [Parameter(s)=[values]]>

HTML <title> tag define a document title.

Defines a harder information about the webpage document.

Defines meta information use to improve a rankings in Search Engines.

Defines a Document Title.

Defines a URL link using External Style Sheet, JavaScript etc..

The document Body part

How to Creating a web page

Syntax:- <Hn [ALIGN={LEFT | RIGHT | CENTER}]>

Paragraphs & Line Breaks

An example of Bold Text

An example of Big Text

An example of Emphasized Text

An example of Italic Text

An example of Small Text

An example of Strong Text

An example of Subscript Text

An example of Superscript Text

An example of Underline Text

An example of Teletype Text

An example of Long Quotation Text

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

HTML Link Syntax

Src: specifies URL of the image file.

Alt: this is an alternate text which will be displayed if image is missing.

Indicates start of a table

text is used to help text-based browsers interpret the table date.

terms of integer value or in terms of percentage of available screen area

<TD></TD> </TR> </TABLE>

<td>101</td> <td>MallaReddy</td> </tr> </table>

Text input controls

Checkboxes and radio buttons

File select boxes

Submit and reset button

Text Input Controls:

Single-line text input controls(textbox):

type: Indicates the type of input control you want to create.

Password input controls:

rows: Indicates the number of rows of text area box.

cols: Indicates the number of columns of text area box.

submit: This creates a button that automatically submits a form.

<INPUT TYPE=BUTTON NAME=ID VALUE=CAPTION>

type: Indicates that you want to create a checkbox.

name: Name of the control.

Raido box Control:

type: Indicates that you want to create a radiobox.

name: Name of the control.

Select box Control: