IT-T62 Web Technology UNIT II

UNIT-II
Search and Design: Worldwide search-web searching overview-working of search
engines-search engine promotion-optimization-Search interface. Web protocols-HTTP
DNS- Web Servers-components-software-web hosting. Browsers-HTML and scripting
languages-cookies- Multimedia in web design.

1. WEB SEARCHING OVERVIEW

 The requirements for web wide searching are daunting. Users expect to be
able to quickly type in a simple search phrase at a global search engine like
AltaVista or Google and end up with a realistic result.
 When searching, users are often overwhelmed with too much information, are
shown irrelevant information, or do not get anything at all.
 Despite the resulting frustration, users keep pounding away at search
engines, hoping to get a good result in a matter of minutes.
 Many of the problems with search engine usage have to do with users not
searching correctly. Searching really should be used only when looking for
known items or for very specific topics.
 Consider searching for a general term like “hamburgers”. Search engines may
not necessarily pull up sites about hamburgers or even large hamburgers
restaurant chains.
 In fact, testing this query in some search engines resulted in numerous links
to pages and pages that appeared to have absolutely nothing to do with
hamburgers.
 The problem is that the search term isn’t specific enough. If you search for
something like “white castle slyders”- a regionally famous hamburger in the
United States- may find a more useful list of results.
 When looking for general information on a subject, users usually turn to a
directory rather than a search engine.
 The main difference between a search engine and a directory is that a
directory usually involves some human editing and usually contains a very
limited number of links.
 Yahoo! Is probably the most famous directory around, but it now provides
search engine features as well.
 Many popular search engines now focus more on delivering users to sites that
focus on a particular topic rather than trying to get users to a very specific
site.
 Directories like www.about.com or www.dmoz.org are organized by
individuals who are responsible for a particular type of content.
 The benefit of a directory is that having a site organized by people can result
in limiting content to just the “good sites”.

III Year/VI Sem 1

IT-T62 Web Technology UNIT II
Definition: A web directory is a human-edited and organized
collection of site links and associated information such as
descriptions and reviews.
 In comparison to a directory, a pure search engine is more like the phone
book that you can only search. This is similar to calling your information
service and asking for a phone number, except you ask for something related
to a particular topic.
 Search engines always attempt to be comprehensive and may list numerous
sites without regard to content quality or freshness.
 Search engines are primarily automated in the collection and organization of
links, though today some human editing as well as directory-oriented results
are being used.

2. HOW SEARCH ENGINES WORKS

 First, a large number of pages are gathered off a web site using a process
called spidering.
 Next, the collected pages are indexed to determine what they are about.
 Finally, a search page is built where users can enter queries in and get results
related to their queries.
 The best analogy for the process is that the search engine builds as big a
haystack as possible, then tries to organize the haystack somehow, and finally
lets the user try to find the proverbial needle in the resulting haystack of
information by entering a query on a search page.

Gathering Pages
 Every day the web is growing by leaps and bounds. The true size of the web is
unknown, and it will undoubtedly increase even as you read this sentence.
 At any given moment numerous documents are added and others are
removed.
 Gathering all the pages and keeping things up-to-date is certainly a significant
chore.
 Users always want to know which search engine covers the most of the web,
but the truth is that today even the largest search engines index maybe only
a third of the documents online. Some index only a few percent.
 In the case of local site search engines, the index might also not cover the
entire site nor be updated often.
 Most search engines use programs called spiders, robots, or gathers to
collect pages of the web for indexing.
 Spiders start their gathering process with a certain number of starting point
URLs and work from there by following links.
 For example, if a spider were visiting the URL://www.democommpany.com, it
might see links emanating from this page and then decide to follow them.

Indexing Pages
 The next step search engines take is attempting to determine what a page is
about. This is usually called indexing.

III Year/VI Sem 2

IT-T62 Web Technology UNIT II
 The method each search engine uses varies, but basically an indexer looks at
various components of a page, including possibly its <title>, the contents of
its <meta> tags, comment text, link titles, text in headings, and body text.
 From this information it will try to distill the meaning of the page.
 Each aspect of a page might have different relevance, and within the actual
text, the position or frequency of different words will be taken into account as
well.
 However not all content within a page matters to a search engine.
 For example, stop words are words that a search engine ignore, normally
because they are assumed to be so common as to carry little useful
information.
 Examples of stop words might be “the”, “a”, “an”, and so on.
 The use of stop words improve a search engine by limiting the size of the
index file and focusing it on more content words, it may not match how users
think about queries.

Providing a search mechanism

 The final aspect of a search engine is the search page itself. A search page is
the interface the user makes their query from, and it generally contains a
primary query text box as well as other search fields for advanced users who
may want to modify a query.
 The degree of complexity of the search page varies greatly in public search
engines.
 “Utilize past user experience with public search engines by using
similar layout and labeling in local search facility design, but avoid
imitating aspects of public search engines that deal with the
uncontrollable nature of public web sites.”

III Year/VI Sem 3

IT-T62 Web Technology UNIT II

3. OPTIMIZING FOR SEARCH ENGINES

 Optimizing your site for a search engine is not difficult. The first thing to do is
to start to think like a search engine-in other words, don’t really think at all.
 Search engines literally look at pages and make educated guesses about
what pages are about by following a set of rules to try to understand what
the page is about.
 For example, search engines look for word frequency, <meta> tags, and a
variety of other things.
<meta> Tags
 Many search engines look at the <meta> tags for keywords and descriptions
of a page’s content. A <meta> tag like
<meta name=”keywords” content=”Butler-1000, Robot butler, Robot
butler specifications, where to buy a robot butler, Metallic Man
Servant, Demo Company, robot, butler” />
 Once a search engine looks at the <meta> tags, it rate one site higher then
another based upon the frequency of keywords in the content attribute.
Because of this , some designers load their <meta> tags with redundant
keywords:
<meta name=”keywords” content=” Robot butler, Robot butler,
Robot butler, Robot butler, Robot butler, Robot butler, Robot butler,
Robot butler, Robot butler, Robot butler” />
III Year/VI Sem 4
IT-T62 Web Technology UNIT II
 However, many search engines consider this to be keyword loading and may
drop the page from their index. If the keyword loading is a little obvious and
combinations of words and phrases are repeated,
<meta name=”keywords” content=” Robot butler, Butler-1000,
Metallic Man Servant, Robot butler, Butler-1000, Metallic Man
Servant, Robot butler, Butler-1000, Metallic Man Servant, Robot
butler, Butler-1000,
Metallic Man Servant ” />
 The search engine may not consider this improper. An even better approach
is to make sure the pattern of repeating words isn’t quite as obvious, as
shown here:
<meta name=”keywords” content=” Butler-1000, Robot butler,
Metallic Man Servant, Robot butler, Butler-1000, robot, Robot butler,
Democompany, Metallic Man Servant, Butler-1000, robot , butler,
Robot butler, Butler-1000, ” />
 Search engine also look at the description value for the <meta> tag. For
example,
<meta name=”keywords” content=” The DemoCompany Robot
Butler is the most outstanding metallic man servant on the market.
The Butler-1000 comes complete with multiple personalities and
voice modules including the ever-popular faux-British accent.” />

Titles and File Naming

 One important aspects of search engine ranking is making sure your page has
a very good title. For example,
<title>Robot Butler</title> is a bad title as far as search engine ranking
goes. A better title might be:
<title>Butler-1000: specification of Demo Company’s Robot Butler, the
leading metallic man servant on the market</title>
 The people also look at page titles, and they are used for bookmarking, so a
really long title may be more appropriate for search engines than for users.
 The name of a file can also important for search engines. Rather than naming
a file “butler.htm”, use “butler1000robotbutler.htm”.
 For example, if we named our server dempcompany.com, as well as
www.democompany.com, we may have a URL like this:
http://democompany.com/products/robots/butler1000robotbutler.htm

Relevant Text Content

 One of the best ways to get indexed is to have the keywords and phrases
actually within the content of the page. Many search engines will look at text
within a page, particularly if it is either towards the top of the page or within
heading tags like <h1> or <h2>. Search engines may also look at the
contents of link text. Thus,
<a href=”specifications.htm”>specifications</a>
 is not as search engine friendly as
<a href=”specifications.htm”>Robot Butler specification</a>

III Year/VI Sem 5

IT-T62 Web Technology UNIT II
 One problem with search engines focusing on page text is that designers
often create home pages that are primarily graphic. Search engines accessing
such pages may have little to go on besides the <meta> tag and page title
and thus rank the page lower. Consider using the alt attribute for the <img>
tag to provide some extra information. For example,
<img src=”robot.gif” alt=”Butler-1000: Demo Company’s industry
leading robot butler”/>

Links and Entry Points

 Another aspect of search engine ranking has to do with the number of links
leaving a page, as well as the number of pages that link to a page.
 Landmark pages such as home pages tend to have a lot of outgoing and
incoming links. Search engines would prefer to rank landmark pages highly,
so it is important that key pages in your site have links to them from nearly
every page.
 Another approach to improving search engine ranking is to submit many
pages in a site, or even off a site, to a search engine. All of these entry pages,
often called doorway pages, point to important content within your site.
 Doorway pages are more like decoy pages, as they can be loaded with false
content to attract the visitor and eventually deposit the user at a page they
didn’t really want to see.
 The problem with search engine promotion is that the distance from simple
logical keyword loading to various tricks is a short one.

Tricky Business
 The tricks employed by search engine specialists are numerous and change
all the time. Many ideas are simple add-ons to normal web design techniques.
 Search engine promoters might say, “why not put alt attributes on these
images to improve things. Imagine, for instance, having the following all over
your page:
<img src=”pixel.gif” alt=”robot butler robot butler robot butler” />
 Spamming pages with invisible text, small text, and multiple images, or just
loading the <meta> or <title>tags, are not the most sophisticated
tricks, but they often work.
 Other tricks include the infamous “bait and switch”, where a special search
engine page is created and then posted to a search engine.
 Once the ranking is high, the bait page is replaced with a real page built for
users. A more complicated version of this could be dubbed “feeding the dogs”.
 Distinguishing search engines from regular users isn’t terribly difficult, since
the engines identify themselves and come from consistent IP addresses.
 In reality, “feeding the dogs” is just a modified form of browser detection.
 The problem with all the search engine promotion ideas is that they tempt the
designer to stop building pages for users and start building them for search
engines.
 “Do not design pages solely to attract search engines, as, ultimately,
pages are for people”.

III Year/VI Sem 6

IT-T62 Web Technology UNIT II

4. DESIGNING THE SEARCH INTERFACE

 Assuming that a search facility is needed, a designer should first and foremost
consider what the user wants to search for. Far too often, search engines are
added to a site and set to index everything using a free text search.
 To the user, the ordering of the documents from this type of search may seem
arbitrary, with the most important document not appearing first in the list.
 Designers assume that since public search engines work like this, so should
their local search engines.
 However, global search engines are not very accurate for variety of reasons,
including the fact that numerous sites try to fight their way to the top of
returned results.
 Public search engine results don’t always seem to make sense, and the
ordering often seems more random than systematic.
 The main advantage of local searching is that you can utilize controlled
vocabularies to deal with what users will probably want to search for.

Accessing Search
 Should consider how users will access the search facility. Some sites create a
special button labeled “search” that, when selected, takes the user to a
special search page. Other sites utilize a search field within all pages.
 While putting the search directly on the page eliminates one click for the user,
a search field within a content page must be very basic.
 There still may be a need for a special search page if more complex queries
are to be formed.
 It really isn’t possible to put advanced search mechanisms within every page,
as it tends to make the search facility too prominent and takes away from the
page’s primary purpose of delivering content. Search should be easily found
from every page in a site.
 “When search is available in a site, include a search button or field on
all pages”.

Designing a Basic Search Interface

 The search facility of a site should look the same as the rest of the site. Often
it is not the same because it is added by technical staff, who may not be
concerned when setting up the search templates to match the site’s look and
feel.
 “Search forms and result pages must match the look and feel of a
site”.
 Also, the search form should fit the type of data being searched.
 Consider the golden rule of designing a search facility for a site- the more we
know about what users looking for, the better able we’ll be to help them find
it.
 One way to do this is to analyze what people search for by looking at the
queries they enter. No matter how we figure out what users search for, we
need to help users narrow down their search properly.

III Year/VI Sem 7

IT-T62 Web Technology UNIT II
 For example, if we are searching for names, try to help people enter in last
names or first names into a single text box.
 If part numbers are being searched in a range from 10,000, then let people
know that is the range, limit them to the range, and alert them if they are out
of range.
 A ToolTip set using the title attribute in HTML or a simple JavaScript is an easy
way to let people know about ranges without explicitly printing them
onscreen.
 “A search form should match the content being searched”
 A few search forms that fit the data being searched are shown here:

Part Number: SEARCH

 The primary element of a search
form is the actual search query Enter part in range 1-
field. The query text field should 9999
be large enough to hold atleast a
few search terms without scrolling. On average, users type two keywords in
search fields.
 The size of the search field also is related to the emphasis of the search task for
the page. If search is the primary emphasis of the page and users are going to
form complex searches, an input size in the range of 30 to 40 characters is
common.
 A survey of the public search engines shows that most use a size of 30, 35, or 40
characters for their primary search field, though Google is much larger at 55
characters.
 This size makes the search field a fairly large element, width-wise, on a typical
page.
 When search is a secondary aspect of a page, the size should be about half the
size- usually from 15 to 18 characters, which should allow a few keywords for a
simple query.
 The size of the search box should always be designed with the search terms and
the page layout in mind.
 “Primary search text boxes should be about twice as big as secondary
search text boxes”.
 The second aspect of the search form is the button to execute the search.
Sometimes a form button is used, while other times a custom button is used.
 The use of a form button is probably slightly more intuitive for users. The label of
the button also varies.
 Some favor “Search”, others “Find”, and some even something as simple as
“Go”.
 The search form should fit the types of users the site is designed for.

SEARCH VS Search:
GO

III Year/VI Sem 8

IT-T62 Web Technology UNIT II

5. SEARCH ENGINE PROMOTION

 Site owners always want to be number one in search engines. The war to be in
the search engine has an obvious result- the rise of “pay for position”.
 Consider that the tricks to be at the top of the search engine list spread
rapidly. For common search phrases, it is nearly impossible to stay at the top
of the list for long since other sites use the same search engine promotion
techniques.
 The eventual outcome of the search engine war will almost certainly be a
return to traditional models of information retrieval methods used in other
advertising forms where you pay for audience relevancy and position.

Adding to the Engines

 Getting a site’s pages gathered by a search engine is the first step in making a
site findable on the web. The easiest way to do this is simply to tell search
engines that your site exists.
 Most search engines will allow you to add a URL to be indexed. For example,
Google allows you to add a site for gathering by using a simple form.
 Most web site promotion software, such as WebPositionGold, also includes
automated submission utilities.
 You should consider how many search engines you’ll want to submit your site
to. Yahoo! Numerous studies, suggest that big search sites, particularly Yahoo,
account for most search engine traffic.
 However, some site promotion experts feel this is not correct and believe it is
best to create as many links to sites as possible.
 The reality is that most of these link services are pretty much worthless and
often generate worthless traffic and spam messages.

Robot Exclusion
 It is not always a good idea to have a robot index your entire site. First, some
pages such as programs in your cgi-bin directory don’t need to be indexed.
 Second, many pages may be transitory, and having them indexed may result in
users seeing 404 errors if they enter from a search engine.
 Finally, you may just not want people to enter on every single page-
particularly those pages deep within a site.
 So-called “deep linking” can be confusing for users entering from public search
engines.
 The basic idea of most spiders is to read pages and follow pages as fast as
they can. Most people are not malicious in spidering, but it does happen
inadvertently when a spider keeps reindexing the same dynamically generated
page.

Robots.txt
III Year/VI Sem 9
IT-T62 Web Technology UNIT II
 To deal with limiting robot access, the RobotExclusion protocol was adopted.
The basic idea is to use a special file called robots.txt that should be found in
the root directory of a web site.
 For example, if a spider was indexing http://www.democompany.com, it would
first look for a file at http://www.democompany.com/robots.txt. If it finds a file,
it would analyze the file first before proceeding to index the site.
 The basic format of the robots.txt file is a listing of the particular spider or user
agent. For example,
User-agent: *
Disallow: /cgi-bin/
Disallow: /temp/
Disallow: /archive/
 In this case, we have denied access for all robots to the cgi-bin directory, the
temp directory, and an archive directory- possibly where we found move files
that are very old but still need to be online. Consider this file:
User-agent: *
Disallow: /cgi-bin/
Disallow: /images/
Disallow: /subscribers-only/
Disallow: /resellers.html
 In this file, a special subscribers-only and resellers file has been disallowed for
indexing.
 A malicious spider will, of course, simply ignore this file, and you may be forced
to set your server to block particular IP addresses or user agents if someone
has decided to attack your sites.

Robot Control with <meta>

 An alternative method to the robots.txt file that is useful particularly for those
users who have no access to the root directory of their domain is to use a
<meta> tag to control indexing.
 To disallow indexing of a particular page, use this <meta> tag in the <head>
section of the HTML document:
<meta name=”robots” content= ”noindex ” />
 You can also inform a spider not to follow any links coming out of the page:
<meta name=”robots” content= ”noindex, nofollow ” />
 When using this type of exclusion , just make sure not to confuse the robot with
contradictory information like
 <meta name=”robots” content= ”index, noindex ” />

6. WEB PROTOCOLS

The Internet relies on a number of protocols in order to function properly. A protocol is

simply a standard for enabling the connection, communication, and data transfer
between two places on a network. Here are some of the key protocols that are used for
transferring data across the Internet.

III Year/VI Sem 10

IT-T62 Web Technology UNIT II
HTTP

HTTP stands for Hypertext Transfer Protocol. It is the standard protocol for transferring
web pages (and their content) across the Internet.
• HTTP - Hyper Text Transfer Protocol
o HTTP takes care of the communication between a web server and a web
browser.
o HTTP is used for sending requests from a web client (a browser) to a web
server, returning web content (web pages) from the server back to the
client.
o HTTPS - Secure HTTP
o HTTPS takes care of secure communication between a web server and a
web browser.
o HTTPS typically handles credit card transactions and other sensitive data.
o The GET and POST are two popular methods used by the HTTP protocol.
o It is also called a Stateless Protocol because this protocol is not able to
maintain the previous information.

HTTP Method:
• HTTP method is supplied in the request line and specifies the operation that the client
has requested.
Some common methods:
• Options
• Get
• Head
• Post
• Put
• Move
• Delete
Two methods that are mostly used are the GET and POST:
 GET for queries that can be safely repeated
 POST for operations that may have side effects (e.g. ordering a book from an
on-line store).
The GET Method
 It is used to retrieve information from a specified URI and is assumed to be a
safe, repeatable operation by browsers, caches and other HTTP aware
components
 Operations have no side effects and GET requests can be re-issued
 For example, displaying the balance of a bank account has no effect on the
account and can be safely repeated
 Most browsers will allow a user to refresh a page that resulted from a GET,
without displaying any kind of warning
 Proxies may automatically retry GET requests if they encounter a temporary
network connection problem.
 GET requests is that they can only supply data in the form of parameters
encoded in the URI (known as a Query String) – [downside]
III Year/VI Sem 11
IT-T62 Web Technology UNIT II
 Cannot be unused for uploading files or other operations that require large
amounts of data to be sent to the server.

The POST Method

 Used for operations that have side effects and cannot be safely repeated
 For example, transferring money from one bank account to another has side
effects and should not be repeated without explicit approval by the user
 If you try to refresh a page in Internet Explorer that resulted from a POST, it
displays the following message to warn you that there may be side effects:
 The POST request message has a content body that is normally used to send
parameters and data
 The IIS server returns two status codes in its response for a POST request
 The first is 100 Continue to indicate that it has successfully received the POST
request
 The second is 200 OK after the request has been processed. HTTP response
status codes
o Informational (1xx)
o Successful (2xx)
o Redirection (3xx)
o 301: moved permanently
 Client error (4xx)
o 403 : forbidden
o 404: Not found
 Server error (5xx)
o 503: Service unavailable
505: HTTP version not supported
DNS
All public Web sites run on servers connected to the Internet with public IP
addresses. The Web servers at About.com, for example, have addresses like
207.241.148.80. Although people can type address information like
http://207.241.148.80/ into their Web browser to visit sites, being able to use proper
names like http://www.about.com/ is much more practical.

DNS - Domain Name Service

o is the “phone book” for the Internet

o Map between host names and IP addresses
o DNS often uses UDP for communication
o Host names
o Labels separated by dots, e.g., www.example.org
o Final label is top-level domain
o Generic: .com, .org, etc.

III Year/VI Sem 12

IT-T62 Web Technology UNIT II
o Country-code: .us, .il, etc. Domains are divided into second-level domains,
which can be further divided into subdomains, etc.
o E.g., in www.example.com, example is a second-level domain
o A host name plus domain name information is called the fully qualified
domain name of the computer
o Above, www is the host name, www.example.com is the FQDN
o nslookup program provides command-line access to DNS (on most
systems)
o looking up a host name given an IP address is known as a reverse lookup
o Recall that single host may have multiple IP addresses.
o Address returned is the canonical IP address specified in the DNS system.
o ipconfig (on windows) can be used to find the IP address (addresses) of
your machine
o ipconfig /displaydns displays the contents of the DNS Resolver Cache
(ipconfig /flushdns to flush it)

7. WEB SERVERS
 Web server is just a computer running a piece of software that fulfills HTTP
requests made by browsers.
 In the simplest sense, a web server is just a file server- and a slow one at
times. However, a web server isn’t just a file server, because it can also run
programs and deliver results.
 Web servers could also be considered application servers- if, occasionally,
simple or slow ones.

Web Server Components

 A web server is composed of both Hardware and Software.
 The primary operation of a web server is to copy the many files making up a
web page from disk to network as fast as possible for numerous simultaneous
users.
 A secondary mission is to run programs for numerous individuals and deliver
the results as fast as possible.
 “Don’t skimp on web server hardware- focus on systems with high-
speed hard drives, a great deal of memory, and good network
interfaces”.
 In general web servers have to deal with multiple requests simultaneously and
need a rich set of development options, most developers tend to use either
windows NT or some variant of UNIX, including Linux, for their operating
system.
 A windows system might make a great departmental server in a corporation
that favors windows systems.
 A Linux system might appeal to a technical-minded individual looking to avoid
spending money on hardware and software, and a high-end sun server running
Solaris might be appropriate for a large e-commerce venture.
 The point is always to choose an operating system for a server based on the
practicality of performance, development, and long-term maintenance
characteristics of the OS.
III Year/VI Sem 13
IT-T62 Web Technology UNIT II
 “Don’t choose an operating system for a web server solely based on
popularity; consider total cost of ownership and suitability for
development and long-term maintenance”.

Hardware Component Considerations

While a fast processor seems key to a fast web

server, the reality is that computational
Processor requirements of a web server are limited.
Multiple processors may be more useful than a
single fast processor when dealing with
numerous requests made on a server.
A web server may need a large amount of RAM
Memory to hold numerous individual processes running
CGI programs for users or fulfilling file requests.

Web data will constantly move from disk to

Bus memory to network. Don’t limit the data path
with a slow bus
Since a web server’s primary task is delivering
Disk Drive files to a user, a high-speed disk drive that is
kept optimized is a primary goal. Spend extra on
drives with high-speed adapters such as SCSI-3

Once files are retrieved from disk, they are

delivered back to the user via the network. Don’t
Network Interface limit a server by its network interface card.
Consider Fast Ethernet or better. For high-
volume servers, multiple network interfaces may
be mandatory.
Most other aspects of a web server have little
bearing on the delivery of a site. However, some
Other peripherals such as tape drives or other backup
storage facilities are mandatory for site
maintenance.
Web Server Software
 Once the hardware and operating system are selected, it is time to consider
which web server package to use.
 Only a few years ago, there were only two major web servers available:
NCSA’s httpd server for UNIX and CERN’s httpd server for UNIX, both free

III Year/VI Sem 14

IT-T62 Web Technology UNIT II
servers that required a fairly substantial knowledge of UNIX and programming
to use and for development.
 Today, there are dozens of different web servers-both commercial and
freeware- available on a variety of machines.
Operating System Pros Cons
+Tends to run on fast -Can be complicated to
hardware such as use and difficult to set up
UltraSparc and Alpha and maintain.
UNIX systems. -Labor costs may be high.
+Very flexible development -Buy-in costs for
environment. hardware and software
+High-end applications and are relatively high.
servers are available.
+Runs on both high and -May require multiple
low-end hardware. servers for high-volume
Windows +many servers and sites.
NT/2000/XP development tools -Advanced administration
available. may rival UNIX in
+Basic administration is difficulty.
simple. -Guaranteeing server
stability can be
troublesome.
+Available on low-end -Can be complicated to
equipment. use and difficult to
Linux +Cost is low. maintain.
+Many servers and -Lacks some commercial
development tools software support found
available. with mainstream UNIX
systems like Solaris.
+Easy to run. -Not a multiuser
+Low equipment costs. environment.
+Inexpensive software. -Not as robust as NT or
UNIX for server
Windows 98/ME applications.
-Selection of web
software is limited,
compared to Windows NT
or UNIX variants.
-Security concerns can be
significant.

+Easy to run and -Traditional Macintosh OS

administer. is not suitable for Web
+Low equipment costs. serving, though the UNIX
Macintosh +Inexpensive software. based OSX is.
-Selection of Web
software is limited
III Year/VI Sem 15
IT-T62 Web Technology UNIT II
compared to windows or
straight UNIX.
-Often not as robot as NT
or UNIX for serving.
 On the basis of surveys and analysis of reachable servers on the Internet, the
following are considered to be some of the most common web servers used,
though their exact market percentage is a topic of hot debate.
Apache Zeus
Microsoft’s IIS WebStar
IPlanet servers Domino

Apache(http: //www.apache.org/)
Apache
 It is an excellent server because of its two important
features: Reliability and Efficiency.
 It is more popular because it is an open source software.
 Apache web server is best suitable for UNIX system but it can
also be used on Window box.
 The apache web server can be configured as per the
requirements using the file httpd.conf.
 This file is present in the apache software package.
IIS
 The internet information services or internet information
server is a kind of web server provided by Microsoft.
 This server is most popular on windows platform.
 For IIS server, the behavior is controlled by modifying the
window based management programs called IIS snap in.
 We can access IIS snap in through the control panel-
>Administrator Tools.

Sun(Servers formerly known an iPlanet or Netscape)

 Sun servers born from the iPlanet joint venture between sun and Netscape after
the merger between Netscape and AOL, constitute a large number of web
servers.
 The servers are well developed, as they represent more than four generations of
software releases.
 The servers are very developer friendly and powerful, with support for databases
and directory services, content management, HTTP 1.1, and a variety of other
features.

4D WebStar( http://www.starnine.com/)
 Initially a popular web server for the Macintosh originally based on MacHTTPD,
WebStar integrates well with the traditional macintosh interface.
 The server has solid security features and supports native macintosh
technologies, as well as UNIX-style CGI programs, PHP, a java virtual machine for
server side java, and extended SSI.
 Apache on OSX tends to be a better choice for larger Macintosh-powered sites.
III Year/VI Sem 16
IT-T62 Web Technology UNIT II

Lotus Domino(http:// www.lotus.com/domino)

 Domino is an example of the collision between traditional web serving and
messaging and groupware.
 Domino runs on windows servers, variants of UNIX, and even large IBM systems
such as AS/400s.
 It is often used in corporate intranet and extranet environments where workflow
and integration with messaging and backend systems may be more important
than raw web serving performance.

Zeus(http://www.zeus.com)
 Zeus as a contender for the fastest web server. This server is becoming popular
with extremely high volume web sites.
 The zeus server does not lack development capabilities, as it provides not only
java compatibility but supports both IIS’s ISAPI interface and the NSAPI interface
introduced on Netscape Enterprise servers.

8. Web hosting
 As websites become more critical to the information on frastructure of the
companies, there is a growing need to provide high-quality, high-availability
solutions.
 For example a business selling something only online can’t afford to have its site
go down at all. The serving of a site to an e-business is as critical as power and
telephone services would be to a traditional business.
 This trend might be termed the “utilization” of the web, as some may consider
the health and delivery of their web site as important as other utilization of the
web as some may consider the health and health and delivery of their web sites
as important as other efficient and reliable manner, firms quickly discover that it
is in fact quite expensive for companies for develop in house the talents and
facilities to run a mission-critical website.
 Therefore, many firms have decided to outsource their web facilities. Web server
outsourcing comes in many favours, but many of the differences revolve around
two factors. The first differentiating factor is whether your site is sharing a
machine with other sites the second is whether or not the machine being used
in owned and managed by you or the outsource vendor. Each type of service will
be discussed in term with special focus on their pros and cons.

Shared hosting
 The most basic form of hosting, shared hosting ranges from free web space
added to other services or in exchange for advertisement placement to high end
application service providers.
 At the low end many internet service providers will provide a directory on one of
their web servers with a few megabytes of diskspace and possibly access to a
few shared tools that can be used on your website such as simple form handling
scripts counters or message boards.
III Year/VI Sem 17
IT-T62 Web Technology UNIT II
 Usually the URL for a site like this is of service lacks any customization like your
domain name and it may impose limits on traffic delivered or programming tools
that can be used.
 The upside of these types of services is that they are often free or may be
included in the cost of your Internet connection.
 There are also many vendors who will provide free web services in exchange for
personal information for marketing purpose, or if you agree to show the banner
advertisement, they book on your site.
 While these services are appealing to home users or those looking to put up on
site for fun, most will prefer other terms of shared hosting.

Dedicated hosting
 Because of the downside of sharing a server with others most notably security
and control many people opt to use a dedicated server.
 Dedicated servers are advantageous because you can customize your server
with whatever tools or programs you like, and you are not affected by other sites
as much. However, the trade-off is cost.
 Dedicated server tend to be more expensive.
There are two forms of dedicated server hosting. The first is where the outsource
vendor owns and maintains the equipment. This may be called fully managed or
dedicated hosting. The other is where you own and may ever be responsible for
maintaining your server.

9. HTML

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language

 HTML is a markup language

 A markup language is a set of markup tags

 The tags describes document content

 HTML documents contain HTML tags and plain text

 HTML documents are also called web pages

HTML 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

III Year/VI Sem 18

IT-T62 Web Technology UNIT II
 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

<tagname> content</tagname>

HTML Elements

"HTML tags" and "HTML elements" are often used to describe the same thing.

But strictly speaking, an HTML element is everything between the start tag and the end
tag, including the tags:

HTML Element:
<p>This is a paragraph.</p>

Web Browsers

The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox,
Safari) is to read HTML documents and display them as web pages. The browser does
not display the HTML tags, but uses the tags to interpret the content of the page:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>
<body>
<h1>This a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

III Year/VI Sem 19

IT-T62 Web Technology UNIT II

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Elements

HTML documents are defined by HTML elements. An HTML element is everything from the
start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a This is a link </a>
href="default.htm">
<br>

* The start tag is often called the opening tag. The end tag is often called the closing
tag.
III Year/VI Sem 20
IT-T62 Web Technology UNIT II
HTML Element Syntax

 An HTML element starts with a start tag / opening tag

 An HTML element ends with an end tag / closing tag

 The element content is everything between the start and the end tag

 Some HTML elements have empty content

 Empty elements are closed in the start tag

 Most HTML elements can have attributes

HTML Attributes

Attributes provide additional information about HTML elements.

HTML Attributes

 HTML elements can have attributes

 Attributes provide additional information about an element

 Attributes are always specified in the start tag

 Attributes come in name/value pairs like: name="value"

Attribute Example

HTML links are defined with the <a> tag. The link address is specified in the href
attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>

Below is a list of some attributes that can be used on any HTML element:
Attribute Description
Class Specifies one or more classnames for an element (refers to a class in a
style sheet)
Id Specifies a unique id for an element
Style Specifies an inline CSS style for an element
Title Specifies extra information about an element (displayed as a tool tip)

HTML Comments

Comments can be inserted into the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

Example
<!-- This is a comment -->
III Year/VI Sem 21
IT-T62 Web Technology UNIT II
HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new
paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a
complete reference).
HTML Links

Links are found in nearly all Web pages. Links allow users to click their way from page
to page.
• Hyperlink
– References other sources such as XHTML documents and images
– Both text and images can act as hyperlinks
– Created using the a (anchor) element
• Attribute href
– Specifies the location of a linked resource
• Link to e-mail addresses using mailto: URL
• <strong> tag
– Bold

Example:
<a href = "mailto:[email protected]">
[email protected]
</a>

Example: 1
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click a name to go to that page.</strong></p>
<!-- Create four text hyperlinks -->
<p><a href = "http://www.deitel.com">Deitel</a></p>
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
<p><a href = "http://www.usatoday.com">USA Today</a></p>

III Year/VI Sem 22

IT-T62 Web Technology UNIT II
</body>
</html>

Images
• Three most popular formats
– Graphics Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphics (PNG)
– img element
• src and alt attribute
src - Specifies the location of the image file.
alt - Display the when it is not possible to display the image
• width and height
• Pixels (“picture elements”)
• Empty elements
– Terminated by character / inside the closing right angle bracket (>), or by
explicitly including the end tag
• br element
– Line break
Example:
<img src = "jhtp.jpg" height = "238" width = "183"
alt = "Java How to Program book cover" />
Example:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>
<img src = "xmlhtp.jpg" height = "238" width = "183"
III Year/VI Sem 23
IT-T62 Web Technology UNIT II
alt = "XML How to Program book cover" />
<img src = "jhtp.jpg" height = "238" width = "183"
alt = "Java How to Program book cover" />
</p>
</body>
</html>

Special Characters and More Line Breaks

• Character entity references (in the form &code;)
• Numeric character references (e.g. &#38;)
• del
– Strike-out text
• sup
– Superscript text
• sub
– Subscript text
• <hr />
– Horizontal rule (horizontal line)
Example:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program - Contact Page
</title>
</head>
<body>

<!-- special characters are entered -->

<!-- using the form &code; -->
<p>
Click
<a href = "mailto:[email protected]">here
</a> to open an e-mail message addressed to
[email protected].

III Year/VI Sem 24

IT-T62 Web Technology UNIT II
</p>
<hr /> <!-- inserts a horizontal rule -->
<p>All information on this site is <strong>&copy;</strong>
Deitel <strong>&amp;</strong> Associates, Inc. 2002.</p>
<!-- to strike through text use <del> tags -->
<!-- to subscript text use <sub> tags -->
<!-- to superscript text use <sup> tags -->
<!-- these tags are nested inside other tags -->
<p><del>You may download 3.14 x 10²
characters worth of information from this site.</del>
Only _one download per hour is permitted.</p>

<p>Note: <strong>&lt; &frac14;</strong> of the information

presented here is updated daily.</p>
</body>
</html>

Unordered Lists
• Unordered list element ul (<ul>)
– Creates a list in which each item begins with a bullet symbol (called a
disc)
– li (list item) using <li>
• Entry in an unordered list
Syntax:
<ul> using bullet name
<li>data</li>
<li>data</li>
</ul>
Example:
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
III Year/VI Sem 25
IT-T62 Web Technology UNIT II
-->
<!-- Unordered list containing hyperlinks -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>

<p><strong>Click on a name to go to that page.</strong></p>

<!-- create an unordered list -->

<ul>
<!-- add four list items -->
<li><a href = "http://www.deitel.com">Deitel</a></li>
<li><a href = "http://www.w3.org">W3C</a></li>
<li><a href = "http://www.yahoo.com">Yahoo!</a></li>
<li><a href = "http://www.cnn.com">CNN</a></li>
</ul>
</body>
</html>

Nested and Ordered Lists

• Represent hierarchical relationships
• Ordered lists (ol)
– Creates a list in which each item begins with a number
Syntax for order list:
<ol>
<li>----------</li>
<li>--------</li>
</ol>
III Year/VI Sem 26
IT-T62 Web Technology UNIT II
Syntax for Nested list:
<ul>
<ol>
<li>----------</li>
<li>--------</li>
</ol>
</ul>

Example:
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- Advanced Lists: nested and ordered -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Internet and WWW How to Program - Lists</title>
</head>
<body>
<h1>The Best Features of the Internet</h1>
<!-- create an unordered list -->
<ul>
<li>You can meet new people from countries around
the world.</li>
<li>
You have access to new media as it becomes public:
<!-- this starts a nested list, which uses a -->
<!-- modified bullet. The list ends when you -->
<!-- close the <ul> tag. -->
<ul>
<li>New games</li>
<li>
New applications

<!-- nested ordered list -->

<ol>
<li>For business</li>
<li>For pleasure</li>
</ol>
</li>

<li>Around the clock news</li>

<li>Search engines</li>
<li>Shopping</li>
<li>
Programming
III Year/VI Sem 27
IT-T62 Web Technology UNIT II

<!-- another nested ordered list -->

<ol>
<li>XML</li>
<li>Java</li>
<li>XHTML</li>
<li>Scripts</li>
<li>New languages</li>
</ol>

</li>

</ul> <!-- ends the nested list of line 27 -->

</li>

<li>Links</li>
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li>

</ul> <!-- ends the unordered list of line 18 -->

</body>
</html>

HTML Tables
Basic HTML Tables
• Organize data into rows and columns
• Table Element
– Attribute border
• Specifies the table’s border width in pixels
– Attribute summary
• Describes the table’s contents
– Attribute caption

III Year/VI Sem 28

IT-T62 Web Technology UNIT II
• Describes the table’s content and helps text-based browsers
interpret table data
– Head section (header cell, defined with a thead element)
• Contains header information such as column names
• tr element (defines an individual table row)
• th element (defines the columns in the head section)
– Foot section (defined with a tfoot element)
– Table body (defined with a tbody element)
– Data cells (defined with td element)
Syntax:
<table>
<caption align=”top”>
-------name of table------
</caption>
<tr>
<td>---------</td>
<td-----------</td>
</tr>
<table>
Example:

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- Creating a basic table -->

<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A simple XHTML table</title>
</head>
<body>

<!-- the <table> tag opens a table -->

<table border = "1" width = "40%"
summary = "This table provides information about
the price of fruit">

<!-- the <caption> tag summarizes the table's -->

<!-- contents (this helps the visually impaired) -->
<caption><strong>Price of Fruit</strong></caption>
<!-- the <thead> is the first section of a table -->
<!-- it formats the table header area -->
<thead>
<tr> <!-- <tr> inserts a table row -->
<th>Fruit</th> <!-- insert a heading cell -->
<th>Price</th>
</tr>
III Year/VI Sem 29
IT-T62 Web Technology UNIT II
</thead>

<!-- the <tfoot> is the last section of a table -->

<!-- it formats the table footer -->
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>

<!-- all table content is enclosed -->

<!-- within the <tbody> -->
<tbody>
<tr>
<td>Apple</td> <!-- insert a data cell -->
<td>$0.25</td>
</tr>
<tr>
<td>Orange</td>
<td>$0.50</td>
</tr>

<tr>
<td>Banana</td>
<td>$1.00</td>
</tr>

<tr>
<td>Pineapple</td>
<td>$2.00</td>
</tr>
</tbody>

</table>

</body>
</html>

III Year/VI Sem 30

IT-T62 Web Technology UNIT II

Nested table:
 Nested table means with in the table.
Example:
<html>
<head>
<title>Nested table</title></head>
<body>
<table border=”1”>
<caption align=”top”>
<b>Engg college</b>
</caption>
<tr>
<td>first year</td>
<td>second year</td>
</tr>
<tr>
<td>third year</td>
<td>
<table border=”1”>
<caption align=”top”>
<b>DEPT</b>
</caption>
<tr>
<td>IT</td>
<td>CSE</td>
</tr>
<tr>
<td>ECE</td>
<td>MECH</td>
</tr>
III Year/VI Sem 31
IT-T62 Web Technology UNIT II
</table>
final year</td>
</tr>
</table>
<h1> This is Nested table</h1>
</body>
</html>

Cell padding and cell spacing attribute:

<html>
<head>
<title>cell padding and cell spacing</title></head>
<body>
<table border=”1” cellpadding=”8” cellspacing=”20”>
<caption align=”top”>
<b> Cellpadding and cell spacing </b>
</caption>
<tr><center/>
<td>Arun</td>
<td>Indhu</td>
</tr>
<tr><center/>
<td>Meera</td>
<td>raj</td>
</tr>
</table>
</body>
</html>

III Year/VI Sem 32

IT-T62 Web Technology UNIT II

Row span cols span

<html>
<head>
<title>rowspan and colspan</title>
<body>
<table border=”2”>
<caption align=”top”>
<b> Rowspan and Colsspan</b>
<tr>
<th rowspan=2>first
<th colsspan=3> second
</tr>
<tr>
<th>one
<th>two
<th>three
</tr>
</table>
</body>
</html>

III Year/VI Sem 33

IT-T62 Web Technology UNIT II
HTML Frames and IFrame tag with Example
Frames
Allow browser display more than one document simultaneously
– Element frameset
• Attribute cols
– Specifies the frameset’s column layout
• Attribute rows
– Specifies the number of rows and the size of each row
• Element frame
– Specifies the documents that will be loaded
– Attribute src
• Specifies URL of the page to display
IFrame tag
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML
document.
syntax:
An inline frame is marked up as follows:
<iframe src="http://www.w3schools.com"></iframe>
Iframe - Set Height and Width
syntax:
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - Remove the Border

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Use iframe as a Target for a Link

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>
<a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a>
</p>
Example:
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!-- XHTML Frames I -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>frameset</title>
<frameset cols="50%,50%">
<frame name="top" src="row.html"/>

<frameset rows="*,170">
<frame name="bottom" src="lisy.html"/>
<frame name="top" src="padd.html"/>
</frameset>
III Year/VI Sem 34
IT-T62 Web Technology UNIT II
</frameset>
</html>

Noresize And Scrolling

It's possible to further customize the <frame> tag using the noresize and scrolling
attributes.
HTML Code:
<html>
<body>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="title.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset>
</frameset>
</body>
</html>

HTML Forms
Form components:
 Label
 Text
 Textarea
 Button
 Radio button
 Check box
 Menus

• Element form
– Attribute method
• Specifies how the form’s data is sent to Web server

III Year/VI Sem 35

IT-T62 Web Technology UNIT II
• method = “post”
– Appends form data to the browser request
• method = “get”
– Appends form data directly to the end of the URL
– Attribute action
• Specifies the URL of a script on the Web server
– input
• Specifies data to provide to the script that processes the form
Syntax:
<form>……………..</form>
Example:
<html>
<head>
<title>form</title>
</head>
<body>
<form>
</form>
</body>
</html>

•Element text area

– Inserts a multiline text box (text area)
– Attribute rows
• Specifies the number of rows
– Attribute cols
• Specifies the number columns
– Input “password”
• Inserts a password box with the specified size
Syntax:
<textarea cols=”40” rows=”5” name=”myname”>
</textare>
Example:
<html>
<head>
<title>Text area</title>
III Year/VI Sem 36
IT-T62 Web Technology UNIT II
</head>
<body>
<form>
<textarea cols=”40” rows=”5” name=”example”>
</textarea>
</form>
</body>
</html>

• Element Label
– It is used to write the text.

Syntax:
<label> input string</label>
Example: <html>
<head>
<title>form</title>
</head>
<body>
<form>
<label>this is web technology</label>
</form>
</body>
</html>

III Year/VI Sem 37

IT-T62 Web Technology UNIT II

• Element Text:
– It is typically required to place one line text.
Syntax:
<input type=”text” size =”20” value=””>
</input type>
Example:
<html>
<head>
<title>form</title>
</head>
<body>
<form>
<input type=”text” size =”20” value=””>
</input type>
</form>
</body>
</html>

• Element checkbox
– Enable users to select from a set of options
Syntax:
<input type=”check box” name=”option1” value=”name of the
checkbox”>
</input type>
III Year/VI Sem 38
IT-T62 Web Technology UNIT II
Example:
<html>
<head>
<title>checkboxes</title></head>
<body>
<form name=”checkbox”>
<div align=”center”><br>
<b>Select the fruits name</b></br>
<input type=”checkbox” name=”option1” value=”apple”>Apple</input
type>
<input type=”checkbox” name=”option2”
value=”orange”>orange</input type>
</div>
</form>
</body>
</html>

• Element Radio Button

– It is used to indicate from several choices.
Syntax:
<input type=”radio” name=”group1” value=”apple”>Apple
</input type>
Example:
<html>
<head>
<title>checkboxes</title></head>
<body>
<form name=”checkbox”>
<div align=”center”><br>
<b>Select the fruits name</b></br>
<input type = "radio" name="group1" value = "Links"
/>Apple</br>
III Year/VI Sem 39
IT-T62 Web Technology UNIT II
<input type = "radio" name="group2" value = "Links"
/>orange</br>
</div>
</form>
</body>
</html>

•Element Button
– Button are two types one is submit and another one is reset.
– Using two methods get and post.
Syntax:
<input type=”submit” value=”send></input type>
<input type=”reset” value=”clear”></input type>
Example:
<html>
<head>
<title>checkboxes</title></head>
<body>
<form name=”myfrom” action="www.google.com"
method="post">
<input type = "submit" value ="Submit " />
<input type = "reset" value ="Clear " />
</form>
</body>
</html>

III Year/VI Sem 40

IT-T62 Web Technology UNIT II

• Element Menu
– Adds items to the drop-down list
– Attribute selected
• Specifies which item initially is displayed as the selected item
Syntax:
<select name=”menu name”>
<option value=”name of item”></option value>
</select>
Example:
<html>
<head>
<title>checkboxes</title></head>
<body>
<form name=”checkbox”>
<div align=”center”><br>
<b>Select the fruits name</b></br>
<select name=”Fruits”>
<option value=”Apple”>Apple</option>
<option value=”Mango”>Mango</option>
<option value=”Orange”>Orange</option>
</select>
</div>
</form>
</body>
</html>

III Year/VI Sem 41

IT-T62 Web Technology UNIT II

Example:
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- Form Design Example 2 -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Internet and WWW How to Program - Forms</title>
</head>

<body>

<h1>Feedback Form</h1>

<p>Please fill out this form to help

us improve our site.</p>

<form method = "post" action = "/cgi-bin/formmail">

<p>
<input type = "hidden" name = "recipient"
value = "[email protected]" />
<input type = "hidden" name = "subject"
value = "Feedback Form" />
<input type = "hidden" name = "redirect"
value = "main.html" />
</p>

<p><label>Name:
<input name = "name" type = "text" size = "25" />
</label></p>
III Year/VI Sem 42
IT-T62 Web Technology UNIT II

<!-- <textarea> creates a multiline textbox -->

<p><label>Comments:<br />
<textarea name = "comments" rows = "4" cols = "36">
Enter your comments here.
</textarea>
</label></p>
<!-- <input type = "password"> inserts a -->
<!-- textbox whose display is masked with -->
<!-- asterisk characters -->
<p><label>E-mail Address:
<input name = "email" type = "password"
size = "25" />
</label></p>

<p>
<strong>Things you liked:</strong><br />

<label>Site design
<input name = "thingsliked" type = "checkbox"
value = "Design" /></label>

<label>Links
<input name = "thingsliked" type = "checkbox"
value = "Links" /></label>

<label>Ease of use
<input name = "thingsliked" type = "checkbox"
value = "Ease" /></label>

<label>Images
<input name = "thingsliked" type = "checkbox"
value = "Images" /></label>
<label>Source code
<input name = "thingsliked" type = "checkbox"
value = "Code" /></label>
</p>

<p>
<input type = "submit" value =
"Submit Your Entries" />
<input type = "reset" value =
"Clear Your Entries" />
</p>

</form>

III Year/VI Sem 43

IT-T62 Web Technology UNIT II
</body>
</html>

HTML Styles - CSS

CSS (Cascading Style Sheets) is used to style HTML elements.

Look! Styles and colors

This text is in Verdana and red

This text is in Times and blue

This text is 30 pixels high

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML
elements.

CSS can be added to HTML in the following ways:

 Inline - using the style attribute in HTML elements

 Internal - using the <style> element in the <head> section

 External - using an external CSS file

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of
an element.
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
III Year/VI Sem 44
IT-T62 Web Technology UNIT II
The HTML <style> Element

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a
browser:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML Style Example - Background Color

The background-color property defines the background color for an element:

Example
<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the
text in an element:
Example
<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
The font-family, color, and font-size properties make the old <font> tag obsolete.

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

Example
<!DOCTYPE html>
<html>
<body>
III Year/VI Sem 45
IT-T62 Web Technology UNIT II
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal
styles are defined in the <head> section of an HTML page, by using the <style> tag,
like this:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing one
file. Each page must link to the style sheet using the <link> tag. The <link> tag goes
inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML Style Tags

Tag Description
<style Defines style information for a document
>
<link> Defines the relationship between a document and an external resource

HTML Layouts

 Web page layout is very important to make your website look good.

 Design your webpage layout very carefully.

Example
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
III Year/VI Sem 46
IT-T62 Web Technology UNIT II
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-

color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Copyright © W3Schools.com</div>

</div>
</body>
</html>

The HTML code above will produce the following result:

Main Title of Web Page
Menu
HTML
CSS
JavaScript
Content goes here
Copyright © W3Schools.com

HTML Layouts - Using Tables

A simple way of creating layouts is by using the HTML <table> tag.

Example
<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">

<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
III Year/VI Sem 47
IT-T62 Web Technology UNIT II
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
Content goes here
CSS
JavaScript

Copyright © W3Schools.com

HTML Uniform Resource Locators

 A URL is another word for a web address.

 A URL can be composed of words, such as "w3schools.com", or an Internet

Protocol (IP) address: 192.68.20.50. Most people enter the name of the website
when surfing, because names are easier to remember than numbers.

 URL - Uniform Resource Locator

 scheme://host.domain:port/path/filename

Explanation:

 scheme - defines the type of Internet service. The most common type is http
 host - defines the domain host (the default host for http is www)

 domain - defines the Internet domain name, like w3schools.com

 :port - defines the port number at the host (the default port number for http
is 80)

 path - defines a path at the server (If omitted, the document must be stored at
the root directory of the web site)
III Year/VI Sem 48
IT-T62 Web Technology UNIT II
 filename - defines the name of a document/resource

9.Scripting:
 A script consists of a set of instructions that are executed under certain
conditions.
 Web scripting uses small programs that are executed based on user
interaction with a web page.
 Scripting is widely used as part of web development.
 Scripting allows you to turn a simple, static HTML page into a more dynamic
page.
 Web scripts can run in one of two places: the client side, also called the front-
end, and the server side, also called the back-end.
 The client refers to the web browser used to view a web page.
 The server refers to the computer server that hosts the website.
Client side scripting and server side scripting
Client-side scripting
 A client is a party that requests pages from the server and displays them to the
end user.
 Client-side scripting generally refers to the class of computer programs on
the web that are executed client-side, by the user's web browser.
 This type of computer programming is an important part of the Dynamic
HTML (DHTML) concept, enabling web pages to be scripted;
 Client-side scripts are often embedded within an HTML or XHTML document
(hence known as an "embedded script"), but they may also be contained in a
separate file, to which the document (or documents) that use it make reference
(hence known as an "external script").
Client-side|LanguagesExample
There are many client-side scripting languages too.
 JavaScript
 VBScript
 HTML (Structure)
 CSS (Designing)
 AJAX
 jQuery etc.
Client-side | Ref. Example
// sample HTML code
<html>
<head>
<title>Client Side </title>
</head>
<body>
<h1>
Hello C# Corner
</h1>
</body>
</html>
III Year/VI Sem 49
IT-T62 Web Technology UNIT II
Server-side scripting
 The Server is responsible for serving the web pages depending on the client/end
user requirement. It can be either static or dynamic.
 The server-side environment that runs a scripting language is a web server.
 A user's request is fulfilled by running a script directly on the web server to
generate dynamic HTML pages. This HTML is then sent to the client browser.
 It is usually used to provide interactive web sites that interface to databases or
other data stores on the server.
 The primary advantage to server-side scripting is the ability to highly customize
the response based on the user's requirements, access rights, or queries into
data stores.
Server-side|LanguagesExample
There are several languages that can be used for server-side programming:
 PHP
 ASP.NET (C# OR Visual Basic)
 C++
 Java and JSP
 Python
 Ruby on Rails and so on.
Sever Side Example code:
Using system
// namespace
class ServerSide
{
public static void Main()
{
System.Console.WriteLine(“Hello C# Corner”);
// printing a line
}
}
Introducing JavaScript
 JavaScript is a scripting language developed by Netscape that is used to modify
web pages. Most JavaScript must be written in the HTML document between
<SCRIPT> tags.
 You open with a <SCRIPT> tag, write your JavaScript, and write a closing
</SCRIPT> tag. Sometimes, as an attribute to script, you may add
“Language=JavaScript” because there are other scripting languages as well as
JavaScript that can be used in HTML.
 JavaScript is object-oriented.
 An Object in JavaScript is a resource that has specific characteristics known as
properties and provides several services known as methods and events.
JavaScript Properties
 Note that JavaScript code did not need to be compiled – JavaScript is an
interpreted language
 Interpreted vs. compiled languages: – Advantage: simplicity
 Disadvantage: efficiency

III Year/VI Sem 50

IT-T62 Web Technology UNIT II
 JavaScript is a scripting language: designed to be executed within a larger
software environment
 JavaScript can be run within a variety of environments: – Web browsers
o Web servers
o Application containers (general-purpose programming)
 Components of a JavaScript implementation:
o Scripting engine: interpreter plus required ECMA Script functionality (core
library)
o Hosting environment: functionality specific to environment
 Example: browsers provide alert and prompt
 All hosting environment functionality provided via objects
 All data in JavaScript is an object or a property of an object
 Types of JavaScript objects
o Native: provided by scripting engine
 If automatically constructed before program execution, known as a
built-in object (ex: window)
o Host: provided by host environment
 alert and prompt are host objects
Basic JavaScript Syntax:
<script type=”text/javascript”>
----------------------------------
----------------------------------
</script>
Example:
<html>
<head>
<title>javascript</title></head>
<script type=”text/javascript”>
Document.write(“welcome to javascript”);
</script>
<body><center/>
</body>
</html>

Uses of java script:

 java script can be used as an alternative to java applets.
 The java applets need to be downloaded separately even though they are
embedded in XHTML.
III Year/VI Sem 51
IT-T62 Web Technology UNIT II
 Java script can be effectively used for interaction with the user.
 The java script support from elements such as button, textbox, menu and so on.
Simple web application such as calculator, calendar can be developed using java
script.
 Java script can be used to create cookies.
 Java script can be used to detect the visitor’s browsers and can load the page
accordingly.
 Java script can access and modify properties of CSS.
Variables and Data Types
 Type of a variable is dynamic: depends on the type of data it contains
JavaScript has six data types:
i. Number
ii. String
iii. Boolean (values true and false)
iv. Object
v. Null (only value of this type is null)
vi. Undefined (value of newly created variable)
 Primitive data types: all but Object
 typeof operator returns string related to data type
– Syntax: typeof expression
Variables
 Naming conventions
 Global
o Global variables are declared simply by assigning a value:
 x = 10;
 Local
o Local variables are declared inside a function:
 var x;
 Undefined vs. Null-value
 Syntax rules for names (identifiers):
o Must begin with letter or underscore ( _ )
o Must contain only letters, underscores, and digits (or certain other
characters)
o Must not be a reserved word
Reserve Keywords:

Primitive data types:

 Java script defines two entities primitives and objects.

III Year/VI Sem 52

IT-T62 Web Technology UNIT II
 The primitives are for storing the values whereas the object is for storing the
reference to the actual value.
 There are following primitive types used in java script:
 Number
 String
 Boolean
 Null
 Undefined
 There are three types of predefined objects in java script
 Number
 String
 Boolean
These objects are called wrapper objects. These wrapper objects provide
properties and methods which can be used by primitive types.
Variable declaration:
 In java script we can declare the variable using the reserved word var.
 The value of this variable can be anything . it can be string, or it can be Boolean
value:
Example:
<html>
<head>
<title>variable </title>
</head>
<body>
<script type=”text/java script”>
var a,b,c;
a=2;
b=3;
c=a+b;
string=”The Result=”;
document.write(“performing addition of 2 and 3 “+” <br/>”);
document.write(string);
document.write( c);
</script>
</body>
</html>

III Year/VI Sem 53

IT-T62 Web Technology UNIT II
Object
 An object is a set of properties
 A property consists of a unique (within an object) name with an associated value
 The type of a property depends on the type of its value and can vary
dynamically

 There are no classes in JavaScript

 Instead, properties can be created and deleted dynamically

Object Creation:
 Objects are created using new expression

 A constructor is a function
o When called via new expression, a new empty Object is created and
passed to the constructor along with the argument values
o Constructor performs initialization on object
 Can add properties and methods to object
 Can add object to an inheritance hierarchy
 The Object() built-in constructor
o Does not add any properties or methods directly to the object
o Adds object to hierarchy that defines default toString() and valueOf()
methods (used for conversions to String and Number, resp.)
Property Creation
 Assignment to a non-existent (even if inherited) property name creates the
property:
 Object initializer notation can be used to create an object (using Object()
constructor) and one or more properties in a single statement:

Object Methods
• JavaScript functions are stored as values of type Object
• A function declaration creates a function value and stores it in a variable
(property of window) having the
• same name as the function
• A method is an object property for which the value is a function
Types of objects:
Math object
Number object
Date object
Boolean object
String object
Math object:
III Year/VI Sem 54
IT-T62 Web Technology UNIT II
Method Description
Sqrt(num) This method find the square root of number
Abs(num) This method returns absolute value of num
Ceil(num) This method returns the ceil value of number.for eg:ceil(10.3) return 11
Floor(num) This method returns the floor value of number.for eg:floor(10.3) return
10
Pow(a,b) This method compute the a power of b.
Min(a,b) Return the minimum value
Max(a,b) Return the maximum value

Number objects:
Method Description
MAX_VALUE Largest possible number displayed
MIN_VALUE Smallest possible number displayed
NAN When not a number than NAN is displayed
PI The value of PI gets displayed
POSTIVE_INFINITY The positive infinity gets displayed
NEGATIVE_INFINIT The negative infinity gets displayed
Y
Date Object:
1. getTime()
2. getDate()
3. getDay()
4. getMinute()
5. getHour()
6. getSecond()
7. getMilliseconds()
8. getUTCDate()
9. getUTCDay()
10. getUTCMinute()
11. getUTCSeconds()
12. getUTCMilliseconds()
13. setHour(hr,min,sec,ms);
14. setDate(value)
15. getUTCHour()
Boolean object:
This object is the simplest kind of object which is especially when we want
to represent true or false values.
String object:
Method Description
concat(str) This methods is used to concatenation of two string.
touppercase() This methods is used to convert lower case to upper case
tolowercase() This methods is used to convert upper case to lower case
value0f() This method returns the value of string
substring(begin,e This method return the substring specified by begin and end
nd) character

III Year/VI Sem 55

IT-T62 Web Technology UNIT II
charat(index_val) This method will return the character specified by value
index_val

JavaScript Operators
 Operators are used to create compound expressions from simpler expressions.
 Operators can be classified according to the number of operands involved:
 Unary: one operand (e.g., typeof i)
 Prefix or postfix (e.g., ++i or i++ )
 Binary: two operands (e.g., x + y)
 Ternary: three operands (conditional )
Arithmetic Operator:

III Year/VI Sem 56

IT-T62 Web Technology UNIT II
Decision Making:

Example program using operators:

<html>
<head>
<title>variable </title>
</head>
<body>
<script type=”text/java script”>
var a,b,c;
a=2;
b=3;
c=a+b;
string=”The Result=”;
document.write(“performing addition of 2 and 3 “+” <br/>”);
document.write(string);
document.write( c);
</script>
</body>
</html>

III Year/VI Sem 57

IT-T62 Web Technology UNIT II

JavaScript Statements
• Expression statement: any statement that consists entirely of an expression –
Expression: code that represents a value
• Block statement: one or more statements enclosed in { } braces
• Keyword statement: statement beginning with a keyword, e.g., var or if
Flow Control
 If…else
 While
 Do-while
 For
 Return
 Break
 Switch
If else:
The syntax of if else…
If(condition)
statement
else
statement
Example:
<html>
<head>
<title>if condition</title>
</head>
<body>
<script type=”text/javascript”>
var a,b,c;
a=10;b=20;c=30;
if(a>b)
{
if(a>c)
{

III Year/VI Sem 58

IT-T62 Web Technology UNIT II
document.write(“<h3> a is largest number</h3>”);
else
{
document.write(“<h3> c is largest number</h3>”);
}
else
{
if(b>c)
document.write(“<h3> b is largest number</h3>”);
else
{
document.write(“<h3> c is largest number</h3>”);
}
</script>
</body>
</html>

While statement:
 While statements help us in implementing iterative logic of the program.
 The syntax of while is as follows:
While(terminating Condition)
{
Some statement;
Stopping condition;
}
Example:
<html>
<head>
<title>while</title>
</head>
<body>
script type=”text/javascript”>
i=1;

III Year/VI Sem 59

IT-T62 Web Technology UNIT II
while(i<=5)
{
document.write(“Number +i+”,” square+(i+1)+”);
i++;
</script>
</body>
</html>

Do while:
Do while same like that the while statement only one difference that is while
loop is check the condition and execute the statements but do while loop is execute
the statements and check the condition.
 The syntax of while is as follows:
do
{
Some statement;
Stopping condition;
} While(terminating Condition);
For statement:
This is the most commonly used programming construct.
The syntax of for loop is:
For(initial condition;terminating condition;incremental)
Example:
<html>
<head>
<title>while</title>
</head>
<body>
script type=”text/javascript”>
for(i=1;i<=5;i++)
{
document.write(“Number +i+”,” square+(i+1)+”);
}</script>
</body>

III Year/VI Sem 60

IT-T62 Web Technology UNIT II
</html>

Switch statement:
 Switch case statement is basically to execute the desired choice.
 The syntax of this control structure is similar to that in C or C++
Switch(variable name)
{
Case 0:
Break;
Case n:
Break;
}
Example:
<html>
<head>
<title>while</title>
</head>
<body>
script type=”text/javascript”>
d= new Date();
ch=d.getMoth();
switch(ch)
{
Case 1:
Document.write(“January”); Break;
Case 2:
Document.write(“February”); Break;
Case 3:
Document.write(“march”); Break;
Case 4:
Document.write(“April”); Break;
Case 5:
Document.write(“May”); Break;
Case 6:

III Year/VI Sem 61

IT-T62 Web Technology UNIT II
Document.write(“June”); Break;
Case 7:
Document.write(“July”); Break;
Case 8:
Document.write(“August”); Break;
Case 9:
Document.write(“September”); Break;
Case 10:
Document.write(“October”); Break;
Case 11:
Document.write(“November”); Break;
Case 12:
Document.write(“December”); Break;
}
</script>
</body>
</html>

JavaScript Events.
• An event is an occurrence of something potentially interesting to a script:
– Ex: mouseover and mouseout events
• An HTML intrinsic event attribute is used to specify a script to be called when
an event occurs
– Ex: onmouseover
– Name of attribute is on followed by event name
 Event is an activity that represents a change in the environment.
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
 An HTML web page has finished loading
 An HTML input field was changed
 An HTML button was clicked
 Often, when events happen, you may want to do something.
 JavaScript lets you execute code when events are detected.
HTML allows event handler atributes, with JavaScript code, to be added to HTML
elements.

III Year/VI Sem 62

IT-T62 Web Technology UNIT II
<input type =”button” name=”my_button”
onlick=”my_func()”/>
 Onclick is the tag attribute.
 My_func() is a event handler
Example:
<button onclick='getElementById("demo").innerHTML=Date()'>The time
is?</button>
 In the example above, the JavaScript code changes the content of the
element with id="demo".
 In the next example, the code changes the content of it's own element (using
this.innerHTML):
Here is a list of some common HTML events:
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML
element
onmouseout The user moves the mouse away from an HTML
element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page
Example program:
<!DOCTYPE html>
<html>
<body>
<button
onclick="getElementById('demo').innerHTML=Date()">The
time is?</button>
<p id="demo"></p>
</body>
</html>

Output :
Mon May 18 2015 12:28:20 GMT+0530 (India Standard Time)

Functions in JavaScript
 Declared within other functions. These are called “inner functions” and
are the main idea behind closures in JavaScript.
 Built-in functions are almost completely concerned with validating
argument types which are commonly passed into functions or methods as
well as converting variables to and from these types.
 This includes specifics such as NaN(), infinity(), and undefined(), as well as
functions for encoding and decoding data.
 Functions can be created through several different techniques, and since
JavaScript uses first-class functions, they are treated as objects.

III Year/VI Sem 63

IT-T62 Web Technology UNIT II
 Function objects have properties, and can be passed around and used just
like any other object.
 Variables, literals, and objects can be passed as arguments.
 The argument list is an array with the same name.
 Overloading is not implemented, but can be simulated
Function declaration syntax:
function validate()
{
alert(“this is example”);
}
Returning value from the function
We can return some value from the solution using a keyword return.
Function mufunc()
{
Str=”function returned value”;
Return str;
}
Passing parameter from the function:
We can some arguments to the function.
Function myfunc(str1,str2)
{
Str=”passing parameter “+””+str1+””+str2+”;
Return str;
}
Global function of java script:
 Global functions are the top level functions in java script that are
independent of any specific object.
 These functions use the built in objects of the java script.
 Some global functions are:
 encodeURI(URI)
 decodeURI(URI)
 parseInt
 eval
encodeURI(URI)
This function is used to encode the URI. This Function encodes special
characters, except , / ? : @ & = + # $.
For example:
Var uri=”my example.jsp?name”
Document.write(encodeURI(uri)+”<br/>”);

decodeURI(URI)
This functions used to decode the encoded URI.
For example:
Var uri=”my example.jsp?name”
Document.write(encodeURI(uri)+”<br/>”);

III Year/VI Sem 64

IT-T62 Web Technology UNIT II
Document.write(decodeURI(uri)+”<br/>”);
ParseInt:
This function parses a string and returns the integer value;
For example:
parseInt(string.radix);
Eval:
The eval function is used to evaluate the expression;
For example:
Eval(string);
Example program for functions:
<html>
<head>
<title>function</title>
</head>
<script type=”text/javascript”>
Function myfun() // defining of function
{
Document.write(“This statement is within this function”);
}
</script>
<body><center>
<script type=”text/javascript”>
Document.write(“This statement is before a function call”);
Document.write(“<br>”);
Myfun();
</script></center>
</body>
</html>
}

JavaScript Arrays
• The Array built-in object can be used to construct objects with special properties
and that inherit various methods

III Year/VI Sem 65

IT-T62 Web Technology UNIT II
• The Array constructor is indirectly called if an array initializer is used

• Array initializiers can be used to create multidimensional arrays

• Value of length is not necessarily the same as the actual number of elements
Methods inherited by array objects:

Example program for array:

<html>
<head>
<title>array</title>
</head>
<body>
<center>
<h2>Demonstration of 2D array</h2>
<script type=”text/javascript”>
Var a = [ [1,2,3],[4,5,6],[7,8,9] ];
For(i=0;i<3;i++)
{
For(j=0;j<3;j++)
{
Document.write(“<br/>”);
}
</script>
</center>
</body>
</html>

III Year/VI Sem 66

IT-T62 Web Technology UNIT II

JavaScript Boolean:

The Boolean object is used to convert a non-Boolean value to a Boolean value (true
or false).

Create a Boolean Object:

The Boolean object represents two values: "true" or "false".The following

code creates a Boolean object called myBoolean:
Syntax: var myBoolean=new Boolean();
Example:
<!DOCTYPE html>
<html>
<body>
<script>
var b1=new Boolean(0);
var b2=new Boolean(1);
var b3=new Boolean("");
var b4=new Boolean(null);
var b5=new Boolean(NaN);
var b6=new Boolean("false");
document.write("0 is boolean "+ b1 +"<br>");
document.write("1 is boolean "+ b2 +"<br>");
document.write("An empty string is boolean "+ b3 + "<br>");
document.write("null is boolean "+ b4+ "<br>");
document.write("NaN is boolean "+ b5 +"<br>");
document.write("The string 'false' is boolean "+ b6 +"<br>");
</script>
</body>

III Year/VI Sem 67

IT-T62 Web Technology UNIT II
</html>

VB SCRIPTING:

VBScript is a server scripting language. It should not be used for scripting in the
browser. However Internet Explorer supports VBScript. This allows us to
experiment with VBScript in the browser, without the need for a web server. It is the
default scripting language in ASP (Active Server Pages). VBScript is a light version of
Microsoft's programming language Visual Basic

VBScript in HTML:

VBScript is inserted into HTML, between standard <script> and </script> tags.

Use the type attribute in the <script> tag to define the scripting language
"text/vbscript":
Syntax: <html>
<body>
<script type="text/vbscript">
...
</script>
</body>
</html>

VBScript Output:

When VBScript is used on a web server in an ASP page, the statement

response.write() produces output.

When we use Internet Explorer for testing VBScript, we use document.write() to

produce output:
Eg: <html>
<body>
<script type="text/vbscript">
document.write("Hello World!")
</script>
</body>
</html>
VBScript Variable:

Rules for VBScript variable names:

 Must begin with a letter

 Cannot contain a period (.)

 Cannot exceed 255 characters

III Year/VI Sem 68

IT-T62 Web Technology UNIT II
In VBScript, all variables are of type variant, that can store different types of data.

Declaring (Creating) VBScript Variables:

Creating variables in VBScript is most often referred to as "declaring" variables.

You can declare VBScript variables with the Dim, Public or the Private statement as
Eg : Dim x
Dim carname
carname=some value

VBScript Array Variables:

An array variable is used to store multiple values in a single variable.

In the following example, an array containing 3 elements is declared:

Eg: Dim names(2)
names(0)="Tove"
names(1)="Jani"
names(2)="Stale"

VBScript Function:

A Function procedure:

 is a series of statements, enclosed by the Function and End Function

statements
 can perform actions and can return a value

 can take arguments that are passed to it by a calling procedure

 without arguments, must include an empty set of parentheses ()

 returns a value by assigning a value to its name

syntax: Function myfunction()

some statements
myfunction=some value
End Function

Conditional Statements:

Conditional statements are used to perform different actions for different decisions.

In VBScript we have four conditional statements:

 If statement - executes a set of code when a condition is true

 If...Then...Else statement - select one of two sets of lines to execute

III Year/VI Sem 69

IT-T62 Web Technology UNIT II
 If...Then...ElseIf statement - select one of many sets of lines to execute

 Select Case statement - select one of many sets of lines to execute

if...Then...Else:

Use the If...Then...Else statement if you want to

 execute some code if a condition is true

 select one of two blocks of code to execute

eg: If i=10 Then alert("Hello")

Select Case:

You can also use the "Select Case" statement if you want to select one of many
blocks of code to execute:

Eg: Select Case d

Case 1
document.write("Sleepy Sunday")
Case 2
document.write("Monday again!")

Looping Statements:

Looping statements are used to run the same block of code a specified number of
times.

In VBScript we have four looping statements:

 For...Next statement - runs code a specified number of times

 For Each...Next statement - runs code for each item in a collection or each
element of an array

 Do...Loop statement - loops while or until a condition is true

 While...Wend statement - Do not use it - use the Do...Loop statement

instead

For...Next Loop:

Use the For...Next statement to run a block of code a specified number of times.

Eg: For i = 0 To 5
document.write("The number is " & i & "<br />")

III Year/VI Sem 70

IT-T62 Web Technology UNIT II
For Each...Next Loop:

A For Each...Next loop repeats a block of code for each item in a collection, or for
each element of an array.
Eg: <script type="text/vbscript">
Dim cars(2)
cars(0)="Volvo"
cars(1)="Saab"
cars(2)="BMW"
For Each x In cars
document.write(x & "<br />")
Next
</script>

Do...Loop:

The Do...Loop statement repeats a block of code while a condition is true, or until a
condition becomes true.

Eg: Do While i>10

some code
Loop

Eg: Do
some code
Loop While i>10

Eg: Do Until i=10

some code
Loop

Exit a Do...Loop:

You can exit a Do...Loop statement with the Exit Do keyword.

Eg: Do Until i=10
i=i-1
If i<10 Then Exit Do
Loop

10. Cookies
 A cookie is a small piece of information that is persisted between the
multiple client requests.A cookie has a name, a single value, and optional
attributes such as a comment, path and domain qualifiers, a maximum age,
and a version number.
How Cookie works

III Year/VI Sem 71

 IT-T62 Web Technology UNIT II
By default, each request is considered as a new request. In cookies technique, we
add cookie with response from the servlet. So cookie is stored in the cache of the
browser. After that if request is sent by the user, cookie is added with request by
default. Thus, we recognize the user as the old user.

Types of Cookie
There are 2 types of cookies in servlets.
1. Non-persistent cookie
2. Persistent cookie
Non-persistent cookie
It is valid for single session only. It is removed each time when user closes the
browser.
Persistent cookie
It is valid for multiple session . It is not removed each time when user closes the
browser. It is removed only if user logout or signout.

Advantage of Cookies
1. Simplest technique of maintaining the state.
2. Cookies are maintained at client side.
Disadvantage of Cookies
1. It will not work if cookie is disabled from the browser.
2. Only textual information can be set in Cookie object.

How to create Cookie

Cookie ck=new Cookie("user","sonoo jaiswal");//creating cookie object
response.addCookie(ck);//adding cookie in the response

How to delete Cookie

Cookie ck=new Cookie("user","");//deleting value of cookie
ck.setMaxAge(0);//changing the maximum age to 0 seconds
response.addCookie(ck);//adding cookie in the response

How to get Cookies

Cookie ck[]=request.getCookies();
for(int i=0;i<ck.length;i++){
out.print("<br>"+ck[i].getName()+" "+ck[i].getValue());//printing name and val
ue of cookie
}

III Year/VI Sem 72

IT-T62 Web Technology UNIT II

index.html
<form action="servlet1" method="post">
Name:<input type="text" name="userName"/><br/>
<input type="submit" value="go"/>
</form>

FirstServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class FirstServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse respon
se){
try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();

String n=request.getParameter("userName");
out.print("Welcome "+n);

Cookie ck=new Cookie("uname",n);//creating cookie object

response.addCookie(ck);//adding cookie in the response

//creating submit button

out.print("<form action='servlet2'>");
out.print("<input type='submit' value='go'>");
out.print("</form>");

out.close();

}catch(Exception e){System.out.println(e);}
}
}
SecondServlet.java
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class SecondServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response
){

try{
response.setContentType("text/html");
PrintWriter out = response.getWriter();

III Year/VI Sem 73

IT-T62 Web Technology UNIT II

Cookie ck[]=request.getCookies();
out.print("Hello "+ck[0].getValue());

out.close();

}catch(Exception e){System.out.println(e);}
}

web.xml
<web-app>
<servlet>
<servlet-name>s1</servlet-name>
<servlet-class>FirstServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s1</servlet-name>
<url-pattern>/servlet1</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>s2</servlet-name>
<servlet-class>SecondServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>s2</servlet-name>
<url-pattern>/servlet2</url-pattern>
</servlet-mapping>
</web-app>

11. Multimedia in Web Design

 Enrich your Web design project with multimedia elements to captivate and
inform Web page visitors, regardless of which browser they are using.
 Sound files, pictures, animations and video footage are considered forms of
multimedia that you can combine to enhance a website if you take steps to
overcome accessibility challenges that threaten the inherent advantages of
using multimedia elements.
 Be sure that these objects are accessible to a broad range of website visitors
to maximize their advantages.

Embedded Video Footage

 Embedded video is an advantage of using multimedia in a Web design.
Such videos can contain an array of footage to serve not only a
website's mission but also its visitors.

III Year/VI Sem 74

IT-T62 Web Technology UNIT II
 Multimedia of this variety is useful to site visitors who have literacy
challenges and those with visual, audio or cognitive disabilities.
 Provide links to a narration transcript to reach the broadest audience
should accessibility issues occur.
Informative Images
 The advantage of using photos in a multimedia Web design goes
beyond the use of images as decoration. Images in a multimedia
context consist of slide shows or galleries that a website visitor can
view. In situations where you use photos as multimedia objects, embed
them with descriptive HTML code such as a title -- because if a browser
fails to load the images, your website visitor will at least know what
should be there.
Animated Information
 Flash objects are multimedia elements that you can use in your Web
design as well.
 The advantages of adding Flash animations to your design include
featuring scalable, dynamic and media-rich content that stays within
one container on a Web page.
 This content can illustrate how things work or present information in
entertaining ways. Consider including an alternative animation file type
that a visitor can view in the event that your Flash animation fails to
load in the browser they are using.
Sound
 Sound can enhance your Web design project.
 The sound clips you incorporate can be short or long. You may use them to
deliver website visitors information in the form of recorded speech. If you
incorporate multimedia of this type into your design, embed descriptions
within your HTML code and consider linking to a transcript. These extra steps
enable site visitors to review the contents of featured sound files in the event
that an accessibility issue arises.

III Year/VI Sem 75